shuangchuangzhou_2022/src/pages/mobilescene/zhanxiang/index.vue

<template>
  <div class="zhanxiang">
    <div class="z-bar">
      <img @click.stop="$emit('close')" :src="require('@/assets/images/proj2022/mobile/left@2x.png')" alt="" />
      <span @click.stop="search">请输入项目名称...</span>
      <img @click.stop="search" :src="require('@/assets/images/proj2022/mobile/search@2x.png')" alt="" />
    </div>

    <div class="zhan-con" ref="bgsw" v-swiper:mySwiper="swiperOptions">
      <ul class="swiper-wrapper">
        <li @click="onClick(item, i)" class="swiper-slide" v-for="(item, i) in zhanxiangData.company" :key="i">
          <div class="img">
            <img :src="`zhanxiang/images/${theme}/${item.img}`" alt="" />
          </div>
          <div>
            <h3 class="primarytxt">{{ zhanxiangData.name }}</h3>
            <span v-html="item.name"></span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { directive } from "vue-awesome-swiper";
// import style (<= Swiper 5.x)
import "swiper/css/swiper.css";
import { Booth } from "@/data/booth.js";

export default {
  props: ["zxdata", "currentPanoid"],
  data() {
    return {
      searchkey: "",
      initIdx: 0
    };
  },
  methods: {
    nextsw() {
      this.swiper.slideNext();
    },
    back() {
      this.$bus.$emit("emitShowZX", {
        show: false,
      });
    },
    onClick(data, idx) {
      if (this.swiper.realIndex != idx) {
        return
      }
      this.$bus.$emit("ifrMessage", {
        events: "flyToPano",
        data: data,
      });
      this.$emit("close");
    },
    search() {
      this.$emit("showSearch", true);
    },
  },
  directives: {
    swiper: directive,
  },
  computed: {
    swiper() {
      return this.$refs.bgsw.swiper;
    },
    zhanxiangData() {
      console.log(Booth.find((item) => item.id == this.theme));
      return Booth.find((item) => item.id == this.theme);
    },
    swiperOptions() {
      let that = this;
      return {
        watchSlidesProgress: true,
        effect: that.g_isLandscape ? "coverflow" : "slide",
        slidesPerView: "auto",
        centeredSlides: true,
        initialSlide: this.initIdx,
        coverflowEffect: {
          rotate: 0,
          stretch: 124,
          depth: 50,
          modifier: 2.6,
          slideShadows: false,
        },
        loop: false,
        on: that.g_isLandscape
          ? {}
          : {
            progress: function () {
              for (let i = 0; i < this.slides.length; i++) {
                var slide = this.slides.eq(i);
                var slideProgress = this.slides[i].progress;
                let modify = 1;
                let fixY = 0;

                if (Math.abs(slideProgress) > 1) {
                  modify = (Math.abs(slideProgress) - 1) * 0.3 + 1;
                }
                let translateX = slideProgress * modify * 120 + "px";
                let translateY = fixY + (that.g_isLandscape ? Math.abs(slideProgress) : -Math.abs(slideProgress)) * 35 + "px";

                let zIndex = 999 - Math.abs(Math.round(10 * slideProgress));
                let opacity = 1 - Math.abs(slideProgress) / 10;

                slide.transform(`translateX(${translateX}) translateY(${translateY})`);
                slide.css("zIndex", zIndex);
                slide.css("opacity", opacity);

                if (Math.abs(slideProgress) > 3) {
                  slide.css("opacity", 0);
                }
              }
            },
            setTransition: function (transition) {
              for (var i = 0; i < this.slides.length; i++) {
                var slide = this.slides.eq(i);
                slide.transition(transition);
              }
            }
          },
      };
    },
  },
  watch: {
    currentPanoid: {
      immediate: true,
      handler: function (newVal) {
        let idx = this.zxdata.company.findIndex((item) => newVal == item.panoId);
        if (idx > -1) {
          this.initIdx = idx
        }
      }
    }

  },

};
</script>

<style lang="less" scoped>
.zhanxiang {
  position: fixed;
  z-index: 999999;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(20px);

  .z-bar {
    height: 60px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px) brightness(100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;

    >img {
      width: 50px;
      flex-shrink: 0;
    }

    >span {
      text-align: left;
      display: inline-block;
      flex: auto;
      font-size: 20px;
      color: rgba(255, 255, 255, 0.5);
    }
  }

  .zhan-con {
    width: 100%;
    position: relative;
    height: calc(100vh - 60px);
    padding-bottom: 30px;

    >ul {
      width: 100%;
      align-items: flex-end;

      >li {
        width: 80%;
        max-height: 56vh;
        padding: 20px 16px;
        background-color: rgba(255, 255, 255, 1);
        box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
        border-radius: 5px 5px 5px 5px;
        background-image: url("~@/assets/images/proj2022/mobile/bg_heng.png");
        background-size: 100% auto;
        background-position: bottom left;
        background-repeat: no-repeat;

        .img {
          width: 100%;
          margin-top: 0;

          >img {
            width: 100%;
          }
        }

        >div {
          color: #000;
          text-align: center;
          margin-top: 30px;

          >h3 {
            font-size: 20px;
            margin-bottom: 10px;
          }

          >span {
            font-size: 16px;
            line-height: 1.5;
            display: inline-block;
            width: 70%;
          }
        }
      }
    }
  }
}

@media screen and (orientation: landscape) {
  .zhanxiang {
    position: fixed;
    z-index: 999999;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(20px);

    .z-bar {
      height: 60px;
      width: 100%;
      background-color: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(12px) brightness(100%);
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;

      >img {
        width: 50px;
        flex-shrink: 0;
      }

      >span {
        text-align: left;
        display: inline-block;
        flex: auto;
        font-size: 20px;
        color: rgba(255, 255, 255, 0.5);
      }
    }

    .zhan-con {
      width: 100%;
      position: relative;
      height: calc(100vh - 60px);
      padding-bottom: 0;

      >ul {
        width: 100%;
        align-items: center;

        >li {
          width: 58%;
          max-height: 90%;
          padding: 16px;
          background-color: rgba(255, 255, 255, 1);
          box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.16);
          background-image: url("~@/assets/images/proj2022/mobile/bg_shu.png");
          background-size: 100% auto;
          background-position: bottom left;
          background-repeat: no-repeat;
          display: flex;

          .img {
            flex: 2;
            width: auto;
            text-align: center;
            position: relative;
            overflow: hidden;

            >img {
              position: absolute;
              left: 50%;
              transform: translateX(-50%);
              width: auto;
              height: 100%;
            }
          }

          >div {
            color: #000;
            text-align: center;
            margin-top: 0;
            width: 24%;
            flex-shrink: 0;
            margin-left: 16px;

            >h3 {
              position: absolute;
              top: 16px;
              right: 16px;
              margin-left: 20px;
              font-size: 20px;
              writing-mode: vertical-lr;
              margin-bottom: 10px;
              display: inline-block;
              text-align: left;
              height: 100%;
            }

            >span {
              font-size: 18px;
              line-height: 1.2;
              margin-left: 10px;
              writing-mode: vertical-lr;
              text-align: left;
              display: inline-block;
              height: 100%;
              width: 100%;
              letter-spacing: 2px;
            }
          }
        }
      }
    }
  }
}
</style>