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

<template>
  <div class="pcPages" :style="warpCss">
    <div class="article-bos" :style="boxCss">
      <template v-for="(item, index) in dataList" :key="index">
        <div
          class="article-list hover-color"
          :style="dataCss"
          v-if="componentData.dataType == 2 && componentData.dataIds.length > 0 ? true : index < componentData.dataNumber"
          @click="onPath('/plan_info/project?id=' + item.id)"
        >
          <img :src="item.caseImage ? item.caseImage : figure" alt="" />
          <div class="caseTitle zi-hover">{{ item.caseTitle }}</div>
          <div class="projectBrief">{{ item.projectBrief }}</div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onPath } from '@/utils/siteConfig';
import { getServiceCaseList } from '@/api/home/diy';
import figure from '@/assets/images/figure.png';
const props = defineProps<{
  row?: any;
  datas?: any;
}>();
const componentData = props.row || {};
const dataList = ref<any>([]);

onMounted(() => {
  if (props.datas) {
    dataList.value = props.datas;
  } else {
    getDataList();
  }
});
const getDataList = () => {
  // 默认
  if (componentData.dataType == 1) {
    getServiceCaseList({ pageSize: 20 }).then((res) => {
      if (res.code == 200) {
        dataList.value = res.rows;
      }
    });
  } else {
    //手动选择
    if (componentData.dataIds.length > 0) {
      getServiceCaseList({ pageNum: 1, pageSize: 20, ids: componentData.dataIds.join(',') }).then((res) => {
        if (res.code == 200) {
          dataList.value = res.rows;
        }
      });
    }
  }
};

// 监听 componentData 变化，重新请求数据
watch(
  () => componentData.dataType,
  () => {
    getDataList();
  }
);

watch(
  () => componentData.dataIds,
  () => {
    getDataList();
  },
  { deep: true } // 5. 数组变化需要 deep 监听
);

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 + ';';
  return style;
});

//样式
const dataCss = computed(() => {
  let style = '';
  //背景颜色
  if (componentData.backgroundColor) style += 'background-color:' + componentData.backgroundColor + ';';
  //圆角
  if (componentData.boxTopRounded) style += 'border-top-left-radius:' + componentData.boxTopRounded + 'px;';
  if (componentData.boxTopRounded) style += 'border-top-right-radius:' + componentData.boxTopRounded + 'px;';
  if (componentData.boxBottomRounded) style += 'border-bottom-left-radius:' + componentData.boxBottomRounded + 'px;';
  if (componentData.boxBottomRounded) style += 'border-bottom-right-radius:' + componentData.boxBottomRounded + 'px;';
  //投影
  if (componentData.border == 2 && componentData.borderColor) style += 'box-shadow:' + componentData.borderColor + ' 0px 0px 5px';
  //描边
  if (componentData.border == 3 && componentData.borderColor) style += 'border:' + componentData.borderColor + ' 1px solid;';
  return style;
});
</script>

<style lang="scss" scoped>
.pcPages {
  width: 100%;
  max-width: 1500px;
  min-width: 1200px;
  margin: 0 auto;

  .article-bos {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;

    .article-list {
      flex: 0 0 calc((100% - 45px) / 4);
      width: 0;
      overflow: hidden;
      cursor: pointer;
      background-color: #ffffff;
      border-radius: 5px;

      .caseTitle {
        font-size: 14px;
        color: #333333;
        height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        width: 100%;
        margin: 5px 0;
        padding: 0 15px;
      }

      .projectBrief {
        font-size: 12px;
        color: #666666;
        height: 50px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        /* 添加标准属性 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        padding: 0 15px;
        margin-bottom: 15px;
      }

      img {
        width: 100%;
        height: 165px;
      }

      // flex: 0 0 calc((100% - ${(componentData.number - 1) * 10}px);
    }
  }
}
</style>