127 lines
2.9 KiB
Vue
127 lines
2.9 KiB
Vue
|
<template>
|
||
|
|
<div v-show="dialogVisible" class="chat-popup">
|
||
|
|
<div class="chat-setting-header">
|
||
|
|
<div class="chat-setting-title">设置</div>
|
||
|
|
<div class="chat-setting-close">
|
||
|
|
<i class="el-icon-close" @click="dialogVisible=false" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="chat-setting-content">
|
||
|
|
<div class="chat-setting-language">
|
||
|
|
<div class="setting-language-title">语言: </div>
|
||
|
|
<el-switch
|
||
|
|
v-model="form.language"
|
||
|
|
class="setting-language-select"
|
||
|
|
active-color="#409EFF"
|
||
|
|
inactive-color="#ff4949"
|
||
|
|
active-text="中"
|
||
|
|
inactive-text="En"
|
||
|
|
active-value="zh"
|
||
|
|
inactive-value="en"
|
||
|
|
@change="changeLanguage()"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="chat-setting-sex">
|
||
|
|
<div class="setting-sex-title">性别: </div>
|
||
|
|
<el-switch
|
||
|
|
v-model="form.sex"
|
||
|
|
class="setting-sex-select"
|
||
|
|
active-color="#409EFF"
|
||
|
|
inactive-color="#ff4949"
|
||
|
|
active-icon-class="el-icon-male"
|
||
|
|
inactive-icon-class="el-icon-female"
|
||
|
|
active-value="1"
|
||
|
|
inactive-value="0"
|
||
|
|
@change="changeSex()"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'ChatSetting',
|
||
|
|
props:{
|
||
|
|
form:{
|
||
|
|
type:Object,
|
||
|
|
required:true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dialogVisible: false,
|
||
|
|
loading:false
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
doShow() {
|
||
|
|
this.dialogVisible = true;
|
||
|
|
},
|
||
|
|
doClose() {
|
||
|
|
this.dialogVisible = false;
|
||
|
|
},
|
||
|
|
changeLanguage() {
|
||
|
|
this.$emit('setSetting', this.form);
|
||
|
|
},
|
||
|
|
changeSex() {
|
||
|
|
this.$emit('setSetting', this.form);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.chat-popup{
|
||
|
|
position: absolute;
|
||
|
|
width: 54%;
|
||
|
|
height: 143px;
|
||
|
|
border: 1px #dedede solid;
|
||
|
|
left: 33%;
|
||
|
|
top: 24%;
|
||
|
|
z-index: 7;
|
||
|
|
border-radius: 4px;
|
||
|
|
-webkit-box-shadow: 3px 3px 3px #dedede;
|
||
|
|
box-shadow: 3px 3px 3px #dedede;
|
||
|
|
background: #fff;
|
||
|
|
}
|
||
|
|
.chat-setting-header{
|
||
|
|
padding-left: 10px;
|
||
|
|
padding-top: 6px;
|
||
|
|
font-size: 14px;
|
||
|
|
border-bottom: 1px #dedede solid;
|
||
|
|
padding-bottom: 6px;
|
||
|
|
}
|
||
|
|
.chat-setting-title{
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
.chat-setting-close{
|
||
|
|
float: right;
|
||
|
|
display: inline-block;
|
||
|
|
margin-right: 5px;
|
||
|
|
font-size: 16px;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
.chat-setting-content{
|
||
|
|
|
||
|
|
}
|
||
|
|
.chat-setting-language,.chat-setting-sex{
|
||
|
|
display: inline-block;
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
.setting-language-title,.setting-sex-title{
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 14px;
|
||
|
|
margin-left: 20px;
|
||
|
|
vertical-align: top;
|
||
|
|
margin-top: 3px;
|
||
|
|
}
|
||
|
|
.setting-language-select,.setting-sex-select{
|
||
|
|
display: inline-block;
|
||
|
|
vertical-align: top;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<style lang="scss">
|
||
|
|
.setting-sex-select .el-icon-male,.setting-sex-select .el-icon-female{
|
||
|
|
font-size:18px !important;
|
||
|
|
}
|
||
|
|
</style>
|