rt-sim-training-client/src/views/newMap/jointTrainingNew/chatSetting.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: 23%;
    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>