|
@@ -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>
|