修改需求

web/public/index.html

@@ -15,6 +15,8 @@
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/oldVer/main0.css"/>
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/main.css?v=2.25"/>
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/CAD/cad.css?v=2.25"/>
+    <style>
+    </style>
     <script>
         var number = window.location.href.substring(window.location.href.indexOf("=") + 1);
         if (number.indexOf("&") != -1) {

web/public/static/css/main.css

@@ -6974,6 +6974,7 @@ a.hasHover.tag-link:hover {
 
 @media only screen and (max-width: 680px) {
     .pinTop.left {
+        top: 5px;
         left: 50%;
         transform: translateX(-50%);
         align-items: center;

web/src/components/welcome/index.vue

@@ -1,13 +1,13 @@
 <template>
   <div class="welcome">
       <img class="bg" :src="require(`@/assets/images/project/${isMobile?'mobile.jpg':'pc.jpg'}`)" alt="">
-      <div class="btn" v-if="!isMobile"  @click.stop="$emit('close')" :style="{backgroundImage:`url(${require('@/assets/images/project/btn.png')})`}">
+      <div class="btn"  @click.stop="$emit('close')" :style="{backgroundImage:`url(${require('@/assets/images/project/btn.png')})`}">
       <span>主办方：主办方名称</span>
       </div>
-      <div class="btn" v-else @click.stop="$emit('close')" :style="{backgroundImage:`url(${require('@/assets/images/project/btnMo.png')})`}">
+      <!-- <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>
 
@@ -47,7 +47,7 @@ export default {
 
   .btn{
     position: absolute;
-    bottom: 8%;
+    bottom: 5%;
     left: 50%;
     transform: translateX(-50%);
     z-index: 9999;
@@ -60,12 +60,11 @@ export default {
     background-color: none;
     >span{
       font-size: 24px;
-      position: absolute;
-      top: 110%;
-      left: 50%;
-      transform: translate(-50%);
+      position: fixed;
+      top: 100%;
+      left: 850px;
       letter-spacing: 2px;
-      color: #AC3334;
+      color: #EDD3B0;
     }
   }
 }
@@ -99,15 +98,18 @@ export default {
     }
     .btn{
         position: absolute;
-        bottom: 3vh;
+        bottom: 57px;
         left: 50%;
         transform: translateX(-50%);
         z-index: 99;
-        width: 200px*@scale;
-        height: 100px*@scale;
+        width: 180px;
+        height: 70px;
+        background-size: 100% 100%;
       >span{
         top: 95%;
-        font-size: 16px;
+        font-size: 14px;
+        left: 50%;
+        transform: translateX(-50%);
       }
       .txt{
         font-size:14px;

web/src/pages/Home.vue

@@ -8,7 +8,8 @@
     <div id="gui-thumb"></div>
 
     <!-- 主容器 -->
-    <div id="player"></div>
+    <div id="player">
+    </div>
     <div id="gui-parent">
       <!-- 进度条加载 -->
       <gui-loading />
@@ -34,9 +35,9 @@
         <!-- logo -->
         <div
           id="myCompany"
-          style="width:100%;position:absolute;bottom:20px;text-align:center;font-size:14px;font-family: '微软雅黑';font-weight:580;color: rgba(255, 255, 255, 0.8);"
+          style="width:100%;position:absolute;bottom:0px;text-align:center;font-size:14px;font-family: '微软雅黑';font-weight:580;color: rgba(255, 255, 255, 0.8);"
         >
-          四维时代提供技术支持
+          <!-- 四维时代提供技术支持 -->
         </div>
       </div>
 

web/src/views/gui/menu.vue

@@ -304,15 +304,29 @@
           <a href="javascript:;"></a>
         </div>
         <div class="minMap minMap2">
-          <a href="https://www.4dkankan.com/spc.html?m=rVuZY399SA&lang=zh"></a>
-          <a href="https://www.4dkankan.com/spc.html?m=uqNseUZY9F&lang=zh"></a>
-          <a href="https://www.4dkankan.com/spc.html?m=SzsCXCSZdH&lang=zh"></a>
+          <a
+            href="https://www.4dkankan.com/spc.html?m=rVuZY399SA&lang=zh"
+            target="_blank"
+          ></a>
+          <a
+            href="https://www.4dkankan.com/spc.html?m=uqNseUZY9F&lang=zh"
+            target="_blank"
+          ></a>
+          <a
+            href="https://www.4dkankan.com/spc.html?m=SzsCXCSZdH&lang=zh"
+            target="_blank"
+          ></a>
         </div>
         <div class="minMap minMap3">
           <a href="javascript:;"></a>
           <a href="javascript:;"></a>
           <a href="javascript:;"></a>
         </div>
+        <div class="minMap minMap4">
+          <a href="javascript:;"></a>
+          <a href="javascript:;"></a>
+          <a href="javascript:;"></a>
+        </div>
       </div>
     </div>
     <!-- 移动端-----问答-------------------------------------------------->
@@ -388,9 +402,9 @@
             {{ index + 1 }}、 {{ item.title }}
           </p>
           <!-- 生成的二维码 -->
-          <div class="MoqrCode" v-if="qrCodeUrl">
+          <!-- <div class="MoqrCode" v-if="qrCodeUrl">
             <img :src="qrCodeUrl" alt="" />
-          </div>
+          </div> -->
         </div>
         <!-- 答错了 -->
         <div class="MotopicCuo" v-if="state === 'three'">
@@ -418,12 +432,12 @@
         <!-- --------------留言板信息----------------------- -->
         <!-- 留言内容 -->
         <ul class="moLiuYan" v-if="MoTab3LiuShow">
-          <li v-for="(item,index) in tableData" :key="index">
+          <li v-for="(item, index) in tableData" :key="index">
             <div>
-              <span class="name">{{item.userName}}</span>
-              <span>{{item.updateTime}}</span>
+              <span class="name">{{ item.userName }}</span>
+              <span>{{ item.updateTime }}</span>
             </div>
-            <p>{{item.content}}</p>
+            <p>{{ item.content }}</p>
           </li>
           <!-- 我要留言的按钮 -->
           <div class="MoTab3Liu" @click="MoTab3LiuShow = false">我要留言</div>
@@ -455,36 +469,32 @@
     <!-- 移动端-----打卡-------------------------------------------------->
     <div class="MoTab4 MoTab" v-if="rightTab2[3].isShow">
       <div class="conten" ref="pcTab4">
-        <!-- 人物背景底纹 -->
-        <div class="MoRWbac">
-          <img
-            src="@/assets/tabMo/tab3dw.png"
-            alt=""
-            v-show="tab3DataInd === 0"
-          />
-          <img
-            src="@/assets/tabMo/moTab1Map.png"
-            alt=""
-            v-show="tab3DataInd === 1"
-          />
-        </div>
-        <!-- 关闭按钮 -->
-        <div class="btnX" @click="rightTab2[3].isShow = false">
-          <img src="@/assets/tab/×.png" alt="" />
+        <!-- 人物背景底纹 选择不同的图片打卡-->
+        <div class="MoRWbac" :class="'MoRWbac' + tab3DataInd">
+          <a class="MoDownload" :href="base64SUrlTab4" download v-if="qrCodeUrl"
+          >点击保存打卡主题</a
+          >
+          <!-- 关闭按钮 -->
+          <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>
+          </p>
         </div>
-        <!-- 标题 -->
-        <div class="Motitle">珠海高新区中共党史学习教育园地</div>
-        <!-- 文字内容 -->
-        <p class="tab4Name">
-          {{ tab4Name }}
-        </p>
         <!-- 弹窗输入姓名 -->
         <div class="MoinpName" v-if="tab4NameShow">
           <div class="shuru">
             <!-- 下拉框 -->
             <el-select v-model="tab3DataInd" placeholder="请选择主题">
-              <el-option label="解放万山群岛战役" :value="0"></el-option>
-              <el-option label="6666666666" :value="1"></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>
             </el-select>
             <el-input
               v-model="tab4Name"
@@ -495,12 +505,9 @@
           <div class="MoinpBtnOk" @touchstart="tab4NameBtnOk">确 定</div>
         </div>
         <!-- 生成的二维码 -->
-        <div class="MoqrCode" v-if="qrCodeUrl">
+        <!-- <div class="MoqrCode" v-if="qrCodeUrl">
           <img :src="qrCodeUrl" alt="" />
-        </div>
-        <a class="MoDownload" :href="base64SUrlTab4" download v-if="qrCodeUrl"
-          >点击保存打卡主题</a
-        >
+        </div> -->
       </div>
     </div>
     <!-- 移动端-----分享-------------------------------------------------->
@@ -528,8 +535,6 @@
     <!-- pc --路线 ----------------------->
     <div class="pcTab1 myTab" v-if="rightTab[0].isShow">
       <div class="conten">
-        <!-- 人物背景底纹 -->
-        <div class="RWbac"></div>
         <!-- 关闭按钮 -->
         <div class="btnX" @click="rightTab[0].isShow = false">
           <img src="@/assets/tab/×.png" alt="" />
@@ -549,9 +554,26 @@
             <a href="javascript:;"></a>
           </div>
           <div>
-          <a href="https://www.4dkankan.com/spc.html?m=rVuZY399SA&lang=zh"></a>
-          <a href="https://www.4dkankan.com/spc.html?m=uqNseUZY9F&lang=zh"></a>
-          <a href="https://www.4dkankan.com/spc.html?m=SzsCXCSZdH&lang=zh"></a>
+            <a
+              target="_blank"
+              href="https://www.4dkankan.com/spc.html?m=rVuZY399SA&lang=zh"
+              title="淇澳村使馆"
+            ></a>
+            <a
+              target="_blank"
+              href="https://www.4dkankan.com/spc.html?m=uqNseUZY9F&lang=zh"
+              title="苏兆征广场"
+            ></a>
+            <a
+              target="_blank"
+              href="https://www.4dkankan.com/spc.html?m=SzsCXCSZdH&lang=zh"
+              title="苏兆征故居陈列馆"
+            ></a>
+          </div>
+          <div>
+            <a href="javascript:;"></a>
+            <a href="javascript:;"></a>
+            <a href="javascript:;"></a>
           </div>
           <div>
             <a href="javascript:;"></a>
@@ -657,18 +679,20 @@
         </div>
         <!-- 内容 -->
         <ul class="liuyan">
-          <li v-for="(item,index) in tableData" :key="index">
-            <div class="name">{{item.userName}}</div>
+          <li v-for="(item, index) in tableData" :key="index">
+            <div class="name">{{ item.userName }}</div>
             <div class="con">
-              {{item.content}}
+              {{ item.content }}
             </div>
-            <div class="time">{{item.updateTime}}</div>
+            <div class="time">{{ item.updateTime }}</div>
           </li>
         </ul>
         <!-- 分页器 -->
         <div class="pagination">
-          <el-pagination layout="prev, pager, next" :total="total" 
-          @current-change="currentChange"
+          <el-pagination
+            layout="prev, pager, next"
+            :total="total"
+            @current-change="currentChange"
           >
           </el-pagination>
         </div>
@@ -703,39 +727,44 @@
     <!-- pc ---打卡------------------------>
     <div class="pcTab4 myTab" v-if="rightTab[3].isShow">
       <div class="conten" ref="pcTab4">
-        <!-- 人物背景底纹 -->
-        <div class="RWbac">
-          <img
-            src="@/assets/tab/tab3dw.png"
-            alt=""
-            v-show="tab3DataInd === 0"
-          />
-          <img
-            src="@/assets/tab/tab1dw.png"
-            alt=""
-            v-show="tab3DataInd === 1"
-          />
-        </div>
-        <!-- 关闭按钮 -->
-        <div class="btnX" @click="rightTab[3].isShow = false" v-if="topicXShow">
-          <img src="@/assets/tab/×.png" alt="" />
-        </div>
-        <!-- 标题 -->
-        <div class="title">
-          <h3>珠 海 高 新 区 中 共 党 史 学 习 教 育 园 地</h3>
+        <!-- 人物背景底纹 选择不同的背景打卡-->
+        <div class="RWbac" :class="'RWbac' + tab3DataInd">
+          <!-- 关闭按钮 -->
+          <div
+            class="btnX"
+            :class="'btnX' + tab3DataInd"
+            @click="rightTab[3].isShow = false"
+            v-if="topicXShow"
+          ></div>
+          <!-- 生成的二维码 -->
+          <div class="qrCode" v-if="qrCodeUrl">
+            <img :src="qrCodeUrl" alt="" />
+            <a class="el-icon-download" :href="base64SUrlTab4" download
+              >点 击 下 载</a
+            >
+          </div>
+          <!-- 标题 -->
+          <div class="title">
+            <h3>珠 海 高 新 区 中 共 党 史 学 习 教 育 园 地</h3>
+          </div>
+          <!-- 文字内容 -->
+          <p class="tab4Name">
+            党史学习打卡：<span>{{ tab4Name }}</span>
+          </p>
+          <div class="txt" v-html="tab3Data[tab3DataInd].txt"></div>
         </div>
-        <!-- 文字内容 -->
-        <p class="tab4Name">
-          党史学习打卡：<span>{{ tab4Name }}</span>
-        </p>
-        <div class="txt" v-html="tab3Data[tab3DataInd].txt"></div>
+
         <!-- 弹窗输入姓名 -->
         <div class="inpName" v-if="tab4NameShow">
           <div class="shuru">
             <!-- 下拉框 -->
             <el-select v-model="tab3DataInd" placeholder="请选择主题">
-              <el-option label="解放万山群岛战役" :value="0"></el-option>
-              <el-option label="6666666666" :value="1"></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>
             </el-select>
             <el-input
               v-model="tab4Name"
@@ -745,13 +774,6 @@
           </div>
           <div class="inpBtnOk" @click="tab4NameBtnOk">确 定</div>
         </div>
-        <!-- 生成的二维码 -->
-        <div class="qrCode" v-if="qrCodeUrl">
-          <img :src="qrCodeUrl" alt="" />
-          <a class="el-icon-download" :href="base64SUrlTab4" download
-            >点 击 下 载</a
-          >
-        </div>
       </div>
     </div>
     <!-- pc ---分享------------------------>
@@ -793,7 +815,7 @@ export default {
       //留言板
       MoTab3LiuShow: true, //控制留言板信息和输入的切换
       //-----------------党史问答数据-----------------
-      toPictureShow:false,//---------------手机端答题成功页面的显示和隐藏
+      toPictureShow: false, //---------------手机端答题成功页面的显示和隐藏
       inpName: "",
       base64SUrl: "", //党史问答的图片地址
       qrCodeUrl: "", //党史问答生成的二维码图片地址
@@ -824,22 +846,22 @@ export default {
         { name: "分&emsp;&emsp;享", img: "tab5.png", isShow: false },
       ],
       //-----------------留言板数据--------------------------------
-      total:0,
-      tableData:[],
+      total: 0,
+      tableData: [],
       textarea: "", //文本域
       radio: "1",
       myName: "",
       //----------------------打卡数据-------------------------------
       tab3Data: [
-        {
-          txt: "&emsp;&emsp;<span>解放万山群岛战役</span>是人民解放军历史上第一次陆、海军协同作战，拔除<span>国民党军队</span>在华南沿海的最后立足点，彻底粉碎国民党军队对珠江口的封锁。",
-          url: "tab3dw.png",
-        },
-        {
-          txt: "&emsp;&emsp;<span>666666</span>是人民解放军历史上第一次陆、海军协同作战，拔除<span>77777</span>在华南沿海的最后立足点，彻底粉碎国民党军队对珠江口的封锁。",
-        },
+        {},
+        { txt: "&emsp;&emsp;党的建设的永恒课题" },
+        { txt: "&emsp;&emsp;唐家湾农民运动陈列馆" },
+        { txt: "&emsp;&emsp;苏兆征故居陈列馆" },
+        { txt: "&emsp;&emsp;不忘使命学党史，党建引领谋发展" },
+        { txt: "&emsp;&emsp;革命精神永传续，美丽乡村谱新篇" },
+        { txt: "&emsp;&emsp;红色基因代代传，践行相当守初心" },
       ],
-      tab3DataInd: 0,
+      tab3DataInd: 1,
       tab4NameShow: true, //输入名字的弹窗
       tab4Name: "", //输入的名字
       base64SUrlTab4: "",
@@ -850,8 +872,6 @@ export default {
   computed: {},
   mounted() {},
   methods: {
-    //移动端我要留言
-    MoTab3Liu() {},
     //移动端答错再来一次
     MobtnAga() {
       this.rightTab2[1].isShow = false;
@@ -1035,11 +1055,11 @@ export default {
         return this.$message.warning("名字不能为空");
       if (this.inpName.length > 5)
         return this.$message.warning("名字不能超过5个字");
-      if (myBoo) this.toPictureShow=true
+      if (myBoo) this.toPictureShow = true;
       this.stateTowInp = false;
       this.topicXShow = false;
       setTimeout(() => {
-        // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
+        //第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
         html2canvas(this.$refs.topicDui, {
           backgroundColor: null,
           useCORS: true, // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
@@ -1071,7 +1091,7 @@ export default {
                 this.$message.success("生成二维码成功");
                 this.qrCodeUrl = "http://8.135.106.227:8011/" + res.data;
                 this.topicXShow = true;
-                 if (myBoo) this.toPictureShow=false
+                if (myBoo) this.toPictureShow = false;
               }
             })
             .fail((res) => {
@@ -1123,8 +1143,8 @@ export default {
       //点击的是留言板
       if (index === 2) {
         this.MoTab3LiuShow = true;
-        this.getList({ pageNum: 1, pageSize: 99999 })
-        }
+        this.getList({ pageNum: 1, pageSize: 99999 });
+      }
     },
     //点击右侧tab栏
     open(index) {
@@ -1168,37 +1188,37 @@ export default {
       }
       //点击的留言板
       if (index === 2) {
-        this.getList({ pageNum: 1, pageSize: 10 })
+        this.getList({ pageNum: 1, pageSize: 10 });
       }
     },
-        // 分页器方法
-    currentChange (val) {
+    // 分页器方法
+    currentChange(val) {
       // console.log('当前页改变了', val)
-        this.getList({ pageNum: val, pageSize: 10 })
+      this.getList({ pageNum: val, pageSize: 10 });
     },
 
     //封装获取留言信息方法
-    getList(data){
-        $.ajax({
-          type: "POST",
-          url: "http://8.135.106.227:8011/web/comment/list",
-          data: JSON.stringify(data),
-          dataType: "json",
-          contentType: "application/json;charset=UTF-8",
-        })
-          .done((res) => {
-            console.log('获取留言信息成功', res);
-            this.tableData=res.data.records
-            this.total=res.data.total
-            this.tableData.forEach(v=>{
-              if(v.userName==='') v.userName='匿名'
-              v.updateTime =v.updateTime.slice(0, -3)
-            })
-          })
-          .fail((res) => {
-            console.log(111, res);
+    getList(data) {
+      $.ajax({
+        type: "POST",
+        url: "http://8.135.106.227:8011/web/comment/list",
+        data: JSON.stringify(data),
+        dataType: "json",
+        contentType: "application/json;charset=UTF-8",
+      })
+        .done((res) => {
+          console.log("获取留言信息成功", res);
+          this.tableData = res.data.records;
+          this.total = res.data.total;
+          this.tableData.forEach((v) => {
+            if (v.userName === "") v.userName = "匿名";
+            v.updateTime = v.updateTime.slice(0, -3);
           });
-      },
+        })
+        .fail((res) => {
+          console.log(111, res);
+        });
+    },
 
     switchBGM() {
       if ($("#volume img")[0].src.indexOf("on.png") > -1) {
@@ -1212,7 +1232,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-
 ::-webkit-scrollbar {
   width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
 }
@@ -1255,7 +1274,7 @@ export default {
     }
     .title {
       width: 90%;
-      margin: 70px auto 0;
+      margin: 40px auto 0;
       border-bottom: 2px solid #f0af7c;
       padding-bottom: 20px;
       h3 {
@@ -1277,7 +1296,7 @@ export default {
     .map {
       width: 680px;
       height: 540px;
-      margin: 10px auto;
+      margin: 20px auto;
       & > img {
         width: 100%;
         height: 100%;
@@ -1286,15 +1305,16 @@ export default {
     .bottom {
       display: flex;
       justify-content: space-between;
-      width: 86%;
-      height: 55px;
+      width: 94%;
+      height: 44px;
       margin: 0 auto;
       & > div {
         padding-left: 42px;
         display: flex;
         justify-content: space-around;
         width: 330px;
-        height: 55px;
+        height: 44px;
+        margin-right: 40px;
         &:nth-of-type(1) {
           background: url("../../assets/tab/tab1_1.png");
           background-size: 100% 100%;
@@ -1307,9 +1327,14 @@ export default {
           background: url("../../assets/tab/tab1_3.png");
           background-size: 100% 100%;
         }
+        &:nth-of-type(4) {
+          background: url("../../assets/tab/tab1_4.png");
+          background-size: 100% 100%;
+          margin-right: 0;
+        }
         & > a {
           z-index: 999;
-          width: 75px;
+          width: 65px;
           background-color: transparent;
         }
       }
@@ -1618,7 +1643,7 @@ export default {
   .tab4Name {
     font-weight: 700;
     width: 400px;
-    margin: 20px 0 20px 80px;
+    margin: 20px 0 10px 80px;
     color: #edd3b0;
     font-size: 20px;
     span {
@@ -1629,14 +1654,103 @@ export default {
   .txt {
     font-size: 16px;
     color: #edd3b0;
-    width: 680px;
-    margin: 20px 0 0 80px;
+    margin: 10px 80px 0;
     /deep/span {
       font-weight: 700;
       font-size: 18px;
     }
   }
   .conten {
+    .btnX {
+      background: url("../../assets/tab/×.png");
+    }
+    .btnX3 {
+      background: url("../../assets/tab/×Red.png");
+    }
+    .btnX4 {
+      background: url("../../assets/tab/×Red.png");
+    }
+    .btnX5 {
+      background: url("../../assets/tab/×Red.png");
+    }
+    .btnX6 {
+      background: url("../../assets/tab/×Red.png");
+    }
+    .RWbac1 {
+      background: url("../../assets/tab/daka1.png");
+      background-size: 100% 100%;
+    }
+    .RWbac2 {
+      background: url("../../assets/tab/daka2.png");
+      background-size: 100% 100%;
+      .qrCode a {
+        color: #ac3334;
+      }
+    }
+    .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;
+      }
+    }
+    .RWbac4 {
+      background: url("../../assets/tab/daka4.png");
+      background-size: 100% 100%;
+      .title h3 {
+        color: #ac3334;
+        text-shadow: 9px 8px 2px #e7b88c;
+      }
+      .tab4Name {
+        color: #ac3334;
+      }
+      .txt {
+        color: #ac3334;
+      }
+      .qrCode a {
+        color: #fff;
+      }
+    }
+    .RWbac5 {
+      background: url("../../assets/tab/daka5.png");
+      background-size: 100% 100%;
+      .title h3 {
+        color: #ac3334;
+        text-shadow: 9px 8px 2px #e7b88c;
+      }
+      .tab4Name {
+        color: #ac3334;
+      }
+      .txt {
+        color: #ac3334;
+      }
+    }
+    .RWbac6 {
+      background: url("../../assets/tab/daka6.png");
+      background-size: 100% 100%;
+      .title h3 {
+        color: #ac3334;
+        text-shadow: 9px 8px 2px #e7b88c;
+      }
+      .tab4Name {
+        color: #ac3334;
+      }
+      .txt {
+        color: #ac3334;
+      }
+      .qrCode a {
+        color: #fff;
+      }
+    }
+
+    background: none !important;
     .qrCode {
       text-align: center;
       position: absolute;
@@ -1664,9 +1778,9 @@ export default {
       position: absolute;
       left: 0;
       bottom: 0px;
-      background-color: rgba(0, 0, 0, 0.8);
+      background-color: rgba(0, 0, 0, 0.5);
       width: 100%;
-      height: 84%;
+      height: 86%;
       .shuru {
         /deep/.el-select {
           width: 100%;
@@ -1677,7 +1791,7 @@ export default {
         }
         width: 300px;
         height: 300px;
-        margin: 100px auto 0;
+        margin: 150px auto 0;
         text-align: center;
         & > p {
           margin-top: 20px;
@@ -1701,6 +1815,7 @@ export default {
       }
     }
     .title {
+      border-bottom: none;
       h3 {
         text-shadow: 9px 8px 2px rgb(111 40 40);
         font-size: 28px;
@@ -1761,7 +1876,7 @@ export default {
   width: 30px;
   height: 30px;
   position: fixed;
-  top: 17px;
+  top: 10px;
   right: 5px;
   img {
     width: 30px;
@@ -1922,8 +2037,8 @@ export default {
       background-size: 100% 100%;
       .btnX {
         position: absolute;
-        right: 25px;
-        top: 25px;
+        right: 20px;
+        top: 20px;
         width: 20px;
         height: 20px;
         img {
@@ -1934,7 +2049,7 @@ export default {
     }
     .Motitle {
       width: 90%;
-      margin: 50px auto 20px;
+      margin: 20px auto 10px;
       font-size: 20px;
       border-bottom: 1px solid #edd3b0;
       padding: 0px 0px 10px 10px;
@@ -1949,8 +2064,8 @@ export default {
       }
     }
     .minMap {
-      margin: 20px auto 0;
-      width: 270px;
+      margin: 20px 0 0 20px;
+      width: 268px;
       height: 45px;
       background: url("../../assets/tabMo/map1.png");
       background-size: 100% 100%;
@@ -1966,13 +2081,27 @@ export default {
     }
 
     .minMap2 {
+      width: 255px;
+      height: 38px;
       background: url("../../assets/tabMo/map2.png");
       background-size: 100% 100%;
     }
     .minMap3 {
+      width: 255px;
+      height: 38px;
       background: url("../../assets/tabMo/map3.png");
       background-size: 100% 100%;
     }
+    .minMap4 {
+      padding-left: 60px;
+      width: 243px;
+      height: 38px;
+      background: url("../../assets/tabMo/map4.png");
+      background-size: 100% 100%;
+      a {
+        width: 50px;
+      }
+    }
   }
   .toPicture {
     color: #edd3b0;
@@ -2178,7 +2307,7 @@ export default {
   .MoTab3 {
     .conten {
       background: url("../../assets/tabMo/moTabBac3.png") !important;
-      background-size: 100% 100%;
+      background-size: 100% 100% !important;
     }
     .moLiuYan {
       padding-right: 10px;
@@ -2277,6 +2406,8 @@ export default {
   }
   .MoTab4 {
     .MoRWbac {
+      background: url('../../assets/tab/dakaMo1.png');
+      background-size: 100% 100%;
       position: absolute;
       left: 0;
       top: 0;
@@ -2287,10 +2418,80 @@ export default {
         height: 100%;
       }
     }
+    .MoRWbac2{
+      background: url('../../assets/tab/dakaMo2.png');
+      background-size: 100% 100%;
+
+    }
+    .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');
+      background-size: 100% 100%;
+      .Motitle{
+        color: #b24340;
+        border-bottom: 1px solid #b24340;
+      }
+      .tab4Name{
+        color: #b24340;
+      }
+    }
+    .MoRWbac5{
+      background: url('../../assets/tab/dakaMo5.png');
+      background-size: 100% 100%;
+      .Motitle{
+        color: #b24340;
+        border-bottom: 1px solid #b24340;
+      }
+      .tab4Name{
+        color: #b24340;
+      }
+    }
+    .MoRWbac6{
+      background: url('../../assets/tab/dakaMo6.png');
+      background-size: 100% 100%;
+      .Motitle{
+        color: #b24340;
+        border-bottom: 1px solid #b24340;
+      }
+      .tab4Name{
+        color: #b24340;
+      }
+    }
     .Motitle {
       font-size: 16px;
     }
     .conten {
+      .btnX{
+        background: url('../../assets/tab/×.png');
+        background-size: 100% 100%;
+      }
+      .btnX3{
+        background: url('../../assets/tab/×Red.png');
+        background-size: 100% 100%;
+      }
+      .btnX4{
+        background: url('../../assets/tab/×Red.png');
+        background-size: 100% 100%;
+      }
+      .btnX5{
+        background: url('../../assets/tab/×Red.png');
+        background-size: 100% 100%;
+      }
+      .btnX6{
+        background: url('../../assets/tab/×Red.png');
+        background-size: 100% 100%;
+      }
+      background: none;
       .MoinpName {
         z-index: 999;
         position: absolute;
@@ -2298,7 +2499,7 @@ export default {
         left: 0;
         bottom: 0;
         width: 100%;
-        height: 84%;
+        height: 90%;
         .shuru {
           width: 220px;
           margin: 50px auto 0;
@@ -2323,9 +2524,11 @@ export default {
         }
       }
       .tab4Name {
-        margin-top: -10px;
         text-align: center;
-        font-size: 20px;
+        font-size: 14px;
+        &>span {
+          font-size: 20px;
+        }
       }
       .MoqrCode {
         position: absolute;
@@ -2339,13 +2542,14 @@ export default {
         }
       }
       .MoDownload {
-        border-radius: 8px;
+        color: #b24340;
+        border-radius: 6px;
         display: flex;
         justify-content: center;
         align-items: center;
         width: 182px;
         height: 34px;
-        background-color: rgba(237, 211, 176, 0.4);
+        background-color: #edd3b0;
         position: absolute;
         bottom: 15px;
         left: 50%;