.c-view{ height: 100%; background: #eeeeee; width: 716px; position: relative; } .box{ @include webkitbox(2); .btn-join{ padding: 20px 0; color: #438aff; font-size: 16px; text-align: center; background: #ffffff; cursor: pointer; &:hover{ background: #fefefe; } } } .box-hd{ .title-wrap{ position: relative; padding: 10px 0; border-bottom: 1px solid #d6d6d6; font-size: 14px; color: #000; text-align: center; line-height: 40px; height: 40px; } } .box-bd{ flex: 1; position: relative; .bar{ position: absolute; width: 100%; top: 0; bottom: 0; padding: 0 0 0 9px; overflow-y: scroll; box-sizing: border-box; &::-webkit-scrollbar { width: 8px; height: 6px; } &::-webkit-scrollbar-thumb { border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; background-color: rgba($color: #8d8a8a, $alpha: 0.2); } &::-webkit-scrollbar-track { background-color: transparent; } } .msg-unread{ border-radius: 20px; background: rgba(#000000, 0.5); padding: 0 10px; text-align: center; line-height: 32px; position: absolute; width: 120px; left: 50%; bottom: 10px; margin-left: -65px; cursor: pointer; &:hover{ background: rgba(#000000, 0.3); } em{ color: #ffffff; font-size: 14px; } i{ transform: rotate(90deg); margin-right: 5px; } } } .el-icon-more{ float: right; width: 40px; height: 40px; line-height: 40px; cursor: pointer; color: #333333; font-size: 20px; } .msg-wrap{ margin-bottom: 16px; } .msg-top-more{ margin-top: 10px; text-align: center; i{ font-size: 30px; } em{ font-size: 14px; line-height: 24px; color: #999999; } } .msg-loading-icon{ display: block; background: url('../../assets/loading-icon.png') no-repeat; background-size: 100%; width: 16px; height: 16px; margin: 20px auto; animation: rotate 2s linear infinite; }