//鍏叡閮ㄥ垎 @import './common.less'; * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix:after { display: block; clear: both; content: ""; visibility: hidden; height: 0; } .clearfix { zoom: 1; } body { background-color: #f1f1f1; } .wAuto { padding-top:20px; width: 1220px; margin: 0 auto; min-height: 500px; >.newsPaper { width: 350px; height: 580px; margin-right: 10px; >.newsTab { height: 60px; background-color: #fff; padding-top: 12px; padding-left: 19px; margin-bottom: 10px; >span { cursor: pointer; float: left; width: 66px; height: 36px; background-color: #e8e8e8; color: #333; font-size: 16px; line-height: 36px; text-align: center; margin-right: 16px; transition: all 0.1s; &:hover { background-color: #00a0ff; color: #fff; } &.active { background-color: #00a0ff; color: #fff; } } } >.newsPage { img { width: 350px; height: 510px; } position: relative; >.hoverBox { position: absolute; top: 0; left: 0; width: 20px; height: 20px; opacity: 0; background: #fb363f; transition: all 0.2s; &:hover { opacity: 0.15; background: #fb363f; } } } } >.newsDetail { padding: 0 30px 20px; width: 630px; background-color: #fff; >.title { padding-top: 25px; height: 76px; h3 { line-height: 30px; font-size: 22px; text-align: center; } } >.content { p { // text-indent: 20px; line-height: 26px; margin-bottom: 26px; font-size: 16px; } img { max-width: 100%; height: auto; } } } >.newsPeriodical { width: 220px; min-height: 370px; background-color: #fff; .title { line-height: 60px; height: 60px; font-size: 18px; color: #005689; text-indent: 20px; border-bottom: 1px solid #ddd; } ul { padding-top: 10px; li { -webkit-user-select: none; -moz-user-focus: none; -ms-user-select: none; cursor: pointer; line-height: 32px; color: #333; font-size: 16px; text-indent: 42px; overflow: hidden; position: relative; &:before { content: ''; position: absolute; top: 13px; left: 24px; width: 6px; height: 6px; background-color: #ccc; border-radius: 50%; } &:after { content: ''; position: absolute; width: 1px; height: 1px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0); border-radius: 50%; transition: all 0.1s; } transition:all 0.15s; &:hover { background-color: #f1f1f1; } &.active { color: #005689; } &:active { &:after { width: 225px; height: 225px; background-color: rgba(0, 0, 0, 0.1); } } } } >.page { padding: 20px; border-top: 1px solid #ddd; margin-top: 15px; >span { background: #e8e8e8; border-radius: 2px; width: 80px; height: 36px; line-height: 36px; color: #666; position: relative; &.fl { text-indent: 25px; &:before { left: 12px; } &:after { left: 14px; background-color: #e8e8e8; } } &.fr { text-indent: 12px; color: #fff; background-color: #00a0ff; &:before { right: 12px; background-color: #fff; } &:after { right: 14px; background-color: #00a0ff; } } &:before, &:after { content: ''; position: absolute; top: 13px; width: 9px; height: 9px; border-radius: 2px; background-color: #666; transform: rotate(45deg); } } } } }