|
|
@@ -1,15 +1,1053 @@
|
|
|
-<!-- 课程开发课程定制页面-->
|
|
|
<template>
|
|
|
- <div>课程定制</div>
|
|
|
+ <div class="client-course-page course-custom">
|
|
|
+ <!-- 课程开发页 banner栏 -->
|
|
|
+ <div :style="{backgroundImage: `url(${defaultImg})`}" class="client-course-banner"></div>
|
|
|
+
|
|
|
+ <div class="top-btns-content client-container">
|
|
|
+ <h4>课程定制类型</h4>
|
|
|
+ <div class="btn-group">
|
|
|
+ <div class="dingzhi-card" :class="{active: active==='dhl'}" @click="changeCardActive('dhl')">
|
|
|
+ <i></i>
|
|
|
+ <p>动画类课程</p>
|
|
|
+ <span class="jiao"></span>
|
|
|
+ </div>
|
|
|
+ <div class="dingzhi-card" :class="{active: active==='spl'}" @click="changeCardActive('spl')">
|
|
|
+ <i></i>
|
|
|
+ <p>视频类课程</p>
|
|
|
+ <span class="jiao"></span>
|
|
|
+ </div>
|
|
|
+ <div class="dingzhi-card" :class="{active: active==='h5l'}" @click="changeCardActive('h5l')">
|
|
|
+ <i></i>
|
|
|
+ <p>H5类课程</p>
|
|
|
+ <span class="jiao"></span>
|
|
|
+ </div>
|
|
|
+ <div class="dingzhi-card" :class="{active: active==='ppt'}" @click="changeCardActive('ppt')">
|
|
|
+ <i></i>
|
|
|
+ <p>PPT定制及美化</p>
|
|
|
+ <span class="jiao"></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="course-content client-container" v-if="active === 'dhl'">
|
|
|
+ <h4>动画类课程</h4>
|
|
|
+ <p>动画类课程不受限于人员和场地，比较方便、生动形象地呈现知识内容。主要包含有：图文课程、情景动画课程、交互式课程、三分屏课程、SCORM框架式课程。适用各种行业：</p>
|
|
|
+ <div class="video-container">
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg1" alt="教育培训业"><i @click="playVideo(0)"></i></span>
|
|
|
+ <p>教育培训业</p>
|
|
|
+ </div>
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg2" alt="金融保险业"><i @click="playVideo(1)"></i></span>
|
|
|
+ <p>金融保险业</p>
|
|
|
+ </div>
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg3" alt="食品餐饮业"><i @click="playVideo(2)"></i></span>
|
|
|
+ <p>食品餐饮业</p>
|
|
|
+ </div>
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg4" alt="生产制造业"><i @click="playVideo(3)"></i></span>
|
|
|
+ <p>生产制造业</p>
|
|
|
+ </div>
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg5" alt="信息通讯业"><i @click="playVideo(4)"></i></span>
|
|
|
+ <p>信息通讯业</p>
|
|
|
+ </div>
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg6" alt="汽车销售业"><i @click="playVideo(5)"></i></span>
|
|
|
+ <p>汽车销售业</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-button class="zixun-online" type="primary" @click="gozixun">在线咨询</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="course-content client-container" v-if="active === 'spl'">
|
|
|
+ <h4>视频类课程</h4>
|
|
|
+ <p>视频类课程可以直观形象地呈现知识内容。主要包含有：企业宣传片、实验操作课程、课堂实录课程、会议访谈等等。动画类课程也可以导出成MP4视频格式文件呈现。适用各种行业：</p>
|
|
|
+ <div class="video-container">
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg7" alt="能源化工业"><i @click="playVideo(6)"></i></span>
|
|
|
+ <p>能源化工业</p>
|
|
|
+ </div>
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg8" alt="金融保险业"><i @click="playVideo(7)"></i></span>
|
|
|
+ <p>金融保险业</p>
|
|
|
+ </div>
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg9" alt="教育培训业"><i @click="playVideo(8)"></i></span>
|
|
|
+ <p>教育培训业</p>
|
|
|
+ </div>
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg10" alt="管理培训业"><i @click="playVideo(9)"></i></span>
|
|
|
+ <p>管理培训业</p>
|
|
|
+ </div>
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg11" alt="食品餐饮业"><i @click="playVideo(10)"></i></span>
|
|
|
+ <p>食品餐饮业</p>
|
|
|
+ </div>
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg12" alt="服务零售业"><i @click="playVideo(11)"></i></span>
|
|
|
+ <p>服务零售业</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-button class="zixun-online" type="primary" @click="gozixun">在线咨询</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="course-content client-container" v-if="active === 'h5l'">
|
|
|
+ <h4>H5类课程</h4>
|
|
|
+ <p>通用HTML5技术、将图文、互动测试、动画视频、游戏等多种形式结合在一起，课程交互性强、学员参与程度高。主要包含有：图文H5、游戏H5等。</p>
|
|
|
+ <div class="video-container">
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg13" alt="现代制造业"><i @click="playVideo(12)"></i></span>
|
|
|
+ <p>现代制造业</p>
|
|
|
+ </div>
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg14" alt="教育培训业"><i @click="playVideo(13)"></i></span>
|
|
|
+ <p>教育培训业</p>
|
|
|
+ </div>
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg15" alt="物流业"><i @click="playVideo(14)"></i></span>
|
|
|
+ <p>物流业</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-button class="zixun-online" type="primary" @click="gozixun">在线咨询</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="course-content client-container" v-if="active === 'ppt'">
|
|
|
+ <h4>PPT定制及美化</h4>
|
|
|
+ <p>现在PPT正成为人们工作生活的重要组成部分，在工作汇报、企业宣传、产品推介、婚礼庆典、项目竞标、管理咨询等领域发挥重大的作用。麦塔曾多次为客户在各种大赛中取得前三甲的优异成绩。</p>
|
|
|
+ <div class="video-container">
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg16" alt="金融保险业"><i @click="playVideo(15)"></i></span>
|
|
|
+ <p>金融保险业</p>
|
|
|
+ </div>
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg17" alt="教育培训业"><i @click="playVideo(16)"></i></span>
|
|
|
+ <p>教育培训业</p>
|
|
|
+ </div>
|
|
|
+ <div class="video-box">
|
|
|
+ <span><img :src="courseVideoImg18" alt="生产制造业"><i @click="playVideo(17)"></i></span>
|
|
|
+ <p>生产制造业</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-button class="zixun-online" type="primary" @click="gozixun">在线咨询</el-button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="course-content-wrap">
|
|
|
+
|
|
|
+ <div class="course-form-bg"></div>
|
|
|
+
|
|
|
+ <div class="form-wrap">
|
|
|
+ <h4>课程定制在线报价</h4>
|
|
|
+ <p>栋科客服人员会在30分钟内与你取得联系</p>
|
|
|
+ <div class="baojia-form">
|
|
|
+
|
|
|
+ <p class="form-f1"><i></i>已有 {{ custom_sum }} 位客户成功报价</p>
|
|
|
+
|
|
|
+ <div class="form-f2">
|
|
|
+ <el-input v-model="custom_phone" placeholder="请输入手机号" class="dialog-input-tel height-63 form-input"></el-input>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-f3">
|
|
|
+ <div id="your-dom-id" class="nc-container"></div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-row-col form-f4">
|
|
|
+ <el-input v-model="custom_code" placeholder="请输入验证码" class="dialog-input-code height-63 form-input"></el-input>
|
|
|
+ <el-button @click="checkVerification" :disabled="btnTextDisabled" class="custom-code-btn" >{{btnText}}</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="form-f5">
|
|
|
+ <el-input v-model="custom_name" placeholder="请输入您的称呼(必填)" class="dialog-input-tel height-63 form-input"></el-input>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-button class="form-f6" type="primary" @click="handleYuyue">预约咨询顾客</el-button>
|
|
|
+
|
|
|
+
|
|
|
+ <p class="form-f7">
|
|
|
+ <span class="icon-w1"><i></i>李**</span><span>125****55545</span><span>30分钟前</span>
|
|
|
+ </p>
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </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>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- export default {
|
|
|
- name: 'custom',
|
|
|
- layout:'templateB',
|
|
|
+export default {
|
|
|
+ name: 'custom',
|
|
|
+ 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(`/develop/sum`,{}).then(res=>{
|
|
|
+ return res
|
|
|
+ }),
|
|
|
+ ])
|
|
|
+ return {
|
|
|
+ topCarousels : res1.data.data ||[],
|
|
|
+ custom_sum: res2.data || 0,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ videoDialogFlag:false,
|
|
|
+ source:'',
|
|
|
+ footerText:'',
|
|
|
+ title:'',
|
|
|
+
|
|
|
+ custom_phone: '',
|
|
|
+ custom_code: '',
|
|
|
+ custom_name: '',
|
|
|
+
|
|
|
+ bannerList: [],
|
|
|
+ defaultImg: require(`~/static/images/client/course/course-banner-background-dingzhi.jpg`),
|
|
|
+ active: 'dhl',
|
|
|
+
|
|
|
+ // 动画类
|
|
|
+ courseVideoImg1: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+ courseVideoImg2: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+ courseVideoImg3: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+ courseVideoImg4: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+ courseVideoImg5: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+ courseVideoImg6: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+
|
|
|
+ // 视频类
|
|
|
+ courseVideoImg7: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+ courseVideoImg8: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+ courseVideoImg9: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+ courseVideoImg10: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+ courseVideoImg11: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+ courseVideoImg12: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+
|
|
|
+ // H5类
|
|
|
+ courseVideoImg13: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+ courseVideoImg14: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+ courseVideoImg15: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+
|
|
|
+ // PPT类
|
|
|
+ courseVideoImg16: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+ courseVideoImg17: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+ courseVideoImg18: require(`~/static/images/client/course/course-video-img1.png`),
|
|
|
+
|
|
|
+ videoArray:[
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'教育培训业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'金融保险业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'食品餐饮业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'生产制造业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'信息通讯业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'汽车销售业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'汽车销售业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'汽车销售业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'汽车销售业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'汽车销售业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'汽车销售业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'汽车销售业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'汽车销售业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'汽车销售业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'汽车销售业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'汽车销售业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'汽车销售业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'汽车销售业',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ url:'https://spdb.mtavip.com/customerTrans/87321d8a03805711940e85451d6bcb0a/3d714c3c-174708975d8-0006-732a-c93-687b7.mp4',
|
|
|
+ title:'汽车销售业',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+
|
|
|
+ btnTextDisabled: false,
|
|
|
+ btnText: '获取验证码',
|
|
|
+ countdown: 60, // 60秒倒计时
|
|
|
+ sliderData: {},
|
|
|
+ appKey: 'FFFF0N00000000007EC0',
|
|
|
};
|
|
|
+ },
|
|
|
+ head(){
|
|
|
+ return {
|
|
|
+ SystemWidthFlag:false,// 判断是否是手机端，默认为false，默认为PC端
|
|
|
+ title: '多媒体课件制作_视频课件制作_flash课件制作_【栋科课程开发团队】',
|
|
|
+ meta: [
|
|
|
+ {
|
|
|
+ name: 'keywords',
|
|
|
+ content: '课件制作,课件制作公司,课件设计,ppt课件制作'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'description',
|
|
|
+ content:'栋科软件拥有国内专业、成熟的设计团队，丰富的电子课程制作经验，业务方向包括教学设计体验、图文内容演示、情景动漫、AR/VR演示等，在院校教育、零售连锁行业、汽车行业、金融等12大行业课程开发经验超过10年，规范可靠的研发流程、完善的质量评估和卓越的项目管理体系，能高效稳定地保障支付。'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ gozixun() {
|
|
|
+ window.href = "https://p.qiao.baidu.com/cps/chat?siteId=17930048&userId=40179606&siteToken=e767a987c8404575246ab0084fb2c9bd";
|
|
|
+ },
|
|
|
+ closeVideoDialog() {
|
|
|
+ this.videoDialogFlag = false;
|
|
|
+ this.source = '';
|
|
|
+ this.footerText = '';
|
|
|
+ this.title = '';
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 串联加载指定的脚本
|
|
|
+ * 串联加载[异步]逐个加载，每个加载完成后加载下一个
|
|
|
+ * 全部加载完成后执行回调
|
|
|
+ * @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);
|
|
|
+ },
|
|
|
+ // 滑块
|
|
|
+ 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>',
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ // 验证码
|
|
|
+ checkVerification() {
|
|
|
+ if (this.sliderData.appkey === undefined) {
|
|
|
+ this.$message.error('请先通过滑块校验');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.$axios.$post(`/develop/exists`,{ phone: this.custom_phone}).then(res=>{
|
|
|
+
|
|
|
+ if (res.code === 0 && res.data) {
|
|
|
+
|
|
|
+ let req = {
|
|
|
+ 'appkey': this.sliderData.appkey,
|
|
|
+ 'phone': this.custom_phone,
|
|
|
+ '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;
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 倒计时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);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ handleYuyue() {
|
|
|
+ const tag = {
|
|
|
+ 'dhl':1,
|
|
|
+ 'spl':2,
|
|
|
+ 'h5l':3,
|
|
|
+ 'ppt':4,
|
|
|
+ }
|
|
|
+ const opt = {
|
|
|
+ type: tag[this.active],
|
|
|
+ phone: this.custom_phone,
|
|
|
+ code: this.custom_code,
|
|
|
+ chenghu: this.custom_name
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.custom_phone) {
|
|
|
+ this.$message.error("请填写手机号");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.custom_code) {
|
|
|
+ this.$message.error("验证码不能为空");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.custom_name) {
|
|
|
+ this.$message.error("请输入您的称呼");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.confirmTl(opt)
|
|
|
+ },
|
|
|
+ playVideo(index) {
|
|
|
+ this.videoDialogFlag = true
|
|
|
+ this.source = this.videoArray[index].url
|
|
|
+ this.title = this.videoArray[index].title
|
|
|
+ },
|
|
|
+ changeCardActive(code) {
|
|
|
+ this.active = code;
|
|
|
+ },
|
|
|
+ // 判断是否为移动端
|
|
|
+ getSystemWidth(){
|
|
|
+ var browserWidth=document.documentElement.clientWidth;
|
|
|
+ if(browserWidth <= 768){
|
|
|
+ this.SystemWidthFlag = true;
|
|
|
+ }else{
|
|
|
+ this.SystemWidthFlag = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ confirmTl(options){
|
|
|
+ // 请求后台
|
|
|
+ this.$axios.$post('/develop/add',options).then(res=>{
|
|
|
+ if (res.code === 0 && res.data) {
|
|
|
+ this.$message.success('申请成功');
|
|
|
+ } else {
|
|
|
+ this.$message.error('申请失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ clickBanner() {}
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getSystemWidth();
|
|
|
+ this.sliderFun();
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ },
|
|
|
+};
|
|
|
</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+
|
|
|
+.course-custom {
|
|
|
+
|
|
|
+ .top-btns-content {
|
|
|
+ margin: 175px auto 104px;
|
|
|
+ @media (max-width: 768px){
|
|
|
+ margin: 30px auto 0px;
|
|
|
+ }
|
|
|
+
|
|
|
+ h4 {
|
|
|
+ height: 34px;
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ @media (max-width: 768px){
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .btn-group {
|
|
|
+ margin-top: 104px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ flex-wrap: wrap;
|
|
|
+ margin: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .dingzhi-card {
|
|
|
+ width: 231px;
|
|
|
+ height: 270px;
|
|
|
+ border: 1px solid #126bff;
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #fff;
|
|
|
+ text-align: center;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ width: 116px;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ height: 135px;
|
|
|
+
|
|
|
+ >p {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: linear-gradient(0deg,#c5deff 0%, #ffffff 99%);
|
|
|
+ }
|
|
|
+
|
|
|
+ > i {
|
|
|
+ margin: 69px auto 0;
|
|
|
+ display: block;
|
|
|
+ height: 118px;
|
|
|
+ width: 87px;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ margin: 30px auto 0;
|
|
|
+ height: 80px;
|
|
|
+ width: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(1) {
|
|
|
+ i {
|
|
|
+ background-image: url("~static/images/client/course/btns/dingzhi-bt1.png");
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-child(2) {
|
|
|
+ i {
|
|
|
+ background-image: url("~static/images/client/course/btns/dingzhi-bt2.png");
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-child(3) {
|
|
|
+ i {
|
|
|
+ background-image: url("~static/images/client/course/btns/dingzhi-bt3.png");
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:nth-child(4) {
|
|
|
+ i {
|
|
|
+ background-image: url("~static/images/client/course/btns/dingzhi-bt4.png");
|
|
|
+ background-size: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active .jiao {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -10px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 10px solid #126bff;
|
|
|
+ border-right: 10px solid transparent;
|
|
|
+ border-left: 10px solid transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .course-content{
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ >h4 {
|
|
|
+ text-align: center;
|
|
|
+ height: 34px;
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: 400;
|
|
|
+ margin-top: 146px;
|
|
|
+ margin-bottom: 57px;
|
|
|
+
|
|
|
+ @media (max-width: 768px){
|
|
|
+ height: 19px;
|
|
|
+ font-size: 24px;
|
|
|
+ margin-top: 5px;
|
|
|
+ margin-bottom: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >p {
|
|
|
+ margin: 0 20px 100px;
|
|
|
+ height: 50px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .video-container {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 70px;
|
|
|
+ .video-box {
|
|
|
+ width: 30%;
|
|
|
+ margin-bottom: 79px;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ @media (max-width: 768px){
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 39px;
|
|
|
+ }
|
|
|
+
|
|
|
+ >span {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-top: 28px;
|
|
|
+ height: 23px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+
|
|
|
+ @media (max-width: 768px){
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ i:hover{background-image: url("~static/images/client/course/course-video-icon-a.svg");background-size: cover;background-position: bottom;}
|
|
|
+
|
|
|
+ i{width: 48px;height: 48px;cursor: pointer;background-image: url("~static/images/client/course/course-video-icon.svg");display: inline-block;position: absolute;
|
|
|
+ left: 50%;margin-left: -24px;z-index: 5;top: 50%;margin-top: -24px;background-size: cover;background-position: bottom;transition: all 0.5s;}
|
|
|
+ img{transition: all 0.5s;}
|
|
|
+
|
|
|
+ span:hover{img{transform: scale(1.1);}}
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .zixun-online {
|
|
|
+ margin: 0 auto 128px;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ width: 180px;
|
|
|
+ padding: 12px 38px;
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 48px;
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ margin: 0 auto 60px;
|
|
|
+ line-height: 20px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .course-content-wrap {
|
|
|
+ position: relative;
|
|
|
+ height: 800px;
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 256px;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ margin-bottom: -100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .course-form-bg {
|
|
|
+ height: 655px;
|
|
|
+ background-image: url("~static/images/client/course/btns/course-bg-b1.png");
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ height: 455px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-wrap {
|
|
|
+ width: 540px;
|
|
|
+ height: 800px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ width: 80%;
|
|
|
+ height: 600px;
|
|
|
+ }
|
|
|
+
|
|
|
+ >h4 {
|
|
|
+ height: 59px;
|
|
|
+ font-size: 61px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #fefefe;
|
|
|
+ letter-spacing: 1.53px;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 73px;
|
|
|
+ margin-bottom: 23px;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ font-size: 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ >p {
|
|
|
+ height: 26px;
|
|
|
+ font-size: 27px;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-bottom: 41px;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .baojia-form {
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 50px 42px 80px;
|
|
|
+ box-shadow: 0 3px 5px 2px #ccc;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ padding: 25px 22px 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-row-col {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .dialog-input-code {
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-code-btn {
|
|
|
+ width: 164px;
|
|
|
+ height:63px;
|
|
|
+ margin-left: 17px;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ height: 32px;
|
|
|
+ width: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .height-63 {
|
|
|
+ ::v-deep.el-input__inner {
|
|
|
+ height: 63px;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .form-f1 {
|
|
|
+ background-color: #ffebeb;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ height: 17px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FF0000;
|
|
|
+ padding: 11px;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ > i {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ display: inline-block;
|
|
|
+ background-image: url("~static/images/client/course/btns/course-icon-fire.png");
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ margin: 0 11px 0 11px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form-f2 {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form-f3 {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ div.nc-container ::v-deep #nc_1_wrapper {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form-f4 {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ margin-bottom: 16px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .custom-code-btn {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ font-size: 12px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .form-f5 {
|
|
|
+ margin-bottom: 40px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .form-f6 {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ height: 63px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 400;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 12px;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-wrap .form-f7 {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -40px;
|
|
|
+ left: 0;
|
|
|
+ width: 446px;
|
|
|
+ padding: 20px 47px;
|
|
|
+ background-color: #ffebeb;
|
|
|
+ height: 15px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ text-align: left;
|
|
|
+ color: #ff0000;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ border-bottom-left-radius: 8px;
|
|
|
+ border-bottom-right-radius: 8px;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ bottom: 15px;
|
|
|
+ padding: 10px 23px;
|
|
|
+ width: 85%;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .icon-w1 {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ i {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ display: inline-block;
|
|
|
+ background-image: url("~static/images/client/course/btns/course-icon-laba.png");
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ margin: 0 5px 0 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-input {
|
|
|
+ ::v-deep.el-input__inner {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 53px;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-<style scoped>
|
|
|
+}
|
|
|
|
|
|
</style>
|
tanxue
