.message-page{background:#fff;height:100%;overflow:hidden;border-radius:10px;box-sizing:border-box;display:flex;flex-direction:column;box-shadow:0 0 30px rgba(0,0,0,.08)}.message-page>.head-box{width:100%;padding:0 30px;height:70px;background:#fbfbfb;border-bottom-width:1px;border-bottom-style:solid;box-sizing:border-box;display:flex;justify-content:space-between}.message-page>.head-box .title-box{height:70px;font-size:16px;font-weight:700;color:#666;display:flex;align-items:center}.message-page>.head-box .number-box{display:flex;align-items:center}.message-page>.head-box .number-box .info-box{margin-right:30px;color:#888;font-size:14px;letter-spacing:1px;font-weight:300}.message-page>.head-box .number-box .pages-box{height:30px;background:#fff;border-width:1px;border-style:solid;display:flex;box-shadow:0 0 5px rgba(0,0,0,.1);border-radius:5px}.message-page>.head-box .number-box .pages-box .current-box{position:relative;height:100%}.message-page>.head-box .number-box .pages-box .current-box .select-base{cursor:pointer;padding:0 10px;height:100%;background:#fff;display:flex;justify-content:center;align-items:center}.message-page>.head-box .number-box .pages-box .current-box .select-base .icon{margin-left:10px;width:14px;height:14px}.message-page>.head-box .number-box .pages-box .next-box,.message-page>.head-box .number-box .pages-box .previous-box{cursor:no-drop;width:30px;height:30px;background:#f3f3f3;display:flex;justify-content:center;align-items:center}.message-page>.head-box .number-box .pages-box .next-box .icon,.message-page>.head-box .number-box .pages-box .previous-box .icon{width:15px;height:15px;filter:contrast(.5)}.message-page>.head-box .number-box .pages-box .previous-box{border-radius:5px 0 0 5px}.message-page>.head-box .number-box .pages-box .next-box{border-radius:0 5px 5px 0}.message-page>.head-box .number-box .pages-box .available{cursor:pointer;background:#2faaf7}.message-page>.head-box .number-box .pages-box .available .icon{filter:none}.message-page .content-box{position:relative;width:100%;overflow:hidden;flex-grow:1;display:flex}.message-page .content-box .classify-box{height:100%;width:250px;border-right-width:1px;border-right-style:solid;flex-shrink:0}.message-page .content-box .classify-box .menu-box{padding:15px 30px}.message-page .content-box .classify-box .menu-box>.item-box{cursor:pointer;width:100%;margin:15px 0;filter:grayscale(1);transition:all .3s;transition-timing-function:ease;display:flex;align-items:center;justify-content:space-between}.message-page .content-box .classify-box .menu-box>.item-box:hover{filter:grayscale(0)}.message-page .content-box .classify-box .menu-box>.item-box .title{font-size:14px;color:#2faaf7;white-space:nowrap}.message-page .content-box .classify-box .menu-box>.item-box .count{padding:0 5px;height:20px;line-height:20px;min-width:10px;color:#2faaf7;font-size:12px;border-radius:10px;display:flex;justify-content:center;align-items:center}.message-page .content-box .classify-box .menu-box>.item-box .unread{color:#fff;background:#2faaf7}.message-page .content-box .classify-box .menu-box>.activity{filter:grayscale(0)}.message-page .content-box .message-box{height:100%;flex-grow:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.message-page .content-box .message-box::-webkit-scrollbar{width:4px}.message-page .content-box .message-box>.message-item{position:relative;width:100%;padding:10px 0;cursor:pointer;border-bottom-width:1px;border-bottom-style:solid;display:flex;align-items:center}.message-page .content-box .message-box>.message-item:last-child{margin-bottom:0;border-bottom:none}.message-page .content-box .message-box>.message-item:hover .operating-box{transform:translateX(0)}.message-page .content-box .message-box>.message-item:hover .date-box{opacity:0}.message-page .content-box .message-box>.message-item .type-box{position:relative;padding:0 30px;height:100%}.message-page .content-box .message-box>.message-item .info-box{overflow:hidden;flex-grow:1}.message-page .content-box .message-box>.message-item .info-box .name{font-size:14px}.message-page .content-box .message-box>.message-item .info-box .info{margin-top:2px;font-size:12px;color:#cfcfcf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-page .content-box .message-box>.message-item .date-box{padding:0 20px;font-size:12px;flex-shrink:0;transition:all .3s;transition-timing-function:ease}.message-page .content-box .message-box>.message-item .operating-box{padding:0 25px;transform:translateX(100%);transition:all .3s;transition-timing-function:ease;display:flex;justify-content:center;align-items:center;position:absolute;top:0;right:0;bottom:0;left:auto}.message-page .content-box .message-box>.message-item .operating-box .icon{width:15px;height:15px}.message-page .content-box .message-box>.message-unread .type-box:after{content:"";width:3px;background:#2faaf7;border-radius:3px;position:absolute;top:0;right:auto;bottom:0;left:0}.message-page .content-box .message-box .empty{width:100%;height:100%;font-size:12px;display:flex;justify-content:center;align-items:center}.message-page .content-box .message-box .empty .text{margin-left:10px}.message-page-dark,.message-page-dark .head-box{background:#191d23}