完成静态页面

src/App.vue

@@ -28,8 +28,8 @@ body{
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  width:25.8rem;
-  height:100%;
   margin: 0 auto;
+  overflow: hidden;
+  position: relative;
 }
 </style>

src/components/About.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="About">
+      <div class="bac"></div>
+    <div class="contact">
+      <p class="title">联系我们</p>
+      <hr />
+      <p class="txt">四维时代官网</p>
+      <p>商务合作：sales@4dage.com</p>
+      <p>媒体合作：pr@4dage.com</p>
+      <p>联系电话：400-699-8025</p>
+      <p>地址：广东省珠海市高新区港湾大道港湾1号港11栋</p>
+      <p style="text-indent: 3em">北京市朝阳区三丰北里悠唐国际A坐</p>
+      <p class="title">合作单位</p>
+      <hr />
+      <p class="txt">中国国家文物局</p>
+      <p class="txt">中国博物馆协会</p>
+      <p class="txt">中国博物馆及相关产品与技术博览会</p>
+      <p class="title">探索四维</p>
+      <hr />
+      <p class="txt">四维看看</p>
+      <p class="txt">中国国家文物局</p>
+           <hr style="margin-top:60px ;">
+
+    </div>
+
+    <div class="logo">
+    <img src="../assets/images/about1.png" alt="">
+    <img src="../assets/images/about.png" alt="">
+    </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>
+.bac {
+    position: absolute;
+    top: -13%;
+    width: 100%;
+    height: 13%;
+    background-color: rgba(0, 0, 0, 0.8);
+}
+.About {
+    position: relative;
+  width: 100vw;
+  background-color: rgba(0, 0, 0, 0.8);
+  padding-top: 30px;
+}
+.contact {
+  width: 80%;
+  margin: 0 auto;
+}
+.contact .title {
+    margin-top:30px ;
+  font-size: 18px;
+  color: #fff;
+}
+.contact p {
+  text-align: left;
+  margin: 10px 0;
+  font-size: 14px;
+  color: #999;
+}
+.contact .txt {
+    font-size: 16px;
+      color: #a0a1a2;
+}
+.logo {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 10px;
+  height: 17vh;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.logo img:nth-of-type(1) {
+    width: 157px;
+    height: 64px;
+}
+.logo img:nth-of-type(2) {
+    width: 132px;
+    height: 56px;
+}
+</style>

src/components/GuidePage.vue

@@ -94,7 +94,8 @@ export default {
 #guide {
   width: 100vw;
   height: 100vh;
-  background-color: aqua;
+  background:url('../assets/images/AllWall/page.jpg') no-repeat;
+  background-size: 100% 100%;
   position: relative;
   font-size: 16px;
 }

src/components/International.vue

@@ -0,0 +1,82 @@
+
+<template>
+<div class='International'>
+        <div class="txt">
+      <img src="../assets/images/AllWall/gjzc.png" alt="" />
+      <img src="../assets/images/AllWall/gjzcbac.png" alt="" />
+    </div>
+    <div class="conten">
+        <a href="javascript:;">
+            <img src="../assets/images/AllWall/gjzc1.png" alt="">
+        </a>
+        <a href="javascript:;">
+            <img src="../assets/images/AllWall/gjzc2.png" alt="">
+        </a>
+        <a href="javascript:;">
+            <img src="../assets/images/AllWall/gjzc3.png" alt="">
+        </a>
+    </div>
+</div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+    name:"International",
+//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>
+.International {
+    width: 100vw;
+    height: 100vh;
+}
+.txt {
+    margin-top: 150px;
+}
+.conten {
+    margin-top: 15px;
+}
+.conten a {
+    display: inline-block;
+    width: 88%;
+    height: 180px;
+    margin: 5px auto;
+}
+.conten a img{
+    width: 100%;
+    height: 100%;
+}
+</style>

src/components/RenCulture.vue

@@ -80,6 +80,9 @@ export default {
 .RenCulture {
   width: 100vw;
 }
+.txt {
+    margin-top: 60px;
+}
 .conten {
   width: 90%;
   margin: 28px auto 0;

src/view/Home.vue

@@ -1,40 +1,51 @@
 <template>
-    <GuidePage />
-    <AllWall />
+  <GuidePage />
+  <AllWall />
+  <div class="bigbac">
     <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 class="txt">
+        <img src="../assets/images/AllWall/ctwh.png" alt="" />
+        <img src="../assets/images/AllWall/ctwhbac.png" alt="" />
+      </div>
+      <Tradition />
     </div>
     <RenCulture />
+    <International />
+  </div>
+  <About />
 </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'
+import Tradition from "@/components/Tradition.vue";
+import GuidePage from "@/components/GuidePage.vue";
+import AllWall from "@/components/AllWall.vue";
+import RenCulture from "@/components/RenCulture.vue";
+import International from "@/components/International.vue";
+import About from "@/components/About.vue";
 export default {
-    name:'Home',
-    components: {
-        GuidePage,
-        Tradition,
-        AllWall,
-        RenCulture
-    }
-}
+  name: "Home",
+  components: {
+    GuidePage,
+    Tradition,
+    AllWall,
+    RenCulture,
+    International,
+    About,
+  },
+};
 </script>
 
 <style scoped>
-#posters{
+#posters {
     position: relative;
-    width:100vw;
-    height: 100vh;
+  width: 100vw;
+  height: 100vh;
+  padding-top: 80px;
 }
-.txt img:nth-of-type(1) {
-    margin-top: 27px;
+.bigbac {
+  width: 100vw;
+  height: 2920px;
+  background: url("../assets/images/bigbac.jpg") no-repeat;
+  background-size: 100% 100%;
 }
-
 </style>