zc_saas_h5/pages5/scan/packPage.vue

<template>
  <view class="imagecontent">
    <nav-bar title="活动"></nav-bar>
    <movable-area scale-area class="movable-area">
      <movable-view
        class="movable-view"
        direction="all"
        @scale="onScale"
        scale="true"
        scale-min="1"
        :x="-80"
        scale-max="4"
        :scale-value="scale"
        @dblclick="dblclick"
      >
        <image
          src="https://web.xyyxt.net/static/img/a88848d9321bc1706685815ea2103b5.4a36b7f.png"
          mode="widthFix"
          class="qqqqq"
        >
        </image>
        <view class="image-box" :style="{ height: height + 'px' }">
          <view
            class="box"
            :class="'box' + index"
            @click="to(item.type)"
            v-for="(item, index) in goodsList"
            :style="{
              left: item.start[0] * 1.4 - (110 / width) * 100 + '%',
              top: item.start[1] + '%',
            }"
            :key="index"
          >
          </view>
        </view>
      </movable-view>
    </movable-area>
  </view>
</template>

<script>
// 19.8
// 7.83
// 1920
// 3319
export default {
  name: "SaasMiniprogramSprint",
  data() {
    return {
      scale: 1,
      height: 0,
      width: 0,
      goodsList: [
        {
          start: [18.75, 43.4],
          end: [38.55, 51.23],
          type: 1,
        },
        {
          start: [40.1, 43.4],
          end: [59.9, 51.23],
          type: 1,
        },
        {
          start: [61.45, 43.4],
          end: [81.25, 51.23],
          type: 2,
        },
        {
          start: [18.75, 52.12],
          end: [38.55, 59.95],
          type: 1,
        },
        {
          start: [40.1, 52.12],
          end: [59.9, 59.95],
          type: 2,
        },
        {
          start: [18.75, 79.99],
          end: [38.55, 87.82],
          type: 1,
        },
        {
          start: [40.1, 79.99],
          end: [59.9, 87.82],
          type: 1,
        },
        {
          start: [61.45, 79.99],
          end: [81.25, 87.82],
          type: 1,
        },
        {
          start: [18.75, 88.73],
          end: [38.55, 96.56],
          type: 2,
        },
        {
          start: [40.1, 88.73],
          end: [59.9, 96.56],
          type: 2,
        },
      ],
    };
  },
  onReady() {
    setTimeout(() => {
      uni
        .createSelectorQuery()
        .in(this)
        .select(".qqqqq")
        .boundingClientRect((rect) => {
          this.height = rect.height;
          this.width = rect.width;
        })
        .exec();
    }, 1000);
  },
  methods: {
    to(type) {
      if (type == 1) {
        uni.reLaunch({
          url: "/pages/course/index?cur=1&ename=考前培训&bname=一级建造师",
        });
      } else {
		  this.$store.state.current = 3
		  uni.switchTab({
		  	url: '/pages/course/index'
		  });
        // uni.reLaunch({
        //   url: "/pages/information/index",
        // });
      }
    },
    dblclick() {
      if (this.scale == 10) {
        this.scale = 1;
      } else {
        this.scale = 10;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.movable-view {
  width: 100%;
  height: calc(100% + 260rpx + 128rpx);
  display: flex;
  justify-content: center;
  position: relative;
}

.movable-area {
  height: 100%;
  width: 100%;
}

.movable-view image {
  width: 100%;
  transform: scale(1.4);
  margin-top: 260rpx;
}
.imagecontent {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 1);
  top: 0;
  position: fixed;
}
.image-box {
  width: 100%;
  position: absolute;
}
.box {
  // width: 19.8%;
  // height: 100rpx;
  width: 28%;
  height: 140rpx;
  // background: red;
  position: absolute;
}
</style>