Merge remote-tracking branch 'refs/remotes/origin/main' update contextual f...

shixian.shi

2023-11-23 adc88bd9e76644badbbe006913addfa7cbe5d89c

 web-pages/src/views/home/banner.vue

New file
@@ -0,0 +1,77 @@
<template>
    <div class="banner-comp">
        <div class="swiper-container" ref="swiper-container" :class="{hiddenPagination: bannerList && bannerList.length<2}">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="(item,index) in bannerList" :key="index">
                    <div class="item">
                        <img class="banner-bg" :src="item.url" alt="">
                        <div v-if="item.flag === 1" class="content">
                            <h3 class="yjqd">
                                一键启动FUNASR
                            </h3>
                            <p class="text">
                                FUNASR希望在语音识别的学术研究和工业应用之间架起一座桥梁。通过发布工业级<br />
                                语音识别模型的训练和微调，研究人员和开发人员可以更方便地进行语音识别模型的<br />
                                研究和生产，并推动语音识别生态的发展。让语音识别更有趣！
                            </p>

                            <div class="lxwm">
                                联系我们
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="swiper-pagination"></div>
        </div>
    </div>
</template>

<script>
import Swiper from 'swiper'
export default {
    name: 'banner-comp',
    data () {
        return {
            bannerList: [
                {
                    flag: 1,
                    url: require('./assets/images/banner.png')
                }
            ],
            swiperObj: null
        }
    },
    mounted () {
        this.$nextTick(() => {
            this.initSwiper()
        })
    },
    methods: {
        initSwiper () {
            if (this.swiperObj) {
                this.swiperObj.destroy()
            }
            // const that = this
            this.swiperObj = new Swiper(this.$refs['swiper-container'], {
                slidesPerView: 1,
                direction: 'vertical',
                pagination: {
                    el: '.swiper-pagination',
                    dynamicBullets: true
                },
                on: {
                    slideChangeTransitionEnd: function () {

                    },
                    init: function () {

                    }
                }
            })
        }
    }
}
</script>
<style src="./assets/css/banner.scss" lang="scss"></style>