新增 船舶信息相关组件

src/components/ShipInfoCard.vue

@@ -0,0 +1,46 @@
+// 船舶信息
+<template>
+  <div>
+    <TitleLine
+      style="margin-top: 30px"
+      icon="info-dark"
+      title="船舶信息"
+      :type="2"
+      :endText="shipInfo.shipName"
+    ></TitleLine>
+    <ShipOwnerInfo
+      :name="shipInfo.shipOwnerName"
+      :ownerId="shipInfo.shipOwnerId"
+      class="mt20"
+    ></ShipOwnerInfo>
+    <IconInfo
+      style="margin-top: 25px"
+      :type="1"
+      :info="[shipInfo.mmsi, shipInfo.length, shipInfo.width]"
+    ></IconInfo>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from "vue";
+import { mapState } from "vuex";
+
+export default {
+  computed: mapState(["shipInfo"]),
+  setup() {
+    function init() {}
+    function exchangeUrl(icon) {
+      return `/${icon}.png`;
+    }
+    onMounted(() => {
+      init();
+    });
+    return {
+      init,
+      exchangeUrl,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/components/ShipOwnerInfo.vue

@@ -0,0 +1,63 @@
+// 船东个人信息组件
+<template>
+  <div class="ship-owner">
+    <div class="title df aic">
+      <img :src="exchangeUrl('icon-gold')" alt="" class="icon" />
+      <div class="text">汇很多船东大数据区块链认证</div>
+    </div>
+    <div class="ship-owner-info df aic jcsa tac mt20">
+      <div class="owner">
+        <div class="mb10">船东姓名</div>
+        <div>{{ name }}</div>
+      </div>
+      <div class="id">
+        <div class="mb10">船东身份证号</div>
+        <div>{{ ownerId }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted, computed } from "vue";
+import { mapState } from "vuex";
+
+export default {
+  props: {
+    name: {
+      type: String,
+      default: "船东",
+    },
+    ownerId: {
+      type: String,
+      default: "******************",
+    },
+  },
+  setup() {
+    function init() {}
+    function exchangeUrl(icon) {
+      return `/${icon}.png`;
+    }
+    onMounted(() => {
+      init();
+    });
+    return {
+      init,
+      exchangeUrl,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.icon {
+  width: 34px;
+  height: 34px;
+  margin-right: 4px;
+}
+.text {
+  font-size: 16px;
+  font-family: PingFangSC-Medium, PingFang SC;
+  font-weight: 500;
+  color: #d1e2ed;
+}
+</style>