.content { width: 100%; } .content .navigation { width: 1200px; margin: 0 auto; margin-top: 22px; } .content .navigation .title { width: 100%; height: 29px; } .content .navigation .title .tb { float: left; } .content .navigation .title .xskt { float: left; font-size: 24px; margin-left: 10px; line-height: 29px; } .content .photo { width: 1200px; margin: 0 auto; margin-top: 23px; } .content .photo .pt-line { width: 1240px; margin-top: 16px; } .content .photo .pt-line .pt-sola { width: 286px; height: 290px; margin-right: 19px; border-radius: 4px; border: 1px solid #e8e8e8; float: left; margin-bottom: 15px; } .content .photo .pt-line .pt-sola:hover .hover-block { height: 100%; } .content .photo .pt-line .pt-sola .img { width: 286px; height: 199px; overflow: hidden; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; transition: all 0.5s ease-out; position: relative; } .content .photo .pt-line .pt-sola .img .p-o { width: 286px; height: 199px; } .content .photo .pt-line .pt-sola .img .label { position: absolute; left: 0; top: 0; padding: 4px 15px; background-color: #ea6a6a; color: #fff; -webkit-border-radius: 0 0 5px 0; -moz-border-radius: 0 0 5px 0; border-radius: 0 0 5px 0; } .content .photo .pt-line .pt-sola .hover-block { width: 100%; height: 0; position: absolute; top: 0; left: 0; text-align: center; overflow: hidden; -webkit-transition: all 0.4s ease-out; -moz-transition: all 0.4s ease-out; transition: all 0.4s ease-out; } .content .photo .pt-line .pt-sola .hover-block .mask { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: #000; opacity: 0.5; filter: alpha(opacity=50); } .content .photo .pt-line .pt-sola .hover-block .btn-normal { width: 120px; height: 40px; line-height: 40px; position: relative; z-index: 9; margin-top: 80px; } .content .photo .pt-line .pt-sola .bth { margin-top: 7px; margin-left: 14px; } .content .photo .pt-line .pt-sola .bth .zt { font-size: 16px; width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .content .photo .pt-line .pt-sola .hb { margin-top: 7px; margin-left: 13px; } .content .photo .pt-line .pt-sola .hb .hb-head { width: 18px; height: 18px; float: left; border-radius: 100%; } .content .photo .pt-line .pt-sola .hb .name { color: #666; font-size: 14px; line-height: 18px; float: left; margin-left: 6px; width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .content .photo .pt-line .pt-sola .hb .da { float: right; font-size: 12px; color: #999; margin-right: 15px; } .content .photo .pt-line .bth .db { float: right; font-size: 14px; color: #fff; text-decoration: none; } .content .photo .pt-line .bth .db .status { border-radius: 4px; padding: 0 8px 0 8px; } .content .photo .pt-line .bth .db .status0{ background-color: #5a9fd9; } .content .photo .pt-line .bth .db .status1{ background-color: #ECBD1C; } .content .photo .pt-line .bth .db .status2{ background-color: grey; }