guang detail css @review by 徐祁
Showing
1 changed file
with
397 additions
and
396 deletions
| @@ -44,489 +44,490 @@ | @@ -44,489 +44,490 @@ | ||
| 44 | .related-reco .recos { | 44 | .related-reco .recos { |
| 45 | width: 850px; | 45 | width: 850px; |
| 46 | } | 46 | } |
| 47 | -} | ||
| 48 | 47 | ||
| 49 | -.detail-title { | ||
| 50 | - font-size: 28px; | ||
| 51 | - line-height: 64px; | ||
| 52 | - border-bottom: 1px dotted #c1c1c1; | ||
| 53 | - word-wrap:break-word; | ||
| 54 | -} | 48 | + .detail-title { |
| 49 | + font-size: 28px; | ||
| 50 | + line-height: 64px; | ||
| 51 | + border-bottom: 1px dotted #c1c1c1; | ||
| 52 | + word-wrap:break-word; | ||
| 53 | + } | ||
| 55 | 54 | ||
| 56 | -.article-author { | ||
| 57 | - float: left; | ||
| 58 | - line-height: 64px; | ||
| 59 | - .author-avatar { | ||
| 60 | - clear: both; | ||
| 61 | - width: 38px; | ||
| 62 | - height: 64px; | ||
| 63 | - img { | 55 | + .article-author { |
| 56 | + float: left; | ||
| 57 | + line-height: 64px; | ||
| 58 | + .author-avatar { | ||
| 59 | + clear: both; | ||
| 64 | width: 38px; | 60 | width: 38px; |
| 65 | - height: 38px; | ||
| 66 | - border-radius: 50%; | ||
| 67 | - vertical-align: middle; | 61 | + height: 64px; |
| 62 | + img { | ||
| 63 | + width: 38px; | ||
| 64 | + height: 38px; | ||
| 65 | + border-radius: 50%; | ||
| 66 | + vertical-align: middle; | ||
| 67 | + } | ||
| 68 | } | 68 | } |
| 69 | } | 69 | } |
| 70 | -} | ||
| 71 | -.author-info { | ||
| 72 | - float: left; | ||
| 73 | - margin-left: 10px; | ||
| 74 | - font-size: 14px; | ||
| 75 | - max-width: 447px; | ||
| 76 | - .author-name { | ||
| 77 | - display: block; | ||
| 78 | - height: 64px; | ||
| 79 | - line-height: 64px; | ||
| 80 | - cursor: pointer; | ||
| 81 | - color: #000; | 70 | + .author-info { |
| 71 | + float: left; | ||
| 72 | + margin-left: 10px; | ||
| 73 | + font-size: 14px; | ||
| 74 | + max-width: 447px; | ||
| 75 | + .author-name { | ||
| 76 | + display: block; | ||
| 77 | + height: 64px; | ||
| 78 | + line-height: 64px; | ||
| 79 | + cursor: pointer; | ||
| 80 | + color: #000; | ||
| 82 | 81 | ||
| 83 | - &:hover { | ||
| 84 | - color: #cc3300; | 82 | + &:hover { |
| 83 | + color: #cc3300; | ||
| 84 | + } | ||
| 85 | + } | ||
| 86 | + .author-introduce { | ||
| 87 | + color: #999; | ||
| 85 | } | 88 | } |
| 86 | } | 89 | } |
| 87 | - .author-introduce { | ||
| 88 | - color: #999; | ||
| 89 | - } | ||
| 90 | -} | ||
| 91 | 90 | ||
| 92 | -.article-status { | ||
| 93 | - float: right; | ||
| 94 | - height: 64px; | ||
| 95 | - line-height: 64px; | ||
| 96 | - color: #999; | ||
| 97 | - font-size: 13px; | ||
| 98 | - .article-click { | ||
| 99 | - margin: 0 25px; | ||
| 100 | - } | ||
| 101 | - .article-comment { | ||
| 102 | - color: #cc3300; | ||
| 103 | - cursor: pointer; | 91 | + .article-status { |
| 92 | + float: right; | ||
| 93 | + height: 64px; | ||
| 94 | + line-height: 64px; | ||
| 95 | + color: #999; | ||
| 96 | + font-size: 13px; | ||
| 97 | + .article-click { | ||
| 98 | + margin: 0 25px; | ||
| 99 | + } | ||
| 100 | + .article-comment { | ||
| 101 | + color: #cc3300; | ||
| 102 | + cursor: pointer; | ||
| 103 | + } | ||
| 104 | } | 104 | } |
| 105 | -} | ||
| 106 | 105 | ||
| 107 | -.article-main { | ||
| 108 | - img { | ||
| 109 | - display: block; | ||
| 110 | - max-width: 100%; | ||
| 111 | - margin:0 auto; | ||
| 112 | - } | ||
| 113 | - .article-text { | ||
| 114 | - margin: 2px 0 20px; | ||
| 115 | - line-height: 28px; | ||
| 116 | - font-size: 14px; | ||
| 117 | - } | ||
| 118 | - .article-small-pic { | ||
| 119 | - text-align: center; | ||
| 120 | - font-size: 0; | 106 | + .article-main { |
| 121 | img { | 107 | img { |
| 122 | - display: inline-block; | ||
| 123 | - *display: inline; | ||
| 124 | - *zoom: 1; | ||
| 125 | - max-width: 412px; | ||
| 126 | - &:first-child { | ||
| 127 | - margin: 0 6px 0 0; | 108 | + display: block; |
| 109 | + max-width: 100%; | ||
| 110 | + margin:0 auto; | ||
| 111 | + } | ||
| 112 | + .article-text { | ||
| 113 | + margin: 2px 0 20px; | ||
| 114 | + line-height: 28px; | ||
| 115 | + font-size: 14px; | ||
| 116 | + } | ||
| 117 | + .article-small-pic { | ||
| 118 | + text-align: center; | ||
| 119 | + font-size: 0; | ||
| 120 | + img { | ||
| 121 | + display: inline-block; | ||
| 122 | + *display: inline; | ||
| 123 | + *zoom: 1; | ||
| 124 | + max-width: 412px; | ||
| 125 | + &:first-child { | ||
| 126 | + margin: 0 6px 0 0; | ||
| 127 | + } | ||
| 128 | } | 128 | } |
| 129 | } | 129 | } |
| 130 | + | ||
| 131 | + .block:first-child { | ||
| 132 | + margin-top: 10px; | ||
| 133 | + } | ||
| 130 | } | 134 | } |
| 131 | - | ||
| 132 | - .block:first-child { | ||
| 133 | - margin-top: 10px; | ||
| 134 | - } | ||
| 135 | -} | ||
| 136 | 135 | ||
| 137 | -/*user handle*/ | ||
| 138 | -.user-handle { | ||
| 139 | - margin: 30px 0 0 0; | ||
| 140 | - text-align: center; | ||
| 141 | - ul { | ||
| 142 | - display: inline-block; | ||
| 143 | - li { | ||
| 144 | - float: left; | ||
| 145 | - margin: 0 15px; | ||
| 146 | - cursor: pointer; | ||
| 147 | - a { | ||
| 148 | - position: relative; | ||
| 149 | - display: block; | ||
| 150 | - padding: 0 10px; | ||
| 151 | - height: 36px; | ||
| 152 | - line-height: 36px; | ||
| 153 | - color: #535353; | ||
| 154 | - font-size: 0; | ||
| 155 | - background: #efefef; | ||
| 156 | - text-align: left; | ||
| 157 | - i, span{ | ||
| 158 | - @include inline-block; | ||
| 159 | - font-style: normal; | ||
| 160 | - font-size: 14px; | 136 | + /*user handle*/ |
| 137 | + .user-handle { | ||
| 138 | + margin: 30px 0 0 0; | ||
| 139 | + text-align: center; | ||
| 140 | + ul { | ||
| 141 | + display: inline-block; | ||
| 142 | + li { | ||
| 143 | + float: left; | ||
| 144 | + margin: 0 15px; | ||
| 145 | + cursor: pointer; | ||
| 146 | + a { | ||
| 147 | + position: relative; | ||
| 148 | + display: block; | ||
| 149 | + padding: 0 10px; | ||
| 150 | + height: 36px; | ||
| 151 | + line-height: 36px; | ||
| 152 | + color: #535353; | ||
| 153 | + font-size: 0; | ||
| 154 | + background: #efefef; | ||
| 155 | + text-align: left; | ||
| 156 | + i, span{ | ||
| 157 | + @include inline-block; | ||
| 158 | + font-style: normal; | ||
| 159 | + font-size: 14px; | ||
| 160 | + } | ||
| 161 | + i { | ||
| 162 | + margin: 0 5px 0 0; | ||
| 163 | + @include opacity(0.5); | ||
| 164 | + font-size: 18px; | ||
| 165 | + } | ||
| 166 | + .cancel-collect { | ||
| 167 | + display: none; | ||
| 168 | + } | ||
| 161 | } | 169 | } |
| 170 | + } | ||
| 171 | + .like-status.liked i, | ||
| 172 | + .like-status.hover i{ | ||
| 173 | + @include opacity(1); | ||
| 174 | + } | ||
| 175 | + .like-statis.hover .like-num { | ||
| 176 | + color: #000; | ||
| 177 | + } | ||
| 178 | + .sort-collect a { | ||
| 162 | i { | 179 | i { |
| 163 | - margin: 0 5px 0 0; | ||
| 164 | - @include opacity(0.5); | ||
| 165 | - font-size: 18px; | 180 | + width: 21px; |
| 181 | + | ||
| 166 | } | 182 | } |
| 167 | - .cancel-collect { | 183 | + } |
| 184 | + .sort-collect.collected a { | ||
| 185 | + i { | ||
| 186 | + @include opacity(1); | ||
| 187 | + } | ||
| 188 | + span { | ||
| 168 | display: none; | 189 | display: none; |
| 169 | } | 190 | } |
| 191 | + .cancel-collect { | ||
| 192 | + display: inline; | ||
| 193 | + } | ||
| 170 | } | 194 | } |
| 171 | - } | ||
| 172 | - .like-status.liked i, | ||
| 173 | - .like-status.hover i{ | ||
| 174 | - @include opacity(1); | ||
| 175 | - } | ||
| 176 | - .like-statis.hover .like-num { | ||
| 177 | - color: #000; | ||
| 178 | - } | ||
| 179 | - .sort-collect a { | ||
| 180 | - i { | ||
| 181 | - width: 21px; | ||
| 182 | - | ||
| 183 | - } | ||
| 184 | - } | ||
| 185 | - .sort-collect.collected a { | ||
| 186 | - i { | 195 | + .sort-collect.hover i { |
| 187 | @include opacity(1); | 196 | @include opacity(1); |
| 188 | } | 197 | } |
| 189 | - span { | ||
| 190 | - display: none; | ||
| 191 | - } | ||
| 192 | - .cancel-collect { | ||
| 193 | - display: inline; | 198 | + .sort-collect.hover span { |
| 199 | + color: #000; | ||
| 194 | } | 200 | } |
| 195 | } | 201 | } |
| 196 | - .sort-collect.hover i { | ||
| 197 | - @include opacity(1); | 202 | + } |
| 203 | + | ||
| 204 | + .article-bottom-info { | ||
| 205 | + margin: 44px 0 0 0; | ||
| 206 | + padding: 0 0 10px; | ||
| 207 | + border-bottom: 1px dotted #c1c1c1; | ||
| 208 | + } | ||
| 209 | + | ||
| 210 | + .article-tag { | ||
| 211 | + float: left; | ||
| 212 | + width: 588px; | ||
| 213 | + .tag-icon { | ||
| 214 | + float: left; | ||
| 215 | + margin: 0 12px 0 0; | ||
| 216 | + font-size: 20px; | ||
| 217 | + font-style: normal; | ||
| 198 | } | 218 | } |
| 199 | - .sort-collect.hover span { | ||
| 200 | - color: #000; | 219 | + ul { |
| 220 | + float: left; | ||
| 221 | + max-width: 555px; | ||
| 222 | + li { | ||
| 223 | + float: left; | ||
| 224 | + margin: 0 10px 10px 0; | ||
| 225 | + a { | ||
| 226 | + display: block; | ||
| 227 | + padding: 0 15px; | ||
| 228 | + height: 20px; | ||
| 229 | + line-height: 20px; | ||
| 230 | + font-size: 12px; | ||
| 231 | + color: #fff; | ||
| 232 | + font-weight: bold; | ||
| 233 | + background: #c1c1c1; | ||
| 234 | + } | ||
| 235 | + | ||
| 236 | + &:hover a { | ||
| 237 | + background:#333; | ||
| 238 | + } | ||
| 239 | + } | ||
| 240 | + li:first-child { | ||
| 241 | + margin-left: 0; | ||
| 242 | + } | ||
| 201 | } | 243 | } |
| 202 | } | 244 | } |
| 203 | -} | ||
| 204 | 245 | ||
| 205 | -.article-bottom-info { | ||
| 206 | - margin: 44px 0 0 0; | ||
| 207 | - padding: 0 0 10px; | ||
| 208 | - border-bottom: 1px dotted #c1c1c1; | ||
| 209 | -} | ||
| 210 | 246 | ||
| 211 | -.article-tag { | ||
| 212 | - float: left; | ||
| 213 | - width: 588px; | ||
| 214 | - .tag-icon { | ||
| 215 | - float: left; | ||
| 216 | - margin: 0 12px 0 0; | ||
| 217 | - font-size: 20px; | ||
| 218 | - font-style: normal; | 247 | + .article-share { |
| 248 | + float: right; | ||
| 249 | + | ||
| 250 | + .share-to { | ||
| 251 | + position: relative; | ||
| 252 | + font-size: 12px; | ||
| 253 | + } | ||
| 219 | } | 254 | } |
| 220 | - ul { | ||
| 221 | - float: left; | ||
| 222 | - max-width: 555px; | 255 | + |
| 256 | + .detail-related-posts { | ||
| 257 | + margin: 14px 0 0 0; | ||
| 223 | li { | 258 | li { |
| 224 | float: left; | 259 | float: left; |
| 225 | - margin: 0 10px 10px 0; | 260 | + width: 264px; |
| 261 | + margin-left: 19px; | ||
| 226 | a { | 262 | a { |
| 227 | display: block; | 263 | display: block; |
| 228 | - padding: 0 15px; | ||
| 229 | - height: 20px; | ||
| 230 | - line-height: 20px; | ||
| 231 | - font-size: 12px; | ||
| 232 | - color: #fff; | ||
| 233 | - font-weight: bold; | ||
| 234 | - background: #c1c1c1; | ||
| 235 | } | 264 | } |
| 265 | + .bg-img { | ||
| 266 | + display: block; | ||
| 267 | + width: 100%; | ||
| 268 | + height: 173px; | ||
| 269 | + line-height: 173px; | ||
| 270 | + text-align: center; | ||
| 271 | + font-size: 0; | ||
| 236 | 272 | ||
| 237 | - &:hover a { | ||
| 238 | - background:#333; | 273 | + img { |
| 274 | + max-width: 100%; | ||
| 275 | + max-height: 100%; | ||
| 276 | + vertical-align: middle; | ||
| 277 | + } | ||
| 278 | + } | ||
| 279 | + .post-title { | ||
| 280 | + margin: 8px 0 0 0; | ||
| 281 | + h2 { | ||
| 282 | + line-height: 16px; | ||
| 283 | + font-size: 14px; | ||
| 284 | + color: #000; | ||
| 285 | + overflow: hidden; | ||
| 286 | + white-space: nowrap; | ||
| 287 | + text-overflow: ellipsis; | ||
| 288 | + } | ||
| 289 | + } | ||
| 290 | + .post-title:hover h2 { | ||
| 291 | + color: #cc3300 !important; | ||
| 239 | } | 292 | } |
| 240 | } | 293 | } |
| 241 | li:first-child { | 294 | li:first-child { |
| 242 | margin-left: 0; | 295 | margin-left: 0; |
| 243 | } | 296 | } |
| 244 | } | 297 | } |
| 245 | -} | ||
| 246 | 298 | ||
| 299 | + .comment-area { | ||
| 300 | + margin: 58px 0 0 0; | ||
| 247 | 301 | ||
| 248 | -.article-share { | ||
| 249 | - float: right; | ||
| 250 | - | ||
| 251 | - .share-to { | ||
| 252 | - position: relative; | ||
| 253 | - font-size: 12px; | 302 | + .comment-publish { |
| 303 | + height: 48px; | ||
| 304 | + } | ||
| 254 | } | 305 | } |
| 255 | -} | ||
| 256 | 306 | ||
| 257 | -.detail-related-posts { | ||
| 258 | - margin: 14px 0 0 0; | ||
| 259 | - li { | ||
| 260 | - float: left; | ||
| 261 | - width: 264px; | ||
| 262 | - margin-left: 19px; | ||
| 263 | - a { | ||
| 264 | - display: block; | ||
| 265 | - } | ||
| 266 | - .bg-img { | 307 | + .comment-textarea { |
| 308 | + textarea { | ||
| 267 | display: block; | 309 | display: block; |
| 268 | - width: 100%; | ||
| 269 | - height: 173px; | ||
| 270 | - line-height: 173px; | ||
| 271 | - text-align: center; | ||
| 272 | - font-size: 0; | ||
| 273 | - | ||
| 274 | - img { | ||
| 275 | - max-width: 100%; | ||
| 276 | - max-height: 100%; | ||
| 277 | - vertical-align: middle; | ||
| 278 | - } | ||
| 279 | - } | ||
| 280 | - .post-title { | ||
| 281 | - margin: 8px 0 0 0; | ||
| 282 | - h2 { | ||
| 283 | - line-height: 16px; | ||
| 284 | - font-size: 14px; | ||
| 285 | - color: #000; | ||
| 286 | - overflow: hidden; | ||
| 287 | - white-space: nowrap; | ||
| 288 | - text-overflow: ellipsis; | ||
| 289 | - } | ||
| 290 | - } | ||
| 291 | - .post-title:hover h2 { | ||
| 292 | - color: #cc3300 !important; | 310 | + width: 812px; |
| 311 | + height: 86px; | ||
| 312 | + padding: 12px 12px; | ||
| 313 | + resize: none; | ||
| 314 | + outline: none; | ||
| 315 | + font-size: 14px; | ||
| 316 | + line-height: 18px; | ||
| 317 | + color: #535353; | ||
| 318 | + font-family: "arial","helvetica","微软雅黑"; | ||
| 319 | + border: 1px solid #e7e7e7; | ||
| 293 | } | 320 | } |
| 294 | } | 321 | } |
| 295 | - li:first-child { | ||
| 296 | - margin-left: 0; | ||
| 297 | - } | ||
| 298 | -} | ||
| 299 | 322 | ||
| 300 | -.comment-area { | ||
| 301 | - margin: 58px 0 0 0; | ||
| 302 | - | ||
| 303 | - .comment-publish { | 323 | + .word-count-tip { |
| 324 | + display: inline-block; | ||
| 304 | height: 48px; | 325 | height: 48px; |
| 305 | - } | ||
| 306 | -} | 326 | + line-height: 48px; |
| 307 | 327 | ||
| 308 | -.comment-textarea { | ||
| 309 | - textarea { | ||
| 310 | - display: block; | ||
| 311 | - width: 812px; | ||
| 312 | - height: 86px; | ||
| 313 | - padding: 12px 12px; | ||
| 314 | - resize: none; | ||
| 315 | - outline: none; | ||
| 316 | - font-size: 14px; | ||
| 317 | - line-height: 18px; | ||
| 318 | - color: #535353; | ||
| 319 | - font-family: "arial","helvetica","微软雅黑"; | ||
| 320 | - border: 1px solid #e7e7e7; | ||
| 321 | - } | ||
| 322 | -} | ||
| 323 | - | ||
| 324 | -.word-count-tip { | ||
| 325 | - display: inline-block; | ||
| 326 | - height: 48px; | ||
| 327 | - line-height: 48px; | ||
| 328 | - | ||
| 329 | - font-size: 12px; | ||
| 330 | - color: #c8c8c8; | 328 | + font-size: 12px; |
| 329 | + color: #c8c8c8; | ||
| 331 | 330 | ||
| 332 | - .exceed-count { | ||
| 333 | - color: #f00; | 331 | + .exceed-count { |
| 332 | + color: #f00; | ||
| 333 | + } | ||
| 334 | } | 334 | } |
| 335 | -} | ||
| 336 | 335 | ||
| 337 | -.publish-btn { | ||
| 338 | - margin: 10px 0 0 0; | ||
| 339 | - float: right; | ||
| 340 | - width: 90px; | ||
| 341 | - height: 33px; | ||
| 342 | - line-height: 33px; | ||
| 343 | - text-align: center; | ||
| 344 | - color: #fff; | ||
| 345 | - font-size: 14px; | ||
| 346 | - background: #cb3a3e; | ||
| 347 | - cursor: pointer; | 336 | + .publish-btn { |
| 337 | + margin: 10px 0 0 0; | ||
| 338 | + float: right; | ||
| 339 | + width: 90px; | ||
| 340 | + height: 33px; | ||
| 341 | + line-height: 33px; | ||
| 342 | + text-align: center; | ||
| 343 | + color: #fff; | ||
| 344 | + font-size: 14px; | ||
| 345 | + background: #cb3a3e; | ||
| 346 | + cursor: pointer; | ||
| 348 | 347 | ||
| 349 | - &:hover { | ||
| 350 | - background: #c03234; | ||
| 351 | - } | 348 | + &:hover { |
| 349 | + background: #c03234; | ||
| 350 | + } | ||
| 352 | 351 | ||
| 353 | - &.disable { | ||
| 354 | - background-color: #e79c9e; | 352 | + &.disable { |
| 353 | + background-color: #e79c9e; | ||
| 354 | + } | ||
| 355 | } | 355 | } |
| 356 | -} | ||
| 357 | 356 | ||
| 358 | -.comments-wrap{ | ||
| 359 | - h4{ | ||
| 360 | - position: relative; | ||
| 361 | - line-height: 32px; | ||
| 362 | - border-bottom: 1px solid #e7e7e7; | ||
| 363 | - .comment-num{ | ||
| 364 | - margin-right: 5px; | ||
| 365 | - color: #c11e00; | 357 | + .comments-wrap{ |
| 358 | + h4{ | ||
| 359 | + position: relative; | ||
| 360 | + line-height: 32px; | ||
| 361 | + border-bottom: 1px solid #e7e7e7; | ||
| 362 | + .comment-num{ | ||
| 363 | + margin-right: 5px; | ||
| 364 | + color: #c11e00; | ||
| 365 | + } | ||
| 366 | + i{ | ||
| 367 | + position: absolute; | ||
| 368 | + width: 13px; | ||
| 369 | + height: 7px; | ||
| 370 | + left: 30px; | ||
| 371 | + bottom: -7px; | ||
| 372 | + background: image-url('guang/detail/comment-icon.png') no-repeat; | ||
| 373 | + } | ||
| 366 | } | 374 | } |
| 367 | - i{ | ||
| 368 | - position: absolute; | ||
| 369 | - width: 13px; | ||
| 370 | - height: 7px; | ||
| 371 | - left: 30px; | ||
| 372 | - bottom: -7px; | ||
| 373 | - background: image-url('guang/detail/comment-icon.png') no-repeat; | 375 | + |
| 376 | + .comment-pager { | ||
| 377 | + float: right; | ||
| 378 | + margin: 20px 0; | ||
| 374 | } | 379 | } |
| 375 | } | 380 | } |
| 376 | - | ||
| 377 | - .comment-pager { | ||
| 378 | - float: right; | 381 | + .comments-empty { |
| 382 | + display: none; | ||
| 383 | + color: #ccc; | ||
| 379 | margin: 20px 0; | 384 | margin: 20px 0; |
| 385 | + font-size: 12px; | ||
| 386 | + line-height: 12px; | ||
| 387 | + text-align: center; | ||
| 380 | } | 388 | } |
| 381 | -} | ||
| 382 | -.comments-empty { | ||
| 383 | - display: none; | ||
| 384 | - color: #ccc; | ||
| 385 | - margin: 20px 0; | ||
| 386 | - font-size: 12px; | ||
| 387 | - line-height: 12px; | ||
| 388 | - text-align: center; | ||
| 389 | -} | ||
| 390 | 389 | ||
| 391 | -.commnets-resultwrapper { | ||
| 392 | - display: none; | ||
| 393 | -} | 390 | + .commnets-resultwrapper { |
| 391 | + display: none; | ||
| 392 | + } | ||
| 394 | 393 | ||
| 395 | -.comments-list{ | ||
| 396 | - li{ | ||
| 397 | - margin: 14px 0 0; | ||
| 398 | - padding: 0 0 15px; | ||
| 399 | - border-bottom: 1px dotted #e7e7e7; | ||
| 400 | - .avatar{ | ||
| 401 | - float: left; | ||
| 402 | - width: 40px; | ||
| 403 | - height: 40px; | ||
| 404 | - overflow: hidden; | ||
| 405 | - img{ | ||
| 406 | - display: block; | ||
| 407 | - width: 100%; | ||
| 408 | - height: 100%; | ||
| 409 | - border-radius: 50%; | ||
| 410 | - } | ||
| 411 | - } | ||
| 412 | - .comment-info{ | ||
| 413 | - float: left; | ||
| 414 | - width: 774px; | ||
| 415 | - margin: 0 0 0 16px; | ||
| 416 | - .comment-user-name{ | ||
| 417 | - color: #c11e00; | ||
| 418 | - font-size: 15px; | ||
| 419 | - line-height: 15px; | ||
| 420 | - } | ||
| 421 | - .comment-content{ | ||
| 422 | - margin-top: 10px; | ||
| 423 | - line-height: 16px; | ||
| 424 | - font-size: 12px; | ||
| 425 | - word-wrap:break-word; | 394 | + .comments-list{ |
| 395 | + li{ | ||
| 396 | + margin: 14px 0 0; | ||
| 397 | + padding: 0 0 15px; | ||
| 398 | + border-bottom: 1px dotted #e7e7e7; | ||
| 399 | + .avatar{ | ||
| 400 | + float: left; | ||
| 401 | + width: 40px; | ||
| 402 | + height: 40px; | ||
| 403 | + overflow: hidden; | ||
| 404 | + img{ | ||
| 405 | + display: block; | ||
| 406 | + width: 100%; | ||
| 407 | + height: 100%; | ||
| 408 | + border-radius: 50%; | ||
| 409 | + } | ||
| 426 | } | 410 | } |
| 427 | - .comment-time{ | ||
| 428 | - margin: 10px 0 0 0; | ||
| 429 | - color: #c8c8c8; | ||
| 430 | - font-size: 12px; | ||
| 431 | - line-height: 12px; | ||
| 432 | - clear: both; | 411 | + .comment-info{ |
| 412 | + float: left; | ||
| 413 | + width: 774px; | ||
| 414 | + margin: 0 0 0 16px; | ||
| 415 | + .comment-user-name{ | ||
| 416 | + color: #c11e00; | ||
| 417 | + font-size: 15px; | ||
| 418 | + line-height: 15px; | ||
| 419 | + } | ||
| 420 | + .comment-content{ | ||
| 421 | + margin-top: 10px; | ||
| 422 | + line-height: 16px; | ||
| 423 | + font-size: 12px; | ||
| 424 | + word-wrap:break-word; | ||
| 425 | + } | ||
| 426 | + .comment-time{ | ||
| 427 | + margin: 10px 0 0 0; | ||
| 428 | + color: #c8c8c8; | ||
| 429 | + font-size: 12px; | ||
| 430 | + line-height: 12px; | ||
| 431 | + clear: both; | ||
| 432 | + } | ||
| 433 | } | 433 | } |
| 434 | - } | ||
| 435 | 434 | ||
| 435 | + } | ||
| 436 | } | 436 | } |
| 437 | -} | ||
| 438 | 437 | ||
| 439 | 438 | ||
| 440 | -.brand { | ||
| 441 | - margin-right: 22px; | ||
| 442 | - margin-bottom: 20px; | ||
| 443 | - float: left; | ||
| 444 | - | ||
| 445 | - .thumb { | ||
| 446 | - display: table-cell; | ||
| 447 | - border: 1px solid #f5f5f5; | ||
| 448 | - height: 120px; | ||
| 449 | - width: 120px; | ||
| 450 | - box-sizing: border-box; | ||
| 451 | - text-align: center; | ||
| 452 | - vertical-align: middle; | 439 | + .brand { |
| 440 | + margin-right: 22px; | ||
| 441 | + margin-bottom: 20px; | ||
| 442 | + float: left; | ||
| 453 | 443 | ||
| 454 | - img { | ||
| 455 | - display: block; | ||
| 456 | - max-width: 120px; | ||
| 457 | - max-height: 120px; | ||
| 458 | - margin: 0 auto; | 444 | + .thumb { |
| 445 | + display: table-cell; | ||
| 446 | + border: 1px solid #f5f5f5; | ||
| 447 | + height: 120px; | ||
| 448 | + width: 120px; | ||
| 449 | + box-sizing: border-box; | ||
| 450 | + text-align: center; | ||
| 451 | + vertical-align: middle; | ||
| 452 | + | ||
| 453 | + img { | ||
| 454 | + display: block; | ||
| 455 | + max-width: 120px; | ||
| 456 | + max-height: 120px; | ||
| 457 | + margin: 0 auto; | ||
| 458 | + } | ||
| 459 | + | ||
| 459 | } | 460 | } |
| 460 | 461 | ||
| 462 | + .brand-name { | ||
| 463 | + width: 120px; | ||
| 464 | + font-size: 13px; | ||
| 465 | + line-height: 20px; | ||
| 466 | + overflow: hidden; | ||
| 467 | + white-space: nowrap; | ||
| 468 | + text-overflow: ellipsis; | ||
| 469 | + text-align: center; | ||
| 470 | + color: #333; | ||
| 471 | + } | ||
| 461 | } | 472 | } |
| 462 | - | ||
| 463 | - .brand-name { | ||
| 464 | - width: 120px; | ||
| 465 | - font-size: 13px; | ||
| 466 | - line-height: 20px; | ||
| 467 | - overflow: hidden; | ||
| 468 | - white-space: nowrap; | ||
| 469 | - text-overflow: ellipsis; | ||
| 470 | - text-align: center; | ||
| 471 | - color: #333; | ||
| 472 | - } | ||
| 473 | -} | ||
| 474 | 473 | ||
| 475 | -$commodityWidth: 192px; | 474 | + $commodityWidth: 192px; |
| 476 | 475 | ||
| 477 | -.good-info { | ||
| 478 | - width: $commodityWidth; | ||
| 479 | - height: 325px; | ||
| 480 | - margin-right: 20px; | ||
| 481 | - margin-bottom: 20px; | ||
| 482 | -} | 476 | + .good-info { |
| 477 | + width: $commodityWidth; | ||
| 478 | + height: 325px; | ||
| 479 | + margin-right: 20px; | ||
| 480 | + margin-bottom: 20px; | ||
| 481 | + } | ||
| 483 | 482 | ||
| 484 | -.share-to .share-a { | ||
| 485 | - width: 16px; | ||
| 486 | - height: 16px; | ||
| 487 | - display: inline-block; | ||
| 488 | - vertical-align: top; | ||
| 489 | - margin: 0 2px 0 3px; | ||
| 490 | - cursor: pointer; | ||
| 491 | -} | 483 | + .share-to .share-a { |
| 484 | + width: 16px; | ||
| 485 | + height: 16px; | ||
| 486 | + display: inline-block; | ||
| 487 | + vertical-align: top; | ||
| 488 | + margin: 0 2px 0 3px; | ||
| 489 | + cursor: pointer; | ||
| 490 | + } | ||
| 492 | 491 | ||
| 493 | -.share-to .share-sina { | ||
| 494 | - background: image-url('guang/detail/icon-share.png') no-repeat 0 0; | ||
| 495 | -} | 492 | + .share-to .share-sina { |
| 493 | + background: image-url('guang/detail/icon-share.png') no-repeat 0 0; | ||
| 494 | + } | ||
| 496 | 495 | ||
| 497 | -.share-to .share-weixin { | ||
| 498 | - background: image-url('guang/detail/icon-share.png') no-repeat 0 -96px; | ||
| 499 | -} | 496 | + .share-to .share-weixin { |
| 497 | + background: image-url('guang/detail/icon-share.png') no-repeat 0 -96px; | ||
| 498 | + } | ||
| 500 | 499 | ||
| 501 | -.share-to .share-tencent { | ||
| 502 | - background: image-url('guang/detail/icon-share.png') no-repeat 0 -16px; | ||
| 503 | -} | 500 | + .share-to .share-tencent { |
| 501 | + background: image-url('guang/detail/icon-share.png') no-repeat 0 -16px; | ||
| 502 | + } | ||
| 504 | 503 | ||
| 505 | -.share-to .share-renren { | ||
| 506 | - background: image-url('guang/detail/icon-share.png') no-repeat 0 -32px; | ||
| 507 | -} | 504 | + .share-to .share-renren { |
| 505 | + background: image-url('guang/detail/icon-share.png') no-repeat 0 -32px; | ||
| 506 | + } | ||
| 508 | 507 | ||
| 509 | -.share-to .share-qzone { | ||
| 510 | - background: image-url('guang/detail/icon-share.png') no-repeat 0 -48px; | ||
| 511 | -} | 508 | + .share-to .share-qzone { |
| 509 | + background: image-url('guang/detail/icon-share.png') no-repeat 0 -48px; | ||
| 510 | + } | ||
| 512 | 511 | ||
| 513 | -.share-to .share-qq { | ||
| 514 | - background: image-url('guang/detail/icon-share.png') no-repeat 0 -64px; | ||
| 515 | -} | 512 | + .share-to .share-qq { |
| 513 | + background: image-url('guang/detail/icon-share.png') no-repeat 0 -64px; | ||
| 514 | + } | ||
| 515 | + | ||
| 516 | + .share-to .share-douban { | ||
| 517 | + background: image-url('guang/detail/icon-share.png') no-repeat 0 -80px; | ||
| 518 | + } | ||
| 516 | 519 | ||
| 517 | -.share-to .share-douban { | ||
| 518 | - background: image-url('guang/detail/icon-share.png') no-repeat 0 -80px; | 520 | + /* weixin share start */ |
| 521 | + .shareWeixin{width:282px;height:302px;position:absolute;padding-top:9px;text-align: center;font-family: Microsoft Yahei, Arial, Verdana;top: 22px;right: -3px;display:none;z-index:2;} | ||
| 522 | + .shareWeixin em, .shareWeixin em i{width: 0;height: 0;font-size: 0;position: absolute;border-width:0 10px 9px;border-style:dashed dashed solid;} | ||
| 523 | + .shareWeixin em{border-color:transparent transparent #d6d6d6;top: 0px;left: 50%;margin-left: -10px;} | ||
| 524 | + .shareWeixin em i{border-color:transparent transparent #e8e8e8;overflow:hidden;top: 1px;left: -10px;} | ||
| 525 | + .shareWeixin .con{width:280px;height:300px;overflow:hidden;background-color: #FFFFFF;border:1px solid #d6d6d6;box-shadow: 0px 2px 4px #d1d1d1;position:relative;} | ||
| 526 | + .shareWeixin h2{height:46px;line-height: 46px;background-color: #e8e8e8;color:#000000;font-size: 18px;display: block;} | ||
| 527 | + .shareWeixin p.pic, .shareWeixin p.pic img{width:168px;height:168px;} | ||
| 528 | + .shareWeixin p.pic{overflow:hidden;margin:16px auto;} | ||
| 529 | + .shareWeixin p.w{font-size: 13px;color:#9f9f9f;line-height: 20px;} | ||
| 530 | + .shareWeixin a.close{width:45px;height:45px;line-height:45px;overflow:hidden;position: absolute;top: 9px;right: 0;font-size: 16px;color: #999999;} | ||
| 531 | + /* weixin share end */ | ||
| 519 | } | 532 | } |
| 520 | 533 | ||
| 521 | -/* weixin share start */ | ||
| 522 | -.shareWeixin{width:282px;height:302px;position:absolute;padding-top:9px;text-align: center;font-family: Microsoft Yahei, Arial, Verdana;top: 22px;right: -3px;display:none;z-index:2;} | ||
| 523 | -.shareWeixin em, .shareWeixin em i{width: 0;height: 0;font-size: 0;position: absolute;border-width:0 10px 9px;border-style:dashed dashed solid;} | ||
| 524 | -.shareWeixin em{border-color:transparent transparent #d6d6d6;top: 0px;left: 50%;margin-left: -10px;} | ||
| 525 | -.shareWeixin em i{border-color:transparent transparent #e8e8e8;overflow:hidden;top: 1px;left: -10px;} | ||
| 526 | -.shareWeixin .con{width:280px;height:300px;overflow:hidden;background-color: #FFFFFF;border:1px solid #d6d6d6;box-shadow: 0px 2px 4px #d1d1d1;position:relative;} | ||
| 527 | -.shareWeixin h2{height:46px;line-height: 46px;background-color: #e8e8e8;color:#000000;font-size: 18px;display: block;} | ||
| 528 | -.shareWeixin p.pic, .shareWeixin p.pic img{width:168px;height:168px;} | ||
| 529 | -.shareWeixin p.pic{overflow:hidden;margin:16px auto;} | ||
| 530 | -.shareWeixin p.w{font-size: 13px;color:#9f9f9f;line-height: 20px;} | ||
| 531 | -.shareWeixin a.close{width:45px;height:45px;line-height:45px;overflow:hidden;position: absolute;top: 9px;right: 0;font-size: 16px;color: #999999;} | ||
| 532 | -/* weixin share end */ |
-
Please register or login to post a comment