From f7a5a324b772213e3b668b86caf1d3f00e039965 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期一, 14 十月 2024 09:59:42 +0800
Subject: [PATCH] ll
---
screen/src/views/LogisticsEfficiency.vue | 87 ++++++++++++++++++++++++++++++-------------
1 files changed, 61 insertions(+), 26 deletions(-)
diff --git a/screen/src/views/LogisticsEfficiency.vue b/screen/src/views/LogisticsEfficiency.vue
index 2026b8a..f042f7b 100644
--- a/screen/src/views/LogisticsEfficiency.vue
+++ b/screen/src/views/LogisticsEfficiency.vue
@@ -183,24 +183,48 @@
</div>
<div class="list">
<div class="item">
- <div class="icon"></div>
- <div class="text">鍚堣偉鍘�</div>
- <div class="num">100涓囨敮 | 55%</div>
+ <div class="line">
+ <div :style="{ background: colors[0] }" class="icon"></div>
+ <div class="text">鍚堣偉鍘�</div>
+ </div>
+ <div :style="{ color: colors[0] }" class="num">100涓囨敮 | 55%</div>
</div>
<div class="item">
- <div :style="{ background: colors[0] }" class="icon"></div>
- <div class="text">闆嗘暎涓績</div>
- <div class="num">100涓囨敮 | 55%</div>
+ <div class="line">
+ <div :style="{ background: colors[1] }" class="icon"></div>
+ <div class="text">闆嗘暎涓績</div>
+ </div>
+ <div :style="{ color: colors[1] }" class="num">100涓囨敮 | 55%</div>
</div>
<div class="item">
- <div :style="{ background: colors[1] }" class="icon"></div>
- <div class="text">甯傚叕鍙�</div>
- <div class="num">100涓囨敮 | 55%</div>
+ <div class="line">
+ <div :style="{ background: colors[2] }" class="icon"></div>
+ <div class="text">甯傚叕鍙�</div>
+ </div>
+ <div :style="{ color: colors[2] }" class="num">100涓囨敮 | 55%</div>
</div>
</div>
</div>
</div>
- <div class="right_box_three"></div>
+ <div class="right_box_three">
+ <div class="com_header">
+ <div class="title">
+ <img src="@/assets/images/ic_title@2x.png" class="icon" alt="" />
+ <div>搴撳瓨鎯呭喌</div>
+ </div>
+ <img src="@/assets/images/title@2x.png" class="bg" alt="" />
+ </div>
+ <div class="repertory">
+ <div class="use_ratio">
+ <div class="header">
+ <div>搴撳瓨閲� <span class="num">80/100</span></div>
+ <div>鍒╃敤鐜� 88%</div>
+ </div>
+ <Percent :rate="80" />
+ </div>
+ <div class="list"></div>
+ </div>
+ </div>
</div>
</div>
</div>
@@ -210,7 +234,9 @@
<script setup>
import { ref, onMounted } from 'vue'
import VScaleScreen from 'v-scale-screen'
+import Percent from '@/components/percent.vue'
import dayjs from 'dayjs'
+
import * as echarts from 'echarts'
const colors = ['#FEAF01', '#01ABFE', '#51F9E4']
const weekMap = ['鏄熸湡鏃�', '鏄熸湡涓�', '鏄熸湡浜�', '鏄熸湡涓�', '鏄熸湡鍥�', '鏄熸湡浜�', '鏄熸湡鍏�',]
@@ -666,13 +692,14 @@
.echart_wrap {
position: relative;
+
.pie_text {
width: 104px;
height: 104px;
border: 1px dashed;
border-radius: 50%;
position: absolute;
-
+
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
@@ -682,7 +709,8 @@
justify-content: center;
align-items: center;
font-size: 14px;
- .fs30{
+
+ .fs30 {
font-size: 30px;
}
}
@@ -695,27 +723,34 @@
.list {
margin-left: 36px;
-
.item {
- display: flex;
- align-items: center;
- margin: 8px 0;
-
- .icon {
- width: 16px;
- height: 16px;
- border-radius: 50%;
- margin-right: 6px;
- background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
+ margin-bottom: 14px;
+ font-size: 14px;
+ &:nth-last-child(1){
+ margin: 0;
}
-
- .text {
- margin-right: 6px;
+ .line {
+ display: flex;
+ align-items: center;
+ margin-bottom: 6px;
+ .icon {
+ width: 12px;
+ height: 12px;
+ border-radius: 50%;
+ margin-right: 10px;
+ background: linear-gradient(270deg, #29aeff 0%, #207ff7 100%);
+ }
+ }
+ .num{
+ margin-left: 20px;
}
}
}
}
}
+ .right_box_three{
+
+ }
}
}
--
Gitblit v1.9.3