产品详情
多行文本内容元素
富文本内容绑定数据后可解析HTML语言内容
在线客服，后台选择：模板二
下面是样式代码：粘贴在：“风格-高级”里面
修改颜色
/* 在线客服 */
.pl_service1 {
width: 210px;
position: fixed;
right: -210px;
top: 50%;
transform: translateY(-50%);
font-size: 12px;
transition: right 0.4s;
z-index: 99;
}
.pl_service1:hover {
right: 0%;
}
.pl_service1 .icon {
margin: 0;
}
.pl_service1 .service_btn {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
width: 40px;
position: absolute;
left: -40px;
top: 50%;
transform: translateY(-50%);
}
.pl_service1:hover .service_btn {
height: 100%;
}
.pl_service1 .sevice_flex_con {
padding: 10px 0;
width: 100%;
background-color: #898989;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
transition: height 0.4s;
}
.pl_service1:hover .sevice_flex_con {
height: 100%;
}
.pl_service1 .service_con {
background: #fff;
padding: 10px;
color: #898989;
width: 210px;
float: left;
}
.pl_service1 .service_group {
padding: 5px 0;
border-bottom: 1px solid #c5c5c5;
}
.pl_service1 .service_group:last-child {
border: 0;
}
.pl_service1 .service_item {
padding: 5px;
line-height: 16px;
cursor: pointer;
border-radius: 3px;
padding-left: 25px;
position: relative;
}
.pl_service1 .service_item .iconSpan{
position: absolute;
left: 5px;
display: inline-block;
width: 16px;
height: 16px;
top: 50%;
transform: translateY(-50%);
}
.pl_service1 .service_item .icon {
width: 16px;
height: 16px;
margin-top: -2px;
}
.pl_service1 .service_item:hover {
background-color: #898989;
color: #fff;
}
.service_pop {
width: 320px;
padding: 20px;
border-radius: 8px;
background-color: #fff;
box-shadow: 0px 0px 4px rgb(0 0 0 / 35%);
position: fixed;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
text-align: center;
z-index: 999;
}
.service_pop img {
width: 240px;
height: 240px;
border-radius: 4px;
border: 1px solid #ccc;
}
.service_pop p {
font-size: 16px;
/* line-height: 40px; */
}
.pl_service2 {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 99;
}
.pl_service2 .service_item {
margin-bottom: 2px;
position: relative;
cursor: pointer;
background-color: #f3f3f3;
color: #999;
transition: all 0.5s ease;
}
.pl_service2 .service_item:hover {
background-color: #f35454;
color: #fff;
}
.pl_service2 .service_icon {
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
}
.pl_service2 .service_icon .icon {
width: 50%;
height: 50%;
margin: 0;
}
.pl_service2 .service_value_con {
position: absolute;
right: 100%;
top: 50%;
transform: translateY(-50%);
width: 0;
opacity: 0;
overflow: hidden;
transition: opacity 0.5s ease;
}
.pl_service2 .service_value_con .iconSpan{
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
display: inline-block;
width: 20px;
height: 20px;
}
.pl_service2 .service_item:hover .service_value_con {
opacity: 1;
width: 220px;
padding-right: 10px;
}
.pl_service2 .service_value {
width: 100%;
min-height: 20px;
line-height: 20px;
background-color: #f35454;
color: #fff;
padding: 10px;
border-radius: 4px;
position: relative;
}
.pl_service2 .service_value.dh {
padding-left: 35px;
}
.pl_service2 .service_value p {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
}
.pl_service2 .service_img {
width: 120px;
height: 120px;
padding: 10px;
position: absolute;
right: calc(100% + 223px);
top: 50%;
transform: translateY(-50%);
background-color: #fff;
border-radius: 4px;
overflow: hidden;
display: none;
}
.pl_service2 .service_item:hover .service_img {
display: block;
}
.pl_service2 .service_img img {
width: 100%;
height: 100%;
}
.pl_service2 .service_value .icon {
width: 20px;
height: 20px;
}
.pl_service2 .service_value::after {
content: " ";
position: absolute;
right: -5px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 6px solid transparent;
border-left: 6px solid #f35454;
border-bottom: 6px solid transparent;
}
/* 效果3 */
.pl_service3 {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 99;
}
.pl_service3 .item_con {
text-align: right;
}
.pl_service3 .service_item {
padding-left: 43px;
display: inline-block;
width: 45px;
height: 45px;
border-radius: 30px;
background: #999;
color: #fff;
overflow: hidden;
transition: width 0.4s;
position: relative;
cursor: pointer;
}
.pl_service3 .service_item.wx {
background: #64c548;
}
.pl_service3 .service_item.qyszmp {
background: #009ca0;
}
.pl_service3 .service_item.skype {
background: #00a3ed;
}
.pl_service3 .service_item.alww {
background: #1ac1ed;
}
.pl_service3 .service_item.whatsapp {
background: #3dceb2;
}
.pl_service3 .service_item.yj {
background: #3f6ee0;
}
.pl_service3 .service_item.qq {
background: #529cd1;
}
.pl_service3 .service_item.kf {
background: #f56c6c;
}
.pl_service3 .service_item.kfz {
background: #999;
}
.pl_service3 .service_item.link {
background: #f60;
}
.pl_service3 .service_item.tel {
background: #06f;
}
.pl_service3 .service_item.custom {
background: #fc0;
}
.pl_service3 .service_item.smService {
background: #6bd8bb;
}
.pl_service3 .service_item:hover {
width: 206px;
}
.pl_service3 .service_icon {
position: absolute;
left: 0;
top: 0;
width: 43px;
height: 43px;
float: left;
display: flex;
justify-content: center;
align-items: center;
}
.pl_service3 .service_icon .icon {
width: 60%;
height: 60%;
margin: 0;
}
.pl_service3 .service_value {
margin-top: 5px;
padding: 0 5px;
text-align: left;
line-height: 18px;
}
.pl_service3 .service_value.dh {
line-height: 35px;
text-align: center;
width: 120px;
}
/* 效果4 */
.pl_service4 {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 99;
}
.pl_service4 .item_con {
text-align: right;
margin-bottom: 2px;
height: 60px;
clear: both;
}
.pl_service4 .service_item {
padding-left: 60px;
float: right;
width: 60px;
min-width: 60px;
max-width: 60px;
height: 60px;
background: rgba(0, 0, 0, 0.4);
color: #fff;
transition: all 0.5s ease;
position: relative;
cursor: pointer;
}
.pl_service4 .service_item.showLang:hover {
width: fit-content;
min-width: 230px;
max-width: 600px;
}
.pl_service4 .service_icon {
position: absolute;
left: 0;
top: 0;
width: 60px;
height: 60px;
}
.pl_service4 .service_icon span {
text-align: center;
font-size: 12px;
line-height: 14px;
display: block;
margin-top: 2px;
padding: 0 2px;
}
.pl_service4 .service_icon .icon {
width: 30px;
height: 30px;
margin: 15px 16px 0 16px;
}
.pl_service4 .service_value {
padding: 10px 20px 10px 0;
text-align: left;
line-height: 20px;
}
.pl_service4 .service_value p {
height: 20px;
overflow: hidden;
}
.pl_service4 .service_group .service_value a {
display: block;
line-height: 40px;
height: 40px;
overflow: hidden;
}
.pl_service4 .service_value.dh {
line-height: 40px;
}
.pl_service4 .service_value.tp {
position: absolute;
right: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
width: 120px;
height: 120px;
background: #fff;
border-radius: 4px;
padding: 10px;
overflow: hidden;
display: none;
}
.pl_service4 .service_value.tp img {
width: 100%;
height: 100%;
display: block;
}
.pl_service4 .service_item.showImg:hover .service_value.tp {
display: block;
}
@media only screen and (max-width: 768px) {
/* 手机版样式 */
.pl_service {
position: fixed;
right: 15px;
bottom: 75px!important;
z-index: 999;
}
.p_defaultIocn {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
color: #02a68b!important;
background-color: #ffffff!important;
overflow: hidden;
box-shadow: 0 0 10px 3px rgba(0,0,0,0.2);
}
.p_defaultIocn .icon {
width: 66%;
height: 66%;
margin: 0;
}
.custom-service-background{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 99;
background-color: #333;
opacity: .5;
display: none;
}
/* 内容区域 */
.pl_content_box {
position: absolute;
top: auto;
bottom: 55px;
left: auto;
right: -100vw;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 300px;
max-width: 100vw;
padding: 10px;
transition: all 0.5s ease;
color: #333;
background-color: #fff;
/* box-shadow: 0 0 10px 0 #ccc; */
z-index: 999;
max-height: 375px;
border-radius: 10px;
}
.pl_content_box.show{
right:0;
}
.body_service {
flex-grow: 1;
overflow-y: auto;
/* margin-bottom: 50px; */
}
.service_item {
display: flex;
margin-bottom: 5px;
width: 100%;
overflow: hidden;
padding: 5px 0;
border-top: 1px solid #f5f5f5;
}
.service_icon {
float: left;
display: flex;
margin-top: 10px;
padding-right: 8px;
color: #999998;
}
.service_value {
float: left;
margin-top: 5px;;
width: 100%;
}
.service_value p {
font-size: 13px;
width: 100%;
}
/* 弹层 */
.service_pop {
width: 60%;
}
.service_pop p {
display: none;
}
.service_pop img {
width: 100%;
height: auto;
}
/* 底部çƒçº¿ */
.footer_service {
/* position: absolute; */
left: 0;
bottom: 0;
width: 100%;
/* padding: 10px; */
overflow: hidden;
color: #333;
background-color: #fff;
flex-grow: 0;
}
.footer_service p {
display: flex;
font-size: 13px;
margin-bottom: 5px;
}
.p_kefuicon{
color: #999998;
}
.bottom_type {
padding: 0 5px 0 5px;
}
.doThirdFunc {
width: 100%;
white-space: normal;
}
}
@media only screen and (min-width: 769px) {
}
@media only screen and (max-width: 1024px) and (min-width: 769px) {
}
.pl_service2 {
right: 10px!important;
}
.pl_service2 .service_item {
background-color: #fff!important;
color: #666!important;
box-shadow: 0 0 8px 0 rgb(0 0 0 / 12%);
border-radius: 50%!important;
margin-bottom: 12px!important;
}
.pl_service2 .service_item:hover {
background-color: #02a68a!important;
color: #fff!important;
}
.pl_service2 .service_value {
background-color: #02a68a!important;
}
.pl_service2 .service_value::after {
border-left: 6px solid #02a68a!important;
}
.pl_service2 .service_img {
width: 100px!important;
height: 100px!important;
padding: 5px!important;
right: calc(100% + 10px)!important;
background-color: #f2f2f2!important;
}
.pl_service2 .service_group .service_item:nth-child(3):hover .service_value_con {
display: none!important;
}
/* 智慧客服手机 */
@media only screen and (max-width: 768px){
.smartIcon {
display: inline-block;
position: fixed;
left: auto;
top: auto;
right: 15px!important;
bottom: 15px!important;
z-index: 99999;
width: 50px!important;
height: 50px!important;
padding: 3px;
border: 5px solid #fff;
border-radius: 50%;
background: #fff;
color: var(--smt-color);
box-shadow: 0 0 10px 3px rgba(0,0,0,0.2)!important;
}
}