等数据

web/public/static/css/main.css

@@ -3410,7 +3410,6 @@ a.hasHover:hover, a:active {
     float: left;
     position: relative;
     border-radius: 25px;
-    margin:0 20px;
 }
 
 .viewContainer>div,.viewContainer>li {
@@ -6958,6 +6957,26 @@ a.hasHover.tag-link:hover {
     }
 }
 
+/* 移动端定制样式 */
+@media only screen and (max-width: 800px) {
+#gui-modes-inside{
+    display: none !important;
+}
+#gui-modes-inside{
+    display: none !important;
+}
+#gui-modes-floorplan{
+    display: none !important;
+}
+#gui-modes-dollhouse{
+    display: none !important;
+}
+#vr{
+    display: none !important;
+}
+
+
+}
 @media only screen and (max-width: 600px) {
     #gui-modes-map>div[rel]:hover, #play:hover {
         background: transparent;
@@ -6968,19 +6987,19 @@ a.hasHover.tag-link:hover {
     .pinBottom.right, .pinBottom.left {
         bottom: 5px;
     }
-    .pinBottom.left {
+    /* .pinBottom.left {
         right: 10px;
         left: unset;
-    }
-    .viewContainer, #gui-modes-map {
+    } */
+    /* .viewContainer, #gui-modes-map {
         display: flex;
         flex-direction: column;
-    }
+    } */
     #play, #pause {
-        width: 64px;
+        width: 50px;
     }
     #gui-modes-map>div[rel] {
-        width: 64px;
+        width: 50px;
     }
     .progressbar {
         width: 70%;
@@ -7056,6 +7075,6 @@ a.hasHover.tag-link:hover {
 
 
 #model-title{
-    color: #fff;
-    /* display: none!important; */
+    /* color: #fff; */
+    display: none!important;
 }

web/src/assets/style/reset.css

@@ -267,3 +267,14 @@ input::-webkit-input-placeholder {
   background: #244d77;
   border-color: #244d77;
 }
+img {
+  image-rendering: -moz-crisp-edges;
+  /* Firefox */
+  image-rendering: -o-crisp-edges;
+  /* Opera */
+  image-rendering: -webkit-optimize-contrast;
+  /*Webkit (non-standard naming) */
+  image-rendering: crisp-edges;
+  -ms-interpolation-mode: nearest-neighbor;
+  /* IE (non-standard property) */
+}

web/src/assets/style/reset.less

@@ -229,10 +229,12 @@ a {
 .el-pagination .btn-prev {
   color: #fff;
 }
-.el-pagination__jump{
+
+.el-pagination__jump {
   color: #fff;
 }
-.el-pagination__jump .el-input__inner{
+
+.el-pagination__jump .el-input__inner {
   width: 30px;
   height: 30px;
 }
@@ -300,11 +302,13 @@ input::-webkit-input-placeholder {
   display: flex;
   justify-content: center;
 }
-.el-button{
+
+.el-button {
   background: transparent;
-    border: 1px solid #DCDFE6;
-    color: #fff;
+  border: 1px solid #DCDFE6;
+  color: #fff;
 }
+
 .el-button--primary {
   background-color: #165491;
   border-color: #165491;
@@ -314,4 +318,16 @@ input::-webkit-input-placeholder {
 .el-button--primary:hover {
   background: #244d77;
   border-color: #244d77;
+}
+
+img {
+  image-rendering: -moz-crisp-edges;
+  /* Firefox */
+  image-rendering: -o-crisp-edges;
+  /* Opera */
+  image-rendering: -webkit-optimize-contrast;
+  /*Webkit (non-standard naming) */
+  image-rendering: crisp-edges;
+ -ms-interpolation-mode: nearest-neighbor;
+  /* IE (non-standard property) */
 }

web/src/pages/Home.vue

@@ -169,9 +169,8 @@ export default {
 <style lang="less" scoped>
 .exhibition {
   position: absolute;
-  top: 150px;
+  top: 50px;
   right: 0;
-  z-index: 99;
 }
 .parent-body {
   width: 100%;

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

@@ -1,75 +1,95 @@
 <template>
-<div class='browse'>
-  <div>
-    <img src="@/assets/img/logo.png" alt="">
-    <span class="line"></span>
-    <img src="@/assets/img/eye.png" alt="">
-    <span class="txt">{{myMoods}}访问量</span>
+  <div class="browse">
+    <div>
+      <img class="logo" src="@/assets/img/logo.png" alt="" />
+      <span class="line"></span>
+      <div class="right">
+      <img src="@/assets/img/eye.png" alt="" />
+      <span class="txt">{{ myMoods }}访问量</span>
+      </div>
+    </div>
   </div>
-</div>
 </template>
 
 <script>
 export default {
-name:'browse',
-components: {},
-data() {
-//这里存放数据
-return {
-  myMoods:0
-};
-},
-//监听属性 类似于data概念
-computed: {},
-//监控data中的数据变化
-watch: {},
-//方法集合
-methods: {
-
-},
-//生命周期 - 创建完成（可以访问当前this实例）
-created() {
-
-},
-//生命周期 - 挂载完成（可以访问DOM元素）
-mounted() {
-      fetch("http://47.112.166.173:8109/api/count/saveVisit/" + window.number)
+  name: "browse",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      myMoods: 0,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {},
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {
+    fetch("http://47.112.166.173:8109/api/count/saveVisit/" + window.number)
       .then((response) => response.json())
       .then((data) => {
         this.myMoods = data.data.visitSum;
         // console.log(data)
       });
-},
-beforeCreate() {}, //生命周期 - 创建之前
-beforeMount() {}, //生命周期 - 挂载之前
-beforeUpdate() {}, //生命周期 - 更新之前
-updated() {}, //生命周期 - 更新之后
-beforeDestroy() {}, //生命周期 - 销毁之前
-destroyed() {}, //生命周期 - 销毁完成
-activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
-}
+  },
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
 </script>
 <style lang='less' scoped>
-.browse{
+.browse {
   position: fixed;
   top: 30px;
   left: 40px;
   z-index: 999;
-  &>div{
+  & > div {
     display: flex;
     align-items: center;
   }
-  .line{
+  .line {
     margin: 0 15px;
     display: inline-block;
     width: 2px;
     height: 30px;
-    background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255));
+    background-image: linear-gradient(
+      rgba(255, 255, 255, 0.3),
+      rgba(255, 255, 255)
+    );
   }
-  .txt{
+  .txt {
     color: #fff;
     margin-left: 10px;
   }
 }
-
+// 移动端样式
+@media screen and (max-width: 800px) {
+  .browse {
+    top: 10px;
+    left: 10px;
+    & > div {
+      flex-direction: column;
+      align-items: stretch;
+      .logo {
+        width: 180px;
+      }
+      .right{
+        margin-top: 5px;
+      }
+    }
+    .line {
+      display: none;
+    }
+  }
+}
 </style>

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

@@ -22,24 +22,27 @@
       </div>
       <!-- 答题页面 -->
       <div class="topic" v-if="flag === 'tow'">
-        <p class="topicTxt">
-          {{ topicInd + 1 }}.{{ topic[topicInd].title }}---{{
-            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)">
-              <!-- 选中了之后的显示 -->
-              <div v-show="caseInd === index"></div>
-            </div>
-            <span :class="{ active: caseInd === index }">{{
-              item.id + "、" + item.txt
-            }}</span>
-          </li>
-          <!-- 下面的按钮 -->
-          <div class="topic_btn" @click="btnOk">确 定</div>
-        </ul>
+        <div class="conBox">
+          <p class="topicTxt">
+            {{ topicInd + 1 }}.{{ topic[topicInd].title }}---{{
+              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)">
+                <!-- 选中了之后的显示 -->
+                <div v-show="caseInd === index"></div>
+              </div>
+              <span :class="{ active: caseInd === index }">{{
+                item.id + "、" + item.txt
+              }}</span>
+            </li>
+          </ul>
+        </div>
+        <!-- 下面的按钮 -->
+        <div class="topic_btn" @click="btnOk">确 定</div>
+
         <!-- 答错之后的提示 -->
         <div class="error" v-if="caseErr">
           <p>对不起，您答错了</p>
@@ -48,6 +51,7 @@
           <div class="errBtn" @click="nextTi">下一题</div>
         </div>
       </div>
+
       <!-- 答对通关 -->
       <div class="topicDui" v-if="flag === 'three'">
         <img class="tini" src="@/assets/img/win.png" alt="" />
@@ -55,7 +59,7 @@
           <p>您的得分：{{ cunot + "0" }}</p>
           <p>分享海报，传播洱海的美丽文化！</p>
           <img src="../../../assets/images/project/hotspot_bg.jpg" alt="" />
-          <div class="btnn">保存海报</div>
+          <div class="btnn" @click="saveImg">保存海报</div>
         </div>
       </div>
       <!-- 答错失败 -->
@@ -95,6 +99,10 @@ export default {
   watch: {},
   //方法集合
   methods: {
+    // 答题成功点击保存海报
+    saveImg() {
+      console.log("答题成功点击保存海报");
+    },
     //点击答错里面的下一题
     nextTi() {
       // 最后一题
@@ -121,7 +129,6 @@ export default {
     },
     //点击确定
     btnOk() {
-      if (this.caseInd === null) return this.$message.warning("未选择答案");
       // 最后一题
       if (this.topicInd === 9 && this.cunot >= 6) {
         this.flag = "three";
@@ -132,9 +139,14 @@ export default {
           });
           v.title += "---" + temp;
         });
+        return;
       } else if (this.topicInd === 9 && this.cunot < 6) {
         this.flag = "four";
+        return;
       }
+
+      if (this.caseInd === null) return this.$message.warning("未选择答案");
+
       if (this.topic[this.topicInd].correct === this.caseABC) {
         // console.log('答对了');
         this.caseInd = null;
@@ -160,6 +172,7 @@ export default {
     },
     // 封装随机获取10道题目
     getTopic() {
+      this.topic = [];
       let arr = [];
       for (let i = 0; i < 200; i++) {
         //一个从0到100的数组
@@ -173,7 +186,7 @@ export default {
       arr.forEach((v) => {
         this.topic.push(questions[v]);
       });
-      console.log(999, this.topic); //控制台会输出10个不同的数
+      // console.log(999, this.topic); //控制台会输出10个不同的数
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -190,6 +203,9 @@ export default {
 };
 </script>
 <style lang='less' scoped>
+::-webkit-scrollbar-thumb {
+  outline: 2px solid #165491;
+}
 .issue {
   position: fixed;
   top: 0;
@@ -309,18 +325,18 @@ export default {
             color: #50ffa2;
           }
         }
-        .topic_btn {
-          cursor: pointer;
-          margin: 10px auto 0;
-          width: 257px;
-          height: 75px;
-          background: url("../../../assets/img/btn.png");
-          background-size: 100% 100%;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          font-size: 24px;
-        }
+      }
+      .topic_btn {
+        cursor: pointer;
+        margin: 10px auto 0;
+        width: 257px;
+        height: 75px;
+        background: url("../../../assets/img/btn.png");
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
       }
       .error {
         position: absolute;
@@ -409,4 +425,134 @@ export default {
     }
   }
 }
+@media only screen and (max-width: 800px) {
+  .issue {
+    .main {
+      top: auto;
+      bottom: 5px;
+      transform: translate(-50%, 0);
+      width: 100%;
+      max-width: 350px;
+      height: calc(100vh - 40px);
+      background: url("../../../assets/imgM/bg.png");
+      background-size: 100% 100%;
+      padding-top: 70px;
+      .top {
+        margin-bottom: 5px;
+      }
+      .begin {
+        width: 100%;
+        margin: 0 auto;
+        display: block;
+        .begin_left {
+          margin: 0 auto;
+          width: 130px;
+          height: 240px;
+          .renwen {
+            left: -15px;
+          }
+        }
+        .begin_right {
+          padding-top: 10px;
+          & > p {
+            font-size: 16px;
+          }
+          .btnn {
+            width: 140px;
+            height: 42px;
+            margin: 10px auto 0;
+            font-size: 16px;
+          }
+        }
+      }
+      .topic {
+        padding: 10px;
+        height: calc(100% - 35px);
+        .topicTxt {
+          font-size: 18px;
+          line-height: 24px;
+        }
+        .topic_con {
+          & > li {
+            height: auto;
+            padding: 10px 0;
+            font-size: 16px;
+            .case {
+              width: 20px;
+              height: 20px;
+              margin-right: 15px;
+              min-width: 20px;
+              & > div {
+                width: 10px;
+                height: 10px;
+              }
+            }
+          }
+        }
+        .conBox {
+          height: calc(100% - 60px);
+          overflow-y: auto;
+        }
+        .topic_btn {
+          position: absolute;
+          left: 50%;
+          bottom: 20px;
+          transform: translateX(-50%);
+          width: 140px;
+          height: 42px;
+          font-size: 16px;
+        }
+        .error {
+          & > p {
+            font-size: 16px;
+          }
+          .errBtn {
+            width: 140px;
+            height: 42px;
+            margin: 10px auto 0;
+            font-size: 16px;
+          }
+        }
+      }
+      .topicCuo {
+        & > img {
+          width: 200px;
+          height: 200px;
+        }
+        & > div {
+          width: 140px;
+          height: 42px;
+          margin: 50px auto 0;
+          font-size: 16px;
+        }
+      }
+      .topicDui {
+        padding-top: 60px;
+        .tini {
+          width: 120px;
+          height: 120px;
+          left: 50%;
+          transform: translateX(-50%);
+          top: 55px;
+        }
+        & > div {
+          & > p {
+            font-size: 16px;
+          }
+          & > img {
+            width: 80%;
+            height: 280px;
+            margin: 10 auto;
+          }
+          .btnn {
+            width: 140px;
+            height: 42px;
+            margin: 10px auto 0;
+            font-size: 16px;
+          }
+        }
+      }
+    }
+  }
+}
 </style>

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

@@ -25,7 +25,7 @@
           </div>
         </div>
         <!-- 分页 -->
-        <div class="pagination">
+        <div class="pagination" v-if="!isMobile">
           <el-pagination
             layout="prev,pager,next,jumper"
             :page-size="8"
@@ -49,10 +49,10 @@ export default {
     //这里存放数据
     return {
       input: "",
-      formData:{
-        pageNum:1,
-        pageSize:8
-      }
+      formData: {
+        pageNum: 1,
+        pageSize: 8,
+      },
     };
   },
   //监听属性 类似于data概念
@@ -61,7 +61,7 @@ export default {
   watch: {},
   //方法集合
   methods: {
-        // 分页器方法
+    // 分页器方法
     currentChange(val) {
       // console.log('当前页改变了', val)
       this.formData.pageNum = val;
@@ -86,6 +86,9 @@ export default {
 };
 </script>
 <style lang='less' scoped>
+::-webkit-scrollbar-thumb {
+  outline: 2px solid #165491;
+}
 .quality {
   position: fixed;
   top: 0;
@@ -184,4 +187,40 @@ export default {
     }
   }
 }
+
+@media only screen and (max-width: 800px) {
+  .quality {
+    .main {
+      top: auto;
+      bottom: 5px;
+      transform: translate(-50%, 0);
+      width: 100%;
+      max-width: 350px;
+      height: calc(100vh - 40px);
+      background: url("../../../assets/imgM/bg.png");
+      background-size: 100% 100%;
+      padding-top: 70px;
+    }
+    .top {
+      margin-bottom: 5px;
+    }
+    .conten {
+      height: calc(100% - 30px);
+      padding: 10px;
+      .search {
+        width: 100%;
+      }
+      .rowAll{
+        justify-content: center;
+        margin-top: 20px;
+        height: calc(100% - 42px);
+        overflow-y: auto;
+        .row{
+          margin-right: 0;
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
+}
 </style>

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

@@ -119,4 +119,11 @@ export default {
     }
   }
 }
+@media only screen and (max-width: 800px) {
+  .share{
+    .main{
+      width: 100%;
+    }
+  }
+}
 </style>

web/src/views/gui/menu.vue

@@ -227,7 +227,7 @@
       </div>
     </div>
 
-    <div class="pinBottom right hideTarget">
+    <div class="pinBottom right hideTarget" v-if="!isMobile">
       <div class="rightViewContainer clearfix">
         <div class="gui-floor">
           <div class="gui-floor-title"></div>
@@ -258,7 +258,7 @@
 
         <!-- 游戏分享和切换语言 -->
         <ul class="btn-list">
-          <li title="游戏" @click="isIssue=true">
+          <li title="游戏" @click="isIssue = true">
             <img
               :src="
                 require(`@/assets/img/${isGame ? 'game_active' : 'game'}.png`)
@@ -309,26 +309,48 @@
         </div>
       </div>
     </div>
+    <!-- 移动端右上角的盒子 -->
+    <div class="isMobileBox" v-else>
+      <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="@/assets/img/share.png"  @click="isShare = true"/>
+        <!-- 答题 -->
+        <img
+          @click="isIssue = true"
+          :src="require(`@/assets/img/${isGame ? 'game_active' : 'game'}.png`)"
+        />
+      </div>
+    </div>
+
     <!-- 精品典藏的盒子 -->
     <Quality v-if="isQuality" @close="isQuality = false" />
     <!-- 分享的盒子 -->
-    <Share v-if="isShare" @close="isShare = false"/>
+    <Share v-if="isShare" @close="isShare = false" />
     <!-- 顶部的名字还有浏览人数 -->
     <Browse />
     <!-- 答题 -->
-    <Issue v-if="isIssue" @close="isIssue = false"/>
+    <Issue v-if="isIssue" @close="isIssue = false" />
   </div>
 </template>
 
 <script>
-import Share from './component/share'
-import Quality from "./component/quality"
-import Browse from "./component/browse"
-import Issue from "./component/issue"
+import Share from "./component/share";
+import Quality from "./component/quality";
+import Browse from "./component/browse";
+import Issue from "./component/issue";
 export default {
-  components: { Quality, Share,Browse,Issue },
+  components: { Quality, Share, Browse, Issue },
   data() {
     return {
+      mobilShow: false,
+      // 移动端的菜单栏切换
       isGuide: true,
       // 点赞
       isShowGood: false,
@@ -341,12 +363,22 @@ export default {
       // 控制分享
       isShare: false,
       // 控制答题
-      isIssue:false
+      isIssue: false,
     };
   },
   computed: {},
-  mounted() {},
+  mounted() {
+    this.getlikeCon("detail/");
+  },
   methods: {
+    // 封装点赞的接口
+    getlikeCon(val) {
+      fetch("http://47.112.166.173:8109/api/count/" + val + window.number)
+        .then((response) => response.json())
+        .then((data) => {
+          this.likeNum = data.data.starSum;
+        });
+    },
     switchBGM() {
       if (this.bgmPlay) {
         window.manage.switchBgmState(true);
@@ -361,9 +393,11 @@ export default {
     handleLike() {
       if (this.isShowGood) return;
       this.isShowGood = true;
+      // 发送接口
       setTimeout(() => {
         this.isShowGood = false;
-        this.likeNum++;
+        this.getlikeCon("saveStar/");
+        // console.log(data)
       }, 2800);
     },
   },
@@ -525,9 +559,9 @@ export default {
     }
   }
 }
-@media only screen and (max-width: 487px) {
+@media only screen and (max-width: 800px) {
   #myMoMu {
-    display: block !important;
+    display: none !important;
   }
   #myMoMu img {
     margin-left: 12px;
@@ -537,7 +571,7 @@ export default {
     border-radius: 50px;
   }
 
-  @wh: 22px;
+  @wh: 38px;
   @margin: 10px;
   #play,
   #pause {
@@ -587,5 +621,39 @@ export default {
   #volume {
     background-color: transparent !important;
   }
+  //
+  .btn-list {
+    & > li {
+      width: 50px;
+      height: 50px;
+      & > img {
+        width: 38px;
+        height: 38px;
+      }
+      .like_txt {
+        bottom: -12px;
+      }
+    }
+  }
+}
+
+// 移动端右上角的盒子
+.isMobileBox {
+  color: red;
+  position: fixed;
+  z-index: 999;
+  right: 10px;
+  top: 10px;
+  img{
+    width: 38px;
+    height: 38px;
+  }
+  .show{
+    margin-top: 8px;
+    &>img{
+      display: block;
+      margin-bottom: 8px;
+    }
+  }
 }
 </style>