修改轮播功能增加行业详情页面

.env.development

@@ -4,8 +4,8 @@ ENV = 'development'
 # base api
 PUBLIC_PATH = '/'
 ASSETS_DIR = 'assets'
-VUE_APP_BASE_API = 'http://192.168.0.128:8080'
-VUE_APP_BASE_API_TARGET = 'http://192.168.0.128:8080'
+VUE_APP_BASE_API = 'http://192.168.0.179:8100'
+VUE_APP_BASE_API_TARGET = 'http://192.168.0.179:8100'
 
 # VUE_APP_BASE_API = 'http://192.168.0.179:8099'
 # VUE_APP_BASE_API_TARGET = 'http://192.168.0.179:8099'

src/api/login.js

@@ -17,3 +17,19 @@ export function getOrgList(data = {}) {
                        data,
                    });
 }
+//  describe: 【前台】行业资讯 : Client Industry Controlle author: Wgy date:2020-08-05
+export function homeIndustryList(data = {}) {
+    return request({
+                       url:    `/home/industry/list`,
+                       method: 'post',
+                       data,
+                   });
+}
+//  describe: 【前台】行业资讯 : Client Industry Controlle author: Wgy date:2020-08-05
+export function homeIndustryInfo(data = {}) {
+    return request({
+                       url:    `/home/industry/info`,
+                       method: 'post',
+                       data,
+                   });
+}

src/router.js

@@ -46,6 +46,19 @@ const router = new Router({
                                       },
                                   },
                                   {
+                                      path: '/industryDetails',
+                                      name: 'industryDetails',
+                                      meta:      {
+                                          parentPath: 'croot',
+                                          breadcrumb: {
+                                              display: '行业详情',
+                                          },
+                                      },
+                                      component: () => {
+                                          return import(/* webpackChunkName: "index" */ './views/client/industryDetails.vue');
+                                      },
+                                  },
+                                  {
                                       name:      'admin',
                                       path:      '/admin',
                                       meta: {

src/views/client/Index.vue

@@ -5,7 +5,8 @@
             <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 :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>
@@ -55,7 +56,8 @@
                         <div class="products-services-img"><i></i></div>
                         <div class="products-services-content">
                             <h2>考试系统</h2>
-                            <p>麦塔在线考试系统满足不同行业考试考核需求：教育机构出题判卷、课后练习布置；企事业单位企业文化、业务水平提升；政府机构党建知识考核、提高服务意识；电力金融医疗专业技能、安全生产通通交给我们！</p>
+                            <p>
+                                麦塔在线考试系统满足不同行业考试考核需求：教育机构出题判卷、课后练习布置；企事业单位企业文化、业务水平提升；政府机构党建知识考核、提高服务意识；电力金融医疗专业技能、安全生产通通交给我们！</p>
                             <a>了解详情</a>
                         </div>
                     </li>
@@ -63,7 +65,8 @@
                         <div class="products-services-img"><i></i></div>
                         <div class="products-services-content">
                             <h2>培训系统</h2>
-                            <p>麦塔在线培训系统满足企业全流程培训场景，支持移动web端、PC端、APP端答题和学习，多种学习模式保障学习效果，结果及时反馈，让知识转化为行动，提升培训成效，让学员充分获取学习乐趣与动力，满足您的个性化培训考试需求。</p>
+                            <p>
+                                麦塔在线培训系统满足企业全流程培训场景，支持移动web端、PC端、APP端答题和学习，多种学习模式保障学习效果，结果及时反馈，让知识转化为行动，提升培训成效，让学员充分获取学习乐趣与动力，满足您的个性化培训考试需求。</p>
                             <a>了解详情</a>
                         </div>
                     </li>
@@ -71,7 +74,8 @@
                         <div class="products-services-img"><i></i></div>
                         <div class="products-services-content">
                             <h2>课件制作</h2>
-                            <p>麦塔能够快速搭建企业单位、教育机构学习资源库，满足学习平台需求，针对目标对象的学习习惯和学习方式个性化开发课程核心内容，将零散、隐性的知识系统化、显性化，现已开发了管理类通用课程、医药类课程、银行业课程等数千门课程内容。</p>
+                            <p>
+                                麦塔能够快速搭建企业单位、教育机构学习资源库，满足学习平台需求，针对目标对象的学习习惯和学习方式个性化开发课程核心内容，将零散、隐性的知识系统化、显性化，现已开发了管理类通用课程、医药类课程、银行业课程等数千门课程内容。</p>
                             <a>了解详情</a>
                         </div>
                     </li>
@@ -84,18 +88,54 @@
             <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>
+                    <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>
@@ -154,10 +194,18 @@
             <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>
+                    <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>
@@ -165,10 +213,11 @@
         <!-- 行业资讯 -->
         <div class="website-industry-information">
             <h1 class="website-index-title">行业资讯</h1>
-            <el-carousel :interval="200000" type="card"  :autoplay="false" arrow="always">
-                <el-carousel-item v-for="item in topCarousels" :key="item">
-                    <div class="website-img-box" :style="{backgroundImage: 'url(' + item + ')'}"></div>
-                    <div class="website-content-box"><h1>企业为什么需要微课</h1><p>新时代人才的特点，移动互联网、智能手机的普及，企业环境的变革，都是推动微课迅猛发展的重要原因。</p><a>了解详情</a></div>
+            <el-carousel :interval="200000" type="card" :autoplay="false" arrow="always">
+                <el-carousel-item v-for="(item,index) in topCarousels" :key="index">
+                    <div class="website-img-box" :style="{backgroundImage: 'url(' + item.pic + ')'}"></div>
+                    <div class="website-content-box"><h1>{{item.title}}</h1>
+                        <p>{{item.intro}}</p><a @click="checkInfo(item)">了解详情</a></div>
                 </el-carousel-item>
             </el-carousel>
         </div>
@@ -228,36 +277,37 @@
 </template>
 
 <script>
+    import { homeIndustryList } from '@/api/login.js';
+
     export default {
         name:       'index',
-        props:      {
-        },
+        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`),
+                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`),
+                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`),
@@ -270,16 +320,16 @@
                 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: [],
+                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: {},
@@ -287,21 +337,33 @@
         methods:    {
             handleSelect(key, keyPath) {
                 if (key === '考试平台') {
-                    window.location.href = "https://www.baidu.com";
+                    window.location.href = 'https://www.baidu.com';
                 } else if (key === '培训平台') {
-                    window.location.href = "http://39.97.175.90:7788/zentao/my/";
+                    window.location.href = 'http://39.97.175.90:7788/zentao/my/';
                 } else {
                     this.$router.push({ name: key });
                 }
             },
+            getshufflingData() {
+                homeIndustryList().then(res=>{
+                       if(res.code===0){
+                           console.log(res);
+                           this.topCarousels = res.data.data
+                       }
+                })
+            },
+            checkInfo(data){
+                this.$router.push({ name: 'industryDetails' ,params:data});
+            }
+
         },
         created() {
-
+            this.getshufflingData();
         },
         mounted() {
-            for (let i = 0; i < 5; i++) {
+           /* for (let i = 0; i < 5; i++) {
                 this.topCarousels.push(require(`@/assets/images/client/carousels/${i + 1}.jpg`));
-            }
+            }*/
 
         },
         beforeDestroy() {

src/views/client/industryDetails.vue

@@ -0,0 +1,72 @@
+<template>
+    <div>
+        <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>
+        <MtaBreadcrumb style="margin-left: 0"></MtaBreadcrumb>
+    </div>
+</template>
+
+<script>
+    import MtaBreadcrumb    from '@/components/client/common/MtaBreadcrumb.vue';
+    import { homeIndustryInfo } from '@/api/login.js';
+    export default {
+        name:       'courseDev',
+        props:      {
+        },
+        data() {
+            return {
+                activeIndex:  '首页',
+                iiId:  '',
+                infoData:{}
+            };
+        },
+        components: {
+            MtaBreadcrumb
+        },
+        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 });
+                }
+            },
+            getIndustryInfo(){
+                let req = {
+                    iiId  : this.iiId,
+                    }
+                homeIndustryInfo(req).then(res=>{
+                       if(res.code===0){
+                           console.log(res.data);
+                          this.infoData =  res.data
+                       }
+                })
+
+            }
+
+        },
+        created() {
+           console.log(this.$route.params);
+           this.iiId = this.$route.params.iiId;
+           this.getIndustryInfo()
+        },
+        mounted() {
+
+        },
+        beforeDestroy() {
+        },
+    };
+</script>
+<style>
+
+</style>