yifeng_integration/src/views/next/screen-content-left/home-left/index.vue

<template>
        <div>
                <div class='card h292'>
                        <screen-title>
                                <div slot="left" class="screen-title-left">移风简介</div>
                        </screen-title>
                        <div class="card-item-yfjj">
                                <!-- <transition name="slide-transform"> -->
                                <!-- <section v-if="currentIndex == 0"> -->
                                <img src="@/assets/images/kyll/garden.png" alt="">
                                <p>移风店镇位于即墨区西北部、青岛市版图的中心位置，地处威海、烟台、潍坊2小时经济圈内。距机场18公里、高铁站21公里，毗邻沈海、济青和青新高速，交通优势明显。
                                </p>
                                <p> 青岛(移风)国际蔬菜花卉种子产业园、即墨农业高新技术开发区均落于境内，将打造全国重要的蔬菜花卉种子研发和繁育中心，成为全国种业“南广州，北青岛”格局承载地。
                                </p>
                                <!-- </section> -->

                                <!-- <video v-if="currentIndex == 1" :src="videoUrl" style="width: 100%; height: 100%;"
                                                :controls="true" width="100%" height="100%" @play="handelVideoPlay"
                                                @pause="handelVideoPause"></video> -->
                                <!-- </transition> -->
                                <!-- <transition name="slide-transform">
                                        
                                </transition> -->

                        </div>
                </div>
                <div class='card h266' style="margin-top: 8px;">
                        <screen-title>
                                <div slot="left" class="screen-title-left">红色移风</div>
                        </screen-title>
                        <div class="card-item-hsyf">
                                <div class="item" v-for="(item, index) in list" :key="index">
                                        <img :src="item.img" alt="">
                                        <div class="right">
                                                <div class=" num">{{ item.num }}</div>
                                                <div class="bot">{{ item.name }}</div>

                                        </div>
                                </div>
                        </div>
                </div>
                <div class='card h318 m-top12'>
                        <screen-title>
                                <div slot="left" class="screen-title-left">种都移风</div>
                        </screen-title>
                        <div class="card-item-zdyf">
                                <video  :src="videoUrl" style="width: 100%; height: 100%;"
                                        :controls="true" width="100%" height="100%" @play="handelVideoPlay"
                                        @pause="handelVideoPause"></video>
                        </div>
                </div>
        </div>
</template>

<script>
export default {
        data() {
                return {
                        videoUrl: process.env.VUE_APP_VIDEO_URL + '1.mp4',
                        videoStatus: '',
                        intervalId: null,
                        currentIndex: 0,
                        list: [
                                { name: '新村党委', num: '10', img: require('@/assets/images/icon/xcdw.png') },
                                { name: '自然村党支部', num: '97', img: require('@/assets/images/icon/zrcdzb.png') },
                                { name: '两新党组织', num: '22', img: require('@/assets/images/icon/lxdzz.png') },
                                { name: '网格党小组', num: '235', img: require('@/assets/images/icon/wgdxz.png') },
                                { name: '党员中心户', num: '562', img: require('@/assets/images/icon/dyzxh.png') },
                                { name: '党员人数', num: '3496', img: require('@/assets/images/icon/dy.png') }
                        ]
                };
        },
        created() {
        },
        mounted() {
                this.intervalId = setInterval(() => {
                        this.switchBox();
                }, 3000); // 切换间隔为2秒
        },
        beforeDestroy() {
                clearInterval(this.intervalId); // 清除定时器，防止内存泄漏
        },
        methods: {
                switchBox() {
                        if (this.currentIndex === 0) {
                                this.currentIndex = 1;
                        } else if (this.currentIndex === 1 && this.videoStatus != 'play') {
                                this.currentIndex = 0;
                        }
                },
                handelVideoPlay() {
                        this.videoStatus = 'play'
                },
                handelVideoPause() {
                        this.videoStatus = 'pause'
                }
        },
        components: {},
        computed: {},
        watch: {},
}
</script>

<style lang="scss" scoped>
.card {
        width: 100%;

        &-item-yfjj {
                padding: 0 15px 15px;
                width: 100%;
                height: 100%;
                flex: 1;
                box-sizing: border-box;

                p {
                        text-indent: 2rem;
                        margin-top: 0px;
                        color: #BDCEEA;
                }

                img {
                        float: right;
                        shape-outside: inherit;
                        margin: 0 0 0 13px;
                        width: 200px;
                        height: 126px;
                }
        }

        &-item-hsyf {
                padding: 16px;
                width: 100%;
                flex: 1;
                box-sizing: border-box;
                display: flex;
                flex-wrap: wrap;

                .item {
                        width: 33.3%;
                        color: #fff;
                        display: flex;
                        align-items: center;

                        .right {
                                flex: 1;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;

                                .num {
                                        font-size: 20px;
                                        font-family: pangmenzhengdao;
                                }

                                .bot {
                                        color: #BCD0F0;
                                        font-size: 13px;
                                }
                        }

                        img {
                                width: 56px;
                                height: 56px;
                                margin-right: 5px;
                        }
                }

        }
        &-item-zdyf{
                padding: 16px;
                box-sizing: border-box;
        }
}

.box {
        width: 100px;
        height: 100px;
        background-color: lightblue;
        margin: 10px;
        display: inline-block;
        transition: transform 0.5s ease-in-out;
}

.active {
        transform: scale(1.2);
        /* 放大效果，可根据需求调整 */
}
</style>