卡片页实现

src/components/swCard/index.vue

@@ -11,6 +11,7 @@
         :key="index"
       >
         <div
+          class="card"
           @click="
             $router.push({
               name: 'Scene',
@@ -19,7 +20,7 @@
             })
           "
         >
-          <img class="logo" :src="`https://4d-tjw.oss-cn-shenzhen.aliyuncs.com/project/zhzshszg/ruin${item.img}.png`" />
+          <img class="logo" src="../../assets/images/card-img.png" />
           <div class="txt">{{item.name}}</div>
           <div class="maskss"></div>
         </div>
@@ -183,10 +184,6 @@ export default {
       }
     ];
     return {
-      // activeDate: "",
-      // showNext: 0,
-      // showPre: 0,
-      // activeIdx:'',
       cards,
     };
   },
@@ -223,10 +220,16 @@ export default {
   font-size: 0;
   position: relative;
 }
+.swiper-slide .card {
+	width: 100%;
+	height: 500px;
+	background:url('../../assets/images/card-bg.png') center center no-repeat;
+}
 
 .swiper-slide img {
   width: 100%;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
+  height: 75%;
+  padding: 5px;
 }
 .swiper-slide .maskss {
   width: 100%;