yoe-opm-web/src/views/diy/pcPages/textTitle.vue

<template>
  <div class="pcPages">
    <div :style="warpCss">
      <!-- 风格1 -->
      <div :style="boxCss" v-if="componentData.styleType == 1">
        <div :style="titleCss">{{ componentData.title }}{{ componentData.titleUrl }}</div>
      </div>
      <!-- 风格2 -->
      <div :style="boxCss" class="style2 flex-row-center" v-else-if="componentData.styleType == 2">
        <div class="style2-border" :style="{ backgroundColor: componentData.titleColor }"></div>
        <div class="style2-text" :style="titleCss">{{ componentData.title }}</div>
        <div class="style2-border" :style="{ backgroundColor: componentData.titleColor }"></div>
      </div>
      <!-- 风格3 -->
      <div :style="boxCss" class="style3 flex-column-center" v-else-if="componentData.styleType == 3">
        <div :style="titleCss" class="mb-[4px]">{{ componentData.title }}</div>
        <div class="style3-border" :style="{ backgroundColor: componentData.titleColor }"></div>
        <div class="style3-jiao" :style="{ borderColor: componentData.titleColor }"></div>
      </div>
      <!-- 风格4 -->
      <div :style="boxCss" class="style4 flex-column-center" v-else-if="componentData.styleType == 4">
        <div :style="titleCss" class="mb-[4px]">{{ componentData.title }}</div>
        <div class="style4-border1" :style="{ backgroundColor: componentData.titleColor }"></div>
        <div class="style4-border2" :style="{ backgroundColor: componentData.titleColor }"></div>
      </div>
      <!-- 风格5 -->
      <div :style="boxCss" class="style5 flex-column-center" v-else-if="componentData.styleType == 5">
        <div :style="titleCss" class="mb-[4px]">{{ componentData.title }}</div>
        <div class="flex-row-center">
          <div class="style5-border" :style="{ backgroundColor: componentData.titleColor }"></div>
          <div class="style5-box" :style="{ borderColor: componentData.titleColor }"></div>
          <div class="style5-border" :style="{ backgroundColor: componentData.titleColor }"></div>
        </div>
      </div>
      <!-- 风格6 -->
      <div :style="boxCss" class="style6 flex-column-center" v-else-if="componentData.styleType == 6">
        <div class="style6-bos flex-row-center" :style="{ borderColor: componentData.titleColor }">
          <div class="style6-border style6-border1" :style="{ backgroundColor: componentData.titleColor }"></div>
          <div :style="titleCss" class="style6-box">{{ componentData.title }}</div>
          <div class="style6-border style6-border2" :style="{ backgroundColor: componentData.titleColor }"></div>
        </div>
      </div>
      <!-- 风格7 -->
      <div :style="boxCss" class="style7 flex-column-center" v-else-if="componentData.styleType == 7">
        <div class="style7-bos">
          <div class="style7-text" :style="titleCss">{{ componentData.title }}</div>
          <div class="style7-line" :style="{ borderColor: componentData.titleColor }"></div>
        </div>
      </div>
      <!-- 风格8 -->
      <div :style="boxCss" class="style8 flex-column-center" v-else-if="componentData.styleType == 8">
        <div class="style8-bos">
          <div class="style8-text" :style="titleCss">{{ componentData.title }}</div>
          <div class="style8-line" :style="{ borderColor: componentData.titleColor }"></div>
        </div>
      </div>
      <!-- 风格9 -->
      <div :style="boxCss" class="style9 flex-row-start" v-else-if="componentData.styleType == 9">
        <div class="style9-border" :style="{ backgroundColor: componentData.titleColor }"></div>
        <div class="pl-[10px]" :style="titleCss">{{ componentData.title }}</div>
      </div>
      <!-- 风格10 -->
      <div :style="boxCss" class="style10 flex-column-center" v-else-if="componentData.styleType == 10">
        <div class="style10-bos flex-row-start">
          <img class="style10-img1" src="@/assets/images/pcdiy/style10-1.png" alt="" />
          <div :style="titleCss">{{ componentData.title }}</div>
          <img class="style10-img2" src="@/assets/images/pcdiy/style10-2.png" alt="" />
        </div>
        <div class="mt-[2px]" :style="subtitleCss">
          {{ componentData.subtitle }}
        </div>
      </div>
      <!-- 风格11 -->
      <div :style="boxCss" class="style11 flex-column-center" v-else-if="componentData.styleType == 11">
        <div class="style11-bos flex-row-start">
          <img class="style11-img style11-img1" src="@/assets/images/pcdiy/style11-1.png" alt="" />
          <div :style="titleCss" class="style11-text">{{ componentData.title }}</div>
          <img class="style11-img style11-img2" src="@/assets/images/pcdiy/style11-2.png" alt="" />
          <img class="style11-img3" src="@/assets/images/pcdiy/style11-3.png" alt="" />
        </div>
        <div class="mt-[2px]" :style="subtitleCss">
          {{ componentData.subtitle }}
        </div>
      </div>
      <!-- 风格12 -->
      <div :style="boxCss" class="style12 flex-row-between" v-else-if="componentData.styleType == 12">
        <div class="flex-row-start">
          <div :style="titleCss">{{ componentData.title }}</div>
          <div :style="subtitleCss" class="ml-[5px]">{{ componentData.subtitle }}</div>
        </div>
        <div v-if="componentData.moreShow" class="flex-row-start" :style="moreCss">
          <div>{{ componentData.more }}</div>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <!-- 风格13 -->
      <div :style="boxCss" class="style13 flex-column-center" v-else-if="componentData.styleType == 13">
        <div class="style13-bos flex-row-start">
          <img class="style13-img1" src="@/assets/images/pcdiy/style13-1.png" alt="" />
          <div :style="titleCss">{{ componentData.title }}</div>
          <img class="style13-img2" src="@/assets/images/pcdiy/style13-2.png" alt="" />
        </div>
      </div>
      <!-- 风格14 -->
      <div :style="boxCss" class="style14 flex-row-between" v-else-if="componentData.styleType == 14">
        <div>
          <div :style="titleCss">{{ componentData.title }}</div>
          <div :style="subtitleCss">{{ componentData.subtitle }}</div>
        </div>
        <div v-if="componentData.moreShow" class="flex-row-start" :style="moreCss">
          <div>{{ componentData.more }}</div>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="Index" lang="ts">
import usePcdiyStore from '@/store/modules/pcdiy';
const diyStore = usePcdiyStore();

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

  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 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 + ';';
  if (componentData.titleAlign && componentData.styleType == 1) style += 'text-align:' + componentData.titleAlign;
  if (componentData.titleColor && (componentData.styleType == 6 || componentData.styleType == 7)) {
    style += 'border-color:' + componentData.titleColor;
  }
  if (componentData.titleColor && componentData.styleType == 8) {
    style += 'background-color:' + componentData.titleColor;
  }
  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;
});

// 更多样式
const moreCss = computed(() => {
  let style = '';
  if (componentData.moreColor) style += 'color:' + componentData.moreColor + ';';
  if (componentData.moreSize) style += 'font-size:' + componentData.moreSize + 'px;';
  return style;
});

// 背景图加遮罩层
const maskLayer = computed(() => {
  let style = '';
  //背景颜色
  if (componentData.componentStartBgColor) {
    if (componentData.componentStartBgColor && componentData.componentEndBgColor)
      style += `background:linear-gradient(${componentData.pageGradientAngle},${componentData.componentStartBgColor},${componentData.pageEndBgColor});`;
    else if (componentData.componentStartBgColor) style += `background: ${componentData.componentStartBgColor};`;
    else if (componentData.componentEndBgColor) style += `background: ${componentData.componentEndBgColor};`;
  }

  return style;
});
</script>

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

  .style2 {
    .style2-text {
      margin: 0 30px;
    }

    .style2-border {
      width: 160px;
      height: 1px;
    }
  }

  .style3 {
    position: relative;

    .style3-border {
      width: 260px;
      height: 1px;
    }

    .style3-jiao {
      background: transparent !important;
      display: inline-block;
      border: 6px solid #cccccc;
      border-top-color: transparent !important;
      border-left-color: transparent !important;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      margin-top: -6px;
    }
  }

  .style4 {
    .style4-border1 {
      width: 160px;
      height: 2px;
    }

    .style4-border2 {
      width: 260px;
      height: 1px;
    }
  }

  .style5 {
    .style5-box {
      width: 10px;
      height: 10px;
      border: 1px solid #000;
      display: inline-block;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
      margin: 0 10px;
    }

    .style5-border {
      width: 160px;
      height: 1px;
    }
  }

  .style6 {
    .style6-bos {
      border: 1px solid #ccc;
      padding: 4px 4px;
      position: relative;

      .style6-box {
        border: 1px solid #ccc;
        padding: 2px 14px;
      }

      .style6-border {
        width: 50px;
        height: 4px;
        position: absolute;
        top: 50%;

        &.style6-border1 {
          left: -40px;
        }

        &.style6-border2 {
          right: -40px;
        }
      }
    }
  }

  .style7 {
    .style7-bos {
      position: relative;
      margin-bottom: 6px;

      .style7-text {
        padding: 2px 14px;
        position: relative;
        z-index: 2;
        background-color: #ffffff;
        border: 1px solid #ccc;
      }

      .style7-line {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
        top: 6px;
        left: 6px;
        z-index: 0;
      }
    }
  }

  .style8 {
    .style8-bos {
      position: relative;
      margin-bottom: 6px;

      .style8-text {
        padding: 2px 14px;
        position: relative;
        z-index: 2;
        color: #ffffff !important;
      }

      .style8-line {
        position: absolute;
        width: 100%;
        height: 100%;
        border: 1px solid #ccc;
        top: 6px;
        left: 6px;
        z-index: 0;
      }
    }
  }

  .style9 {
    position: relative;

    .style9-border {
      height: 80%;
      width: 3px;
      position: absolute;
    }
  }

  .style10 {
    .style10-bos {
      height: 100%;
      position: relative;

      img {
        height: 100%;
        position: absolute;

        &.style10-img1 {
          left: -70%;
        }

        &.style10-img2 {
          right: -70%;
        }
      }
    }
  }

  .style11 {
    .style11-bos {
      height: 100%;
      position: relative;

      .style11-img {
        height: 100%;
        position: absolute;

        &.style11-img1 {
          left: -60%;
        }

        &.style11-img2 {
          right: -60%;
        }
      }

      .style11-text {
        position: relative;
        z-index: 2;
      }

      .style11-img3 {
        position: absolute;
        width: 120%;
        bottom: 0px;
        left: -10%;
      }
    }
  }

  .style13 {
    .style13-bos {
      height: 100%;
      position: relative;

      img {
        height: 100%;
        position: absolute;

        &.style13-img1 {
          left: -80%;
        }

        &.style13-img2 {
          right: -80%;
        }
      }
    }
  }
}

.textTitle-pages {
  width: 100%;

  .textTitle-bos {
    background-color: #ffffff;
    line-height: 45px;
    padding-left: 20px;
    font-size: 18px;
    color: #333333;
    font-weight: bold;
  }
}
</style>