轮播效果 动态绑定css

<template>
  <div class="style-com" :style="`background-image:url('${componentStyle.bgUrl}');`">
    <div class="component-title" v-if="componentStyle.isMainTitle" :style="{
      color: componentStyle.color,
      'text-align': componentStyle['text-align'],
    }" style="display:inline-block;width:auto;margin-left: 10px;">
      {{ dataItem.subject }}
    </div>
    <!-- tab轮播 -->
    <div class="listTab">
      <ul>
        <li v-for="(item, index) in dataItem.contentList" @click="clickTba(index)"
          :class="{ current: currentIndex == index}" :key="index"
          class="listTab_item"
          >
          <div>{{ item.label }}</div>
        </li>
      </ul>
    </div>
    <!-- 标签文本_文本根据宽度自适应 -->
    <div class="text-box" :style="`margin-top:${componentStyle.isMainTitle?'0px':'38px'}`">
      <!-- 内容模块 -->
      <div class="pages" v-for="(item, index) in dataItem.contentList[currentIndex]?.itemList" :key="index">
        <span class="triangle" :style="`border-color: transparent transparent transparent ${componentStyle.pfColor ? componentStyle.pfColor : '#1c9fe8'};
        border-right: 5px solid transparent;border-top: 5px solid transparent;border-bottom: 5px solid transparent;
        `"></span>
        <div class="text-content">
          <h2 class="text">{{ item.key }}</h2>
          <h6 class="desc">{{ item.value }}</h6>
        </div>
      </div>
      <!-- 小圆点 -->
    </div>
     <div class="radius_box">
        <div class="radius_index" :style="`color:${componentStyle.pfColor1?componentStyle.pfColor1:'#000'};`" v-for="(t, i) in radius" :key="i" :class="currentIndex == i ? 'radius' : ''">
        {{ t.index }}</div>
     </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentIndex: 0, //默认显示图片
      timer: null, //定时器
      radius: [{
        index: ''
      }, {
        index: ''
      }, {
        index: ''
      }, {
        index: ''
      }],
    };
  },
  props: {
    componentStyle: {
      type: Object,
      default: () => {
        return {
          color: "#000",
          // title:'留言板',
          "text-align": "left",
          bgUrl: "",
          pfColor: "",
        };
      },
    },
    dataItem: {
      type: Object,
      default: function () { },
    },
  },
  computed: {
    // 计算当前图片位置
    current() {
      //   如果当前index等等于数组length-1 就return0 否则就当前index加1
      if (this.currentIndex == this.dataItem.contentList.length - 1) {
        return 0;
      } else {
        return this.currentIndex + 1;
      }
    },
    currColor() {
      return this.componentStyle.pfColor ? this.componentStyle.pfColor : '#1c9fe8'
    },
    backCurrColor() {
      return this.componentStyle.pfColor1 ? this.componentStyle.pfColor1 : '#f1f1f1'
    }
  },
  mounted() {
    // 执行定时器
    this.autoPlay();
  },
  methods: {
    // 当点击后 当前索引等于点击的index
    clickTba(index) {
      this.currentIndex = index;
    },
    // 定时器函数
    autoPlay() {
      this.timer = setInterval(() => {
        this.clickTba(this.current);
      }, 3000);
    },
  },
};
</script>

<style lang="less" scoped>
ul li {
  list-style: none;
}

.listTab {
  float: right;
  margin: 10px 0 0 0;
}

.listTab ul {
  display: flex;
  justify-content: flex-end;
  color: #222222;
}

.listTab ul li {
  padding: 4px;
  font-size: 12px;
  margin-right: 4px;
}
.listTab_item{
  background: #f1f1f1;
}
.current {
  background: v-bind(backCurrColor);
  color: v-bind(currColor);
}
.text-box {
  width: 95%;
  margin: auto;
}

.pages {
  box-sizing: border-box;
  margin: 8px 0px;
  display: flex;

  .text-content {
    .desc {
      font-size: 12px;
      color: #666666;
      line-height: 16px;
      font-weight: normal;
      -webkit-line-clamp: 2;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .text {
      font-size: 12px;
      color: #000;
      line-height: 20px;
      -webkit-line-clamp: 1;
      word-break: break-all;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  .triangle {
    display: inline-block;
    width: 0;
    height: 0;
    border: 6px solid;
    border-color: orangered yellowgreen gold skyblue;
    border-right: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-top: 5px solid transparent;
    margin-top: 3px;
  }
}

.radius_box {
  width: 97.5%;
  display: flex;
  position: absolute;
  bottom: 4px;
  justify-content: center;

  .radius_index {
    width: 5px;
    height: 5px;
    margin-right: 4px;
    background: #ccc;
    display: inline-block;
    border-radius: 50%;
  }

  .radius {
    background: v-bind(currColor)
  }
}
</style>