Customer-Service-Web/pc_chat/src/App.vue

<template>
  <div id="app">
    <!-- 客服 -->
    <div v-if="changeChild == 10">
      <chat v-on:value ='value'/>
    </div>
    <div v-if="changeChild == 100">
      <ledgeBase v-on:value ="value"/>
    </div>
    <div v-if="changeChild == 1000">
      <leaveMsg v-on:value ='value'/>
    </div>
  </div>
</template>

<script>
import chat from './components/chat'
import leaveMsg from './components/leaveMsg'
import ledgeBase from './components/ledgeBase'

export default {
  name: 'App',
  components: {
    chat,
    leaveMsg,
    ledgeBase
  },
  data(){
    return{
      changeChild:10 //默认10，子组件传过来的值 100为留言知识库，1000为发起留言
    }
  },
  methods:{
    value(val){
      this.changeChild = val;
      console.log(this.changeChild)
    }
  },
  mounted(){
  }
}
</script>

<style>
#app {
  /* background: #EFEFEF; */
    width: 100%;
    /* margin: 10% 20% */
}
body{
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.el-input__inner,.el-textarea__inner{
    padding:0 9px;
    color: #333333;
}
/* input::-webkit-input-placeholder{
   color: #333333;
} */
.el-upload--picture-card{
  width: 50px;
  height: 50px;
  line-height: 50px;
  border:1px solid rgba(221,221,221,1);
  border-radius: 5px;
  background:rgba(255,255,255,1);
}
/* .el-upload--picture-card i {
  line-height: none!important;
} */
[class*=" el-icon-"], [class^=el-icon-]{
  line-height: 0;
}
.el-upload-list--picture-card .el-upload-list__item{
  width: 50px;
  height: 50px;;
  margin: 0 20px 0 0;
  border: 0;
  border-radius : 5px;
  } 
  .el-card__body{
    padding: 0;
  }
 .el-textarea .el-textarea__inner{
  resize: none;
} 
  .levMsg .el-input__inner, .el-textarea__inner{
    padding: 10px 0 0 10px;
    height: 120px;
  }
  .el-popover{
    height: 200px;
    overflow: auto;
  }  
 .leaveMsg .el-textarea .el-textarea__inner{
  height: 80px!important;
}
/* 滚动条 */
/* 兼容版滚动条 */
.scroll::-webkit-scrollbar {
  border: .02rem solid #FFF;
}

.scroll::-webkit-scrollbar {
  width: 0rem;
  height: .04rem;
}

.scroll::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}

.scroll::-webkit-scrollbar-thumb {
  border-radius: .1rem;
  box-shadow: inset 0 0 0 .04rem #aaa;
  border: .02rem solid transparent;
}

.scroll::-webkit-scrollbar-track {
  display: block;
  background: rgba(0, 0, 0, 0.1);
}
.el-dialog{
  margin-top: 0!important;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  margin: 0;
  max-height:600px;
}
.el-dialog img{
  max-height: 500px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"]{
  -moz-appearance:textfield;
}
.chatting .el-upload-list{
    display: none;
  }
  /* 手风琴样式 */
  .el-collapse{
        margin: 10px;
    border: 1px solid rgba(223,223,223,1);
    border-radius: 5px;
  }
  div.el-collapse-item__header{
    border:0;
    /* height: 40px; */
    /* line-height: 40px; */
    padding-left: 15px;
    color: #5EA0F7;
    font-size: 14px;
 
  }  
  .el-collapse-item:nth-child(odd), .el-collapse-item:nth-child(odd) div.el-collapse-item__header{
    background: #F6F6F6!important;
  }
  .el-collapse-item__wrap{
    border: 0;
    padding-left: 15px;

  }
  .el-collapse-item:last-child{
    margin-bottom: 0;
  }
</style>