|
|
@@ -1,780 +1,445 @@
|
|
|
<template>
|
|
|
- <div class="client-course-page">
|
|
|
- <!-- 课程开发页 banner栏 -->
|
|
|
- <div @click="clickBanner(bannerList[0].url)" :style="{backgroundImage: `url(${bannerList[0].pic||require(`~/static/images/client/course/course-banner-background.png`)})`}" class="client-course-banner"></div>
|
|
|
-
|
|
|
- <!-- 新闻资讯 -->
|
|
|
- <ul class="platform-menu-ul">
|
|
|
- <li @click="btnClick('kckf')" :class="{'active':divType==='kckf'}">课程开发</li><li @click="btnClick('kczy')" :class="{'active':divType==='kczy'}">课程资源</li>
|
|
|
- </ul>
|
|
|
-
|
|
|
- <div v-if="divType==='kczy'" class="client-resources-page">
|
|
|
- <!-- 题库资源页 banner栏 -->
|
|
|
- <div class="client-platform-banner">
|
|
|
- <div :style="{backgroundImage: `url(${require(`~/static/images/client/resources/resources-banner-background.jpg`)})`}" class="client-platform-banner"></div>
|
|
|
- </div>
|
|
|
- <!-- 课程企业通用岗位培训方案 -->
|
|
|
- <div class="client-container">
|
|
|
- <h4 class="client-title">课程企业通用岗位培训方案</h4>
|
|
|
- <ul class="train-scheme-list">
|
|
|
- <li><div><i></i><span>职业素养</span></div></li>
|
|
|
- <li><div><i></i><span>领导能力</span></div></li>
|
|
|
- <li><div><i></i><span>人力资源</span></div></li>
|
|
|
- <li><div><i></i><span>市场营销</span></div></li>
|
|
|
- <li><div><i></i><span>行政管理</span></div></li>
|
|
|
- <li><div><i></i><span>财务管理</span></div></li>
|
|
|
- <li><div><i></i><span>客服服务</span></div></li>
|
|
|
- <li><div><i></i><span>产品运营</span></div></li>
|
|
|
-
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="platform-products-services">
|
|
|
- <ul>
|
|
|
- <li>
|
|
|
- <div class="client-container">
|
|
|
- <div class="products-services-box products-contrary-box">
|
|
|
- <h4 class="client-title">帮助企业培养关键人才和提升岗位技能</h4>
|
|
|
- <img :src="trainAdvantagesImg1" alt="帮助企业培养关键人才和提升岗位技能" />
|
|
|
- <div class="products-services-content">
|
|
|
- <p>
|
|
|
- 课程总数近<span class="blue-big-size">5000门</span><br>
|
|
|
- 涵盖<span class="blue-big-size">2000多个</span>知识要点<br>
|
|
|
- 提供<span class="blue-big-size">8大通用岗位</span>培训方案<br>
|
|
|
- 课程资源<span class="blue-big-size">持续更新</span><br>
|
|
|
- </p>
|
|
|
- <div class="default-Btn-box">
|
|
|
- <a class="client-default-Btn" @click="applyFun" >申请方案</a>
|
|
|
- <span rel="nofollow" class="client-default-white-Btn" @click="goIntroductionPage">联系我们</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
-
|
|
|
- </div>
|
|
|
- <!-- 情景动画 -->
|
|
|
- <div class="course-learn-box">
|
|
|
- <h4 class="client-title">基于业务场景的课程形式</h4>
|
|
|
- <div class="client-container tc">
|
|
|
- <ul class="learn-box-list">
|
|
|
- <li>
|
|
|
- <a href="https://spdb.mtavip.com/sv/4f2e3958-17880e826df/4f2e3958-17880e826df.mp4"></a>
|
|
|
- <div>
|
|
|
- <span><img :src="courseVideoImg19" alt="FLASH动画课程"><i @click="playVideo(18)"></i></span>
|
|
|
- <p>FLASH动画课程</p>
|
|
|
- <p class="course-explain-black">以图文动画展现教与学之间的关系，达到预期的教学效果，改变学习的本质，课程形式适合所有行业</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="https://spdb.mtavip.com/65615d29a5da4478b8d4ebfd6810d2da/65ab43fa5fb942aab2af981c2f7ea5c7-da005714eae365940692db31fbf6e9b8-fd.mp4"></a>
|
|
|
- <div>
|
|
|
- <span><img :src="courseVideoImg8" alt="视频课程"><i @click="playVideo(19)"></i></span>
|
|
|
- <p>视频课程</p>
|
|
|
- <p class="course-explain-black">把教师视频与PowerPoint课件一同摄制下来，融合生成在线实战视频课件，让学员更容易理解</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce0a1a35285890792886070899/v.f30.mp4"></a>
|
|
|
- <div><span><img :src="courseVideoImg6" alt="名师讲堂"><i @click="playVideo(20)"></i></span>
|
|
|
- <p>名师讲堂</p>
|
|
|
- <p class="course-explain-black">各领域优秀讲师汇聚一堂，打造明星级课堂，轻松将员工带成干将</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <div class="platform-products-services">
|
|
|
- <a class="client-default-Btn" @click="applyFun" >申请方案</a>
|
|
|
- <span rel="nofollow" class="client-default-white-Btn" @click="goIntroductionPage">联系我们</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 新闻资讯 -->
|
|
|
- <div class="platform-news-information mta-hidden-xs">
|
|
|
- <div class="client-container">
|
|
|
- <h4 class="client-title">新闻资讯</h4>
|
|
|
- <ul>
|
|
|
- <li style="font-size: 16px" v-for="(item, index) in topCarousels">
|
|
|
- <div>
|
|
|
- <img :src="item.pic" alt="新闻资讯" />
|
|
|
- <h4 @click="checkInfo(item)">{{ item.title }}</h4>
|
|
|
- <span>发布时间：{{item.yyyy }}-{{ item.mmdd }}</span>
|
|
|
- <p>{{ item.intro }}</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ <div class="client-platform-page client-exam-page">
|
|
|
+ <!-- 广告图位置 -->
|
|
|
+ <div
|
|
|
+ :style="{backgroundImage: `url(${bannerList[0].pic || require(`~/static/images/client/train/train-banner-background.png`)})`}"
|
|
|
+ class="client-new-platform-banner"></div>
|
|
|
+
|
|
|
+ <!-- 专业团队满足客户需求 -->
|
|
|
+ <div class="platform-products-experience client-container">
|
|
|
+ <h4> 专业团队满足客户需求 </h4>
|
|
|
+ <p class="p1">服务企业 <i>100+</i>，累计开发课时 <i>30,000+</i></p>
|
|
|
+ <p class="p2">青谷是国内专业、成熟的课程设计、开发团队、拥有丰富的电子课程制作经验，
|
|
|
+ 业务方向包括教学设计体验、动画制作、视频拍摄等，涉及的行业有教育培训、零售连锁、机械制造、金融保险等。</p>
|
|
|
+ <!-- 岗位职责 -->
|
|
|
+ <gangweiList :list="gangwei" :pc-num="4" :h5-num="2"></gangweiList>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="btn-groups center">
|
|
|
+ <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
|
|
|
+ <onlineInformationBtn/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div v-if="divType==='kckf'">
|
|
|
- <!-- E-learning课程 -->
|
|
|
- <div class="course-learn-box" id="learnBox">
|
|
|
- <h4 class="client-title">E-learning课程</h4>
|
|
|
- <h5 class="client-subtitle-title">E-learning课程类型主要有：flash动画形式；两分屏、三分屏流媒体；电子杂志；视频实拍等。我们能帮您快速开发E-learning课件，高效搞定线上系统化学习</h5>
|
|
|
- <div class="client-container tc">
|
|
|
- <ul class="learn-box-list">
|
|
|
- <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cce7bfa5285890792886060567/v.f30.mp4"></a><div><span><img :src="courseVideoImg1" alt="两分屏类E-Learning课程"><i @click="playVideo(0)"></i></span><p>两分屏类E-Learning课程</p></div></li>
|
|
|
- <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ccefbfc5285890792886061298/v.f30.mp4"></a><div><span><img :src="courseVideoImg2" alt="三分屏类E-Learning课程"><i @click="playVideo(1)"></i></span><p>三分屏类E-Learning课程</p></div></li>
|
|
|
- <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9eeef6ee5285890792886133302/v.f30.mp4"></a><div><span><img :src="courseVideoImg3" alt="电子杂志类E-Learning课程"><i @click="playVideo(2)"></i></span><p>电子杂志类E-Learning课程</p></div></li>
|
|
|
- <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/64f88fc65285890792885983863/v.f30.mp4"></a><div><span><img :src="courseVideoImg4" alt="FLASH图文类E-Learning课程"><i @click="playVideo(3)"></i></span><p>FLASH图文类E-Learning课程</p></div></li>
|
|
|
- <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cc1569e5285890792886059626/v.f30.mp4"></a><div><span><img :src="courseVideoImg5" alt="FLASH交互类E-Learning课程"><i @click="playVideo(4)"></i></span><p>FLASH交互类E-Learning课程</p></div></li>
|
|
|
- <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce0a1a35285890792886070899/v.f30.mp4"></a><div><span><img :src="courseVideoImg6" alt="视频类E-Learning课程"><i @click="playVideo(5)"></i></span><p>视频类E-Learning课程</p></div></li>
|
|
|
- </ul>
|
|
|
- <a class="free-trial-default-btn" @click="applyFun" >申请方案</a>
|
|
|
- <a rel="nofollow" class="free-trial-default-btn course-apply-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" target="_blank">联系我们</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 微课程 -->
|
|
|
- <div class="course-learn-box" id="microBox">
|
|
|
- <h4 class="client-title">微课程</h4>
|
|
|
- <h5 class="client-subtitle-title">该类课程主要有：长图文微课、视频微课、H5交互微课等。由丰富的图形图像、多彩多姿的动画、音视频内容构成，短小精趣，在各类教育领域都有其发挥的空间，能实现现代人随时随地轻松学习的愿望</h5>
|
|
|
- <div class="client-container tc">
|
|
|
- <ul class="learn-box-list">
|
|
|
- <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f25da7a5285890792886164670/v.f30.mp4"></a><div><span><img :src="courseVideoImg7" alt="长图文类微课"><i @click="playVideo(6)"></i></span><p>长图文类微课</p></div></li>
|
|
|
- <li><a href="https://spdb.mtavip.com/65615d29a5da4478b8d4ebfd6810d2da/65ab43fa5fb942aab2af981c2f7ea5c7-da005714eae365940692db31fbf6e9b8-fd.mp4"></a><div><span><img :src="courseVideoImg8" alt="视频类微课"><i @click="playVideo(7)"></i></span><p>视频类微课</p></div></li>
|
|
|
- <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/650aa7e15285890792885993830/v.f30.mp4"></a><div><span><img :src="courseVideoImg9" alt="H5交互微课"><i @click="playVideo(8)"></i></span><p>H5交互微课</p></div></li>
|
|
|
- <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9c2e210d5285890793118303376/v.f30.mp4"></a><div><span><img :src="courseVideoImg10" alt="情景动画类微课"><i @click="playVideo(9)"></i></span><p>情景动画类微课</p></div></li>
|
|
|
- <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ee031e15285890792886129559/v.f30.mp4"></a><div><span><img :src="courseVideoImg11" alt="图文类微课"><i @click="playVideo(10)"></i></span><p>图文类微课</p></div></li>
|
|
|
- <li class="mta-hidden-xs"><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9a582fcf5285890793118274335/v.f30.mp4"></a><div><span><img :src="courseVideoImg12" alt="PPT微课"><i @click="playVideo(11)"></i></span><p>PPT微课</p></div></li>
|
|
|
- </ul>
|
|
|
- <a class="free-trial-default-btn" @click="applyFun">申请方案</a>
|
|
|
- <a rel="nofollow" class="free-trial-default-btn course-apply-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" target="_blank">联系我们</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
|
|
|
- <!-- 宣传片 -->
|
|
|
- <div class="course-learn-box" id="propagateBox">
|
|
|
- <h4 class="client-title">宣传片</h4>
|
|
|
- <h5 class="client-subtitle-title">宣传片主要有：二维动画制作、MG动画制作、手绘动画、视频实拍等多种形式。用于企业形象宣传、广告推广等，能将企业营销带到大众中去，发挥最大限度的作用</h5>
|
|
|
- <div class="client-container tc">
|
|
|
- <ul class="learn-box-list">
|
|
|
- <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce2c5775285890792886074523/v.f30.mp4"></a><div><span><img :src="courseVideoImg13" alt="手绘动画类宣传片"><i @click="playVideo(12)"></i></span><p>手绘动画类宣传片</p></div></li>
|
|
|
- <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cbfaddf5285890792886056576/v.f30.mp4"></a><div><span><img :src="courseVideoImg14" alt="MG动画类宣传片"><i @click="playVideo(13)"></i></span><p>MG动画类宣传片</p></div></li>
|
|
|
- <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9eed5aaf5285890792886130531/v.f30.mp4"></a><div><span><img :src="courseVideoImg15" alt="视频类宣传片"><i @click="playVideo(14)"></i></span><p>视频类宣传片</p></div></li>
|
|
|
- </ul>
|
|
|
- <a class="free-trial-default-btn" @click="applyFun" >申请方案</a>
|
|
|
- <a rel="nofollow" class="free-trial-default-btn course-apply-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" target="_blank">联系我们</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- 情景动画 -->
|
|
|
- <div class="course-learn-box" id="animationBox">
|
|
|
- <h4 class="client-title">情景动画</h4>
|
|
|
- <h5 class="client-subtitle-title">情景动画画面精美，将教学动画游戏化，利用别出心裁的镜头特效，摆脱枯燥的学习体验，提升学习者的学习乐趣</h5>
|
|
|
- <div class="client-container tc">
|
|
|
- <ul class="learn-box-list">
|
|
|
- <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9cc031355285890792886057331/v.f30.mp4"></a><div><span><img :src="courseVideoImg16" alt="儿歌动画"><i @click="playVideo(15)"></i></span><p>儿歌动画</p></div></li>
|
|
|
- <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9f121cdd5285890792886151677/v.f30.mp4"></a><div><span><img :src="courseVideoImg17" alt="故事教学"><i @click="playVideo(16)"></i></span><p>故事教学</p></div></li>
|
|
|
- <li><a href="https://1251882694.vod2.myqcloud.com/51d57535vodtransgzp1251882694/9ce35f5f5285890792886075881/v.f30.mp4"></a><div><span><img :src="courseVideoImg18" alt="过场动画"><i @click="playVideo(17)"></i></span><p>过场动画</p></div></li>
|
|
|
- </ul>
|
|
|
- <a class="free-trial-default-btn" @click="applyFun" >申请方案</a>
|
|
|
- <a rel="nofollow" class="free-trial-default-btn course-apply-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" target="_blank">联系我们</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <!-- PPT定制及美化 -->
|
|
|
- <div class="course-ppt-box" id="pptBox">
|
|
|
- <h4 class="client-title">PPT定制及美化</h4>
|
|
|
- <h5 class="client-subtitle-title-big">专业平面设计师和美学动效师操刀设计、可视化处理以及动画制作，让PPT具有极强的美感和冲击力</h5>
|
|
|
- <div class="client-container tc">
|
|
|
- <ul>
|
|
|
- <li><img :src="coursePPtImg1" alt="扁平卡通类PPT"><p>扁平卡通类PPT</p></li>
|
|
|
- <li><img :src="coursePPtImg2" alt="图文类PPT"><p>图文类PPT</p></li>
|
|
|
- <li><img :src="coursePPtImg3" alt="扁平卡通类PPT"><p>扁平卡通类PPT</p></li>
|
|
|
- </ul>
|
|
|
- <a class="free-trial-default-btn" @click="applyFun" >申请方案</a>
|
|
|
- <a rel="nofollow" class="free-trial-default-btn course-apply-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" target="_blank">联系我们</a>
|
|
|
- </div>
|
|
|
+ <!-- 动画类课程 -->
|
|
|
+ <div class="platform-animation-donghua client-container my-video-content">
|
|
|
+ <h4> 动画类课程 </h4>
|
|
|
+ <p>动画类课程不受限于人员和场地，比较方便、生动形象地呈现知识内容。
|
|
|
+ 主要包含有：图文课程、情景动画课程、交互式课程、三分屏课程、SCORM框架式课程。适用各种行业：</p>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '教育培训业', url: video1, imgUrl:img1}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '金融保险业', url: video2, imgUrl:img2}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '食品餐饮业', url: video3, imgUrl:img3}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '生产制造业', url: video4, imgUrl:img4}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '信息通讯业', url: video5, imgUrl:img5}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '汽车销售业', url: video6, imgUrl:img6}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="btn-groups center">
|
|
|
+ <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
|
|
|
+ <onlineInformationBtn/>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- H5平面设计 -->
|
|
|
- <div class="course-H5-box" id="h5Box">
|
|
|
- <h4 class="client-title">H5平面设计</h4>
|
|
|
- <h5 class="client-subtitle-title-big">H5有着易传播、跨平台的特性，所以常常会作为现在社会化传播的首选方案。我们能够创作出服务于营销的设计和文案，打破一维思维状态，转向发散性思维，将视觉设计综合应用在营销企划、用户体验、特效制作、媒体投放等方方面面，将作品做扎实作品做饱满。</h5>
|
|
|
- <div class="client-container tc">
|
|
|
- <ul>
|
|
|
- <li><img :src="courseH5Img1" alt="H5平面设计" width="333" height="383"></li>
|
|
|
- <li><img :src="courseH5Img2" alt="H5平面设计" width="455" height="383"></li>
|
|
|
- <li><img :src="courseH5Img3" alt="H5平面设计" width="333" height="383"></li>
|
|
|
- </ul>
|
|
|
- <a class="free-trial-default-btn" @click="applyFun" >申请方案</a>
|
|
|
- <a rel="nofollow" class="free-trial-default-btn course-apply-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" target="_blank">联系我们</a>
|
|
|
- </div>
|
|
|
+ <!-- 视频类课程 -->
|
|
|
+ <div class="platform-animation client-container my-video-content has-p">
|
|
|
+ <h4> 视频类课程 </h4>
|
|
|
+ <p>视频类课程可以直观形象地呈现知识内容。主要包含有：企业宣传片、实验操作课程、课堂实录课程、会议访谈等等。
|
|
|
+ 动画类课程也可以导出成MP4视频格式文件呈现。适用各种行业：
|
|
|
+ </p>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '能源化工业', url: video7, imgUrl:img7}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '金融保险业', url: video8, imgUrl:img8}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '教育培训业', url: video9, imgUrl:img9}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '管理培训业', url: video10, imgUrl:img10}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '食品餐饮业', url: video11, imgUrl:img11}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '服装零售业', url: video12 , imgUrl:img12}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="btn-groups center">
|
|
|
+ <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
|
|
|
+ <onlineInformationBtn/>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 视频后期处理 -->
|
|
|
- <div class="course-videoPos-box" id="videoPostBox">
|
|
|
- <h4 class="client-title">视频后期处理</h4>
|
|
|
- <h5 class="client-subtitle-title-big">除了基础的拍摄外，视频的设计风格也十分重要，视频的后期处理能够颠覆整体的设计效果，我们承接视频剪辑后期制作、影视剪辑后期特效制作、精剪年会视频特效、片头、婚礼、宣传片视频剪辑，十余年制作经验让画面生出生机，跃动起来，广告动画后期就选栋科</h5>
|
|
|
- <div class="client-container tc">
|
|
|
- <ul>
|
|
|
- <li><img :src="videoPosImg1" alt="视频后期处理" width="514" height="256" ><p>2D转3D电影</p></li>
|
|
|
- <li><img :src="videoPosImg2" alt="视频后期处理" width="514" height="256" ><p>宣传视频</p></li>
|
|
|
- </ul>
|
|
|
- <a class="free-trial-default-btn" @click="applyFun" >申请方案</a>
|
|
|
- <a rel="nofollow" class="free-trial-default-btn course-apply-btn" href="https://p.qiao.baidu.com/cps/chat?siteId=17939829&userId=40179606&siteToken=35cf5be39b078111b613c15d6bab5493" target="_blank">联系我们</a>
|
|
|
- </div>
|
|
|
+ <!-- H5类课程 -->
|
|
|
+ <div class="platform-animation client-container my-video-content has-p">
|
|
|
+ <h4> H5类课程 </h4>
|
|
|
+ <p>通用HTML5技术、将图文、互动测试、动画视频、游戏等多种形式结合在一起，课程交互性强、学员参与程度高。主要包含有：图文H5、游戏H5等。
|
|
|
+ </p>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '现代制造业', url: video13, imgUrl:img13}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '教育培训业', url: video14, imgUrl:img14}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '物流业', url: video15, imgUrl:img15}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="btn-groups center">
|
|
|
+ <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
|
|
|
+ <onlineInformationBtn/>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 新闻资讯 -->
|
|
|
- <div class="platform-news-information mta-hidden-xs">
|
|
|
- <div class="client-container">
|
|
|
- <h4 class="client-title">新闻资讯</h4>
|
|
|
- <ul>
|
|
|
- <li style="font-size: 16px" v-for="(item, index) in topCarousels">
|
|
|
- <div>
|
|
|
- <img :src="item.pic" alt="新闻资讯" />
|
|
|
- <h4 @click="checkInfo(item)">{{ item.title }}</h4>
|
|
|
- <span>发布时间：{{item.yyyy }}-{{ item.mmdd }}</span>
|
|
|
- <p>{{ item.intro }}</p>
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
+ <!-- PPT定制及美化 -->
|
|
|
+ <div class="platform-animation client-container my-video-content has-p">
|
|
|
+ <h4> PPT定制及美化 </h4>
|
|
|
+ <p>
|
|
|
+ 现在PPT正成为人们工作生活的重要组成部分，在工作汇报、企业宣传、产品推介、婚礼庆典、项目竞标、管理咨询等领域发挥重大的作用。
|
|
|
+ 青谷曾多次为客户在各种大赛中取得前三甲的优异成绩。
|
|
|
+ </p>
|
|
|
+ <ul>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '金融保险业', url: video16, imgUrl:'', imgUrl:img16}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '教育培训业', url: video17, imgUrl:'', imgUrl:img17}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <video-card class="my-video" :card-data="{title: '生产制造业', url: video18, imgUrl:'', imgUrl:img18}"
|
|
|
+ @card-click="showVideo"></video-card>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="btn-groups center">
|
|
|
+ <applyBtn class="btn-item" @active-pc="onApplyBtnActive" @active-h5="onApplyBtnActiveH5"/>
|
|
|
+ <onlineInformationBtn/>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
- <!-- 视频播放弹窗 -->
|
|
|
- <el-dialog
|
|
|
- :title="title"
|
|
|
- :visible.sync="videoDialogFlag"
|
|
|
- @close="closeVideoDialog"
|
|
|
- class="course-video-dialog"
|
|
|
- center>
|
|
|
- <video controls :src="source" class="course-video-box"></video>
|
|
|
- <p>{{footerText}}</p>
|
|
|
- </el-dialog>
|
|
|
-
|
|
|
- <!-- 申请方案弹窗 -->
|
|
|
- <el-dialog
|
|
|
- :close-on-click-modal="false"
|
|
|
- :visible.sync="telDl"
|
|
|
- @close="delDlClose"
|
|
|
- class="application-scheme-dialog"
|
|
|
- center>
|
|
|
- <i></i>
|
|
|
- <p>免费获得课程开发解决方案</p>
|
|
|
- <el-form :model="telChangeDate" status-icon :rules="telRules" ref="ruleTelForm" class="application-scheme-form">
|
|
|
- <el-form-item prop="tel">
|
|
|
- <el-input v-model="telChangeDate.tel" placeholder="请输入手机号" class="dialog-input-tel"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <div id="your-dom-id" class="nc-container"></div>
|
|
|
- <el-form-item prop="verification">
|
|
|
- <div class="verification">
|
|
|
- <el-input v-model="telChangeDate.verification" placeholder="请输入验证码" class="dialog-input-code"></el-input>
|
|
|
- <el-button @click="checkVerification" :disabled="btnTextDisabled" class="dialog-code-btn">{{btnText}}</el-button>
|
|
|
- </div>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
- <div class="application-scheme-btn" @click="dialogSave">申请方案</div>
|
|
|
- <span>免费热线：400-052-2130</span><a href="https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd" target="_blank">在线客服</a>
|
|
|
- </el-dialog>
|
|
|
+ <!-- 新闻资讯 -->
|
|
|
+ <newsComp2 :newsData="topCarousels"></newsComp2>
|
|
|
|
|
|
+ <videoDialog :source="curVideo" :visible.sync="visible"></videoDialog>
|
|
|
|
|
|
+ <!-- 申请方案 -->
|
|
|
+ <applicationDialog :visible.sync="telDl"></applicationDialog>
|
|
|
|
|
|
</div>
|
|
|
-
|
|
|
-
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import applyBtn from "~/components/common/applyBtn";
|
|
|
+ import applicationDialog from "~/components/common/applicationDialog";
|
|
|
+ import onlineInformationBtn from "~/components/common/onlineInformationBtn";
|
|
|
+ import newsComp2 from "~/components/common/newsComp2";
|
|
|
+ import chanPinTiYan from "~/components/common/chanPinTiYan";
|
|
|
+ import videoDialog from "~/components/common/videoDialog";
|
|
|
+ import videoCard from "~/components/common/videoCard"
|
|
|
+ import gangweiList from "@/components/common/layout/desComp/gangweiList";
|
|
|
+ import {BannerImgs, classifys, kechengdingzhi} from "~/defaultConfig"
|
|
|
+
|
|
|
+ /**
|
|
|
+ * @ 产品与服务 -> 课程定制
|
|
|
+ */
|
|
|
export default {
|
|
|
- name: 'courseware',
|
|
|
- layout:'templateB',
|
|
|
- async asyncData({ $axios, store }) {
|
|
|
- // 设置选中菜单
|
|
|
- store.commit('setActiveNav', '/courseware');
|
|
|
-
|
|
|
- let [res1,res2] = await Promise.all([
|
|
|
- await $axios.$post(`/home/news/carousel`,{'newsClassifyId':0,'keyword':'课程'}).then(res=>{
|
|
|
- return res
|
|
|
- }),
|
|
|
- await $axios.$post(`/home/banner/list`, { 'code': 4 }).then(res => {
|
|
|
- return res;
|
|
|
- }),
|
|
|
- ])
|
|
|
- return {
|
|
|
- topCarousels : res1.data.data ||[],
|
|
|
- bannerList: res2.data.data||[],
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
+ name: "courseCustom",
|
|
|
+ layout: 'templateB',
|
|
|
components: {
|
|
|
+ onlineInformationBtn,
|
|
|
+ newsComp2,
|
|
|
+ chanPinTiYan,
|
|
|
+ videoDialog,
|
|
|
+ videoCard,
|
|
|
+ applyBtn,
|
|
|
+ applicationDialog,
|
|
|
+ gangweiList
|
|
|
},
|
|
|
- props: {
|
|
|
- },
|
|
|
- data() {
|
|
|
+ async asyncData({$axios, store}) {
|
|
|
+ const arr = [
|
|
|
+ $axios.$post(`/home/news/carousel`, {
|
|
|
+ 'newsClassifyId': classifys.kechengdingzhi.classify,
|
|
|
+ 'keyword': classifys.kechengdingzhi.keyword
|
|
|
+ }),
|
|
|
+ $axios.$post(`/home/banner/list`, {'code': BannerImgs.kechengdingzhi}),
|
|
|
+ ]
|
|
|
+ const [res1, res2] = await Promise.all(arr);
|
|
|
return {
|
|
|
- // describe: 课程开发相关 author: Wgy date:6/8/21
|
|
|
- trainAdvantagesImg1: require(`~/static/images/client/resources/train-scheme-img.png`),
|
|
|
- courseVideoImg19: require(`~/static/images/client/course/course-video-img19.png`),
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- // 菜单栏上方
|
|
|
- courseNavImg: require(`~/static/images/client/course/course-nav-img.png`),
|
|
|
- // 视频封面
|
|
|
- courseVideoImg1: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
- courseVideoImg2: require(`~/static/images/client/course/course-video-img2.png`),
|
|
|
- courseVideoImg3: require(`~/static/images/client/course/course-video-img3.png`),
|
|
|
- courseVideoImg4: require(`~/static/images/client/course/course-video-img4.png`),
|
|
|
- courseVideoImg5: require(`~/static/images/client/course/course-video-img5.png`),
|
|
|
- courseVideoImg6: require(`~/static/images/client/course/course-video-img6.png`),
|
|
|
- courseVideoImg7: require(`~/static/images/client/course/course-video-img7.png`),
|
|
|
- courseVideoImg8: require(`~/static/images/client/course/course-video-img8.png`),
|
|
|
- courseVideoImg9: require(`~/static/images/client/course/course-video-img9.png`),
|
|
|
- courseVideoImg10: require(`~/static/images/client/course/course-video-img10.png`),
|
|
|
- courseVideoImg11: require(`~/static/images/client/course/course-video-img11.png`),
|
|
|
- courseVideoImg12: require(`~/static/images/client/course/course-video-img12.png`),
|
|
|
- courseVideoImg13: require(`~/static/images/client/course/course-video-img13.png`),
|
|
|
- courseVideoImg14: require(`~/static/images/client/course/course-video-img14.png`),
|
|
|
- courseVideoImg15: require(`~/static/images/client/course/course-video-img15.png`),
|
|
|
- courseVideoImg16: require(`~/static/images/client/course/course-video-img16.png`),
|
|
|
- courseVideoImg17: require(`~/static/images/client/course/course-video-img17.png`),
|
|
|
- courseVideoImg18: require(`~/static/images/client/course/course-video-img18.png`),
|
|
|
- // ppt图片
|
|
|
- coursePPtImg1: require(`~/static/images/client/course/course-ppt-img1.png`),
|
|
|
- coursePPtImg2: require(`~/static/images/client/course/course-ppt-img2.png`),
|
|
|
- coursePPtImg3: require(`~/static/images/client/course/course-ppt-img3.png`),
|
|
|
- // H5图片
|
|
|
- courseH5Img1: require(`~/static/images/client/course/course-h5-img1.png`),
|
|
|
- courseH5Img2: require(`~/static/images/client/course/course-h5-img2.png`),
|
|
|
- courseH5Img3: require(`~/static/images/client/course/course-h5-img3.png`),
|
|
|
- // 视频后期处理
|
|
|
- videoPosImg1: require(`~/static/images/client/course/video-pos-img1.png`),
|
|
|
- videoPosImg2: require(`~/static/images/client/course/video-pos-img2.png`),
|
|
|
- videoDialogFlag:false,
|
|
|
- source:'',
|
|
|
- footerText:'',
|
|
|
- title:'',
|
|
|
- videoArray:[
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'教师视频与讲课PowerPoint课件一并摄制下来生成的课件，因此被称为‘二分屏’课件。',
|
|
|
- title:'两分屏类E-Learning课程',
|
|
|
- },
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1ddbed8f-17470897f92-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'是把教师视频与PowerPoint课件一并摄制下来，生成电脑格式的文件，通过Windows系统里的IE浏览器进行播放',
|
|
|
- title:'三分屏类E-Learning课程',
|
|
|
- },
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/35f356f6-17470879c83-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'兼具了平面与互联网两者的特点，且融入了图像、文字、声音、视频、游戏等相互动态结合来呈现给读者',
|
|
|
- title:'电子杂志类E-Learning课程',
|
|
|
- },
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/42d3f2e8-17470860cff-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'主要以图片的形式表现教学者的作用和教与学之间的关系，从而改变教育的本质',
|
|
|
- title:'FLASH图文类E-Learning课程',
|
|
|
- },
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/18d95d93-17470860cfb-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'是可以操作互动的教学，简单的比较，交互式是游戏',
|
|
|
- title:'FLASH交互类E-Learning课程',
|
|
|
- },
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/359ee794-17470899bcf-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'以视频的形式表现出要授予的课程内容',
|
|
|
- title:'视频类E-Learning课程',
|
|
|
- },
|
|
|
- //微课程
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/4f1c04ef-174708abedf-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'是通过图片发布文字信息的一种形式',
|
|
|
- title:'长图文类微课',
|
|
|
- },
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/65615d29a5da4478b8d4ebfd6810d2da/65ab43fa5fb942aab2af981c2f7ea5c7-da005714eae365940692db31fbf6e9b8-fd.mp4',
|
|
|
- fotterText:'以简短视频的形式讲授一两个知识点，没有复杂的课程体',
|
|
|
- title:'视频类微课',
|
|
|
- },
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/13a4929d-17470860cf9-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'指页面内可以包含图片、链接，甚至音乐、程序等非文字元素互动教学',
|
|
|
- title:'H5交互微课',
|
|
|
- },
|
|
|
-
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1eb213bd-17470897778-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'以故事情景引出产品内容的介绍',
|
|
|
- title:'情景动画类微课',
|
|
|
- },
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/a262a7b-174708aa838-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'主要以图片的形式表现，图片有手绘原素相结合，更加明确的展示了课程的内容',
|
|
|
- title:'图文类微课',
|
|
|
- },
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/ef9b83b-17470860d19-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'主要是以教师根据教学内容PPT进行假想授课',
|
|
|
- title:'PPT微课',
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- //宣传片
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/1c896f73-174708a6de4-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'一张张手绘画出来制作合成动画形式',
|
|
|
- title:'手绘动画类宣传片',
|
|
|
- },
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/57b79278-17470860d16-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'是平面设计与动画片之间的一种产物，MG的重点是非叙述性非具象化的视觉表现形式，节奏感更强，动画的流畅与每屏之前的衔接性更好',
|
|
|
- title:'MG动画类宣传片',
|
|
|
- },
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/39296d0d-174708a6aea-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'以拍摄视频的形式呈现出企业的介绍和产品宣传',
|
|
|
- title:'视频类宣传片',
|
|
|
- },
|
|
|
- // 情景动画
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/159fac7b-17470879c88-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'以经典儿歌结合动画表达出课程要讲授的内容',
|
|
|
- title:'儿歌动画',
|
|
|
- },
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/13f16002-1747088d2a9-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'是教师在课堂上根据所讲授的内容穿插些相关的简明、短小故事、以说明注解强调所讲内容',
|
|
|
- title:'故事教学',
|
|
|
- },
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/113211bf-1747089269d-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'以情景动画形式丰富多样，游戏化教学和精美动画相结合',
|
|
|
- title:'过场动画',
|
|
|
- },
|
|
|
-
|
|
|
-// describe: 课程开发 author: Wgy date:6/8/21
|
|
|
-
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/sv/4f2e3958-17880e826df/4f2e3958-17880e826df.mp4',
|
|
|
- fotterText:'以图文动画展现教与学之间的关系，达到预期的教学效果，改变学习的本质，课程形式适合所有行业',
|
|
|
- title:'FLASH动画课程',
|
|
|
- },
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/65615d29a5da4478b8d4ebfd6810d2da/65ab43fa5fb942aab2af981c2f7ea5c7-da005714eae365940692db31fbf6e9b8-fd.mp4',
|
|
|
- fotterText:'把教师视频与PowerPoint课件一同摄制下来，融合生成在线实战视频课件，让学员更容易理解',
|
|
|
- title:'视频课程',
|
|
|
- },
|
|
|
- {
|
|
|
- url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/359ee794-17470899bcf-0006-732a-c93-687b7.mp4',
|
|
|
- fotterText:'各领域优秀讲师汇聚一堂，打造明星级课堂，轻松将员工带成干将',
|
|
|
- title:'名师讲堂',
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- ],
|
|
|
- btnTextDisabled: false,
|
|
|
- telDl: false,
|
|
|
- btnText: '获取验证码',
|
|
|
- countdown: 60, // 60秒倒计时
|
|
|
- sliderData: {},
|
|
|
- appKey: 'FFFF0N00000000007EC0',
|
|
|
- telChangeDate: {},
|
|
|
- telRules: {
|
|
|
- tel: [
|
|
|
- { trigger: 'blur', required: true, message: '请输入手机号' },
|
|
|
- ],
|
|
|
- verification: [
|
|
|
- { trigger: 'blur', required: true, message: '请输入验证码' },
|
|
|
- ],
|
|
|
- },
|
|
|
- divType:'kckf',
|
|
|
-
|
|
|
- };
|
|
|
+ topCarousels: res1.data.data || [],
|
|
|
+ bannerList: res2.data.data || [],
|
|
|
+ }
|
|
|
},
|
|
|
- head(){
|
|
|
+ head() {
|
|
|
return {
|
|
|
- SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
|
|
|
- title: '微课制作_课程开发_动画视频课件制作_微课制作公司',
|
|
|
+ title: '课件制作_视频课件制作_flash课件制作_青谷软件',
|
|
|
meta: [
|
|
|
{
|
|
|
name: 'keywords',
|
|
|
- content: '动画微课制作,课程制作公司'
|
|
|
+ content: '课件制作,课件制作公司,课件设计,ppt课件制作'
|
|
|
},
|
|
|
{
|
|
|
- name:'description',
|
|
|
- content:'麦塔微课制作团队业务范围E-learning课程、微课程、宣传片、情景动画、PPT定制及美化、H5平面设计、视频后期处理等；海量精品课程专业定制，持续提升在线教学体验，赋能企业线上化进程。'
|
|
|
+ name: 'description',
|
|
|
+ content: '青谷软件拥有国内专业、成熟的设计团队，丰富的电子课程制作经验，规范可靠的研发流程、完善的质量评估和卓越的项目管理体系，能高效稳定地保障支付'
|
|
|
}
|
|
|
],
|
|
|
}
|
|
|
},
|
|
|
- computed: {},
|
|
|
- methods: {
|
|
|
- // 判断是否为移动端
|
|
|
- getSystemWidth(){
|
|
|
- var browserWidth=document.documentElement.clientWidth;
|
|
|
- if(browserWidth <= 768){
|
|
|
- this.SystemWidthFlag = true;
|
|
|
- }else{
|
|
|
- this.SystemWidthFlag = false;
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- goIntroductionPage(){
|
|
|
- this.$router.push({ name: 'introduction' });
|
|
|
- },
|
|
|
-
|
|
|
- // tab点击
|
|
|
- btnClick(data){
|
|
|
- if(data==='kczy'){
|
|
|
- this.divType = 'kczy'
|
|
|
- }else{
|
|
|
- this.divType = 'kckf'
|
|
|
- }
|
|
|
- },
|
|
|
- checkInfo(data) {
|
|
|
- const opt = {
|
|
|
- id: data.code,
|
|
|
- };
|
|
|
- this.$router.push({ name: 'news-id', params: opt });
|
|
|
- },
|
|
|
- clickBanner(data){
|
|
|
- if(data){
|
|
|
- window.open(data)
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
- applyFun() {
|
|
|
- this.getSystemWidth();
|
|
|
- if(this.SystemWidthFlag){
|
|
|
- this.$router.push({ name: 'CourseDevelopPhone', query: {pageName: 'course',} });
|
|
|
- }else {
|
|
|
- this.telDl = true;
|
|
|
- this.sliderFun();
|
|
|
- }
|
|
|
- },
|
|
|
+ computed: {
|
|
|
+ gangwei() {
|
|
|
+ return kechengdingzhi
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ curVideo: '',
|
|
|
+ visible: false,
|
|
|
+ telDl: false,
|
|
|
|
|
|
- dialogSave(){
|
|
|
- this.$refs.ruleTelForm.validate((valid) => {
|
|
|
- if (valid) {
|
|
|
- // 请求后台
|
|
|
- const options = {
|
|
|
- phone: this.telChangeDate.tel,
|
|
|
- code: this.telChangeDate.verification,
|
|
|
- };
|
|
|
-
|
|
|
- this.$axios.$post('/develop/add',options).then(res=>{
|
|
|
- if (res.code === 0 && res.data) {
|
|
|
- this.telDl = false;
|
|
|
- this.$message.success('申请成功');
|
|
|
- } else {
|
|
|
- this.$message.error('申请失败');
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
+ // 动画类
|
|
|
+ img1: require(`~/static/videoImages/v22.jpg`),
|
|
|
+ video1: 'https://spdb.mtavip.com/fb6e272b7adc433293d9f6a5c4153929/0ff00bc3ad684691bcbbb8aba4c5cbba-4049f6277ce4dad7a147ac9cd169d8d6-fd.mp4',
|
|
|
+ img2: require(`~/static/videoImages/v23.jpg`),
|
|
|
+ video2: 'https://spdb.mtavip.com/76d8403a8c6e4b31b221c329edfb4121/7fc717a4645c43bca6eb822be05e97c4-f56c11d92e98793d6c5a60b8b1b8b836-fd.mp4',
|
|
|
+ img3: require(`~/static/videoImages/v24.jpg`),
|
|
|
+ video3: 'https://spdb.mtavip.com/1d97ffbafd9b480689d8325f25dd6687/741fc75193ba434ebe3d82729908b30c-5a0a871558b82ed7931a623ce567bbec-fd.mp4',
|
|
|
+ img4: require(`~/static/videoImages/v25.jpg`),
|
|
|
+ video4: 'https://spdb.mtavip.com/154fe0ee513c4f40959fbd257dba11c1/0c9548a50ced4655be44224201ded347-b013d93710816be6591056f4537f370f-fd.mp4',
|
|
|
+ img5: require(`~/static/videoImages/v26.jpg`),
|
|
|
+ video5: 'https://spdb.mtavip.com/4f9b699f109b4257912e0615b690d397/a3d8c7f257444de18bd1a34952ed072b-9f98375a54ca60f2acbb73b064ba06b2-fd.mp4',
|
|
|
+ img6: require(`~/static/videoImages/v27.jpg`),
|
|
|
+ video6: 'https://spdb.mtavip.com/81563222a2f34b41a59ee96d98bb573d/c07bc0c4aaad4ab7b649ff725909b485-d5359de0edbb3916ae7dd14572e67e05-fd.mp4',
|
|
|
+
|
|
|
+ // 视频课程类
|
|
|
+ img7: require(`~/static/videoImages/v28.jpg`),
|
|
|
+ video7: 'https://spdb.mtavip.com/5089ca88405a4c7fba0e394086fb85f4/affd808fcf7b44989ad69e4ae4f9c284-dae0483416557d263fa2c5a8324bfb85-fd.mp4',
|
|
|
+ img8: require(`~/static/videoImages/v29.jpg`),
|
|
|
+ video8: 'https://spdb.mtavip.com/109a74f9316441808eba15f6ddc406fa/c622690c366341419aac39cbd6d94e65-ddd3c1bcab068e2f0ed00e01e80bf9b1-fd.mp4',
|
|
|
+ img9: require(`~/static/videoImages/v30.jpg`),
|
|
|
+ video9: 'https://spdb.mtavip.com/90f0af993cb84f6abcd152183f4034fd/6248e7092a394c7eb1bd63d5e748b7cb-43f729d3f2620ef3cf6fb4b911428d70-fd.mp4',
|
|
|
+ img10: require(`~/static/videoImages/v31.jpg`),
|
|
|
+ video10: 'https://spdb.mtavip.com/b81eec156310477c99f9769754442aa8/a335a98f2c0e4f6a961e809e30cfaa3d-1c4e98daa27d9683cb778bdfc2e40e1e-fd.mp4',
|
|
|
+ img11: require(`~/static/videoImages/v32.jpg`),
|
|
|
+ video11: 'https://spdb.mtavip.com/eae8071f826a4c57b5f2c933e67b0591/692213c2030340d78aafe26cbf1ee9ee-cc94cdfb48eb85919dae9ca8de2081b2-fd.mp4',
|
|
|
+ img12: require(`~/static/videoImages/v33.jpg`),
|
|
|
+ video12: 'https://spdb.mtavip.com/75423037de7c44da91f24a5dcffb6e1a/774aece0c6e6437ea294d29163d138ef-b028588659f56ee623807230e897aceb-fd.mp4',
|
|
|
+
|
|
|
+ // H5 类课
|
|
|
+ img13: require(`~/static/videoImages/v34.jpg`),
|
|
|
+ video13: 'https://spdb.mtavip.com/b9047471e06d40a69443a1811fba0336/75daf06aacc44483be3859542160314e-691fc8a51efd7eb3c73f1826a9cba8ba-fd.mp4',
|
|
|
+ img14: require(`~/static/videoImages/v35.jpg`),
|
|
|
+ video14: 'https://spdb.mtavip.com/fb6e272b7adc433293d9f6a5c4153929/0ff00bc3ad684691bcbbb8aba4c5cbba-4049f6277ce4dad7a147ac9cd169d8d6-fd.mp4',
|
|
|
+ img15: require(`~/static/videoImages/v36.jpg`),
|
|
|
+ video15: 'https://spdb.mtavip.com/5daa9a33cdf34b848ca5855aa2e57927/9b9a433072a54182870fc3cbfef8f5c1-162c78c7631b21f79645e9c5e7eaeeaf-fd.mp4',
|
|
|
+
|
|
|
+ // PPT定制及美化
|
|
|
+ img16: require(`~/static/videoImages/v37.jpg`),
|
|
|
+ video16: 'https://spdb.mtavip.com/76d8403a8c6e4b31b221c329edfb4121/7fc717a4645c43bca6eb822be05e97c4-f56c11d92e98793d6c5a60b8b1b8b836-fd.mp4',
|
|
|
+ img17: require(`~/static/videoImages/v38.jpg`),
|
|
|
+ video17: 'https://spdb.mtavip.com/067289e1287643f89b353ed7ed4c6c52/bd13014cf80d4605b093ed6e80da9e5b-475c6c45b0ddfa3407ffe9625e855f68-fd.mp4',
|
|
|
+ img18: require(`~/static/videoImages/v39.jpg`),
|
|
|
+ video18: 'https://spdb.mtavip.com/eb4297e8a9fc4d628cbde2ca3d6748e7/35f65074705144b9a28efc20f4154e27-0711d93d0dd6c5452e00f12479f97435-fd.mp4',
|
|
|
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ showVideo({url}) {
|
|
|
+ this.curVideo = url;
|
|
|
+ this.visible = true;
|
|
|
},
|
|
|
-
|
|
|
-
|
|
|
- delDlClose(){
|
|
|
- this.telDl =false;
|
|
|
- this.countdown = -1;
|
|
|
- this.$refs.ruleTelForm.resetFields();
|
|
|
- __nc.reset();
|
|
|
-
|
|
|
-
|
|
|
+ onApplyBtnActive() {
|
|
|
+ this.telDl = true;
|
|
|
},
|
|
|
-
|
|
|
- /**
|
|
|
- * 串联加载指定的脚本
|
|
|
- * 串联加载[异步]逐个加载，每个加载完成后加载下一个
|
|
|
- * 全部加载完成后执行回调
|
|
|
- * @param array|string 指定的脚本们
|
|
|
- * @param function 成功后回调的函数
|
|
|
- * @return array 所有生成的脚本元素对象数组
|
|
|
- * 异步加载js后运行回调函数callback / scripts 为数组或字符串
|
|
|
- */
|
|
|
- seriesLoadScripts(scripts, callback) {
|
|
|
- if (typeof (scripts) != 'object') {
|
|
|
- var scripts = [scripts];
|
|
|
- }
|
|
|
- var HEAD = document.getElementsByTagName('head').item(0) || document.documentElement;
|
|
|
- var s = new Array(), last = scripts.length - 1, recursiveLoad = function (i) { //递归
|
|
|
- s[i] = document.createElement('script');
|
|
|
- s[i].setAttribute('type', 'text/javascript');
|
|
|
- s[i].onload = s[i].onreadystatechange = function () { //Attach handlers for all browsers
|
|
|
- if (!/*@cc_on!@*/0 || this.readyState == 'loaded' || this.readyState == 'complete') {
|
|
|
- this.onload = this.onreadystatechange = null;
|
|
|
- this.parentNode.removeChild(this);
|
|
|
- if (i != last) {
|
|
|
- recursiveLoad(i + 1);
|
|
|
- } else if (typeof (callback) == 'function') {
|
|
|
- callback();
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
- s[i].setAttribute('src', scripts[i]);
|
|
|
- HEAD.appendChild(s[i]);
|
|
|
- };
|
|
|
- recursiveLoad(0);
|
|
|
+ onApplyBtnActiveH5() {
|
|
|
+ this.$router.push({name: 'CourseDevelopPhone', query: {redirectUrl: '/courseCustom',}});
|
|
|
},
|
|
|
- // 滑块
|
|
|
- sliderFun() {
|
|
|
- const nc_token = [this.appKey, (new Date()).getTime(), Math.random()].join(':');
|
|
|
- console.log(nc_token);
|
|
|
- const NC_Opt = {
|
|
|
- //声明滑动验证需要渲染的目标元素ID。
|
|
|
- renderTo: '#your-dom-id',
|
|
|
- //应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
|
|
|
- appkey: this.appKey,
|
|
|
- //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
|
|
|
- scene: 'nc_message',
|
|
|
- //滑动验证码的主键，请勿将该字段定义为固定值。确保每个用户每次打开页面时，其token值都是不同的。系统默认的格式为：”您的appkey”+”时间戳”+”随机数”。
|
|
|
- token: nc_token,
|
|
|
- //滑动条的宽度。
|
|
|
- customWidth: 300,
|
|
|
- //业务键字段，可为空。为便于线上问题的排查，建议您按照线上问题定位文档中推荐的方法配置该字段值。
|
|
|
- trans: { 'key1': 'code0' },
|
|
|
- //通过Dom的ID属性自动填写trans业务键，可为空。建议您按照线上问题定位文档中推荐的方法配置该字段值。
|
|
|
- elementID: ['usernameID'],
|
|
|
- //是否自定义配置底层采集组件。如无特殊场景，请使用默认值（0），即不自定义配置底层采集组件。
|
|
|
- is_Opt: 0,
|
|
|
- //语言。PC端Web页面场景默认支持18国语言，详细配置方法请参见自定义文案与多语言文档。
|
|
|
- language: 'cn',
|
|
|
- //是否启用。一般情况，保持默认值（true）即可。
|
|
|
- isEnabled: true,
|
|
|
- //内部网络请求的超时时间。一般情况建议保持默认值（3000ms）。
|
|
|
- timeout: 3000,
|
|
|
- //允许服务器超时重复次数，默认5次。超过重复次数后将触发报错。
|
|
|
- times: 5,
|
|
|
- //用于自定义滑动验证各项请求的接口地址。一般情况，请勿配置该参数。
|
|
|
- apimap: {
|
|
|
- // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
|
|
|
- // 'get_captcha': '//b.com/get_captcha/ver3',
|
|
|
- // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
|
|
|
- // 'get_img': '//c.com/get_img',
|
|
|
- // 'checkcode': '//d.com/captcha/checkcode.jsonp',
|
|
|
- // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
|
|
|
- // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
|
|
|
- // 'umid_serUrl': 'https://g.com/service/um.json'
|
|
|
- },
|
|
|
- //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将请求标识（token）、会话ID（sessionid）、签名串（sig）字段记录下来，随业务请求一同发送至您的服务端调用验签。
|
|
|
- callback: (data) => {
|
|
|
- this.sliderData = Object.assign({}, data, {
|
|
|
- appkey: NC_Opt.appkey,
|
|
|
- scene: NC_Opt.scene,
|
|
|
- });
|
|
|
- console.log( this.sliderData);
|
|
|
- },
|
|
|
- };
|
|
|
- let date11 = () => {
|
|
|
-
|
|
|
- let _date = new Date();
|
|
|
- let year = _date.getFullYear().toString();
|
|
|
- let month = _date.getMonth().toString();
|
|
|
- let day = _date.getDate().toString();
|
|
|
- let a = _date.getHours().toString();
|
|
|
- let b = _date.getMinutes().toString();
|
|
|
- let c = _date.getSeconds().toString();
|
|
|
-
|
|
|
- return year + month + day + a + b + c;
|
|
|
- };
|
|
|
- let c = date11();
|
|
|
- const scripts = [
|
|
|
- `https://g.alicdn.com/sd/ncpc/nc.js?t=${c}`,
|
|
|
- ];
|
|
|
- this.seriesLoadScripts(scripts, function () {
|
|
|
- var nc = new noCaptcha(NC_Opt);
|
|
|
- nc.upLang('cn', {
|
|
|
- _startTEXT: '请按住滑块，拖动到最右边',
|
|
|
- _yesTEXT: '验证通过',
|
|
|
- _error300: '哎呀，出错了，点击<a href="javascript:__nc.reset()">刷新</a>再来一次',
|
|
|
- _errorNetwork: '网络不给力，请<a href="javascript:__nc.reset()">点击刷新</a>',
|
|
|
- });
|
|
|
- });
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
|
|
|
- },
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .platform-animation {
|
|
|
+ ul {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .platform-products-experience {
|
|
|
+ h4 {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 800;
|
|
|
+ text-align: center;
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 74px;
|
|
|
+ margin-bottom: 58px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .p1 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #565656;
|
|
|
+ font-weight: 800;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ i {
|
|
|
+ font-size: 26px;
|
|
|
+ color: #309336;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .p2 {
|
|
|
+ margin: 30px auto 110px;
|
|
|
+ text-align: center;
|
|
|
+ width: 991px;
|
|
|
+ font-size: 18px;
|
|
|
+ line-height: 24px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #565656;
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ h4 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 800;
|
|
|
+ text-align: center;
|
|
|
+ color: #333333;
|
|
|
+ margin-top: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .p1 {
|
|
|
+ font-size: 14px;
|
|
|
|
|
|
- // 倒计时60秒
|
|
|
- setTime() {
|
|
|
- if (this.countdown === 0) {
|
|
|
- this.btnTextDisabled = false;
|
|
|
- this.btnText = '获取验证码';
|
|
|
- this.countdown = 60;
|
|
|
- }else if(this.countdown === -1){
|
|
|
- this.btnTextDisabled = false;
|
|
|
- this.btnText = '获取验证码';
|
|
|
- this.countdown = 60;
|
|
|
- } else {
|
|
|
- this.btnTextDisabled = true;
|
|
|
- this.btnText = '重新发送(' + this.countdown + 's)';
|
|
|
- this.countdown--;
|
|
|
- setTimeout(() => {
|
|
|
- this.setTime();
|
|
|
- }, 1000);
|
|
|
+ i {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #565656;
|
|
|
+ font-weight: 800;
|
|
|
}
|
|
|
- },
|
|
|
- // 验证码
|
|
|
- checkVerification() {
|
|
|
- if (this.sliderData.appkey === undefined) {
|
|
|
- this.$message.error('请先通过滑块校验');
|
|
|
- return;
|
|
|
+ }
|
|
|
+ .p2 {
|
|
|
+ font-size: 14px;
|
|
|
+ width: 80%;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .my-video-content {
|
|
|
+
|
|
|
+ h4 {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 800;
|
|
|
+ margin-bottom: 70px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ > p {
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #565656;
|
|
|
+ line-height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ width: 980px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+
|
|
|
+ ul {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+
|
|
|
+ li {
|
|
|
+ width: 33%;
|
|
|
+ height: 330px;
|
|
|
+
|
|
|
+ .my-video {
|
|
|
+ margin: 20px;
|
|
|
}
|
|
|
- this.$axios.$post(`/develop/exists`,{ phone: this.telChangeDate.tel}).then(res=>{
|
|
|
-
|
|
|
- if (res.code === 0 && res.data) {
|
|
|
-
|
|
|
- let req = {
|
|
|
- 'appkey': this.sliderData.appkey,
|
|
|
- 'phone': this.telChangeDate.tel,
|
|
|
- 'scene': this.sliderData.scene,
|
|
|
- 'sessionid': this.sliderData.csessionid,
|
|
|
- 'sig': this.sliderData.sig,
|
|
|
- 'token': this.sliderData.token,
|
|
|
- 'type': 0,
|
|
|
- }
|
|
|
- this.$axios.$post('/sendCode',req).then(res=>{
|
|
|
- if (res.code === 0 && res.data) {
|
|
|
- this.setTime();
|
|
|
- }else {
|
|
|
- this.$message.error(res.msg||'手机号已存在');
|
|
|
- }
|
|
|
- })
|
|
|
- } else {
|
|
|
- this.$message.error(res.msg||'手机号已存在');
|
|
|
- return false;
|
|
|
- }
|
|
|
-
|
|
|
- })
|
|
|
- },
|
|
|
-
|
|
|
-
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+
|
|
|
+ .my-video-content {
|
|
|
+ h4 {
|
|
|
+ font-size: 18px;
|
|
|
+ color: #333;
|
|
|
+ font-weight: 800;
|
|
|
+ margin-bottom: 5%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
|
|
|
+ > p {
|
|
|
+ text-align: center;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #565656;
|
|
|
+ line-height: 1.5;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
|
|
|
+ ul {
|
|
|
+ li {
|
|
|
+ width: 100%;
|
|
|
+ height: 200px;
|
|
|
+ margin-bottom: 60px;
|
|
|
|
|
|
+ .my-video {
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
|
|
|
- playVideo(index){
|
|
|
- this.videoDialogFlag = true
|
|
|
- this.source = this.videoArray[index].url
|
|
|
- this.footerText = this.videoArray[index].fotterText
|
|
|
- this.title = this.videoArray[index].title
|
|
|
- },
|
|
|
+ .img-box {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- closeVideoDialog(){
|
|
|
+ .has-p {
|
|
|
|
|
|
- this.videoDialogFlag = false;
|
|
|
- this.source = '';
|
|
|
- this.footerText = '';
|
|
|
- this.title = '';
|
|
|
+ p {
|
|
|
+ width: 990px !important;font-size: 16px;font-weight: 500;margin: 0 auto;
|
|
|
+ }
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ p {
|
|
|
+ width: 100% !important; font-size: 16px;font-weight: 500;margin: 0 auto 10px;
|
|
|
}
|
|
|
- },
|
|
|
- created() {
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.getSystemWidth();
|
|
|
- },
|
|
|
- beforeDestroy() {
|
|
|
- },
|
|
|
- };
|
|
|
-</script>
|
|
|
-<style>
|
|
|
|
|
|
</style>
|
tanxue