更新 首页船舶信息

src/views/index/Index.vue

@@ -3,41 +3,47 @@
     <div id="map-container" class="map-container">
       <div class="safety-time">安全航行 {{ 100 }} 天</div>
       <div class="ship-info" v-if="ship.code">
+        <img
+          class="close"
+          @click="ship = {}"
+          src="../../assets/close.png"
+          alt=""
+        />
         <div class="df aic">
           <div class="c3 mr20">船名</div>
-          <div class="c7 fs16">{{ ship.shipname }}</div>
+          <div class="c7 fs14">{{ ship.shipname }}</div>
         </div>
         <div class="df aic">
           <div class="c3 mr20">MMSI</div>
-          <div class="c7 fs16">{{ ship.mmsi }}</div>
+          <div class="c7 fs14">{{ ship.mmsi }}</div>
         </div>
         <div class="df aic">
           <div class="c3 mr20">IMO</div>
-          <div class="c7 fs16">{{ ship.imo }}</div>
+          <div class="c7 fs14">{{ ship.imo }}</div>
         </div>
         <div class="df aic">
           <div class="c3 mr20">船长</div>
-          <div class="c7 fs16">{{ ship.length }}</div>
+          <div class="c7 fs14">{{ ship.length }}</div>
           <div class="unit c7">米</div>
         </div>
         <div class="df aic">
           <div class="c3 mr20">船宽</div>
-          <div class="c7 fs16">{{ ship.breadth }}</div>
+          <div class="c7 fs14">{{ ship.breadth }}</div>
           <div class="unit c7">米</div>
         </div>
         <div class="df aic">
           <div class="c3 mr20">吨位</div>
-          <div class="c7 fs16">{{ ship.loadTons }}</div>
+          <div class="c7 fs14">{{ ship.loadTons }}</div>
           <div class="unit c7">吨</div>
         </div>
         <div class="df aic">
           <div class="c3 mr20">满载吃水</div>
-          <div class="c7 fs16">{{ ship.draught }}</div>
+          <div class="c7 fs14">{{ ship.draught }}</div>
           <div class="unit c7">米</div>
         </div>
         <div class="df aic c5">
           <div class="c3 mr20">船龄</div>
-          <div class="c7 fs16">{{ ship.age }}</div>
+          <div class="c7 fs14">{{ ship.age }}</div>
           <div class="unit c7">年</div>
         </div>
 
@@ -45,6 +51,7 @@
           <el-button
             style="width: 120px"
             type="primary"
+            size="small"
             @click="
               router.push({
                 path: '/shipManage/shipDetail',
@@ -100,195 +107,6 @@
             <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">船名</div>
-            <div class="c7 fs16">{{ ship.shipname }}</div>
-          </div>
-          <div class="df aic">
-            <div class="c3 mr20">MMSI</div>
-            <div class="c7 fs16">{{ ship.mmsi }}</div>
-          </div>
-          <div class="df aic">
-            <div class="c3 mr20">IMO</div>
-            <div class="c7 fs16">{{ ship.imo }}</div>
-          </div>
-          <div class="df aic">
-            <div class="c3 mr20">船长</div>
-            <div class="c7 fs16">{{ ship.length }}</div>
-            <div class="unit c7">米</div>
-          </div>
-          <div class="df aic">
-            <div class="c3 mr20">船宽</div>
-            <div class="c7 fs16">{{ ship.breadth }}</div>
-            <div class="unit c7">米</div>
-          </div>
-          <div class="df aic">
-            <div class="c3 mr20">吨位</div>
-            <div class="c7 fs16">{{ ship.loadTons }}</div>
-            <div class="unit c7">吨</div>
-          </div>
-          <div class="df aic">
-            <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="c3 mr20">船龄</div>
-            <div class="c7 fs16">{{ ship.age }}</div>
-            <div class="unit c7">年</div>
-          </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>
-    </div>
-  </div>
-  <div v-if="false" class="p20 bgf">
-    <div id="voyage" class="container-title">船舶信息</div>
-    <div style="max-width: 1200px">
-      <div class="df aic jcsb pl20">
-        <div class="df aic">
-          <div class="c3 mr20">船名</div>
-          <div class="c7 fs16">{{ ship.shipname }}</div>
-        </div>
-
-        <div class="df aic">
-          <div class="c3 mr20">MMSI</div>
-          <div class="c7 fs16">{{ ship.mmsi }}</div>
-        </div>
-
-        <div class="df aic">
-          <div class="c3 mr20">IMO</div>
-          <div class="c7 fs16">{{ ship.imo }}</div>
-        </div>
-
-        <div class="df aic">
-          <div class="c3 mr20" style="padding-top: 4px">
-            <img style="width: 20px; height: 20px" :src="icon" alt="" />
-          </div>
-          <div class="c7 fs16">汇很多科技认证</div>
-        </div>
-      </div>
-      <div class="df aic jcsa">
-        <div class="card" @click="goTo('voyage')">
-          航行
-          <img :src="currentType == 'voyage' ? checked : unchecked" alt="" />
-        </div>
-        <div class="card" @click="goTo('certs')">
-          证书
-          <img :src="currentType == 'certs' ? checked : unchecked" alt="" />
-        </div>
-        <div class="card" @click="goTo('insurance')">
-          保险
-          <img :src="currentType == 'insurance' ? checked : unchecked" alt="" />
-        </div>
-      </div>
-      <div class="df aic jcsb pl20">
-        <div class="df aic">
-          <div class="c3 mr20">船长</div>
-          <div class="c7 fs16">{{ ship.length }}</div>
-          <div class="unit c7">米</div>
-        </div>
-
-        <div class="df aic">
-          <div class="c3 mr20">船宽</div>
-          <div class="c7 fs16">{{ ship.breadth }}</div>
-          <div class="unit c7">米</div>
-        </div>
-
-        <div class="df aic">
-          <div class="c3 mr20">吨位</div>
-          <div class="c7 fs16">{{ ship.loadTons }}</div>
-          <div class="unit c7">吨</div>
-        </div>
-        <div class="df aic">
-          <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="c3 mr20">船龄</div>
-          <div class="c7 fs16">{{ ship.age }}</div>
-          <div class="unit c7">年</div>
-        </div>
-      </div>
-      <div id="certs" class="container-title">船舶证书</div>
-      <div class="mb30" v-for="item in certs" :key="item.type">
-        <div class="df">
-          <div class="type-name c5 ml20 mr30">{{ item.typeName }}</div>
-          <div class="date c5" v-if="item.endValidTime">
-            有效期:{{ item.startValidTime }}-{{ item.endValidTime }}
-          </div>
-        </div>
-        <div class="df">
-          <div v-for="item1 in item.certs" :key="item1.id">
-            <el-image
-              class="certs-img"
-              :preview-src-list="[item1.viewUrl]"
-              :src="item1.viewUrl"
-              alt=""
-            />
-          </div>
-        </div>
-      </div>
-      <!-- <el-button type="primary" size="large" @click="">更多</el-button> -->
-      <div id="insurance" class="container-title mt50">船舶保险</div>
-      <div v-for="item in insurance" :key="item.type">
-        <div class="df">
-          <div class="type-name c5 ml20 mr30">{{ item.typeName }}</div>
-          <div class="date c5" v-if="item.endValidTime">
-            有效期:{{ item.startValidTime }}-{{ item.endValidTime }}
-          </div>
-        </div>
-        <div class="df">
-          <div v-for="item1 in item.certs" :key="item1.id">
-            <el-image
-              class="certs-img"
-              :preview-src-list="[item1.viewUrl]"
-              :src="item1.viewUrl"
-              alt=""
-            />
-          </div>
         </div>
       </div>
     </div>
@@ -560,17 +378,18 @@ onMounted(() => {
   z-index: 10;
   background: #fff;
   padding: 20px;
-  padding-top: 10px;
   border-radius: 10px;
+  min-width: 220px;
+  padding-top: 30px;
 }
 
 .ship-info > div {
-  margin-top: 10px;
+  margin-top: 6px;
 }
 
 .ship-info > div > div:first-child {
-  width: 50px;
-  font-size: 17px;
+  width: 56px;
+  font-size: 14px;
 }
 
 .status {
@@ -608,4 +427,11 @@ onMounted(() => {
   color: #fff;
   font-size: 14px;
 }
+
+.close {
+  position: absolute;
+  width: 26px;
+  top: 8px;
+  right: 8px;
+}
 </style>