完成红色文化静态页面

src/components/AllWall.vue

@@ -18,7 +18,6 @@ export default {
     GuideButton,
   },
   data() {
-    //这里存放数据
     return {
       titles: ["高淳博物馆", "德国博物馆", "南京博物馆","南通博物馆", "广东省博物馆"],
       jumpUrl: [
@@ -26,23 +25,6 @@ export default {
       ],
     };
   },
-  //监听属性 类似于data概念
-  computed: {},
-  //监控data中的数据变化
-  watch: {},
-  //方法集合
-  methods: {},
-  //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
-  //生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, //生命周期 - 创建之前
-  beforeMount() {}, //生命周期 - 挂载之前
-  beforeUpdate() {}, //生命周期 - 更新之前
-  updated() {}, //生命周期 - 更新之后
-  beforeUnmount() {}, //生命周期 - 销毁之前
-  unmounted() {}, //生命周期 - 销毁完成
-  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 };
 </script>
 <style  scoped>

src/components/RenCulture.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="RenCulture">
+    <div class="txt">
+      <img src="../assets/images/AllWall/hswh.png" alt="" />
+      <img src="../assets/images/AllWall/hswhbac.png" alt="" />
+    </div>
+    <div class="conten">
+      <div class="left">
+        <a href="javascript:;" class="one">
+          <img src="../assets/images/AllWall/hswh1.png" alt="" />
+        </a>
+        <a href="javascript:;" class="tow">
+          <img src="../assets/images/AllWall/hswh2.png" alt="" />
+        </a>
+      </div>
+      <div class="right">
+        <a href="javascript:;" class="tow">
+          <img src="../assets/images/AllWall/hswh3.png" alt="" />
+        </a>
+        <a href="javascript:;" class="one">
+          <img src="../assets/images/AllWall/hswh4.png" alt="" />
+        </a>
+      </div>
+    </div>
+
+        <div class="conten" style="margin: 0px auto 0;">
+      <div class="right">
+        <a href="javascript:;" class="tow">
+          <img src="../assets/images/AllWall/hswh5.png" alt="" />
+        </a>
+        <a href="javascript:;" class="one">
+          <img src="../assets/images/AllWall/hswh6.png" alt="" />
+        </a>
+      </div>
+            <div class="left">
+        <a href="javascript:;" class="one">
+          <img src="../assets/images/AllWall/hswh7.png" alt="" />
+        </a>
+        <a href="javascript:;" class="tow">
+          <img src="../assets/images/AllWall/hswh8.png" alt="" />
+        </a>
+      </div>
+
+    </div>
+
+  </div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+  //import引入的组件需要注入到对象中才能使用
+  components: {},
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeUnmount() {}, //生命周期 - 销毁之前
+  unmounted() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style scoped>
+.RenCulture {
+  width: 100vw;
+}
+.conten {
+  width: 90%;
+  margin: 28px auto 0;
+  display: flex;
+  justify-content: space-around;
+  height: 448px;
+}
+.conten a {
+  display: inline-block;
+}
+.conten img {
+  width: 100%;
+  height: 100%;
+}
+.left {
+  height: 100%;
+  width: 50%;
+}
+.right {
+  height: 100%;
+  width: 48%;
+}
+.one {
+  width: 100%;
+  height: 274px;
+}
+.tow {
+  width: 100%;
+  height: 166px;
+}
+</style>

src/components/Tradition.vue

@@ -64,6 +64,10 @@ export default {
 
 <style scoped>
 .swiper-container {
+  position: absolute;
+  top: 60%;
+  left: 50%;
+  transform: translate(-50%,-50%);
   width: 20.4rem;
   height: 27.6rem;
   display: flex;

src/view/Home.vue

@@ -2,20 +2,27 @@
     <GuidePage />
     <AllWall />
     <div id="posters">
+        <div class="txt">
+            <img src="../assets/images/AllWall/ctwh.png" alt="">
+            <img src="../assets/images/AllWall/ctwhbac.png" alt="">
+        </div>
         <Tradition />
     </div>
+    <RenCulture />
 </template>
 
 <script>
 import Tradition from '@/components/Tradition.vue'
 import GuidePage from '@/components/GuidePage.vue'
 import AllWall from '@/components/AllWall.vue'
+import RenCulture from '@/components/RenCulture.vue'
 export default {
     name:'Home',
     components: {
         GuidePage,
         Tradition,
-        AllWall
+        AllWall,
+        RenCulture
     }
 }
 </script>
@@ -23,9 +30,11 @@ export default {
 <style scoped>
 #posters{
     position: relative;
-    top:50rem;
-    width:25.8rem;
-    overflow: hidden;
+    width:100vw;
+    height: 100vh;
+}
+.txt img:nth-of-type(1) {
+    margin-top: 27px;
 }
 
 </style>