@charset "utf-8";
/* CSS Document */
body,
html {
background: #f3f3f3;
}
.c-ccc {
color: #ccc;
}
.ax-naills span.axills-boxer {
display: inline-block;
padding: 3px 5px;
background: #f5f5f5;
color: #999999;
font-size: 10px;
border-radius: 5px;
}
.ax-naills span.axills-right {
background: #fff;
color: #17b3ec;
border: 1px solid #17b3ec;
padding: 3px 5px;
border-radius: 5px;
font-size: 10px;
}
.ax-naills .c-btn-tiny {
padding: 3px 15px;
border-color: #17b3ec;
color: #17b3ec;
}
.ax-naills .c-btn-tiny-grey {
padding: 3px 15px;
border-color: #C0C0C0;
color: #C0C0C0;
background-color: #E5E5E5;
}
.ax-naills span.ax-longboxer {
background: #f5f5f5;
color: #999999;
font-size: 10px;
padding: 3px 10px;
display: inline-block;
max-width: 100%;
box-sizing: border-box;
border-radius: 5px;
}
.c-17b3ec {
color: #17b3ec;
}
.ax-naills span.ax-qybox {
display: inline-block;
font-size: 10px;
padding: 2px 5px;
border-radius: 5px;
font-size: 10px;
}
.ax-naills span.ax-qybox.b-ff9555 {
color: #ff9555;
border: 1px solid #ff9555;
}
.ax-naills span.ax-qybox.b-2ddc46 {
color: #2ddc46;
border: 1px solid #2ddc46;
}
.ax-naills span.ax-qybox.b-2d8cdc {
color: #2d8cdc;
border: 1px solid #2d8cdc;
}
.c-4bd663 {
color: #4bd663;
}
.tioper-hd {
line-height: 33px;
}
.bgc-f7f7f7 {
background: #f7f7f7;
}
.bgc-ebebeb {
background: #ebebeb;
}
#serv-liang th {
background: #f4f7fa;
vertical-align: middle;
text-align: center;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
padding: 10px 5px;
}
#serv-liang td {
background: #fff;
vertical-align: middle;
text-align: center;
border-right: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
padding: 10px 5px;
color: #5b5b5b;
}
#serv-liang td.first {
color: #909090;
}
.c-list .c-list-info > p.c-f12 {
font-size: 12px;
}
.tanper .c-btn {
padding: 5px 5px;
}
.tanper {
background: #fbfcfc;
}
/* 医患沟通开始 */
.c-chat-box {
border: none;
padding-left: 2%;
padding-right: 2%;
}
.time-tips {
margin: 10px 0 0 0;
text-align: center;
clear: both;
}
.time-tips span {
position: relative;
display: inline-block;
padding: 0 60px;
color: #aeaeae;
font-size: 15px;
}
.time-tips span:before,
.time-tips span:after {
position: absolute;
content: "";
display: block;
width: 50px;
height: 1px;
background: #e6e4e1;
top: 50%;
}
.time-tips span:before {
left: 0;
}
.time-tips span:after {
right: 0;
}
.chat-left,
.chat-right {
clear: both;
overflow: hidden;
padding: 10px 0;
}
.chat-left > dt,
.chat-right > dt {
width: 40px;
height: 40px;
}
.chat-left > dt {
float: left;
margin-right: 15px;
}
.chat-right > dt {
float: right;
margin-left: 15px;
}
.chat-left > dt img,
.chat-right > dt img {
width: 40px;
height: 40px;
border-radius: 50%;
}
.chat-left > dd,
.chat-right > dd {
position: relative;
min-height: 18px;
font-size: 15px;
display: inline-block;
max-width: 80%;
background: #fff;
border: 1px solid #e1e1e1;
border-radius: 6px;
padding: 8px 10px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
}
.chat-left > dd {
float: left;
white-space: pre-wrap;
word-wrap: break-word;
}
.chat-right > dd {
float: right;
background: #bce0ff;
border: 1px solid #81bdf7;
white-space: pre-wrap;
word-wrap: break-word;
}
.chat-left > dd:after {
content: "";
position: absolute;
top: 14px;
left: -6px;
display: block;
width: 8px;
height: 8px;
background: #fff;
border-color: #e1e1e1;
border-style: solid;
border-width: 1px 0 0 1px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.chat-right > dd:after {
content: "";
position: absolute;
top: 14px;
right: -6px;
display: block;
width: 8px;
height: 8px;
background: #bce0ff;
border-color: #81bdf7;
border-style: solid;
border-width: 1px 0 0 1px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
}
.chat-left > dd p img,
.chat-right > dd p img {
max-width: 150px;
max-height: 150px;
margin: 5px 0;
}
.chat-msg-box {
bottom: 0;
left: 0
}
.chat-msg-box .input-group .form-control {
height: 32px;
}
.pull-more {
text-align: center;
color: #5b5b5b;
font-size: 14px;
padding: 14px 0;
}
/* 医患沟通结束 */
.pt13 {
padding-top: 13px;
}
.jt-boradius {
border-radius: 5px;
}
.bot-pper a.c-btn {
border: 1px dashed #999999;
text-align: center;
display: block;
color: #666666;
font-size: 16px;
border-radius: 5px;
}
.c-999999 {
color: #999999;
}
.lh40 {
line-height: 40px;
}
/***/
.call-con {
clear: both;
overflow: hidden;
}
.phone-book,
.doctor-list,
.ill-case {
width: 100%;
background: #fff;
}
.phone-book li,
.doctor-list li,
.ill-case li {
width: 100%;
overflow: hidden;
border-bottom: 1px solid #e1e1e1;
}
.contacts {
position: relative;
height: 65px;
transform: translateX(0);
transition: all 0.3s;
-webkit-transform: translateX(0);
-webkit-transition: all 0.3s;
-moz-transform: translateX(0);
-moz-transition: all 0.3s;
}
.contact-sin {
position: absolute;
top: 50%;
padding: 0 15px 0 15px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
transform: translateY(50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
.contact-sin dt {
position: absolute;
width: 40px;
}
.contact-sin dd {
float: left;
min-height: 40px;
width: 100%;
}
.contact-sin dd h4 {
font-size: 15px;
display: inline-block;
padding-right: 20px;
line-height: normal;
vertical-align: middle;
position: relative;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.contact-sin h4 .iconfont {
position: absolute;
top: 50%;
right: 0;
margin-top: -9px;
font-size: 14px;
}
.contact-sin dt a,
.doctor-sin dt a {
display: block;
}
.doctors {
position: relative;
height: 90px;
padding-right: 60px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.doctor-sin {
position: absolute;
top: 50%;
padding: 0 60px 0 15px;
width: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
transform: translateY(50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
.doctors:after {
position: absolute;
top: 50%;
right: 60px;
content: "";
display: block;
width: 1px;
height: 54px;
background: #e1e1e1;
z-index: 100;
margin-top: -27px;
}
.apply:after {
right: 75px;
background: rgba(0, 0, 0, 0);
}
.apply .doctor-sin {
padding-right: 70px;
}
@media screen and (min-width:360px) {
.apply .doctor-sin {
padding-right: 75px;
}
}
.doctor-sin dt {
position: absolute;
width: 54px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
}
.doctor-sin dd {
float: left;
margin-left: 69px;
padding: 5px 0;
min-height: 54px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.doctor-sin dd h4 {
font-size: 18px;
display: inline-block;
padding: 0 0 4px 0;
line-height: normal;
vertical-align: middle;
position: relative;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.doctor-sin dd p {
white-space: pre-wrap;
word-wrap: break-word;
max-height: 40px;
overflow: hidden;
}
.scrollLeft {
transform: translateX(-72px);
transition: all 0.3s;
-webkit-transform: translateX(-72px);
-webkit-transition: all 0.3s;
-moz-transform: translateX(-72px);
-moz-transition: all 0.3s;
}
.call-phone {
position: absolute;
display: inline-block;
width: 40px;
height: 40px;
right: 10px;
top: 50%;
margin-top: -20px;
text-align: center;
line-height: 40px;
}
.call-phone .iconfont {
font-size: 30px;
color: #4dcd70;
}
.apply-btn {
position: absolute;
display: inline-block;
width: 50px;
right: 15px;
top: 50%;
margin-top: -14px;
text-align: center;
line-height: 40px;
}
.del-contact {
position: absolute;
display: inline-block;
width: 72px;
height: 100%;
background: #ff3b2f;
left: 100%;
top: 0;
text-align: center;
line-height: 65px;
color: #fff;
font-size: 18px;
}
.call-tips {
list-style: decimal;
list-style-position: outside;
padding-left: 15px;
}
.call-tips li {
padding-bottom: 5px;
}
.no-data {
width: 100%;
font-size: 12px;
color: #909090;
text-align: center;
padding: 30px 0;
}
.no-data-img {
width: 40%;
max-width: 320px;
margin: 0 auto;
}
.no-data-icon {
width: 100%;
height: 0;
padding-bottom: 100%;
background: url(http://ued.yihu.cn/htmlCode/健康之路APP/诊间咨询/images/nodata.png) no-repeat 0 0;
background-size: 100% auto;
}
.no-data p {
font-size: 14px;
padding-top: 10px;
}
em.online,
em.offline {
display: inline-block;
font-size: 12px;
background: #4dcd70;
color: #fff;
border-radius: 2px;
padding: 0 2px;
line-height: 14px;
vertical-align: middle;
}
em.offline {
background: #909090;
}
/**/
.header-menus {
right: 15px;
top: 0;
position: absolute;
}
.header-menus a {
color: #5cb4ff;
}
.referral-pop {
width: 250px;
position: fixed;
left: 50%;
margin-left: -125px;
top: 50%;
margin-top: -80px;
z-index: 600;
}
.referral-pop-hold {
position: relative;
z-index: 631;
background: #fff;
border-radius: 7px;
overflow: hidden;
}
.referral-pop-hold a {
display: block;
line-height: 55px;
text-align: center;
color: #666;
border-bottom: 1px solid #f2f2f2;
font-size: 16px;
}
.referral-pop-hold a.cancle {
color: #999;
border-bottom: none;
}
.referral-pop-mb {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
background: rgba(0, 0, 0, .5);
z-index: 600;
}
.juris-close {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .7);
left: 0;
top: 0;
z-index: 600;
color: #fff;
text-align: center;
display: box;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;
font-size: 18px;
}
.seval-hold {
position: relative;
padding-left: 33px;
font-size: 12px;
color: #999;
margin-top: 6px;
}
.seval-tit {
position: absolute;
left: 0;
top: 5px;
}
.seval-con {
background: #eee;
padding: 7px 10px;
border-radius: 5px;
}
.star-img {
vertical-align: middle;
margin-bottom: 4px;
}
.tw-add {
margin: 0 7px 0 2px;
text-align: center;
}
.tw-add-detail {
padding: 7px 15px;
border-top: 1px solid #e1e1e1;
margin-top: 10px;
}
.tw-add-detail li {
display: block;
width: 25%;
text-align: center;
float: left;
color: #909090;
}
.tw-add-detail li img {
margin: 5px;
}
.ask-lab-lage {
width: 100%;
overflow: auto;
border-bottom: 1px solid #e1e1e1;
}
.ask-lab-lage ul {
display: block;
width: 400px;
background: #fff;
}
.ask-lab-lage li {
display: block;
width: auto;
padding: 0 2px;
float: left;
line-height: 40px;
text-align: center;
position: relative;
margin: 0 12px;
}
.ask-lab-lage li a {
margin-top: 5px;
color: #333;
}
.ask-lab-lage li.curr a {
color: #17b3ec;
}
.ask-lab-lage li.curr:before {
content: '';
display: block;
width: 100%;
height: 2px;
background: #17b3ec;
position: absolute;
left: 0;
bottom: 0;
}
.appeal-texa {
background: #fff;
border: none;
width: 100%;
padding: 10px;
height: 150px;
font-size: 14px;
}
.mui-toast-container {
position: fixed;
z-index: 9999;
bottom: 50px;
width: 100%;
-webkit-transition: opacity .8s;
transition: opacity .8s;
opacity: 0
}
.mui-toast-container.mui-active {
opacity: 1
}
.mui-toast-message {
font-size: 14px;
width: 270px;
margin: 5px auto;
padding: 5px;
text-align: center;
color: #000;
border-radius: 7px;
background-color: #d8d8d8
}
.win-broadcast {
position: fixed;
outline: 0px;
top: 50%;
left: 50%;
margin: -113px 0 0 -135px;
width: 269px;
height: 226px;
border-radius: 5px;
z-index: 100;
}
.win-broadcast .bg {
background-color: #fff;
width: 269px;
height: 226px;
border-radius: 5px;
display: block;
}
.win-broadcast .broadcast {
background: url(../images/broadcast.png) no-repeat 0 -2px;
width: 85px;
height: 85px;
display: block;
background-size: 100%;
position: absolute;
top: 67px;
left: 34%;
border-radius: 50%;
z-index: 99;
}
.win-broadcast .word {
position: absolute;
bottom: 0;
border-radius: 5px;
border-top: 1px solid #e1e1e1;
border-top-right-radius: 0;
border-top-left-radius: 0;
color: #666;
background-color: #fff;
height: 35px;
width: 100%;
line-height: 35px;
}
.win-broadcast .word.title {
top: 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.delete {
display: block;
position: absolute;
height: 12px;
width: 12px;
border-radius: 50%;
background-color: #fff;
right: 6px;
top: 6px;
z-index: 10;
text-align: center;
line-height: 9px;
color: #919191;
font-size: 12px;
}
.broadcast-shadow-panel {
width: 100%;
position: absolute;
overflow: hidden;
z-index: 10;
top: 0;
background-color: rgba(0, 0, 0, .35);
}
/*动画*/
.win-broadcast .broadcast {
animation: broadcast 2s infinite;
-webkit-animation: broadcast 2s infinite;
/* Safari 和 Chrome */
}
@-webkit-keyframes broadcast {
0% {
background-color: #ccf5ff;
box-shadow: 0 0 0 0px #ccf5ff, 0 0 0 0 #c3e9f2, 0 0 0 0px #e9fffe, 0 0 0 0 #ddf5f4;
}
25% {
background-color: #ccf5ff;
box-shadow: 0 0 0 5px #ccf5ff, 0 0 0 1px #c3e9f2, 0 0 0 20px #e9fffe, 0 0 0 1px #ddf5f4;
}
50% {
background-color: #ccf5ff;
box-shadow: 0 0 0 10px #ccf5ff, 0 0 0 1px #c3e9f2, 0 0 0 25px #e9fffe, 0 0 0 1px #ddf5f4;
}
100% {
background-color: #ccf5ff;
box-shadow: 0 0 0 15px #ccf5ff, 0 0 0 1px #c3e9f2, 0 0 0 30px #e9fffe, 0 0 0 1px #ddf5f4;
}
}
/* 12-18 */
.nxz-voice {
line-height: 21px;
text-align: right;
}
.nzx-tb {
display: inline-block;
width: 15px;
height: 21px;
background: url(../images/icon-broadcast.png) no-repeat;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-ms-background-size: 100% auto;
vertical-align: middle;
}
.win-broadcast-mb {
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 10;
background: rgba(0, 0, 0, .35);
display: none;
}
.myorder li .vlname {
line-height: 20px;
border-bottom: 1px solid #f2f2f2;
position: relative;
padding-right: 15px;
padding-top: 10px;
padding-bottom: 10px;
}
.pa-icon-dagou {
width: 20px;
height: 20px;
font-size: 13px;
display: block;
text-align: center;
border-radius: 100%;
border: 1px solid #e1e1e1;
}
.pa-icon-dagou.on {
background: #17b3ec;
color: #fff;
}
.ask-record li {
background: #fff;
position: relative;
padding: 10px 35px 10px 45px;
border-top: 1px solid #f2f2f2;
color: #909090;
}
.ask-record li .ar-check {
position: absolute;
left: 10px;
top: 50%;
margin-top: -10px;
}
.ask-record li .ar-check i {
display: block;
width: 18px;
height: 18px;
border: 1px solid #e1e1e1;
border-radius: 50%;
}
.ask-record li .ar-check i.checked {
background: #17b3ec;
border: 1px solid #17b3ec;
}
.ask-record li .ar-check i.checked:before {
content: "\d61a";
position: absolute;
top: -12px;
left: 3px;
color: #fff;
font-size: 12px;
}
.ask-record li .arrow-right {
position: absolute;
right: 12px;
top: 50%;
margin-top: -6px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
transition: all .3s ease;
}
.ask-record li .arrow-right.ashow {
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
margin-top: -3px;
}
.view-more {
display: inline-block;
width: 100%;
text-align: center;
padding: 15px 0 10px 0;
}
.view-more a {
/*color: #5b5b5b;*/
color: #17b3ec;
}
.time-tips span{
padding: 2px 10px;
border-radius: 15px;
color: #aaa;
/*background-color: #E1E1E1;*/
font-size: 12px;
}
.chat-left, .chat-right {
display: -webkit-box;
clear: both;
overflow: hidden;
padding: 10px 0;
}
.chat-right{
-webkit-box-direction: reverse;
}
.chat-left > dt{
float: none;
}
.chat-right > dt {
float: none;
}
.chat-right .word-bread{
text-align: left;
/*float: right;*/
background: #17b3ec;
border: 1px solid #17b3ec;
white-space: pre-wrap;
word-wrap: break-word;
position: relative;
min-height: 18px;
font-size: 15px;
display: inline-block;
max-width: 80%;
border-radius: 6px;
padding: 8px 10px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
}
.chat-right > div.c-content{
-webkit-box-flex: 1;
text-align: right;
}
.chat-right .word-bread:after{
content: "";
position: absolute;
top: 5px;
right: -5px;
display: block;
width: 8px;
height: 8px;
background: #17b3ec;
border-color: #E1E1E1;
border-style: solid;
border-width: 1px 0 0 1px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
transform: rotate(135deg);
}
.chat-left .word-bread{
/*float: left;*/
white-space: pre-wrap;
word-wrap: break-word;
position: relative;
min-height: 18px;
font-size: 15px;
display: inline-block;
max-width: 80%;
background: #fff;
border: 1px solid #e1e1e1;
border-radius: 6px;
padding: 8px 10px;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
}
.chat-left > div.c-content{
-webkit-box-flex: 1;
text-align: left;
}
.chat-left .word-bread:after{
content: "";
position: absolute;
top: 5px;
left: -5px;
display: block;
width: 8px;
height: 8px;
background: #fff;
border-color: #e1e1e1;
border-style: solid;
border-width: 1px 0 0 1px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.chat-left span.name, .chat-right span.name{
display: block;
height: 24px;
}
.time-tips span:before, .time-tips span:after{
height: 0!important;
}
.zi2{
z-index: 2;
}
.doc-name {
font-size: 15px;
}
/*#contain{position: absolute; width: 95%; top:45px; bottom: 52px; overflow-y: auto;}*/
@media only screen and (max-width: 640px) {
.doc-name {
font-size: 13px;
}
}
.chat-right.checkbox:after, .chat-left.checkbox:before{
display: block;
content: '√';
line-height: 24px;
width: 22px;
height: 22px;
border: 1px solid #ccc;
border-radius: 50%;
margin-right: 10px;
color: #f3f3f3;
text-align: center;
font-size: 16px;
box-sizing: border-box;
}
.chat-right.checked:after, .chat-left.checked:before{
background: #17b3ec;
border: none;
}
.log-oper{
position: absolute;
background: rgba(20, 20, 20, .8);
border-radius: 8px;
color: #fff;
z-index: 10000;
display: -webkit-box;
display: none;
}
.log-oper li{
margin: 8px 0px;
padding: 0px 8px;
font-size: 14px;
border-left: 1px solid #fff;
}
.log-oper li:first-child{
border-left:none ;
}
.log-oper div{
position: absolute;
/*width: 10px;
height: 10px;
background: transparent;*/
/*-webkit-transform: rotate(45deg);*/
top: 37px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgba(20, 20, 20, .8);
border-bottom: 8px solid transparent;
}
.footer-bar{
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
position: fixed;
border-top-width: 1px;
border-color: #e1e1e1;
border-style: solid;
background-color: #fff;
display: -webkit-box;
}
.c-hide{
display: none;
}
.footer-bar li{
margin: 10px 0px;
-webkit-box-flex: 1;
text-align: center;
line-height: 27px;
font-size: 16px;
color: #333;
}
.footer-bar li:first-child{
border-right: 1px solid #e1e1e1;
}
.footer-bar li > img{
width: 22px;
margin-right: 10px;
}
.header-group{
line-height: 20px;
}
.btn-cancel{
color: #fff;
font-size: 16px;
display: none;
}
.tw-add{
width: 50px;
margin: 3px 5px 3px 0;
}
.input-group input{
margin-bottom: 0;
}
.c-main .c-btn{
padding-top: 5px;
padding-bottom: 5px;
}
.chat-right .wb-img{
padding: 2px;
}
.wb-img img{
position: relative;
z-index: 2;
border-radius: 6px;
}
.xt-xiaoxi{
background: #888;
color: #fff!important;
padding: 4px 10px!important;
border-radius: 8px!important;
}
.yy-hold{
background: #ccc;
}
.rprogress {
position: absolute;
left: 50%;
top: 50%;
width: 140px;
height: 140px;
margin-left: -70px;
margin-top: -70px;
background-repeat: no-repeat;
background-position: center center;
background-size: 30px 30px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 5px;
display: none;
-webkit-transition: .15s;
z-index: 100;
}
.rschedule {
background: url("../images/yuying_icon5.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 30px 50px;
width: 46px;
height: 50px;
position: absolute;
left: 30px;
top: 40px;
}
.r-sigh{
display: none;
border-radius: 50px;
box-shadow: 0 0 15px #2187e7;
width: 46px;
height: 46px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -23px;
margin-top: -23px;
text-align: center;
line-height: 46px;
font-size: 40px;
font-weight: bold;
color: #2187e7;
}
.rprogress-sigh{
background-image: none !important;
}
.rprogress-sigh .rschedule{
display: none !important;
}
.rprogress-sigh .r-sigh{
display: block !important;
}
.rsalert {
font-size: 12px;
color: #bbb;
text-align: center;
position: absolute;
border-radius: 5px;
width: 130px;
margin: 5px 5px;
padding: 5px;
left: 0px;
bottom: 0px;
}
.chat-right .audio{
padding-right: 30px;
background: url("../images/yuyin4_icon.png") no-repeat -20px 0 #17b3ec;
background-size: 18px;
-webkit-background-size: 18px;
-moz-background-size: 18px;
-o-background-size: 18px;
background-position: 90% 50%;
}
.chat-right .audio.active{
background: url("../images/yuyin3.gif") no-repeat -20px 0 #17b3ec;
background-size: 18px;
-webkit-background-size: 18px;
-moz-background-size: 18px;
-o-background-size: 18px;
background-position: 90% 50%;
}
.chat-right .soundWav{
height: 20px;display: -webkit-box;-webkit-box-direction: normal;
}
.chat-right .soundWavT{
display: block;margin-left: 10px;
}
.chat-right .soundWav img{
position: relative;
width: 40px;
height: 30px;
top: -5px;
}
.chat-left .audio{
padding-left: 30px;
background: url("../images/yuyin_icon.png") no-repeat #fff;
background-size: 18px;
-webkit-background-size: 18px;
-moz-background-size: 18px;
-o-background-size: 18px;
background-position: 10% 50%;
}
.chat-left .audio.active{
background: url("../images/yuyin-2.gif") no-repeat #fff;
background-size: 18px;
-webkit-background-size: 18px;
-moz-background-size: 18px;
-o-background-size: 18px;
background-position: 10% 50%;
}
.chat-left .soundWav{
height: 20px;display: -webkit-box;-webkit-box-direction: reverse;
}
.chat-left .soundWavT{
display: block;margin-right: 10px;
}
.chat-left .soundWav img{
position: relative;
width: 40px;
height: 30px;
top: -5px;
}
.volumn {
display: inline-block;
height: 30px;
line-height: 40px;
text-align: center;
position: relative;
vertical-align: bottom;
left: 84px;
top: 60px;
}
.volumn div {
height: 3px;
margin-bottom: 0;
background-color: white;
margin-right: -12px;
margin-bottom: 6px;
}
.volumn .line1 {
width: 10px;
-webkit-animation: line1 2s infinite ease-in-out alternate;
}
.volumn .line2 {
width: 14px;
-webkit-animation: line2 2s infinite ease-in-out alternate;
}
.volumn .line3 {
width: 18px;
-webkit-animation: line3 2s infinite ease-in-out alternate;
}
.volumn .line4 {
width: 22px;
/*-webkit-animation: line 0.6s infinite 1.8s ease-in-out alternate;*/
/*-webkit-animation-delay: 3.6s;*/
}
@-webkit-keyframes line1 {
0% {
opacity: 0;
}
41%{
opacity: 0;
}
42%{
opacity: 1;
}
55% {
opacity: 1;
}
56% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes line2 {
0% {
opacity: 0;
}
27%{
opacity: 0;
}
28%{
opacity: 1;
}
73% {
opacity: 1;
}
74% {
opacity: 0;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes line3 {
0% {
opacity: 0;
}
13%{
opacity: 0;
}
14%{
opacity: 1;
}
84% {
opacity: 1;
}
85% {
opacity: 0;
}
100% {
opacity: 0;
}
}
.input-msg{
min-height: 32px;
width: 100%;
line-height: 22px;
overflow-x: hidden;
overflow-y: auto;
/*_overflow-y: visible;
_height: 32px;*/
max-height: 120px;
background-color: #fff;
background-image: none;
border: 1px solid #e1e1e1;
padding: 5px 10px;
font-size: 14px;
border-radius: 4px;
-webkit-user-select: auto;
user-modify: read-write-plaintext-only;
-webkit-user-modify: read-write-plaintext-only
}
.preview-video{padding: 6px 0px;max-height: 100px;position: relative;}
.preview-video .video-img-right{width: 135px !important;height: 100px;border-radius: 15px;border-bottom-right-radius: 0px;border-top-right-radius: 0px;}
.preview-video .video-img-left{width: 135px !important;height: 100px;border-radius: 15px;border-bottom-left-radius: 0px;border-top-left-radius: 0px;}
.preview-video .bofang-icon-right{position: absolute;right: 65px;bottom: 50%;width: 25px !important;height: 25px;margin-right: -12px;top: 40px;z-index: 100;}
.preview-video .bofang-icon-left{position: absolute;left: 65px;bottom: 50%;width: 25px !important;height: 25px;margin-right: -12px;top: 40px;z-index: 100;}
.preview-video .shichang-time-right{position: absolute;right: 27px;bottom: 50%;width: auto;height: 18px;margin-right: -12px;top: 82px;font-size: 12px;color: #fff;}
.preview-video .shichang-time-left{position: absolute;left: 5px;bottom: 50%;width: auto;height: 18px;margin-left: 90px;top: 82px;font-size: 12px;color: #fff}
.preview-video .jianjiao-icon-right{top: 6px;z-index: 20;position: absolute;right: 12px;width: 20px !important;height: 100px;margin-right: -12px;}
.preview-video .jianjiao-icon-left{top: 6px;z-index: 20;position: absolute;left: 12px;width: 20px !important;height: 100px;margin-left: -12px;}
/*添加文章类消息显示样式*/
.chat-left .word-article{
width: 82%;
max-width: 82%;
text-align: left;
}
.chat-left .word-article:after{background: #fff;}
.chat-left .article-content{
-webkit-box-direction: reverse;
display: -webkit-box;
height: 80px;
padding: 5px 0px;
overflow: hidden;
}
.chat-left .article-content>img{
width: 60px !important;
height: 60px;
margin-top: 3px;
}
.chat-left .article-content>div{
-webkit-box-flex: 1;
overflow: hidden;
padding: 1px 0px 0px 5px;
}
.xzzx{
position: fixed;
bottom: 0;
left:0;
width: 100%;
height: 60px;
padding:10px;
text-align: center;
}
.xzzx span{
display: inline-block;
color: #fff;
font-size: 16px;
background-color: #74bf00;
width: 100%;
border-radius: 5px;
height: 40px;
line-height: 40px;
}
.xzzx img{
vertical-align: middle;
margin-bottom: 3px;
margin-right: 5px;
}