新增 运力信息组件

index.html

@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>汇很多航运数字经济总控平台</title>
     <script type="text/javascript" src="https://api.map.baidu.com/getscript?v=1.0&&type=webgl&ak=sUDwQMPuY7yO3ZqC8l4EEZB0jeVrx6wi"></script>
+    <script src="./public//swiper-bundle.min.js"></script>
+    <link rel="stylesheet" href="./public/swiper-bundle.min.css">
     <style>
       * {
         margin: 0;

src/components/CapacityCard.vue

@@ -0,0 +1,184 @@
+// 运力信息卡片
+<template>
+  <div>
+    <TitleLine
+      style="margin-top: 20px"
+      icon="capacity"
+      title="运力信息"
+    ></TitleLine>
+    <div class="status df aic tac jcc mt20 mb20">
+      <div :class="[`${capacity.status == 0 ? 'current-tab' : ''}`]">
+        装货中
+      </div>
+      <div :class="[`${capacity.status == 1 ? 'current-tab' : ''}`]">
+        运输中
+      </div>
+      <div :class="[`${capacity.status == 2 ? 'current-tab' : ''}`]">
+        卸货中
+      </div>
+    </div>
+    <div>
+      <div class="df aic jcsb mb12">
+        <div class="title">航运数字化报告</div>
+        <div class="end pointer">查看</div>
+      </div>
+      <div class="df aic jcsb mb12">
+        <div class="title">船东 : {{ capacity.shipOwner }}</div>
+        <div class="end">已完成</div>
+      </div>
+      <div class="df aic jcsb mb12">
+        <div class="title">船务公司 : {{ capacity.company }}</div>
+        <div class="end">已审核</div>
+      </div>
+      <div class="df aic jcsb mb12">
+        <div class="title">货主 : {{ capacity.cargoOwner }}</div>
+        <div class="end">{{ capacity.cargoStatus ? "已签收" : "未签收" }}</div>
+      </div>
+    </div>
+    <div>
+      <div class="swiper mySwiper">
+        <div class="swiper-wrapper">
+          <div v-for="item in imgs" class="swiper-slide">
+            <img :src="item" alt="" />
+          </div>
+        </div>
+        <div class="swiper-button-next"></div>
+        <div class="swiper-button-prev"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, onMounted } from "vue";
+import { mapState } from "vuex";
+
+export default {
+  computed: mapState(["capacity"]),
+  setup() {
+    let swiper = ref({});
+    let imgs = ref([
+      "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship2.jpg",
+      "https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/data-platform/ship1.jpg",
+    ]);
+    function init() {
+      swiper.value = new Swiper(".mySwiper", {
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      });
+    }
+    function exchangeUrl(icon) {
+      return `/${icon}.png`;
+    }
+    onMounted(() => {
+      init();
+    });
+    return {
+      init,
+      exchangeUrl,
+      imgs,
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.uncover {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: rgba(16, 255, 185, 0.63);
+}
+
+.current-tab {
+  color: #10ffb9;
+  border: 1px solid #10ffb9 !important;
+}
+.status {
+  > div {
+    border: 1px solid #fff;
+    box-sizing: border-box;
+    width: 130px;
+    height: 34px;
+    line-height: 32px;
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+  }
+}
+
+.title {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #d1e2ed;
+}
+
+.mb12 {
+  margin-bottom: 12px;
+}
+
+.end {
+  font-size: 14px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #10ffb9;
+}
+
+.swiper {
+  width: 100%;
+  height: 100%;
+}
+
+.swiper-slide1 {
+  text-align: center;
+  font-size: 18px;
+  color: #333;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.swiper-slide {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  box-sizing: border-box;
+  height: 150px;
+}
+
+.swiper-slide img {
+  display: block;
+  width: 85%;
+  height: 100%;
+  margin: 0 auto;
+  object-fit: cover;
+}
+
+/*去掉默认样式*/
+.swiper-button-prev:after {
+  display: none;
+}
+.swiper-button-next:after {
+  display: none;
+}
+/*自定义样式*/
+.swiper-button-prev {
+  width: 26px;
+  height: 26px;
+  background: url("../../public/prev.png");
+  top: 55%;
+  left: 0;
+  background-size: contain;
+}
+
+.swiper-button-next {
+  width: 26px;
+  height: 26px;
+  top: 55%;
+  background: url("../../public/next.png");
+  right: 0;
+  background-size: contain;
+}
+</style>

src/components/SafetyCard.vue

@@ -3,6 +3,7 @@
   <div class="info-box">
     <CargoOwnderCard></CargoOwnderCard>
     <ShipInfoCard></ShipInfoCard>
+    <CapacityCard></CapacityCard>
   </div>
 </template>
 
@@ -28,7 +29,7 @@ export default {
 <style lang="scss" scoped>
 .info-box {
   width: 460px;
-  height: calc(100% - 48px);
+  height: calc(100% - 24px);
   padding: 18px 30px;
   box-sizing: border-box;
   background: linear-gradient(180deg, #20364f 0%, rgba(27, 50, 74, 0.25) 100%);

src/main.js

@@ -1,4 +1,6 @@
 import { createApp } from "vue";
+const app = createApp(App);
+
 import ElementPlus from "element-plus";
 import "element-plus/dist/index.css";
 import App from "./App.vue";
@@ -13,8 +15,9 @@ import CargoOwnderCard from "comps/CargoOwnderCard.vue";
 import IconInfo from "comps/IconInfo.vue";
 import ShipOwnerInfo from "comps/ShipOwnerInfo.vue";
 import ShipInfoCard from "comps/ShipInfoCard.vue";
+import CapacityCard from "comps/CapacityCard.vue";
 
-const app = createApp(App);
+app.component("CapacityCard", CapacityCard);
 app.component("ShipInfoCard", ShipInfoCard);
 app.component("ShipOwnerInfo", ShipOwnerInfo);
 app.component("IconInfo", IconInfo);

src/store/index.js

@@ -20,6 +20,13 @@ const store = createStore({
       length: 100,
       width: 30,
     },
+    capacity: {
+      status: 0,
+      shipOwner: "王船东",
+      company: "船王公司",
+      cargoOwner: "货主王",
+      cargoStatus: 0,
+    },
   },
   mutations: {
     changeLogin(state, b) {