新增 icon展示组件

src/components/IconInfo.vue

@@ -0,0 +1,110 @@
+// icon卡片展示
+<template>
+  <div class="icon-info df aic jcsa">
+    <div class="box">
+      <div class="icon">
+        <img :src="exchangeUrl(type ? 'ship-fill' : 'cargo')" alt="" />
+      </div>
+      <div class="title">{{ type ? "MMSI" : "货种" }}</div>
+      <div class="text">
+        <span class="text1">{{ info[0] }}</span
+        ><span class="text2"></span>
+      </div>
+    </div>
+    <div class="short-line"></div>
+    <div class="box">
+      <div class="icon">
+        <img :src="exchangeUrl(type ? 'ship-length' : 'ship')" alt="" />
+      </div>
+      <div class="title">{{ type ? "船长" : "吨位" }}</div>
+      <div class="text">
+        <span class="text1">{{ info[1] }}</span
+        ><span class="text2">{{ type ? "米" : "吨" }}</span>
+      </div>
+    </div>
+    <div class="short-line"></div>
+    <div class="box">
+      <div class="icon">
+        <img :src="exchangeUrl(type ? 'ship-width' : 'hangxian')" alt="" />
+      </div>
+      <div class="title">{{ type ? "船宽" : "航线" }}</div>
+      <div class="text">
+        <span class="text1">{{ info[2] }}</span
+        ><span v-if="type" class="text2">米</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, computed } from "vue";
+
+export default {
+  props: {
+    type: {
+      type: Number,
+      default: 0,
+    },
+    info: {
+      type: Array,
+      default: ["煤炭", "30", "秦皇岛-上海"],
+    },
+  },
+  setup() {
+    function init() {}
+    function exchangeUrl(icon) {
+      return `/${icon}.png`;
+    }
+    onMounted(() => {
+      init();
+    });
+    return {
+      init,
+      exchangeUrl,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.icon-info {
+  text-align: center;
+}
+
+.box {
+  width: 120px;
+}
+.icon img {
+  width: 40px;
+  height: 40px;
+}
+
+.text {
+  font-size: 20px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #ffffff;
+  text-shadow: 0px 0px 16px rgba(100, 185, 255, 0.6);
+}
+
+.title {
+  font-size: 14px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #e6f7ff;
+  margin-top: 5px;
+  margin-bottom: 14px;
+}
+
+.short-line {
+  box-sizing: border-box;
+  width: 2px;
+  height: 20px;
+  opacity: 0.12;
+  border: 1px solid #ffffff;
+}
+
+.text2 {
+  font-size: 14px;
+  padding-left: 3px;
+}
+</style>