Главная Обзор Помощь
Регистрация Вход
shaogen1995
/
DaLiEH
1
0
Ответвить 0
Файлы Обсуждения 0 Запросы на слияние 0 Вики
Просмотр исходного кода

up

shaogen1995 3 лет назад
Родитель
75fb450f03
Сommit
649bd7f5e0
12 измененных файлов с 380 добавлено и 308 удалено
Разделённый вид Показать статистику Diff
  1. 34 0
      web/public/remove/index2.html
  2. BIN
      web/src/assets/img/mapt.png
  3. 143 166
      web/src/components/exhibition/index.vue
  4. 4 2
      web/src/components/welcome/index.vue
  5. 21 5
      web/src/main.js
  6. 2 2
      web/src/views/gui/component/browse.vue
  7. 16 12
      web/src/views/gui/component/game.vue
  8. 87 74
      web/src/views/gui/component/issue.vue
  9. 12 5
      web/src/views/gui/component/quality.vue
  10. 2 2
      web/src/views/gui/component/remove.vue
  11. 13 8
      web/src/views/gui/component/share.vue
  12. 46 32
      web/src/views/gui/menu.vue

+ 34 - 0
web/public/remove/index2.html
Просмотреть файл 

@@ -0,0 +1,34 @@
 
+
 
+<html>
 
+<head>
 
+<meta charset="UTF-8">
 
+<title>eliminate</title>
 
+<meta name="viewport" content="width=device-width, initial-scale=1">
 
+<link rel="stylesheet" href="css/style.css"/>
 
+</head>
 
+
 
+<body>
 
+
 
+  <!-- 计分 -->
 
+  <div class="top">
 
+    <div class="left">Total：<span class="grade">0</span></div>
 
+    <div class="right">Time：<span class="time">60</span>s</div>
 
+  </div>
 
+  <!-- 倒计时结束后的页面 -->
 
+  <div class="end">
 
+    <div>Game over</div>
 
+    <div>Your Score:<span class="endF">0</span></div>
 
+    <div class="btn">Restart</div>
 
+  </div>
 
+
 
+<ul id="ul1">
 
+  <div class="zhezao">
 
+    <div class="btnGo">Start</div>
 
+  </div>
 
+</ul>
 
+
 
+<script type="text/javascript" src="js/jquery.min.js"></script>
 
+<script type="text/javascript" src="js/index.js"></script>
 
+
 
+</body>
 
+</html>

BIN
web/src/assets/img/mapt.png
Просмотреть файл


+ 143 - 166
web/src/components/exhibition/index.vue
Просмотреть файл 

@@ -1,216 +1,193 @@
 
 <template>
 
-  <div class="parimaryExhibtion" :class="{daolanactive:isShow}">
 
+  <div class="parimaryExhibtion" :class="{ daolanactive: isShow }">
 
     <div class="p-title">
 
-      <span>当前位置：{{current.name}}</span>
 
+      <div class="p-left">{{ Mylangue ? "当前位置" : "Current Position" }}</div>
 
+      <div class="p-right">{{ Mylangue ? current.name : current.name2 }}</div>
 
     </div>
 
     <div class="exh-con">
 
-      <img :src="require('@/assets/images/map.png')">
 
+      <img :src="require('@/assets/images/map.png')" />
 
     </div>
 
     <ul class="exhi-list">
 
-      <li @click="handleItem(item)" v-for="(item,i) in list" :key="i">
 
-        {{item.name}}
 
+      <li
 
+        @click="handleItem(item.Logo)"
 
+        v-for="(item, i) in list"
 
+        :key="i"
 
+        :class="{ active: item.id === current.id }"
 
+      >
 
+        {{ Mylangue ? item.name : item.name2 }}
 
       </li>
 
     </ul>
 
-    <div class="daolan" @click="isShow = !isShow ">
 
-      <img :src="require('@/assets/images/icon/daolan.png')">
 
-      <span>{{isShow?'收起':'展开'}}导航</span>
 
+    <div class="daolan" @click="isShow = !isShow">
 
+      <img :src="require('@/assets/images/icon/daolan.png')" />
 
     </div>
 
   </div>
 
 </template>
 
 
 <script>
 
 export default {
 
-  data(){
 
-    return{
 
-      isShow:false,
 
-      list:[
 
+  data() {
 
+    return {
 
+      isShow: false,
 
+      list: [
 
         {
 
-          id:1,
 
-          name:'英雄广场',
 
-          pano:"56fa4a8ee09542e69e0e5e763cf3a4eb",
 
-          quaternion:{
 
-            w: 0.732101964384876,
 
-            x: -0.01689940520219317,
 
-            y: 0.6808040582684568,
 
-            z: 0.015715275089404925
 
-          }
 
+          id: 1,
 
+          name: "负一楼",
 
+          name2: "-1F",
 
+          pano: "56fa4a8ee09542e69e0e5e763cf3a4eb",
 
+          Logo: "1173",
 
         },
 
         {
 
-          id:2,
 
-          name:'第一展区 序厅',
 
-          pano:"bd279aa2ee3445658d5949ccdc3d0dec",
 
-          quaternion:{
 
-            w: -0.6115252203661626,
 
-            x: -0.00202956708438099,
 
-            y: 0.7912137782061446,
 
-            z: -0.003695157689334756
 
-          }
 
+          id: 2,
 
+          name: "一楼",
 
+          name2: "1F",
 
+          Logo: "1171",
 
+          pano: "bd279aa2ee3445658d5949ccdc3d0dec",
 
         },
 
         {
 
-          id:3,
 
-          name:'第二展区 发展历程厅',
 
-          pano:'b2431912b20d4df7b81f47821fca6d1a',
 
-          quaternion:{
 
-            w: 0.11635247170122785,
 
-            x: 0.00932045997324726,
 
-            y: 0.9899930039071927,
 
-            z: -0.07930377265884167
 
-          }
 
+          id: 3,
 
+          name: "二楼",
 
+          name2: "2F",
 
+          Logo: "1172",
 
+          pano: "b2431912b20d4df7b81f47821fca6d1a",
 
         },
 
-        {
 
-          id:4,
 
-          name:'第三展区 建设成就厅',
 
-          pano:"353a5de969da46779551bd811a9f9249",
 
-          quaternion:{
 
-            w: 0.7058518315845261,
 
-            x: 0.017866627768183364,
 
-            y: 0.7079073967480722,
 
-            z: -0.017918657894228647
 
-          }
 
-        },
 
-        {
 
-          id:5,
 
-          name:'第四展区 经典战例厅',
 
-          pano:"2eb9d9d718c8416391993b7a9099ca25",
 
-          quaternion:{
 
-            w: 0.9947693640853533,
 
-            x: 0.09500869955101461,
 
-            y: 0.03734343676475115,
 
-            z: -0.003566606968767554
 
-          }
 
-        },
 
-        {
 
-          id:6,
 
-          name:'第五展区 英模荣誉厅',
 
-          pano:"2eb9d9d718c8416391993b7a9099ca25",
 
-          quaternion:{
 
-            w: 0.9947693640853533,
 
-            x: 0.09500869955101461,
 
-            y: 0.03734343676475115,
 
-            z: -0.003566606968767554
 
-          }
 
-        },
 
-        {
 
-          id:7,
 
-          name:'第六展区 辅展厅',
 
-          pano:"2eb9d9d718c8416391993b7a9099ca25",
 
-          quaternion:{
 
-            w: 0.9947693640853533,
 
-            x: 0.09500869955101461,
 
-            y: 0.03734343676475115,
 
-            z: -0.003566606968767554
 
-          }
 
-        }
 
-        
       ],
 
-      current:  {
 
-          id:1,
 
-          name:'序厅',
 
-          pano:"56fa4a8ee09542e69e0e5e763cf3a4eb",
 
-          quaternion:{
 
-            w: 0.732101964384876,
 
-            x: -0.01689940520219317,
 
-            y: 0.6808040582684568,
 
-            z: 0.015715275089404925
 
-          }
 
-        },
 
-    }
 
+      current: {},
 
+    };
 
   },
 
-  methods:{
 
-    handleItem(item){
 
-      this.current = item
 
-      let { x, y, z, w } = item.quaternion
 
-      console.log(x, y, z, w);
 
-      // item.pano && player.blackToPano({
 
-      //     pano:player.model.panos.index[item.pano],
 
-      //     quaternion: new THREE.Quaternion(x, y, z, w)
 
-      //   }
 
-      // )
 
-    }
 
+  methods: {
 
+    handleItem(val) {
 
+      // 中文版
 
+      if (this.Mylangue) {
 
+        window.location.href = window.location.origin + `#/?m=${val}`;
 
+      } else window.location.href = window.location.origin + `#/?m=${val}_1`;
 
+      location.reload(true);
 
+    },
 
   },
 
-  watch:{
 
-    isShow(newVal){
 
-      let css =newVal? '10px':'-310px'
 
-      $('.cad').css({right:css})
 
-    }
 
-  }
 
-}
 
+  watch: {
 
+    isShow(newVal) {
 
+      let css = newVal ? "10px" : "-310px";
 
+      $(".cad").css({ right: css });
 
+    },
 
+  },
 
+  mounted() {
 
+    this.list.forEach((v) => {
 
+      if (window.location.href.includes(v.Logo)) {
 
+        this.current = v;
 
+      }
 
+    });
 
+  },
 
+};
 
 </script>
 
 
 <style lang="less" scoped>
 
-
 
-  .parimaryExhibtion {
 
-    border: 2px solid #f18c06;
 
-    width: 300px;
 
+.parimaryExhibtion {
 
+  width: 300px;
 
+  transform: translateX(300px);
 
+  transition: all 0.3s ease;
 
+  color: #fff;
 
+  .daolan {
 
+    cursor: pointer;
 
+    position: absolute;
 
+    right: 300px;
 
     background: rgba(0, 0, 0, 0.4);
 
-    transform: translateX(300px);
 
-    transition: all 0.3s ease;
 
+    border-radius: 10px 0px 0px 10px;
 
+    border-left: 5px solid #68a0c5;
 
+    top: 24%;
 
+    padding: 15px 5px;
 
+    > img {
 
+      width: 16px;
 
+      transform: rotate(180deg);
 
+      margin-bottom: 4px;
 
+    }
 
+  }
 
+  .p-title {
 
+    transform: translateX(-8px);
 
+    position: relative;
 
+    height: 60px;
 
     color: #fff;
 
-    .daolan {
 
-      cursor: pointer;
 
+    .p-left {
 
+      opacity: 0;
 
+      display: flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+      width: 150px;
 
+      height: 60px;
 
+      background: url("../../assets/img/mapt.png");
 
+      background-size: 100% 100%;
 
+      font-size: 16px;
 
+      padding-top: 10px;
 
+    }
 
+    .p-right {
 
+      border-radius: 8px 22px 0 0;
 
       position: absolute;
 
-      right: 298px;
 
-      background: rgba(0, 0, 0, 0.4);
 
-      border-radius: 5px 0px 0px 5px;
 
-      top: 24%;
 
-      padding: 10px;
 
-      > img {
 
-        width: 16px;
 
-        transform: rotate(180deg);
 
-        margin-bottom: 4px;
 
-      }
 
+      bottom: 0;
 
+      left: 142px;
 
+      width: calc(100% - 134px);
 
+      height: 45px;
 
+      background-color: rgba(104, 160, 197, 0.5);
 
+      flex: 1;
 
+      display: flex;
 
+      justify-content: center;
 
+      align-items: center;
 
+      font-size: 16px;
 
     }
 
-    .p-title {
 
+  }
 
+  .exh-con {
 
+    background: rgba(0, 0, 0, 0.4);
 
+    width: 100%;
 
+    height: 200px;
 
+    border: 2px solid #68a0c5;
 
+  }
 
+  .exhi-list {
 
+    width: 100%;
 
+    display: flex;
 
+    > li {
 
+      // text-align: center;
 
+      background: rgba(0, 0, 0, 0.4);
 
+      border-radius: 0 0 5px 5px;
 
+      flex: 1;
 
+      height: 40px;
 
+      line-height: 40px;
 
       text-align: center;
 
-      background: #b9412e;
 
-      position: relative;
 
-      border-bottom: 2px solid #f18c06;
 
-      height: 60px;
 
-      > span {
 
-        padding-left: 0;
 
-        line-height: 60px;
 
-        height: 60px;
 
-        font-weight: bold;
 
-        font-size: 16px;
 
-        letter-spacing: 1px;
 
+      cursor: pointer;
 
+      &:hover {
 
+        background: #68a0c5;
 
       }
 
     }
 
-    .exh-con {
 
-      width: 100%;
 
-      height: 200px;
 
-    }
 
-    .exhi-list {
 
-      border-top: 2px solid #f18c06;
 
-      width: 100%;
 
-      > li {
 
-        // text-align: center;
 
-        height: 40px;
 
-        line-height: 40px;
 
-        padding: 0 30px;
 
-        cursor: pointer;
 
-        &:hover {
 
-          background: #b9412e;
 
-        }
 
-      }
 
+    .active {
 
+      background: #68a0c5;
 
+      pointer-events: none;
 
     }
 
   }
 
-.exh-con{
 
+}
 
+.exh-con {
 
   display: flex;
 
   align-items: center;
 
   justify-content: center;
 
-  >img{
 
+  > img {
 
     width: 80%;
 
   }
 
 }
 
 
-.daolanactive{
 
+.daolanactive {
 
   transform: translateX(0);
 
-  .daolan{
 
-    >img{
 
+  .p-left {
 
+    opacity: 1 !important;
 
+  }
 
+  .daolan {
 
+    > img {
 
       width: 16px;
 
       transform: rotate(0);
 
       margin-bottom: 4px;
 
     }
 
   }
 
 }
 
+@media screen and (max-width: 600px) {
 
+  .parimaryExhibtion {
 
+    transform: translateX(255px) scale(0.7);
 
+  }
 
+  .daolanactive {
 
+    transform: translateX(45px) scale(0.7);
 
+  }
 
+}
 
 </style>

+ 4 - 2
web/src/components/welcome/index.vue
Просмотреть файл 

@@ -1,5 +1,5 @@
 
 <template>
 
-  <div class="welcome">
 
+  <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="$emit('close')" :style="{backgroundImage:`url(${require('@/assets/images/project/btn.png')})`}">
 
       <span>主办方：珠海高新技术产业开发区</span>
 
@@ -15,12 +15,14 @@
 
 export default {
 
   data(){
 
     return {
 
-      loading:true
 
+      loading:true,
 
+      isShow:false
 
     }
 
   },
 
   methods:{
 
   },
 
   mounted(){
 
+    if(window.location.hash==='#/?m=1171') this.isShow=true
 
   }
 
 }
 
 </script>

+ 21 - 5
web/src/main.js
Просмотреть файл 

@@ -6,17 +6,33 @@ import '@/mixins'
 
 import router from './router'
 
 import 'viewerjs/dist/viewer.css'
 
 import Viewer from 'v-viewer'
 
-Vue.use(Viewer,{
 
+Vue.use(Viewer, {
 
   defaultOptions: {
 
-    navbar:false,
 
-    button:false,
 
-    maxZoomRatio:2,
 
-    zIndex:99999,
 
+    navbar: false,
 
+    button: false,
 
+    maxZoomRatio: 2,
 
+    zIndex: 99999,
 
     title: false
 
   }
 
 })
 
 
+const MylangueFu = {
 
+  data() {
 
+    return {
 
+      Mylangue: null
 
+    }
 
+  },
 
+  mounted() {
 
+    // 判断是进入的英文版还是中文版本
 
+    if (window.location.href.indexOf('_1') > -1) {
 
+      // 英文版
 
+      localStorage.setItem('DLlangue', '')
 
+    } else localStorage.setItem('DLlangue', '1')
 
 
+    this.Mylangue = localStorage.getItem('DLlangue')
 
+  }
 
+}
 
+Vue.mixin(MylangueFu)
 
 Vue.config.productionTip = false
 
 Vue.use(ElementUI);

+ 2 - 2
web/src/views/gui/component/browse.vue
Просмотреть файл 

@@ -5,7 +5,7 @@
 
       <span class="line"></span>
 
       <div class="right">
 
       <img src="@/assets/img/eye.png" alt="" />
 
-      <span class="txt">{{ myMoods }}访问量</span>
 
+      <span class="txt">{{ myMoods }} {{Mylangue?'访问量':'Viewers'}}</span>
 
       </div>
 
     </div>
 
   </div>
 
@@ -31,7 +31,7 @@ export default {
 
   created() {},
 
   //生命周期 - 挂载完成（可以访问DOM元素）
 
   mounted() {
 
-    fetch("http://47.112.166.173:8109/api/count/saveVisit/" + window.number)
 
+    fetch("http://47.112.166.173:8109/api/count/saveVisit/" + 1171)
 
       .then((response) => response.json())
 
       .then((data) => {
 
         this.myMoods = data.data.visitSum;

+ 16 - 12
web/src/views/gui/component/game.vue
Просмотреть файл 

@@ -2,11 +2,15 @@
 
   <div class="gameMe">
 
     <div class="conten">
 
       <div class="top">
 
-        <h2>选择小游戏</h2>
 
+        <h2>{{ Mylangue ? "选择小游戏" : "PICK YOUR GAME" }}</h2>
 
         <i class="el-icon-close" @click="$emit('close')"></i>
 
       </div>
 
-      <div class="btn" @click="change='Issue'">趣味课题</div>
 
-      <div class="btn" @click="change='Remove'">开心消消乐</div>
 
+      <div class="btn" @click="change = 'Issue'">
 
+        {{ Mylangue ? "趣味课题" : "Quiz" }}
 
+      </div>
 
+      <div class="btn" @click="change = 'Remove'">
 
+        {{ Mylangue ? "开心消消乐" : "Anipop" }}
 
+      </div>
 
     </div>
 
     <component :is="change" @close="change = ''"></component>
 
   </div>
 
@@ -14,15 +18,15 @@
 
 
 <script>
 
 // 答题
 
-import Issue from './issue.vue'
 
+import Issue from "./issue.vue";
 
 // 消消乐
 
-import Remove from './remove.vue'
 
+import Remove from "./remove.vue";
 
 export default {
 
   name: "gameMe",
 
-  components: {Issue,Remove},
 
+  components: { Issue, Remove },
 
   data() {
 
     return {
 
-      change:''
 
+      change: "",
 
     };
 
   },
 
   computed: {},
 
@@ -48,7 +52,7 @@ export default {
 
   z-index: 9999;
 
   width: 100vw;
 
   height: 100vh;
 
-  background-color: rgba(0,0,0,.5);
 
+  background-color: rgba(0, 0, 0, 0.5);
 
   .conten {
 
     padding: 100px 20px 20px;
 
     width: 394px;
 
@@ -73,11 +77,11 @@ export default {
 
         font-size: 30px;
 
       }
 
     }
 
-    .btn{
 
+    .btn {
 
       display: flex;
 
       justify-content: center;
 
       align-items: center;
 
-      margin-bottom:10px;
 
+      margin-bottom: 10px;
 
       margin: 0 auto 10px;
 
       background-color: #165491;
 
       border-radius: 5px;
 
@@ -89,8 +93,8 @@ export default {
 
   }
 
 }
 
 @media only screen and (max-width: 800px) {
 
-  .gameMe{
 
-    .conten{
 
+  .gameMe {
 
+    .conten {
 
       width: 100%;
 
       max-width: 375px;
 
     }

+ 87 - 74
web/src/views/gui/component/issue.vue
Просмотреть файл 

@@ -3,7 +3,7 @@
 
   <div class="issue">
 
     <div class="main">
 
       <div class="top">
 
-        <h2 v-if="flag === 'tow'">趣味问答</h2>
 
+        <h2 v-if="flag === 'tow'">{{ Mylangue ? "趣味课题" : "Quiz" }}</h2>
 
         <h2 v-else>&nbsp;</h2>
 
         <i class="el-icon-close" @click="$emit('close')"></i>
 
       </div>
 
@@ -13,11 +13,18 @@
 
           <div class="renwen"></div>
 
         </div>
 
         <div class="begin_right">
 
-          <p>欢迎来到</p>
 
-          <p>大理洱海科普教育中心趣味问答小游戏，</p>
 
-          <p>您将随机抽取二十道题进行作答，</p>
 
-          <p>答对十二题及以上为闯关成功！</p>
 
-          <div class="btnn" @click="beginTopic">开始答题</div>
 
+          <template v-if="Mylangue">
 
+            <p>欢迎来到</p>
 
+            <p>大理洱海科普教育中心趣味问答小游戏，</p>
 
+            <p>您将随机抽取二十道题进行作答，</p>
 
+            <p>答对十二题及以上为闯关成功！</p>
 
+          </template>
 
+          <p v-else>
 
+            You will be given a random selection of 20 questions to answer, and
 
+            if you answer 12 questions correctly or above, you will be declared
 
+            a winner.
 
+          </p>
 
+          <div class="btnn" @click="beginTopic">{{Mylangue?'开始答题':'Start'}}</div>
 
         </div>
 
       </div>
 
       <!-- 答题页面 -->
 
@@ -28,49 +35,71 @@
 
               topic[topicInd].correct
 
             }}
 
           </p>
 
-          <ul class="topic_con">
 
-            <li v-for="(item, index) in topic[topicInd].answer" :key="index">
 
-              <div class="case" @click="select(index, item.id)">
 
+          <!-- 答对或答错之后的页面颜色变化 -->
 
+          <ul class="topic_con" v-if="caseErr">
 
+            <li
 
+              v-for="(item, index) in topic[topicInd].answer"
 
+              :key="index"
 
+              :class="{
 
+                cuoWu: caseABC === item.id,
 
+                zhengQue: item.id === topic[topicInd].correct,
 
+              }"
 
+            >
 
+              <div class="case">
 
                 <!-- 选中了之后的显示 -->
 
-                <div v-show="caseInd === index"></div>
 
+                <div></div>
 
               </div>
 
               <span :class="{ active: caseInd === index }">{{
 
                 item.id + "、" + item.txt
 
               }}</span>
 
             </li>
 
           </ul>
 
+          <!-- 答题--选择答案 -->
 
+          <ul class="topic_con" v-else>
 
+            <li
 
+              v-for="(item, index) in topic[topicInd].answer"
 
+              :key="index"
 
+              :class="{ xuanze: caseInd === index }"
 
+            >
 
+              <div class="case" @click="select(index, item.id)">
 
+                <!-- 选中了之后的显示 -->
 
+                <div></div>
 
+              </div>
 
+              <span
 
+                @click="select(index, item.id)"
 
+                :class="{ active: caseInd === index }"
 
+                >{{ item.id + "、" + item.txt }}</span
 
+              >
 
+            </li>
 
+          </ul>
 
         </div>
 
         <!-- 下面的按钮 -->
 
-        <div class="topic_btn" @click="nextTi" v-if="caseErr">下一题</div>
 
-        <div class="topic_btn" @click="btnOk" v-else>确 定</div>
 
-
 
-        <!-- 答错之后的提示 -->
 
-        <!-- <div class="error" v-if="caseErr">
 
-          <p>对不起，您答错了</p>
 
-          <p>正确答案：</p>
 
-          <p>{{ caseErrTxt }}</p>
 
-          <div class="errBtn" @click="nextTi">下一题</div>
 
-        </div> -->
 
+        <div class="topic_btn" @click="nextTi" v-if="caseErr">
 
+          {{ topicInd < 20 ? `${Mylangue?'下一题':'Next'}` : `${Mylangue?'完成问答':'accomplish'}` }}
 
+        </div>
 
+        <div class="topic_btn" @click="btnOk" v-else>{{Mylangue?'确 定':'Confirm'}}</div>
 
       </div>
 
 
       <!-- 答对通关 -->
 
       <div class="topicDui" v-if="flag === 'three'">
 
         <img class="tini" src="@/assets/img/win.png" alt="" />
 
         <div>
 
-          <p>您的得分：{{ cunot + "0" }}</p>
 
-          <p>分享海报，传播洱海的美丽文化！</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>
 
-          <a class="btnn" href="share/share.png" download v-else>保存海报</a>
 
+          <p>{{Mylangue?'您的得分：':'Your Score：'}}{{ cunot + "0" }}</p>
 
+          <p>{{Mylangue?'分享海报，传播洱海的美丽文化！':"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
 
+          >
 
+          <a class="btnn" href="share/share.png" download v-else>{{Mylangue?'保存海报':'Save the poster'}}</a>
 
         </div>
 
       </div>
 
       <!-- 答错失败 -->
 
       <div class="topicCuo" v-if="flag === 'four'">
 
         <img src="@/assets/img/lose.png" alt="" />
 
-        <p>您的得分：{{ cunot + "0" }}</p>
 
-        <p>失败乃兵家常事，大侠请重头再来</p>
 
-        <div @click="beginTopic()">重新开始</div>
 
+        <p>{{Mylangue?'您的得分：':'Your Score：'}}{{ cunot + "0" }}</p>
 
+        <p>{{Mylangue?'失败乃兵家常事，大侠请重头再来':'Try again!'}}</p>
 
+        <div @click="beginTopic()">{{Mylangue?'重新开始':'Restart'}}</div>
 
       </div>
 
     </div>
 
   </div>
 
@@ -92,8 +121,7 @@ export default {
 
       cunot: 0, //用来记录答对的题目个数
 
       caseInd: null, //用来控制选择的样式
 
       caseABC: null, //用来记录当前选择的答案，进行判断
 
-      caseErr: false, //答错了显示的弹窗
 
-      caseErrTxt: "", //答错了显示的正确答案
 
+      caseErr: "", //点击确定判断答对了还是错了'zhengQue'--答对；'cuoWu'--答错
 
     };
 
   },
 
   //监听属性 类似于data概念
 
@@ -107,19 +135,10 @@ export default {
 
       // 最后一题
 
       if (this.topicInd === 19 && this.cunot >= 12) {
 
         this.flag = "three";
 
-        this.topic.forEach((v) => {
 
-          let temp = "";
 
-          v.answer.forEach((p) => {
 
-            if (p.id === v.correct) temp = p.txt;
 
-          });
 
-          v.title += "---" + temp;
 
-        });
 
       } else if (this.topicInd === 19 && this.cunot < 12) {
 
         this.flag = "four";
 
       }
 
-
 
-      this.caseInd = null;
 
-      this.caseErr = false;
 
+      this.caseErr = "";
 
       if (this.topicInd < 20) this.topicInd++;
 
     }, //选择题目
 
     select(index, id) {
 
@@ -128,44 +147,23 @@ export default {
 
     },
 
     //点击确定
 
     btnOk() {
 
-      // 最后一题
 
-      if (this.topicInd === 19 && this.cunot >= 12) {
 
-        this.flag = "three";
 
-        this.topic.forEach((v) => {
 
-          let temp = "";
 
-          v.answer.forEach((p) => {
 
-            if (p.id === v.correct) temp = p.txt;
 
-          });
 
-          v.title += "---" + temp;
 
-        });
 
-        return;
 
-      } else if (this.topicInd === 19 && this.cunot < 12) {
 
-        this.flag = "four";
 
-        return;
 
-      }
 
-
 
-      if (this.caseInd === null) return this.$message.warning("未选择答案");
 
-
 
+      if (this.caseInd === null) return this.$message.warning(`${this.Mylangue?'未选择答案':'No Answer is Selected'}`);
 
       if (this.topic[this.topicInd].correct === this.caseABC) {
 
         // console.log('答对了');
 
-        this.caseInd = null;
 
-        if (this.topicInd < 20) this.topicInd++;
 
+        this.caseErr = "zhengQue";
 
         this.cunot++;
 
       } else {
 
         // console.log('答错了');
 
-        this.caseErr = true;
 
-        // this.topic[this.topicInd].answer.forEach((v) => {
 
-        //   if (v.id === this.topic[this.topicInd].correct)
 
-        //     this.caseErrTxt = v.id + "、" + v.txt;
 
-        // });
 
+        this.caseErr = "cuoWu";
 
       }
 
+      this.caseInd = null;
 
     },
 
     // 点击开始答题
 
     beginTopic() {
 
       this.caseInd = null;
 
       this.cunot = 0;
 
       this.topicInd = 0;
 
-      this.caseErr = false;
 
+      this.caseErr = "";
 
       this.flag = "tow";
 
       this.getTopic();
 
     },
 
@@ -190,7 +188,7 @@ export default {
 
   },
 
   //生命周期 - 创建完成（可以访问当前this实例）
 
   created() {
 
-    console.log('题目长度',questions.length);
 
+    // console.log('题目长度',questions.length);
 
   },
 
   //生命周期 - 挂载完成（可以访问DOM元素）
 
   mounted() {},
 
@@ -318,18 +316,33 @@ export default {
 
               margin: 3px;
 
               width: 20px;
 
               height: 20px;
 
-              background-color: #fff;
 
+              background-color: transparent;
 
               border-radius: 50%;
 
             }
 
-            .correct{
 
-              background-color: #50ffa2;
 
-            }
 
           }
 
           & > span {
 
             font-size: 18px;
 
           }
 
-          .active {
 
-            // color: #50ffa2;
 
+        }
 
+        .xuanze {
 
+          .case {
 
+            & > div {
 
+              background-color: #fff;
 
+            }
 
+          }
 
+        }
 
+        .cuoWu {
 
+          .case {
 
+            & > div {
 
+              background-color: #FF5050;
 
+            }
 
+          }
 
+        }
 
+        .zhengQue {
 
+          .case {
 
+            & > div {
 
+              background-color: #50FFA2;
 
+            }
 
           }
 
         }
 
       }

+ 12 - 5
web/src/views/gui/component/quality.vue
Просмотреть файл 

@@ -2,20 +2,20 @@
 
   <div class="quality">
 
     <div class="main">
 
       <div class="top">
 
-        <h2>精品典藏</h2>
 
+        <h2>{{Mylangue?'精品典藏':'Collections'}}</h2>
 
         <i class="el-icon-close" @click="$emit('close')"></i>
 
       </div>
 
       <div class="conten">
 
         <div class="search">
 
           <el-input
 
             v-model="input"
 
-            placeholder="请输入藏品名称..."
 
+            :placeholder="Mylangue?'请输入藏品名称...':'Enter title here'"
 
             suffix-icon="el-icon-search"
 
           ></el-input>
 
           <el-button type="primary" size="small" style="margin-left: 15px"
 
-            >搜索</el-button
 
+            >{{Mylangue?'搜索':'Search'}}</el-button
 
           >
 
-          <el-button size="small">重置</el-button>
 
+          <el-button size="small">{{Mylangue?'重置':'Reset'}}</el-button>
 
         </div>
 
         <!-- 内容 -->
 
         <div class="rowAll">
 
@@ -75,7 +75,14 @@ export default {
 
   //生命周期 - 创建完成（可以访问当前this实例）
 
   created() {},
 
   //生命周期 - 挂载完成（可以访问DOM元素）
 
-  mounted() {},
 
+  mounted() {
 
+    // 控制分页器的英文版文字
 
+    if(!this.Mylangue) {
 
+      let dom = document.getElementsByClassName("el-pagination__jump")
 
+      dom[0].childNodes[0].nodeValue = "Jump to";
 
+      dom[0].childNodes[2].nodeValue = "page";
 
+    }
 
+  },
 
   beforeCreate() {}, //生命周期 - 创建之前
 
   beforeMount() {}, //生命周期 - 挂载之前
 
   beforeUpdate() {}, //生命周期 - 更新之前

+ 2 - 2
web/src/views/gui/component/remove.vue
Просмотреть файл 

@@ -3,11 +3,11 @@
 
   <div class="remove">
 
     <div class="main">
 
       <div class="top">
 
-        <h2>开心消消乐</h2>
 
+        <h2>{{Mylangue?'开心消消乐':'Anipop'}}</h2>
 
         <i class="el-icon-close" @click="$emit('close')"></i>
 
       </div>
 
 
-      <iframe src="remove/index.html" frameborder="0"></iframe>
 
+      <iframe id="iframe" :src="`remove/${Mylangue?'index.html':'index2.html'}`" frameborder="0"></iframe>
 
     </div>
 
   </div>
 
 </template>

+ 13 - 8
web/src/views/gui/component/share.vue
Просмотреть файл 

@@ -2,14 +2,19 @@
 
   <div class="share">
 
     <div class="main">
 
       <div class="top">
 
-        <h2>分享展览</h2>
 
+        <h2>{{ Mylangue ? "分享展览" : "SHARE" }}</h2>
 
         <i class="el-icon-close" @click="$emit('close')"></i>
 
       </div>
 
       <div class="myInput">
 
         https://lanhuapp.com/web/#/item/project/product?tid=de3e5e3
 
       </div>
 
       <div class="btn">
 
-        <el-button type="primary" style="width:165px;height:40px" @click="copy">复制链接</el-button>
 
+        <el-button
 
+          type="primary"
 
+          style="width: 165px; height: 40px"
 
+          @click="copy"
 
+          >{{ Mylangue ? "复制链接" : "Copy link" }}</el-button
 
+        >
 
       </div>
 
     </div>
 
   </div>
 
@@ -29,7 +34,7 @@ export default {
 
   watch: {},
 
   //方法集合
 
   methods: {
 
-    copy(){
 
+    copy() {
 
       // 存储传递过来的数据
 
       let OrderNumber = "9999999999";
 
       // 创建一个input 元素
 
@@ -52,7 +57,7 @@ export default {
 
         message: "复制成功",
 
         type: "success",
 
       });
 
-    }
 
+    },
 
   },
 
   //生命周期 - 创建完成（可以访问当前this实例）
 
   created() {},
 
@@ -75,7 +80,7 @@ export default {
 
   z-index: 9999;
 
   width: 100vw;
 
   height: 100vh;
 
-  background-color: rgba(0,0,0,.5);
 
+  background-color: rgba(0, 0, 0, 0.5);
 
   .main {
 
     padding: 20px;
 
     padding-top: 120px;
 
@@ -113,7 +118,7 @@ export default {
 
       background-color: #fff;
 
       border-radius: 5px;
 
     }
 
-    .btn{
 
+    .btn {
 
       margin-top: 20px;
 
       width: 100%;
 
       display: flex;
 
@@ -123,8 +128,8 @@ export default {
 
   }
 
 }
 
 @media only screen and (max-width: 800px) {
 
-  .share{
 
-    .main{
 
+  .share {
 
+    .main {
 
       width: 100%;
 
       max-width: 375px;
 
     }

+ 46 - 32
web/src/views/gui/menu.vue
Просмотреть файл 

@@ -30,7 +30,7 @@
 
           >
 
             <a>
 
               <img
 
-                title="自动漫游"
 
+                :title="Mylangue ? '自动漫游' : 'Explore'"
 
                 :src="require('@/assets/images/icon/play.png')"
 
                 width="24"
 
                 height="24"
 
@@ -69,10 +69,10 @@
 
               @click="isGuide = !isGuide"
 
               id="pullTab"
 
               rel="tooltip"
 
-              title="场景导览"
 
+              :title="Mylangue ? '场景导览' : 'Auto Explore'"
 
             >
 
               <img
 
-                title="场景导览"
 
+                :title="Mylangue ? '场景导览' : 'Auto Explore'"
 
                 class="icon icon-inside"
 
                 :src="
 
                   require(`@/assets/images/icon/auto${
 
@@ -83,18 +83,18 @@
 
             </div>
 
 
             <div
 
-              title="全景漫游"
 
+              :title="Mylangue ? '全景漫游' : 'Explore'"
 
               data-original-title="全景漫游"
 
               id="gui-modes-inside"
 
               rel="tooltip"
 
             >
 
               <img
 
-                title="全景漫游"
 
+                :title="Mylangue ? '全景漫游' : 'Explore'"
 
                 class="icon icon-inside"
 
                 :src="require('@/assets/images/icon/inside.png')"
 
               />
 
               <img
 
-                title="全景漫游"
 
+                :title="Mylangue ? '全景漫游' : 'Explore'"
 
                 class="icon icon-inside active"
 
                 :src="require('@/assets/images/icon/inside_active.png')"
 
               />
 
@@ -104,35 +104,35 @@
 
               data-original-title="俯视图"
 
               id="gui-modes-floorplan"
 
               rel="tooltip"
 
-              title="顶部俯视"
 
+              :title="Mylangue ? '顶部俯视' : 'Floor plan'"
 
             >
 
               <img
 
-                title="顶部俯视"
 
+                :title="Mylangue ? '顶部俯视' : 'Floor plan'"
 
                 class="icon icon-inside"
 
                 :src="require('@/assets/images/icon/floor.png')"
 
               />
 
               <img
 
-                title="顶部俯视"
 
+                :title="Mylangue ? '顶部俯视' : 'Floor plan'"
 
                 class="active icon icon-inside active"
 
                 :src="require('@/assets/images/icon/floor_active.png')"
 
               />
 
             </div>
 
 
             <div
 
-              title="迷你漫游"
 
+              :title="Mylangue ? '三维模型' : '3D Model'"
 
               data-original-title="迷你模型"
 
               id="gui-modes-dollhouse"
 
               rel="tooltip"
 
             >
 
               <img
 
-                title="迷你漫游"
 
+                :title="Mylangue ? '三维模型' : '3D Model'"
 
                 class="icon icon-inside"
 
                 :src="require('@/assets/images/icon/dollhouse.png')"
 
               />
 
               <img
 
                 class="icon icon-inside active"
 
                 :src="require('@/assets/images/icon/dollhouse_active.png')"
 
-                title="迷你漫游"
 
+                :title="Mylangue ? '三维模型' : '3D Model'"
 
               />
 
             </div>
 
 
@@ -144,13 +144,17 @@
 
                     bgmPlay ? 'musicon' : 'musicoff'
 
                   }.png`)
 
                 "
 
-                :title="bgmPlay ? '打开音乐' : '关闭音乐'"
 
+                :title="
 
+                  bgmPlay
 
+                    ? `${Mylangue ? '开启音乐' : 'Music on'}`
 
+                    : `${Mylangue ? '关闭音乐' : 'Music off'}`
 
+                "
 
               />
 
             </div>
 
 
             <ul class="btn-list">
 
               <!-- 精品典藏 -->
 
-              <li class="quality" title="精品典藏" @click="isQuality = true">
 
+              <li class="quality" :title="Mylangue ? '精品典藏' : 'Collections'" @click="isQuality = true">
 
                 <img
 
                   :src="
 
                     require(`@/assets/img/${
 
@@ -160,7 +164,7 @@
 
                 />
 
               </li>
 
               <!-- 点赞 -->
 
-              <li title="点赞" class="like" @click="handleLike">
 
+              <li :title="Mylangue ? '点赞' : 'Like'"  class="like" @click="handleLike">
 
                 <img
 
                   :src="
 
                     require(`@/assets/img/${
 
@@ -258,7 +262,7 @@
 
 
         <!-- 游戏分享和切换语言 -->
 
         <ul class="btn-list">
 
-          <li title="游戏" @click="isIssue = true">
 
+          <li :title="Mylangue ? '游戏' : 'Games'" @click="isIssue = true">
 
             <img
 
               :src="
 
                 require(`@/assets/img/${isGame ? 'game_active' : 'game'}.png`)
 
@@ -266,11 +270,11 @@
 
             />
 
           </li>
 
           <!-- 分享 -->
 
-          <li title="分享" @click="isShare = true">
 
+          <li :title="Mylangue ? '分享' : 'Share'" @click="isShare = true">
 
             <img src="@/assets/img/share.png" />
 
           </li>
 
-          <li title="英文">
 
-            <img src="@/assets/img/cn.png" />
 
+          <li :title="Mylangue ? '语言' : 'Language'" @click="langueCut">
 
+            <img :src="require(`@/assets/img/${Mylangue ? 'cn' : 'en'}.png`)" />
 
           </li>
 
         </ul>
 
 
@@ -279,12 +283,12 @@
 
           class="ui-icon wide"
 
           data-placement="top"
 
           rel="tooltip"
 
-          title="全屏"
 
+          :title="Mylangue ? '全屏' : 'Fullscreen'"
 
         >
 
           <a>
 
             <img
 
               :src="require('@/assets/images/icon/fullscreen.png')"
 
-              title="全屏"
 
+              :title="Mylangue ? '全屏' : 'Fullscreen'"
 
             />
 
           </a>
 
         </div>
 
@@ -293,12 +297,12 @@
 
           class="ui-icon wide"
 
           data-placement="top"
 
           rel="tooltip"
 
-          title="关闭全屏"
 
+          :title="Mylangue ? '关闭全屏' : 'Esc'"
 
           style="display: none"
 
         >
 
           <a>
 
             <img
 
-              title="关闭全屏"
 
+              :title="Mylangue ? '关闭全屏' : 'Esc'"
 
               :src="require('@/assets/images/icon/fullscreen_exit.png')"
 
               style="width: 50px"
 
             />
 
@@ -311,16 +315,19 @@
 
     </div>
 
     <!-- 移动端右上角的盒子 -->
 
     <div class="isMobileBox" v-else>
 
-      <div @click="mobilShow=!mobilShow">
 
+      <div @click="mobilShow = !mobilShow">
 
         <img
 
           :src="require(`@/assets/imgM/${mobilShow ? 'close' : 'menu'}.png`)"
 
         />
 
       </div>
 
       <div v-if="mobilShow" class="show">
 
         <!-- 语言切换 -->
 
-        <img src="@/assets/img/cn.png" />
 
+        <img
 
+          :src="require(`@/assets/img/${Mylangue ? 'cn' : 'en'}.png`)"
 
+          @click="langueCut"
 
+        />
 
         <!-- 分享 -->
 
-        <img src="@/assets/img/share.png"  @click="isShare = true"/>
 
+        <img src="@/assets/img/share.png" @click="isShare = true" />
 
         <!-- 答题 -->
 
         <img
 
           @click="isIssue = true"
 
@@ -336,7 +343,7 @@
 
     <!-- 顶部的名字还有浏览人数 -->
 
     <Browse />
 
     <!-- 游戏 -->
 
-    <Game v-if="isIssue" @close="isIssue = false"/>
 
+    <Game v-if="isIssue" @close="isIssue = false" />
 
   </div>
 
 </template>
 
 
@@ -346,7 +353,7 @@ import Quality from "./component/quality";
 
 import Browse from "./component/browse";
 
 import Game from "./component/game";
 
 export default {
 
-  components: { Quality, Share, Browse,Game  },
 
+  components: { Quality, Share, Browse, Game },
 
   data() {
 
     return {
 
       mobilShow: false,
 
@@ -371,9 +378,16 @@ export default {
 
     this.getlikeCon("detail/");
 
   },
 
   methods: {
 
+    // 切换语言
 
+    langueCut() {
 
+      if (window.location.href.indexOf("_1") > -1) {
 
+        window.location.href = window.location.origin + window.location.hash.slice(0, -2);
 
+      } else window.location.href = window.location.origin + window.location.hash+'_1';
 
+      location.reload(true);
 
+    },
 
     // 封装点赞的接口
 
     getlikeCon(val) {
 
-      fetch("http://47.112.166.173:8109/api/count/" + val + window.number)
 
+      fetch("http://47.112.166.173:8109/api/count/" + val + 1171)
 
         .then((response) => response.json())
 
         .then((data) => {
 
           this.likeNum = data.data.starSum;
 
@@ -644,13 +658,13 @@ export default {
 
   z-index: 999;
 
   right: 20px;
 
   top: 15px;
 
-  img{
 
+  img {
 
     width: 38px;
 
     height: 38px;
 
   }
 
-  .show{
 
+  .show {
 
     margin-top: 8px;
 
-    &>img{
 
+    & > img {
 
       display: block;
 
       margin-bottom: 8px;
 
     }