123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255 |
- .contImg {
- width: 1200px;
- margin: 0 auto;
- }
- .title {
- font-size: 24px;
- color: #333333;
- }
- body {
- background: #fff
- }
- .contImg ul li {
- width: 220px;
- margin-left: 22px;
- float: left;
- box-shadow: 0 0 10px #ccc;
- margin-bottom: 15px;
- }
- .contImg ul li div:nth-child(1) {
- width: 100%;
- position: relative;
- height: 220px;
- z-index: 11;
- cursor: pointer;
- background: url(../../img/fac/videoBj_03.jpg)no-repeat;
- background-size: 100% 100%;
- }
- .contImg ul li:nth-child(5n+1) {
- margin-left: 0;
- }
- .contImg ul li img {
- display: inline-block;
- width: 100%;
- height: 100%;
- position: absolute;
- z-index: 22;
- left: 0;
- top: 0;
- }
- .contImg ul li h3 {
- padding: 0 10px;
- font-size: 16px;
- color: #333333;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- -o-text-overflow: ellipsis;
- }
- .contImg ul li p {
- width: 100%;
- height: 20px;
- line-height: 20px;
- padding: 0 10px;
- font-size: 14px;
- color: #333333;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- -o-text-overflow: ellipsis;
- margin-bottom: 15px;
- }
- .contImg ul li .videoImg {
- position: absolute;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, .5);
- }
- .contImg ul li .videoImg span {
- width: 80px;
- height: 80px;
- background: #000;
- display: inline-block;
- position: absolute;
- left: 50%;
- top: 50%;
- margin-left: -40px;
- margin-top: -40px;
- border: 2px solid #000;
- border-radius: 50%;
- transition: all .2s ease-in
- }
- .contImg ul li .videoImg span::before {
- content: '| |';
- position: absolute;
- font-weight: 800;
- font-size: 20px;
- color: #fff;
- left: 50%;
- top: 50%;
- margin-top: -15px;
- margin-left: -10px;
- }
- .contImg ul li:hover .videoImg span {
- animation: move 1s ease-in-out 0s 1 alternate forwards;
- }
- @keyframes move {
- 0% {
- transform: scale(1.0) rotate(0deg) ;
- }
- 100% {
- transform: scale(1.2) rotate(360deg);
- }
- }
- .videoPlay {
- position: fixed;
- z-index: 999999999;
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- background: rgba(0, 0, 0, .3);
- display: none
- }
- .videoPlay.active {
- display: block
- }
- .videoPlay .videoTopM {
- width: 1200px;
- height: 500px;
- background: #000;
- position: absolute;
- left: 50%;
- top: 50%;
- z-index: 9999999991;
- margin-left: -600px;
- margin-top: -250px;
- }
- .videoPlay .videoTopM #videoAt {
- width: 100%;
- height: 500px;
- background: #000
- }
- .videoPlay .videoTopM #videoAt source {
- height: 100%;
- width: 100%;
- }
- .videoPlay .videoTopM .glyphicon-remove {
- font-size: 30px;
- color: #fff;
- position: absolute;
- right: 15px;
- top: 15px;
- z-index: 9999999992;
- cursor: pointer;
- }
- .videoPlay .videoTopM .glyphicon-remove:hover {
- color: #f00;
- }
- .videoPlay .videoTopM .videoPre {
- cursor: pointer;
- font-size: 20px;
- color: #fff;
- position: absolute;
- left: 15px;
- top: 50%;
- z-index: 9999999992;
- margin-top: -18px;
- border: 1px solid #fff;
- border-radius:2px;
- width: 120px;
- height: 36px;
- line-height: 34px;
- display: inline-block;
- text-align: center;
- }
- .videoPlay .videoTopM .videoNext {
- cursor: pointer;
- font-size: 20px;
- color: #fff;
- position: absolute;
- right: 15px;
- top: 50%;
- height: 36px;
- line-height: 34px;
- width: 120px;
- margin-top: -18px;
- text-align: center;
- display: inline-block;
- z-index: 9999999992;
- border: 1px solid #fff;
- border-radius: 2px;
- }
- .videoPlay .videoTopM .videoNext:hover,
- .videoPlay .videoTopM .videoPre:hover {
- background: #fff;
- box-shadow: 0 0 4px #ccc;
- color: #333333;
- }
- .noLength {
- background: url(../../img/all_nullVideo.png)no-repeat;
- }
- .pub_fix {
- z-index: 9999;
- }
- video::-internal-media-controls-download-button {
- display: none;
- }
- a:hover,a,a:focus{
- text-decoration: none;
- outline: none;
- }
- video::-webkit-media-controls-enclosure {
- overflow: hidden;
- }
- video::-webkit-media-controls-panel {
- width: calc(100% +30px);
- }
- .inp{
- height: 34px;
- display: inline-block;
- overflow: hidden;
- margin: 20px 0;
- }
- .inp input {
- float: left;
- height: 34px;
- }
- .pagination_box .inp button{
- float: right;
- margin-top: 0;
- }
- footer #bottom {
- display: none;
- }
|