更新 首页样式

src/views/index/Index.vue

@@ -262,6 +262,12 @@
             <div>饼图</div>
             <div>卸货</div>
           </div>
+          <div class="df aic jcc mt10">
+            <div class="pie-point"></div>
+            <div class="pie-text mr20">已卸货吨位</div>
+            <div class="pie-point" style="background: #58daea"></div>
+            <div class="pie-text">剩余卸货吨位</div>
+          </div>
         </div>
       </div>
     </div>
@@ -442,18 +448,15 @@ function drawPie(type) {
     grid: {
       bottom: 500,
     },
-    legend: {
-      orient: "vertical",
-      left: "left",
-    },
     tooltip: {
       trigger: "item",
     },
+    color: ["#0A6EFA", "#58DAEA"],
     series: [
       {
-        center: ["50%", "50%"],
+        center: ["55%", "50%"],
         type: "pie",
-        radius: "80%",
+        radius: ["60%", "85%"],
         data: [
           { value: indexData.value.finshDiscTons, name: "已卸货吨位" },
           { value: indexData.value.unfinshDiscTons, name: "剩余卸货吨位" },
@@ -647,7 +650,7 @@ onMounted(() => {
 .radio-btns {
   height: 30px;
   width: 60px;
-  border: 1px solid #1486f9;
+  border: 1px solid #008efe;
   line-height: 28px;
   text-align: center;
   font-size: 14px;
@@ -659,18 +662,18 @@ onMounted(() => {
 }
 
 .left-radius {
-  border-top-left-radius: 15px;
-  border-bottom-left-radius: 15px;
+  /* border-top-left-radius: 15px;
+  border-bottom-left-radius: 15px; */
   width: 80px;
 }
 
 .right-radius {
-  border-top-right-radius: 15px;
-  border-bottom-right-radius: 15px;
+  /* border-top-right-radius: 15px; */
+  /* border-bottom-right-radius: 15px; */
   width: 80px;
 }
 .currentbtn {
-  background: #1486f9;
+  background: #008efe;
   color: #fff;
 }
 
@@ -817,4 +820,36 @@ onMounted(() => {
   width: 200px;
   height: 200px;
 }
+
+:deep().amap-marker-label {
+  top: -22px;
+  left: 41px;
+  color: #fff !important;
+  width: 74px;
+  height: 28px;
+  line-height: 22px;
+  background: #212029;
+  border: none;
+  text-align: center;
+  font-size: 12px !important;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+}
+
+.pie-point {
+  width: 6px;
+  height: 6px;
+  background: #0a6efa;
+  border-radius: 30%;
+  margin-right: 6px;
+}
+
+.pie-text {
+  height: 12px;
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #7d7d7d;
+  line-height: 12px;
+}
 </style>