xinjiang_army/web/src/components/exhibition/index.vue

<template>
  <div class="parimaryExhibtion" :class="{daolanactive:isShow}">
    <div class="p-title">
      <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>

.daolanactive{
  transform: translateX(0);
  .daolan{
    >img{
      width: 16px;
      transform: rotate(0);
      margin-bottom: 4px;
    }
  }
}
</style>