.pic { padding-top: 75%; position: relative; overflow: hidden; } .pic::before { position: absolute; top: 0; left: -90%; z-index: 2; display: block; content: ""; width: 50%; height: 100%; opacity: .25; pointer-events: none; /* background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 53) 100%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .53) 100%); */ background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 53) 50%, rgba(255, 255, 255, 0) 70%); background: linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 53) 50%, rgba(255, 255, 255, 0) 70%); -webkit-transform: skewX(-25deg); -ms-transform: skewX(-25deg); transform: skewX(-25deg); z-index: 3; } .pic img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: all 1s; } a:hover .pic img { transform: scale(1.05); } a:hover .pic:before { -webkit-animation: shine 1s; animation: shine 1s } @-webkit-keyframes shine { 100% { left: 125% } } @keyframes shine { 100% { left: 125% } } .pic div { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; height: 100%; transition: all .8s; background-repeat: no-repeat; background-position: center center; background-size: cover; } a:hover .pic div { width: 110%; height: 110%; } .szlist ul { display: flex; flex-wrap: wrap; margin: 0 -.15rem; } .szlist ul li { width: 50%; margin-top: .33rem; } .szlist ul li a { margin: 0 .15rem; display: flex; padding: .2rem .18rem; transition: all .5s; min-height: 100%; position: relative; z-index: 1; background: #FAF8F6; transition: all .5s; } .szlist ul li a::before {} .szlist ul li a .pics { width: 1.72rem; margin-right: .13rem; border: 1px solid #EBEBEB; } .szlist ul li a .pics .pic { padding-top: 142%; } .szlist ul li a .info { flex: 1; min-width: 0; padding-top: .2rem; position: relative; } .szlist ul li a .info:after { content: ""; position: absolute; right: 0; bottom: 0; background: url(../images/new-szdw-arr.png) no-repeat; background-position: center center; background-size: 100% 100%; width: 0.47rem; height: 0.36rem; transition: all .5s; } .szlist ul li a .info h3 { display: flex; /* align-items: flex-end; */ } .szlist ul li a .info h3 b { font-family: SourceHanSerifCN-Bold; font-size: 0.2rem; font-weight: normal; font-stretch: normal; line-height: 0.29rem; letter-spacing: 0rem; color: #111111; min-width: 60px; } .szlist ul li a .info h3 span { font-size: 0.16rem; font-weight: normal; line-height: 0.24rem; letter-spacing: normal; color: #666666; margin-left: 0.05rem; padding-top: .05rem; } .szlist ul li a .info dl { display: flex; font-size: 0.16rem; font-weight: normal; font-stretch: normal; line-height: 0.24rem; letter-spacing: 0rem; color: #999; margin-top: .15rem; } .szlist ul li a .info dl dt { color: #9B484C } .szlist ul li a .info dl dd { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; flex: 1; min-width: 0; color: #999999; } .szlist ul li a:hover { background: #ffffff; box-shadow: 0rem 0rem 0.1rem 0rem rgba(231, 104, 104, 0.2); } .szlist ul li a:hover::before { opacity: 1 } .szlist ul li a:hover dl dt { color: #9B0D14; } .szlist ul li a:hover dl dd { color: #666666; } .szlist ul li a:hover .info:after { background: url(../images/new-szdw-arr2.png) no-repeat; background-position: center center; background-size: 100% 100%; } .szlist ul li a:hover {} .search-filt {} .search-filt>div { overflow: hidden; display: flex; } .search-filt>div+div { margin-top: .26rem; } .search-filt>div>span { margin-right: .3rem; /* width: 1.57rem; */ text-align: right; font-family: SourceHanSerifCN-Bold; font-size: 0.18rem; font-weight: normal; font-stretch: normal; line-height: 0.3rem; letter-spacing: 0rem; color: #333; } .search-filt>div ul { overflow: hidden; flex: 1; } .search-filt>div ul li { float: left; font-size: .16rem; line-height: .3rem; margin-right: .2rem; margin-bottom: .2rem; } .search-filt>div ul li a { display: block; padding: 0.05rem .14rem; color: #333333; border-radius: 0.2rem; background: #F4EFEC; } .search-filt>div ul li.on a { color: #fff !important; background-color: #9B0D14 !important; } .search-filt>div.zm ul li { margin-right: .05rem; } .search-filt>div.zm ul li a { text-align: center; background: none; } .search-filt>div .engz .dyg { width: 60px; height: 40px; } .search-filt>div.zm ul li:nth-child(1) { width: auto; } .search-filt>div.zm ul li:nth-child(1) a {} @media screen and (max-width: 1024px) { .szdw ul li { margin-top: .25rem } .szdw ul li a { display: block } .szlist ul { margin: 0 -.1rem } .szdw ul li a { } .szdw ul li a .pics { margin: 0 auto } .search-filt { } .search-filt>div { display: block; } .search-filt>div>span { display: block; margin-right: 0; margin-bottom: .1rem; width: auto; text-align: left; font-size: .3rem; line-height: .4rem; } .search-filt>div ul li a { font-size: .24rem; padding: .1rem .15rem; } .search-filt>div ul li { font-size: .16rem; } .search-filt>div ul li { margin-bottom: .1rem; margin-top: 0; } .szlist ul li a .info{ padding-bottom: .3rem; } .szlist ul li a .info h3 b{ font-size: .3rem; line-height: .3rem; } .szlist ul li a .info h3 span{ font-size: .24rem; line-height: .34rem; } .szlist ul li a .info dl{ font-size: .24rem; line-height: .34rem; } .szlist ul li a .info dl dt,.szlist ul li a .info dl dd{ font-size: .24rem; line-height: .34rem; } } @media screen and (max-width: 768px) { .szlist ul li { width: 100% } .szlist ul li a { padding: .15rem .1rem } .szlist ul li a .info h3 { justify-content: center } .search-filt>div .engz li a { width: 25px !important; height: 25px !important; line-height: 15px !important; border-radius: 50% !important; } .search-filt>div .engz li .on{ color: #fff !important; background-color: #9B0D14 !important; border-radius: 16%; } .search-filt>div .engz .dyg { width: 50px !important; height: 25px !important; } }