//添加在线客服 .kefu { bottom: 100px; height: 430px; position: fixed; right: 10px; width: 100px; .kefu_itemKf { background-color: #fff; border-radius: 10px; box-shadow: 0 4px 16px #0000001a; height: 100px; margin-bottom: 15px; text-align: center; width: 100px; box-sizing: border-box; position: relative; cursor: pointer; margin-bottom: 100px; a { >p { color: #666; font-size: 14px; font-weight: 500; line-height: 16px; } >img { margin-top: 15px; width: 50px; height:50px; margin-bottom: 5px; } } } .kefu_itemQQ { background-color: #fff; border-radius: 10px; box-shadow: 0 4px 16px #0000001a; height: 100px; margin-bottom: 15px; text-align: center; width: 100px; box-sizing: border-box; position: relative; cursor: pointer; >p { color: #666; font-size: 14px; font-weight: 500; line-height: 16px; } >img { margin-top: 10px; width: 60px; height: 60px; } &:hover { .kefu_item_content_QQ { display: block; } } } .kefu_itemPhone { background-color: #fff; border-radius: 10px; box-shadow: 0 4px 16px #0000001a; height: 100px; margin-bottom: 15px; text-align: center; width: 100px; box-sizing: border-box; position: relative; cursor: pointer; >p { color: #666; font-size: 14px; font-weight: 500; line-height: 16px; } >img { margin-top: 10px; width: 60px; height: 60px; } &:hover { .kefu_item_content_phone { display: block; } } } .kefu_item_content_QQ { position: absolute; top: -100px; right: 100px; background: #fff; border-radius: 10px; display: none; width: 190px; height: 330px; background: #fff; box-shadow: 0 4px 16px #0000001a; z-index: 99; box-sizing: border-box; padding: 20px; img { margin-bottom: 10px; } .qqfs { margin-bottom: 20px; font-size: 14px; color: #333; } .arrow { width: 0; height: 0; width: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #fff; position: absolute; top: 120px; right: -20px; transform: translateX(-50%); z-index: 100; } } .kefu_item_content_phone { position: absolute; top: 0; right: 100px; background: #fff; border-radius: 10px; display: none; width: 190px; height: 80px; background: #fff; box-shadow: 0 4px 16px #0000001a; z-index: 99; box-sizing: border-box; padding: 20px; text-align: left; color: #333; .kefu_item_content_phone_title { margin-bottom: 5px; font-weight: bold; } .arrow { width: 0; height: 0; width: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #fff; position: absolute; top: 20px; right: -20px; transform: translateX(-50%); z-index: 100; } } } @media screen and (max-width:800px){/*ipad_phone*/ .phone_none{display:none!important;} .kefu{left:0px;bottom:0px!important;width:100%!important;height:66px!important; text-align:center; line-height:66px; z-index: 1111;position:relative!important; } .kefu>div{display:inline-block;margin:0px 10px!important;height:55px!important;width:90px!important;} .kefu>div a{display:block; height:55px;} .kefu>div>img{display:block;margin:3px auto 0!important;width:33px!important;height:33px!important;} .kefu>div>a>img{display:block;margin:3px auto 0!important;width:33px!important;height:33px!important;} .kefu .kefu_item_content_QQ img{margin-bottom:0px;} .kefu .kefu_item_content_QQ .qqfs{margin-bottom:0px;height:22px;line-height:22px;} .kefu .kefu_itemKf a > p{word-break: keep-all; white-space: nowrap;} .kefu .kefu_item_content_QQ{ right:-95px; margin-right:50%;overflow:hidden; top:auto;bottom:100px; line-height: normal; } .qqadd:nth-of-type(1){margin-bottom:22px;} .kefu .kefu_item_content_phone{ right:20px; margin-right:50%;overflow:hidden; top:auto;bottom:100px; line-height: normal; } }