yoe-shop-web/src/views/home/pccomponents/pages/hot.vue

<template>
  <div class="pcPages" :style="warpCss">
    <el-image class="hot-image" :src="componentData.imageUrl ? componentData.imageUrl : figure" fit="fill" />
    <div
      @click="onClick(mapItem)"
      class="absolute hot-aaaaaa"
      v-for="(mapItem, mapIndex) in componentData.heatMapData"
      :key="mapIndex"
      :style="{ width: mapItem.width + '%', height: mapItem.height + '%', left: mapItem.left + '%', top: mapItem.top + '%' }"
    ></div>
  </div>
</template>

<script lang="ts" setup>
import usePcdiyStore from '@/store/modules/pcdiy';
import figure from '@/assets/images/figure.png';
const diyStore = usePcdiyStore();

const props = defineProps<{
  index: number; // 确保声明 index 为可选属性
  row?: any;
}>();

const onClick = (mapItem: any) => {};
const componentData = props.row ? props.row : diyStore.componentList[props.index];

const warpCss = computed(() => {
  let style = '';
  style += 'position:relative;';
  //背景颜色
  if (componentData.pageStartBgColor) {
    if (componentData.pageStartBgColor && componentData.pageEndBgColor)
      style += `background:linear-gradient(${componentData.pageGradientAngle},${componentData.pageStartBgColor},${componentData.pageEndBgColor});`;
    else if (componentData.pageStartBgColor) style += `background: ${componentData.pageStartBgColor};`;
    else if (componentData.pageEndBgColor) style += `background: ${componentData.pageEndBgColor};`;
  }
  //背景图片
  if (componentData.componentBgUrl) {
    style += `background-image:url('${componentData.componentBgUrl}');`;
    style += 'background-size: cover;background-repeat: no-repeat;';
  }
  //边距
  if (componentData.padding) {
    if (componentData.padding.top > 0) {
      style += 'padding-top:' + componentData.padding.top + 'px' + ';';
    }
    if (componentData.padding.bottom > 0) {
      style += 'padding-bottom:' + componentData.padding.bottom + 'px' + ';';
    }
    style += 'padding-right:' + componentData.padding.both + 'px' + ';';
    style += 'padding-left:' + componentData.padding.both + 'px' + ';';
  }
  //圆角
  if (componentData.topRounded) style += 'border-top-left-radius:' + componentData.topRounded + 'px;';
  if (componentData.topRounded) style += 'border-top-right-radius:' + componentData.topRounded + 'px;';
  if (componentData.bottomRounded) style += 'border-bottom-left-radius:' + componentData.bottomRounded + 'px;';
  if (componentData.bottomRounded) style += 'border-bottom-right-radius:' + componentData.bottomRounded + 'px;';

  //间距
  if (componentData.margin) {
    if (componentData.margin.top > 0) {
      style += 'margin-top:' + componentData.margin.top + 'px' + ';';
    }
    if (componentData.margin.bottom > 0) {
      style += 'margin-bottom:' + componentData.margin.bottom + 'px' + ';';
    }
  }
  return style;
});
</script>

<style lang="scss" scoped>
.pcPages {
  width: 1200px;
  margin: 0 auto;
  position: relative;

  .hot-image {
    width: 100%;


  }

  .hot-aaaaaa {
      border: 1px red solid;
      z-index: 10;
    }
}
</style>