更新 港口信息样式

src/components/PortsCard.vue

@@ -1,11 +1,41 @@
 <template>
   <div class="ports-box">
     <TitleLine icon="info-dark" title="港口"></TitleLine>
-    <div class="bar mt10" style="height: 700px">
-      <div v-for="(item, index) in arr" :key="index" class="ports df aic mb20">
-        <img class="mr10" :src="exchangeUrl('position')" alt="" />
-        <div class="mr50">{{ index + 1 }}小洋山港口</div>
-        <img :src="exchangeUrl(index % 2 == 0 ? 'sunny' : 'cloud')" alt="" />
+    <div class="bar mt20" style="height: 700px">
+      <div v-for="(item, index) in arr" :key="index" class="ports mb30">
+        <div class="line1 df aic tal">
+          <div class="site">{{ item.site }}</div>
+          <img :src="exchangeUrl('cloud')" alt="" />
+          <div class="weather">{{ item.weather }}</div>
+        </div>
+        <div class="line2 df aic jcsb tal">
+          <div>
+            <div>{{ item.minTemperature }} - {{ item.maxTemperature }}</div>
+            <div>温度 ℃</div>
+          </div>
+          <div>
+            <div>{{ item.minVisibility }} - {{ item.maxVisibility }}</div>
+            <div>能见度 km</div>
+          </div>
+          <div>
+            <div>{{ item.waterLevel }}</div>
+            <div>水位 m</div>
+          </div>
+          <div>
+            <div>{{ item.waterLevelDescription }}</div>
+            <div>水位情况</div>
+          </div>
+        </div>
+        <div class="line3 df aic jcsb tal">
+          <div>
+            <div>{{ item.wind }}</div>
+            <div>风力风向</div>
+          </div>
+          <div>
+            <div>{{ item.fog }}</div>
+            <div>雾霾</div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -15,12 +45,15 @@
 import { ref, onMounted, computed } from "vue";
 import { mapState } from "vuex";
 import exchangeUrl from "utils/exchangeUrl";
+import api from "apis/fetch";
 
 export default {
   setup() {
     let arr = ref([]);
-    arr.value.length = 50;
-    function init() {}
+    async function init() {
+      let res = await api.getPortsInfo();
+      arr.value = res.data.result;
+    }
 
     onMounted(() => {
       init();
@@ -34,22 +67,66 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
-.ports {
-  font-size: 14px;
-  font-family: PingFangSC-Medium, PingFang SC;
-  font-weight: 500;
-  color: #e6f7ff;
-  :first-child {
-    width: 32px;
-    height: 32px;
+.line1 {
+  .site {
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #10ffb9;
+    margin-right: 13px;
   }
-  :last-child {
+  > img {
     width: 24px;
     height: 24px;
+    margin-right: 10px;
+  }
+  :last-child {
+    font-size: 12px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #e6f7ff;
   }
+  margin-bottom: 18px;
 }
 
-.mr50 {
-  margin-right: 50px;
+.line2 {
+  padding-left: 6px;
+  padding-right: 40px;
+  > div {
+    :first-child {
+      font-size: 18px;
+      font-family: DINAlternate-Bold, DINAlternate;
+      font-weight: bold;
+      color: #e6f7ff;
+      margin-bottom: 12px;
+    }
+    :last-child {
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #e6f7ff;
+      margin-bottom: 18px;
+    }
+  }
+}
+
+.line3 {
+  padding-left: 6px;
+  padding-right: 40px;
+  > div {
+    :first-child {
+      font-size: 18px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #e6f7ff;
+      margin-bottom: 10px;
+    }
+    :last-child {
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #e6f7ff;
+    }
+  }
 }
 </style>