update

backstage/src/configue/menu.js

@@ -58,32 +58,32 @@ let routes = [
   //   ],
   //   type:'content'
   // },
-  {
-    name: "学习园地管理",
-    id: "4",
-    key: "study",
-    param: [
-      {
-        key: "type",
-        default: "info", //阅历：info,共享：share
-      },
-    ],
-    editParam: [
-      {
-        key: "type",
-        default: "info",
-      },
-      {
-        key: "id",
-        default: "none",
-      },
-      {
-        key: "status",
-        default: "0",
-      }
-    ],
-    type:'content'
-  },
+  // {
+  //   name: "学习园地管理",
+  //   id: "4",
+  //   key: "study",
+  //   param: [
+  //     {
+  //       key: "type",
+  //       default: "info", //阅历：info,共享：share
+  //     },
+  //   ],
+  //   editParam: [
+  //     {
+  //       key: "type",
+  //       default: "info",
+  //     },
+  //     {
+  //       key: "id",
+  //       default: "none",
+  //     },
+  //     {
+  //       key: "status",
+  //       default: "0",
+  //     }
+  //   ],
+  //   type:'content'
+  // },
   {
     name: "互动模块管理",
     id: "5",

web/public/index.html

@@ -10,6 +10,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.png">
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/js/lib/scrollbar/perfect-scrollbar.css"/>
     <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/js/lib/ddfullscreen/ddfullscreenslider.css"/>
+    <link rel="stylesheet" href="<%= VUE_APP_STATIC_DIR %>/css/animate.min.css"/>
 
     <title>解放军总医院医学院门户网站</title>
   </head>

web/public/scene.html

@@ -11,8 +11,16 @@
     <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"/>
+    <script>
+        var number = window.location.href.substring(window.location.href.indexOf("=") + 1);
+        if (number.indexOf("&") != -1) {
+            number = number.substring(0, number.indexOf("&"));
+        }
+        if (number.indexOf("#") != -1) {
+            number = number.substring(0, number.indexOf("#"));
+        } 
+    </script>
     <script class="build keep">
-        window.number = '1149_2'
         if (window.performance) {
             window.navigationStart = window.performance.timing.navigationStart;
         } else {

web/public/static/css/main.css

@@ -4031,7 +4031,8 @@ a.hasHover:hover, a:active {
 }
 
 .fullWidth .frame-container {
-    width: 100%
+    width: 100%;
+    background: linear-gradient(90deg, rgba(20, 62, 58, 0.5) 0%, rgba(20, 62, 58, 0) 100%);
 }
 
 .frame {

web/public/static/js/lib/ddfullscreen/ddfullscreenslider.css

@@ -87,7 +87,6 @@ section.dd_fullscreenslider article.slide{ /* CSS for each slide */
   -webkit-box-sizing: border-box; /* include padding/ border as part of declared menu width */
   -moz-box-sizing: border-box;
 	z-index: 1000;
-  background: #E56464;
 	-webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
 }
 

web/src/App.vue

@@ -9,7 +9,6 @@
       </div>
       <div>{{link}}</div>
     </div>
-    <!-- <button @click="changeColor">改变颜色</button> -->
   </div>
 </template>
 
@@ -39,20 +38,7 @@ export default {
       document.getElementById('app').className = 'theme2'
     }
   },
-  // watch:{
-  //   '$route.name':{
-  //       deep:true,
-  //       handler:function (newVal) {
-  //         if (newVal != 'scene') {
-  //           if (window.player) {
-  //             window.player.sceneRenderer.suspend()
-  //             window.player.removeAllListeners()
-  //             window.player = ''
-  //           }
-  //         }
-  //       }
-  //   }
-  // },
+
   mounted(){
     this.tips = whatBrowser()
     if(broswer.trident){
@@ -84,7 +70,6 @@ export default {
 <style lang="less">
 #app {
   text-align: center;
-  color: #2c3e50;
   width: 100%;
   height: 100%;
 }

web/src/assets/style/public.less

@@ -46,6 +46,59 @@ html,body{
   }
 }
 
+
+.brightness{
+  &::before{
+    content: '';
+    position: absolute;
+    top: 0; 
+    bottom: 0;
+    left: 0; 
+    right: 0;
+    z-index: -1;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color:rgba(0,0,0,0.7);
+    font-size: 0;
+  }
+}
+
+
+.brightnessW{
+  &::before{
+    content: '';
+    position: absolute;
+    top: 0; 
+    bottom: 0;
+    left: 0; 
+    right: 0;
+    z-index: -1;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color:rgba(255,255,255,0.7);
+    font-size: 0;
+  }
+}
+
+@supports (backdrop-filter: brightness(60%)) {
+  .brightness{
+    &::before{
+      content: '';
+      backdrop-filter: blur(10px) brightness(60%)!important;
+      background-color: rgba(0,0,0,0)!important;
+    }
+  }  
+
+  .brightnessW{
+    &::before{
+      content: '';
+      backdrop-filter: blur(10px) brightness(70%)!important;
+      background-color: rgba(255,255,255, 0.14)!important;
+    }
+  }  
+}
+
+
 @media screen and (max-width: 1700px) {
   *{
     font-size: 14px;

web/src/assets/style/reset.less

@@ -23,7 +23,7 @@ a{text-decoration: none;}
 
 
 ::-webkit-scrollbar {
-  width: 10px;
+  width: 4px;
   height: 8px;
 }
 
@@ -31,7 +31,7 @@ a{text-decoration: none;}
   height: 50px;
   background-color: #ddd;
   -webkit-border-radius: 4px;
-  outline: 2px solid #fff;
+  outline: 0 solid #fff;
   outline-offset: -2px;
 }
 

web/src/assets/theme/theme.less

@@ -133,21 +133,18 @@
     span {
       font-size: 16px;
       display: inline-block;
-      color: #999999;
+      color: #C7C7C7;
       vertical-align: middle;
-      margin: 0 14px;
+      margin: 0 4px;
 
       &.active {
-        background: @backcolor;
-        color: #fff;
-        border: 1px solid @backcolor!important;
+        color: #EB5057;
       }
     }
     .number {
       span {
-        margin: 0 5px;
+        margin: 0;
         cursor: pointer;
-        border: 1px solid #999999;
         border-radius: 50%;
         width: 40px;
         height: 40px;
@@ -160,10 +157,7 @@
           width: 80px;
         }
         &:hover {
-          background: @backcolor;
-          color: #fff;
-          border: 1px solid @backcolor;
-
+          color: #EB5057;
         }
       }
     }
@@ -189,7 +183,6 @@
       }
       .comfirm {
         cursor: pointer;
-        border: 1px solid #999999;
         border-radius: 20px;
         width: 70px;
         height: 40px;

web/src/components/Paging.vue

@@ -26,7 +26,7 @@
       <span @click="current = current + 1">下一页</span>
     </div>
 
-    <div class="topage">
+    <div class="topage" v-if="false">
       <span>到第</span>
       <input
         type="text"

web/src/components/hotspot/iframe.vue

@@ -2,7 +2,7 @@
   <div class="images">
     <div class="title" v-html="hotspot.title"></div>
     <div class="img-con">
-          <iframe :src="g_dealUrl(hotspot.iframe[active])" frameborder="0"></iframe>
+        <iframe :src="g_dealUrl(hotspot.iframe[active]||hotspot.model[active])" frameborder="0"></iframe>
     </div>
     <div class="desc" v-if="hotspot.content" v-html="hotspot.content"></div>
 

web/src/components/hotspot/image.vue

@@ -134,7 +134,7 @@ export default {
     }
     >img{
       max-width: 100%;
-      max-height: 400px;
+      max-height: 520px;
       cursor: pointer;
     }
     .pagna{

web/src/components/hotspot/index.vue

@@ -13,7 +13,6 @@ import title from './title.vue';
 import iframe from './iframe.vue';
 
 
-
 let iconArr = [
   { name: "视频", key: "video",  id: "vVideo", img: "video-icon", display: false },
   { name: "网页", key: "iframe", id: "vIframe", img: "iframe-icon", display: false },
@@ -28,13 +27,14 @@ export default {
     vAudio:audio,
     vImage:image,
     vIframe:iframe,
+    vModel:iframe,
     vTitle:title,
     vVideo:video
   },
   methods:{
     close(){
       this.$hideHotspot()
-      g_currentHot && g_currentHot.closePopup()
+      g_currentHot.closePopup && g_currentHot.closePopup()
       
       if(g_bgAudio && g_bgAudio.pauseByHot){
         window.manage.switchBgmState(true);

web/src/components/hotspot/title.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="images" :style="{backgroundImage:`url(${require('@/assets/images/project/video_bg.jpg')})`}">
+  <div class="images">
     <div class="img-con">
       <div class="title">{{hotspot.title}}</div>
-      <div class="desc" v-html="hotspot.content">
-    </div>
+      <div class="desc" v-html="hotspot.content"></div>
+      <img @click="$emit('close')" class="close" :src="require('@/assets/images/project/close.png')" alt="">
 
     </div>
   </div>
@@ -22,6 +22,7 @@ export default {
 }
 </script>
 
+
 <style lang="less" scoped>
 .noshow{
   opacity: 0!important;;
@@ -29,49 +30,48 @@ export default {
 }
 
 .images{
-  width: 100%;
-  height: 100%;
-  background-repeat: no-repeat;
+  width: 1010px;
+  background-color: #fff;
   text-align: center;
-  
-  .img-con{
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    flex-direction: column;
-    position: relative;
-    padding-bottom: 40px;
-    position: fixed;
-    top: 12%;
-    left: 50%;
-    transform: translateX(-50%);
+  margin: 0 auto;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+  border-radius: 5px;
+  border-top: 10px solid #338F7B;
+  text-align: left;
+   .title {
+    padding: 0 10px;
+    font-weight: bold;
+    color: #333333;
+    font-size: 24px;
     width: 100%;
-    .title{
-      padding: 0 80px;
-      display: inline-block;
-      color: #DBA761;
-      font-weight: bold;
-      font-size: 36px;
-      height: 70px;
-      line-height: 70px;
-      background: #BC1515;
-      border-radius: 60px;
-      margin: 45px auto;
-    }
+    padding: 20px 60px;
+  }
+  .img-con{
     .desc{
-      max-width: 1000px;
-      letter-spacing: 2px;
-      margin: 20px auto 0;
-      text-align: justify;
-      line-height: 2;
-      max-height: 400px;
-      padding: 0 10px;
+      margin: 0 auto;
+      width: 100%;
+      text-align: left;
+      line-height: 1.5;
+      max-height: 250px;
+      color: #333333;
       overflow-y: auto;
-      font-size: 24px;
-      line-height: 48px;
-      color: #BC1515;
+      font-size: 16px;
+      padding: 20px;
     }
   }
-
+  
 }
+
+ .close{
+    position: absolute;
+    top: 40px;
+    right: 50px;
+    width: 20px;
+    height: 20px;
+    cursor: pointer;
+    z-index: 9999999;
+  }
 </style>

web/src/components/icon/chat.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="svg">
+    <svg  style="display: inline; width: inherit; min-width: inherit; max-width: inherit; height: inherit; min-height: inherit; max-height: inherit;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="82.443" height="65.613" viewBox="0 0 82.443 65.613">
+      <defs>
+        <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+          <stop offset="0" stop-color="#248570"/>
+          <stop offset="1" stop-color="#4ab19b"/>
+        </linearGradient>
+        <filter id="路径_16256">
+          <feOffset dx="1" input="SourceAlpha"/>
+          <feGaussianBlur stdDeviation="7" result="blur"/>
+          <feFlood flood-color="#b0eee3" result="color"/>
+          <feComposite operator="out" in="SourceGraphic" in2="blur"/>
+          <feComposite operator="in" in="color"/>
+          <feComposite operator="in" in2="SourceGraphic"/>
+        </filter>
+      </defs>
+      <g id="chat" transform="translate(-2742.185 -2470.043)">
+        <path id="路径_16255" data-name="路径 16255" d="M2796.583,2502.391h41.882c2.669,0,4.833,1.814,4.833,4.052v29.6c0,2.238-2.164,4.052-4.833,4.052h-8.018l1.468,7.743-14.994-7.743h-20.338c-2.669,0-4.833-1.814-4.833-4.052v-29.6C2791.75,2504.206,2793.914,2502.391,2796.583,2502.391Z" transform="translate(-18.669 -12.184)" fill="url(#linear-gradient)"/>
+        <g data-type="innerShadowGroup" class="brightness">
+          <path id="ffff"  data-name="路径 16256" d="M2805.846,2470.043h-57.076c-3.637,0-6.585,2.551-6.585,5.7v41.632c0,3.147,2.948,5.7,6.585,5.7H2759.7l-.519,6.649,18.953-6.649h27.716c3.637,0,6.586-2.551,6.586-5.7v-41.632C2812.432,2472.594,2809.483,2470.043,2805.846,2470.043Z" />
+          <g transform="matrix(1, 0, 0, 1, 2742.19, 2470.04)" filter="url(#路径_16256)">
+            <path id="路径_16256-3" data-name="路径 16256" d="M2805.846,2470.043h-57.076c-3.637,0-6.585,2.551-6.585,5.7v41.632c0,3.147,2.948,5.7,6.585,5.7H2759.7l-.519,6.649,18.953-6.649h27.716c3.637,0,6.586-2.551,6.586-5.7v-41.632C2812.432,2472.594,2809.483,2470.043,2805.846,2470.043Z" transform="translate(-2742.19 -2470.04)"/>
+          </g>
+        </g>
+        <rect id="矩形_488" data-name="矩形 488" width="47.807" height="3.659" rx="1.829" transform="translate(2754.625 2483.947)" fill="#fff"/>
+        <rect id="矩形_489" data-name="矩形 489" width="31.221" height="3.659" rx="1.829" transform="translate(2754.625 2497.85)" fill="#fff"/>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.svg{
+  font-size: 0;
+  width: 100%;
+  height: 100%;
+  svg{
+    width: 100%;
+    height: 100%;
+  }
+}
+#ffff{
+  fill: none;
+  filter:blur(10px);
+  backdrop-filter: blur(10px) brightness(60%)!important;
+}
+.brightness{
+}
+</style>

web/src/components/icon/collection.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="svg">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      width="57.134"
+      height="66.263"
+      viewBox="0 0 57.134 66.263"
+      style="display: inline; width: inherit; min-width: inherit; max-width: inherit; height: inherit; min-height: inherit; max-height: inherit;"
+    >
+      <defs>
+        <linearGradient
+          id="linear-gradient"
+          x1="0.5"
+          x2="0.5"
+          y2="2"
+          gradientUnits="objectBoundingBox"
+        >
+          <stop offset="0" stop-color="#248570" />
+          <stop offset="1" stop-color="#4ab19b" />
+        </linearGradient>
+        <filter id="椭圆_54">
+          <feOffset dx="1" input="SourceAlpha" />
+          <feGaussianBlur stdDeviation="6" result="blur" />
+          <feFlood flood-color="#b0eee3" result="color" />
+          <feComposite operator="out" in="SourceGraphic" in2="blur" />
+          <feComposite operator="in" in="color" />
+          <feComposite operator="in" in2="SourceGraphic" />
+        </filter>
+      </defs>
+      <g id="collection" transform="translate(-2945.938 -2456.739)">
+        <path
+          id="路径_16257"
+          data-name="路径 16257"
+          d="M2982.042,2520.946a3.669,3.669,0,0,1,6.354,0l9.076,15.72,6.965,12.063a3.669,3.669,0,0,1-4.536,5.243l-13.468-4.258a6.741,6.741,0,0,0-2.717,0l-13.179,4.258a3.669,3.669,0,0,1-4.536-5.243l6.965-12.063Z"
+          transform="translate(-10.714 -31.243)"
+          fill="url(#linear-gradient)"
+        />
+        <g data-type="innerShadowGroup">
+          <circle
+            id="ffff"
+            data-name="椭圆 54"
+            cx="28.567"
+            cy="28.567"
+            r="28.567"
+            transform="translate(2945.938 2456.739)"
+          />
+          <g
+            transform="matrix(1, 0, 0, 1, 2945.94, 2456.74)"
+            filter="url(#椭圆_54)"
+          >
+            <circle
+              id="椭圆_54-3"
+              data-name="椭圆 54"
+              cx="28.567"
+              cy="28.567"
+              r="28.567"
+              fill="#fff"
+            />
+          </g>
+        </g>
+        <path
+          id="路径_16258"
+          data-name="路径 16258"
+          d="M2991.735,2493.654l1.87,3.78a.53.53,0,0,0,.4.29l4.174.6a.531.531,0,0,1,.3.9l-3.017,2.947a.528.528,0,0,0-.152.47l.717,4.156a.53.53,0,0,1-.769.56l-3.735-1.959a.53.53,0,0,0-.494,0l-3.731,1.966a.531.531,0,0,1-.771-.559l.708-4.157a.53.53,0,0,0-.153-.469l-3.023-2.94a.531.531,0,0,1,.293-.906l4.173-.61a.532.532,0,0,0,.4-.291l1.863-3.784A.531.531,0,0,1,2991.735,2493.654Z"
+          transform="translate(-16.759 -16.169)"
+          fill="#fff"
+        />
+      </g>
+    </svg>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.svg{
+  font-size: 0;
+  width: 100%;
+  height: 100%;
+  svg{
+    width: 100%;
+    height: 100%;
+  }
+}
+#ffff {
+  fill: none;
+  filter: blur(10px);
+  backdrop-filter: blur(10px) brightness(60%) !important;
+}
+.brightness {
+}
+</style>

web/src/config/route.js

@@ -1,5 +1,6 @@
 const Menu = [
-    { text: '数字史馆', belong: 1, link: '/', name: 'home' },
+    { text: '首页', belong: 'none', link: '/', name: 'index' },
+    { text: '数字史馆', belong: 1, link: '/home', name: 'home' },
     { text: '史馆概况', belong: 2, link: '/spirit/:key/:type/:id', name: 'spirit' },
     { text: '精品典藏', belong: 3, link: '/collection', name: 'collection' },
     { text: '交流学习', belong: 4, link: '/dynamic/:key/:type/:id', name: 'dynamic' },
@@ -7,7 +8,7 @@ const Menu = [
 ]
 
 const Detail = [
-    { text: '场景页面', belong: 1, link: '/scene', name: 'scene' },
+    { text: '场景页面', belong: 1, link: '/scene/:id', name: 'scene' },
     { text: '烈士信息', belong: 3, link: '/martyr/:id', name: 'martyr' },
     { text: '烈士祭祀', belong: 3, link: '/sacrifice/:id', name: 'sacrifice' },
     

web/src/pages/index.js

@@ -18,6 +18,9 @@ Vue.use(VueChatScroll);
 Vue.use(vuex)
 
 let router = require('@/router').default
+
+localStorage.setItem('novideo','')
+
 new Vue({
   router,
   store: require('@/store').default,

web/src/pages/scene.js

@@ -2,19 +2,18 @@ import Vue from 'vue'
 import App from './scene.vue'
 import '@/mixins'
 import vuex from 'vuex'
-import VueChatScroll from "vue-chat-scroll";
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
 Vue.use(Viewer,{
   defaultOptions: {
     navbar:false,
     button:false,
+    title:false,
     maxZoomRatio:2,
     zIndex:1000000
   }
 })
 
-Vue.use(VueChatScroll);
 Vue.use(vuex)
 
 new Vue({

web/src/pages/scene.vue

@@ -36,7 +36,6 @@ export default {
 <style lang="less">
 #app {
   text-align: center;
-  color: #2c3e50;
   width: 100%;
   height: 100%;
 }

web/src/views/collection/Collection.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="collection">
+    <h2 class="title">{{itemData.name}}</h2>
     <div class="c-header">
-      <span>单元：</span>
       <ul>
         <li :class="{active:item.id == activeId}" @click="activeId = item.id" v-for="(item,i) in data" :key="i">{{item.name}}</li>
       </ul>
     </div>
-    <div class="d-body" v-if="paging.total>0">
+    <div class="d-body" v-if="itemData.list.length>0">
       <ul>
-        <li class="collectionHover" @click="clickItem(item)" v-for="(item,i) in tableData" :key="i">
+        <li class="collectionHover" @click="clickItem(item)" v-for="(item,i) in itemData.list" :key="i">
           <div>
             <img :src="require(`@/assets/images/wenwu/${item.id}.jpg`)" :alt="item.title">
           </div>
@@ -19,7 +19,6 @@
           </div>
         </li>
       </ul>
-      <Paging class="paging" @changeCurrent="data=>{this.$emit('changeCurrent',data)}" v-if="paging.total>0" :paging="paging" />
     </div>
 
     <div class="norecord" v-else>暂无数据</div>
@@ -27,15 +26,12 @@
 </template>
 
 <script>
-import Paging from '@/components/Paging'
 
 export default {
   props:{
-    tableData:Array,
-    paging:Object
+    itemData:Array,
   },
   components:{
-    Paging
   },
   data(){
     return {
@@ -59,14 +55,13 @@ export default {
     }
     
   },
-  mounted(){
-  },
+  
   watch:{
   
   },
   methods:{
     clickItem(item){
-      this.$emit('clickItem',item)
+      this.$emit('clickItem',{type:this.itemData.id,...item})
       // this.$showBroadcast({
       //   item,
       //   zhuti:this.theme
@@ -80,26 +75,55 @@ export default {
 .collection{
   position: relative;
   margin: 0 auto;
-  width: 100%;
-
+  width: 450px;
+  background: rgba(21, 33, 49, 0.7);
+  text-align: left;
+  padding: 30px 26px;
+  border-top: 8px solid  #338F7B;
+  border-bottom: 8px solid  #338F7B;
+  height: 810px;
+  color: #fff;
+  .title{
+    font-size: 24px;
+    font-weight: bold;
+    position: relative;
+    padding-bottom: 8px;
+    &::before{
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      background: #fff;
+      content: '';
+      width: 48px;
+      height: 1px;
+      display: inline-block;
+    }
+  }
   .c-header{
-    color: #333333;
     display: flex;
     align-items: center;
-    width: 1320px;
-    margin:0 auto;
-    padding: 20px 0;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    margin: 20px 0;
     >ul{
-      display: flex;
+      width: 100%;
+      overflow-x: auto;
+      display: inline-block;
+      white-space: nowrap;
+      position: relative;
+      &::-webkit-scrollbar{
+        height: 0;
+      }
       >li{
-        margin: 0 10px;
-        padding: 10px 20px;
+        margin-right: 25px;
         cursor: pointer;
+        display: inline-block;
+        color: rgba(255, 255, 255, .45);
       }
       .active{
-        background-color: #338F7B;
         color: #fff;
-        border-radius: 20px;
+        font-weight: bold;
       }
     }
   }
@@ -107,20 +131,27 @@ export default {
   .d-body{
     text-align: center;
     position: relative;
-    padding-bottom: 30px;
-    width: 1320px;
+    width: 100%;
+    height: 600px;
     margin: 0 auto;
     overflow-y: auto;
     overflow-x: hidden;
-    height: calc(100vh - 300px);
+    padding: 0 5%;
+    &::-webkit-scrollbar{
+      width: 4px;
+    }
+    &::-webkit-scrollbar-thumb{
+      background: #838EC2;
+      opacity: 0.5;
+      outline:none
+    }
     >ul{
       width: 100%;
-      min-height: 50vh;
       text-align: left;
       >li{
         font-size: 0;
         display: inline-block;
-        width: 310px;
+        width: 100%;
         margin-right: 18px;
         text-align: center;
         margin-bottom: 18px;

web/src/views/collection/data.js

@@ -1,31 +1,46 @@
-let data = {
-  img:{
+let data = [
+  {
+    id:'img',
+    name:'二维图片',
     list:[{
       id:'zyy02',
       name:'图片1'
     },{
       id:'zyy06',
       name:'图片2'
+    },{
+      id:'zyy02',
+      name:'图片1'
     }]
   },
-  model:{
+  {
+    id:'model',
+    name:'三维模型',
     list:[{
       id:'zyy07',
       name:'文物3'
     },{
       id:'zyy10',
       name:'文物4'
+    },{
+      id:'zyy07',
+      name:'文物3'
     }]
   },
-  video:{
+  {
+    id:'video',
+    name:'影音资料',
     list:[{
       id:'zyy17',
       name:'视频1'
     },{
       id:'zyy18',
       name:'视频2'
+    },{
+      id:'zyy17',
+      name:'视频1'
     }]
   },
-}
+]
 
 export {data}

web/src/views/collection/detail.vue

@@ -8,31 +8,31 @@
             :src="`/culturalrelics/BJRMJFJZYY/Model.html?m=${currentItem.id}`"
             frameborder="0"
           ></iframe>
-           <img
-            class="full"
-            :src="require(`@/assets/images/icon/full.png`)"
-            alt=""
-          />
+          <div class="desc">
+            <h2>血压计</h2>
+            <p>牟善初为中央领导保健时使用过的血压计</p>
+          </div>
         </div>
 
         <div class="img" v-else-if="currentItem.type == 'img'">
-          <img
-            :src="require(`@/assets/images/xinjiang/thumb/big.png`)"
-            alt=""
-          />
-          <slide />
-           <img
-              class="full"
-              :src="require(`@/assets/images/icon/full.png`)"
-              alt=""
-            />
+          <div class="pagetion prev">
+            <img :src="require(`@/assets/images/project/prev.png`)" alt=""/>
+          </div>
+          <div class="pagetion next">
+            <img :src="require(`@/assets/images/project/next.png`)" alt=""/>
+          </div>
+          <img v-viewer :src="require(`@/assets/images/xinjiang/thumb/big.png`)" alt=""/>
+          <p>工作日记</p>
         </div>
          <div class="video" v-else-if="currentItem.type == 'video'">
-            <video autoplay controls :src="require(`@/assets/video/test.mp4`)"></video>
+            <video controlslist="nodownload noremoteplayback"
+            disablePictureInPicture
+            controls
+            autoplay :src="require(`@/assets/video/test.mp4`)"></video>
         </div>
    
       </div>
-      <div class="show-info">
+      <!-- <div class="show-info">
         <div class="gezi gezi1"></div>
         <div class="gezi gezi2"></div>
 
@@ -46,16 +46,14 @@
             个旧市黑马井古墓群位于个旧市卡房镇黑马井村西老硐坡顶部。三支铜俑灯灯座主体是一个饰汉代服者，戴帽，头顶一灯，双脚跪地。
           </p>
         </div>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>
 
 <script>
-import slide from "./slide";
 
 export default {
-  components: { slide },
   props: ["currentItem"],
 };
 </script>
@@ -65,8 +63,7 @@ export default {
   position: relative;
   margin: 0 auto;
   width: 100%;
-  color: #666666;
-  height: calc(100vh - 200px);
+  color: #fff;
   display: flex;
   align-items: center;
   .collect-con {
@@ -77,22 +74,36 @@ export default {
     justify-content: center;
     .img-con {
       display: inline-block;
-      width: 50%;
-      max-width: 850px;
-      max-height: 600px;
+      width: 100%;
       position: relative;
       .iframe,.video{
         width: 100%;
-        height: 56vh;
-        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.16);
         font-size: 0;
-          > iframe,>video {
-          width: 100%;
-          height: 100%;
+        > iframe {
+          width: 50%;
+          height: 670px;
+          max-width: 1000px;
+        }
+        >video{
+          width: 50%;
+          max-width: 1000px;
+        }
+        .desc{
+          width: 50%;
+          max-width: 1000px;
+          text-align: left;
+          margin: 20px auto 0;
+          >h2{
+            font-weight: bold;
+            font-size: 24px;
+            margin-bottom: 10px;
+          }
+          >p{
+            font-size: 16px;
+          }
         }
       }
       .video{
-        min-height: 50vh;
         height: auto;
       }
       
@@ -100,14 +111,32 @@ export default {
         width: 100%;
         overflow: hidden;
         position: relative;
+        max-height: 670px;   
+        text-align: center; 
         >img{
-          max-height: 500px;    
-          width: 100%;  
+          width: 50%;
+          height: 100%;
+          max-width: 1000px;
+          cursor: pointer;
+        }
+        >p{
+          width: 50%;
+          margin: 20px auto 0;
+          text-align: left;
+        }
+        .pagetion{
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 70px;
+          cursor: pointer;
+        }
+        .prev{
+          left: 10%;
+        }
+        .next{
+          right: 10%;
         }
-         .full {
-            bottom: 120px;
-            width: 60px;
-          }
       }
       .full {
         position: absolute;

web/src/views/collection/index.vue

@@ -1,45 +1,28 @@
 <template>
   <div class="collection-body">
-    <img
-      class="bg"
-      :src="require('@/assets/images/xinjiang/diwen.png')"
-      alt=""
-    />
-      <ul class="c-header"  :style="{backgroundImage:`url(${require('@/assets/images/banner.jpg')})`}">
-        <li
-          v-for="(item, i) in type"
-          @click="acitve = item.id"
-          :class="{ active: acitve == item.id }"
-          :key="i"
-        >
-          <span>{{ item.name }}</span>
-        </li>
-      </ul>
       <div class="c-body">
         <Collection
+          class="citem"
+          :class="{cacitve:isshow,cout:isout}"
+          :style="{transitionDelay:`${(i)*0.3}s`}"
           v-show="showlist"
-          :tableData="data"
+          :itemData="item"
           @changeCurrent="changeCurrent"
           @clickItem="clickItem"
-          :paging="paging"
+          v-for="(item,i) in data"
+          :key="i"
         />
         <detail :currentItem="currentItem" v-if="!showlist"></detail>
       </div>
-
-      <div class="c-btn" v-if="!showlist">
-        <img @click="back" :src="require(`@/assets/images/icon/c-back.png`)" alt="">
-      </div>
+      <img @click="back" class="close" :class="{closecitve:isshow,closeout:isout}" :src="require('@/assets/images/project/cancel.png')" alt="">
   </div>
 </template>
 
 <script>
 import Collection from "./Collection";
 import detail from "./detail";
-
 import {data} from "./data";
 
-import { getList } from "@/config/api";
-
 let type = [
   {
     name: "二维图片",
@@ -63,6 +46,7 @@ let type = [
     active: "video.jpg",
   },
 ];
+
 export default {
   components: {
     Collection,
@@ -70,7 +54,8 @@ export default {
   },
   data() {
     return {
-      data: data['img'].list,
+      isshow:'',
+      data,
       acitve: "img",
       title: {
         zh: "精品典藏",
@@ -86,17 +71,14 @@ export default {
       },
       searchKey: "",
       showlist: true,
-      currentItem:''
+      currentItem:'',
+      isout:false
     };
   },
   watch: {
     acitve(newVal) {
-      // this.paging.pageNum == 1
-      //   ? this.getCollection()
-      //   : (this.paging.pageNum = 1);
       this.showlist = true
       this.data = data[newVal].list
-
     },
     "paging.pageNum": function(newVal) {
       // console.log(newVal);
@@ -105,11 +87,21 @@ export default {
   },
   mounted() {
     // this.getCollection();
+    setTimeout(() => {
+      this.isshow = true
+    });
   },
   methods: {
     back(){
-      this.showlist = true
-      this.currentItem = ''
+      if (this.showlist) {
+        this.isout = true
+        setTimeout(() => {
+          this.$emit('close')
+        }, 1500);
+      } else{
+        this.showlist = true
+        this.currentItem = ''
+      }
     },
     clickItem(item){
       this.showlist = false
@@ -120,23 +112,7 @@ export default {
     },
     handleSearch(data) {
       this.searchKey = data;
-      this.getCollection();
-    },
-    async getCollection(key = null) {
-      getList(
-        "goods",
-        {
-          pageNum: this.paging.pageNum,
-          pageSize: this.paging.pageSize,
-          type: this.acitve,
-          searchKey: key || this.searchKey,
-        },
-        (result) => {
-          this.data = result.data.list;
-          this.paging.total = result.data.total;
-        }
-      );
-    },
+    }
   },
 };
 </script>
@@ -146,74 +122,45 @@ export default {
   position: relative;
   color: #fff;
   height: 100%;
-  width: calc(100% - 250px);
-  margin-left: 250px;
-  .bg {
+  width: 100%;
+ 
+  .c-body {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    z-index: -1;
-  }
-  .c-header {
-    background: #fff;
-    width: 100%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    z-index: 11;
     display: flex;
+    width: 100%;
     justify-content: center;
-    height: 200px;
-    background-size: cover;
-    background-repeat: no-repeat;
-    align-items: center;
-    > li {
-      cursor: pointer;
-      width: 20%;
-      padding: 0 30px;
-      position: relative;
-      >span{
-        font-size: 20px;
-        color: rgba(255, 255, 255, 0.6);
-      }
-
-      &::after{
-        content: '';
-        display: inline-block;
-        background-color: rgba(255, 255, 255, 0.6);
-        width: 1px;
-        height: 100px;
-        position: absolute;
-        z-index: 9999;
-        top: 50%;
-        right: 0;
-        transform: translateY(-50%) rotate(15deg);
-      }
-
-      &:first-of-type{
-         &::before{
-          content: '';
-          display: inline-block;
-          background-color: rgba(255, 255, 255, 0.6);
-          width: 1px;
-          height: 100px;
-          position: absolute;
-          z-index: 9999;
-          top: 50%;
-          left: 0;
-          transform: translateY(-50%) rotate(15deg);
-        }
-      }
+    .citem{
+      margin: 0 10px;
+      transform: translateX(100vw);
+      transition: transform ease .8s;
     }
-    .active{
-      font-weight: bold;
-       >span{
-        font-size: 20px;
-        color: rgba(255, 255, 255, 1);
-      }
+    .cacitve{
+      transform: translateX(0);
+    }
+    .cout{
+      transform: translateX(-100vw);
     }
   }
-  .c-body {
-    position: relative;
-    z-index: 11;
+
+  .close{
+    position: absolute;
+    top: 40px;
+    right: -250px;
+    width: 54px;
+    height: 54px;
+    cursor: pointer;
+    z-index: 9999999;
+    transition: right .3s 1.2s ease;
+  }
+  .closecitve{
+    right: 50px;
+  }
+  .closeout{
+    right: -250px;
   }
-  
 }
 </style>

web/src/views/home/Carousel.vue

@@ -42,8 +42,8 @@
           <li @click="activetxt = '总医院史馆'">
             <span>总医院史馆</span>
           </li>
-           <li @click="activetxt = '冯里达纪念馆展厅'">
-            <span>冯里达纪念馆展厅</span>
+           <li @click="activetxt = '其他线上史馆'">
+            <span>其他线上史馆</span>
           </li>
         </ul>
       </div>
@@ -55,14 +55,13 @@
 
 <script>
 export default {
-  props: ["data"],
   methods: {
     reInterval() {
       clearInterval(this.interval);
       this.interval = null;
     },
     goto() {
-      this.$router.push({ path: "/scene" });
+      this.$router.push({ name: "scene",params:{id:'1149_2'} });
     },
   },
   data() {

web/src/views/home/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home-page">
-    <Carousel :data="carousel" />
+    <Carousel  />
   </div>
 </template>
 
@@ -22,9 +22,7 @@ export default {
   },
   data() {
     return {
-      carousel: {
-        img:require('@/assets/images/lunbotu.jpg')
-      },
+     
     };
   },
   watch: {

web/src/views/index/data.js

@@ -0,0 +1,22 @@
+let data = [
+  {
+    id:'zongyiyuan',
+    name:'解放军总医院数字史馆',
+    en:'Chinese PLA General Hospital Museum',
+    sceneCode:'1149_2'
+  },
+  {
+    id:'expert',
+    name:'专家风采',
+    en:'Expert Demeanor',
+    sceneCode:'1149_2'
+  },
+  {
+    id:'other',
+    name:'其他展厅',
+    en:'Other Exhibition',
+    sceneCode:'1149_2'
+  }
+]
+
+export {data}

web/src/views/index/index.vue

@@ -0,0 +1,432 @@
+<template>
+  <div class="index">
+    <video ref="bgv" class="bgvideo" loop muted :src="require('@/assets/video/bg.mp4')"></video>
+    <div class="index_con" v-if="isshowall">
+      <div class="i_left" :class="isshow?'animate__animated animate__bounceInDown':''">
+        <div
+          class="i_top primary"
+          :style="{
+            backgroundImage: `url(${require('@/assets/images/project/diwen_logo.jpg')})`,
+          }"
+        >
+          <img :src="require('@/assets/images/logo@2x.png')" alt="" />
+        </div>
+        <div class="i_btm">
+          <ul class="i_navs">
+            <li v-for="(item, i) in navs" :key="i" @click="clickItem(item)">
+              <component :is="item.img" />
+              <span>{{ item.name }}</span>
+            </li>
+          </ul>
+          <div class="rb-top">
+            <Search
+              :placeholder="'请输入...'"
+              @search="
+                (data) => {
+                  $emit('search', data);
+                }
+              "
+              class="search"
+            />
+          </div>
+          <div class="rb-btm">
+            <div>
+              <img :src="require(`@/assets/images/icon/qing.png`)" alt="" />
+              <span>晴天</span>
+            </div>
+            <div class="date primaryTxt" v-html="date"></div>
+          </div>
+        </div>
+      </div>
+      <ul class="shiguan">
+        <li 
+        :class="isshow?`animate__animated animate__bounceInDown animate__delay-${(i+1)*1}s`:'hoverli'"
+         v-for="(item, i) in data" :key="i" @click="handleItem(item)">
+          <div class="gezi gezi1"></div>
+          <div class="gezi gezi2"></div>
+          <img
+            class="bgimg"
+            :src="require(`@/assets/images/project/${item.id}.png`)"
+            alt=""
+          />
+          <div class="s_name">
+            <p>{{ item.en }}</p>
+            <p>{{ item.name }}</p>
+            <img
+              class="enter"
+              :src="require(`@/assets/images/project/enter.png`)"
+              alt=""
+            />
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <video @click="bfshipin" ref="startv" v-if="!novideo" :style="{zIndex:lockUpdate?'-11':'999'}" class="startvideo" :class="!isstart?'animate__animated animate__fadeOut':''"  autoplay muted :src="require('@/assets/video/start.mp4')"></video>
+  </div>
+</template>
+
+<script>
+import { data } from "./data";
+import Search from "@/components/search";
+import chat from "@/components/icon/chat";
+import collection from "@/components/icon/collection";
+import { formatDate } from "@/config/utils.js";
+
+export default {
+  components: { Search, chat, collection },
+  data() {
+    let novideo = localStorage.getItem("novideo");
+
+    return {
+      data,
+      activeIdx: "",
+      date: "",
+      isshowall:false,
+      isshow:false,
+      isstart:true,
+      lockUpdate:false,
+      novideo,
+      navs: [
+        {
+          name: "精品典藏",
+          link: "/collection",
+          id: 3,
+          img: "collection",
+        },
+        {
+          name: "互动留言",
+          link: "/message",
+          id: 5,
+          img: "chat",
+        },
+      ],
+    };
+  },
+  methods: {
+    clickItem(item) {
+      this.$bus.$emit("hovershowType", item.img);
+    },
+    handleItem(item) {
+      this.$router.push({ name: "scene", params: { id: item.sceneCode } });
+    },
+    bfshipin(){
+      this.lockUpdate = true
+      this.isshowall = true
+      this.isshow = true
+      setTimeout(() => {
+        this.isshow = false
+      }, 4000);
+    }
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      if (this.novideo) {
+        this.isshowall = true
+        this.isshow = true
+        setTimeout(() => {
+          this.isshow = false
+        }, 4000);
+      }
+      else{
+        if (this.$refs.startv) {
+          this.$refs.startv.addEventListener("timeupdate", () => {
+            if (parseInt(this.$refs.startv.currentTime) >= 18 && !this.lockUpdate) {
+                this.lockUpdate = true
+              // this.bfshipin()
+                  this.isshow = true
+                  setTimeout(() => {
+                    this.isshow = false
+                  }, 4000);
+            }
+          });
+          this.$refs.startv.addEventListener("ended", () => {
+            localStorage.setItem("novideo", "1");
+            this.$refs.bgv.play()
+            this.isstart = false
+              // this.bfshipin()
+          });
+          this.$refs.startv.addEventListener("canplaythrough", () => {
+            setTimeout(() => {
+              this.isshowall = true
+            }, 2000);
+          });
+        }
+      }
+      
+    })
+    this.date = formatDate(new Date());
+    
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.index {
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-position: center center;
+  position: relative;
+  .bgvideo{
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    z-index: -11;
+  }
+  .startvideo{
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+  }
+
+  .animate__fadeOut{
+    display: none;
+  }
+  .index_con {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    .i_left {
+      width: 340px;
+      .i_top {
+        width: 100%;
+        padding: 60px 40px;
+        background-size: cover;
+        > img {
+          width: 100%;
+        }
+      }
+      .i_btm {
+        width: 100%;
+        background: rgba(0, 0, 0, 0.6);
+        border-radius: 0px;
+        padding: 30px 20px;
+        color: #fff;
+
+        .i_navs {
+          display: flex;
+          justify-content: space-around;
+          > li {
+            color: #fff;
+            cursor: pointer;
+            transition: transform .2s ease-in-out;
+            &:hover{
+              transform: scale(1.06);
+            }
+            > img {
+              display: block;
+              width: 78px;
+            }
+            > span {
+              display: inline-block;
+            }
+          }
+        }
+        .rb-top {
+          margin-top: 40px;
+          .search {
+            width: 100%;
+            margin: 0 auto;
+            border: 0;
+            background-color: rgba(255, 255, 255, 0.2);
+            border-radius: 30px;
+            padding: 13px;
+            /deep/ input {
+              background: none;
+              color: #fff;
+              &::placeholder {
+                color: #fff;
+              }
+            }
+            /deep/ .icon {
+              width: 20px;
+            }
+          }
+        }
+        .rb-btm {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-top: 20px;
+          > div {
+            display: flex;
+            font-size: 16px;
+            align-items: center;
+            > img {
+              width: 18px;
+              margin-top: 3px;
+            }
+          }
+          span {
+            display: inline-block;
+            font-size: 16px;
+            vertical-align: middle;
+            margin-left: 6px;
+          }
+          .date {
+          }
+        }
+      }
+    }
+    .shiguan {
+      display: flex;
+      margin-left: 10px;
+      > li {
+        margin-right: 5px;
+        position: relative;
+        width: 333px;
+        height: 100%;
+        color: #fff;
+        transition: all 0.3s ease;
+        cursor: pointer;
+
+        .gezi1 {
+          position: absolute;
+          width: 100%;
+          top: 0;
+          left: 0;
+          &::before,
+          &::after {
+            content: "";
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            position: absolute;
+          }
+          &::before {
+            border-top: 2px solid rgba(255,255,255,0.5);
+            border-left: 2px solid rgba(255,255,255,0.5);
+            top: 8px;
+            left: 8px;
+          }
+          &::after {
+            border-top: 2px solid rgba(255,255,255,0.5);
+            border-right: 2px solid rgba(255,255,255,0.5);
+            top: 8px;
+            right: 8px;
+          }
+        }
+
+        .gezi2 {
+          bottom: 0;
+          position: absolute;
+          width: 100%;
+          left: 0;
+          &::before,
+          &::after {
+            content: "";
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            position: absolute;
+          }
+          &::before {
+            border-bottom:  2px solid rgba(255,255,255,0.5);
+            border-left:  2px solid rgba(255,255,255,0.5);
+            bottom: 8px;
+            left: 8px;
+          }
+          &::after {
+            border-bottom:  2px solid rgba(255,255,255,0.5);
+            border-right:  2px solid rgba(255,255,255,0.5);
+            bottom: 8px;
+            right: 8px;
+          }
+        }
+        .bgimg {
+          position: absolute;
+          bottom: 0;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 100%;
+        }
+
+        .s_name {
+          position: absolute;
+          top: 50px;
+          left: 50%;
+          transform: translateX(-50%);
+          display: flex;
+          transition: all 0.3s 0.1s ease;
+          > p {
+            writing-mode: vertical-lr;
+            font-size: 26px;
+            text-align: left;
+            font-family: Source Han Serif CN;
+            &:first-of-type {
+              font-weight: lighter;
+              font-size: 17px;
+            }
+            &:last-of-type {
+              margin-left: 4px;
+              letter-spacing: 3px;
+            }
+          }
+          > img {
+            position: absolute;
+            bottom: -40px;
+            left: 50%;
+            transform: translateX(-50%);
+            opacity: 0;
+            transition: all 0.3s 0.1s ease;
+          }
+        }
+        &::before {
+          content: "";
+          z-index: -100;
+          display: inline-block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          transition: all 0.3s 0.2s ease;
+        }
+        &::after {
+          content: "";
+          z-index: -101;
+          display: inline-block;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          background: rgba(0, 0, 0, 0.5);
+        }
+       
+      }
+      .hoverli{
+        &:hover {
+          background: none;
+          transform: translateY(-9%);
+          height: 120%;
+          .s_name {
+            > img {
+              opacity: 1;
+            }
+          }
+          &::after {
+            content: "";
+            background: none;
+          }
+          &::before {
+            content: "";
+            background: linear-gradient(
+              to top,
+              rgba(22, 69, 58, 0.9) 0,
+              rgba(32, 68, 75, 0.9) 100%
+            );
+          }
+        }
+      }
+    }
+  }
+}
+</style>

web/src/views/layout/header.vue

@@ -77,7 +77,7 @@ import Search from "@/components/search";
 const navs = [
   {
     name: "数字史馆",
-    link: "/",
+    link: "/home",
     id: 1,
     img: "1",
   },
@@ -300,9 +300,13 @@ export default {
         display: flex;
         align-items: center;
         font-size: 14px;
+        >img{
+          width: 16px;
+        }
       }
       span{
         display: inline-block;
+        margin-left: 4px;
         font-size: 14px;
         vertical-align: middle;
       }

web/src/views/layout/index.vue

@@ -1,62 +1,47 @@
 <template>
   <div class="bodycon" @keydown="handleKD">
-    <mheader :class="{hacitve:$route.name=='scene'}"/>
     <router-view class="route-view"/>
-    <maskCon @clickMask="closeLogin" v-if="showLogin">
-      <div @mousedown.stop class="con" slot="con">
-        <p class="title">欢迎登录</p>
-        <div class="linput">
-          <input type="text" v-model="userName" placeholder="身份码" />
-        </div>
-        <div class="linput">
-          <input type="password" @keyup.enter="login" v-model="password" placeholder="密码" />
-        </div>
-        <p class="sub">
-          <span @click="$router.push({ path: '/register' })">注册账号</span>
-          <span @click="$router.push({ path: '/forget' })">忘记密码</span>
-        </p>
-        <div class="button primarybtn" @click="login">登录</div>
-      </div>
-    </maskCon>
-    <!-- <mfooter v-if="$route.name!='home'&&$route.meta.id!=3"/> -->
+    <div class="hovercon" :class="{hovershow:showType,brightness:showType}">
+      <template v-if="showType">
+        <collection v-if="showType=='collection'" @close="close"/>
+        <message v-else @close="close"/>
+      </template>
+    </div>
   </div>
 </template>
 
 <script>
-import mheader from "./header";
-import mfooter from "./footer";
-import maskCon from "./mask-con/index";
 import { login } from "@/config/api";
 import { encodeStr } from '@/config/utils'
 import { Base64 } from 'js-base64'
+import collection from "@/views/collection";
+import message from "@/views/message";
 
 export default {
   components: {
-    mheader,
-    mfooter,
-    maskCon,
+    collection,
+    message
   },
   data() {
     return {
-      showLogin: false,
       userName: "",
       password: "",
+      showType: ''
     };
   },
   watch: {
-    "$route.path": function() {
-      this.$bus.$emit("showLogin", false);
-    },
+    
   },
   methods: {
+    close(){
+      this.showType = ''
+    },
     handleKD(e){
       if(this.$route.name!='scene'){
         e.stopPropagation()
       }
     },
-    closeLogin() {
-      this.$bus.$emit("showLogin", false);
-    },
+  
     async login() {
       let data = {
         userName: this.userName,
@@ -80,9 +65,9 @@ export default {
     },
   },
   mounted() {
-    this.$bus.$on("showLogin", (data) => {
-      this.showLogin = data;
-    });
+    this.$bus.$on('hovershowType',(data)=>{
+      this.showType = data
+    })
   },
 };
 </script>
@@ -92,60 +77,20 @@ export default {
   width: 100%;
   height: 100%;
   overflow: hidden;
-}
-
-
-.hacitve{
-  transition: transform .3s .5s ease;
-  transform: translateX(-800px);
-}
-.route-view{
-  height: 100%;
-  overflow: hidden;
-}
-.canscroll{
-  padding-bottom: 0;
-  overflow: auto;
-}
-.con {
-  margin-top: 100px;
-  color: #000;
-  position: absolute;
-  right: 30px;
-  top: 0;
-  width: 310px;
-  background-color: rgba(255, 255, 255, 0.8);
-  padding: 30px 20px;
-  .title {
-    font-size: 20px;
-  }
-  .linput {
-    height: 42px;
-    background-color: #fff;
-    border-radius: 4px;
-    margin-top: 40px;
+  .hovercon{
+    position: fixed;
+    top: 0;
+    left: 0;
     width: 100%;
-    padding-left: 20px;
-    > input {
-      border: none;
-      background: none;
-      line-height: 42px;
-      height: 42px;
-      width: 100%;
-    }
+    height: 100%;
+    transition: .3s ease all;
+    pointer-events: none;
+    background: rgba(0, 0, 0, .0);
   }
-  .sub {
-    text-align: right;
-    font-size: 14px;
-    margin-top: 10px;
-    > span {
-      margin-left: 30px;
-      cursor: pointer;
-    }
-  }
-  .button {
-    margin-top: 30px;
-    width: 100%;
+  .hovershow{
+    background: rgba(0, 0, 0, .3);
+    pointer-events: auto;
   }
 }
+
 </style>

web/src/views/message/Message.vue

@@ -1,228 +1,239 @@
 <template>
   <div class="message-body">
+    <div class="title">
+      <span>留言板</span>
+    </div>
     <div class="message">
-        <div class="con">
-          <ul class="form">
-            <li>
-              <div class="input">
-                <textarea placeholder="请留下你的留言" maxlength='250' v-model="msg" rows="4" cols="80">
-                </textarea>
-                <span>{{msg.length}}/250</span>
-              </div>
-            </li>
-          </ul>
-          <div>
-            <input placeholder="请输入昵称" type="text">
-            <div class="button primarybtn" @click="leaveMsg('','')">
-              提交
+      <div class="con brightnessW">
+
+        <ul>
+          <li v-for="(item, i) in 10" :key="i">
+            <img
+              :src="require(`@/assets/images/icon/usericon.png`)"
+              alt=""
+            />
+            <div>
+              <p>匿名</p>
+              <p>很不错。很丰富很全面</p>
             </div>
-          </div>
-        </div>
-        <img class="v-line" :src="require(`@/assets/images/icon/line-msg.png`)" alt="">
-        <div class="leaving">
-          <ul class="content">
-            <li v-for="(item,i) in message" :key="i">
-              <div class="info">
-                <p><span>网友留言：</span><span>{{item.msg}}</span></p>
-                <p><span>留言回复：</span><span>{{item.res}}</span></p>
-              </div>
-              <div class="date">
-                2021-12-13
-              </div>
-            </li>
-          </ul>
+            <p>2021.12.12</p>
+
+          </li>
+        </ul>
+
+        <Paging class="paging" v-if="paging.total>0" :paging="paging" />
+        
+        <span class="totalmsg">共45条留言</span>
+      </div>
+
+      <div class="vtextarea brightnessW">
+        <textarea v-model="msg" rows="5" maxlength="100" cols="20" placeholder="请输入留言......"></textarea>
+        <emoji class="emoji" @select="selectEmoji" :type="0" id="biaoqing1"/>
+        <span class="maxlength">{{ msg.length }}/100</span>
+      </div>
+
+      <div class="submitcon">
+        <ul>
+          <li :class="{active:item.id == activetype}" @click="activetype=item.id" v-for="(item,i) in types" :key="i">
+            <span></span>
+            <span class="name">{{item.name}}</span>
+          </li>
+        </ul>
+
+        <div class="ipp brightnessW">
+          <input type="text" >
         </div>
-        <div v-if="!loadAll" class="loadmore" @click="loadmore"><span class="borderThemeStyle primaryColor">加载更多</span></div>
+        <div class="btnww">提交</div>
       </div>
+  
+    </div>
+    <img @click="$emit('close')" class="close" :src="require('@/assets/images/close.png')" alt="">
   </div>
 </template>
 
 <script>
-import { getMsg,saveMsg } from "@/config/api";
+import { saveMsg } from "@/config/api";
+import emoji from "@/components/emoji";
+import Paging from '@/components/Paging'
 
 export default {
+  components:{emoji,Paging},
   data() {
     return {
-      msg:'',
-      message:[{
-        msg:'藏品一栏，那个“法书”是不是应该为“书法”',
-        res:'法书不同于书法。法书是对古代名家墨迹的尊称，包含着书法作品之楷模的意思。'
-      },{
-        msg:'网友留言：你好，现在还能寄存行李吗？',
-        res:'残疾人预约观展不便 最近故宫举办有关敦煌的展览，残疾人凭本人残疾证可以免费进故宫参观，可是在商务系统预约敦煌展时提示必须购买门票才可以预约，残疾人怎么办呢，为了参观必须去买门票。。'
+      types:[{
+        name:'匿名发表',
+        id:'none'
       },{
-        msg:'藏品一栏，那个“法书”是不是应该为“书法”',
-        res:'法书不同于书法。法书是对古代名家墨迹的尊称，包含着书法作品之楷模的意思。'
-      },{
-        msg:'网友留言：你好，现在还能寄存行李吗？',
-        res:'残疾人预约观展不便 最近故宫举办有关敦煌的展览，残疾人凭本人残疾证可以免费进故宫参观，可是在商务系统预约敦煌展时提示必须购买门票才可以预约，残疾人怎么办呢，为了参观必须去买门票。。'
+        name:'您的昵称',
+        id:'nickname'
       }],
-      select: "nickName",
-      mtotal: 0,
-      mpageSize: 6,
-      mcurrentPage: 1,
-      loadAll:false
+      activetype:'none',
+      msg: "",
+      message: [],
+      loadAll: false,
+      paging: {
+        pageSize: 12,
+        pageNum: 1,
+        total: 118,
+        showSize: 2,
+        current: 1,
+      },
     };
   },
-  watch:{
-    mpageSize(){
-      this.getMessage()
-    }
+  watch: {
+    mpageSize() {
+    },
   },
-  mounted(){
-    // this.getMessage()
+  mounted() {
   },
-  methods:{
-    tologin(){
-      window.scrollTo(0,0)
-      this.$bus.$emit('showLogin',true)
+  methods: {
+    selectEmoji(data){
+      this.msg += data
     },
-    loadmore(){
-      // this.mpageSize += this.mpageSize
-      this.message = this.message.concat(this.message)
+    tologin() {
+      window.scrollTo(0, 0);
+      this.$bus.$emit("showLogin", true);
     },
-    async leaveMsg(item='',i=''){
-      let tmp = (item ? item.comment : this.msg).trim()
+    loadmore() {
+      this.mpageSize += this.mpageSize;
+    },
+    async leaveMsg(item = "", i = "") {
+      let tmp = (item ? item.comment : this.msg).trim();
       if (!tmp) {
-        return alert('留言不能为空')
+        return alert("留言不能为空");
       }
-      this.msg = ''
-      alert('留言成功')
+      saveMsg(
+        "comment",
+        {
+          content: tmp,
+          parentId: item.id || "",
+          isRealName: Number(this.select == "realName"),
+        },
+        (res) => {
+          if (res.code == 0) {
+            this.msg = "";
+            alert("留言成功");
+            item && this.showComment(item, i);
+            this.getMessage();
+          }
+        }
+      );
     },
-    showComment(item,i){
-      item.showComment = !item.showComment
-      item.comment = ''
-      this.$set(this.message,i,item)
+    showComment(item, i) {
+      item.showComment = !item.showComment;
+      item.comment = "";
+      this.$set(this.message, i, item);
     },
-    async getMessage(){
-      if (this.loadAll) return
-      getMsg({
-        pageNum: this.mcurrentPage,
-        pageSize: this.mpageSize,
-      },result=>{
-        result.data.list.forEach(item=>{
-          item.showComment = false
-          item.comment = ''
-        })
-        if (result.data.list.length==this.message.length) {
-          this.loadAll = true
-        }
-        this.message = result.data.list
-        this.mtotal= result.data.total
-      })
-      
-    }
-  }
+ 
+  },
 };
 </script>
 
 <style lang="less" scoped>
 .message-body {
-  max-width: 1300px;
+  width: 1120px;
   margin: 0 auto;
-  position: relative;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
   z-index: 99;
-  .message{
-    .con{
+  background: rgba(21, 33, 49, 0.5);
+  color: #fff;
+  padding: 30px 70px;
+  border-top: 8px solid  #338F7B;
+  border-bottom: 8px solid  #338F7B;
+  .title {
+    margin: 0 auto 37px;
+    position: relative;
+    > span {
+      display: inline-block;
+      height: 30px;
+      font-size: 30px;
+      font-weight: bold;
+      line-height: 38px;
+    }
+  }
+  .message {
+    height: 100%;
+
+    .con {
       width: 100%;
-      padding: 30px 100px;
-      .form{
-        text-align: left;
-        width: 100%;
-        >li{
-          margin-bottom: 30px;
+      height: 397px;
+      position: relative;
+      box-sizing: content-box;
+   
+      > ul {
+        height: calc(100% - 60px);
+        overflow-y: auto;
+        margin-top: 20px;
+        padding: 0 20px 20px;
+        > li {
           display: flex;
-          width: 100%;
-          align-items: flex-start;
-          > span{
-            display: inline-block;
-            width: 100px;
-            flex-shrink: 0;
-            font-size: 20px;
-            margin-right: 10px;
-            text-align: right;
+          justify-content: space-between;
+          border-bottom: 1px dashed #CFC5C5;
+          padding: 14px 0;
+          @wh: 50px;
+          &:last-of-type {
+            border-bottom: none;
           }
-          .name{
-            .radio{
-               &::before{
-                border: 1px solid #707070;
-                content: '';
-              }
-              margin-right: 50px;
-            }
+          > img {
+            width: @wh;
+            height: @wh;
+            flex-shrink: 0;
+            border-radius: 50%;
           }
-          .input{
-            flex: auto;
-            width: 100%;
-            position: relative;
-            font-size: 0;
-            color : #999999;
-            >textarea{
-              width: 100%;
-              line-height: 2;
-              font-size: 16px;
-              &::placeholder{
-                color : #999999;
+          > div {
+            text-align: left;
+            flex: 10;
+            margin-left: 20px;
+            > p {
+              &:first-of-type {
+                font-size: 24px;
+                color: #CFCFCF;
+                margin-bottom: 10px;
               }
-            }
-            >span{
-              display: inline-block;
-              color: rgba(153, 153, 153, 1);
-              position: absolute;
-              font-size: 12px;
-              bottom: 5px;
-              right: 14px;
-            }
-            .loginwarn{
-              left: 50%;
-              right: auto;
-              transform: translateX(-50%);
-              background-color: rgba(51, 51, 51, 0.5);
-              color: #fff;
-              display: flex;
-              align-items: center;
-              bottom: 10px;
-              padding: 4px;
-              border-radius: 2px;
-              >img{
-                width: 20px;
-                margin-right: 4px;
+              &:last-of-type {
+                font-size: 14px;
               }
             }
           }
+          > p {
+            font-size: 14px;
+            margin-top: 10px;
+            color: #D6D6D6;
+            flex-shrink: 0;
+          }
         }
       }
-      >div{
+
+      .paging{
+        margin-top: 10px;
+      }
+      .totalmsg{
+        position: absolute;
+        bottom: 20px;
+        right: 20px;
+      }
+      > div {
         display: flex;
-        justify-content: space-between;
+        justify-content: center;
         align-items: center;
-        >input{
-          flex: 7;
-          line-height: 42px;
-          height: 42px;
-          background: none;
-          border: 1px solid #999;
-          padding-left: 10px;
-           &::placeholder{
-                color : #999999;
-              }
-        }
-        
-        .button{
+
+        .button {
           position: relative;
-          flex: 1;
           width: 150px;
-          margin-left: 50px;
-          border-radius: 0px;
-          >span{
+          &:first-of-type {
+            margin-right: 50px;
+          }
+          > span {
             position: absolute;
             left: -220px;
             top: 50%;
             transform: translateY(-50%);
-            color: rgba(153, 153, 153, 1);
             display: flex;
             align-items: center;
-            >img{
+            > img {
               width: 24px;
               height: 24px;
               margin-right: 8px;
@@ -231,54 +242,121 @@ export default {
         }
       }
     }
-
-    .v-line{
-      margin: 60px 0;
-    }
-    .leaving{
-      margin-top: 40px;
-      .content{
-        text-align: left;
+    .vtextarea{
+        width: 100%;
+        margin: 20px auto 0;
+        position: relative;
+        >textarea{
+          background: none;
+          outline:none;
+          width: 100%;
+          color: #fff;
+          border: none;
+          padding:10px 20px;
+          &::placeholder{
+            color: #FFF6F6;
+          }
+        }
+        .emoji{
+          position: absolute;
+          bottom: 0;
+          left: 18px;
+        }
+        .maxlength{
+          position: absolute;
+          bottom: 10px;
+          right: 18px;
+        }
+      }
+      
+    .submitcon{
+      margin-top: 30px;
+      display: flex;
+      align-items: center;
+      position: relative;
+      >ul{
+        display: flex;
+        align-items: center;
         >li{
-          margin-bottom: 10px;
           display: flex;
-          justify-content: space-between;
-          margin-bottom: 20px;
-          .info{
-            flex: 6;
-            >p{
-              display: flex;
-              text-align: left;
-              justify-content: flex-start;
-              margin-bottom: 10px;
-              >span{
-                line-height: 1.5;
-                font-size: 18px;
-                color: #999;
-                &:first-of-type{
-                  width: 100px;
+          margin-right: 20px;
+          align-items: center;
+          cursor: pointer;
+          >span{
+            display: inline-block;
+            &:first-of-type{
+              position: relative;
+              border-radius: 50%;
+              width: 30px;
+              height: 30px;
+              border: 1px solid #EBEBEB;
+              border-radius: 50%;
+            }
+            &:last-of-type{
+              margin-left: 10px;
+            }
+          }
+          &.active{
+           >span{
+              &:first-of-type{
+                &::before{
+                  width: 20px;
+                  height: 20px;
                   display: inline-block;
-                  flex-shrink: 0;
-                  color: #333;
-                  font-weight: bold;
+                  content: '';
+                  border-radius: 50%;
+                  background: #939BD2;
+                  position: absolute;
+                  top: 50%;
+                  left: 50%;
+                  transform: translate(-50%,-50%);
                 }
-              }
             }
-          }
-          .date{
-            flex: 1;
-            text-align: right;
+           }
           }
         }
       }
-    }
-    .loadmore{
-      margin-top: 40px;
-      .borderThemeStyle{
+      .ipp{
+        width: 280px;
         display: inline-block;
-        padding: 10px 50px;
+        position: relative;
+        border-radius: 5px;
+        height: 30px;
+        line-height: 30px;
+        text-align: left;
+        padding: 0 6px;
+        >input{
+          background: none;
+          border: none;
+          user-select: none;
+          height: 30px;
+          width: 100%;
+          color: #fff;
+          position: relative;
+        }
+      }
+      .btnww{
+        width: 106px;
+        height: 35px;
+        line-height: 35px;
+        background: #338F7B;
+        text-align: center;
+        border-radius: 0px;
+        position: absolute;
+        right: 0;
+        color: #fff;
+        cursor: pointer;
       }
     }
   }
+  .close{
+    position: absolute;
+    top: 40px;
+    right: 50px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    z-index: 9999999;
+  }
 }
 </style>

web/src/views/message/index.vue

@@ -1,18 +1,6 @@
 <template>
-  <div class="msg-con"  ref="mlist">
-    <div
-      class="msg"
-      :style="{
-        backgroundImage: `url(${require('@/assets/images/xinjiang/diwen.png')})`,
-      }"
-    >
-      <h1 class="primaryColor">互动留言</h1>
-      <p class="tdesc">欢迎广大观众朋友对我院工作提出宝贵的意见和建议</p>
-      <Message />
-    </div>
-     <div class="c-btn">
-      <img  @click="totop" :src="require(`@/assets/images/icon/c-top.png`)" alt="">
-    </div>
+  <div class="msg-con" :class="{msgshow:isshow}">
+      <Message @close="close"/>
   </div>
 </template>
 
@@ -23,12 +11,23 @@ export default {
   components: {
     Message,
   },
+  data(){
+    return {
+      isshow:false
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.isshow = true
+    });
+  },
   methods:{
-    totop(){
-      this.$refs.mlist.scrollTo({
-        top:0,
-        behavior:'smooth'
-      })
+    close(){
+      this.isshow = false
+      setTimeout(() => {
+        this.$emit('close')
+      }, 300);
+   
     }
   }
 };
@@ -36,24 +35,15 @@ export default {
 
 <style lang="less" scoped>
 .msg-con {
-  overflow-y: auto;
-  overflow-x: hidden;
+  position: relative;
+  color: #fff;
   height: 100%;
-  width: calc(100% - 250px);
-  margin-left: 250px;
-  .msg {
-    background-size: 100% auto;
-    padding-bottom: 80px;
-    position: relative;
-    min-height: 89vh;
-    > h1 {
-      font-weight: bold;
-      font-size: 30px;
-      padding: 80px 0 40px;
-    }
-    .tdesc {
-      color: #999999;
-    }
-  }
+  width: 100%;
+  opacity: 0;
+  transition: opacity .3s ease;
+}
+
+.msgshow{
+  opacity: 1;
 }
 </style>

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

@@ -189,8 +189,6 @@
         </div>
         <div class="bgandshare">
           <div class="ui-icon wide">
-              <img @click="handleItem({id:'renqi'})" :src="require('@/assets/images/icon/bigscene/renqi.png')" />
-              <img @click="handleItem({id:'comment'})" :src="require('@/assets/images/icon/bigscene/liuyanban.png')" />
               <img :src="require('@/assets/images/icon/bigscene/musicon.png')" />
           </div>
         </div>
@@ -277,8 +275,8 @@ export default {
 </script>
 
 <style lang="less" scoped>
-@wh: 70px;
-@margin: 10px;
+@wh: 54px;
+@margin: 0px;
 #play,
 #pause {
   margin-right: @margin;
@@ -310,18 +308,19 @@ export default {
 }
 
 .gui-floor{
-  width: 48px!important;
-  height: 48px!important;
+  width: 50px!important;
+  height: 50px!important;
   border-radius: 50%;
   margin-right: 20px;
-  margin-bottom: 6px;
+  margin-bottom: 3px;
   position: relative;
-  background: linear-gradient(212deg, #D9D9D9 0%, #878787 100%);
+  
+background: linear-gradient(214deg, #338F7B 0%, #143E3A 100%);
   &::before{
     content: '';
-    width: 116%;
-    height: 116%;
-    background: linear-gradient(224deg, #D9D9D9 0%, #707070 100%);
+    width: 110%;
+    height: 110%;
+    background: linear-gradient(45deg, #338F7B 0%, #143E3A 100%);
     border-radius: 50%;
     position: absolute;
     z-index: -1;
@@ -341,11 +340,9 @@ export default {
   align-items: center;
   > div {
     background: none !important;
-    width: @wh * 0.8!important;
     cursor: pointer;
     img {
-      width: 100%;
-      margin-top: 20px;
+      width: @wh!important;
     }
   }
 }

web/src/views/scene/index.vue

@@ -1,20 +1,61 @@
 <template>
   <div class="scene-body">
-    <iframe ref="ifr" src="scene.html" allowfullscreen="true" frameborder="0"></iframe>
-    <img class="home" @click="$router.push({path:'/'})" :src="require(`@/assets/images/icon/bigscene/home.png`)" alt="">
+    <iframe ref="ifr" :src="`scene.html?m=${sceneCode}`" allowfullscreen="true" frameborder="0"></iframe>
+    <div class="back">
+      <span @click="$router.push({path:'/'})">
+        <img :src="require(`@/assets/images/jiantou.png`)" alt="">
+        返回</span>
+      <div class="line"></div>
+      <div class="view">
+        <p>解放军总医院数字史馆</p>
+        <div>
+          <img :src="require(`@/assets/images/project/renqi@2x.png`)" alt="">
+          <span>721443</span>
+        </div>
+      </div>
+    </div>
+
+    <div class="home">
+      <ul class="i_navs">
+        <li v-for="(item, i) in navs" :key="i" @click="clickItem(item)">
+          <component :is="item.img" />
+        </li>
+      </ul>
+    </div>
   </div>
 </template>
 
 <script>
+import chat from "@/components/icon/chat";
+import collection from "@/components/icon/collection";
+
 export default {
-  watch:{
-    theme(newVal){
-      this.$refs.ifr.contentWindow.postMessage({
-          source: "changeTheme",
-          data:newVal,
-      },'*')
+  components: { chat, collection },
+  data(){
+    return {
+      sceneCode:this.$route.params.id,
+      navs: [
+        {
+          name: "互动留言",
+          link: "/message",
+          id: 5,
+          img: "chat",
+        },
+        {
+          name: "精品典藏",
+          link: "/collection",
+          id: 3,
+          img: "collection",
+        },
+      ],
+    }
+  },
+  methods:{
+    clickItem(item) {
+      this.$bus.$emit("hovershowType", item.img);
     }
   }
+  
 }
 </script>
 
@@ -30,13 +71,68 @@ export default {
       height: 100%;
     }
 }
+.back{
+  position: fixed;
+  left: 30px;
+  top: 30px;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  >span{
+    display: inline-block;
+    width: 80px;
+    height: 42px;
+    line-height: 42px;
+    background: linear-gradient(360deg, rgba(0, 0, 0, 0.36) 0%, rgba(0, 0, 0, 0.21) 100%);
+    border-radius: 26px;
+    padding-left: 4px;
+    cursor: pointer;
+    position: relative;
+    >img{
+      width: 8px;
+      position: absolute;
+      top: 52%;
+      transform: translateY(-50%);
+      left: 10px;
+    }
+  }
+  .line{
+    display: inline-block;
+    width: 2px;
+    height: 43px;
+    background: radial-gradient(circle, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
+    border-radius: 0px;
+    margin-left: 30px;
+    margin-right: 20px;
+  }
+  .view{
+    text-align: left;
+    >div{
+      >img{
+        width: 21px;
+        margin-top: 14px;
+        margin-right: 10px;
+      }
+    }
+  }
+}
 .home{
   position: fixed;
   left: 30px;
-  top: 50%;
+  top: 30%;
   transform: translateY(-50%);
   z-index: 999;
   cursor: pointer;
   width: 70px;
+  >ul{
+    >li{
+      background: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      margin: 20px 0;
+      padding: 10px;
+      width: 72px;
+      height: 72px;
+    }
+  }
 }
 </style>

web/vue.config.js

@@ -35,4 +35,5 @@ function getLessVariables(file) {
       variables[key] = value
   })
   return variables
-}
+}
+