admin_home/src/views/template/style/components/banner/1.vue

<template>
    <div class="bannerItemBox">
        <el-carousel :interval="3333" height="405px" indicator-position="none" arrow="always" @change="change_fun">
            <el-carousel-item v-for="item in imagelist" :key="item.id">
                <img src="http://img.bjzxtw.org.cn/pre/image/jpeg/20250604/1749003080588921.jpg">
                <span class="swiper_dot1 dot1">
                    {{ item.title }}
                </span>
            </el-carousel-item>
            <div class="roll_num_box">
                <span class="roll_num_box_new">{{ roll_num_this + 1 }}</span>/{{ roll_num_lang }}
            </div>
        </el-carousel>
    </div>
</template>

<script>
import '@/styles/theme/body/index/banner/style1.less';
export default {
    props: {

    },
    data() {
        return {
            roll_num_this: 0,
            roll_num_lang: 3,
            imagelist: [
                {
                    id: 1,
                    imgurl: 'http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png',
                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
                },
                {
                    id: 2,
                    imgurl: 'http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png',
                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
                },
                {
                    id: 3,
                    imgurl: 'http://img.bjzxtw.org.cn/pre/image/png/20250604/1748998088187321.png',
                    title: '香港海洋公园为大熊猫“盈盈”“家姐”“细佬”搬新居迎宾客'
                },
            ]
        };
    },
    methods: {
        change_fun(the_1) {
            this.roll_num_this = the_1
        }
    },
    mounted() {

    },
};
</script>

<style scoped lang="less">

</style>