|
@@ -1,10 +1,10 @@
|
|
|
<template>
|
|
|
<!-- 立即咨询 -->
|
|
|
- <div class="client-zixun-code mta-hidden-xs" :class="pageData.topClass" :style="pageData.topStyle">
|
|
|
+ <div class="service-code-box mta-hidden-xs" :class="pageData.topClass" :style="pageData.topStyle">
|
|
|
<h4>{{ pageData.title }}</h4>
|
|
|
- <p v-if="pageData.p1" class="p1">{{ pageData.p1 }}</p>
|
|
|
+ <p v-if="pageData.p1" class="jinglu-weixin">{{ pageData.p1 }}</p>
|
|
|
<img :src="imgUrl" alt="">
|
|
|
- <p v-if="pageData.p2" class="p2">{{ pageData.p2 }}</p>
|
|
|
+ <p v-if="pageData.p2" class="kefu-weixin">{{ pageData.p2 }}</p>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -18,10 +18,10 @@ export default {
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- imgUrl: require('static/codeImage/code_kefu.png'), // 客服二维码
|
|
|
- imgUrl2: require('static/codeImage/code_jingli.png'), // 经理二维码
|
|
|
- bg1: require('static/codeImage/bg01.png'), // 企业培训
|
|
|
- bg2: require('static/codeImage/bg01.png'), // 教育机构+食品餐饮
|
|
|
+ imgUrl: require('static/codeImage/code-kefu.png'), // 客服二维码
|
|
|
+ imgUrl2: require('static/codeImage/code-jingli.png'), // 经理二维码
|
|
|
+ bg1: require('static/codeImage/code-bj01.png'), // 企业培训
|
|
|
+ bg2: require('static/codeImage/code-bj02.png'), // 教育机构+食品餐饮
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -33,14 +33,14 @@ export default {
|
|
|
switch (this.source) {
|
|
|
case 'exam':
|
|
|
// 严肃考试
|
|
|
- result = Object.assign({title, p2}, {topClass: 'kefu'}, {topStyle: 'background: none'}, {imgUrl: this.imgUrl});
|
|
|
+ result = Object.assign({title, p2}, {topClass: 'kefu'}, {topStyle: ''}, {imgUrl: this.imgUrl});
|
|
|
break;
|
|
|
case 'peixun':
|
|
|
// 企业培训
|
|
|
result = Object.assign({
|
|
|
title,
|
|
|
p1
|
|
|
- }, {topClass: 'jingli'}, {topStyle: `background: url(${this.bg1})`}, {imgUrl: this.imgUrl2});
|
|
|
+ }, {topClass: 'jingli'}, {topStyle: `background-image: url(${this.bg1})`}, {imgUrl: this.imgUrl2});
|
|
|
case 'education':
|
|
|
// 解决方案 -> 教育机构
|
|
|
case 'bitAnsSup':
|
|
@@ -64,7 +64,7 @@ export default {
|
|
|
result = Object.assign({
|
|
|
title,
|
|
|
p2
|
|
|
- }, {topClass: 'kefu_level2'}, {topStyle: `background: url(${this.bg2})`}, {imgUrl: this.imgUrl});
|
|
|
+ }, {topClass: 'kefu-leve-bj'}, {topStyle: `background-image: url(${this.bg2})`}, {imgUrl: this.imgUrl});
|
|
|
break;
|
|
|
}
|
|
|
return result;
|
|
@@ -74,87 +74,36 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-.client-zixun-code {
|
|
|
+.service-code-box {
|
|
|
width: 100%;
|
|
|
- background: green;
|
|
|
+ height: 440px;
|
|
|
text-align: center;
|
|
|
box-sizing: border-box;
|
|
|
overflow: hidden;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ padding: 100px 0 83px;
|
|
|
|
|
|
- h4 {
|
|
|
- text-align: center;
|
|
|
- font-size: 30px;
|
|
|
- height: 30px;
|
|
|
- }
|
|
|
+ h4 {font-size: 30px;text-align: center;margin: 0 0 45px;color: #fff;}
|
|
|
|
|
|
- img {
|
|
|
- text-align: center;
|
|
|
- margin: 0 auto;
|
|
|
- width: 142px;
|
|
|
- height: 142px;
|
|
|
+ img {width: 142px;height: 142px;margin: 0 auto;}
|
|
|
|
|
|
- }
|
|
|
+ p {font-size: 18px;text-align: center;margin: 24px 0 0;color: #fff;}
|
|
|
|
|
|
- p {
|
|
|
- text-align: center;
|
|
|
- height: 18px;
|
|
|
- }
|
|
|
-
|
|
|
- // 客服
|
|
|
+ // 客服---(纯白色背景)
|
|
|
&.kefu {
|
|
|
- height: 440px;
|
|
|
-
|
|
|
- h4 {
|
|
|
- color: #333;
|
|
|
- margin-top: 62px;
|
|
|
- margin-bottom: 43px;
|
|
|
- }
|
|
|
-
|
|
|
- p.p2 {
|
|
|
- font-size: 18px;
|
|
|
- color: #333;
|
|
|
- margin-bottom: 81px;
|
|
|
- margin-top: 24px;
|
|
|
- }
|
|
|
+ height: 360px;background-color: #FAFAFA;
|
|
|
+ h4,p {color: #333;}
|
|
|
}
|
|
|
|
|
|
- // 经理
|
|
|
+ // 经理---(/背景为弧形的光)
|
|
|
&.jingli {
|
|
|
- height: 360px;
|
|
|
-
|
|
|
- h4 {
|
|
|
- color: #fff;
|
|
|
- margin-top: 62px;
|
|
|
- margin-bottom: 30px;
|
|
|
- }
|
|
|
-
|
|
|
- p.p1 {
|
|
|
- font-size: 18px;
|
|
|
- color: #fff;
|
|
|
- margin-bottom: 16px;
|
|
|
- }
|
|
|
-
|
|
|
- img {
|
|
|
- margin-bottom: 60px;
|
|
|
- }
|
|
|
+ padding: 62px 0 62px;
|
|
|
+ h4 {margin: 0 0 30px;}
|
|
|
+ p{margin: 0 0 16px;}
|
|
|
}
|
|
|
|
|
|
- &.kefu_level2 {
|
|
|
- height: 360px;
|
|
|
-
|
|
|
- h4 {
|
|
|
- color: #fff;
|
|
|
- margin-top: 62px;
|
|
|
- margin-bottom: 43px;
|
|
|
- }
|
|
|
-
|
|
|
- p.p2 {
|
|
|
- font-size: 18px;
|
|
|
- color: #fff;
|
|
|
- margin-bottom: 81px;
|
|
|
- margin-top: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
+ // 客服带背景图---(背景为菱形的光)
|
|
|
+ &.kefu-leve-bj {}
|
|
|
|
|
|
|
|
|
}
|