hangzhan_page/src/framework/showMobile/fdkk.vue

<template>
  <div class="ifrcon">
    <iframe
      allowfullscreen="true"
      ref="iframe"
      :key="selected.id"
      :src="`https://airshow.4dkankan.com/spc.html?m=${selected.id}`"
      frameborder="0"
      @click="handleifrclk"
    ></iframe>
    <mbui :isShow="isShowM" @close="isShowM =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://airshow.4dkankan.com/images/images${item.id}/smallPic.jpg`" 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 class="btn_zhankai" slot="btn_zhankai">
        <img @click="isShowM=true"  :src="require('@/assets/images/menu.png')" alt="">
      </div>
      <vHeader class="ui_header" slot="header"/>
      <vSelect :type="type" slot="select"></vSelect>
    </mbui>
  </div>
</template>

<script>
import mbui from "./ui";
import vHeader from "./ui/Show.Header.vue";
import vSelect from "./ui/select.vue";


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

<style lang="less" scoped>
.ifrcon {
  width: 100%;
  height: 100%;
  background: #fcfcfc;
  > iframe {
    width: 100%;
    height: 100%;
  }
  .img_ul {
    width: 100%;
    position: relative;
    // &::before,
    // &::after {
    //   background: linear-gradient(
    //     to right,
    //     rgba(0, 0, 0, 0.4),
    //     rgba(0, 0, 0, 0)
    //   );
    //   position: absolute;
    //   content: "";
    //   width: 80px;
    //   height: 67px;
    //   top: 0;
    //   z-index: 10;
    //   pointer-events: none;
    // }
    // &::before {
    //   left: 0;
    // }
    // &::after {
    //   right: 0;
    //   background: linear-gradient(
    //     to left,
    //     rgba(0, 0, 0, 0.4),
    //     rgba(0, 0, 0, 0)
    //   );
    // }
    > ul {
      overflow-x: auto;
      display: flex;
      justify-content: center;
      &::-webkit-scrollbar {
        display: none;
      }

      > li {
        cursor: pointer;
        list-style: none;
        display: inline-block;
        margin: 0 5px;
        position: relative;
        padding-bottom: 7px;
        > div {
          width: 68px;
          height: 68px;
          overflow: hidden;
          position: relative;
          border-radius: 8px;
          cursor: pointer;
          > 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;
          }
        }
      }
    }
  }

  .txt_ul {
    width: 90%;
    margin: 18px auto;
    border: 2px solid @color;
    border-radius: 30px;
    padding: 8px 15px 10px;
    > 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;
        > 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;
          }
        }
      }
    }
  }
  
  .ui_header{
  }
  .btn_zhankai{
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    >img{
      width: 40px;
      height: 40px;
    }
  }
}
</style>