近期在定制化聊天界面的过程中,重写了下访客聊天界面的评价弹窗功能。
现在实现的效果是下面这样的
实现代码html部分
<!--在线评价--> <div v-if="comment.dialog" class="comment"> <div class="scoreBox"> <i class="iconfont icon-guanbi" @click="comment.dialog=false"></i> <el-avatar :size="80" :src="kefu.staffAvator"></el-avatar> <div class="scoreTitle">請您對服務進行評價</div> <div class="scoreDesc">您的好評是對我們最大的鼓勵 如有疑問歡迎再次咨詢</div> <el-rate v-model="comment.score"></el-rate> <el-input class="commentArea" type="textarea" :rows="6" placeholder="您還可填寫反饋(選填)" v-model="comment.textarea"> </el-input> <el-button :disabled="comment.score==0" class="commentBtn" type="warning" style="width: 90%;border-radius: 20px;">提交</el-button> </div> </div> <!--//在线评价-->
data属性部分
//评价 comment:{ dialog:false, score:0, textarea:"", },
css部分
.comment{ position: fixed; width: 100%; height: 100%; background: rgba(0,0,0,0.2); display: flex; flex-direction: column; justify-content: flex-end; } .scoreBox{ background: #fff; display: flex; flex-direction: column; align-items: center; padding: 25px 10px 0px 10px; position: relative; } .scoreBox .commentArea{ width: 100%; margin-top: 40px; } .scoreBox .el-textarea__inner{ border-radius: 10px; background: #F5F5F6; border: none; color: #333333; } .scoreBox .el-rate__icon{ font-size: 35px; margin: 0 8px; } .scoreBox .scoreTitle{ color: #2A2A2A; font-family: PingFang SC; font-size: 18px; margin-top: 15px; } .scoreBox .scoreDesc{ color: #666666; font-family: PingFang SC; font-size: 14px; margin-bottom: 20px; margin-top: 10px; } .scoreBox .icon-guanbi{ position: absolute; right: 10px; top: 10px; font-size: 22px; cursor: pointer; color: #333; } .scoreBox .commentBtn{ display: block; width: 100%; border-radius: 20px; background-color: #FF6704; margin: 50px auto 35px auto; }