81 lines
1.7 KiB
Vue
81 lines
1.7 KiB
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">
|
|
<costomImg :url="item" :preview-list="srcList" :is-view="isViewVal" style="height: 100%; object-fit: fill"></costomImg>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, watch, computed } from 'vue';
|
|
import { getAssetsFile } from '@/utils';
|
|
import costomImg from '@/components/costomImg.vue';
|
|
|
|
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',
|
|
},
|
|
isView: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
let nameVal = ref(props.name);
|
|
let list = ref([]);
|
|
|
|
let srcList = computed(() => {
|
|
let _list = [];
|
|
_list = props.imglist.map((m) => {
|
|
return getAssetsFile(m)?.href ?? '';
|
|
});
|
|
return _list;
|
|
});
|
|
|
|
let isViewVal = ref(props.isView);
|
|
|
|
watch(
|
|
() => (props.list, props.imglist, props.isView),
|
|
() => {
|
|
nameVal.value = props.name;
|
|
list.value = props.imglist;
|
|
isViewVal.value = props.isView;
|
|
},
|
|
{
|
|
immediate: true,
|
|
}
|
|
);
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.ecommerce-banner {
|
|
width: 100%;
|
|
position: relative; /* 确保内部元素定位正确 */
|
|
::v-deep() {
|
|
.el-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
img {
|
|
object-fit: fill !important;
|
|
}
|
|
}
|
|
.el-carousel__item {
|
|
border-radius: 16px !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|