yoe-opm-web/src/views/diy/pccomponents/pages/brand.vue

<template>
  <div class="pcPages" :style="warpCss">
    <div class="big-brand" :style="boxCss">
      <el-image
        class="bigBrand-one"
        :src="componentData.imageUrl ? componentData.imageUrl : figure"
        :fit="componentData.imageUrl ? (componentData.imgType == 1 ? 'fill' : componentData.imgType == 2 ? 'contain' : 'cover') : 'cover'"
        :style="componentData.boxRadius ? { borderRadius: componentData.boxRadius + 'px' } : {}"
      />
      <div class="bigBrand-bos">
        <template v-for="(item, index) in componentData.brandList" :key="index">
          <div
            class="bigBrand-list hover-color"
            v-if="Number(index) < 10"
            :style="componentData.boxRadius ? { borderRadius: componentData.boxRadius + 'px' } : {}"
          >
            <el-image
              class="img"
              :src="item.imageUrl ? item.imageUrl : brand1"
              :fit="item.imgType == 1 ? 'fill' : item.imgType == 2 ? 'contain' : 'cover'"
              :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
            />
            <div :style="titleCss" class="bigBrand1 zi-hover">{{ item.title || '' }}</div>
            <div :style="subtitleCss" class="bigBrand2">
              {{ item.subtitle || '' }}
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

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

const props = defineProps<{
  index: number; // 确保声明 index 为可选属性
  row?: 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;
});

//组件样式
const boxCss = computed(() => {
  let style = '';
  if (componentData.componentStartBgColor && componentData.componentEndBgColor)
    style += `background:linear-gradient(${componentData.componentGradientAngle},${componentData.componentStartBgColor},${componentData.componentEndBgColor});`;
  else if (componentData.componentStartBgColor) style += 'background-color:' + componentData.componentStartBgColor + ';';
  else if (componentData.componentEndBgColor) style += 'background-color:' + componentData.componentEndBgColor + ';';
  if (componentData.number) style += 'flex:' + `0 0 calc((100% - ${(componentData.number - 1) * 10}px) / ${componentData.number})` + ';';
  return style;
});

// 标题样式
const titleCss = computed(() => {
  let style = '';
  if (componentData.titleColor) style += 'color:' + componentData.titleColor + ';';
  if (componentData.titleSize) style += 'font-size:' + componentData.titleSize + 'px;';
  if (componentData.titleWeight) style += 'font-weight:' + componentData.titleWeight + ';';
  return style;
});

// 副标题样式
const subtitleCss = computed(() => {
  let style = '';
  if (componentData.subtitleColor) style += 'color:' + componentData.subtitleColor + ';';
  if (componentData.subtitleSize) style += 'font-size:' + componentData.subtitleSize + 'px;';
  return style;
});
</script>

<style lang="scss" scoped>
.pcPages {
  width: 1200px;
  margin: 0 auto;
  // 大牌推荐
  .big-brand {
    height: 340px;
    display: flex;
    gap: 10px;
    width: 100%;

    .bigBrand-one {
      width: 230px;
      height: 340px;
    }

    .bigBrand-bos {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      overflow: hidden;
      height: 340px;

      .bigBrand-list {
        flex: 0 0 calc((100% - 40px) / 5);
        height: 165px;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 20px 0 20px;
        width: 0;

        .img {
          width: 120px;
          height: 50px;
        }

        .bigBrand1 {
          font-weight: 600;
          font-size: 14px;
          color: #101828;
          margin: 5px 0 4px 0;
        }

        .bigBrand2 {
          font-weight: 400;
          font-size: 12px;
          color: #364153;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          text-align: left;
          width: 100%;
        }
      }
    }
  }
}
</style>