portal/src/views/client/Index.vue

<template>
    <div class="website-index-page">
        <!-- 首页导航栏 -->
        <nav class="website-head">
            <div class="website-container head-layout">
                <div class="head-left">
                    <a></a>
                    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
                        <el-menu-item index="首页">首页</el-menu-item>
                        <el-menu-item index="考试平台">考试平台</el-menu-item>
                        <el-menu-item index="培训平台">培训平台</el-menu-item>
                        <el-menu-item index="课程开发">课程开发</el-menu-item>
                        <el-menu-item index="新闻资讯">新闻资讯</el-menu-item>
                        <el-menu-item index="帮助中心">帮助中心</el-menu-item>
                        <el-menu-item index="关于我们">关于我们</el-menu-item>
                    </el-menu>
                </div>
                <div class="head-right">
                    <i></i><span>4000-522-130</span>
                </div>
            </div>
        </nav>
        <!-- 首页banner栏 -->
        <div class="website-banner">
            <div class="website-container">
                <!--  banner左侧区域 -->
                <div class="banner-left">
                    <h1>让知识更有价值</h1>
                    <p>考试平台 / 培训平台 / 课程开发</p>
                </div>
                <!--  banner右侧区域 -->
                <div class="banner-right">
                    <div class="banner-tel-box">
                        <img :src="bannerTelImg"></img>
                    </div>
                    <i class="banner-pie"></i>
                    <div class="banner-i-run">
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                     <!--   <i></i>
                        <i></i>
                        <i></i>
                        <i></i>-->
                    </div>
                </div>
            </div>
        </div>

        <!--<div class="mta-index">
            <div class="block">
                <el-carousel :interval="200000" type="card" height="500px">
                    <el-carousel-item v-for="item in topCarousels" :key="item">
                        <div style="width: 1300px; height: 768px;">
                            <img :src="item">
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>-->
    </div>
</template>

<script>
    export default {
        name:       'index',
        props:      {
        },
        data() {
            return {
                //
                bannerTelImg: require(`@/assets/images/website/index/index-banner-screen.png`),
                activeIndex:  '首页',
                topCarousels: [],
            };
        },
        components: {},
        computed:   {},
        methods:    {
            handleSelect(key, keyPath) {
                if (key === '考试平台') {
                    window.location.href = "https://www.baidu.com";
                } else if (key === '培训平台') {
                    window.location.href = "http://39.97.175.90:7788/zentao/my/";
                } else {
                    this.$router.push({ name: key });
                }
            },
        },
        created() {

        },
        mounted() {
            for (let i = 0; i < 5; i++) {
                this.topCarousels.push(require(`@/assets/images/client/carousels/${i + 1}.jpg`));
            }

        },
        beforeDestroy() {
        },
    };
</script>
<style>
    .el-carousel__item img {
        width: 50%;
    }

    .el-carousel__item.is-active img {
        width: 100%;
    }


    .el-carousel__item {
        color:       #475669;
        font-size:   14px;
        line-height: 200px;
        margin:      0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99A9BF;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #D3DCE6;
    }

</style>