123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965 |
- <template>
- <div class="main-contain">
- <div class="position">
- <bread-crumb :crumbs='crumbs'></bread-crumb>
- </div>
- <div class="app-container">
- <div class="customer_plate white-bg">
- <div class="aside">
- <div class="customer_search clearfix">
- <div class="super_searchbox">
- <span class="search_icon"></span>
- <input type="text" class="cus_search_input" v-model="searchname" placeholder="请输入客户名称">
- </div>
- </div>
- <div class="client_list_box">
- <div class="client_list">
- <ul class="users-list">
- <li v-for="(patient, key) in patientsMap" v-show="searchname == '' || (patient.name.indexOf(searchname)>=0)" :class="thisPatient && patient.user_id==thisPatient.user_id?'Active':''" :key="key" :id="'sessDiv_User_'+patient.user_id" class="item" :data-username="patient.name" @click="chooseThisUser(patient)">
- <span :id="'badgeDiv_User_'+patient.user_id" class="circle-count" style="" v-show="patient.unread_msg_count"><i class="count">{{patient.unread_msg_count}}</i></span>
- <figure :id="'faceImg_User_'+patient.user_id" class="session-pic"><img :src="patient.avatar"></figure>
- <h3 :id="'nameDiv_User_'+patient.user_id" class="nick">{{patient.name}}</h3>
- <!-- <span class="square-close" title="退出接待" :data-toid="'User_'+patient.user_id">×</span> -->
- </li>
- </ul>
- </div>
- </div>
- </div>
-
- <div class="left_content">
- <div class="conversation-admin">
- <span class="nickname">
- <span></span>
- </span>
- </div>
- <div class="message-list-wrap">
- <div class="message-list-item">
- <ul class="message-list">
-
- <li v-for="(messageitem, key) in messageBox" :key="key" :id="'id_'+messageitem.id" class="message-item clearfix">
- <div class="time"><span v-html="messageitem.time"></span></div>
- <div class="user " :class="messageitem.float">
- <figure class="bg-pic circle-bg-pic">
- <div class="bg-pic-content">
- <img :src="messageitem.avatar">
- </div>
- </figure>
- </div>
- <div class="message-body " :class="messageitem.float"><div class="inner" v-html="messageitem.message"></div></div>
- </li>
-
- </ul>
- </div>
- <div class="no_session">
- <span class="no_session_pic"></span>
- <p class="no_session_txt">没有选中会话哦!</p>
- </div>
- </div>
- <div class="send_box" v-loading="loadingbox" :element-loading-text="loadingboxtext">
- <div class="inputer_actions">
- <!-- <div class="face">
- <span class="face_icon" @click="showEmotionDialog"></span>
- </div> -->
- <div class="picture">
- <span class="picture_icon" @click="selectPicClick"></span>
- </div>
- </div>
- <div id="wl_faces_box" class="wl_faces_box" v-bind:style="{left:'0px', display:facesBoxDisplay}">
- <div class="wl_faces_content">
- <div class="title">
- <ul>
- <li class="title_name">常用表情</li>
- <li class="wl_faces_close">
- <span @click="facesBoxDisplay='none'"> </span>
- </li>
- </ul>
- </div>
- <div id="wl_faces_main" class="wl_faces_main">
- <ul id="emotionUL">
- <li v-for="(emotion, key) in emotionList" :key="key" @click="chooseThisFace(emotion)">
- <img :src="emotion.src" :id="emotion.id" alt="" style="cursor:pointer;">
- </li>
- </ul>
- </div>
- </div>
- <div class="wlf_icon"></div>
- </div>
- <div class="inputer-area">
- <textarea
- maxlength="500" v-model="message"
- class="message-textarea transparent-txta"
- placeholder
- id="message"
- ></textarea>
- </div>
- <div class="send_box_btn">
- <button class="send_btn" id="sendMessaeg" @click="sendMessage">发送</button>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </template>
-
- <script>
- import BreadCrumb from '../components/bread-crumb'
- export default {
- name: 'commentList',
- components:{
- BreadCrumb,
- },
- data(){
- return{
- crumbs: [
- { path: false, name: '客服管理' },
- { path: false, name: '咨询管理' }
- ],
- searchname:'',
- patientsMap:{},
- thisPatient:null,
- messageBox:[],
- }
- },
- methods:{},
- created(){
- }
- }
- </script>
-
- <style scoped>
- /*.app-container .cell.clearfix .time ul li {*/
- /*float: left;*/
- /*list-style: none;*/
- /*cursor: pointer;*/
- /*padding: 6px 20px;*/
- /*color: #606266;*/
- /*border-radius: 4px;*/
- /*margin: 0 8px 0 0;*/
- /*font-size: 14px;*/
- /*text-align: center;*/
- /*}*/
-
-
- .app-container{
- height: 750px;
- }
- .customer_plate {
- width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-flex: 1;
- -webkit-flex: 1;
- -moz-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- height:100%;
- }
- .customer_plate .aside {
- width: 282px;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- position: relative;
- border-right: 1px solid #e5e8ea;
- }
- .customer_plate .aside .client_list_box {
- position: absolute;
- width: 100%;
- top: 50px;
- left: 0;
- bottom: 0;
- overflow-x: visible;
- overflow-y: auto;
- }
- .channelswitch-wrap {
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- }
- .customer_plate .aside .client_list_box .client_list {
- height: 100%;
- overflow: hidden;
- overflow-y: auto;
- }
- .customer_plate .aside .customer_search {
- margin: 0 10px;
- height: 34px;
- }
- .customer_plate .aside .super_searchbox {
- padding: 0 8px;
- background-color: #f4f7fa;
- border-radius: 30px;
- margin-top: 15px;
- font-size: 12px;
- }
- .customer_plate .aside .super_searchbox .cus_search_input {
- border: none;
- background: none;
- width: 224px;
- height: 22px;
- line-height: 22px;
- }
- .customer_plate .aside .super_searchbox .search_icon {
- display: inline-block;
- width: 12px;
- height: 12px;
- background: url(http://jk.kuyicloud.com/static/images/ico.png) no-repeat;
- float: left;
- background-position: -460px -314px;
- margin: 4px 5px 0 0;
- }
- .left_content {
- -webkit-box-flex: 1;
- -webkit-flex: 1;
- -moz-box-flex: 1;
- -ms-flex: 1;
- flex: 1;
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- position: relative;
- width: 100%;
- justify-content: flex-start;
- flex-direction: column;
- }
- .left_content .message-list-wrap {
- position: absolute;
- top: 50px;
- overflow: hidden;
- left: 0;
- right: 0;
- border-bottom: 1px #e5e8ea solid;
- bottom: 210px;
- }
- .left_content .message-list-wrap .message-list-item {
- height: 100%;
- overflow-x: hidden;
- overflow-y: auto;
- }
- .left_content .message-list-wrap .message-list {
- padding: 0 12px 20px;
- }
- .left_content .conversation-admin {
- height: 48px;
- line-height: 48px;
- border-bottom: 1px #e5e8ea solid;
- margin-left: 2px;
- width: 100%;
- }
- .left_content .conversation-admin .nickname {
- padding-left: 22px;
- }
- .client_list ul {
- list-style: none;
- }
- .client_list ul .item {
- padding: 17px 12px 17px 62px;
- min-height: 36px;
- cursor: pointer;
- font-size: 12px;
- transition: background-color 0.2s linear;
- -webkit-transition: background-color 0.2s linear;
- -moz-transition: background-color 0.2s linear;
- position: relative;
- }
- .client_list ul .Active {
- background: #f4f7fa;
- }
- .client_list ul .item .nick {
- font-size: 14px;
- color: #485b6d;
- margin-bottom: 7px;
- }
- .client_list ul .item:hover {
- background: #dfedfb;
- }
- .client_list ul .item .time {
- position: absolute;
- top: 14px;
- right: 12px;
- color: #a8b3ba;
- }
- .client_list ul .item .circle-count {
- padding: 2px;
- background-color: #ff7979;
- text-align: center;
- left: 8px;
- z-index: 2;
- min-width: 17px;
- min-height: 15px;
- line-height: 12px;
- border-radius: 10px;
- position: absolute;
- top: 12px;
- display: inline-block;
- }
- .client_list ul .item .circle-count .count {
- color: #fff;
- display: inline-block;
- -webkit-transform: scale(0.83);
- -moz-transform: scale(0.83);
- -ms-transform: scale(0.83);
- transform: scale(0.83);
- }
- .client_list ul .item .session-pic {
- position: absolute;
- top: 17px;
- left: 13px;
- width: 40px;
- height: 40px;
- border-radius: 50%;
- overflow: hidden;
- display: inline-block;
- }
- .client_list ul .item .session-pic img {
- width: 40px;
- height: 40px;
- }
- .client_list ul .item .square-close {
- color: #fff;
- background-color: #d2d2d5;
- display: none;
- width: 14px;
- height: 14px;
- line-height: 12px;
- text-align: center;
- position: absolute;
- top: 0;
- right: 0;
- }
- .client_list ul .item:hover .square-close {
- display: block;
- }
- .client_list ul .item .desc {
- color: #a8b3ba;
- text-overflow: ellipsis;
- white-space: nowrap;
- overflow: hidden;
- width: 150px;
- }
- .service_fixed {
- position: fixed;
- }
- .message-list-wrap ul li {
- padding: 12px;
- }
- .message-list-wrap .message-item .time {
- text-align: center;
- margin: 20px 0 6px 0;
- }
- .message-list-wrap .message-item .time span {
- font-size: 12px;
- color: #a8b3ba;
- }
- .message-list .message-item .user .bg-pic {
- display: inline-block;
- margin-right: 20px;
- }
- .message-list .message-item .message-body {
- background: #e5e8ea;
- padding: 16px 12px 12px 12px;
- border-radius: 4px;
- color: #485b6d;
- max-width: 520px;
- }
- .message-list .message-item .user .bg-pic .bg-pic-content {
- border-radius: 50%;
- display: inline-block;
- width: 40px;
- height: 40px;
- }
- .message-list .message-item .user .bg-pic img {
- width: 40px;
- height: 40px;
- border-radius: 50%;
- display: inline-block;
- }
- .no_session {
- text-align: center;
- }
- .send_box {
- position: absolute;
- font-size: 13px;
- bottom: 0;
- height: 210px;
- left: 0;
- right: 0;
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -webkit-flex-direction: column;
- -moz-box-orient: vertical;
- -moz-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- }
- .send_box .inputer_actions {
- padding: 10px;
- background: #f5f5f5;
- }
-
- .send_box .inputer_actions .face {
- float: left;
- margin: 0;
- height: auto;
- }
- .send_box .inputer_actions .face_icon {
- width: 24px;
- height: 22px;
- background: url(http://jk.kuyicloud.com/static/images/ico.png) no-repeat -478px -314px;
- display: inline-block;
- margin-right: 22px;
- cursor: pointer;
- }
- .send_box .inputer_actions .picture_icon {
- width: 28px;
- height: 24px;
- background: url(http://jk.kuyicloud.com/static/images/ico.png) no-repeat -508px -314px;
- display: inline-block;
- margin-right: 22px;
- cursor: pointer;
- }
- .inputer-area {
- -webkit-box-flex: 1;
- -webkit-flex: 1;
- -moz-box-flex: 1;
- -moz-flex: 1;
- -ms-flex: 1;
- flex: 1;
- margin: 2px;
- overflow: hidden;
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-flex;
- display: -ms-flexbox;
- display: -moz-box;
- display: flex;
- -webkit-box-direction: normal;
- -webkit-box-orient: vertical;
- -webkit-flex-direction: column;
- -moz-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- }
- .inputer-area .message-textarea {
- display: -webkit-box;
- display: -webkit-flex;
- display: -moz-flex;
- display: -ms-flexbox;
- display: -moz-box;
- display: flex;
- -webkit-box-flex: 1;
- -webkit-flex: 1;
- -moz-box-flex: 1;
- -moz-flex: 1;
- -ms-flex: 1;
- flex: 1;
- width: auto;
- height: 100%;
- resize: none;
- margin: 0;
- padding: 9px 4px;
- font-size: 14px;
- line-height: 1.5em;
- border: none;
- overflow-x: hidden;
- overflow-y: auto;
- border-radius: 0;
- -webkit-box-shadow: none;
- box-shadow: none;
- padding: 0 9px 4px;
- }
- .send_box .send_box_btn {
- position: absolute;
- bottom: 26px;
- right: 40px;
- }
- .send_box .send_box_btn .send_btn {
- background: #58a2ec;
- color: #fff;
- padding: 12px 55px;
- border-radius: 4px;
- border: none;
- font-size: 14px;
- }
- /*
- To change this license header, choose License Headers in Project Properties.
- To change this template file, choose Tools | Templates
- and open the template in the editor.
- */
- /*
- Created on : 2015-7-6, 15:55:30
- Author : peakerdong
- */
-
- #login {
- display: block;
- margin: 150px auto;
- text-align: center;
- }
-
- .aio {
- display: none;
- width: 734px;
- border: 1px black solid;
- padding: 0px;
- background: white;
- margin: 20px auto;
- font: 10px/1.5 "微软雅黑";
- }
-
- .titlebar {
- height: 82px;
- background: #5c95b3;
- }
-
- .titlebar #p_my_face {
- position: relative;
- width: 60px;
- height: 60px;
- border: 1px white solid;
- margin: 10px;
- float: left;
- }
-
- .titlebar #t_my_name {
- position: relative;
- top: 10px;
- left: 10px;
- float: left;
- font-size: 20px;
- color: white;
- }
-
- .titlebar #t_my_menu {
- width: 150px;
- position: relative;
- top: 5px;
- right: 5px;
- float: right;
-
- }
-
- .sesspart {
- clear: both;
- float: left;
- width: 208px;
- height: 535px;
- background: #d7eaf3;
- }
-
- .accordion {
- margin-bottom: 18px;
- }
-
- .accordion-group {
- margin-bottom: 2px;
- border: 1px solid #e5e5e5;
- -webkit-border-radius: 4px;
- -moz-border-radius: 4px;
- border-radius: 4px;
- }
-
- .accordion-heading {
- border-bottom: 0;
- background-color: bisque;
- }
-
- .accordion-heading .accordion-toggle {
- display: block;
- padding: 8px 15px;
- font-size: medium;
- }
-
- .accordion-inner {
- padding: 9px 15px;
- border-top: 1px solid #e5e5e5;
- }
- .sesslist-recent {
- height: 450px;
- background: #f5f5f5;
- border-width: 0px 1px 0px 0px;
- border-color: #d5d6d7;
- border-style: solid;
- }
-
-
- .sesslist {
- /* height: 400px; */
- height: 450px;
- background: #f5f5f5;
- border-width: 0px 1px 0px 0px;
- border-color: #d5d6d7;
- border-style: solid;
- overflow: auto;
- }
-
- .sesslist-group {
- /* height: 400px; */
- height: 450px;
- background: #f5f5f5;
- border-width: 0px 1px 0px 0px;
- border-color: #d5d6d7;
- border-style: solid;
- overflow: auto;
- }
-
- .sessinfo {
- clear: both;
- height: 50px;
- border-width: 0px 0px 1px 0px;
- border-color: #d5d6d7;
- border-style: solid;
- }
-
- .sessinfo-sel {
- clear: both;
- height: 50px;
- border-width: 0px 0px 1px 0px;
- border-color: #d5d6d7;
- border-style: solid;
- background: #d7eaf3;
- }
-
- .face {
- float: left;
- width: 40px;
- height: 40px;
- margin: 5px 5px 5px 10px;
- }
-
- .name {
- float: left;
- height: 20px;
- text-indent: 2px;
- font-size: 12px;
- color: #1f1f1f;
- margin: 15px 0 0 0;
- }
-
- .badge {
- display: none;
- float: right;
- margin: 18px 0 0 0;
- width: 32px;
- height: 20px;
- background: #f00000;
- color: white;
- text-align: center;
- -webkit-border-radius: 10px;
- -moz-border-radius: 10px;
- border-radius: 10px;
- }
-
- .badge span {
- position: relative;
- top: 1px;
- font-size: 10px;
- }
-
- .chatpart {
- float: right;
- width: 526px;
- border: 0px red solid;
- background: #d7eaf3;
- margin-top: -535px;
- }
-
- .msgflow {
- width: 525px;
- height: 380px;
- border: 1px rgb(181, 178, 178) solid;
- padding: 20px 6px 0 6px;
- background: #f5f5f5;
- overflow: auto;
- }
- .msgflow .onemsg{position:relative;}
- .msgflow .onemsg .msghead {
- color: green;
- line-height: 12px;
- font-size: 12px;
- }
-
- .msgflow .onemsg .msgbody {
- margin: 0 0 0 18px;
- line-height: 13px;
- font-size: 14px;
- }
-
- .msgflow .msgbody img {
- max-width: 500px;
- }
-
- .editbar {
- width: 526px;
- height: 25px;
- }
-
- .chat02_title_btn {
- background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/icon.png') no-repeat 0 0;
- cursor: pointer;
- float: left;
- display: block;
- width: 15px;
- height: 15px;
- margin: 5px 6px;
- }
-
- .ctb01 {
- background-position: 0 -90px;
- margin-left: 18px;
- _margin-left: 8px;
- }
-
- .ctb03 {
- background-position: 0 -152px;
- }
-
- .ctb02 {
- background-position: 0 -457px;
- }
-
- .ctb05 {
- background-position: 0 -217px;
- }
-
- .ctb04 {
- background-position: 0 -543px;
- }
-
- .wl_faces_box {
- background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/wlf_bg.png') repeat 0 0;
- position: relative;
- /*position: absolute;*/
- width: 428px;
- height: 225px;
- bottom: 290px;
- left: -42px;
- display: none;
- }
-
- .wl_faces_content {
- background: #fff;
- border: 1px #ccc solid;
- width: 417px;
- height: 216px;
- margin: 3px 4px;
- }
-
- .wl_faces_content .title {
- background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/wlf_title_bg.jpg') repeat-x 0 0;
- height: 40px;
- position: relative;
- }
-
- .wl_faces_content .title ul {
-
- }
-
- .wl_faces_content .title ul li {
- position: absolute;
- display: block;
- }
-
- .wl_faces_content .title ul li.title_name {
- background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/wlf_title_btn.jpg') no-repeat 0 0;
- width: 82px;
- height: 30px;
- bottom: 0;
- _bottom: -2px;
- left: 15px;
- text-align: center;
- line-height: 32px;
- font-weight: bold;
- color: #333;
- }
-
- .wl_faces_content .title ul li.wl_faces_close {
- right: 8px;
- top: 15px;
- }
-
- .wl_faces_content .title ul li.wl_faces_close span {
- background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/icon.png') repeat-x 0 0;
- cursor: pointer;
- display: block;
- width: 15px;
- height: 15px;
- }
-
- .wl_faces_main {
-
- }
-
- .wl_faces_main ul {
- margin: 12px 12px;
- padding: 0px;
- overflow: hidden;
- border-top: 1px #CCC solid;
- border-left: 1px #CCC solid;
- list-style: none;
- width: 393px;
- }
-
- .wl_faces_main ul li {
- float: left;
- border-right: 1px #CCC solid;
- border-bottom: 1px #CCC solid;
- height: 28px;
- width: 28px;
- margin: 0px 0px 0px 0px;
- padding: 4px 2px;
- text-align: center;
- }
-
- .wl_faces_main ul li img {
- width: 24px;
- height: 24px;
- }
-
- .wlf_icon {
- background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/layer_arrow.png') no-repeat 0 0;
- position: absolute;
- width: 22px;
- height: 9px;
- bottom: -4px;
- _bottom: -11px;
- left: 61px;
- }
-
- .msgedit {
- width: 525px;
- height: 100px;
- border: 1px rgb(181, 178, 178) solid;
- background: #f5f5f5;
- padding: 6px 6px;
- line-height: 1.5;
- }
-
- .sendbar {
- width: 526px;
- height: 30px;
- }
-
- .sendbtn {
- float: right;
- width: 80px;
- margin-right: 10px;
- font: 10px/1.5 "微软雅黑";
- }
-
- .closebtn {
- float: right;
- width: 80px;
- margin-right: 10px;
- font: 10px/1.5 "微软雅黑";
- }
-
- .bottom {
- clear: both;
- height: 3px;
- background: #d7eaf3;
- }
-
- #demo_type_desc {
- color: red;
- }
-
- #myself_type_desc {
- display: none;
- color: red;
- }
-
- #qcloudLink {
- color: blue;
- }
-
- #sdkAppIdDiv {
- display: none;
- }
-
- #accountTypeDiv {
- display: none;
- }
-
- .pic_thumb {
- width: 200px;
- height: 200px;
- }
-
-
-
- .spinner {
- width: 60px;
- text-align: center;
- position: absolute;
- right: 10px;
- top: 32px;
- text-align: right;
- }
-
- .spinner > div {
- width: 6px;
- height: 6px;
- background-color: #333;
-
- border-radius: 100%;
- display: inline-block;
- -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
- animation: sk-bouncedelay 1.4s infinite ease-in-out both;
- }
-
- .spinner .bounce1 {
- -webkit-animation-delay: -0.32s;
- animation-delay: -0.32s;
- }
-
- .spinner .bounce2 {
- -webkit-animation-delay: -0.16s;
- animation-delay: -0.16s;
- }
-
- @-webkit-keyframes sk-bouncedelay {
- 0%, 80%, 100% { -webkit-transform: scale(0) }
- 40% { -webkit-transform: scale(1.0) }
- }
-
- @keyframes sk-bouncedelay {
- 0%, 80%, 100% {
- -webkit-transform: scale(0);
- transform: scale(0);
- } 40% {
- -webkit-transform: scale(1.0);
- transform: scale(1.0);
- }
- }
-
- .headurlClass{
- height: 30px;
- width: 30px;
- border-radius: 50%;
- }
-
- .delChat{
- color: red;
- width: 50px;
- padding: 16px 0;
- float: right;
- margin-right: 5px;
- }
- figure {
- margin: 0;
- }
- </style>
|