更新 组件/样式

src/App.vue

@@ -19,4 +19,11 @@ export default {
 };
 </script>
 <style>
+.info-box {
+  width: 460px;
+  height: calc(100% - 36px);
+  padding: 18px 30px;
+  box-sizing: border-box;
+  background: linear-gradient(180deg, #20364f 0%, rgba(27, 50, 74, 0.85) 100%);
+}
 </style>

src/components/CapacityCard.vue

@@ -35,17 +35,6 @@
         <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>
 
@@ -56,29 +45,12 @@ 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();
-    });
+    onMounted(() => {});
     return {
-      init,
       exchangeUrl,
-      imgs,
     };
   },
 };
@@ -125,60 +97,4 @@ export default {
   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("/prev.png");
-  top: 55%;
-  left: 0;
-  background-size: contain;
-}
-
-.swiper-button-next {
-  width: 26px;
-  height: 26px;
-  top: 55%;
-  background: url("/next.png");
-  right: 0;
-  background-size: contain;
-}
 </style>

src/components/SafetyModule.vue

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

src/main.js

@@ -17,7 +17,13 @@ import ShipOwnerInfo from "comps/ShipOwnerInfo.vue";
 import ShipInfoCard from "comps/ShipInfoCard.vue";
 import CapacityCard from "comps/CapacityCard.vue";
 import IntelligentModule from "comps/IntelligentModule.vue";
+import EnvironmentalModule from "comps/EnvironmentalModule.vue";
+import Radar from "comps/Radar.vue";
+import Swiper from "comps/Swiper.vue";
 
+app.component("Swiper", Swiper);
+app.component("Radar", Radar);
+app.component("EnvironmentalModule", EnvironmentalModule);
 app.component("IntelligentModule", IntelligentModule);
 app.component("CapacityCard", CapacityCard);
 app.component("ShipInfoCard", ShipInfoCard);