列表页

src/App.vue

@@ -60,11 +60,12 @@
 </script>
 
 <style lang="less">
-  #app {
+#app {
     width: 100%;
     height: 100%;
-    background: url('./assets/images/bg.jpg') no-repeat;
-    background-size: cover;
-    overflow: hidden;
+    // background: url('./assets/images/inner-bg.png') no-repeat;
+    // background-size: cover;
+    // overflow: hidden;
+    // background-clip: 100% 100%;
   }
 </style>

src/components/swCard/index.vue

@@ -19,7 +19,8 @@
             })
           "
         >
-          <img class="logo" :src="`${$cdn}images/scene${item.img}.jpg`" />
+          <img class="logo" :src="`https://4d-tjw.oss-cn-shenzhen.aliyuncs.com/project/zhzshszg/ruin${item.img}.png`" />
+          <div class="txt">{{item.name}}</div>
           <div class="maskss"></div>
         </div>
       </swiper-slide>
@@ -157,25 +158,25 @@ export default {
         name: "杨匏安陈列馆",
       },
       {
-        img: 3,
+        img: 1,
         id: 4,
         link: "http://www.4dmodel.com/SuperTwo/index.html?m=1016",
         name: "林伟民与中国早期工人运动史迹陈列馆",
       },
       {
-        img: 4,
+        img: 2,
         id: 9,
         link: "http://www.4dmodel.com/SuperTwo/index.html?m=1018",
         name: "中共小濠冲党史教育基地",
       },
       {
-        img: 5,
+        img: 1,
         id: 5,
         link: "http://www.4dmodel.com/SuperTwo/index.html?m=997",
         name: "苏兆征故居陈列馆",
       },
       {
-        img: 6,
+        img: 2,
         id: 7,
         link: "http://www.4dmodel.com/SuperTwo/index.html?m=1015",
         name: "市退役军人事务局",
@@ -249,6 +250,22 @@ export default {
   background: #4b2b13;
   opacity: 0.65;
 }
+/deep/ .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
+  bottom:0;
+}
+.swiper-slide .txt {
+  position:absolute;
+  bottom:10%;
+  text-align:center; 
+  width:100%;
+  font-size: 32px;
+  font-family: Source Han Sans CN;
+  font-weight: bold;
+  line-height: 32px;
+  color: #FCD67B;
+  opacity: 1;
+  padding: 0 5px;
+}
 @media screen and (max-width: 1600px) {
   .swiper-slide {
     width: 350px;

src/pages/ruins/index.vue

@@ -50,6 +50,12 @@ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 <style lang='less' scoped>
 //@import url(); 引入公共css类
 .layout {
+    width: 100%;
+    height: 100%;
+    background: url('../../assets/images/inner-bg.png');
+    background-size: cover;
+    overflow: hidden;
+    background-clip: 100% 100%;
     &::before {
         content:url('../../assets/images/bottom_icon2.png');
         position:absolute;

src/router/index.js

@@ -22,6 +22,11 @@ VueRouter.prototype.push = function push (location) {
     component: () => import('../pages/ruins/index.vue')
   },
   {
+    path: '/ruins-detail',
+    name: 'Ruins_DEtail',
+    component: () => import('../pages/ruins-detail/index.vue')
+  },
+  {
     path: '/search',
     name: 'Search',
     component: () => import('../pages/search/index.vue'),