@charset "UTF-8"; body{ overflow: hidden; } li{ list-style-type: none; } /* 顶部 */ .message-top{ background: #589bff; width: 100%; } .message-top > div{ height: 70px; float: left; } .message-top .left{ width: 220px; background: #4f80f6; text-align: center; } .message-top .right{ /*width: 100%;*/ line-height: 70px; color: white; font-size: 18px; padding-left: 30px; } /*主体内容*/ .message-body{ box-sizing: border-box; } .message-body .left{ width: 220px; position: absolute; margin-top: 70px; height: 100%; top: 0; left: 0; border-right: 1px #ebebeb solid; background: #fff; } .message-body .left .avatarbox{ padding: 30px; text-align: center; } .message-body .left .avatarbox .name,.message-body .left .avatarbox .avatar { margin: 5px auto; } .message-body .left .avatarbox .name { color: #808a9c; font-size: 18px; } /* 侧边栏 */ .message-body .left .list{ } .message-body .left .parent{ padding-left: 0; } .message-body .left .list li{ list-style-type: none; font-size: 16px; /*padding: 10px;*/ margin-bottom: 10px; } .message-body .left .list>ul li .icon{ color: #5d8af7; font-size: 20px; vertical-align: text-bottom; padding: 10px; } .message-body .left .list li a{ color: #000; text-decoration: none; display: block; padding: 10px; } .message-body .left .list li.active,.message-body .left .list li:hover{ background: #488af7; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .message-body .left .list li.active .icon,.message-body .left .list li:hover .icon,.message-body .left .list li.active .text-message{ color: #fff; } .message-body .left .list li.active a, .message-body .left .list li:hover a{ color: #fff; } .message-body .left .list .text-message{ color: #ff6f56; } .message-body .left .list .childList{ padding: 0 40px 0 0 ; } .message-body .left .list .childList a{ padding-left: 60px; } /* 右边主体内容 */ .message-body .right{ position: absolute; padding-top: 70px; height: 100%; top: 0; left: 0; width: 100%; padding-left: 220px; z-index: -1; } .messageList{ padding: 10px; height: 100%; overflow: auto; } .messageList ul{ padding: 0; } .messageList ul li{ background: #fff; margin-bottom: 10px; padding: 15px 20px; } .messageList ul li h2,.message-body .right .messageList ul li h3{ margin: 0; } .messageList .title{ color: #808a9c; font-size: 18px; font-weight: bold; } .messageList .type{ color: #808a9c; font-size: 16px; font-weight: bold; padding-right: 15px; } .messageList .date{ color: #b1bbcf; font-size: 8px; } .messageList p{ margin-top: 10px; margin-bottom: 0; color: #b1bbcf; font-size: 12px; }