更新 首页

src/views/index/Index.vue

@@ -27,9 +27,67 @@
             </div>
           </div>
         </div>
-        <div class="df aic mt30">
-          <div class="shu"></div>
-          <div class="right-title">船舶信息</div>
+        <div class="pl20 ship-info" v-if="ship.code">
+          <div class="df aic">
+            <div class="c5 mr10" style="padding-top: 4px">
+              <img style="width: 20px; height: 20px" :src="icon" alt="" />
+            </div>
+            <div class="c5">汇很多科技认证</div>
+          </div>
+          <div class="df aic">
+            <div class="c5 mr10">船名:</div>
+            <div class="c5">{{ ship.shipname }}</div>
+          </div>
+          <div class="df aic">
+            <div class="c5 mr10">MMSI:</div>
+            <div class="c5">{{ ship.mmsi }}</div>
+          </div>
+          <div class="df aic">
+            <div class="c5 mr10">IMO:</div>
+            <div class="c5">{{ 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>
+          <div class="df aic">
+            <div class="c5 mr10">船宽:</div>
+            <div class="c5">{{ ship.breadth }}</div>
+            <div class="unit c5">米</div>
+          </div>
+          <div class="df aic">
+            <div class="c5 mr10">吨位:</div>
+            <div class="c5">{{ ship.loadTons }}</div>
+            <div class="unit c5">吨</div>
+          </div>
+          <div class="df aic">
+            <div class="c5 mr10">吃水:</div>
+            <div class="c5">{{ ship.draught }}</div>
+            <div class="unit c5">米</div>
+          </div>
+          <div class="df aic c5">
+            <div class="c5 mr10">船龄:</div>
+            <div class="c5">{{ ship.age }}</div>
+            <div class="unit c5">年</div>
+          </div>
+          <div class="df jcc mt50">
+            <el-button
+              style="width: 160px"
+              type="primary"
+              size="large"
+              @click="
+                router.push({
+                  path: '/shipManage/shipDetail',
+                  query: {
+                    shipCode: ship.code,
+                  },
+                })
+              "
+            >
+              查看详情
+            </el-button>
+          </div>
         </div>
       </div>
     </div>
@@ -153,7 +211,7 @@ import api from "../../apis/fetch";
 import checked from "../../assets/checked.png";
 import unchecked from "../../assets/unchecked.png";
 import icon from "../../assets/hui.png";
-icon;
+import router from "../../router/index";
 
 let today = ref(moment().format("YYYY年MM月DD日 dddd"));
 let currentType = ref("voyage");
@@ -382,9 +440,19 @@ onMounted(() => {
 }
 
 .unit {
-  font-size: 12px;
+  font-size: 16px;
   font-family: PingFangSC-Regular, PingFang SC;
   font-weight: 400;
   color: #353a42;
+  margin-left: 10px;
+}
+
+.ship-info > div {
+  margin-top: 30px;
+}
+
+.ship-info > div > div:first-child {
+  width: 50px;
+  font-size: 18px;
 }
 </style>