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">
                                        <img src="@/assets/images/index/yfys1.png" alt="">
                                        <div class="right">
                                                <div class="top">战略优势</div>
                                                <div class="center yellow"><span class="num">3</span> 年</div>
                                                <div class="bot">中央1号文件</div>
                                        </div>
                                </div>
                                <div class="item">
                                        <img src="@/assets/images/index/yfys2.png" alt="">
                                        <div class="right">
                                                <div class="top">自然优势</div>
                                                <div class="center green">北纬 <span class="num">36°</span></div>
                                                <div class="bot">黄金育种地带</div>
                                        </div>
                                </div>
                                <div class="item">
                                        <img src="@/assets/images/index/yfys3.png" alt="">
                                        <div class="right">
                                                <div class="top">区位优势</div>
                                                <div class="center violet"><span class="num">1</span> 小时</div>
                                                <div class="bot">交通辐射圈</div>
                                        </div>
                                </div>
                                <div class="item">
                                        <img src="@/assets/images/index/yfys4.png" alt="">
                                        <div class="right">
                                                <div class="top">产业优势</div>
                                                <div class="center blue"><span class="num">5.2</span> 亿元</div>
                                                <div class="bot">种子年销售额</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">
                        </div>
                </div>
        </div>
</template>

<script>
export default {
        data() {
                return {
                        videoUrl: process.env.VUE_APP_VIDEO_URL + '1.mp4',
                        videoStatus: '',
                        intervalId: null,
                        currentIndex: 0
                };
        },
        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%;
        display: flex;
        flex-direction: column;

        &-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;
                }
        }
}

.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>