up

web/public/static/css/main.css

@@ -6959,12 +6959,12 @@ a.hasHover.tag-link:hover {
 #gui-modes-inside{
     display: none !important;
 }
-#gui-modes-floorplan{
+/* #gui-modes-floorplan{
     display: none !important;
 }
 #gui-modes-dollhouse{
     display: none !important;
-}
+} */
 #vr{
     display: none !important;
 }

web/src/components/welcome/index.vue

@@ -1,128 +1,215 @@
 <template>
   <div class="welcome" v-if="isShow">
-      <img class="bg" :src="require(`@/assets/images/project/${isMobile?'mobile.jpg':'pc.jpg'}`)" alt="">
-      <div class="btn"  @click.stop="skip" :style="{backgroundImage:`url(${require('@/assets/images/project/btn.png')})`}">
-      <span>主办方：珠海高新技术产业开发区</span>
+    <video
+      class="myVideo"
+      src="../../assets/img/strat.mp4"
+      autoplay
+      muted
+    ></video>
+    <div class="SeLanguage" :class="{active:languagShow}">
+      <div class="box">
+        <div class="top">
+          <p>请选择语言</p>
+          <p>Please select the language</p>
+        </div>
+        <div class="card">
+          <div class="one" @click="skip('1171')">
+            <div class="card_ic aaa"></div>
+            <p>中文</p>
+          </div>
+          <div class="tow" @click="skip('1171_1')">
+            <div class="card_ic bbb"></div>
+            <p>English</p>
+          </div>
+        </div>
       </div>
-      <!-- <div class="btn" v-else @click.stop="$emit('close')" :style="{backgroundImage:`url(${require('@/assets/images/project/btnMo.png')})`}">
-      <span class="txt">进入线上展厅</span>
-      <span>主办方：珠海高新技术产业开发区</span>
-      </div> -->
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  data(){
+  data() {
     return {
-      isShow:false,
-      loading:true,
-    }
+      isShow: false,
+      languagShow: false,
+    };
   },
-  methods:{
-    skip(){
-      window.location.href = window.location.origin +window.location.pathname+ '#/?m=1171'
+  methods: {
+    skip(val) {
+      window.location.href =
+        window.location.origin + window.location.pathname + "#/?m=" + val;
       location.reload(true);
-    }
+    },
   },
-  mounted(){
-    if(window.location.hash==='#/') this.isShow=true
-  }
-}
+  mounted() {
+    if (window.location.hash === "#/") this.isShow = true;
+    // 监听视频播放完毕
+    this.$nextTick(() => {
+      setTimeout(() => {
+        let dom = document.querySelector(".myVideo");
+        dom.addEventListener("ended", () => {
+          this.languagShow=true
+        }, false);
+      }, 100);
+    });
+  },
+};
 </script>
 
 <style lang="less">
-.welcome{
+.welcome {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 9999;
-  font-size: 0;
-  transition: all ease 0.3s;
-  background-color: #146fb1;
-  .bg{
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%,-50%);
+  video {
+    min-width: 100vw;
+    min-height: 100vh;
   }
-
-  .btn{
+  .SeLanguage {
+    opacity: 0;
+    transition: all 1s;
     position: absolute;
-    bottom: 15%;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 9999;
-    font-size: 0;
-    display: inline-block;
-    cursor: pointer;
-    width: 316px;
-    height: 104px;
-    background-size: cover;
-    background-color: none;
-    >span{
-      font-size: 24px;
-      position: fixed;
-      top: 180%;
-      left: 50%;
-      transform: translateX(-50%);
-      letter-spacing: 2px;
-      color: #EDD3B0;
-    }
-  }
-}
-
-
-.loading{
-    position: fixed;
-    left: 0;
     top: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.8);
     width: 100%;
     height: 100%;
-    z-index: 10000;
-    background: #000;
-    >span{
+    .box {
+      padding-top: 110px;
       position: absolute;
-      top: 50%;
       left: 50%;
-      transform: translateX(-50%,-50%);
-      color: #fff;
-      font-size: 16px;
-      display: inline-block;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      background: url("../../assets/img/bg.png");
+      background-size: 100% 100%;
+      width: 994px;
+      height: 685px;
+      .top {
+        p {
+          font-weight: 700;
+          text-align: center;
+          font-size: 40px;
+          color: #165491;
+          &:nth-of-type(2) {
+            margin-top: 5px;
+            font-weight: 400;
+            font-size: 20px;
+          }
+        }
+      }
+      .card {
+        perspective: 1000px;
+        transform-style: preserve-3d;
+        display: flex;
+        justify-content: space-between;
+        width: 615px;
+        height: 366px;
+        margin: 40px auto 0;
+        & > div {
+          transition: all 0.5s;
+          cursor: pointer;
+          border-radius: 8px;
+          width: 264px;
+          height: 100%;
+          background-color: #fff;
+          padding: 0 10px;
+          .card_ic {
+            height: 270px;
+            border-bottom: 1px solid #165491;
+            & > img {
+              width: 107px;
+              height: 97px;
+            }
+          }
+          & > p {
+            text-align: center;
+            height: 96px;
+            line-height: 96px;
+            color: #165491;
+            font-size: 24px;
+          }
+          .aaa {
+            background: url("../../assets/img/cn2.png") no-repeat center
+              center/107px 97px;
+          }
+          .bbb {
+            background: url("../../assets/img/en2.png") no-repeat center
+              center/107px 97px;
+          }
+          &:hover {
+            transform: translateZ(50px);
+            background-image: linear-gradient(#6ba5de, #165491);
+            .card_ic {
+              border-bottom: 1px solid #fff;
+            }
+            & > p {
+              color: #fff;
+            }
+            .aaa {
+              background: url("../../assets/img/cn2Ac.png") no-repeat center
+                center/107px 97px;
+            }
+            .bbb {
+              background: url("../../assets/img/en2Ac.png") no-repeat center
+                center/107px 97px;
+            }
+          }
+        }
+      }
     }
   }
+  .active{
+    opacity: 1;
+  }
+}
 
-@media only screen and (max-width: 487px) {
-  @scale:0.7;
+@media only screen and (max-width: 800px) {
   .welcome{
-    .bg{
-      background-repeat: no-repeat;
-    }
-    .btn{
-        position: absolute;
-        bottom: 57px;
-        left: 50%;
-        transform: translateX(-50%);
-        z-index: 99;
-        width: 180px;
-        height: 70px;
+    .SeLanguage{
+      .box{
+        padding-top: 70px;
+        width: 90vw;
+        height: 534px;
+        background: url('../../assets/imgM/bgL.png');
         background-size: 100% 100%;
-      >span{
-        top: 110%;
-        font-size: 14px;
-        left: 50%;
-        transform: translateX(-50%);
-      }
-      .txt{
-        font-size:14px;
-        color:#F3D4BD;
-        z-index: 99999;
-        top: 45%;
-        transform: translate(-52%,-50%);
+        .top{
+          &>p{
+            font-size:24px;
+            &:nth-of-type(2){
+              font-size: 14px;
+            }
+          }
+        }
+        .card{
+          margin-top: 20px;
+          width: 239px;
+          display: block;
+          &>div{
+            margin-bottom: 20px;
+            width: 239px;
+            height:162px;
+            .card_ic{
+              height: 119px;
+            }
+            .aaa {
+              background: url("../../assets/img/cn2.png") no-repeat center
+                center/59px 54px;
+            }
+            .bbb {
+              background: url("../../assets/img/en2.png") no-repeat center
+                center/59px 54px;
+            }
+            &>p{
+              height: 43px;
+              line-height: 43px;
+              font-size: 14px;
+            }
+          }
+        }
       }
     }
   }

web/src/views/gui/component/issue.vue

@@ -24,9 +24,10 @@
             <p>答对十二题及以上为闯关成功！</p>
           </template>
           <p v-else>
-            You will be given<br /> a random selection of 20 questions to answer,<br /> and
-            if you answer 12 questions correctly or above,<br /> you will be declared
-            a winner.
+            You will be given<br />
+            a random selection of 20 questions to answer,<br />
+            and if you answer 12 questions correctly or above,<br />
+            you will be declared a winner.
           </p>
           <div class="btnn" @click="beginTopic">
             {{ Mylangue ? "开始答题" : "Start" }}
@@ -36,9 +37,7 @@
       <!-- 答题页面 -->
       <div class="topic" v-if="flag === 'tow'">
         <div class="conBox">
-          <p class="topicTxt">
-            {{ topicInd + 1 }}.{{ topic[topicInd].title }}
-          </p>
+          <p class="topicTxt">{{ topicInd + 1 }}.{{ topic[topicInd].title }}</p>
           <!-- 答对或答错之后的页面颜色变化 -->
           <ul class="topic_con" v-if="caseErr">
             <li
@@ -56,6 +55,19 @@
               <span :class="{ active: caseInd === index }">{{
                 item.id + "、" + item.txt
               }}</span>
+              <!-- 后面的√和X -->
+              <img
+                class="imgCuo"
+                src="@/assets/imgM/error.png"
+                alt=""
+                v-if="caseABC === item.id && caseErr === 'cuoWu'"
+              />
+              <img
+                class="imgDui"
+                src="@/assets/imgM/right.png"
+                alt=""
+                v-if="item.id === topic[topicInd].correct"
+              />
             </li>
           </ul>
           <!-- 答题--选择答案 -->
@@ -106,12 +118,14 @@
                 : "Share this poster to spread the word about Erhai's rich culture."
             }}
           </p>
-          <img src="share/shareM.png" alt="" v-if="isMobile" />
-          <img src="share/share.png" alt="" v-else />
-          <a class="btnn" href="share/shareM.png" download v-if="isMobile"
-            >保存海报</a
+          <img :src="`share/${Mylangue?'shareM':'shareMEn'}.png`" alt="" v-if="isMobile" />
+          <img :src="`share/${Mylangue?'share':'shareEn'}.png`" alt="" v-else />
+          <a class="btnn" :href="`share/${Mylangue?'shareM':'shareMEn'}.png`" download v-if="isMobile"
+            >{{
+            Mylangue ? "保存海报" : "Save the poster"
+          }}</a
           >
-          <a class="btnn" href="share/share.png" download v-else>{{
+          <a class="btnn" :href="`share/${Mylangue?'share':'shareEn'}.png`" download v-else>{{
             Mylangue ? "保存海报" : "Save the poster"
           }}</a>
         </div>
@@ -132,7 +146,7 @@
 
 <script>
 //引入题目
-import { questions,questionsEn } from "./data.js";
+import { questions, questionsEn } from "./data.js";
 export default {
   name: "issue",
   components: {},
@@ -208,11 +222,11 @@ export default {
         return Math.random() - 0.5;
       });
       arr.length = 20; //改写长度
-      if(this.Mylangue){
+      if (this.Mylangue) {
         arr.forEach((v) => {
           this.topic.push(questions[v]);
         });
-      }else {
+      } else {
         arr.forEach((v) => {
           this.topic.push(questionsEn[v]);
         });
@@ -246,6 +260,12 @@ export default {
   z-index: 9999;
   width: 100vw;
   height: 100vh;
+  .imgCuo {
+    margin-left: 15px;
+  }
+  .imgDui {
+    margin-left: 15px;
+  }
   .main {
     padding: 20px;
     border-radius: 3px;
@@ -335,7 +355,7 @@ export default {
           transform: translateY(-50%);
         }
       }
-      .begin_right{
+      .begin_right {
         .btnn {
           margin: 70px auto 0;
         }
@@ -388,12 +408,14 @@ export default {
         }
         .cuoWu {
           .case {
+            color: #ff5050;
             & > div {
               background-color: #ff5050;
             }
           }
         }
         .zhengQue {
+          color: #50ffa2;
           .case {
             & > div {
               background-color: #50ffa2;
@@ -506,6 +528,13 @@ export default {
 }
 @media only screen and (max-width: 800px) {
   .issue {
+    .imgCuo {
+      width: 30px;
+    }
+    .imgDui {
+      width: 30px;
+    }
+
     .main {
       top: auto;
       bottom: 5px;

web/src/views/gui/loading.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="gui-loading" class="message-outer darkGlass" style="display: none;">
+  <div id="gui-loading" class="message-outer darkGlass">
             <h2 class="model-title"></h2>
             <div class="message-inner">
                 <div class="loadingLogo">