更新 首页样式

src/views/index/Index.vue

@@ -10,7 +10,7 @@
         <div class="df data-line">
           <img class="icon" src="../../assets/ship.png" />
           <div class="data-text">
-            <div class="data-title">总航次数</div>
+            <div class="data-title">所有船舶数量</div>
             <div class="df aib">
               <div class="num">{{ shipNum }}</div>
               <div class="unit">次</div>
@@ -20,58 +20,81 @@
         <div class="df data-line">
           <img class="icon" src="../../assets/rubber.png" />
           <div class="data-text">
-            <div class="data-title">总实际装载吨数</div>
+            <div class="data-title">所有船舶吨位</div>
             <div class="df aib">
               <div class="num">{{ shipLoadTons }}</div>
               <div class="unit">吨</div>
             </div>
           </div>
         </div>
-        <div class="pl20 ship-info" v-if="ship.code">
+
+        <div class="df aic jcsb mt30 mb10 aic" v-if="ship.code">
           <div class="df aic">
-            <div class="c5 mr10" style="padding-top: 4px">
+            <div class="shu"></div>
+            <div class="right-title">船舶信息</div>
+          </div>
+          <el-button
+            size="small"
+            type="primary"
+            @click="
+              router.push({
+                path: '/shipManage/shipDetail',
+                query: {
+                  shipCode: ship.code,
+                },
+              })
+            "
+          >
+            详情
+          </el-button>
+        </div>
+        <div class="pl20 ship-info" v-if="ship.code">
+          <!-- <div class="df aic">
+            <div class="c3 mr20" style="padding-top: 4px">
               <img style="width: 20px; height: 20px" :src="icon" alt="" />
             </div>
-            <div class="c5">汇很多科技认证</div>
-          </div>
+            <div class="c7 fs16">汇很多科技认证</div>
+          </div> -->
+
           <div class="df aic">
-            <div class="c5 mr10">船名:</div>
-            <div class="c5">{{ ship.shipname }}</div>
+            <div class="c3 mr20">船名</div>
+            <div class="c7 fs16">{{ ship.shipname }}</div>
           </div>
           <div class="df aic">
-            <div class="c5 mr10">MMSI:</div>
-            <div class="c5">{{ ship.mmsi }}</div>
+            <div class="c3 mr20">MMSI</div>
+            <div class="c7 fs16">{{ ship.mmsi }}</div>
           </div>
           <div class="df aic">
-            <div class="c5 mr10">IMO:</div>
-            <div class="c5">{{ ship.imo }}</div>
+            <div class="c3 mr20">IMO</div>
+            <div class="c7 fs16">{{ ship.imo }}</div>
           </div>
           <div class="df aic">
-            <div class="c5 mr10">船长:</div>
-            <div class="c5">{{ ship.length }}</div>
-            <div class="unit c5">米</div>
+            <div class="c3 mr20">船长</div>
+            <div class="c7 fs16">{{ ship.length }}</div>
+            <div class="unit c7">米</div>
           </div>
           <div class="df aic">
-            <div class="c5 mr10">船宽:</div>
-            <div class="c5">{{ ship.breadth }}</div>
-            <div class="unit c5">米</div>
+            <div class="c3 mr20">船宽</div>
+            <div class="c7 fs16">{{ ship.breadth }}</div>
+            <div class="unit c7">米</div>
           </div>
           <div class="df aic">
-            <div class="c5 mr10">吨位:</div>
-            <div class="c5">{{ ship.loadTons }}</div>
-            <div class="unit c5">吨</div>
+            <div class="c3 mr20">吨位</div>
+            <div class="c7 fs16">{{ ship.loadTons }}</div>
+            <div class="unit c7">吨</div>
           </div>
           <div class="df aic">
-            <div class="c5 mr10">吃水:</div>
-            <div class="c5">{{ ship.draught }}</div>
-            <div class="unit c5">米</div>
+            <div class="c3 mr20">吃水</div>
+            <div class="c7 fs16">{{ ship.draught }}</div>
+            <div class="unit c7">米</div>
           </div>
           <div class="df aic c5">
-            <div class="c5 mr10">船龄:</div>
-            <div class="c5">{{ ship.age }}</div>
-            <div class="unit c5">年</div>
+            <div class="c3 mr20">船龄</div>
+            <div class="c7 fs16">{{ ship.age }}</div>
+            <div class="unit c7">年</div>
           </div>
-          <div class="df jcc mt50">
+
+          <!-- <div class="df jcc mt50">
             <el-button
               style="width: 160px"
               type="primary"
@@ -87,6 +110,32 @@
             >
               查看详情
             </el-button>
+          </div> -->
+        </div>
+        <div v-if="ship.code">
+          <div class="status">
+            航行
+            <img
+              class="status-img"
+              :src="voyageStatus ? checked : unchecked"
+              alt=""
+            />
+          </div>
+          <div class="status">
+            证书
+            <img
+              class="status-img"
+              :src="certsStatus ? checked : unchecked"
+              alt=""
+            />
+          </div>
+          <div class="status">
+            保险
+            <img
+              class="status-img"
+              :src="insuranceStatus ? checked : unchecked"
+              alt=""
+            />
           </div>
         </div>
       </div>
@@ -97,25 +146,25 @@
     <div style="max-width: 1200px">
       <div class="df aic jcsb pl20">
         <div class="df aic">
-          <div class="c5 mr10">船名:</div>
-          <div class="c5">{{ ship.shipname }}</div>
+          <div class="c3 mr20">船名</div>
+          <div class="c7 fs16">{{ ship.shipname }}</div>
         </div>
 
         <div class="df aic">
-          <div class="c5 mr10">MMSI:</div>
-          <div class="c5">{{ ship.mmsi }}</div>
+          <div class="c3 mr20">MMSI</div>
+          <div class="c7 fs16">{{ ship.mmsi }}</div>
         </div>
 
         <div class="df aic">
-          <div class="c5 mr10">IMO:</div>
-          <div class="c5">{{ ship.imo }}</div>
+          <div class="c3 mr20">IMO</div>
+          <div class="c7 fs16">{{ ship.imo }}</div>
         </div>
 
         <div class="df aic">
-          <div class="c5 mr10" style="padding-top: 4px">
+          <div class="c3 mr20" style="padding-top: 4px">
             <img style="width: 20px; height: 20px" :src="icon" alt="" />
           </div>
-          <div class="c5">汇很多科技认证</div>
+          <div class="c7 fs16">汇很多科技认证</div>
         </div>
       </div>
       <div class="df aic jcsa">
@@ -134,31 +183,31 @@
       </div>
       <div class="df aic jcsb pl20">
         <div class="df aic">
-          <div class="c5 mr10">船长:</div>
-          <div class="c5">{{ ship.length }}</div>
-          <div class="unit c5">米</div>
+          <div class="c3 mr20">船长</div>
+          <div class="c7 fs16">{{ ship.length }}</div>
+          <div class="unit c7">米</div>
         </div>
 
         <div class="df aic">
-          <div class="c5 mr10">船宽:</div>
-          <div class="c5">{{ ship.breadth }}</div>
-          <div class="unit c5">米</div>
+          <div class="c3 mr20">船宽</div>
+          <div class="c7 fs16">{{ ship.breadth }}</div>
+          <div class="unit c7">米</div>
         </div>
 
         <div class="df aic">
-          <div class="c5 mr10">吨位:</div>
-          <div class="c5">{{ ship.loadTons }}</div>
-          <div class="unit c5">吨</div>
+          <div class="c3 mr20">吨位</div>
+          <div class="c7 fs16">{{ ship.loadTons }}</div>
+          <div class="unit c7">吨</div>
         </div>
         <div class="df aic">
-          <div class="c5 mr10">吃水</div>
-          <div class="c5">{{ ship.draught }}</div>
-          <div class="unit c5">米</div>
+          <div class="c3 mr20">吃水</div>
+          <div class="c7 fs16">{{ ship.draught }}</div>
+          <div class="unit c7">米</div>
         </div>
         <div class="df aic c5">
-          <div class="c5 mr10">船龄</div>
-          <div class="c5">{{ ship.age }}</div>
-          <div class="unit c5">年</div>
+          <div class="c3 mr20">船龄</div>
+          <div class="c7 fs16">{{ ship.age }}</div>
+          <div class="unit c7">年</div>
         </div>
       </div>
       <div id="certs" class="container-title">船舶证书</div>
@@ -295,13 +344,14 @@ async function getShipDetail(shipCode) {
     for (let i of ship.value.shipCerts) {
       if (i.type == 5) {
         insurance.value.push(i);
+        if (i.certs.length != 0) insuranceStatus.value = true;
       } else {
         certs.value.push(i);
       }
     }
-    setTimeout(() => {
-      goTo("voyage");
-    }, 100);
+    certsStatus.value = certs.value.some((item) => {
+      return item.certs.length != 0;
+    });
   } else {
     ship.value = {};
   }
@@ -329,6 +379,10 @@ function goTo(type) {
   // });
 }
 
+let voyageStatus = ref(true);
+let certsStatus = ref(false);
+let insuranceStatus = ref(false);
+
 onMounted(() => {
   // getShipDetail("1536A9C15076F89BB01FCF28EAD7C2CC");
   getIndexData();
@@ -341,8 +395,16 @@ onMounted(() => {
 }
 
 .info {
+  overflow: auto;
   width: 267px;
   background: #fff;
+  height: calc(100vh - 60px);
+  scrollbar-width: none; /* firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+}
+
+.info::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
 }
 
 .card {
@@ -386,7 +448,7 @@ onMounted(() => {
 }
 
 .data {
-  width: 220px;
+  width: 240px;
   background: #ffffff;
   border-radius: 4px;
   margin-top: 12px;
@@ -443,16 +505,37 @@ onMounted(() => {
   font-size: 16px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
-  color: #353a42;
+  color: #777;
   margin-left: 10px;
 }
 
 .ship-info > div {
-  margin-top: 20px;
+  margin-top: 10px;
 }
 
 .ship-info > div > div:first-child {
   width: 50px;
-  font-size: 18px;
+  font-size: 17px;
+}
+
+.status {
+  width: 100%;
+  font-size: 16px;
+  text-align: center;
+  position: relative;
+  background: #6c8cd5;
+  padding: 10px;
+  margin: 0 auto;
+  margin-top: 20px;
+  color: #fff;
+  font-weight: 400;
+}
+
+.status-img {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  right: 20px;
+  top: 11px;
 }
 </style>