cards页面移动端和pc端

src/pages/ruins/index.vue

@@ -1,77 +1,78 @@
 <!-- 场馆漫游 -->
 <template>
-<div class='layout'>
+  <div class="layout">
+    <div class="title">珠海市红色革命遗址</div>
     <div class="cards">
-        <swCard></swCard>
+      <swCard></swCard>
     </div>
-</div>
+  </div>
 </template>
 
 <script>
-import swCard from '@/components/swCard'
+import swCard from "@/components/swCard";
 export default {
-components:{
-    swCard
-},
-data() {
-//这里存放数据
-return {
-
+  components: {
+    swCard,
+  },
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
 </script>
 <style lang='less' scoped>
 //@import url(); 引入公共css类
 .layout {
+  width: 100%;
+  height: 100%;
+  background: url("../../assets/images/cards-bg.png") center center no-repeat;
+  background-size: 100% 100%;
+  overflow: hidden;
+  .title {
+    font-size: 2vw;
+    text-align: center;
+    font-family: Source Han Sans CN;
+    font-weight: bold;
+    color: #9c0012;
+    opacity: 1;
+    margin-top:5vw;
+  }
+  .cards {
+    margin: 2vw auto;
+  }
+}
+
+@media screen and (max-width: 1024px) {
+  .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;
-        bottom:0;
-        right:0;
+    background: url("../../assets/images/mobile-card-bg.png") center center
+      no-repeat;
+    background-size: 100% 100%;
+    .title {
+        margin-top:20vw;
+        font-size: 5vw;
     }
     .cards {
-        margin:180px auto;
+      margin: 2vw auto;
     }
+  }
 }
-
-@media screen and (max-width: 1024px) {
-    .layout { 
-        background: url('../../assets/images/mobile-index-bg.png') center center no-repeat;
-        .cards {
-            margin:32vw auto;
-        }
-    }
-    
- }
-    
 </style>