第一次提交

components/page/diyComponents/hotZone/index.vue

@@ -0,0 +1,67 @@
+<template>
+  <!-- 热区 -->
+  <view class="diy-hotZone"
+    :style="{ paddingBottom: `${itemStyle.paddingTop * 2}rpx`, background: itemStyle.background }">
+    <view class="bg-image" :style="{ padding: `${itemStyle.paddingTop * 2}rpx ${itemStyle.paddingLeft * 2}rpx 0` }">
+      <image class="image" :src="data.imgUrl" mode="widthFix"></image>
+    </view>
+    <view class="zone-item" v-for="(item, index) in data.maps" :key="index"
+      :style="{ width: `${item.width}rpx`, height: `${item.height}rpx`, left: `${item.left}rpx`, top: `${item.top}rpx` }"
+      @click="onLink(item.link)">
+    </view>
+  </view>
+</template>
+
+<script>
+  import mixin from '../mixin'
+
+  export default {
+    name: "Images",
+
+    /**
+     * 组件的属性列表
+     * 用于组件自定义设置
+     */
+    props: {
+      itemIndex: String,
+      itemStyle: Object,
+      params: Object,
+      data: Object
+    },
+
+    mixins: [mixin],
+
+    /**
+     * 组件的方法列表
+     * 更新属性和数据的方法与更新页面数据的方法类似
+     */
+    methods: {
+
+    }
+
+  }
+</script>
+
+<style lang="scss" scoped>
+  .diy-hotZone {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .bg-image {
+    width: 100%;
+    z-index: 1;
+
+    .image {
+      display: block;
+      width: 100%;
+    }
+  }
+
+  .zone-item {
+    position: absolute;
+    z-index: 2;
+    // background-color: red;
+  }
+</style>