hangzhan_page/src/framework/show/pano.vue

<template>
  <div class="ifrcon">
    <iframe
      allowfullscreen="true"
      ref="iframe"
      :key="selected.id"
      :src="`https://www.4dkankan.com/spc.html?m=${selected.id}`"
      frameborder="0"
      @click="handleifrclk"
      @load="onIframLoad"
    ></iframe>
    <mbui :type="type" :isShow="isShow" @close="isShow =false">
      <div class="img_ul" slot="imgList">
        <ul v-if="selectExh.scenes">
          <li
            v-for="(item, i) in selectExh.scenes"
            @click="selected = item"
            :key="i"
            :class="{ active: selected.id == item.id }"
          >
            <div>
              <img :src="`https://4dkk.4dage.com/images/images${item.id}/floor_0.png?t=1667802021476?v=0&rnd=0.5813201205835572&x-oss-process=image/resize,m_fill,w_80,h_60/quality,q_70`" v-errorimg="`${fdkk_CDN}/hangzhan/images/images${item.id}/result.png`" alt="" />
              <rollName
                :offset="20"
                :active="selected.id == item.id"
                class="pic-name"
                :myref="'subw' + item.id"
                :name="item.title"
              />
            </div>
            <span class="bar"></span>
          </li>
        </ul>
      </div>

      <div class="txt_ul" slot="txtList">
        <ul>
          <li
            v-for="(item, i) in list"
            @click="selectExh = item"
            :key="i"
            :class="{ active: selectExh.id == item.id }"
          >
            <span>{{ selectExh.id == item.id ? item.title : item.short }}</span>
          </li>
        </ul>
      </div>

      <div v-if="!isShow" @click="isShow = true" class="btn_zhankai" slot="btn_zhankai">
        <i class="iconfont icon-more"></i>
      </div>
      <vAside class="ui_header" slot="aside"/>
      <vSelect slot="select" :type="type"></vSelect>
    </mbui>
  </div>
</template>

<script>
import mbui from "./ui";
import vAside from "./ui/aside.vue";
import vSelect from "./ui/select.vue";


export default {
  props:['type'],
  components: {
    mbui,
    vSelect,
    vAside
  },
  data() {
    return {
      params: "",
      isShow:true,
      selected: '',
      selectExh:{},
      list:[]
    };
  },
  watch:{
    selected:{
      deep:true,
      handler:function (newVal) {
        console.log(newVal);
      }
    }
  },
  methods: {
    handleifrclk(){
      console.log(1111);
    },
    getList(){
      window.$.ajax({url:`${this.g_CDN}fdkk/data2.json`,success:(data)=>{
        this.list=data.list
        this.selectExh = this.list[0]
        this.selected = this.selectExh.scenes[0]
      }})
    },
    onIframLoad() {
      window.onmessage = () => {
      
      };
    },
  },
  mounted(){
    this.getList()
    this.$bus.$on('showM',()=>{
      this.isShowM = true
    })
  }
};
</script>

<style lang="less" scoped>
.ifrcon {
  width: 100%;
  height: 100%;
  background: #fcfcfc;
  text-align: center;
  > iframe {
    width: 100%;
    height: 100%;
  }
  .img_ul {
    width: 100%;
    position: relative;
    > ul {
      overflow-x: auto;
      display: inline-block;
      background: linear-gradient(to right,rgba(32,32,32,0),rgba(32,32,32,1),rgba(32,32,32,0));
      min-width: 50%;
      > li {
        cursor: pointer;
        list-style: none;
        display: inline-block;
        margin: 8px 10px;
        position: relative;
        padding-bottom: 8px;
        > div {
          width: 68px;
          height: 68px;
          overflow: hidden;
          position: relative;
          border-radius: 4px;
          cursor: pointer;
          color: rgba(256, 256, 256, 0.4);
          > img {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 100%;
            transform: translate(-50%, -50%);
          }
          .iconfont {
            position: absolute;
            left: 4px;
            top: 4px;
            z-index: 99;
          }
          > span {
            text-align: center;
            display: inline-block;
            background: rgba(0, 0, 0, 0.3);
            position: absolute;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            left: 0;
            bottom: 0;
            width: 100%;
          }
        }
        .bar {
          display: none;
        }
        .pic-name {
          background: rgba(0, 0, 0, 0.6);
          position: absolute;
          left: 0;
          bottom: 0;
          text-align: center;
          /deep/ span {
            word-break: keep-all;
            white-space: nowrap;
            font-size: 12px;
          }
        }
        &.active {
          .bar {
            display: inline-block;
            position: absolute;
            bottom: 0px;
            width: 80%;
            left: 50%;
            transform: translateX(-50%);
            height: 2px;
            background: @color;
          }
          >div{
            color: rgba(256, 256, 256, 1);
          }
        }
      }
    }
  }

  .txt_ul {
    margin: 18px auto;
    border: 2px solid @color;
    border-radius: 30px;
    padding: 6px 15px;
    display: inline-block;
    > ul {
      overflow-x: auto;
      display: flex;
      &::-webkit-scrollbar {
        display: none;
      }
      > li {
        border: 1px solid rgba(256, 256, 256, 0.4);
        border-radius: 24px;
        padding: 6px 9px;
        margin: 0 5px;
        cursor: pointer;
        > span {
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          line-height: 1.2;
          word-break: keep-all;
          color: rgba(256, 256, 256, 0.4);
        }
        &.active {
          padding: 6px 12px;
          border: 1px solid @color;
          > span {
            color: #fff;
          }
        }
      }
    }
  }
  
  .btn_zhankai{
    position: fixed;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    background: rgba(0,0,0,.3);
    border-radius: 50%;
    padding: 6px;
    cursor: pointer;
    >i{
      font-size: 28px;
      cursor: pointer;
    }
  }
}
</style>