init

components/diy-components/diy-hot-area.vue

@@ -0,0 +1,73 @@
+<template>
+	<view :style="hotAreaWarp" class="hot-area-box">
+		<view class="simple-graph-wrap">
+			<image :style="{ height: value.imgHeight }" :src="$util.img(value.imageUrl)" mode="widthFix" :show-menu-by-longpress="true"/>
+			<!-- 热区功能 -->
+			<view class="heat-map" v-for="(mapItem, mapIndex) in value.heatMapData" :key="mapIndex" :style="{
+					width: mapItem.width + '%',
+					height: mapItem.height + '%',
+					left: mapItem.left + '%',
+					top: mapItem.top + '%'
+				}" @click.stop="$util.diyRedirectTo(mapItem.link)"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'diy-hot-area',
+		props: {
+			value: {
+				type: Object,
+				default: () => {
+					return {};
+				}
+			}
+		},
+		data() {
+			return {};
+		},
+		created() {},
+		watch: {
+			// 组件刷新监听
+			componentRefresh: function(nval) {}
+		},
+		computed: {
+			hotAreaWarp: function() {
+				var obj = '';
+				obj = 'background-color:' + this.value.componentBgColor + ';';
+				if (this.value.componentAngle == 'round') {
+					obj += 'border-top-left-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
+					obj += 'border-top-right-radius:' + this.value.topAroundRadius * 2 + 'rpx;';
+					obj += 'border-bottom-left-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
+					obj += 'border-bottom-right-radius:' + this.value.bottomAroundRadius * 2 + 'rpx;';
+				}
+				return obj;
+			}
+		},
+		methods: {}
+	};
+</script>
+
+<style lang="scss" scoped>
+	.hot-area-box {
+		position: relative;
+		width: 100%;
+		overflow: hidden;
+		box-sizing: border-box;
+	}
+
+	.simple-graph-wrap {
+		line-height: 0;
+		overflow: hidden;
+		position: relative;
+
+		image {
+			width: 100%;
+		}
+
+		.heat-map {
+			position: absolute;
+		}
+	}
+</style>