factoryDirector/src/components/Banne/index.vue

<template>
  <div class="block text-center">
    <el-carousel arrow="never" interval="5000" motion-blur>
      <el-carousel-item
        v-for="(item, index) in props.banneImageList"
        :key="index"
      >
        <img class="version-img" :src="item.imgUrl || item.image" alt="" />
        <div v-if="item.isBtn">
          <template v-for="(btnItem, btnIndex) in item.btnList" :key="btnIndex">
            <button
              class="detail"
              @click="toUrl(btnItem.jump_url)"
              v-if="btnItem.text"
              :style="{
                backgroundColor: btnItem.backgroundColor,
                color: btnItem.color,
              }"
            >
              {{ btnItem.text }}
            </button></template
          >
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from "element-plus";
const props = defineProps({
  banneImageList: {
    type: Array as any,
    default: () => {
      return [];
    },
  },
});

console.log(props.banneImageList);

const toUrl = (url: string) => {
  if (!url) {
    ElMessage({
      type: "warning",
      message: "待开放",
    });
    return;
  }
  window.open(url);
};
</script>
<style scoped lang="less">
.demonstration {
  color: var(--el-text-color-secondary);
}

:deep(.el-carousel__container) {
  height: 500px;
}

.detail {
  position: relative;
  width: 168px;
  height: 53px;
  background-color: #0d0fff;
  color: #fff;
  font-size: 16px;
  border: none;
  cursor: pointer;
  z-index: 1000;
  bottom: 181px;
  left: 360px;
  margin-right: 20px;
  border-radius: 4px;
}
.el-carousel__item img {
  width: 100%;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>