up

web/public/remove/css/style.css

@@ -5,7 +5,7 @@
 
 #ul1 {
   position: relative;
-  margin:0px auto;
+  margin: 0px auto;
   overflow: hidden;
 }
 
@@ -68,29 +68,34 @@ body {
   background-size: cover;
   float: left;
 }
-.top{
+
+.top {
   display: flex;
   color: #fff;
   justify-content: center;
   align-items: center;
   height: 30px;
 }
+
 .left {
   margin-right: 50px;
 }
-.end{
+
+.end {
   display: none;
   position: absolute;
   top: 45%;
   left: 50%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
 }
-.end>div{
+
+.end>div {
   color: #fff;
   margin-top: 30px;
   font-size: 24px;
 }
-.end .btn{
+
+.end .btn {
   cursor: pointer;
   margin: 30px auto 0;
   display: flex;
@@ -100,14 +105,44 @@ body {
   height: 75px;
   background: url('../images/btn.png');
   background-size: 100% 100%;
+  padding-right: 20px;
+}
+
+.zhezao {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-items: center;
+  z-index: 999;
+  background-color: rgba(0, 0, 0, .7);
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.btnGo {
+  cursor: pointer;
+  font-size: 24px;
+  color: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 230px;
+  height: 61px;
+  background: url('../images/btn.png');
+  background-size: 100% 100%;
+  padding-right: 20px;
 }
 
 /* 适配手机端 */
 @media screen and (max-width: 600px) {
-  #ul1{
+  #ul1 {
     width: 100vw !important;
     height: 100vh !important;
   }
+
   #ul1 li {
     width: calc(100vw / 7);
     height: calc(100vw / 7);

web/public/remove/index.html

@@ -18,10 +18,14 @@
   <div class="end">
     <div>游戏结束</div>
     <div>您的分数:<span class="endF">0</span>分</div>
-    <div class="btn">重 新 开 始</div>
+    <div class="btn">重新开始</div>
   </div>
 
-<ul id="ul1"></ul>
+<ul id="ul1">
+  <div class="zhezao">
+    <div class="btnGo">开始游戏</div>
+  </div>
+</ul>
 
 <script type="text/javascript" src="js/jquery.min.js"></script>
 <script type="text/javascript" src="js/index.js"></script>

web/public/remove/js/index.js

@@ -10,17 +10,22 @@ document.ontouchmove = function (ev) {
 let grade = 0
 // 设置一个定时器
 let timing =61
-let timeId = setInterval(() => {
-  timing--
-  $('.time').text(timing)
-  if(timing<=0) {
-    $('#ul1').hide()
-    $('.top').hide()
-    $('.endF').text(grade)
-    $('.end').show()
-    clearInterval(timeId)
-  }
-}, 1000);
+
+$('.btnGo').click(()=>{
+  $('.zhezao').hide()
+  let timeId = setInterval(() => {
+    timing--
+    $('.time').text(timing)
+    if(timing<=0) {
+      $('#ul1').hide()
+      $('.top').hide()
+      $('.endF').text(grade)
+      $('.end').show()
+      clearInterval(timeId)
+    }
+  }, 1000);
+})
+
 // 点击重新开始
 $('.btn').click(()=>{
   window.location.reload();

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

@@ -75,8 +75,8 @@ export default {
 // 移动端样式
 @media screen and (max-width: 800px) {
   .browse {
-    top: 10px;
-    left: 10px;
+    top: 15px;
+    left: 20px;
     & > div {
       flex-direction: column;
       align-items: stretch;
@@ -84,7 +84,8 @@ export default {
         width: 180px;
       }
       .right{
-        margin-top: 5px;
+        margin-top: 10px;
+        font-size: 12px;
       }
     }
     .line {

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

@@ -48,6 +48,7 @@ export default {
   z-index: 9999;
   width: 100vw;
   height: 100vh;
+  background-color: rgba(0,0,0,.5);
   .conten {
     padding: 100px 20px 20px;
     width: 394px;

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

@@ -41,15 +41,16 @@
           </ul>
         </div>
         <!-- 下面的按钮 -->
-        <div class="topic_btn" @click="btnOk">确 定</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">
+        <!-- <div class="error" v-if="caseErr">
           <p>对不起，您答错了</p>
           <p>正确答案：</p>
           <p>{{ caseErrTxt }}</p>
           <div class="errBtn" @click="nextTi">下一题</div>
-        </div>
+        </div> -->
       </div>
 
       <!-- 答对通关 -->
@@ -58,10 +59,10 @@
         <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>
+          <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>
         </div>
       </div>
       <!-- 答错失败 -->
@@ -153,10 +154,10 @@ export default {
       } 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.topic[this.topicInd].answer.forEach((v) => {
+        //   if (v.id === this.topic[this.topicInd].correct)
+        //     this.caseErrTxt = v.id + "、" + v.txt;
+        // });
       }
     },
     // 点击开始答题
@@ -273,6 +274,7 @@ export default {
           }
         }
         .btnn {
+          padding-right: 20px;
           cursor: pointer;
           margin: 100px auto 0;
           width: 257px;
@@ -316,19 +318,23 @@ export default {
               margin: 3px;
               width: 20px;
               height: 20px;
-              background-color: #50ffa2;
+              background-color: #fff;
               border-radius: 50%;
             }
+            .correct{
+              background-color: #50ffa2;
+            }
           }
           & > span {
             font-size: 18px;
           }
           .active {
-            color: #50ffa2;
+            // color: #50ffa2;
           }
         }
       }
       .topic_btn {
+        padding-right: 20px;
         cursor: pointer;
         margin: 10px auto 0;
         width: 257px;
@@ -353,6 +359,7 @@ export default {
           text-align: center;
         }
         div {
+          padding-right: 20px;
           cursor: pointer;
           margin: 10px auto 0;
           width: 257px;
@@ -381,6 +388,7 @@ export default {
         margin: 15px 0;
       }
       & > div {
+        padding-right: 20px;
         cursor: pointer;
         margin: 80px auto 0;
         width: 257px;
@@ -412,6 +420,7 @@ export default {
           max-height: 410px;
         }
         .btnn {
+          padding-right: 20px;
           cursor: pointer;
           margin: 0px auto 0;
           width: 257px;
@@ -461,6 +470,7 @@ export default {
             font-size: 16px;
           }
           .btnn {
+            padding-right: 10px;
             width: 140px;
             height: 42px;
             margin: 10px auto 0;
@@ -497,6 +507,7 @@ export default {
           overflow-y: auto;
         }
         .topic_btn {
+          padding-right: 10px;
           position: absolute;
           left: 50%;
           bottom: 20px;
@@ -510,6 +521,7 @@ export default {
             font-size: 16px;
           }
           .errBtn {
+            padding-right: 10px;
             width: 140px;
             height: 42px;
             margin: 10px auto 0;
@@ -523,6 +535,7 @@ export default {
           height: 200px;
         }
         & > div {
+          padding-right: 10px;
           width: 140px;
           height: 42px;
           margin: 50px auto 0;
@@ -546,6 +559,7 @@ export default {
             max-height: 280px;
           }
           .btnn {
+            padding-right: 10px;
             width: 140px;
             height: 42px;
             margin: 10px auto 0;

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

@@ -90,6 +90,7 @@ export default {
   outline: 2px solid #165491;
 }
 .quality {
+  background-color: rgba(0,0,0,.5);
   position: fixed;
   top: 0;
   left: 0;

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

@@ -7,7 +7,7 @@
         <i class="el-icon-close" @click="$emit('close')"></i>
       </div>
 
-      <iframe src="/remove/index.html" frameborder="0"></iframe>
+      <iframe src="remove/index.html" frameborder="0"></iframe>
     </div>
   </div>
 </template>

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

@@ -75,6 +75,7 @@ export default {
   z-index: 9999;
   width: 100vw;
   height: 100vh;
+  background-color: rgba(0,0,0,.5);
   .main {
     padding: 20px;
     padding-top: 120px;
@@ -84,9 +85,9 @@ export default {
     left: 50%;
     transform: translate(-50%, -50%);
     z-index: 9999;
-    width: 394px;
-    height: 392px;
-    background: url("../../../assets/imgM/game.png");
+    width: 571px;
+    height: 361px;
+    background: url("../../../assets/img/fenx.png");
     background-size: 100% 100%;
     .top {
       margin-bottom: 50px;

web/src/views/gui/menu.vue

@@ -567,7 +567,7 @@ export default {
     margin-left: 12px;
   }
   .viewContainer {
-    padding: 15px 0 10px;
+    padding: 15px 0 10px 10px;
     border-radius: 50px;
   }
 
@@ -642,8 +642,8 @@ export default {
   color: red;
   position: fixed;
   z-index: 999;
-  right: 10px;
-  top: 10px;
+  right: 20px;
+  top: 15px;
   img{
     width: 38px;
     height: 38px;