更新 样式

src/components/ShipInfo.vue

@@ -18,6 +18,7 @@
           {{ item.shipname || "新增船舶" }}
         </el-button>
       </el-button-group>
+      <div></div>
       <div class="df">
         <div class="df" v-if="shipInfos[currentIndex].code">
           <el-button v-if="shipInfoDisabled" type="primary" @click="showUpdate">
@@ -66,12 +67,6 @@
         </div>
       </div>
     </div>
-
-    <div
-      v-if="shipInfos[currentIndex].code"
-      class="df jcfe bgf p20"
-      style="max-width: 1200px"
-    ></div>
     <div class="line-container-p24">
       <div class="line">
         <div class="info-line">
@@ -146,11 +141,7 @@
         style="background: #fff"
         class="pt20"
       >
-        <div
-          v-if="index == 4"
-          class="container-title fs18 pt10 pb10"
-          style="background: #f3f4f5"
-        >
+        <div v-if="index == 4" class="container-title fs18 pt10 pb10">
           船舶保险
         </div>
         <div class="df aic pl40 pb20">

src/layout/Layout.vue

@@ -54,12 +54,14 @@ const route = useRoute();
 
 .main-section {
   position: absolute;
+  background: #fff;
   top: 132px;
   right: 0;
   left: 220px;
   bottom: 0;
   overflow-y: auto;
   margin-left: 20px;
+  padding-left: 30px;
 }
 
 .footer {

src/views/index/Index.vue

@@ -1,7 +1,38 @@
 <template>
   <div class="df">
     <div id="map-container" class="map-container"></div>
-    <div class="info">info</div>
+    <div class="info">
+      <div class="data">
+        <div class="df aic">
+          <div class="shu"></div>
+          <div class="right-title">数据统计</div>
+        </div>
+        <div class="df data-line">
+          <img class="icon" src="../../assets/ship.png" />
+          <div class="data-text">
+            <div class="data-title">总航次数</div>
+            <div class="df aib">
+              <div class="num">{{ shipNum }}</div>
+              <div class="unit">次</div>
+            </div>
+          </div>
+        </div>
+        <div class="df data-line">
+          <img class="icon" src="../../assets/rubber.png" />
+          <div class="data-text">
+            <div class="data-title">总实际装载吨数</div>
+            <div class="df aib">
+              <div class="num">{{ shipLoadTons }}</div>
+              <div class="unit">吨</div>
+            </div>
+          </div>
+        </div>
+        <div class="df aic mt30">
+          <div class="shu"></div>
+          <div class="right-title">船舶信息</div>
+        </div>
+      </div>
+    </div>
   </div>
   <div v-if="false" class="p20 bgf">
     <div id="voyage" class="container-title">船舶信息</div>
@@ -233,11 +264,11 @@ async function getIndexData() {
 
 function goTo(type) {
   currentType.value = type;
-  document.querySelector(`#${type}`).scrollIntoView({
-    behavior: "smooth",
-    block: "center",
-    inline: "nearest",
-  });
+  // document.querySelector(`#${type}`).scrollIntoView({
+  //   behavior: "smooth",
+  //   block: "center",
+  //   inline: "nearest",
+  // });
 }
 
 onMounted(() => {
@@ -247,19 +278,15 @@ onMounted(() => {
 </script>
 <style scoped>
 .map-container {
-  width: calc(100vw - 440px);
+  width: calc(100vw - 487px);
   height: calc(100vh - 60px);
 }
 
 .info {
-  width: 220px;
+  width: 267px;
   background: #fff;
 }
 
-.unit {
-  margin-left: 5px;
-}
-
 .card {
   width: 33.3%;
   height: 120px;
@@ -299,4 +326,65 @@ onMounted(() => {
   margin-top: 20px;
   margin-left: 20px;
 }
+
+.data {
+  width: 220px;
+  background: #ffffff;
+  border-radius: 4px;
+  margin-top: 12px;
+  margin-bottom: 18px;
+  padding-top: 16px;
+  padding-left: 24px;
+  padding-bottom: 20px;
+}
+
+.icon {
+  width: 48px;
+  height: 48px;
+  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;
+}
 </style>

src/views/shipManage/shipList.vue

@@ -7,9 +7,13 @@
           prefix-icon="el-icon-search"
           v-model="term"
           clearable
-          style="height: 32px; width: 330px; line-height: 32px"
+          size="large"
+          class="mr30"
+          style="width: 300px"
         ></el-input>
-        <div class="seach-btn" @click="getShipList(1)">查询</div>
+        <el-button size="large" type="primary" @click="getShipList(1)">
+          查询
+        </el-button>
       </div>
     </div>
     <div style="margin-top: 24px">

src/views/shipOwnerManage/shipOwnerList.vue

@@ -7,16 +7,21 @@
           prefix-icon="el-icon-search"
           v-model="term"
           clearable
-          style="height: 32px; width: 330px; line-height: 32px"
+          size="large"
+          class="mr30"
+          style="width: 300px"
         ></el-input>
-        <div class="seach-btn" @click="getShipOwnerList(1)">查询</div>
+        <el-button size="large" type="primary" @click="getShipOwnerList(1)">
+          查询
+        </el-button>
       </div>
-      <div
-        class="cargo-owner-add"
+      <el-button
+        size="large"
+        type="primary"
         @click="router.push('/shipOwnerManage/shipOwnerDetail')"
       >
         添加船东
-      </div>
+      </el-button>
       <el-dialog title="添加船东" v-model="dialogFormVisible">
         <template v-slot:default>
           <el-form