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

<template>
  <div class="pcPages">
    <div class="carousel-bos" :style="warpCss" v-if="componentData.styleType == 3">
      <el-carousel :height="170 * componentData.count + (componentData.count == 2 ? 10 : 0) + 'px'" :autoplay="false" arrow="always">
        <el-carousel-item v-for="(item1, index1) in dataList" :key="index1" class="w100% h100%">
          <div class="carousel-list">
            <div
              v-for="(item, index) in item1"
              :key="index"
              class="data-list flex-column-center hover-color"
              :style="boxCss"
              @click="onPath(item.url)"
            >
              <div :style="titleCss" class="zi-hover">{{ item.title || '' }}</div>
              <div :style="subtitleCss" class="mt-[2px] mb-[12px]">{{ item.subtitle || '' }}</div>
              <el-image
                class="img"
                :src="item.imageUrl ? item.imageUrl : figure"
                :fit="item.imgType == 1 ? 'fill' : item.imgType == 2 ? 'contain' : 'cover'"
                :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
              />
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div v-else :style="warpCss" class="data-bos">
      <div
        v-for="(item, index) in componentData.navlList"
        :key="index"
        class="data-list flex-column-center hover-color"
        :style="boxCss"
        @click="onPath(item.url)"
      >
        <div :style="titleCss" class="zi-hover">{{ item.title || '' }}</div>
        <div :style="subtitleCss" class="mt-[2px] mb-[12px]">{{ item.subtitle || '' }}</div>
        <el-image
          class="img"
          :src="item.imageUrl ? item.imageUrl : figure"
          :fit="item.imgType == 1 ? 'fill' : item.imgType == 2 ? 'contain' : 'cover'"
          :style="componentData.imageRadius ? { borderRadius: componentData.imageRadius + 'px' } : {}"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onPath } from '@/utils/siteConfig';
import figure from '@/assets/images/figure.png';
interface Props {
  row?: any;
}
const props = defineProps<Props>();
const componentData = props.row || {};

const dataList = computed(() => {
  const chunkSize = componentData.number * componentData.count;
  const result = [];
  for (let i = 0; i < componentData.navlList.length; i += chunkSize) {
    const chunk = componentData.navlList.slice(i, i + chunkSize);
    result.push(chunk);
  }
  return result;
});

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.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.styleType == 1) style += 'flex-wrap:wrap' + ';';
  }
  //间距
  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})` + ';';
  //圆角
  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;';
  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;
  .data-bos {
    display: flex;
    gap: 10px;
    width: 100%;
    overflow-x: auto;
    .data-list {
      min-height: 170px;
      cursor: pointer;

      .img {
        height: 80px;
        width: 80px;
      }
    }
  }

  .carousel-bos {
    .carousel-list {
      width: 100%;
      height: 100%;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      .data-list {
        height: 170px;

        .img {
          height: 80px;
          width: 80px;
        }
      }
    }
  }
}
</style>