liangqichao_new/web/src/views/bigscene/index.vue

<template>
  <div class="bigscene">
    {{cItem.type}}
    <iframe allowfullscreen v-if="cItem.type=='bigscene'" :src="cItem.link" frameborder="0"></iframe>
    <pano :panoid="$route.params.id" v-else />
    <transition name="fade1">
      <list :show="isList" />
    </transition>
    <ul class="aside" :class="{asideactive:isList}">
      <li @click="$router.push({path:'/'})">
        <img :src="require(`@/assets/images/aside/home.png`)" alt />
      </li>
      <li @click="isList=!isList">
        <img
          :src="require(`@/assets/images/aside/list${isList ? '_active' : ''}.png`)"
        />
      </li>
    </ul>
  </div>
</template>

<script>
import list from "@/views/list";
import { data } from "@/data/hotspot";
import pano from "@/views/panorama/pano";

export default {
  components:{list,pano},
  data(){
    return {
      isList: false
    }
  },
  computed:{
    cItem(){
      let {id} = this.$route.params
      let tmp = data.find(item=>item.id==id)

      return tmp
    },
    
  },

  mounted(){
    this.$bus.$on('toggleList', data=>{
      this.isList = data
    })
  }
}
</script>

<style lang="less" scoped>
.bigscene{
  width: 100%;
  height: 100%;
  font-size: 0;
  >iframe{
    width: 100%;
    height: 100%;
  }

  .aside {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(#9E4923, 0.9);
    border-radius: 20px 0px 0px 20px;
    li {
      cursor: pointer;
      margin: 30px 14px;
      img {
        cursor: pointer;
        width: 50px;
      }
    }
  }
}

@media screen and (max-width: 600px) {
  .bigscene{
 

  .aside {
    top: 20%;
    li {
      margin: 26px 10px;
      img {
        cursor: pointer;
        width: 40px;
      }
    }
  }
  .asideactive{
    right:50%;
  }
}
}
</style>