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">
                    </div>
                    <i class="banner-pie"></i>
                    <div class="banner-i-run">
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- 产品和服务 -->
        <div class="website-products-services">
            <div class="website-container">
                <h1 class="website-index-title">产品和服务</h1>
                <ul class="products-services-box">
                    <li>
                        <div class="products-services-img"><i></i></div>
                        <div class="products-services-content">
                            <h2>考试平台</h2>
                            <p>麦塔考试平台满足不同行业考试考核需求：教育机构出题判卷、课后练习布置；企事业单位企业文化、业务水平提升；政府机构党建知识考核、提高服务意识；电力金融医疗专业技能、安全生产通通交给我们！</p>
                            <a>了解详情</a>
                        </div>
                    </li>
                    <li>
                        <div class="products-services-img"><i></i></div>
                        <div class="products-services-content">
                            <h2>培训平台</h2>
                            <p>麦塔培训平台满足企业全流程培训场景，支持移动web端、PC端、APP端答题和学习，多种学习模式保障学习效果，结果及时反馈，让知识转化为行动，提升培训成效，让学员充分获取学习乐趣与动力，满足您的个性化培训考试需求。</p>
                            <a>了解详情</a>
                        </div>
                    </li>
                    <li>
                        <div class="products-services-img"><i></i></div>
                        <div class="products-services-content">
                            <h2>课件开发</h2>
                            <p>麦塔能够快速搭建企业单位、教育机构学习资源库，满足学习平台需求，针对目标对象的学习习惯和学习方式个性化开发课程核心内容，将零散、隐性的知识系统化、显性化，现已开发了管理类通用课程、医药类课程、银行业课程等数千门课程内容。</p>
                            <a>了解详情</a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 行业学习需求 -->
        <div class="website-demand-box">
            <div class="website-container">
                <h1 class="website-index-title">满足不同行业学习需求</h1>
                <ul class="industry-box">
                    <li><img :src="demandImg1" alt="政府机构"><div><h2>政府机构</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
                    <li><img :src="demandImg2" alt="医药卫生"><div><h2>医药卫生</h2><p>提高行政服务人员</p><a>了解更多</a></div></li>
                    <li><img :src="demandImg3" alt="能源化工"><div><h2>能源化工</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
                    <li><img :src="demandImg4" alt="信息产业"><div><h2>信息产业</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
                    <li><img :src="demandImg5" alt="交通运输"><div><h2>交通运输</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
                    <li><img :src="demandImg6" alt="机械机电"><div><h2>机械机电</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
                    <li><img :src="demandImg7" alt="教育培训"><div><h2>教育培训</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
                    <li><img :src="demandImg8" alt="食品餐饮"><div><h2>食品餐饮</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
                    <li><img :src="demandImg9" alt="金融保险"><div><h2>金融保险</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
                    <li><img :src="demandImg10" alt="汽车制造"><div><h2>汽车制造</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
                    <li><img :src="demandImg11" alt="新闻出版"><div><h2>新闻出版</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
                    <li><img :src="demandImg12" alt="更多"><div><h2>更多</h2><p>提高行政服务人员的综合素质和能力的提升，党建知识的考核等</p><a>了解更多</a></div></li>
                </ul>
            </div>
        </div>

        <!-- 超过10万家客户的信任之选 -->
        <div class="website-customer-box">
            <div class="website-container">
                <h1 class="website-index-title">超过10万家客户的信任之选</h1>
                <ul class="customer-img-box">
                    <li><img :src="customerImg1" alt="中国人民银行"></li>
                    <li><img :src="customerImg2" alt="汇丰"></li>
                    <li><img :src="customerImg3" alt="中国银行"></li>
                    <li><img :src="customerImg4" alt="中信银行"></li>
                    <li><img :src="customerImg5" alt="中国民生银行"></li>
                    <li><img :src="customerImg6" alt="astellas"></li>
                    <li><img :src="customerImg7" alt="今日头条"></li>
                    <li><img :src="customerImg8" alt="华图教育"></li>
                    <li><img :src="customerImg9" alt="步步高"></li>
                    <li><img :src="customerImg10" alt="小天才"></li>
                    <li><img :src="customerImg11" alt="华发股份"></li>
                    <li><img :src="customerImg12" alt="上海航空"></li>
                    <li><img :src="customerImg13" alt="中国国际航空公司"></li>
                    <li><img :src="customerImg14" alt="中国东方航空"></li>
                    <li><img :src="customerImg15" alt="深圳航空"></li>
                    <li><img :src="customerImg16" alt="中建八局"></li>
                    <li><img :src="customerImg17" alt="SANOFI"></li>
                    <li><img :src="customerImg18" alt="大连海事大学"></li>
                    <li><img :src="customerImg19" alt="南京银行"></li>
                    <li><img :src="customerImg20" alt="中国人民银行"></li>
                </ul>
            </div>
        </div>

        <!-- 我们始终专注教育系统研发更懂用户需求 -->
        <div class="website-cert-box">
            <div class="website-container">
                <h1 class="website-index-title">我们始终专注教育系统研发更懂用户需求</h1>
                <div class="cert-img-box">
                    <img :src="certImg1" alt="栋科考试管理系统">
                    <img :src="certImg2" alt="栋科精品课程管理系统">
                    <img :src="certImg3" alt="栋科课程管理系统">
                    <img :src="certImg4" alt="栋科用户管理系统">
                </div>
                <div class="cert-img-box">
                    <img :src="certImg5" alt="栋科网校运营系统">
                    <img :src="certImg6" alt="麦塔考试系统">
                    <img :src="certImg7" alt="麦塔培训系统">
                    <img :src="certImg8" alt="知识产权管理体系认证证书">
                </div>
                <a>了解更多</a>
            </div>
        </div>

        <!-- 为什么选择我们 -->
        <div class="website-chose-box">
            <div class="website-container">
                <h1 class="website-index-title">为什么选择我们</h1>
                <ul class="chose-img-box">
                    <li><div><i></i></div><h2>专业的顾问服务</h2></li>
                    <li><div><i></i></div><h2>完善的培训体系</h2></li>
                    <li><div><i></i></div><h2>可靠的开发技术</h2></li>
                    <li><div><i></i></div><h2>成熟的运营能力</h2></li>
                </ul>
            </div>
        </div>
        <!--<div class="mta-index">
            <div class="block">
                <el-carousel :interval="200000" type="card" height="400px" :autoplay="false" arrow="always">
                    <el-carousel-item v-for="item in topCarousels" :key="item">
                        <div style="width: 400px; height: 400px;">
                            <img :src="item">
                            <div><h1>企业为什么需要微课</h1><p>新时代人才的特点，移动互联网、智能手机的普及，企业环境的变革，都是推动微课迅猛发展的重要原因。</p></div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>-->
    </div>
</template>

<script>
    export default {
        name:       'index',
        props:      {
        },
        data() {
            return {
                // 需求img
                bannerTelImg: require(`@/assets/images/website/index/index-banner-screen.png`),
                demandImg1: require(`@/assets/images/website/index/index-demand-img1.png`),
                demandImg2: require(`@/assets/images/website/index/index-demand-img2.png`),
                demandImg3: require(`@/assets/images/website/index/index-demand-img3.png`),
                demandImg4: require(`@/assets/images/website/index/index-demand-img4.png`),
                demandImg5: require(`@/assets/images/website/index/index-demand-img5.png`),
                demandImg6: require(`@/assets/images/website/index/index-demand-img6.png`),
                demandImg7: require(`@/assets/images/website/index/index-demand-img7.png`),
                demandImg8: require(`@/assets/images/website/index/index-demand-img8.png`),
                demandImg9: require(`@/assets/images/website/index/index-demand-img9.png`),
                demandImg10: require(`@/assets/images/website/index/index-demand-img10.png`),
                demandImg11: require(`@/assets/images/website/index/index-demand-img11.png`),
                demandImg12: require(`@/assets/images/website/index/index-demand-img12.png`),
                // 客户logo
                customerImg1: require(`@/assets/images/website/index/index-customer-img1.png`),
                customerImg2: require(`@/assets/images/website/index/index-customer-img2.png`),
                customerImg3: require(`@/assets/images/website/index/index-customer-img3.png`),
                customerImg4: require(`@/assets/images/website/index/index-customer-img4.png`),
                customerImg5: require(`@/assets/images/website/index/index-customer-img5.png`),
                customerImg6: require(`@/assets/images/website/index/index-customer-img6.png`),
                customerImg7: require(`@/assets/images/website/index/index-customer-img7.png`),
                customerImg8: require(`@/assets/images/website/index/index-customer-img8.png`),
                customerImg9: require(`@/assets/images/website/index/index-customer-img9.png`),
                customerImg10: require(`@/assets/images/website/index/index-customer-img10.png`),
                customerImg11: require(`@/assets/images/website/index/index-customer-img11.png`),
                customerImg12: require(`@/assets/images/website/index/index-customer-img12.png`),
                customerImg13: require(`@/assets/images/website/index/index-customer-img13.png`),
                customerImg14: require(`@/assets/images/website/index/index-customer-img14.png`),
                customerImg15: require(`@/assets/images/website/index/index-customer-img15.png`),
                customerImg16: require(`@/assets/images/website/index/index-customer-img16.png`),
                customerImg17: require(`@/assets/images/website/index/index-customer-img17.png`),
                customerImg18: require(`@/assets/images/website/index/index-customer-img18.png`),
                customerImg19: require(`@/assets/images/website/index/index-customer-img19.png`),
                customerImg20: require(`@/assets/images/website/index/index-customer-img20.png`),
                //证书图片
                certImg1: require(`@/assets/images/website/index/index-cert-img1.jpg`),
                certImg2: require(`@/assets/images/website/index/index-cert-img2.jpg`),
                certImg3: require(`@/assets/images/website/index/index-cert-img3.jpg`),
                certImg4: require(`@/assets/images/website/index/index-cert-img4.jpg`),
                certImg5: require(`@/assets/images/website/index/index-cert-img5.jpg`),
                certImg6: require(`@/assets/images/website/index/index-cert-img6.jpg`),
                certImg7: require(`@/assets/images/website/index/index-cert-img7.jpg`),
                certImg8: require(`@/assets/images/website/index/index-cert-img8.jpg`),
                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;
        /*transform:scale(1)!important;*/
    }

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

    .el-carousel__item:nth-child(2n+1) {
        background-color: #D3DCE6;
        /*transform:scale(1)!important;*/
    }

</style>