谢杰标 2 vuotta sitten
vanhempi
commit
5ba0fbae83
2 muutettua tiedostoa jossa 183 lisäystä ja 2 poistoa
  1. 2 2
      pages/index/index.vue
  2. 181 0
      pages5/scan/packPage.vue

+ 2 - 2
pages/index/index.vue

@@ -413,7 +413,7 @@ export default {
     };
   },
   async onLoad(option) {
-    uni.hideTabBar()
+    uni.hideTabBar();
     // #ifdef H5
     uni.setNavigationBarTitle({
       title: this.config.companyName,
@@ -626,7 +626,7 @@ export default {
           "pages/learn/index",
           "pages/questionBank/index",
           "pages/wd/index",
-          "pages/information/index"
+          "pages/information/index",
         ];
         const isSwitch = map.find((e) => jumpUrl.includes(e));
         // tab页

+ 181 - 0
pages5/scan/packPage.vue

@@ -0,0 +1,181 @@
+<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,
+        });
+      } else {
+        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>