liumin
/
zkPCproject
0
0
Vork 0
Code Kwesties 0 Pull-aanvragen 0 Publicaties 0 Wiki Activiteit
Bladeren bron

修改jiekou

newStyle
douzhuo 1 jaar geleden
bovenliggende
f80ae21241
commit
0244967f0b
1 gewijzigde bestanden met toevoegingen van 462 en 288 verwijderingen
Zij-aan-zij weergave
Diff opties
Statistieken weergeven Download Patch-bestand Download Diff-bestand
  1. +462
    -288
      src/views/Receive/index.vue

+ 462
- 288
src/views/Receive/index.vue Bestand weergeven

@@ -314,9 +314,26 @@
<!-- 1 客户画像 2销讲词 3违禁 4 需求挖掘 -->
<div class="showmark" v-if="item.types">
<div>
<div class="mark-item" v-for="(subitem,i) in dealTypes(item.types)" :key="i">
<img v-if="dealword(subitem)[0]" class="markicon" :src="imgArr[dealword(subitem)[0]]"/>
<p class="marktext" :style="dealword(subitem)[0]==3?'color:#E7483C':'color:#3E50E8'">{{dealword(subitem)[1]}}</p>
<div
class="mark-item"
v-for="(subitem, i) in dealTypes(item.types)"
:key="i"
>
<img
v-if="dealword(subitem)[0]"
class="markicon"
:src="imgArr[dealword(subitem)[0]]"
/>
<p
class="marktext"
:style="
dealword(subitem)[0] == 3
? 'color:#E7483C'
: 'color:#3E50E8'
"
>
{{ dealword(subitem)[1] }}
</p>
</div>
</div>
</div>
@@ -468,13 +485,38 @@
</div>
</div>
<div class="topyou">
<div style="padding: 0 10px;height: 100px;display: flex;flex-direction: column;border-bottom: 1px solid #e0e0e0;">
<div style="margin: 10px 0 20px;font-size: 16px; color: #333333; text-indent: 5%"> 销讲执行 </div>
<div
style="
padding: 0 10px;
height: 100px;
display: flex;
flex-direction: column;
border-bottom: 1px solid #e0e0e0;
"
>
<div
style="
margin: 10px 0 20px;
font-size: 16px;
color: #333333;
text-indent: 5%;
"
>
销讲执行
</div>
<el-radio-group v-model="zhixingcenterindex" size="small">
<el-radio-button :label="0" >销讲总执行率{{ userinformationlist.fraction || 0 }}%</el-radio-button>
<el-radio-button :label="1">禁忌执行</el-radio-button>
<el-radio-button :label="2">需求挖掘率{{ userinformationlist.wordFraction || 0 }}%</el-radio-button>
</el-radio-group>
<el-radio-button :label="0"
>销讲总执行率{{
userinformationlist.fraction || 0
}}%</el-radio-button
>
<el-radio-button :label="1">禁忌执行</el-radio-button>
<el-radio-button :label="2"
>需求挖掘率{{
userinformationlist.wordFraction || 0
}}%</el-radio-button
>
</el-radio-group>
</div>
<div v-if="zhixingcenterindex == 0" class="xiaojaingBox">
<div class="xiaojiang-title">
@@ -484,7 +526,7 @@
</div>
</div>
</div>
<!-- 销讲 -->
<!-- 销讲 -->
<div id="zxldiv" v-if="zhixingcenterindex == 0">
<div class="zxlBox" v-for="(item, index) in ratelist" :key="index">
<div class="zxlLev1" @click="changeshow(index)">
@@ -582,82 +624,188 @@
<!-- 需求挖掘 -->
<div v-if="zhixingcenterindex == 2" class="wajueBox">
<div class="wajue-title">
<div class="label1" > 指标 </div>
<div class="label1">指标</div>
<div class="label2">执行</div>
<div class="label3">匹配标签</div>
</div>
</div>
<div id="zxldiv" v-if="zhixingcenterindex == 2">
<div style="width: 100%;" v-for="(item,index) in keyWordsList" :key="index">
<div
style="width: 100%"
v-for="(item, index) in keyWordsList"
:key="index"
>
<!-- 有二级-->
<div v-if="item.children.length">
<div class="rateboxcenttit" @click="changeshow1(item)" style="cursor:pointer">
<div style="flex:1">{{item.name}} </div>
<div style="flex:1">执行{{item.fraction||0}}%</div>
<div style="flex:1" v-if="item.keywordsList&&item.keywordsList.length">已匹配({{item.keywordsList&&item.keywordsList.length}})</div>
<div style="flex:1" v-else>未匹配</div>
<div style="flex:0 0 18px">
<i v-if="item.show" style="font-size: 18px" class="el-icon-arrow-up"></i>
<i v-else style="font-size: 18px" class="el-icon-arrow-down"></i>
<div v-if="item.children.length">
<div
class="rateboxcenttit"
@click="changeshow1(item)"
style="cursor: pointer"
>
<div style="flex: 1">{{ item.name }}</div>
<div style="flex: 1">执行{{ item.fraction || 0 }}%</div>
<div
style="flex: 1"
v-if="item.keywordsList && item.keywordsList.length"
>
已匹配({{ item.keywordsList && item.keywordsList.length }})
</div>
<div style="flex: 1" v-else>未匹配</div>
<div style="flex: 0 0 18px">
<i
v-if="item.show"
style="font-size: 18px"
class="el-icon-arrow-up"
></i>
<i
v-else
style="font-size: 18px"
class="el-icon-arrow-down"
></i>
</div>
</div>
<div
v-if="item.show"
v-for="(subitem, i) in item.children"
:key="i"
>
<el-tooltip placement="bottom" effect="light">
<div slot="content">
<div class="huashu-title">
客户标签：{{ getKeywordsList(subitem.keywordsList) }}
</div>
<div class="huashu-title">需求挖掘话术</div>
<div class="huashu">
<div
class="huashu-item"
v-for="(question, questionindex) in subitem.modelList"
:key="questionindex"
>
<i
class="el-icon-success"
:style="
question.isAskQuestions == 0
? 'color: #409eff'
: question.isAskQuestions == 2
? 'color: orange'
: 'color: #666'
"
></i>
<div
class="text"
:style="
question.isAskQuestions == 0
? 'color: #409eff'
: question.isAskQuestions == 2
? 'color: orange'
: 'color:#666'
"
>
{{
question.showFormatExpression ||
question.keywordsName
}}
</div>
</div>
</div>
<div v-if="item.show" v-for="(subitem,i) in item.children" :key="i" >
<el-tooltip placement="bottom" effect="light">
<div slot="content">
<div class="huashu-title">客户标签：{{getKeywordsList(subitem.keywordsList)}}</div>
<div class="huashu-title">需求挖掘话术</div>
<div class="huashu">
<div class="huashu-item" v-for="(question,questionindex) in subitem.modelList" :key="questionindex">
<i class="el-icon-success" :style="question.isAskQuestions==0?'color: #409eff':question.isAskQuestions==2?'color: orange':'color: #666'"></i>
<div class="text" :style="question.isAskQuestions==0?'color: #409eff':question.isAskQuestions==2?'color: orange':'color:#666'">{{question.showFormatExpression||question.keywordsName}}</div>
</div>
</div>
</div>
<div class="rateboxcent">
<div>{{subitem.name}}</div>
<div>
<div class="ratebutton" v-if="subitem.isAskQuestions==0">已执行</div>
<div class="ratebutton1" v-else>未执行</div>
</div>
<div>
<div class="ratebutton" v-if="subitem.selected==0">已匹配</div>
<div class="ratebutton1" v-else>未匹配</div>
</div>
<div style="flex:0 0 18px"></div>
</div>
</el-tooltip>
</div>
<div class="rateboxcent">
<div>{{ subitem.name }}</div>
<div>
<div
class="ratebutton"
v-if="subitem.isAskQuestions == 0"
>
已执行
</div>
<div class="ratebutton1" v-else>未执行</div>
</div>
</div>
<!-- 只有一级标签 -->
<div v-if="item.children.length==0">
<div class="rateboxcenttit" style="cursor:pointer">
<el-tooltip placement="bottom" effect="light">
<div slot="content">
<div class="huashu-title">客户标签：{{getKeywordsList(item.keywordsList)}}</div>
<div class="huashu-title">需求挖掘话术</div>
<div class="huashu">
<div class="huashu-item" v-for="(question,index) in item.modelList" :key="index">
<i class="el-icon-success" :style="question.isAskQuestions==0?'color: #409eff':question.isAskQuestions==2?'color: orange':'color: #666'"></i>
<div class="text" :style="question.isAskQuestions==0?'color: #409eff':question.isAskQuestions==2?'color: orange':'color: #666'">{{question.showFormatExpression||question.keywordsName}}</div>
</div>
</div>
</div>
<div style="display: flex">
<div style="flex:1">{{item.name}} </div>
<div style="flex:1">执行{{item.fraction||0}}%</div>
<div style="flex:1" v-if="item.keywordsList&&item.keywordsList.length">已匹配({{item.keywordsList&&item.keywordsList.length}})</div>
<div style="flex:1" v-else>未匹配</div>
<div style="flex:0 0 18px"></div>
</div>
</el-tooltip>
<div>
<div class="ratebutton" v-if="subitem.selected == 0">
已匹配
</div>
<div class="ratebutton1" v-else>未匹配</div>
</div>
</div>
<div style="flex: 0 0 18px"></div>
</div>
</el-tooltip>
</div>
</div>
<div class="mydesc" v-if="zhixingcenterindex==2">
<span style="color: #409eff"><i class="el-icon-success" style="margin-right:5px"></i>本次接待执行</span>
<span style="color: orange"><i class="el-icon-success" style="margin-right:5px"></i>之前接待执行</span>
<span style="color: gray"><i class="el-icon-success" style="margin-right:5px"></i>未执行</span>
</div>
<!-- 只有一级标签 -->
<div v-if="item.children.length == 0">
<div class="rateboxcenttit" style="cursor: pointer">
<el-tooltip placement="bottom" effect="light">
<div slot="content">
<div class="huashu-title">
客户标签：{{ getKeywordsList(item.keywordsList) }}
</div>
<div class="huashu-title">需求挖掘话术</div>
<div class="huashu">
<div
class="huashu-item"
v-for="(question, index) in item.modelList"
:key="index"
>
<i
class="el-icon-success"
:style="
question.isAskQuestions == 0
? 'color: #409eff'
: question.isAskQuestions == 2
? 'color: orange'
: 'color: #666'
"
></i>
<div
class="text"
:style="
question.isAskQuestions == 0
? 'color: #409eff'
: question.isAskQuestions == 2
? 'color: orange'
: 'color: #666'
"
>
{{
question.showFormatExpression ||
question.keywordsName
}}
</div>
</div>
</div>
</div>
<div style="display: flex">
<div style="flex: 1">{{ item.name }}</div>
<div style="flex: 1">执行{{ item.fraction || 0 }}%</div>
<div
style="flex: 1"
v-if="item.keywordsList && item.keywordsList.length"
>
已匹配({{
item.keywordsList && item.keywordsList.length
}})
</div>
<div style="flex: 1" v-else>未匹配</div>
<div style="flex: 0 0 18px"></div>
</div>
</el-tooltip>
</div>
</div>
</div>
<div class="mydesc" v-if="zhixingcenterindex == 2">
<span style="color: #409eff"
><i class="el-icon-success" style="margin-right: 5px"></i
>本次接待执行</span
>
<span style="color: orange"
><i class="el-icon-success" style="margin-right: 5px"></i
>之前接待执行</span
>
<span style="color: gray"
><i class="el-icon-success" style="margin-right: 5px"></i
>未执行</span
>
</div>
</div>
</div>
</div>
@@ -1133,7 +1281,13 @@ export default {
data() {
return {
keyWordsList: [],
imgArr: ['', 'https://static.quhouse.com/37e0de3f8d1c421dac8bf699d5e7992d.png', 'https://static.quhouse.com/b106e8e75db24a59a579a15a78830a76.png', 'https://static.quhouse.com/8443a2ecb81d4639991ab29c422e9949.png', 'https://static.quhouse.com/1cd794cb6c974d9dad948a6dd444518b.png',],
imgArr: [
"",
"https://static.quhouse.com/37e0de3f8d1c421dac8bf699d5e7992d.png",
"https://static.quhouse.com/b106e8e75db24a59a579a15a78830a76.png",
"https://static.quhouse.com/8443a2ecb81d4639991ab29c422e9949.png",
"https://static.quhouse.com/1cd794cb6c974d9dad948a6dd444518b.png",
],
mg: 0,
recordsText: [],
roleVisible: false,
@@ -1288,66 +1442,66 @@ export default {
},

methods: {
changeshow1(item){
item.show = !item.show
changeshow1(item) {
item.show = !item.show;
},
//挖掘率话术客户标签展示
getKeywordsList(list) {
let keywords = [];
if (list && list.length) {
keywords = list.map((item) => item.name);
} else {
return "--";
}
return keywords.join(",");
},
//挖掘率话术客户标签展示
getKeywordsList(list){
let keywords = []
if(list&&list.length){
keywords = list.map(item=>item.name)
}else{
return '--'
}
return keywords.join(',')
},
//需求挖掘率-需求话术
findKeyWordsBycusId() {
axios({
url: `/autoSR/customer/findKeyWordsBycusId`,
method: 'get',
params: {
cusId: this.fileId
}
}).then(data => {
if (data.code==0) {
console.log(data)
let tempData = data.data
if(tempData.length){
tempData.forEach((item,index)=>{
item.show = false
if(index==0){
item.show = true
}
})
}else{
tempData = []
}
this.keyWordsList = tempData
console.log(this.keyWordsList)
}
})
axios({
url: `/autoSR/customer/findKeyWordsBycusId`,
method: "get",
params: {
cusId: this.fileId,
},
}).then((data) => {
if (data.code == 0) {
console.log(data);
let tempData = data.data;
if (tempData.length) {
tempData.forEach((item, index) => {
item.show = false;
if (index == 0) {
item.show = true;
}
});
} else {
tempData = [];
}
this.keyWordsList = tempData;
console.log(this.keyWordsList);
}
});
},
// 对话加命中标签,区分类型的处理
dealTypes(type){
if(type){
// let tem = type.substring(1).split(',')
let tem = type.split(',')
return tem
}else{
return []
}
dealTypes(type) {
if (type) {
// let tem = type.substring(1).split(',')
let tem = type.split(",");
return tem;
} else {
return [];
}
},
// 对话加命中标签-区分同一个类型的标签
dealword(type){
if(type){
let a = type.split('-')
let rest = type.substring(2).split('-').join(',')
let arr =[a[0],rest]
return arr
}else{
return []
}
dealword(type) {
if (type) {
let a = type.split("-");
let rest = type.substring(2).split("-").join(",");
let arr = [a[0], rest];
return arr;
} else {
return [];
}
},
chooseRoles(index) {
this.roleFlag = index;
@@ -2201,46 +2355,48 @@ export default {

//获取转写内容和播放列表
Getsthetransliteratecontent() {
this.$api.http.findByCusIdcusId({
cusId: this.fileId
}).then(res => {
console.log(res, 'dsadasd')
let audopbj = res.data;
this.mg = res.data[0].merge;
console.log(res.data[0].merge, 'res.data[0].merge')
this.recordPath = audopbj[this.AudioIdx].recordPath;
audopbj[this.AudioIdx].audioContent != ""
? (this.transcriptionlist = JSON.parse(
audopbj[this.AudioIdx].audioContent
))
: (this.transcriptionlist = []);
// this.transcriptionlist=JSON.parse(audopbj[this.AudioIdx].audioContent)
this.tablist = [];
if (this.userinformationlist.yon == 0) {
this.isd = audopbj[this.AudioIdx].id;
// console.log(audopbj[this.AudioIdx].speakerNum, "speakerNum");
this.creatTabList(audopbj[this.AudioIdx].speakerNum)
this.roleList = this.tablist.slice(1);
if (audopbj[this.AudioIdx].speaker == null) {
this.yibiaoji = "未标记";
this.roleindexbiaoji = 0;
this.dshfkjsdkksodofydwfkhwdfkjh = 0;
} else {
this.yibiaoji = "已标记";
this.tablist[audopbj[this.AudioIdx].speaker].name =
this.tablist[audopbj[this.AudioIdx].speaker].name + "顾问";
this.roleindexbiaoji = audopbj[this.AudioIdx].speaker - 1;
this.dshfkjsdkksodofydwfkhwdfkjh =
audopbj[this.AudioIdx].speaker - 1;
this.$api.http
.findByCusIdcusId({
cusId: this.fileId,
})
.then((res) => {
console.log(res, "dsadasd");
let audopbj = res.data;
this.mg = res.data[0].merge;
console.log(res.data[0].merge, "res.data[0].merge");
this.recordPath = audopbj[this.AudioIdx].recordPath;
audopbj[this.AudioIdx].audioContent != ""
? (this.transcriptionlist = JSON.parse(
audopbj[this.AudioIdx].audioContent
))
: (this.transcriptionlist = []);
// this.transcriptionlist=JSON.parse(audopbj[this.AudioIdx].audioContent)
this.tablist = [];
if (this.userinformationlist.yon == 0) {
this.isd = audopbj[this.AudioIdx].id;
// console.log(audopbj[this.AudioIdx].speakerNum, "speakerNum");
this.creatTabList(audopbj[this.AudioIdx].speakerNum);
this.roleList = this.tablist.slice(1);
if (audopbj[this.AudioIdx].speaker == null) {
this.yibiaoji = "未标记";
this.roleindexbiaoji = 0;
this.dshfkjsdkksodofydwfkhwdfkjh = 0;
} else {
this.yibiaoji = "已标记";
this.tablist[audopbj[this.AudioIdx].speaker].name =
this.tablist[audopbj[this.AudioIdx].speaker].name + "顾问";
this.roleindexbiaoji = audopbj[this.AudioIdx].speaker - 1;
this.dshfkjsdkksodofydwfkhwdfkjh =
audopbj[this.AudioIdx].speaker - 1;
}
}
}
this.corpusId = audopbj[this.AudioIdx].id;
this.aplayerId = this.AudioIdx;
this.aplayerLength = audopbj.length;
this.arr = res.data;
this.bofangchushihua();
this.formatAudioList();
});
this.corpusId = audopbj[this.AudioIdx].id;
this.aplayerId = this.AudioIdx;
this.aplayerLength = audopbj.length;
this.arr = res.data;
this.bofangchushihua();
this.formatAudioList();
});
},
tapspagek(data, index) {
// this.roleindex = i
@@ -2379,133 +2535,152 @@ export default {
</script>

<style scoped lang="scss" >
/deep/.el-radio-button__orig-radio:checked+.el-radio-button__inner{
background-color: #2671e2 !important;
border-color: #2671e2 !important;
/deep/.el-radio-button__orig-radio:checked + .el-radio-button__inner {
background-color: #2671e2 !important;
border-color: #2671e2 !important;
}
/deep/.el-radio-button--small .el-radio-button__inner{
/deep/.el-radio-button--small .el-radio-button__inner {
padding: 9px 10px !important;
}
.rateboxcenttit {
.rateboxcenttit {
width: 100%;
height: 44px;
background: #f8f8f8;
display: flex;
align-items: center;
color: #333333;
font-size: 16px;
& > div {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
}
.ratebutton {
width: 68px;
height: 26px;
background: #2671e2;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
color: #ffffff;
text-align: center;
line-height: 26px;
margin: 0 auto;
}

.ratebutton1 {
width: 68px;
height: 26px;
background: #f2f2f2;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
color: #999999;
text-align: center;
line-height: 26px;
margin: 0 auto;
}
// 销讲执行率
.xiaojaingBox {
.xiaojiang-title {
width: 100%;
height: 44px;
background: #F8F8F8;
border-bottom: 1px solid #e0e0e0;
display: flex;
align-items: center;
color: #333333;
font-size: 16px;
&>div {
flex:1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
}
.ratebutton {
width: 68px;
height: 26px;
background: #2671E2;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
color: #FFFFFF;
text-align: center;
line-height: 26px;
margin:0 auto;
}

.ratebutton1 {
width: 68px;
height: 26px;
background: #F2F2F2;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
color: #999999;
text-align: center;
line-height: 26px;
margin:0 auto;
}
// 销讲执行率
.xiaojaingBox{
.xiaojiang-title{
width: 100%;height: 44px;border-bottom: 1px solid #e0e0e0;display: flex;align-items: center;background: #f0f6ff;
.label1{
width: 60%;font-size: 16px;color: #333333;text-indent: 20px;
}
.label2{
width: 40%; flex: 1; font-size: 16px; color: #333333
}
background: #f0f6ff;
.label1 {
width: 60%;
font-size: 16px;
color: #333333;
text-indent: 20px;
}
}
// 需求挖掘率
.wajueBox{
.wajue-title{
width: 100%;
height: 44px
;border-bottom: 1px solid #e0e0e0;
display: flex;
align-items: center;
background: #f0f6ff;
.label1{
width: 40%;font-size: 16px;color: #333333;text-indent: 20px;
}
.label2{
width: 20%; flex: 1; font-size: 16px; color: #333333
}
.label3{
width: 40%; flex: 1; font-size: 16px; color: #333333
}
.label2 {
width: 40%;
flex: 1;
font-size: 16px;
color: #333333;
}

}
/*话术*/
.huashu-title{
background: #fff;
font-size: 16px;
line-height: 20px;
padding: 10px 20px;
}
.huashu{
width: 260px;
padding: 0 20px 30px;
}
// 需求挖掘率
.wajueBox {
.wajue-title {
width: 100%;
height: 44px;
border-bottom: 1px solid #e0e0e0;
display: flex;
align-items: center;
flex-wrap: wrap;
background: #fff;
.huashu-item{
margin-right: 20px;
height: 30px;
line-height: 30px;
display: flex;
align-items: center;
.text{
font-size: 14px;
color: #666;
margin-left: 5px;
}
background: #f0f6ff;
.label1 {
width: 40%;
font-size: 16px;
color: #333333;
text-indent: 20px;
}
.label2 {
width: 20%;
flex: 1;
font-size: 16px;
color: #333333;
}
.label3 {
width: 40%;
flex: 1;
font-size: 16px;
color: #333333;
}
}
.rateboxcent {
width: 100%;
height: 50px;
border-bottom: 1px solid #F8F8F8;
}
/*话术*/
.huashu-title {
background: #fff;
font-size: 16px;
line-height: 20px;
padding: 10px 20px;
}
.huashu {
width: 260px;
padding: 0 20px 30px;
display: flex;
align-items: center;
flex-wrap: wrap;
background: #fff;
.huashu-item {
margin-right: 20px;
height: 30px;
line-height: 30px;
display: flex;
align-items: center;
color: #666666;
font-size: 14px;
&>div{
flex:1;
.text {
font-size: 14px;
color: #666;
margin-left: 5px;
}
}
}

.rateboxcent {
width: 100%;
height: 50px;
border-bottom: 1px solid #f8f8f8;
display: flex;
align-items: center;
color: #666666;
font-size: 14px;
& > div {
flex: 1;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}

.mydesc{
.mydesc {
position: absolute;
bottom: 0;
left: 0;
@@ -2519,34 +2694,34 @@ export default {
background: #fff;
}
/*对话的标签标识*/
.content123 .showmark{
font-size: 14px;
min-height: 20px;
line-height: 20px;
margin: 10px 22px 0;
.content123 .showmark {
font-size: 14px;
min-height: 20px;
line-height: 20px;
margin: 10px 22px 0;
display: flex;
flex-direction: column;
.mark-item {
display: flex;
flex-direction: column;
.mark-item{
display: flex;
align-items: flex-start;
margin-bottom: 2px;
align-items: flex-start;
margin-bottom: 2px;
.markicon {
width: 14px;
height: 14px;
margin-right: 6px;
}
.marktext{
.marktext {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #3E50E8;
color: #3e50e8;
line-height: 18px;
word-break: break-all;
margin: 0;
max-width: 150px;
}
}
}
}
.expIcon {
display: block;
width: 16px;
@@ -2664,7 +2839,7 @@ export default {
flex-direction: row-reverse;
text-align: left;
}
.showmark{
.showmark {
flex-direction: row-reverse;
text-align: left;
}
@@ -3176,7 +3351,6 @@ export default {
font-size: 16px;
}


.activecllasscet {
background: #2671e2;
color: #fff;


Schrijf Voorbeeld
Laden…
Annuleren
Opslaan