daimp-front/sub-operation-service/src/views/ecommerce/components/banner.vue

<template>
  <div class="ecommerce-banner" :style="{ height: height }">
    <el-carousel height="height" motion-blur :indicator-position="indicatorPos" :arrow="arrow">
      <el-carousel-item v-for="(item, index) in list" :key="index">
        <img :src="getAssetsFile(item)" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { isEmpty, getAssetsFile } from '@/utils';

const props = defineProps({
  height: { type: String, default: '320px' },
  name: { type: String, default: 'agricultural' },
  imglist: {
    type: Array,
    default: () => {
      return [];
    },
  },
  indicatorPos: {
    type: String,
    default: '',
  },
  arrow: {
    type: String,
    default: 'hover',
  },
});

let nameVal = ref(props.name);
let list = reactive(props.imglist);

watch(
  () => (props.list, props.imglist),
  () => {
    nameVal.value = props.name;
    list = props.imglist;
  },
  {
    immediate: true,
  }
);
</script>
<style lang="scss" scoped>
.ecommerce-banner {
  width: 100%;
  ::v-deep() {
    .el-carousel__item {
      border-radius: 16px !important;
    }
  }
}
</style>