完成静态页面

.gitignore

@@ -1,7 +1,7 @@
 .DS_Store
 node_modules
 /dist
-
+dist
 
 # local env files
 .env.local

src/components/About.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="About">
-      <div class="bac"></div>
+    <div class="bac"></div>
     <div class="contact">
       <p class="title">联系我们</p>
       <hr />
-      <p class="txt">四维时代官网</p>
+      <a href="http://www.4dage.com" class="txt">四维时代官网</a>
       <p>商务合作：sales@4dage.com</p>
       <p>媒体合作：pr@4dage.com</p>
       <p>联系电话：400-699-8025</p>
@@ -12,22 +12,26 @@
       <p style="text-indent: 3em">北京市朝阳区三丰北里悠唐国际A坐</p>
       <p class="title">合作单位</p>
       <hr />
-      <p class="txt">中国国家文物局</p>
-      <p class="txt">中国博物馆协会</p>
-      <p class="txt">中国博物馆及相关产品与技术博览会</p>
+      <a href="http://www.ncha.gov.cn/" class="txt">中国国家文物局</a>
+      <a href="https://www.chinamuseum.org.cn/index.html" class="txt"
+        >中国博物馆协会</a
+      >
+      <a href="http://www.expo-museums.com/" class="txt"
+        >中国博物馆及相关产品与技术博览会</a
+      >
       <p class="title">探索四维</p>
       <hr />
-      <p class="txt">四维看看</p>
-      <p class="txt">中国国家文物局</p>
-           <hr style="margin-top:60px ;">
-
+      <a href="https://www.4dkankan.com/index.html?lang=zh" class="txt"
+        >四维看看</a
+      >
+      <a href="https://www.cgaii.com/#/" class="txt">中德人工智能研究院</a>
+      <hr style="margin-top: 60px" />
     </div>
 
     <div class="logo">
-    <img src="../assets/images/about1.png" alt="">
-    <img src="../assets/images/about.png" alt="">
+      <img src="../assets/images/about1.png" alt="" />
+      <img src="../assets/images/about.png" alt="" />
     </div>
-   
   </div>
 </template>
 
@@ -63,14 +67,14 @@ export default {
 </script>
 <style  scoped>
 .bac {
-    position: absolute;
-    top: -13%;
-    width: 100%;
-    height: 13%;
-    background-color: rgba(0, 0, 0, 0.8);
+  position: absolute;
+  top: -13%;
+  width: 100%;
+  height: 13%;
+  background-color: rgba(0, 0, 0, 0.8);
 }
 .About {
-    position: relative;
+  position: relative;
   width: 100vw;
   background-color: rgba(0, 0, 0, 0.8);
   padding-top: 30px;
@@ -80,7 +84,7 @@ export default {
   margin: 0 auto;
 }
 .contact .title {
-    margin-top:30px ;
+  margin-top: 30px;
   font-size: 18px;
   color: #fff;
 }
@@ -91,8 +95,12 @@ export default {
   color: #999;
 }
 .contact .txt {
-    font-size: 16px;
-      color: #a0a1a2;
+  margin: 10px 0;
+  text-decoration: none;
+  display: block;
+  font-size: 16px;
+  color: #a0a1a2;
+  text-align: left;
 }
 .logo {
   width: 80%;
@@ -104,11 +112,11 @@ export default {
   align-items: center;
 }
 .logo img:nth-of-type(1) {
-    width: 157px;
-    height: 64px;
+  width: 157px;
+  height: 64px;
 }
 .logo img:nth-of-type(2) {
-    width: 132px;
-    height: 56px;
+  width: 132px;
+  height: 56px;
 }
 </style>

src/components/AllWall.vue

@@ -1,11 +1,16 @@
 <!--  -->
 <template>
   <div class="AllWall">
+
     <div class="size">
       <img src="../assets/images/AllWall/size.png" alt="" />
       <img src="../assets/images/AllWall/sizebac.png" alt="" />
     </div>
-    <GuideButton :titles="titles" :jumpUrl="jumpUrl" />
+    <!-- 万物墙 -->
+       <div id="iframe-container">
+            <iframe id="wanwuqiang" src="../dist/index.html"></iframe>
+        </div>
+            <GuideButton :titles="titles" :jumpUrl="jumpUrl" />
   </div>
 </template>
 

src/components/GuideButton.vue

@@ -2,16 +2,7 @@
     <div id="guide-button">
         <template v-if="showButtonList">
 
-        <div id="old-exhibition1" v-if="titles[3]">
-            <img class="exbutton" 
-                :class="[btnIndex == 3?'hit':'']"
-                src="@/assets/images/exbutton.png"/>
-            <div class="button-text black-text">
-                <a :href="jumpUrl[3]"  
-                    :class="[btnIndex == 3?'hit':'']">
-                    {{titles[3]}}</a></div></div>
-
-        <div id="old-exhibition2" v-if="titles[4]">
+        <div id="old-exhibition1" v-if="titles[4]">
             <img class="exbutton" 
                 :class="[btnIndex == 4?'hit':'']"
                 src="@/assets/images/exbutton.png"/>
@@ -20,6 +11,15 @@
                     :class="[btnIndex == 4?'hit':'']">
                     {{titles[4]}}</a></div></div>
 
+        <div id="old-exhibition2" v-if="titles[3]">
+            <img class="exbutton" 
+                :class="[btnIndex == 3?'hit':'']"
+                src="@/assets/images/exbutton.png"/>
+            <div class="button-text black-text">
+                <a :href="jumpUrl[3]"  
+                    :class="[btnIndex == 3?'hit':'']">
+                    {{titles[3]}}</a></div></div>
+
 
         <div id="old-exhibition">
             <img class="exbutton" 

src/components/GuidePage.vue

@@ -1,14 +1,29 @@
 <template>
   <div id="guide" @click="openContactInfo">
+    <!-- 点击播放视频出现的弹窗 -->
+    <div class="video" v-if="isShow">
+      <div class="bac">
+        <div class="one">
+          <img src="../assets/images/page1.png" alt="" />
+        </div>
+      </div>
+      <video src="../assets/video/once.mp4" autoplay muted loop controls></video>
+      <div class="close" @click="play">
+        <img src="../assets/images/close.png" alt="">
+      </div>
+    </div>
+    <div class="paly" @click="play">
+      <img src="../assets/images/play.png" alt="" />
+    </div>
     <div class="bac">
       <div class="one">
-        <img src="../assets/images/page1.png" alt="">
+        <img src="../assets/images/page1.png" alt="" />
       </div>
       <div class="tow">
-        <img src="../assets/images/page2.png" alt="">
+        <img src="../assets/images/page2.png" alt="" />
       </div>
       <div class="three">
-        <img src="../assets/images/page3.png" alt="">
+        <img src="../assets/images/page3.png" alt="" />
       </div>
     </div>
     <!-- <img id="background1" src="@/assets/images/background.png" /> -->
@@ -51,7 +66,7 @@
         </div>
       </div>
     </div>
-    <GuideButton :titles='titles' :jumpUrl='jumpUrl'/>
+    <GuideButton :titles="titles" :jumpUrl="jumpUrl" />
   </div>
 </template>
 
@@ -62,6 +77,8 @@ export default {
   name: "GuidePage",
   data() {
     return {
+      // 控制页面视频弹窗的显示
+      isShow:false,
       titles: ["点击看展", "参加云展", "往届博博会"],
       jumpUrl: [
         "javascript:;",
@@ -77,6 +94,10 @@ export default {
     };
   },
   methods: {
+    // 点击第一个页面的播放视频按钮
+    play() {
+      this.isShow=!this.isShow
+    },
     openContactInfo(event) {
       let contactId = [
         "contactButton",
@@ -102,24 +123,63 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.bac{
+.close {
+  position: absolute;
+  bottom: 150px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 58px;
+  height: 58px;
+}
+.close img {
+  width: 100%;
+  height: 100%;
+}
+.video {
+  z-index: 9999;
+  position: absolute;
+  bottom: 0;
+  width: 100vw;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.93);
+}
+.video video {
+  margin-top: 40px;
+  width: 100%;
+  max-height: 300px;
+}
+.paly {
+  position: absolute;
+  width: 223px;
+  height: 223px;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.paly img {
+  width: 100%;
+  height: 100%;
+}
+.bac {
   padding-top: 5.75rem;
 }
-.bac>div {
+.bac > div {
   display: flex;
   justify-content: center;
 }
-.one>img {
+.one > img {
   width: 80%;
-}.tow>img {
+}
+.tow > img {
   width: 70%;
-}.three>img {
+}
+.three > img {
   width: 90%;
 }
 #guide {
   width: 100vw;
   height: 100vh;
-  background:url('../assets/images/AllWall/page.jpg') no-repeat;
+  background: url("../assets/images/AllWall/page.jpg") no-repeat;
   background-size: 100% 100%;
   position: relative;
   font-size: 16px;

src/components/International.vue

@@ -6,13 +6,13 @@
       <img src="../assets/images/AllWall/gjzcbac.png" alt="" />
     </div>
     <div class="conten">
-        <a href="javascript:;">
+        <a href="https://4dscene.4dage.com/culturalrelics/Ger2/index.html">
             <img src="../assets/images/AllWall/gjzc1.png" alt="">
         </a>
-        <a href="javascript:;">
+        <a href="http://model3d.4dage.com/3D/2018/model/sh/index.html">
             <img src="../assets/images/AllWall/gjzc2.png" alt="">
         </a>
-        <a href="javascript:;">
+        <a href="https://www.4dkankan.com/showProPC.html?m=8PDQbODms&amp;open=wx_friend">
             <img src="../assets/images/AllWall/gjzc3.png" alt="">
         </a>
     </div>

src/components/RenCulture.vue

@@ -6,37 +6,36 @@
     </div>
     <div class="conten">
       <div class="left">
-        <a href="javascript:;" class="one">
+        <a href="https://4dkanzhan.4dkankan.com/LiangJiaHe/index.html" class="one">
           <img src="../assets/images/AllWall/hswh1.png" alt="" />
         </a>
-        <a href="javascript:;" class="tow">
+        <a href="http://www.4dmodel.com/SuperTwo/index.html?m=794_f" class="tow">
           <img src="../assets/images/AllWall/hswh2.png" alt="" />
         </a>
       </div>
       <div class="right">
-        <a href="javascript:;" class="tow">
+        <a href="http://www.4dmodel.com/SuperTwoCustom/shaoshan/index.html#/" class="tow">
           <img src="../assets/images/AllWall/hswh3.png" alt="" />
         </a>
-        <a href="javascript:;" class="one">
+        <a href="http://www.4dmodel.com/SuperTwo/index.html?m=770_f" 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">
+        <a href="http://www.4dmodel.com/SuperTwo/index.html?m=775_f" class="tow">
           <img src="../assets/images/AllWall/hswh5.png" alt="" />
         </a>
-        <a href="javascript:;" class="one">
+        <a href="https://admin.4dmuseum.cn/showPC.html?m=118&amp;bigScene=&amp;novr=" class="one">
           <img src="../assets/images/AllWall/hswh6.png" alt="" />
         </a>
       </div>
             <div class="left">
-        <a href="javascript:;" class="one">
+        <a href="https://www.4dmodel.com/SuperTwoCustom/JinZhai/list.html" class="one">
           <img src="../assets/images/AllWall/hswh7.png" alt="" />
         </a>
-        <a href="javascript:;" class="tow">
+        <a href="http://www.4dmodel.com/SuperTwoCustom/SuperTwo710_711/index/home.html" class="tow">
           <img src="../assets/images/AllWall/hswh8.png" alt="" />
         </a>
       </div>