usky-ssr/src/views/index/index.vue

<script lang="ts">
import { defineComponent, reactive,ref} from 'vue'
import { useStore  } from 'vuex'
import banner from '@/components/layout/banner.vue'
export default defineComponent({
    setup(){
        const store = useStore()
        const pageStatus = ref(false)
        // 首页箭头下拉
        function go_down(){
            globalThis.scrollTo({
                top: globalThis.innerHeight,
                behavior: "smooth"
            })
        }
        setTimeout(()=>{
            pageStatus.value = true
        },300)
        return { store, go_down, pageStatus }
    },
    components:{
        banner
    },
    asyncData({ store, route } :any){
        let params = reactive(route.value) //路由参数
        //获取菜单列表
        return store.dispatch('getMenuList',params).then(()=>{
            const data = reactive(store.state.menuList)
            let paramsData:any = reactive({
                params:{
                    categoryid: 0,
                    pageNum:1,
                    pageSize:100,
                    order:"sortindex",
                },
                index:"/",
                sub:0
            })//页面主题内容请求参数
            for(let i=0;i<data.length;i++){
                //主页内容
                if(!data[i].sname && params == data[i].path || !data[i].sname &&  data[i].path =="/"){
                    paramsData = {
                        params:{
                            categoryid: data[i].id,
                            pageNum:1,
                            pageSize:100,
                            order:"sortindex",
                        },
                        index:params.path,
                        sub:i
                    }
                    if(params.path == "/"){
                        paramsData.params.categoryid = data[i].id
                    }
                    return store.dispatch('getPageData',paramsData)
                }
            }
        })
    }
})

</script>
<template>
    <div class="pageContain">
        <div class="video-section">
            <banner />
            <div class="video-des">
                <div class="des1">
                    <p class="animate__animated  animate__fadeInUp">公司成立<span class="num1">20年</span>，围绕行业细分，累计服务超过
                        <span class="num1">5000</span> 家企业，近<span class="num1"> 10万 </span>个用户</p>
                </div>
                <div class="des2 desCom animate__animated  animate__flipInX"
                    style="top:43%; left:0;width:100%;text-align:center">
                    <p>核心价值观</p>
                    <span>一起梦想，一起成长，一起分享</span>

                </div>
                <div class="des3 desCom animate__animated  animate__lightSpeedInLeft" style="top:65%; left:20%;">
                    <p>企业使命</p>
                    <span>用数字化手段助力客户融入数智时代</span>
                </div>
                <div class="des4 desCom animate__animated  animate__lightSpeedInRight" style="top:65%; right:25%;">
                    <p>企业愿景</p>
                    <span>成为智慧数字产业的领跑者</span>
                </div>
            </div>
            <!-- 下拉 -->
            <span class="go_down" @click="go_down"></span>
        </div>
        <!-- 主体内容 -->
        <section v-if="store.state.pageContent.length>0" style="width:100vw;">
            <div class="whyUs-section pt-60 pb-60" v-for="(arr,index) in store.state.pageContent"
                :style="{background:(index % 2 == 1?'#F4F8FD':'#fff')}">
                <div class="container" v-show="pageStatus">
                    <div class="section-title text-center both-border pb-20">
                        <span class="title-tag">{{arr.title}}</span>
                        <span class="mb-30">{{arr.zhaiyao}}</span>
                    </div>
                
                    <div class="row aboutOnlyText" v-if="arr.image" 
                        :style="{padding:(index % 2 == 1?'40px 25px':' 40px 25px')}"
                        style="background-color: #ffff;    box-shadow: 0px 10px 20px 10px rgb(179 202 216 / 20%); align-items:center">
                        <div class="col-md-6  pr-40 aboutImg text-center ">
                            <img v-lazy="arr.image" alt="">
                        </div>
                        <div class="col-md-6" v-html="arr.content">
                        </div>
                    </div>
        
                    <div class="aboutOnlyText row text-center" v-else :style="{padding:(index % 2 == 1?'':'0 ')}"
                        style="background-color: #ffff;">
                        <div class=" about-text-image" v-html="arr.content">
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </div>
</template>
<style lang="scss" scoped>
</style>