.guang-page { width: 1150px; margin: 0 auto; .left-side { float: left; width: 830px; } .right-side { float: left; width: 290px; margin-left: 30px; } img.blink, .bg-img.blink { opacity: 0.8; } /* 精彩推荐 */ .ex-reco-title { color: #333; line-height: 24px; padding-bottom: 10px; border-bottom: 1px solid #ccc; font-size: 20px; font-weight: bold; } .ex-reco-list { margin-top: 14px; } .ex-reco-item { box-sizing: border-box; height: 60px; margin-bottom: 14px; &:last-child { margin-bottom: 0; } } .ex-reco-img { display: block; float: left; width: 90px; height: 60px; span { display: block; height: 100%; width: 100%; background-size: cover; background-position: center; img { width: 100%; height: 100%; } } margin-right: 5px; } .ex-reco-context { float: left; max-width: 195px; height: 40px; line-height: 20px; font-size: 13px; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; &:hover { color: #c30; } } /* 热门标签 */ .hot { margin: 30px 0; .hot-title { color: #333; line-height: 24px; padding-bottom: 10px; border-bottom: 1px solid #ccc; font-weight: bold; font-size: 20px; } .hot-tag-list { margin-top: 14px; max-height: 150px; overflow: hidden; } .hot-tag { display: inline-block; float: left; padding: 5px; font-size: 12px; background-color: #ccc; border: none; margin-right: 10px; margin-bottom: 10px; color: white; font-weight: bold; &:hover { background-color: #333; } } } /* 广告位 */ .ads { margin-top: 30px; .ad { display: block; box-sizing: border-box; margin-bottom: 24px; width: 290px; img { display: block; width: 100%; } } } /* 资讯 */ .msg-content { padding: 24px 0; border-bottom: 1px solid #ccc; position: relative; .content { height: 80px; line-height: 24px; font-size: 14px; color: #666; } .iconfont { color: #ccc; } .msg-img { position: relative; float: left; margin-right: 26px; img { display: block; width: 360px; height: 224px; } img.square { height: 360px; } } .classification { position: absolute; background-color: #000; color: #fff; text-align: center; width: 80px; height: 32px; line-height: 32px; font-size: 13px; opacity: 0.9; z-index: 99; } .video-icon { position: absolute; top: 50%; left: 50%; width: 54px; height: 54px; margin-top: -27px; margin-left: -27px; background: resolve("guang/isVideo.png") no-repeat; background-size: 100% 100%; z-index: 120; } .type-icon { position: absolute; top: 0; left: 66px; height: 32px; width: 32px; background: resolve("guang/msg-reco.png") no-repeat; background-size: 100% 100%; z-index: 100; &.fashion-man { background: resolve("guang/fashion-man.png") no-repeat; } } .msg-info { float: left; width: 440px; } .msg-title { display: block; font-size: 22px; color: #333; line-height: 30px; max-height: 64px; &:hover { color: #c30; } } .msg-app { line-height: 34px; color: #999; font-size: 13px; } .author { display: block; float: left; color: #333; margin-right: 22px; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; &:hover { color: #c30; } } .publish-time, .page-view { color: #999; } .publish-time { margin-right: 30px; } .tags, .like-comment { position: absolute; bottom: 24px; font-size: 12px; &.tags { left: 386px; max-width: 350px; height: 20px; overflow: hidden; } &.like-comment { right: 0; color: #999; } .like { margin-right: 10px; &:hover * { color: #000; } } .like-icon { cursor: pointer; &.liked { color: #000; } } } .msg-tag { display: inline-block; text-align: center; height: 20px; line-height: 20px; padding: 0 10px; margin-right: 10px; background-color: #ccc; color: #fff; &:last-child { margin-right: 0; } &:hover { background-color: #333; } } } .pager { font-size: 12px; a { height: 24px; padding: 0 9px; line-height: 24px; display: inline-block; text-align: center; margin-right: 8px; color: #222; &.cur { background-color: #222; color: #fff; } } } }