49 lines
1014 B
Vue
49 lines
1014 B
Vue
|
<template>
|
||
|
|
<div class="ecommerce-banner" :style="{ height: height }">
|
||
|
|
<el-carousel height="height" motion-blur>
|
||
|
|
<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 [];
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
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>
|