.container { background-color: #f2f2f2; height: 100%; } .header { background: #333333; font-size: 18px; overflow: hidden; height: 68px !important; display: flex; align-items: center; justify-content: space-between; } .header img { height: 28px; } .header .span { float: right; color: #fff; font-size: 14px; /* top: 50%; right: 25px; */ /* position: absolute; */ /* transform: translateY(-50%); */ vertical-align: middle } .header .span .icon { margin-right: 5px; } .aside { background-color: #fff; box-shadow: 5px 5px 10px rgba(0,0,0,0.1); position: relative; z-index: 2 } .aside > p { padding-left: 20px; line-height: 60px; font-size: 12px; color: #999999; } .nav .p { height: 58px; line-height: 58px; font-size: 14px; color: #999999; cursor: pointer; padding-left: 45px; padding-right: 20px; position: relative; display: block; } .nav .p .i { position: absolute; left: 20px; top: 50%; margin-top: -9px; } .nav .p.active { background-color: #f2f2f2; color: #333333; } .main { padding: 0; position: relative; z-index: 1; } .nav-head { padding: 0 25px; height: 60px; background-color: #fff; position: relative; box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.1) } .main h4 { font-size: 18px; line-height: 60px; font-weight: 400; } .main h4 span { padding-left: 15px; } .main h4 p { display: inline-block; } .main h4 p span i::after { content: ':' } .main h4 p span b { font-weight: normal; } .main h4 p span.strong i { font-size: 14px; color: #f56c6c; } .main h4 p span.strong b { font-size: 18px; color: #f56c6c; } .main h4 p span.strong b::after { content: '点'; font-size: 14px; } .nav-head div { position: absolute; height: 16px; top: 50%; right: 25px; margin-top: -8px; color: #999999; } .nav-head .link { color: inherit; line-height: 16px; font-size: 14px; } .nav-head .link::after { content: '>'; padding: 0 5px; } .nav-head .link:last-child::after { display: none; } .show-view { margin: 30px; }