.swiper-item-img { width: 100%; } .top-swiper { animation: fadein 5s infinite; background-color: rgba(0,0,0,.6); border-radius: 3.733vw; box-sizing: border-box; color: #fff; font-size: 2.933vw; height: 7.467vw; left: 4vw; opacity: 0; padding: 0 .8vw; position: fixed; top: 10.667vw; width: 50.667vw; z-index: 5; } @-webkit-keyframes fadein { 0% { opacity: 0; } 10% { opacity: 1; } 70% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } } @keyframes fadein { 0% { opacity: 0; } 10% { opacity: 1; } 70% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; } } .swperitem { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .top-swiper swiper-item { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .top-swiper .avatar { border-radius: 50%; height: 6.4vw; margin-right: 2.667vw; width: 6.4vw; } .top-swiper .txt { -webkit-box-flex: 1; -webkit-box-orient: vertical; -webkit-line-clamp: 1; display: -webkit-box; flex: 1; height: 4.533vw; line-height: 4.533vw; overflow: hidden; padding-right: 2.667vw; text-overflow: ellipsis; word-break: break-all; } .fade-in { opacity: 1; } .header .like { -webkit-box-pack: center; -ms-flex-pack: center; background-color: rgba(42,42,42,.7); border-radius: 3.333vw 0 0 3.333vw; font-size: 3.2vw; height: 6.667vw; justify-content: center; position: absolute; right: 0; text-align: center; top: 81%; width: 24vw; z-index: 5; } .header .like,.type-bar { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .type-bar { -webkit-box-pack: justify; -ms-flex-pack: justify; background: rgba(6,162,179,.1); font-size: 3.733vw; height: 12.8vw; justify-content: space-between; line-height: 5.333vw; } .type-bar .lt { background: #06a2b3; border-radius: 0 1.6vw 1.6vw 0; color: #fff; height: 100%; padding-left: 4vw; width: 70.4vw; } .type-bar .lt .info-price { -webkit-box-align: center; -ms-flex-align: center; align-items: center; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-wrap: wrap; height: 100%; width: 60vw; } .type-bar .lt .count { display: inline-block; font-family: DIN; } .type-bar .lt .discount { display: inline-block; font-size: 3.467vw; font-weight: 500; } .type-bar .lt .discount .doller { display: inline-block; font-size: 4vw; } .type-bar .lt .discount ._price_free,.type-bar .lt .discount .now { display: inline-block; font-size: 6.667vw; } .type-bar .lt .discount .is-qi { display: inline-block; font-size: 2.667vw; } .type-bar .lt .original { display: inline-block; font-size: 3.2vw; height: 4vw; margin-left: 1.867vw; text-decoration: line-through; } .type-bar .rt { color: #2a2a2a; font-size: 2.667vw; line-height: 4vw; text-align: center; width: 29.6vw; } .type-bar .rt .time { font-size: 18rpx; } .countdown { display: inline-block; vertical-align: top; } .time-item { font-family: DIN; margin-left: .533vw; margin-right: .533vw; } .type-bar .rt .time-item { background: #06a2b3; border-radius: .933vw; color: #fff; display: inline-block; height: 4.8vw; line-height: 4.8vw; padding: 0 .8vw; width: 3vw; } .type-bar .rt .day { display: inline-block; margin-right: .2rem; } .separator { display: inline; }