更新 首页样式;todo pie

src/styles/index.css

@@ -25,6 +25,10 @@
   align-items: center;
 }
 
+.aib{
+  align-items: baseline
+}
+
 .aifs {
   align-items: flex-start;
 }

src/views/index/Index.vue

@@ -42,7 +42,7 @@
           </div>
         </div>
         <div class="df aic filter">
-          <div class="mr10 ml24">装货港</div>
+          <div class="mr10">装货港</div>
           <el-select
             style="width: 120px"
             v-model="postData.loadPortId"
@@ -59,7 +59,7 @@
               :value="item.key"
             />
           </el-select>
-          <div class="mr10 ml24">卸货港</div>
+          <div class="mr10 ml20">卸货港</div>
           <el-select
             style="width: 120px"
             v-model="postData.discPortId"
@@ -76,7 +76,7 @@
               :value="item.key"
             />
           </el-select>
-          <div class="mr10 ml24">到港状态</div>
+          <div class="mr10 ml20">到港状态</div>
           <el-select
             style="width: 120px"
             v-model="postData.isArrived"
@@ -87,7 +87,7 @@
             <el-option label="已到港" :value="0" />
             <el-option label="未到港" :value="1" />
           </el-select>
-          <div class="mr10 ml24">航次状态</div>
+          <div class="mr10 ml20">航次状态</div>
           <el-select
             style="width: 120px"
             v-model="postData.abnormalStatus"
@@ -98,7 +98,7 @@
             <el-option label="正常" :value="0" />
             <el-option label="异常" :value="1" />
           </el-select>
-          <div class="mr10 ml24">货种</div>
+          <div class="mr10 ml20">货种</div>
           <el-select
             style="width: 100px"
             v-model="postData.cargoId"
@@ -115,7 +115,7 @@
               :value="item.key"
             />
           </el-select>
-          <div @click="resetFilter" class="all ml24">全部</div>
+          <div @click="resetFilter" class="all ml20">全部</div>
         </div>
       </div>
       <div class="right">
@@ -208,81 +208,61 @@
           </el-dialog>
         </div>
         <div class="data">
-          <div class="df">
+          <div class="df aic">
             <div class="shu"></div>
             <div class="right-title">数据统计</div>
           </div>
           <div class="df data-line">
-            <div class="icon">船</div>
-            <div>
+            <img class="icon" src="../../assets/ship.png" />
+            <div class="data-text">
               <div class="data-title">总航次数</div>
-              <div class="df">
-                <div class="num">3205</div>
+              <div class="df aib">
+                <div class="num">{{ indexData.totalVoyageNum }}</div>
                 <div class="unit">次</div>
               </div>
             </div>
           </div>
           <div class="df data-line">
-            <div class="icon">锚</div>
-            <div>
+            <img class="icon" src="../../assets/rubber.png" />
+            <div class="data-text">
               <div class="data-title">总实际装载吨数</div>
-              <div class="df">
-                <div class="num">12303.33</div>
+              <div class="df aib">
+                <div class="num">{{ indexData.totalLoadTons }}</div>
                 <div class="unit">吨</div>
               </div>
             </div>
           </div>
           <div class="df data-line">
-            <div class="icon">卸货</div>
-            <div>
+            <img class="icon" src="../../assets/unload.png" />
+            <div class="data-text">
               <div class="data-title">总已完成卸货吨位</div>
-              <div class="df">
-                <div class="num">345233.2</div>
+              <div class="df aib">
+                <div class="num">{{ indexData.finshDiscTons }}</div>
                 <div class="unit">吨</div>
               </div>
             </div>
           </div>
           <div class="df data-line">
-            <div class="icon">剩余</div>
-            <div>
+            <img class="icon" src="../../assets/chain.png" />
+            <div class="data-text">
               <div class="data-title">总剩余卸货吨位</div>
-              <div class="df">
-                <div class="num">328192.33</div>
+              <div class="df aib">
+                <div class="num">{{ indexData.unfinshDiscTons }}</div>
                 <div class="unit">吨</div>
               </div>
             </div>
           </div>
         </div>
         <div class="pie">
-          <div class="shu"></div>
-          <div class="right-title">卸货占比</div>
-        </div>
-      </div>
-    </div>
-    <div class="df old" style="background: #f4f5f6">
-      <div>
-        <div class="right-top">
-          <div class="cards card-1">
-            <div>总航次数</div>
-            <div>{{ indexData.totalVoyageNum }}</div>
-          </div>
-          <div class="cards card-2">
-            <div>总实际装载吨位</div>
-            <div>{{ indexData.totalLoadTons }}</div>
-          </div>
-          <div class="cards card-3">
-            <div>总已完成卸货吨位</div>
-            <div>{{ indexData.finshDiscTons }}</div>
+          <div class="df aic">
+            <div class="shu"></div>
+            <div class="right-title">卸货占比</div>
           </div>
-          <div class="cards card-4">
-            <div>总剩余卸货吨位</div>
-            <div>{{ indexData.unfinshDiscTons }}</div>
+          <div id="pie" class="card-5">
+            <div>饼图</div>
+            <div>卸货</div>
           </div>
         </div>
-        <div id="pie" class="card-5">
-          <div>饼图</div>
-          <div>卸货</div>
-        </div>
       </div>
     </div>
   </div>
@@ -330,7 +310,7 @@ function drawMarkers() {
   for (let i of indexData.value.mapPoints) {
     if (i.latitude && i.longitude) {
       let content = `<div style='width:160px'>
-        <img src='https://hhd-pat-1255802371.cos.ap-shanghai.myqcloud.com/frontend/ship-red-icon.png' style='display:block;width:20px;height:20px;margin:6px auto'/
+        <img src='https://frontend-1255802371.cos.ap-shanghai.myqcloud.com/ship-orange-icon.png' style='display:block;width:20px;height:20px;margin:6px auto'/
       </div>`;
 
       let marker = new AMap.Marker({
@@ -653,10 +633,6 @@ onMounted(() => {
 </script>
 
 <style scoped>
-.old {
-  position: fixed;
-  top: -2000px;
-}
 .map-container {
   width: 100%;
   height: calc(100% - 94px);
@@ -743,7 +719,7 @@ onMounted(() => {
   margin-top: 36px;
 }
 
-.ml24 {
+.ml20 {
   margin-left: 24px;
 }
 
@@ -769,24 +745,76 @@ onMounted(() => {
 
 .data {
   width: 267px;
-  height: 466px;
   background: #ffffff;
   border-radius: 4px;
-  margin-top: 16px;
-  margin-bottom: 24px;
+  margin-top: 12px;
+  margin-bottom: 18px;
+  padding-top: 16px;
+  padding-left: 24px;
+  padding-bottom: 20px;
 }
 
 .pie {
   width: 267px;
-  height: 385px;
   background: #ffffff;
   border-radius: 4px;
+  padding-top: 24px;
+  padding-left: 20px;
+  padding-bottom: 50px;
 }
 
 .icon {
   width: 48px;
   height: 48px;
-  background: #008efe;
   border-radius: 4px;
+  margin-right: 16px;
+}
+
+.data-line {
+  align-items: center;
+  width: 219px;
+  border-bottom: 1px solid rgba(216, 216, 216, 0.24);
+  padding: 12px 0;
+}
+
+.shu {
+  width: 3px;
+  height: 16px;
+  background: #008efe;
+  margin-right: 16px;
+}
+
+.right-title {
+  font-size: 20px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #333333;
+}
+
+.data-title {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #616975;
+}
+
+.num {
+  font-size: 30px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #333333;
+  margin-right: 5px;
+}
+
+.unit {
+  font-size: 12px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #353a42;
+}
+
+#pie {
+  width: 200px;
+  height: 200px;
 }
 </style>