修改需求

web/public/static/css/main.css

@@ -3389,7 +3389,7 @@ a.hasHover:hover, a:active {
 
 .pinTop.left {
     left: 50%;
-    z-index: 99;
+    z-index: 3;
     display: flex;
     flex-direction: column;
     align-items: center;

web/src/components/iframe/index.vue

@@ -0,0 +1,80 @@
+<!--  -->
+<template>
+<div class='myIframe' v-show="myIframe">
+  <iframe :src="url" frameborder="0" style="width:100%;height:100%"></iframe>
+  <div class="btn" @click="btnX"> <i class="el-icon-arrow-left"></i> 返 回</div>
+</div>
+</template>
+
+<script>
+//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
+//例如：import 《组件名称》 from '《组件路径》';
+
+export default {
+//import引入的组件需要注入到对象中才能使用
+props:{
+  url:{
+    type:String
+  },
+  myIframe:{
+    type:Boolean,
+    default:false
+  }
+},
+components: {},
+data() {
+//这里存放数据
+return {
+
+};
+},
+//监听属性 类似于data概念
+computed: {},
+//监控data中的数据变化
+watch: {},
+//方法集合
+methods: {
+  btnX(){
+    this.$emit('update:myIframe',false)
+  }
+},
+//生命周期 - 创建完成（可以访问当前this实例）
+created() {
+
+},
+//生命周期 - 挂载完成（可以访问DOM元素）
+mounted() {
+
+},
+beforeCreate() {}, //生命周期 - 创建之前
+beforeMount() {}, //生命周期 - 挂载之前
+beforeUpdate() {}, //生命周期 - 更新之前
+updated() {}, //生命周期 - 更新之后
+beforeDestroy() {}, //生命周期 - 销毁之前
+destroyed() {}, //生命周期 - 销毁完成
+activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+}
+</script>
+<style lang='less' scoped>
+.myIframe{
+  width: 100vw;
+  height: 100vh;
+  z-index: 99999;
+  .btn{
+    display: flex;
+    align-items: center;
+    width: 100px;
+    height: 40px;
+    position: fixed;
+    top: 12px;
+    left: 5px;
+    background-color: rgba(0,0,0,.7);
+    border-radius: 20px;
+    i {
+      font-size: 20px;
+      margin-left: 10px;
+    }
+  }
+}
+
+</style>

web/src/components/welcome/index.vue

@@ -2,11 +2,11 @@
   <div class="welcome">
       <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>
+      <span>主办方：珠海高新技术产业开发区</span>
       </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>
+      <span>主办方：珠海高新技术产业开发区</span>
       </div> -->
   </div>
 </template>
@@ -38,7 +38,7 @@ export default {
   background-color: #146fb1;
   .bg{
     width: 100%;
-    min-height: 100%;
+    height: 100%;
     position: absolute;
     top: 50%;
     left: 50%;
@@ -47,7 +47,7 @@ export default {
 
   .btn{
     position: absolute;
-    bottom: 5%;
+    bottom: 15%;
     left: 50%;
     transform: translateX(-50%);
     z-index: 9999;
@@ -61,8 +61,9 @@ export default {
     >span{
       font-size: 24px;
       position: fixed;
-      top: 100%;
-      left: 850px;
+      top: 180%;
+      left: 50%;
+      transform: translateX(-50%);
       letter-spacing: 2px;
       color: #EDD3B0;
     }
@@ -93,7 +94,6 @@ export default {
   @scale:0.7;
   .welcome{
     .bg{
-      top: 46%;
       background-repeat: no-repeat;
     }
     .btn{
@@ -106,7 +106,7 @@ export default {
         height: 70px;
         background-size: 100% 100%;
       >span{
-        top: 95%;
+        top: 110%;
         font-size: 14px;
         left: 50%;
         transform: translateX(-50%);

web/src/pages/Home.vue

@@ -61,7 +61,7 @@
 
       <welcome @close="hideWelcome" v-if="showWelcome" />
 
-        <div class="loading" v-if="loading">
+        <div class="loading" v-if="0">
             <span>加载中...</span>
         </div>
     </div>

web/src/views/gui/menu.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="pinBottom-container" @touchstart.stop @keydown.stop>
+        <Iframe :url='iframeUrl' :myIframe.sync='myIframe'/>
+
     <div class="pinBottom center">
       <div id="view-controllers"></div>
     </div>
-    <div class="pinBottom left">
+    <div class="pinBottom left" v-show="!myIframe">
       <div>
         <div class="viewContainer">
           <div
@@ -272,7 +274,7 @@
       </div>
     </div>
     <!-- 菜单栏-手机 -->
-    <div v-else class="shouji" @touchstart="isShowMo = !isShowMo">
+    <div v-else class="shouji" @touchstart="isShowMo = !isShowMo" v-show="!myIframe">
       <img src="@/assets/tab/shouji.png" alt="" />
       <ul v-show="isShowMo">
         <li
@@ -286,7 +288,8 @@
       </ul>
     </div>
     <!-- 移动端-----路线-------------------------------------------------->
-    <div class="MoTab1 MoTab" v-if="rightTab2[0].isShow">
+
+    <div class="MoTab1 MoTab" v-if="rightTab2[0].isShow" v-show="!myIframe">
       <div class="conten">
         <!-- 关闭按钮 -->
         <div class="btnX" @click="rightTab2[0].isShow = false">
@@ -305,16 +308,28 @@
         </div>
         <div class="minMap minMap2">
           <a
-            href="https://www.4dkankan.com/spc.html?m=rVuZY399SA&lang=zh"
-            target="_blank"
+            href="javascript:;"
+            @click="
+              skipIframe(
+                'https://www.4dkankan.com/spc.html?m=rVuZY399SA&lang=zh'
+              )
+            "
           ></a>
           <a
-            href="https://www.4dkankan.com/spc.html?m=uqNseUZY9F&lang=zh"
-            target="_blank"
+            href="javascript:;"
+            @click="
+              skipIframe(
+                'https://www.4dkankan.com/spc.html?m=uqNseUZY9F&lang=zh'
+              )
+            "
           ></a>
           <a
-            href="https://www.4dkankan.com/spc.html?m=SzsCXCSZdH&lang=zh"
-            target="_blank"
+            href="javascript:;"
+            @click="
+              skipIframe(
+                'https://www.4dkankan.com/spc.html?m=SzsCXCSZdH&lang=zh'
+              )
+            "
           ></a>
         </div>
         <div class="minMap minMap3">
@@ -341,7 +356,7 @@
         {{ index + 1 }}、 {{ item.title }}
       </p>
     </div>
-    <div class="MoTab2 MoTab" v-if="rightTab2[1].isShow">
+    <div class="MoTab2 MoTab" v-if="rightTab2[1].isShow" v-show="!myIframe">
       <div class="conten">
         <!--  -->
         <!-- 关闭按钮 -->
@@ -421,7 +436,7 @@
       </div>
     </div>
     <!-- 移动端-----留言板-------------------------------------------------->
-    <div class="MoTab3 MoTab" v-if="rightTab2[2].isShow">
+    <div class="MoTab3 MoTab" v-if="rightTab2[2].isShow" v-show="!myIframe">
       <div class="conten">
         <!-- 关闭按钮 -->
         <div class="btnX" @click="rightTab2[2].isShow = false">
@@ -467,21 +482,25 @@
       </div>
     </div>
     <!-- 移动端-----打卡-------------------------------------------------->
-    <div class="MoTab4 MoTab" v-if="rightTab2[3].isShow">
+    <div class="MoTab4 MoTab" v-if="rightTab2[3].isShow" v-show="!myIframe">
       <div class="conten" ref="pcTab4">
         <!-- 人物背景底纹 选择不同的图片打卡-->
         <div class="MoRWbac" :class="'MoRWbac' + tab3DataInd">
           <a class="MoDownload" :href="base64SUrlTab4" download v-if="qrCodeUrl"
-          >点击保存打卡主题</a
+            >点击保存打卡主题</a
           >
           <!-- 关闭按钮 -->
-          <div class="btnX" :class="'btnX'+tab3DataInd" @click="rightTab2[3].isShow = false" v-if="topicXShow">
-          </div>
+          <div
+            class="btnX"
+            :class="'btnX' + tab3DataInd"
+            @click="rightTab2[3].isShow = false"
+            v-if="topicXShow"
+          ></div>
           <!-- 标题 -->
           <div class="Motitle">珠海高新区中共党史学习教育园地</div>
           <!-- 文字内容 -->
           <p class="tab4Name">
-           党史学习打卡：<span>{{ tab4Name }}</span>
+            党史学习打卡<span>{{ tab4Name }}</span>
           </p>
         </div>
         <!-- 弹窗输入姓名 -->
@@ -489,9 +508,9 @@
           <div class="shuru">
             <!-- 下拉框 -->
             <el-select v-model="tab3DataInd" placeholder="请选择主题">
-              <el-option label="党的建设的永恒课题" :value="1"></el-option>
-              <el-option label="唐家湾农民运动陈列馆" :value="2"></el-option>
-              <el-option label="苏兆征故居陈列馆" :value="3"></el-option>
+              <el-option label="永恒课题" :value="1"></el-option>
+              <el-option label="农民运动" :value="2"></el-option>
+              <el-option label="苏兆征故居" :value="3"></el-option>
               <el-option label="金鼎线" :value="4"></el-option>
               <el-option label="淇澳线" :value="5"></el-option>
               <el-option label="唐家线" :value="6"></el-option>
@@ -511,7 +530,7 @@
       </div>
     </div>
     <!-- 移动端-----分享-------------------------------------------------->
-    <div class="MoTab5 MoTab" v-if="rightTab2[4].isShow">
+    <div class="MoTab5 MoTab" v-if="rightTab2[4].isShow" v-show="!myIframe">
       <div class="conten">
         <!-- 关闭按钮 -->
         <div class="btnX" @click="rightTab2[4].isShow = false">
@@ -759,9 +778,9 @@
           <div class="shuru">
             <!-- 下拉框 -->
             <el-select v-model="tab3DataInd" placeholder="请选择主题">
-              <el-option label="党的建设的永恒课题" :value="1"></el-option>
-              <el-option label="唐家湾农民运动陈列馆" :value="2"></el-option>
-              <el-option label="苏兆征故居陈列馆" :value="3"></el-option>
+              <el-option label="永恒课题" :value="1"></el-option>
+              <el-option label="农民运动" :value="2"></el-option>
+              <el-option label="苏兆征故居" :value="3"></el-option>
               <el-option label="金鼎线" :value="4"></el-option>
               <el-option label="淇澳线" :value="5"></el-option>
               <el-option label="唐家线" :value="6"></el-option>
@@ -803,15 +822,18 @@
 </template>
 
 <script>
+import Iframe from '@/components/iframe'
 //引入题目
 import { questions } from "@/assets/js/data.js";
 import html2canvas from "html2canvas";
 export default {
-  components: {},
+  components: {Iframe},
   data() {
     return {
       isGuide: true,
       //--------------手机端数据------------------
+      iframeUrl:'',
+      myIframe: false,
       //留言板
       MoTab3LiuShow: true, //控制留言板信息和输入的切换
       //-----------------党史问答数据-----------------
@@ -857,9 +879,9 @@ export default {
         { txt: "&emsp;&emsp;党的建设的永恒课题" },
         { txt: "&emsp;&emsp;唐家湾农民运动陈列馆" },
         { txt: "&emsp;&emsp;苏兆征故居陈列馆" },
-        { txt: "&emsp;&emsp;不忘使命学党史，党建引领谋发展" },
-        { txt: "&emsp;&emsp;革命精神永传续，美丽乡村谱新篇" },
-        { txt: "&emsp;&emsp;红色基因代代传，践行相当守初心" },
+        { txt: "&emsp;&emsp;金鼎线学习教育园地" },
+        { txt: "&emsp;&emsp;淇澳线学习教育园地" },
+        { txt: "&emsp;&emsp;唐家线学习教育园地" },
       ],
       tab3DataInd: 1,
       tab4NameShow: true, //输入名字的弹窗
@@ -872,6 +894,11 @@ export default {
   computed: {},
   mounted() {},
   methods: {
+    //移动端跳转 
+    skipIframe(url) {
+        this.iframeUrl=url
+        this.myIframe = true;
+    },
     //移动端答错再来一次
     MobtnAga() {
       this.rightTab2[1].isShow = false;
@@ -997,7 +1024,7 @@ export default {
     //点击答错里面的下一题
     nextTi() {
       // 最后一题
-      if (this.topicInd === 9 && this.cunot >= 7) {
+      if (this.topicInd === 9 && this.cunot >= 5) {
         this.state = "tow";
         this.topic.forEach((v) => {
           let temp = "";
@@ -1006,7 +1033,7 @@ export default {
           });
           v.title += "---" + temp;
         });
-      } else if (this.topicInd === 9 && this.cunot < 7) {
+      } else if (this.topicInd === 9 && this.cunot < 5) {
         this.state = "three";
       }
 
@@ -1018,7 +1045,7 @@ export default {
     btnOk() {
       if (this.caseInd === null) return this.$message.warning("未选择答案");
       // 最后一题
-      if (this.topicInd === 9 && this.cunot >= 7) {
+      if (this.topicInd === 9 && this.cunot >= 5) {
         this.state = "tow";
         this.topic.forEach((v) => {
           let temp = "";
@@ -1027,7 +1054,7 @@ export default {
           });
           v.title += "---" + temp;
         });
-      } else if (this.topicInd === 9 && this.cunot < 7) {
+      } else if (this.topicInd === 9 && this.cunot < 5) {
         this.state = "three";
       }
       if (this.topic[this.topicInd].correct === this.caseABC) {
@@ -1275,7 +1302,7 @@ export default {
     .title {
       width: 90%;
       margin: 40px auto 0;
-      border-bottom: 2px solid #f0af7c;
+      border-bottom: 2px solid #e2b79c;
       padding-bottom: 20px;
       h3 {
         padding-left: 15px;
@@ -1574,7 +1601,7 @@ export default {
 .pcTab3 {
   .conten {
     background: url("../../assets/tab/tab3c.png") !important;
-    background-size: 100% 100%;
+    background-size: 100% 100% !important;
   }
   .liuyan {
     padding-right: 20px;
@@ -1641,18 +1668,17 @@ export default {
     }
   }
   .tab4Name {
-    font-weight: 700;
     width: 400px;
     margin: 20px 0 10px 80px;
     color: #edd3b0;
-    font-size: 20px;
+    font-size: 24px;
     span {
-      font-weight: 400;
-      font-size: 24px;
+      font-weight: 300;
+      font-size: 32px;
     }
   }
   .txt {
-    font-size: 16px;
+    font-size: 20px;
     color: #edd3b0;
     margin: 10px 80px 0;
     /deep/span {
@@ -1665,7 +1691,7 @@ export default {
       background: url("../../assets/tab/×.png");
     }
     .btnX3 {
-      background: url("../../assets/tab/×Red.png");
+      background: url("../../assets/tab/×.png");
     }
     .btnX4 {
       background: url("../../assets/tab/×Red.png");
@@ -1684,21 +1710,24 @@ export default {
       background: url("../../assets/tab/daka2.png");
       background-size: 100% 100%;
       .qrCode a {
-        color: #ac3334;
+        color: #edd3b0;
       }
     }
     .RWbac3 {
       background: url("../../assets/tab/daka3.png");
       background-size: 100% 100%;
       .title h3 {
-        color: #ac3334;
-        text-shadow: 9px 8px 2px #e7b88c;
-      }
-      .tab4Name {
-        color: #ac3334;
-      }
-      .txt {
-        color: #ac3334;
+        text-shadow: 9px 8px 2px #000;
+      }
+      // .tab4Name {
+      //   color: #ac3334;
+      // }
+      // .txt {
+      //   color: #ac3334;
+      // }
+      
+      .qrCode a {
+        color: #fff;
       }
     }
     .RWbac4 {
@@ -1706,7 +1735,7 @@ export default {
       background-size: 100% 100%;
       .title h3 {
         color: #ac3334;
-        text-shadow: 9px 8px 2px #e7b88c;
+        text-shadow: 9px 8px 2px #624f3d
       }
       .tab4Name {
         color: #ac3334;
@@ -1717,13 +1746,16 @@ export default {
       .qrCode a {
         color: #fff;
       }
+      .title{
+        border-bottom: 2px solid #ac3334;
+      }
     }
     .RWbac5 {
       background: url("../../assets/tab/daka5.png");
       background-size: 100% 100%;
       .title h3 {
         color: #ac3334;
-        text-shadow: 9px 8px 2px #e7b88c;
+        text-shadow: 9px 8px 2px #624f3d
       }
       .tab4Name {
         color: #ac3334;
@@ -1731,13 +1763,16 @@ export default {
       .txt {
         color: #ac3334;
       }
+      .title{
+        border-bottom: 2px solid #ac3334;
+      }
     }
     .RWbac6 {
       background: url("../../assets/tab/daka6.png");
       background-size: 100% 100%;
       .title h3 {
         color: #ac3334;
-        text-shadow: 9px 8px 2px #e7b88c;
+        text-shadow: 9px 8px 2px #624f3d
       }
       .tab4Name {
         color: #ac3334;
@@ -1748,6 +1783,9 @@ export default {
       .qrCode a {
         color: #fff;
       }
+      .title{
+        border-bottom: 2px solid #ac3334;
+      }
     }
 
     background: none !important;
@@ -1815,7 +1853,6 @@ export default {
       }
     }
     .title {
-      border-bottom: none;
       h3 {
         text-shadow: 9px 8px 2px rgb(111 40 40);
         font-size: 28px;
@@ -2405,8 +2442,13 @@ export default {
     }
   }
   .MoTab4 {
+    /deep/.el-select .el-input .el-select__caret{
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
     .MoRWbac {
-      background: url('../../assets/tab/dakaMo1.png');
+      background: url("../../assets/tab/dakaMo1.png");
       background-size: 100% 100%;
       position: absolute;
       left: 0;
@@ -2418,52 +2460,51 @@ export default {
         height: 100%;
       }
     }
-    .MoRWbac2{
-      background: url('../../assets/tab/dakaMo2.png');
+    .MoRWbac2 {
+      background: url("../../assets/tab/dakaMo2.png");
       background-size: 100% 100%;
-
     }
-    .MoRWbac3{
-      background: url('../../assets/tab/dakaMo3.png');
+    .MoRWbac3 {
+      background: url("../../assets/tab/dakaMo3.png");
       background-size: 100% 100%;
-      .Motitle{
-        color: #b24340;
-        border-bottom: 1px solid #b24340;
-      }
-      .tab4Name{
-        color: #b24340;
-      }
-    }
-    .MoRWbac4{
-      background: url('../../assets/tab/dakaMo4.png');
+      // .Motitle {
+      //   color: #b24340;
+      //   border-bottom: 1px solid #b24340;
+      // }
+      // .tab4Name {
+      //   color: #b24340;
+      // }
+    }
+    .MoRWbac4 {
+      background: url("../../assets/tab/dakaMo4.png");
       background-size: 100% 100%;
-      .Motitle{
+      .Motitle {
         color: #b24340;
         border-bottom: 1px solid #b24340;
       }
-      .tab4Name{
+      .tab4Name {
         color: #b24340;
       }
     }
-    .MoRWbac5{
-      background: url('../../assets/tab/dakaMo5.png');
+    .MoRWbac5 {
+      background: url("../../assets/tab/dakaMo5.png");
       background-size: 100% 100%;
-      .Motitle{
+      .Motitle {
         color: #b24340;
         border-bottom: 1px solid #b24340;
       }
-      .tab4Name{
+      .tab4Name {
         color: #b24340;
       }
     }
-    .MoRWbac6{
-      background: url('../../assets/tab/dakaMo6.png');
+    .MoRWbac6 {
+      background: url("../../assets/tab/dakaMo6.png");
       background-size: 100% 100%;
-      .Motitle{
+      .Motitle {
         color: #b24340;
         border-bottom: 1px solid #b24340;
       }
-      .tab4Name{
+      .tab4Name {
         color: #b24340;
       }
     }
@@ -2471,24 +2512,24 @@ export default {
       font-size: 16px;
     }
     .conten {
-      .btnX{
-        background: url('../../assets/tab/×.png');
+      .btnX {
+        background: url("../../assets/tab/×.png");
         background-size: 100% 100%;
       }
-      .btnX3{
-        background: url('../../assets/tab/×Red.png');
+      .btnX3 {
+        background: url("../../assets/tab/×.png");
         background-size: 100% 100%;
       }
-      .btnX4{
-        background: url('../../assets/tab/×Red.png');
+      .btnX4 {
+        background: url("../../assets/tab/×Red.png");
         background-size: 100% 100%;
       }
-      .btnX5{
-        background: url('../../assets/tab/×Red.png');
+      .btnX5 {
+        background: url("../../assets/tab/×Red.png");
         background-size: 100% 100%;
       }
-      .btnX6{
-        background: url('../../assets/tab/×Red.png');
+      .btnX6 {
+        background: url("../../assets/tab/×Red.png");
         background-size: 100% 100%;
       }
       background: none;
@@ -2524,10 +2565,13 @@ export default {
         }
       }
       .tab4Name {
+        margin: 20px 0 0 0;
         text-align: center;
-        font-size: 14px;
-        &>span {
-          font-size: 20px;
+        font-size: 20px;
+        & > span {
+        margin: 20px 0 0 0;
+          display: block;
+          font-size: 26px;
         }
       }
       .MoqrCode {