1253

web/src/assets/theme/theme.less

@@ -86,7 +86,8 @@
 
   .pHover {
     cursor: pointer;
-    &.active,&:hover {
+    &.active,
+    &:hover {
       background-color: @backcolor!important;
       color: @color!important;
       * {
@@ -177,6 +178,77 @@
       }
     }
   }
+  
+  @qwh:30px;
+  .qlayerpage {
+    margin-top: @qwh;
+    span {
+      font-size: 16px;
+      display: inline-block;
+      color: #fff;
+      vertical-align: middle;
+      margin: 0 14px;
+      &.active {
+        background: @color;
+        color: @backcolor;
+        border: 1px solid @color!important;
+      }
+    }
+    .number {
+      span {
+        margin: 0 5px;
+        cursor: pointer;
+        border: 1px solid #fff;
+        border-radius: 50%;
+        width: @qwh;
+        height: @qwh;
+        vertical-align: middle;
+        line-height: @qwh;
+        text-align: center;
+        &:last-child,
+        &:first-child {
+          border-radius: 20px;
+          width: 80px;
+        }
+        &:hover {
+          background: @color;
+          color: @backcolor;
+          border: 1px solid @color;
+        }
+      }
+    }
+    div {
+      display: inline-block;
+    }
+
+    .topage {
+      margin-left: 14px;
+      > input {
+        background: none;
+        border: 1px solid #fff;
+        width: @qwh;
+        height: @qwh;
+        padding: 0 10px;
+        border-radius: 50%;
+        vertical-align: middle;
+        text-align: center;
+        color: #fff;
+      }
+      > span {
+        margin: 0 10px;
+      }
+      .comfirm {
+        cursor: pointer;
+        border: 1px solid #fff;
+        border-radius: 20px;
+        width: 70px;
+        height: @qwh;
+        vertical-align: middle;
+        line-height: @qwh;
+        text-align: center;
+      }
+    }
+  }
 
   .deepSearch {
     .icon {
@@ -292,13 +364,13 @@
     }
   }
 
-
   @nwh: 18px;
   .normalradio {
     input[type="radio"] {
       display: none;
     }
-    input[type="radio"], label {
+    input[type="radio"],
+    label {
       position: relative;
       padding-left: 26px;
       line-height: @nwh;
@@ -492,4 +564,132 @@
       background-color: @backcolor!important;
     }
   }
+
+  .parimaryExhibtion {
+    border: 2px solid @color;
+    width: 300px;
+    background: rgba(0, 0, 0, 0.4);
+    transform: translateX(300px);
+    transition: all 0.3s ease;
+    color: #fff;
+    .daolan {
+      cursor: pointer;
+      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;
+      }
+    }
+    .p-title {
+      background: @backcolor;
+      position: relative;
+      border-bottom: 2px solid @color;
+      height: 60px;
+      > span {
+        padding-left: 0;
+        line-height: 60px;
+        height: 60px;
+        font-weight: bold;
+        font-size: 16px;
+        letter-spacing: 1px;
+      }
+    }
+    .cad-con {
+      width: 100%;
+      height: 200px;
+    }
+    .exhi-list {
+      border-top: 2px solid @color;
+      width: 100%;
+      > li {
+        height: 40px;
+        line-height: 40px;
+        padding: 0 30px;
+        cursor: pointer;
+        &:hover {
+          background: @backcolor;
+        }
+      }
+    }
+  }
+
+  .dati_btn {
+    > span {
+      display: inline-block;
+      padding: 0 30px;
+      border: 1px solid #fff;
+      color: #fff;
+      font-size: 18px;
+      line-height: 40px;
+      height: 40px;
+      font-weight: bold;
+      margin-left: 40px;
+      cursor: pointer;
+      &:hover,
+      &.active {
+        color: @backcolor;
+        background: @color;
+        border: 1px solid @backcolor;
+      }
+    }
+  }
+
+  .datiing{
+    .dati{
+      .title{
+        color: @color;
+        text-align: left;
+        line-height: 1.5;
+        font-weight: bold;
+        font-size: 20px;
+        padding-bottom: 15px;
+        border-bottom: 3px solid;
+        border-image: linear-gradient(90deg, rgba(228, 173, 100, 0) 0%, @color 10%, @color 90%,rgba(228, 173, 100, 0) 100%,) 4 ;
+      }
+      >ul{
+        display: inline-block;
+        width: 100%;
+        >li{
+          display: flex;
+          align-items: center;
+          color: @color;
+          font-weight: bold;
+          font-size: 20px;
+          margin: 40px 0;
+          cursor: pointer;
+          >div{
+            width: 36px;
+            height:36px;
+            border: 2px solid #FFFFFF;
+            position: relative;
+            >span,>img{
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%,-50%);
+            }
+            >span{
+              width: 14px;
+              height: 14px;
+              background: @color;
+              border-radius: 50%;
+            }
+          }
+          
+          >span{
+            color: @color;
+            font-size: 20px;
+            display: inline-block;
+            margin-left: 20px;
+          }
+        }
+      }
+    }
+  }
 }

web/src/components/Danmaku.vue

@@ -33,7 +33,7 @@
           :src="closeIcon || ''"
           v-if="!isShowList"
         />
-        <button class="send-btn">发送</button>
+        <button class="send-btn primary">发送</button>
       </div>
       <ul class="show-list" v-show="isShowSelectList">
         <li

web/src/components/Paging.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="layerpage">
+  <div class="layerpage" :class="cls">
     <!-- <span class="total">共{{total}}条</span> -->
     <div class="number">
       <span @click="current = current - 1">上一页</span>
@@ -43,7 +43,7 @@
 
 <script>
 export default {
-  props: ['paging'],
+  props: ['paging','cls'],
   data() {
     return {
       ...this.paging

web/src/components/exhibition/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="palte" :class="{daolanactive:isShow}">
+  <div class="parimaryExhibtion" :class="{daolanactive:isShow}">
     <div class="p-title">
       <span>{{current.name}}</span>
     </div>
@@ -76,61 +76,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@theme:#D32424;
-.palte{
-  border: 2px solid #E4AD64;
-  width: 300px;
-  background: rgba(0, 0, 0, 0.6);
-  transform: translateX(300px);
-  transition: all 0.3s ease;
-  color: #fff;
-  .daolan{
-    cursor: pointer;
-    position: absolute;
-    right: 300px;
-    background: rgba(0, 0, 0, 0.6);
-    border-radius: 5px 0px 0px 5px;
-    top: 24%;
-    padding: 10px;
-    >img{
-      width: 16px;
-      transform: rotate(180deg);
-      margin-bottom: 4px;
-    }
-  }
-  .p-title{
-    background: @theme;
-    position: relative;
-    border-bottom: 2px solid #E4AD64;
-    height: 60px;
-    >span{
-      padding-left: 0;
-      line-height: 60px;
-      height: 60px;
-      font-weight: bold;
-      font-size: 16px;
-      letter-spacing: 1px;
-    }
-  }
-  .cad-con{
-    width: 100%;
-    height: 200px;
-  }
-  .exhi-list{
-    border-top: 2px solid #E4AD64;
-    width: 100%;
-    >li{
-      height: 40px;
-      line-height: 40px;
-      padding: 0 30px;
-      cursor: pointer;
-      &:hover{
-        background: @theme;
 
-      }
-    }
-  }
-}
 .daolanactive{
   transform: translateX(0);
   .daolan{

web/src/config/api.js

@@ -139,3 +139,55 @@ export function getMournList(data, cb) {
     cb(res);
   });
 }
+
+
+//获取题组列表
+export function getQuestionGroupList(data, cb) {
+  let params = {
+    ...data
+  };
+  axios({
+    method: "post",
+    data:params,
+    url: `cms/questionGroup/list`,
+  }).then((res) => {
+    cb(res);
+  });
+}
+
+
+//获取题目详情
+export function getQuestionGroupDetail(data, cb) {
+  axios({
+    method: "get",
+    url: `cms/web/questionGroup/detail/${data.id}`,
+  }).then((res) => {
+    cb(res);
+  });
+}
+
+
+//提交留言接口
+export function submitAnswers(data, cb) {
+  let params = {
+    ...data
+  };
+
+  axios({
+    method: "post",
+    data: params,
+    url: `cms/web/questionUser/submit`,
+  }).then((res) => {
+    cb(res);
+  });
+}
+
+//获取排名列表
+export function getRanking(data, cb) {
+  axios({
+    method: "get",
+    url: `cms/web/questionUser/ranking/${data.id}`,
+  }).then((res) => {
+    cb(res);
+  });
+}

web/src/views/layout/index.vue

@@ -86,6 +86,7 @@ export default {
 .bodycon{
   width: 100%;
   height: 100%;
+  overflow: hidden;
 }
 .route-view{
   padding-top: 100px;

web/src/views/message/index.vue

@@ -28,6 +28,7 @@ export default {
   background-size: 100% auto;
   padding-bottom: 80px;
   position: relative;
+  min-height: 89vh;
   .msg_l,.msg_r{
     position: absolute;
     z-index: 1;

web/src/views/scene/components/popup.vue

@@ -0,0 +1,146 @@
+<template>
+  <div class="cpcon">
+    <div class="cpmask"></div>
+    <div
+      v-if="datistatus"
+      class="cpbody"
+      :style="{
+        backgroundImage: `url(${require(`@/assets/images/btnlist/cpbg_${theme}.png`)})`,
+      }"
+    >
+      <img
+        class="close"
+        @click="$emit('close')"
+        :src="require('@/assets/images/btnlist/close.png')"
+        alt=""
+      />
+      <component :datistatus="datistatus" :is="cp" />
+    </div>
+
+    <div
+      v-else
+      class="cpbody"
+      :style="{
+        backgroundImage: `url(${require(`@/assets/images/btnlist/datiwan_${theme}.png`)})`,
+      }"
+    >
+      <div class="tiwan">
+        <img
+          :src="require(`@/assets/images/btnlist/${star}_star.png`)"
+          alt=""
+        />
+        <p class="primaryTxt" v-if="correct.challengesuccess">
+          本次答对{{correct.correctNum}}题，挑战成功！<br />您已战胜{{correct.correctRate}}%的挑战者！
+        </p>
+        <p class="primaryTxt" v-else>
+          本次答对{{correct.correctNum}}题，挑战失败！<br />还需要继续努力哦！
+        </p>
+        <div class="dati_btn">
+          <span @click="datistatus='select'">再来一局</span>
+          <span class="active" @click="$emit('close')">结束答题</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import question from "./question";
+
+export default {
+  props: ["cp"],
+  components: { question },
+  data() {
+    return {
+      datistatus: 'select',
+      star: "one",
+      correct:{
+        correctNum:0,
+        correctRate:0,
+        challengesuccess:false
+      }
+    };
+  },
+  methods: {
+  },
+  watch:{
+    'correct.correctRate':{
+      deep:true,
+      handler:function (newVal) {
+        this.star = newVal>90?'full':(newVal<50?'one':'two')
+        console.log(this.star);
+      }
+    }
+  },
+  mounted() {
+    this.$bus.$on("datiing", (data) => {
+      this.datistatus = data.datiing;
+      this.correct = {...data}
+    });
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.cpcon {
+  width: 100%;
+  height: 100%;
+  z-index: 999;
+  position: fixed;
+  left: 0;
+  top: 0;
+  .cpmask {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    // background-color: rgba(0, 0, 0, 0.5);
+  }
+  .cpbody {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    width: 996px;
+    height: 642px;
+    transform: translate(-50%, -50%);
+    background-repeat: no-repeat;
+    background-size: cover;
+    .close {
+      position: absolute;
+      right: 50px;
+      width: 30px;
+      top: 80px;
+      cursor: pointer;
+    }
+    .tiwan {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      > p {
+        font-size: 40px;
+        font-weight: bold;
+        margin: 50px 0 60px;
+      }
+      .dati_btn {
+        > span {
+          line-height: 60px;
+          font-weight: normal !important;
+          height: 60px;
+          border-radius: 5px;
+          font-size: 20px;
+          &:first-of-type {
+            &:hover,
+            &.active {
+              color: #fff;
+              background: none;
+              border: 1px solid #fff;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/scene/components/question/datiing.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="datiing" v-if="currentTimu.question">
+    <p class="qtitle">第1/10题</p>
+    <div class="dati">
+      <p class="title">{{ currentTimu.question }}</p>
+      <ul>
+        <li
+          v-for="(item, i) in currentTimu.answer"
+          @click="timuselect = item.val"
+          :key="i"
+        >
+          <div>
+            <img
+              v-if="item.val == currentTimu.correct && isSubmit"
+              :src="require(`@/assets/images/btnlist/dui.png`)"
+            />
+            <img
+              v-if="
+                item.val == timuselect &&
+                  item.val != currentTimu.correct &&
+                  isSubmit
+              "
+              :src="require(`@/assets/images/btnlist/cuo.png`)"
+            />
+            <span v-if="timuselect == item.val && !isSubmit"></span>
+          </div>
+          <span>{{ "ABCD"[i] }}.{{ item.name }}</span>
+        </li>
+      </ul>
+    </div>
+    <div class="dati_btn">
+      <span class="active" @click="handleNext">{{
+        canNext ? "下一题" : "确认"
+      }}</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getQuestionGroupDetail, submitAnswers } from "@/config/api";
+
+export default {
+  props: ["timu"],
+  data() {
+    return {
+      tiku: {},
+      currentIdx: 0,
+      timuselect: "",
+      isSubmit: false,
+      canNext: false,
+      correctNum: 0,
+      correctRate: 0,
+    };
+  },
+  computed: {
+    currentTimu() {
+      return this.tiku.answer ? this.tiku.answer[this.currentIdx] || {} : {};
+    },
+  },
+  watch: {
+    currentIdx(newVal) {
+      if (newVal >= this.tiku.answer.length) {
+        this.correctRate = Math.floor(
+          (this.correctNum / this.tiku.answer.length) * 100
+        );
+        this.submitAnswers()
+      }
+    },
+  },
+  methods: {
+    reset() {
+      this.canNext = false;
+      this.isSubmit = false;
+      this.timuselect = "";
+    },
+    handleNext() {
+      if (this.timuselect == this.currentTimu.correct || this.canNext) {
+        if (this.timuselect == this.currentTimu.correct) {
+          this.correctNum++;
+        }
+        this.reset();
+        this.currentIdx++;
+      } else {
+        this.isSubmit = true;
+        this.canNext = true;
+      }
+    },
+    submitAnswers() {
+      submitAnswers(
+        {
+          percent: this.correctRate,
+          questionGroupId: this.tiku.entity.id,
+          score: this.correctNum,
+          userId: this.userInfo.id,
+        },
+        (res) => {
+          this.$bus.$emit("datiing", {
+            correctNum: this.correctNum,
+            datiing: false,
+            correctRate: this.correctRate,
+            challengesuccess: this.correctRate >= 50,
+          });
+          console.log(res);
+        }
+      );
+    },
+    getDetail() {
+      getQuestionGroupDetail({ id: this.timu.id}, (res) => {
+        res.data.answer = res.data.answer.map((item) => {
+          item.answer = JSON.parse(item.answer);
+          return item;
+        });
+        this.tiku = res.data;
+      });
+    },
+  },
+  mounted() {
+    this.getDetail();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.datiing {
+  width: 100%;
+  height: 100%;
+  .qtitle {
+    color: #fff;
+    margin-top: 6px;
+  }
+  .dati {
+    width: 83%;
+    height: 62%;
+    overflow-y: auto;
+    margin: 0 auto;
+    margin-top: 100px;
+    padding: 0 10px;
+  }
+
+  .dati_btn {
+    > span {
+      padding: 0 40px;
+      border-radius: 5px;
+    }
+  }
+}
+</style>

web/src/views/scene/components/question/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="question">
+    <datiing v-if="datiing=='datiing'" :timu="timu"/>
+    <vselect v-else-if="datiing=='select'" @viewRanking="handleRanking" @dati="handleDati"/>
+    <paiming @close="datiing='select'" :questionGroupId="questionGroupId" v-else/>
+  </div>
+</template>
+
+<script>
+import vselect from './select.vue'
+import datiing from './datiing.vue'
+import paiming from './paiming.vue'
+
+export default {
+  components:{vselect,datiing,paiming},
+  props:['datistatus'],
+  methods:{
+    getQuestion(){
+
+    },
+    handleDati(data){
+      this.datiing = 'datiing'
+      this.timu = data
+    },
+    handleRanking(data){
+      console.log(data);
+      this.datiing = 'ranking'
+      this.questionGroupId = data.id
+    }
+  },
+  data(){
+    return {
+      datiing:'select',
+      timu:'',
+      questionGroupId:''
+    }
+  },
+  mounted(){
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.question{
+  width: 100%;
+  height: 100%;
+  color: #fff;
+}
+
+</style>

web/src/views/scene/components/question/paiming.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="qpaiming">
+    <p class="qtitle">排名</p>
+    <div class="tilist">
+      <table>
+        <thead>
+          <tr class="primaryTxt">
+            <th>名词</th>
+            <th>姓名</th>
+            <th>答对数</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="(item, i) in list" :key="i">
+            <td>
+              <div>
+                <img v-if="i<3" :src="require(`@/assets/images/btnlist/ranking_${i+1}.png`)" alt="">
+                <span>{{ i + 1 }}</span>
+              </div>
+            </td>
+            <td>{{ item.realName || '-' }}</td>
+            <td>{{ item.score }}</td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+     <div class="dati_btn">
+      <span class="active" @click="$emit('close')">确定</span>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getRanking } from "@/config/api";
+export default {
+  props: ["questionGroupId"],
+  data() {
+    return {
+      list: [],
+    };
+  },
+  watch: {},
+  methods: {
+    getRanking() {
+      getRanking(
+        {
+          id: this.questionGroupId,
+        },
+        (res) => {
+          this.list = res.data;
+        }
+      );
+    },
+  },
+  mounted() {
+    this.getRanking();
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.qpaiming {
+  width: 100%;
+  height: 100%;
+  .qtitle {
+    margin-top: 6px;
+  }
+  .tilist {
+    width: 82%;
+    height: 54%;
+    overflow-y: auto;
+    margin: 0 auto;
+    margin-top: 100px;
+    padding-right: 10px;
+    table {
+      width: 100%;
+      thead,
+      tbody {
+        tr {
+          th,
+          td {
+            text-align: center;
+            height: 70px;
+            line-height: 70px;
+            border: 2px solid #fff;
+            font-size: 18px;
+            >div{
+              position: relative;
+              width: 100%;
+              >img{
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                left: 60px;
+                width: 36px;
+              }
+            }
+          }
+          th{
+            font-weight: bold;
+            font-size: 18px;
+          }
+        }
+      }
+    }
+  }
+  .dati_btn {
+    margin-top: 40px;
+    > span {
+      padding: 0 50px;
+      font-size: 20px;
+      font-weight: normal;
+      border-radius: 5px;
+      line-height: 60px;
+      height: 60px;
+    }
+  }
+}
+</style>

web/src/views/scene/components/question/select.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="qselect">
+    <p class="qtitle">选择题组</p>
+    <ul class="tilist">
+      <li v-for="(item, i) in list" :key="i">
+        <span>{{item.name}}</span>
+        <div class="dati_btn">
+          <span @click="$emit('dati',item)">答题</span>
+          <span @click="$emit('viewRanking',item)">查看排名</span>
+        </div>
+      </li>
+    </ul>
+    <Paging class="paging" :cls="'qlayerpage'" @changeCurrent="changeCurrent" v-if="paging.total>0" :paging="paging" />
+  </div>
+</template>
+
+<script>
+import { getQuestionGroupList } from "@/config/api";
+import Paging from '@/components/Paging'
+export default {
+  components: {Paging},
+  data() {
+    return {
+      list: [],
+      paging: {
+        pageSize: 5,
+        pageNum: 1,
+        total: 0,
+        showSize: 3,
+        current: 1,
+      },
+    };
+  },
+  watch: {
+    "paging.pageNum": function(newVal) {
+      this.getQuestionGroupList();
+    },
+  },
+  methods: {
+     changeCurrent(data){
+      this.paging.pageNum = data
+    },
+    getQuestionGroupList() {
+      getQuestionGroupList({
+        pageNum: this.paging.pageNum,
+        pageSize: this.paging.pageSize
+      },res=>{
+        this.list = res.data.list
+        this.paging.total = res.data.total;
+      });
+    },
+  },
+  mounted(){
+    this.getQuestionGroupList()
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.qselect {
+  width: 100%;
+  height: 100%;
+  .qtitle {
+    margin-top: 6px;
+  }
+  .tilist{
+    width: 82%;
+    height: 60%;
+    overflow-y: auto;
+    margin: 0 auto;
+    margin-top: 100px;
+    padding-right: 10px;
+    >li{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #fff;
+      padding: 20px 0;
+      &:first-of-type{
+        padding-top: 0;
+      }
+      >span{
+        text-align: left;
+        width: 60%;
+        line-height: 1.5;
+      }
+    }
+  }
+}
+</style>

web/src/views/scene/gui/menu.vue

@@ -9,7 +9,7 @@
         @click="(isShow = !isShow), (showShare = false)"
       >
         <img
-          :src="require(`@/assets/images/drawback${!isShow ? '_out' : ''}.png`)"
+          :src="require(`@/assets/images/btnlist/drawback${!isShow ? '_out' : ''}.png`)"
           alt=""
         />
       </div>
@@ -24,7 +24,7 @@
               <img
                 rel="tooltip"
                 title=""
-                :src="require('@/assets/images/play.png')"
+                :src="require('@/assets/images/btnlist/play.png')"
                 width="24"
                 height="24"
                 data-original-title="播放"
@@ -40,7 +40,7 @@
             <a>
               <img
                 title=""
-                :src="require('@/assets/images/play.png')"
+                :src="require('@/assets/images/btnlist/play.png')"
                 width="24"
                 height="24"
               />
@@ -51,7 +51,7 @@
               <img
                 rel="tooltip"
                 title=""
-                :src="require('@/assets/images/pause.png')"
+                :src="require('@/assets/images/btnlist/pause.png')"
                 width="24"
                 height="24"
                 data-original-title="暂停"
@@ -83,8 +83,8 @@
               <img
                 class="icon icon-inside"
                 :src="
-                  require(`@/assets/images/auto${
-                    !isGuide ? '_active' : ''
+                  require(`@/assets/images/btnlist/auto${
+                    !isGuide ? `_active_${theme}` : ''
                   }.png`)
                 "
                 title="navigation icon"
@@ -99,7 +99,7 @@
             >
               <img
                 class="icon icon-inside"
-                :src="require('@/assets/images/hotlist.png')"
+                :src="require('@/assets/images/btnlist/hotlist.png')"
                 title="navigation icon"
               />
             </div>
@@ -110,12 +110,12 @@
             >
               <img
                 class="icon icon-inside"
-                :src="require('@/assets/images/inside.png')"
+                :src="require('@/assets/images/btnlist/inside.png')"
                 title="navigation icon"
               />
               <img
                 class="icon icon-inside active"
-                :src="require('@/assets/images/inside_active.png')"
+                :src="require(`@/assets/images/btnlist/inside_active_${theme}.png`)"
                 title="navigation icon"
               />
             </div>
@@ -126,12 +126,12 @@
             >
               <img
                 class="icon icon-inside"
-                :src="require('@/assets/images/dollhouse.png')"
+                :src="require('@/assets/images/btnlist/dollhouse.png')"
                 title="navigation icon"
               />
               <img
                 class="icon icon-inside active"
-                :src="require('@/assets/images/dollhouse_active.png')"
+                :src="require(`@/assets/images/btnlist/dollhouse_active_${theme}.png`)"
                 title="navigation icon "
               />
             </div>
@@ -143,12 +143,12 @@
             >
               <img
                 class="icon icon-inside"
-                :src="require('@/assets/images/floor.png')"
+                :src="require('@/assets/images/btnlist/floor.png')"
                 title="navigation icon"
               />
               <img
                 class="active icon icon-inside active"
-                :src="require('@/assets/images/floor_active.png')"
+                :src="require(`@/assets/images/btnlist/floor_active_${theme}.png`)"
                 title="navigation icon"
               />
             </div>
@@ -161,7 +161,7 @@
             >
               <img
                 class="icon icon-inside"
-                :src="require('@/assets/images/VR.png')"
+                :src="require('@/assets/images/btnlist/VR.png')"
                 title="navigation icon"
               />
             </div>
@@ -174,7 +174,7 @@
             >
               <img
                 class="icon icon-inside"
-                :src="require('@/assets/images/face.jpg')"
+                :src="require('@/assets/images/btnlist/face.jpg')"
                 title="navigation icon"
               />
             </div>
@@ -184,21 +184,11 @@
         <ul class="btn-list">
           <li @click="handleItem(item)" v-for="(item, i) in btnlist" :key="i">
             <img
-              :src="require(`@/assets/images/btnlist/${item.id}.png`)"
+              :src="require(`@/assets/images/btnlist/${item.id}${btnlistActive==item.id?`_${theme}`:''}.png`)"
               alt=""
             />
           </li>
         </ul>
-        <div class="hoverCls" v-if="showShare">
-          <img :src="require(`@/assets/images/icon/share_bg.png`)" alt="" />
-          <div class="hoverBody">
-            <img
-              src="https://4dscene.4dage.com/new4dkk/images/chat-ecode.jpg"
-              alt=""
-            />
-            <span> 扫描上上二维码<br />即可分享好友 </span>
-          </div>
-        </div>
       </div>
     </div>
 
@@ -214,7 +204,7 @@
         <div id="volume" class="ui-icon wide">
           <a>
             <img
-              :src="require('@/assets/images/Volume btn_on.png')"
+              :src="require('@/assets/images/btnlist/Volume btn_on.png')"
               width="24"
               height="24"
             />
@@ -295,6 +285,7 @@ let menuli = [
 ];
 
 export default {
+  props:['itemctive'],
   components:{
   },
   data() {
@@ -379,7 +370,7 @@ export default {
       isGuide: true,
       conLi,
       showAutoList: false,
-      showShare: false
+      btnlistActive:this.itemctive
     };
   },
   computed: {
@@ -389,13 +380,15 @@ export default {
   },
   methods: {
     handleItem(item) {
-      if (!item.path) {
-          this.showShare = !this.showShare;
-          return;
-        }
-      this.$router.push(item.path);
+      this.btnlistActive = item.id
+      this.$emit('btnactive',item.id)
     },
   },
+  mounted(){
+    this.$bus.$on('resetbtnactive',()=>{
+      this.btnlistActive = ''
+    })
+  }
 };
 </script>
 

web/src/views/scene/index.vue

@@ -27,7 +27,7 @@
             <v-title/>
 
             <!-- 底部菜单 -->
-            <v-menu/>
+            <v-menu @btnactive="handleActive"/>
             
             <!-- 导览 -->
             <v-guide/>
@@ -63,10 +63,11 @@
       <Danmaku
         class="danmaku"
         :quotes="danmu"
-        :showIcon="require('@/assets/images/icon/danmu_open.png')"
+        :showIcon="require(`@/assets/images/icon/danmu_open_${theme}.png`)"
         :closeIcon="require('@/assets/images/icon/danmu_close.png')"
         :arrowIcon="require('@/assets/images/icon/danmu_top.png')"
       />
+      <vpopup @close="handlepopClose" :cp="cp" v-if="cp"/>
   </div>
 </template>
 
@@ -84,7 +85,10 @@ import guimsg from './gui/guimsg';
 import vError from './gui/error';
 import vrCon from './gui/vrcon';
 import vOther from './gui/other';
-import exhibition from '@/components/exhibition'
+import exhibition from '@/components/exhibition';
+
+import vpopup from './components/popup.vue'
+
 
 export default {
   name: 'Home',
@@ -102,7 +106,8 @@ export default {
       vError,
       vrCon,
       vOther,
-      exhibition
+      exhibition,
+      vpopup
   },
   watch:{
     '$route.query.route':function (newVal) {
@@ -124,6 +129,16 @@ export default {
     handleClose(){
       $('.cad').css('transform', 'translate(-150%,-50%)')
       this.showExhibition=false
+    },
+    handlepopClose(){
+      this.cp = ''
+      this.$bus.$emit('resetbtnactive')
+    },
+    handleActive(data){
+      if (data=='question') {
+        this.cp = 'question'
+      }
+      console.log(data)
     }
   },
   beforeDestroy(){
@@ -146,20 +161,22 @@ export default {
           "向人民解放军致敬"
           ],
         page: this.$route.query.route,
-        showExhibition: false
+        showExhibition: false,
+        cp:''
       }
   }
 }
 </script>
 
 <style lang="less" scoped>
+
 .parent-body{
     width: 100%;
     height: calc(100vh - 100px);
     margin-top: 100px;
     padding-top: 0;
     position: relative;
-    overflow-x: hidden;
+    overflow: hidden;
 }
 
 .danmaku{