0207

package.json

@@ -8,6 +8,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@wujing/danmaku": "^0.1.9",
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-router": "^3.2.0"

public/CAD/static/data/799/style.json

@@ -0,0 +1,9 @@
+{
+  "line": {
+    "color": "#fff",
+    "width": 0.1
+  },
+  "sign": {
+    "color": "#BC1915"
+  }
+}

public/index.html

@@ -51,8 +51,8 @@
     <script src="<%= VUE_APP_STATIC_DIR %>/js/manage.js"></script>
     <script src="<%= VUE_APP_STATIC_DIR %>/js/overlay.js"></script>
     <script src="<%= VUE_APP_STATIC_DIR %>/js/main_2020_show.js"></script>
-    <!-- <script src="/CAD/bundle.js"></script>
-    <script src="/CAD/loadCAD.js"></script> -->
+    <script src="<%= VUE_APP_STATIC_DIR %>/js/CAD/bundle.js"></script>
+    <script src="<%= VUE_APP_STATIC_DIR %>/js/CAD/loadCAD.js"></script>
 <script>
 // var m = getQueryStringArgs().m
 // grentCAD('/CAD/static/data/'+ m +'/floor.json')

public/static/js/CAD/loadCAD.js

@@ -0,0 +1,162 @@
+{
+  let $layer = document.createElement('div')
+  let $cad = document.createElement('div')
+
+  $layer.className = 'cad'
+  $cad.id = 'cad'
+  $layer.appendChild($cad)
+
+  document.documentElement.appendChild($layer)
+
+  let style = document.createElement('style')
+  style.innerHTML = `
+    .cad {
+      position: absolute;
+      right: 80px;
+      top: 16px;
+      width: 200px;
+      height: 200px;
+      background: rgba(0, 0, 0, .3);
+      border-radius: 5px;
+      display: none;
+    }
+
+    .cad > div {
+      width: 100%;
+      height: 100%;
+    }
+
+    @media only screen and (max-width: 600px) { 
+      .cad {
+          position: absolute;
+          left: 16px;
+          top: 65px;
+          width: 100px;
+          height: 100px;
+          background: rgba(0, 0, 0, .3);
+          border-radius: 5px;
+      }
+    }
+  `
+
+  //解析查询字符串
+  function getQueryStringArgs() {
+    //取得查询字符串，并去掉开头'?'
+    var qs = location.search.length ? location.search.substring(1) : '';
+    //保存数据的对象
+    var args = {},
+      //以分割符'&'分割字符串，并以数组形式返回
+      items = qs.length ? qs.split('&') : [],
+      item = null,
+      name = null,
+      value = null,
+      i = 0,
+      len = items.length;
+    //逐个将每一项添加到args对象中
+    for (; i < len; i++) {
+      item = items[i].split('=');
+      //解码操作，因为查询字符串经过编码的
+      name = decodeURIComponent(item[0]);
+      value = decodeURIComponent(item[1]);
+      value = item[1];
+      if (name.length) {
+        args[name] = value;
+      }
+    }
+    return args;
+  }
+
+  function getData(url, cb) {
+    $.ajax({
+      method: 'GET',
+      url: url,
+      success(data) {
+        cb(null, data)
+      },
+      error(e) {
+        cb(e)
+      }
+    })
+  }
+
+  let code = getQueryStringArgs().m
+  let data, styleArg
+
+  getData('/CAD/static/data/'+ code +'/floor.json', (err, args) => {
+    if (!err) {
+      data = args
+      grentCAD()
+    }
+  })
+  getData('/CAD/static/data/'+ code +'/style.json', (err, args) => {
+    if (err) {
+      styleArg = {
+        line: {
+          color: '#fff',
+          width: 1
+        },
+        sign: {
+          color: 'rgb(0, 200, 175)'
+        }
+      }
+    } else {
+      styleArg = args
+    }
+    grentCAD()
+  })
+
+  
+  let point, dire
+
+  window.cad = {
+    setSign: function(p, d) {
+      point = p
+      dire = d
+    }
+  }
+  
+
+  function grentCAD() {
+    if (!(data && styleArg)) return;
+
+
+    $layer.style.display = 'none'
+    window.cad = structureCAD({
+      data: {
+          block: [],
+          column: [],
+          door: [],
+          hole: [],
+          segment: [],
+          "vertex-xy": [],
+          "vertex-z": [],
+      }, 
+      layer: $cad,
+      edit: false
+    });
+    
+    cad.setDefaultPointStyle({
+      fillColor: "rgba(0,0,0,0)",
+      storkeColor: "rgba(0,0,0,0)"
+    });
+
+    cad.setDefaultLineStyle({
+      width: styleArg.line.width,
+      color: styleArg.line.color
+    });
+
+    cad.setDefaultSignStyle({
+      color: styleArg.sign.color
+    })
+
+
+    cad.hideDire()
+    cad.hideGauge()
+
+    cad.loadData(data);
+    if (point && dire) {
+      window.cad.setSign(point, dire)
+    }
+    $layer.style.display = 'block'
+  }
+}

public/static/js/main_2020_show.js

@@ -22050,7 +22050,7 @@ window.Modernizr = function(n, e, t) {
                         this.controlVideosPlay()
                     } */
 
-
+                    this.mode == "panorama" && cad.setSign({ x: this.position.x, y: this.position.z },this.cameraControls.controls.panorama.lon);
                     this.model.supportsTiles && (this.updateTileDownloader(t),
                     this.updatePanoRenderer(t)),
                     this.updatePreRendering(t),

src/assets/style/public.less

@@ -71,4 +71,23 @@ input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
 }
 input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
   color:#fff;
+}
+
+.cad{
+  position: fixed;
+  right: 10px;
+  top: 130px;
+  width: 280px;
+  height: 150px;
+  z-index: 999;
+  transition: 0.3s ease all;
+  #cad{
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.no-record{
+  text-align: center;
+  margin: 28vh auto;
 }

src/components/collection.vue

@@ -1,32 +1,39 @@
 <template>
   <ul class="con">
-    <li  class="item" v-for="(item,i) in 8"  @click="handleClick(item)" :key="i">
+    <li class="item" v-for="(item,i) in list"  @click="handleClick(item)" :key="i">
       <div class="card-img">
-        <img class="full" :src="item.thumb||require('@/assets/images/myModel.jpg')" alt="" />
-        <img class="real" :src="item.thumb||require('@/assets/images/myModel.jpg')" alt="" />
+        <img class="full" :src="item.imgstr||require('@/assets/images/myModel.jpg')" alt="" />
+        <img class="real" :src="item.imgstr||require('@/assets/images/myModel.jpg')" alt="" />
       </div>
       <div class="card-txt">
         <div class="title">
           <span :title="item.name">{{ item.name||'名字' }}</span>
         </div>
-        <div class="tag">
-          <span :title="item.material">{{ item.material }}</span>
-        </div>
       </div>
     </li>
+    <div v-if="list.length<=0" class="no-record">
+      暂无数据
+    </div>
   </ul>
 </template>
 
 
 <script>
 export default {
-  props: ["item"],
+  props: ["data"],
   data() {
-    return {};
+    return {
+    };
+  },
+  computed:{
+    list(){
+      return this.data
+    }
   },
   methods:{
     handleClick(item){
-      this.$emit('handleItem',item)
+      this.$showBroadcast({item})
+      this.$emit('toggle',false)
     }
   }
 };
@@ -53,8 +60,9 @@ export default {
     position: relative;
     max-height: 190px;
     overflow: hidden;
+    background: linear-gradient(180deg, #AAAAAA 0%, #D1D1D1 100%);
     img {
-      width: 100%;
+      height: 100%;
     }
     .full {
       opacity: 0;
@@ -92,13 +100,16 @@ export default {
 
 @media screen and (min-width: 500px) and (max-width: 1400px) {
   .item {
-    width: calc((100% - @margin * 3) / 3);
+    width: calc((100% - @margin * 2) / 3);
     &:nth-of-type(3n) {
       margin-right: 0;
     }
     &:nth-of-type(4n){
       margin-right: @margin;
     }
+    .card-img{
+      max-height: 150px;
+    }
   }
 }
 

src/components/exhibition/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="palte" :class="{daolanactive:isShow}">
+    <div class="p-title">
+      <img :src="require('@/assets/images/icon/location.png')">
+      <span>{{current.name}}</span>
+    </div>
+    <div class="cad-con"></div>
+    <ul class="exhi-list">
+      <li @click="handleItem(item)" v-for="(item,i) in list" :key="i">
+        {{item.name}}
+      </li>
+    </ul>
+    <div class="daolan" @click="isShow = !isShow ">
+      <img :src="require('@/assets/images/icon/daolan.png')">
+      <span>{{isShow?'收起':'展开'}}导览</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data(){
+    return{
+      isShow:true,
+      list:[
+        {
+          id:1,
+          name:'第一展区  序厅',
+          pano:"a07c10e319da4914b24158a4baabe748"
+        },
+        {
+          id:2,
+          name:'第二展区  历史沿革厅',
+          pano:"22fa6c2e5ed14c14b7f287a0a70b33ae"
+        },
+        {
+          id:3,
+          name:'第三展区  亲切关怀厅',
+          pano:'f12d8cf609bb483a80a715a607a1082e'
+        },
+        {
+          id:4,
+          name:'第四展区  光辉历程厅',
+          pano:"8857354a3b0e4d748f8b7633be25188f"
+        },
+        {
+          id:5,
+          name:'第五展区  将星闪耀厅',
+          pano:"b023f9d4040d4afca849e504f190bef2"
+        },
+        {
+          id:6,
+          name:'第六展区  丰碑永铸厅',
+          pano:"ec42a909a05744da85fd0b5d0da6bb19"
+        }
+      ],
+      current:{
+        id:1,
+        name:'第一展区  序厅',
+        pano:"a07c10e319da4914b24158a4baabe748"
+      }
+    }
+  },
+  methods:{
+    handleItem(item){
+      this.current = item
+      item.pano && player.flyToPano({pano:player.model.panos.index[item.pano]})
+    }
+  },
+  watch:{
+    isShow(newVal){
+      let css =newVal? '10px':'-310px'
+      $('.cad').css({right:css})
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.palte{
+  border: 2px solid #FFB521;
+  width: 300px;
+  background: rgba(0, 0, 0, 0.6);
+  transform: translateX(300px);
+  transition: all 0.3s ease;
+  .daolan{
+    cursor: pointer;
+    >img{
+      width: 16px;
+      transform: rotate(180deg);
+      margin-bottom: 4px;
+    }
+    position: absolute;
+    right: 300px;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 5px 0px 0px 5px;
+    top: 60%;
+    padding: 10px;
+  }
+  .p-title{
+    background: @theme;
+    position: relative;
+    border-bottom: 2px solid #FFB521;
+    height: 60px;
+    >img{
+      position: absolute;
+      z-index: 999;
+      top: -16px;
+      left: 10px;
+      width: 60px;
+    }
+    >span{
+      padding-left: 80px;
+      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 #FFB521;
+    width: 100%;
+    >li{
+      height: 40px;
+      line-height: 40px;
+      padding: 0 30px;
+      cursor: pointer;
+      &:hover{
+        background: @theme;
+
+      }
+    }
+  }
+}
+.daolanactive{
+  transform: translateX(0);
+  .daolan{
+    >img{
+      width: 16px;
+      transform: rotate(0);
+      margin-bottom: 4px;
+    }
+  }
+}
+</style>

src/components/pagination/index.vue

@@ -0,0 +1,162 @@
+<template>
+  <div class="layer">
+    <!-- <span class="total">共{{total}}条</span> -->
+    
+    <div class="number">
+      <span @click="current = current - 1"><img class="pagejiantou" :src="require(`@/assets/images/icon/prev_r.png`)" alt=""></span>
+
+      <template v-if="currMin > min">
+        <span @click="current = min">{{min}}</span>
+        <span v-if="currMin - 1 > min">…</span>
+      </template>
+
+      <span 
+        v-for="index in numbers" 
+        :key="index" 
+        :class="{active: index === current}" 
+        @click="current = index">
+        {{index}}
+      </span>
+
+
+      <template v-if="currMax < max">
+        <span v-if="currMax + 1 < max">…</span>
+        <span @click="current = max">{{max}}</span>
+      </template>
+
+      <span @click="current = current + 1"><img class="pagejiantou" :src="require(`@/assets/images/icon/next_r.png`)" alt=""></span>
+    </div>
+    
+    <div>
+      <span>前往</span>
+      <input
+        type="text"
+        :value="current"
+        @blur="ev => ev.target.value = current"
+        @keyup.enter="ev => current = Number(ev.target.value)"
+      >
+      <span>页</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ['paging'],
+  data() {
+    return {
+      ...this.paging
+    }
+  },
+  computed: {
+    min() {
+      return 1
+    },
+    max() {
+      return Math.ceil(this.total / this.pageSize)
+    },
+    routineMin() {
+      return this.current - Math.ceil(this.showSize / 2)
+    },
+    routineMax() {
+      return this.current + Math.floor(this.showSize / 2)
+    },
+    currMin() {
+      let c = this.max - this.routineMax
+
+      if (this.routineMin <= this.min) {
+        return this.min
+      } else if (c >= 0) {
+        return this.routineMin
+      } else if (this.routineMin + c <= this.min) {
+        return this.min
+      } else {
+        return this.routineMin + c
+      }
+    },
+    currMax() {
+      let c = this.min - this.routineMin
+
+      if (this.routineMax >= this.max) {
+        return this.max
+      } else if (c <= 0) {
+        return this.routineMax
+      } else if (this.routineMax + c >= this.max) {
+        return this.max
+      } else {
+        return this.routineMax + c
+      }
+    },
+    numbers() {
+      let total = this.currMax - this.currMin
+      let numbers = []
+
+      if (total === 0) {
+        numbers.push(1)
+      } else {
+        for (let i = 0; i <= total; i++) {
+          numbers.push(this.currMin + i)
+        }
+      }
+      return numbers
+    }
+  },
+  watch: {
+    current(val, old) {
+      if (isNaN(this.current)) {
+        return this.current = old
+      } else if (this.current < this.min) {
+        return this.current = this.min
+      } else if (this.current > this.max) {
+        return this.current = this.max
+      }
+      this.$emit('changeCurrent', this.current)
+    },
+    paging:{
+      deep:true,
+      handler:function (newVal) {
+        Object.keys(newVal).forEach(k => this[k] = newVal[k])
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.layer {
+  span {
+    font-size: 14px;
+    color:rgba(255,255,255,0.88);
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0 10px;
+    padding: 0 6px;
+    &.active {
+      background: @theme;
+    }
+  }
+  .pagejiantou{
+    width: 5px;
+    cursor: pointer;
+  }
+
+  .number span {
+    margin: 0 5px;
+    cursor: pointer;
+  }
+  div {
+    display: inline-block;
+  }
+
+  div input {
+    background: none;
+    border:1px solid rgba(85,85,85,1);
+    width:46px;
+    height:28px;
+    border-radius:2px;
+    vertical-align: middle;
+    text-align: center;
+    color: #fff;
+  }
+}
+</style>

src/components/popupLayout/Broadcast.vue

@@ -1,45 +1,95 @@
 <template>
   <div class="wrapper">
-      <showCollection @hideSlide="data=>{showSidebar = data}" class="ui-broadcast" :item="item"></showCollection>
-      <Sidebar @activeItem="handleItem" :item="item" :list="tableData"  v-if="showSidebar"></Sidebar>
+    <div class="ui-broadcast" @click="close">
+      <img class="close"  @click="close" :src="require('@/assets/images/icon/close.png')">
+      <div class="ui-con" @click.stop>
+        <div class="img-con img-k">
+          <iframe :src="item.link" frameborder="0"></iframe>
+        </div>
+      </div>
+     <div class="full" v-if="isFull" @click.stop>
+      <img class="full-btn"  @click="close" :src="`${$cdn}images/close-full.png`" alt="">
+    </div>
+    </div>
   </div>
 </template>
 <script>
-import showCollection from '@/components/showCollection'
-import showMbCollection from '@/components/showMbCollection'
-import Sidebar from '@/components/SlideBar/'
-import browser from '@/config/browser.js'
-
-
-
 export default {
-  components:{
-    showCollection:browser.mobile?showMbCollection:showCollection,
-    Sidebar
-  },
   data(){
     return {
-      showSidebar:false
+      isFull:false
     };
   },
+  mounted(){
+    console.log(this.item);
+  },
   methods:{
-    handleItem(data){
-      this.item = data
+    close(){
+      this.$hideBroadcast()
+      this.$bus.$emit('showHover',true)
     }
-  },
-  mounted(){
   }
 };
 </script>
 
 <style lang="less" scoped>
-.ui-broadcast {
-  width: 100%;
+@import '../../assets/style/globalVars.less';
+
+.ui-broadcast{
   height: 100%;
   position: fixed;
-  z-index: 999;
+  z-index: 9999;
   top: 0;
   left: 0;
-  background: rgba(0, 0, 0, 0.6);
+  width: 100%;
+  .close{
+    position: absolute;
+    top: 85px;
+    right: 10%;
+    width: 36px;
+    cursor: pointer;
+    z-index: 9999;
+  }
+  .ui-con{
+    top: 48%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+    text-align: center;
+    width: 60%;
+    position: relative;
+    font-size: 0;
+    border-radius: 10px;
+    overflow: hidden;
+    box-sizing: border-box;
+    iframe,video{
+      width: 100%;
+      min-height: 550px;
+    }
+    img{
+      width: 100%;
+      height: auto;
+    }
+  }
+  .full{
+    width: 100%;
+    height: 100%;
+    z-index: 999;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%,-50%);
+    iframe{
+      width: 100%;
+      height: 100%;
+    }
+    .full-btn{
+      width: 50px;
+      position: absolute;
+      right: 12px;
+      top: 30px;
+      cursor: pointer;
+    }
+  }
 }
+
 </style>

src/data/collection.js

@@ -0,0 +1,571 @@
+const data = [
+  /*
+  第一展区
+  name 藏品名称
+  describe 藏品描述
+  type 1-> 第一展区，以此类推
+  id 序号
+  link 三维建模链接地址
+  img 藏品封面图
+  */
+  {
+      name: '第三次党代会精神传达提纲',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 1,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc49&v=1',
+      img: '1'
+  },
+
+  {
+      name: '政治工作部宣传处呈批件',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 2,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc50&v=1',
+      img: '2'
+  },
+
+  {
+      name: '总政治部呈批件',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 3,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc51&v=1',
+      img: '3'
+  },
+
+  {
+      name: '四川省总队通报',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 4,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc61&v=1',
+      img: '4'
+  },
+
+  {
+      name: '四川省总队通令',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 5,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc63&v=1',
+      img: '5'
+  },
+
+  {
+      name: '帮助武警部队发展农副业生产的通知',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 6,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc64&v=1',
+      img: '6'
+  },
+
+  {
+      name: '中共中央批转公安部党组通知',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 7,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc73&v=1',
+      img: '7'
+  },
+
+  {
+      name: '一份交接书',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 8,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc74&v=1',
+      img: '8'
+  },
+
+  {
+      name: '交接书封面',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 9,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc75&v=1',
+      img: '9'
+  },
+
+  {
+      name: '四川省公安厅文件',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 10,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc76&v=1',
+      img: '10'
+  },
+
+  {
+      name: '领导管理体制的决定',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 11,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc78&v=1',
+      img: '11'
+  },
+
+  {
+      name: '执勤部队交接书',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 12,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc90&v=1',
+      img: '12'
+  },
+
+  {
+      name: '传真电报',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 13,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc109&v=1',
+      img: '13'
+  },
+
+  {
+      name: '政治部批复',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 14,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc111&v=1',
+      img: '14'
+  },
+
+  {
+      name: '关于平息成都严重骚乱事件的战斗报告',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 15,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc112&v=1',
+      img: '15'
+  },
+
+  {
+      name: '关于赴藏执行紧急任务的指示',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 16,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc113&v=1',
+      img: '16'
+  },
+
+  {
+      name: '关于持续兴起学习贯彻党的十九大精神',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 17,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc119&v=1',
+      img: '17'
+  },
+
+  {
+      name: '关于认真学习贯彻党的十九大精神的实施方案',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 18,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc120&v=1',
+      img: '18'
+  },
+
+  {
+      name: '十九大精神阶段性总结',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 19,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc121&v=1',
+      img: '19'
+  },
+
+  {
+      name: '十九大宣传工作措施',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 1,
+      id: 20,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc122&v=1',
+      img: '20'
+  },
+
+  /*
+  第二展区
+  name 藏品名称
+  describe 藏品描述
+  type 1-> 第一展区，以此类推
+  id 序号
+  link 三维建模链接地址
+  img 藏品封面图
+  */
+ {
+  name: '第三次党代会精神传达提纲',
+  describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+  type: 2,
+  id: 1,
+  link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc49&v=1',
+  img: '1'
+  },
+
+  {
+      name: '政治工作部宣传处呈批件',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 2,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc50&v=1',
+      img: '2'
+  },
+
+  {
+      name: '总政治部呈批件',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 3,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc51&v=1',
+      img: '3'
+  },
+
+  {
+      name: '四川省总队通报',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 4,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc61&v=1',
+      img: '4'
+  },
+
+  {
+      name: '四川省总队通令',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 5,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc63&v=1',
+      img: '5'
+  },
+
+  {
+      name: '帮助武警部队发展农副业生产的通知',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 6,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc64&v=1',
+      img: '6'
+  },
+
+  {
+      name: '中共中央批转公安部党组通知',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 7,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc73&v=1',
+      img: '7'
+  },
+
+  {
+      name: '一份交接书',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 8,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc74&v=1',
+      img: '8'
+  },
+
+  {
+      name: '交接书封面',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 9,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc75&v=1',
+      img: '9'
+  },
+
+  {
+      name: '四川省公安厅文件',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 10,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc76&v=1',
+      img: '10'
+  },
+
+  {
+      name: '领导管理体制的决定',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 11,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc78&v=1',
+      img: '11'
+  },
+
+  {
+      name: '执勤部队交接书',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 12,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc90&v=1',
+      img: '12'
+  },
+
+  {
+      name: '传真电报',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 13,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc109&v=1',
+      img: '13'
+  },
+
+  {
+      name: '政治部批复',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 14,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc111&v=1',
+      img: '14'
+  },
+
+  {
+      name: '关于平息成都严重骚乱事件的战斗报告',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 15,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc112&v=1',
+      img: '15'
+  },
+
+  {
+      name: '关于赴藏执行紧急任务的指示',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 16,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc113&v=1',
+      img: '16'
+  },
+
+  {
+      name: '关于持续兴起学习贯彻党的十九大精神',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 17,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc119&v=1',
+      img: '17'
+  },
+
+  {
+      name: '关于认真学习贯彻党的十九大精神的实施方案',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 18,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc120&v=1',
+      img: '18'
+  },
+
+  {
+      name: '十九大精神阶段性总结',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 19,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc121&v=1',
+      img: '19'
+  },
+
+  {
+      name: '十九大宣传工作措施',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 2,
+      id: 20,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc122&v=1',
+      img: '20'
+  },
+
+  /*
+      第三展区
+      name 藏品名称
+      describe 藏品描述
+      type 1-> 第一展区，以此类推
+      id 序号
+      link 三维建模链接地址
+      img 藏品封面图
+      */
+  {
+      name: '第三次党代会精神传达提纲',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 1,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc49&v=1',
+      img: '1'
+  },
+
+  {
+      name: '政治工作部宣传处呈批件',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 2,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc50&v=1',
+      img: '2'
+  },
+
+  {
+      name: '总政治部呈批件',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 3,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc51&v=1',
+      img: '3'
+  },
+
+  {
+      name: '四川省总队通报',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 4,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc61&v=1',
+      img: '4'
+  },
+
+  {
+      name: '四川省总队通令',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 5,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc63&v=1',
+      img: '5'
+  },
+
+  {
+      name: '帮助武警部队发展农副业生产的通知',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 6,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc64&v=1',
+      img: '6'
+  },
+
+  {
+      name: '中共中央批转公安部党组通知',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 7,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc73&v=1',
+      img: '7'
+  },
+
+  {
+      name: '一份交接书',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 8,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc74&v=1',
+      img: '8'
+  },
+
+  {
+      name: '交接书封面',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 9,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc75&v=1',
+      img: '9'
+  },
+
+  {
+      name: '四川省公安厅文件',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 10,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc76&v=1',
+      img: '10'
+  },
+
+  {
+      name: '领导管理体制的决定',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 11,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc78&v=1',
+      img: '11'
+  },
+
+  {
+      name: '执勤部队交接书',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 12,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc90&v=1',
+      img: '12'
+  },
+
+  {
+      name: '传真电报',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 13,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc109&v=1',
+      img: '13'
+  },
+
+  {
+      name: '政治部批复',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 14,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc111&v=1',
+      img: '14'
+  },
+
+  {
+      name: '关于平息成都严重骚乱事件的战斗报告',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 15,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc112&v=1',
+      img: '15'
+  },
+
+  {
+      name: '关于赴藏执行紧急任务的指示',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 16,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc113&v=1',
+      img: '16'
+  },
+
+  {
+      name: '关于持续兴起学习贯彻党的十九大精神',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 17,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc119&v=1',
+      img: '17'
+  },
+
+  {
+      name: '关于认真学习贯彻党的十九大精神的实施方案',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 18,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc120&v=1',
+      img: '18'
+  },
+
+  {
+      name: '十九大精神阶段性总结',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 19,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc121&v=1',
+      img: '19'
+  },
+
+  {
+      name: '十九大宣传工作措施',
+      describe: '藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案藏品介绍文案',
+      type: 3,
+      id: 20,
+      link: 'https://4dscene.4dage.com/culturalrelics/scwjjsg/Model.html?m=wjsc122&v=1',
+      img: '20'
+  },
+
+]
+
+export default { data }

src/main.js

@@ -2,8 +2,25 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 
+
+import {
+  $showLoading,
+  $showBroadcast,
+  $hideBroadcast,
+} from './components/popupLayout'
+
 Vue.config.productionTip = false
 
+Vue.prototype.$bus = new Vue()
+
+Vue.mixin({
+  methods: {
+    $showLoading,
+    $showBroadcast,
+    $hideBroadcast
+  }
+})
+
 new Vue({
   router,
   render: h => h(App)

src/pages/Home.vue

@@ -61,7 +61,20 @@
 
     <div class="hover-pages" @click.stop @keydown.stop @keyup.stop v-if="page">
         <collection v-if="page==='collection'"/>
+        <message v-if="page==='message'"/>
     </div>
+    
+    
+
+    <exhibition class="exhibition"/>
+
+     <Danmaku
+        class="danmaku"
+        :quotes="danmu"
+        :showIcon="require('@/assets/images/icon/danmu_open.png')"
+        :closeIcon="require('@/assets/images/icon/danmu_close.png')"
+        :arrowIcon="require('@/assets/images/icon/danmu_top.png')"
+      />
 
   </div>
 </template>
@@ -82,6 +95,14 @@ import vrCon from '@/views/gui/vrcon';
 import vOther from '@/views/gui/other';
 
 import collection from '@/views/collection'
+import message from '@/views/message'
+
+
+import exhibition from '@/components/exhibition'
+
+
+import Danmaku from "@wujing/danmaku";
+import "@wujing/danmaku/dist/danmaku.css";
 
 
 
@@ -89,6 +110,7 @@ export default {
   name: 'Home',
   components: {
       collection,
+      message,
       hot,
       popup,
       cad,
@@ -101,7 +123,9 @@ export default {
       guimsg,
       vError,
       vrCon,
-      vOther
+      vOther,
+      exhibition,
+      Danmaku
   },
   watch:{
     '$route.query.route':function (newVal) {
@@ -111,6 +135,15 @@ export default {
   },
   data(){
       return {
+        danmu:[
+          "很漂亮的线上展馆，支持！",
+          "足不出户就能浏览参观，太棒了！",
+          "期待能有机会到实体馆参观。",
+          "请问英模在第几展区？",
+          "向革命先烈们致敬。",
+          "展馆的信息介绍很详细，干货满满！",
+          "向人民解放军致敬"
+          ],
         page: this.$route.query.route
       }
   }
@@ -131,4 +164,18 @@ export default {
     z-index: 9999;
     background: rgba(0, 0, 0, 0.8);
 }
+.danmaku{
+  position: fixed;
+  bottom: -4px;
+  left: 34px;
+  z-index: 99;
+  width: 340px;
+}
+
+.exhibition{
+  position: fixed;
+  top: 50px;
+  right: 0;
+  z-index: 99;
+}
 </style>

src/views/collection/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="collection">
+  <div class="collection" v-show="isShow">
     <img class="close" @click="$router.push({path:'/'})" :src="require('@/assets/images/icon/close.png')">
     <div class="title-label">
       <img :src="require('@/assets/images/icon/label.png')">
@@ -7,27 +7,27 @@
     </div>
     <div class="bar1">
       <div :class="{drawactive:isShowDraw}" @click="isShowDraw=!isShowDraw">
-        <div class="ui-input">请选择单元</div>
+        <div class="ui-input">{{current.name || '请选择单元'}}</div>
         <img :src="require('@/assets/images/icon/xiala.png')">
         <ul @click.stop>
-          <li v-for="(item,i) in 5" :key="i">第二展区：备战如虎，稳定军心</li>
+          <li @click="current = item,isShowDraw=false" v-for="(item,i) in typeLi" :key="i">{{item.name}}</li>
         </ul>
       </div>
       <div>
-        <input placeholder="请输入藏品名称" class="ui-input">
-        <img :src="require('@/assets/images/icon/search.png')">
+        <input @keyup.enter="getCollection" v-model="keyword" placeholder="请输入藏品名称" class="ui-input">
+        <img @click="getCollection" :src="require('@/assets/images/icon/search.png')">
       </div>
-      <button class="ui-button submit">搜索</button>
-      <button class="ui-button default">重置</button>
+      <button @click="getCollection" class="ui-button submit">搜索</button>
+      <button @click="keyword=''" class="ui-button default">重置</button>
     </div>
 
-    <collection/>
-    <div class="paging" v-if="total" :class="{ pagingshow: total }">
+    <collection :data="list" @toggle="handleToggle"/>
+    <div class="paging">
           <Paging
-            @clickHandle="pageChange"
-            :current="currentPage"
-            :total="total"
-            :equable="pageSize"
+            v-if="paging.total"
+            style="text-align: center;"
+            :paging="paging"
+            @changeCurrent="pageChange"
           />
     </div>
   </div>
@@ -35,7 +35,10 @@
 
 <script>
 import collection from '@/components/collection';
-import Paging from "@/components/Paging";
+import Paging from "@/components/pagination";
+import data from '@/data/collection.js';
+
+let W = window.innerWidth
 
 export default {
   components:{
@@ -45,15 +48,106 @@ export default {
   data(){
     return {
       isShowDraw:false,
-      currentPage:1,
-      pageSize:8,
-      total:20
+      isShow:true,
+      paging: {
+        pageSize: W>1400?8:6,
+        pageNum: 1,
+        total: 0,
+        showSize: W>1400?8:6,
+        current: 1
+      },
+      typeLi:[
+        {
+          id:1,
+          name:'第一展区  序厅'
+        },
+        {
+          id:2,
+          name:'第二展区  历史沿革厅'
+        },
+        {
+          id:3,
+          name:'第三展区  亲切关怀厅'
+        },
+        {
+          id:4,
+          name:'第四展区  光辉历程厅'
+        },
+        {
+          id:5,
+          name:'第五展区  将星闪耀厅'
+        },
+        {
+          id:6,
+          name:'第六展区  丰碑永铸厅'
+        }
+      ],
+      current:{
+          id:1,
+          name:'第一展区  序厅'
+      },
+      keyword:'',
+      currentKeyword:''
+    }
+  },
+  computed:{
+    list(){
+      let tmp = ''
+        if (!this.current) {
+          tmp = data.data
+        }
+        else{
+          tmp = data.data.filter(i=>i.type==this.current.id)
+        }
+        let filterKey = tmp.filter(i=>i.name.indexOf(this.currentKeyword) > -1)
+        let tt = filterKey.map(item=>{
+        item.imgstr = require(`@/assets/images/collection/${item.img}.png`)
+        return item
+        })
+        let ttt = tt.slice(this.paging.pageSize*(this.paging.pageNum-1),this.paging.pageSize*this.paging.pageNum)
+        return ttt
+    }
+  },
+  watch:{
+    paging:{
+      deep:true,
+      handler:function (newVal) {
+        console.log(newVal);
+      }
+    },
+    current:{
+      immediate:true,
+      deep:true,
+      handler:function (newVal) {
+        let tmp = ''
+        if (!this.current) {
+          tmp = data.data
+        }
+        else{
+          tmp = data.data.filter(i=>i.type==newVal.id)
+        }
+        this.paging.total = tmp.length
+        this.paging.pageNum = 1
+        this.paging.current = 1
+      }
     }
   },
   methods:{
+    getCollection() {
+      this.currentKeyword = this.keyword
+    },
+    handleToggle(data){
+      this.isShow = data
+    },
     pageChange(val){
-      this.currentPage = val
+      this.paging.pageNum = val
+      this.paging.current = val
     }
+  },
+  mounted(){
+    this.$bus.$on('showHover',()=>{
+      this.isShow = true
+    })
   }
 }
 </script>
@@ -150,66 +244,29 @@ export default {
     width: 100%;
     margin-top: 30px;
   }
-  .paging {
-      height: 100%;
-      padding-bottom: .83rem;
-      transition: all 0.4s ease;
-      & /deep/ .p-layout {
-        text-align: center;
-        margin-top: .42rem;
-      }
-      & /deep/ .p-layout a:not(:last-child),
-      & /deep/ .p-layout a:not(:first-child)  {
-        margin: .42rem .58rem;
-        display: inline-block;
-        font-weight: 500;
-        cursor: pointer;
-        user-select: none;
-        position: relative;
-        transition: color 0.3s;
-        color: #fff;
-        padding: 0 5px;
-        font-size: 1rem;
-      }
-      & /deep/ .p-layout a:last-child,& /deep/ .p-layout a:first-child  {
-        position: relative;
-        top: -0.42rem;
-        display: -ms-inline-flexbox;
-        display: inline-flex;
-        -ms-flex-align: center;
-        align-items: center;
-        height: .92rem;
-        padding: 0 .38rem;
-      }
-      & /deep/ .p-layout a:last-child::before,
-      & /deep/ .p-layout a:last-child::after,
-      & /deep/ .p-layout a:first-child::before,
-      & /deep/ .p-layout a:first-child::after {
-        content: "";
-        display: inline-block;
-        will-change: transform;
-        transition: transform 0.3s;
-      }
 
-      & /deep/ .p-layout a:not(.imga).active::after,
-      & /deep/ .p-layout a:not(.imga).active,
-      & /deep/ .p-layout a:not(.imga):hover,
-      & /deep/ .p-layout a:not(.imga):hover::after,
-      & /deep/ .p-layout a:not(.imga).active::after,
-      & /deep/ .p-layout a:not(.imga).active,
-      & /deep/ .p-layout a:not(.imga):hover,
-      & /deep/ .p-layout a:not(.imga):hover::after {
-        color: #fff;
-        transform: scaleX(1);
-        background: @theme;
-        text-align: center;
-      }
+}
 
-      & /deep/ .p-layout a:not(:last-child).active,
-      & /deep/ .p-layout a:not(:first-child).active  {
-        position: relative;
-        color: #fff;
+@media screen and (min-width: 500px) and (max-width: 1400px) {
+  .collection{
+    margin: 26px auto;
+    .close{
+        top: 14px;
+    }
+    .title-label{
+      position: relative;
+      >img{
+        width: 205px;
+      }
+      
+      >h2{
+        position: absolute;
+        top: 50%;
+        font-size: 24px;
+        left: 74px;
+        transform: translateY(-50%);
       }
     }
+  }
 }
 </style>

src/views/gui/menu.vue

@@ -4,7 +4,7 @@
       <div id="view-controllers"></div>
     </div>
     <div class="pinBottom left">
-      <div class="drawbtn" @click="isShow=!isShow">
+      <div class="drawbtn" @click="isShow=!isShow,showShare=false">
           <img :src="require(`@/assets/images/drawback${!isShow?'_out':''}.png`)" alt="">
       </div>
       <div class="shouqi" :class="{active:isShow}">
@@ -164,6 +164,15 @@
             <img :src="require(`@/assets/images/btnlist/${item.id}.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>
@@ -242,16 +251,17 @@ export default {
     path:{path:'/',query:{route:'collection'}}
   },{
     id:'comment',
-    path:{path:'/',query:{route:'collection'}}
+    path:{path:'/',query:{route:'message'}}
   },{
     id:'share',
-    path:{path:'/',query:{route:'collection'}}
+    path:''
   }]
    
     return {
       isShow:true,
       isGuide: true,
-      btnlist:menuli
+      btnlist:menuli,
+      showShare: false
     }
   },
   computed:{
@@ -259,6 +269,10 @@ export default {
   },
   methods:{
     handleItem(item){
+      if (!item.path) {
+        this.showShare = !this.showShare
+        return
+      }
       this.$router.push(item.path)
     }
   }
@@ -337,4 +351,30 @@ export default {
    }
  }
 
+ .hoverCls{
+   position: absolute;
+   right: -45px;
+   bottom: 60px;
+   >img{
+     width: 150px;
+   }
+   .hoverBody{
+     position: absolute;
+     top: 50%;
+     left: 50%;
+     transform: translate(-50%,-50%);
+     width: 100%;
+     text-align: center;
+     >img{
+       width: 70%;
+       display: block;
+       margin: 0 auto;
+     }
+     span{
+       margin-top: 20px;
+       display: inline-block;
+     }
+   }
+ }
+
 </style>

src/views/message/index.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="message" v-show="isShow">
+    <div class="m-title">
+      <div>
+        <img :src="require('@/assets/images/icon/message.png')" />
+        <span>留言板</span>
+      </div>
+      <img
+        class="close"
+        @click="$router.push({ path: '/' })"
+        :src="require('@/assets/images/icon/close.png')"
+      />
+    </div>
+    <div class="m-con">
+      <p>共有<span>12315</span>条留言</p>
+      <div class="m-body">
+        <ul>
+          <li v-for="(item, i) in 6" :key="i">
+            <span>黄干事</span>
+            <p>
+              在中国革命、建设、改革各个历史时期，无数烈士为民族独立、人民解放和国家富强、人民幸福矢志奋斗、英勇牺牲。热爱祖国、忠于人民、无私奉献、敢于牺牲的烈士精神，凝聚着中华民族无数仁人志士对世界观、人生观、价值观的认知和感受，积淀着中华民族的崇高精神和高尚品格。
+            </p>
+          </li>
+        </ul>
+        <div class="paging" v-if="paging.total">
+          <Paging
+            v-if="paging.total > 0"
+            style="text-align: center;"
+            :paging="paging"
+            @changeCurrent="pageChange"
+          />
+        </div>
+      </div>
+    </div>
+
+    <div class="m-person">
+      <p>
+        <span>昵称：</span>
+        <input placeholder="请输入昵称" type="text" name="" id="">
+      </p>
+      <p>
+        <span>留言内容：</span>
+        <textarea placeholder="请输入留言内容"></textarea>
+        <button class="ui-button submit">提交</button>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import Paging from "@/components/pagination";
+
+export default {
+  components: {
+    Paging,
+  },
+  data() {
+    return {
+      isShowDraw: false,
+      isShow: true,
+      paging: {
+        pageSize: 8,
+        pageNum: 1,
+        total: 20,
+        showSize: 8,
+        current: 1,
+      },
+    };
+  },
+  methods: {
+    handleToggle(data) {
+      this.isShow = data;
+    },
+    pageChange(val) {
+      this.paging.current = val;
+    },
+  },
+  mounted() {
+    this.$bus.$on("showHover", () => {
+      this.isShow = true;
+    });
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.message {
+  margin: 86px auto;
+  width: 80%;
+  position: relative;
+  background: #f2efe4;
+  border-radius: 10px;
+  overflow: hidden;
+  padding-bottom: 30px;
+
+  .m-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: @theme;
+    height: 50px;
+    padding: 0 20px;
+    img {
+      width: 30px;
+    }
+    .close {
+      cursor: pointer;
+    }
+
+    > div {
+      display: inline-block;
+      > img {
+        vertical-align: middle;
+      }
+      span {
+        margin-left: 10px;
+        vertical-align: middle;
+        line-height: 50px;
+        height: 50px;
+        font-size: 20px;
+      }
+    }
+  }
+
+  .m-con {
+    color: #333;
+    padding: 0 50px;
+    > p {
+      margin: 10px 0;
+      > span {
+        color: @theme;
+      }
+    }
+    .m-body {
+      background: #fff;
+      border-radius: 10px;
+      padding-bottom: 10px;
+      > ul {
+        padding: 0 8%;
+        max-height: 40vh;
+        overflow-y: auto;
+        > li {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          border-bottom: 1px solid #e1e1e1;
+          padding: 20px 0;
+          > span {
+            color: @theme;
+            flex: 2;
+          }
+          > p {
+            flex: 3;
+            color: #666666;
+          }
+        }
+        &::-webkit-scrollbar-thumb {
+            height: 50px;
+            background-color: #ddd;
+            -webkit-border-radius: 4px;
+            outline: 2px solid #ddd;
+            outline-offset: -2px;
+        }
+      }
+      .paging {
+        margin-top: 20px;
+        & /deep/ .layer {
+          span {
+            color: #666666;
+          }
+          div input {
+              border: 1px solid #666666;
+              color: #666666;
+            }
+        }
+      }
+    }
+  }
+  .m-person{
+    padding: 0 50px;
+    color: #666666;
+    input,textarea{
+      display: inline-block;
+      padding: 0 14px;
+      color: #666;
+      letter-spacing: 1px;
+      background: #fff;
+      border: 1px solid #A3A3A3;
+      border-radius: 5px;
+    }
+    input{
+      width: 220px;
+      height: 36px;
+      line-height: 36px;
+    }
+    textarea{
+      width: 680px;
+      padding: 10px;
+    }
+    >p{
+      display: flex;
+      align-items: center;
+      margin: 10px auto;
+      >span{
+        display: inline-block;
+      }
+      &:last-of-type{
+        position: relative;
+        >textarea{
+          width: calc(100% - 250px);
+        }
+
+        .ui-button{
+          width: 100px;
+          height: 40px;
+          position: absolute;
+          right: 0;
+          bottom: 0;
+        }
+      }
+    }
+  }
+}
+</style>

vue.config.js

@@ -2,6 +2,7 @@ const fs = require('fs');
 const path = require('path');
 
 module.exports = {
+  publicPath: "./",
   lintOnSave: false,
   css: {
     loaderOptions: {