|
|
@@ -2,26 +2,26 @@
|
|
|
<div>
|
|
|
<ul class="experience-ul-box mta-hidden-xs">
|
|
|
<li>
|
|
|
- <div @mouseenter="enterCode" @mouseleave="leaveCode">
|
|
|
+ <div>
|
|
|
<h5>手机学员端</h5>
|
|
|
- <img src="#">
|
|
|
+ <i></i>
|
|
|
<p>用手机扫描二维码，考生30秒体验答卷</p>
|
|
|
<a style="cursor: default">扫码试用</a>
|
|
|
<span ref="codeBtn" v-if="youkeFlag"><em></em></span>
|
|
|
<div ref="codeBtn" v-if="!youkeFlag">系统升级中...</div>
|
|
|
</div>
|
|
|
</li>
|
|
|
- <li><div><h5>电脑管理端</h5><img src="#"><p>欢迎体验青谷系统后台，三步轻松组织一场考试</p><a @click="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</a></div></li>
|
|
|
- <li><div><h5>电脑学员端</h5><img src="#"><p>支持市面各种主流浏览器，支持十万量级的考试并发</p><a @click="KsTyBtn('https://youkeksa.mtavip.com/a/youke')">免费体验</a></div></li>
|
|
|
+ <li><div><h5>电脑管理端</h5><i></i><p>欢迎体验青谷系统后台，三步轻松组织一场考试</p><a @click="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</a></div></li>
|
|
|
+ <li><div><h5>电脑学员端</h5><i></i><p>支持市面各种主流浏览器，支持十万量级的考试并发</p><a @click="KsTyBtn('https://youkeksa.mtavip.com/a/youke')">免费体验</a></div></li>
|
|
|
</ul>
|
|
|
<!-- 手机轮播 -->
|
|
|
- <div class="experience-swiper-box mta-hidden-sm">
|
|
|
+ <div class="experience-phone-box mta-hidden-sm">
|
|
|
<div v-swiper:mySwiper="swiperOption" class="swiper-container">
|
|
|
<div class="swiper-wrapper">
|
|
|
<div class="swiper-slide">
|
|
|
<div class="experience-content-box">
|
|
|
<h5>手机学员端</h5>
|
|
|
- <img src="#">
|
|
|
+ <i class="sjxyd-icon"></i>
|
|
|
<p>用手机扫描二维码，考生30秒体验答卷</p>
|
|
|
<a style="cursor: default" @click="ykFreeTrial">立即体验</a>
|
|
|
</div>
|
|
|
@@ -29,14 +29,14 @@
|
|
|
<div class="swiper-slide">
|
|
|
<div class="experience-content-box">
|
|
|
<h5>电脑管理端</h5>
|
|
|
- <img src="#">
|
|
|
+ <i class="dnxyd-icon"></i>
|
|
|
<p>欢迎体验青谷系统后台，三步轻松组织一场考试</p>
|
|
|
<a @click="KsTyBtn('https://youkeksc.mtavip.com/c/youke')">立即体验</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="swiper-slide">
|
|
|
<div class="experience-content-box">
|
|
|
- <img src="#">
|
|
|
+ <i class="dngld-icon"></i>
|
|
|
<h5>电脑学员端</h5>
|
|
|
<p>支持市面各种主流浏览器，支持十万量级的考试并发</p>
|
|
|
<a @click="KsTyBtn('https://youkeksa.mtavip.com/a/youke')">后台体验</a></div>
|
|
|
@@ -78,16 +78,6 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
- enterCode() {
|
|
|
- if(this.youkeFlag){
|
|
|
- this.$refs.codeBtn.style.bottom ='90px';
|
|
|
- }else{
|
|
|
- this.$refs.codeBtn.style.bottom ='0';
|
|
|
- }
|
|
|
- },
|
|
|
- leaveCode() {
|
|
|
- this.$refs.codeBtn.style.bottom ='305px';
|
|
|
- },
|
|
|
ykFreeTrial() {
|
|
|
if(this.youkeFlag){
|
|
|
// 没升级
|
|
|
@@ -136,6 +126,75 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
-<style scoped>
|
|
|
+<style lang="scss">
|
|
|
+ .experience-ul-box{
|
|
|
+ margin: 0 -60px;text-align: center;
|
|
|
+ li{
|
|
|
+ width:33.33%;display: inline-block;text-align: center;font-size: 16px;
|
|
|
+ >div{
|
|
|
+ height: 476px;margin: 0 60px;padding:46px 36px;border: 1px solid #eaeaea;
|
|
|
+ border-radius: 10px;position: relative;overflow: hidden;box-sizing: border-box;
|
|
|
+ div{font-size:20px;color:#fff;position: absolute;right: 0;left: 0;top: 0;bottom: 0;box-sizing: border-box;transition: 0.5s;overflow: hidden;border-radius: 10px;line-height: 476px;background: rgba(0,0,0,.6);cursor: default;}
|
|
|
+ i{display: inline-block;width: 200px;height: 180px;background-repeat: no-repeat;background-size: contain;margin-bottom: 24px;background-position: center;}
|
|
|
+ h5{font-size: 20px;color: #565656;margin-bottom: 24px;}
|
|
|
+ p{min-height: 52px;font-size: 14px;padding: 0;margin: 0;color: #565656;line-height: 24px;}
|
|
|
+ a{width: 180px;height: 45px;line-height: 45px;display: inline-block;margin-top: 24px;text-align: center;background-color: #00B96B;
|
|
|
+ border-color: rgba(255, 0, 0, 0);border-width: 1px;border-style: solid;color: rgb(255, 255, 255);border-radius:4px;font-weight: normal;cursor: pointer}
|
|
|
+ span{display: none;transition: 0.5s;position: absolute;top: 0;bottom: 0;left: 0;right: 0;overflow: hidden;}
|
|
|
+ em{width:200px;height:200px;display: block;margin: 90px auto;background-image:url("~static/images/client/exam/exam-code-img.png");background-size: cover;}
|
|
|
+ em.px-img-box{background-image:url("~static/images/client/train/train-code-img.png")}
|
|
|
+ }
|
|
|
+ >div:after{
|
|
|
+ content: "";width: 100%;height: 4px;position: absolute;bottom: 0;background: #00b96b;left: 0;
|
|
|
+ }
|
|
|
+ >div:hover{
|
|
|
+ padding:0;box-shadow: 0 0 13px 0 rgba(223,223,223,0.60);
|
|
|
+ h5{background: #00b96b;color: #fff;padding: 27px 0 17px;}
|
|
|
+ p{padding: 0 36px;}
|
|
|
+ span{display: block;}
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ li:nth-child(1) i{background-image:url("~static/images/client/exam/exam-tel-icon.png")}
|
|
|
+ li:nth-child(2) i{background-image:url("~static/images/client/exam/exam-pc-icon.png")}
|
|
|
+ li:nth-child(3) i{background-image:url("~static/images/client/exam/exam-xy-icon.png")}
|
|
|
+ }
|
|
|
+ /**************** 手机样式 ****************/
|
|
|
+ .experience-phone-box {
|
|
|
+ position: relative;
|
|
|
+ // swiper--div
|
|
|
+ .swiper-slide {width: 100%;}
|
|
|
+
|
|
|
+ .swiper-pagination-style {
|
|
|
+ width: 80px;position: absolute;bottom: 66px;left: 50%;margin-left: -30px;z-index: 99;
|
|
|
+
|
|
|
+ // 小圆点
|
|
|
+ .my-bullet-swiper {width: 10px;height: 10px;border-radius: 5px;display: inline-block;background: rgba(17,221,71, 0.2);margin-right: 14px;}
|
|
|
+
|
|
|
+ // 分页active
|
|
|
+ .my-bullet-active-swiper {background: #00B96B;}
|
|
|
+ }
|
|
|
+
|
|
|
+ // swiper 内容区
|
|
|
+ .experience-content-box {
|
|
|
+ height: 243px;display: flex;flex-direction: column;align-items: center;justify-content: center;
|
|
|
+ margin: 5px 4% 40px;box-shadow: rgba(0, 0, 0, 0.4) 0 0 6px -1px;text-align: center;padding: 20px 0;
|
|
|
+
|
|
|
+ i {width: 120px;height: 70px;background-repeat: no-repeat;background-size: contain;margin-bottom: 24px;display: inline-block;flex-shrink: 0;}
|
|
|
+ h5 {font-weight: 700;font-size: 16px;color: rgb(16, 16, 16);margin-bottom: 30px;}
|
|
|
+ p {font-weight: 400;font-size: 14px;color: rgb(16, 16, 16);margin: 0 48px;line-height: 24px;}
|
|
|
+ a {width: 122px;height: 35px;line-height: 35px;background-color: #00B96B;color: rgb(255, 255, 255);border-radius: 5px;font-size: 14px;
|
|
|
+ padding: 0;text-align: center;display: inline-block;margin-top: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // swiper 提示
|
|
|
+ .experience-swiper-tip {font-weight: 400;font-size: 14px;color: rgb(96, 96, 96);text-align: center;margin: 0 0 42px;}
|
|
|
+ // 图片
|
|
|
+ .sjxyd-icon {background-image:url("~static/images/client/exam/exam-tel-icon.png")}
|
|
|
+ .dnxyd-icon {background-image:url("~static/images/client/exam/exam-pc-icon.png")}
|
|
|
+ .dngld-icon {background-image:url("~static/images/client/exam/exam-xy-icon.png")}
|
|
|
+ }
|
|
|
+
|
|
|
|
|
|
</style>
|
tanxue
