@define-extend nav { position: absolute; top: 0; display: block; width: 90px; height: 90px; outline: none; color: #fff; text-align: center; font-size: 20PX; line-height: 90px; } .width750 { .yoho-header { height: 105px; line-height: 105px; .nav-back { left: 12px; width: 105px; height: 105px; line-height: 105px; } .nav-home { right: 12px; width: 105px; height: 105px; line-height: 105px; } .nav-btn { right: 12px; width: 105px; height: 105px; line-height: 105px; } .nav-title { margin-right: 117px; margin-left: 117px; font-size: 42px; font-weight: normal; } } } .yoho-header { position: relative; z-index: 1; overflow: hidden; width: 100%; height: 90px; background-color: #000; background-image: linear-gradient(#323232, #414141); color: #fff; line-height: 90px; &.boys { background-image: linear-gradient(#323232, #414141); } &.girls { background: #ff88ae; } &.kids { background: #7ad9f9; } &.life-style { background: #4f4138; } a.highlight { background: rgba(200, 200, 200, 0.1); } .nav-back { @extend nav; left: 10px; } .nav-home { @extend nav; right: 10px; } .nav-btn { @extend nav; right: 10px; font-size: 14PX; } .nav-sub-right { @extend nav; right: 100px; } .nav-title { position: absolute; top: 0; right: 0; left: 0; overflow: hidden; margin-right: 100px; margin-left: 100px; height: 100%; color: #fff; text-align: center; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; font-size: 36px; } } .width750 { .system-update { height: 105px; line-height: 105px; .system-header { font-size: 70px; } span { font-size: 94px; } } } .system-update { display: none; overflow: hidden; width: 100%; height: 90px; background-image: linear-gradient(#323232, #414141); line-height: 90px; .system-header { float: left; overflow: hidden; width: 85%; height: 100%; color: #fff; text-align: center; font-size: 60px; } span { float: left; overflow: hidden; width: 14%; height: 100%; color: #fff; text-align: center; font-weight: bold; font-size: 80px; } } .width750 { .homebuttom { height: 105px; ul { padding-top: 14px; li { i { margin-bottom: 9px; } span { line-height: 47px; font-size: 16px; } } } } } .homebuttom { position: relative; z-index: 2; overflow: hidden; width: 100%; height: 90px; border-top: 1px solid rgba(255, 255, 255, 0.5); color: #fff; &.boys { background-image: linear-gradient(#323232, #414141); } &.girls { background: #ff88ae; } &.kids { background: #7ad9f9; } &.life-style { background: #4f4138; } ul { overflow: hidden; padding-top: 12px; width: 100%; height: 90%; li { float: left; overflow: hidden; width: 25%; height: 100%; text-align: center; i { display: block; margin-bottom: 8px; width: 100%; height: 40%; color: #fff; } span { display: block; overflow: hidden; width: 100%; height: auto; color: #fff; line-height: 40px; font-size: 14PX; } } } }