micro_vue/src/scrm_pages/contactBox/index.vue

<template>
    <div class="contact-box" id="contact-box">
        <div class="contact-box-item msg-box" >
            <div class="box-btn " @click="showMsgBox=true">
                <i class="el-icon-service"></i>
                <span>在线客服</span>
            </div>
            <div class="contact-info-box" v-show="!showMsgBox">
                点击打开在线客服
            </div>
            <div class="contact-msg-box" v-show="showMsgBox">
                <div class="msg-box-panel">
                    <div class="panel-header">
                        <i class="el-icon-close kf-close" @click="showMsgBox=false"></i>
                        <p class="kf-h-line">酷医云在线客服</p>
                        <div class="clearfix"></div>
                    </div>
                    <div class="panel-body">
                        <ul class="msg-inner scroll-y">
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                            <li>1</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="contact-box-item phone-box">
            <div class="box-btn">
                <i class="el-icon-phone-outline"></i>
                <span>客服电话</span>
            </div>
            <div class="contact-phone-box">
                <i class="el-icon-phone-outline"></i>
                <span>0755-86526342</span>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name:'contactBox',
    data(){
        return{
            showMsgBox:false,
        }
    }

}
</script>

<style scoped>
.contact-box {
    position: fixed;
    right: 12px;
    bottom: 10%;
    margin-top: -100px;
    z-index: 99999;
}
    
.contact-box .contact-box-item{
    position: relative;
    margin-bottom: 6px;
    border: 1px solid #999;
}

.contact-box .contact-box-item .box-btn {
    width: 48px;
    height: 48px;
    text-align: center;
    display: block;
    position: relative;
    background: #fff;
    cursor: pointer;
}
.contact-box .contact-box-item .box-btn i{
    font-size:30px; 
    margin: 9px;
    color: #59a3ec;
    display: inline-block;
}
.contact-box .contact-box-item .box-btn:hover {
    background: #5aa6f1;
}
.contact-box .box-btn span{
    display: none;
}

.contact-box .box-btn:hover span{
    display: block;
    color:#fff;
    padding: 8px;
    font-size: 14px;
}
.contact-box .box-btn:hover i{
    display: none;
}
.contact-box .contact-phone-box {
    border: 1px solid #999;
    position: absolute;
    bottom: 0px;
    right: 56px;
    height: 48px;
    /* display: block; */
    background: #fff;
    width: 230px;
    display:none;
    align-items: center;
}
.contact-box .contact-phone-box i {
    color: #59a3ec;
    font-size:30px; 
    margin: 9px;
}
.contact-box .phone-box:hover .contact-phone-box{
    display:flex;
}

.contact-box .contact-phone-box span {
    font-size:20px; 
    margin-left: 15px;
    color: #485b6d;
}

.contact-box .contact-info-box {
    border: 1px #e5e5e5 solid;
    position: absolute;
    bottom: 0px;
    right: 56px;
    display: none;
    background: #fff;
    width: 175px;
    z-index: 1000000;
}
.contact-box .msg-box:hover .contact-info-box{
    display:block;
    color: #485b6d;
    font-size:20px; 
    padding: 5px;
}

.contact-box .contact-msg-box {
    border: 1px #e5e5e5 solid;
    position: absolute;
    bottom: 0px;
    right: 56px;
    background: #fff;
}
.contact-box .msg-box-panel {
    width: 408px;
    background-color: #fff;
    position: relative;
}
.contact-box .panel-header {
    border-bottom: 1px #e5e5e5 solid;
}
.contact-box .panel-header .kf-close {
    width: 30px;
    height: 20px;
    float: right;
    cursor: pointer;
    margin: 12px 0 0 0;
}
.contact-box .panel-header .kf-h-line {
    float: left;
    color: #485b6d;
    font-size: 16px;
    line-height: 40px;
    height: 40px;
    padding-left: 10px;
}
.contact-box .panel-body {
    overflow-x: visible;
    overflow-y: auto;
    height: 182px;
}

.contact-box .msg-inner {
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    border-bottom: 1px #e5e5e5 solid;
}
.contact-box .scroll-y::-webkit-scrollbar {
    width: 6px;
    height: 3px;
}
.contact-box .scroll-y::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);
    box-shadow: inset 0 0 6px rgba(0,0,0,.1);
    border-radius: 2px;
}
.contact-box .scroll-y::-webkit-scrollbar-track {
    border-radius: 2px;
}
</style>