.swiper-box, .swiper-img, swiper{ width: 100%; height: 330rpx; } .tab{ padding: 30rpx; display: flex; border-bottom: 5px solid #FBFBFB; flex-wrap: nowrap; overflow-x: scroll; } .tab-box{ flex-shrink: 0; text-align: center; width: 25%; } .tab-box image{ width: 65rpx; height: 65rpx; } .tab-title{ font-size: 28rpx; } .recommend{ padding: 30rpx; border-bottom: 5px solid #FBFBFB; } .recommend-container{ width: 100%; display: flex; overflow-x: auto; } .recommend-box{ flex-shrink: 0; width: 220rpx; height: 130rpx; border-radius: 10rpx; overflow: hidden; position: relative; margin-right: 30rpx; } .recommend-box image{ width: 100%; height: 100%; } .public-title{ text-align: center; } .title-text{ display: inline-block; font-size: 32rpx; color: #9F1512; padding: 0 20rpx 0; position: relative; margin-bottom: 15rpx; } .title-text image{ position: absolute; top: 0; width: 15rpx; height: 100%; } .selected-l{ left: 0; } .selected-r{ right: 0; } .news{ padding: 30rpx; border-bottom: 5px solid #FBFBFB; } .news-box{ padding: 30rpx 0; border-bottom: 1px solid #EBEBEB; display: flex; flex-direction: column; } .news-title{ color: #242424; font-size: 30rpx; font-weight: bold; } .news-info{ color: #949494; margin-top: 15rpx; font-size: 24rpx; } .news-info text{ margin-right: 20rpx; } .news-big-pic, .news-small-pic{ margin-top: 10rpx; } .news-big-pic image{ width: 100%; } .news-small-pic image{ width: 30%; height: 150rpx; margin-right: 20rpx; } .transverse-news{ flex-direction: row; justify-content: space-between; } .news-row-img{ width: 30%; height: 150rpx; } .news-row-img image{ width: 100%; height: 100%; } .news-row-info{ width: 68%; } .broadcast{ margin-top: 15rpx; padding: 0 30rpx; } .broadcast-container{ display: flex; justify-content: space-between; flex-wrap: wrap; } .broadcast-box{ flex-shrink: 0; width: 49%; border-radius: 10rpx; overflow: hidden; height: 185rpx; margin-bottom: 15rpx; position: relative; } .broadcast-box image{ width: 100%; height: 100%; } .broadcast-text{ position: absolute; left: 0; right: 0; bottom: 0; padding: 5rpx 10rpx; font-size: 26rpx; background: rgba(0,0,0,0.6); color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .broadcast-status{ position: absolute; top: 10rpx; right: 10rpx; padding: 5rpx; background: #9F1512; color: #fff; font-size: 26rpx; border-radius: 10rpx; } .set-phone{ position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .6); z-index: 100; } .set-phone-box{ width: 96%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border-radius: 10rpx; padding: 30rpx; box-sizing: border-box; } .tips{ font-size: 28rpx; color: #000; } .phone-input{ margin: 25rpx 0; } .code-input{ display: flex; justify-content: space-between; margin-bottom: 25rpx; } .code-input input{ width: 70%; height: 55rpx; border: 1px solid #dedede; border-radius: 10rpx; padding: 0 10rpx; box-sizing: border-box; font-size: 28rpx; } .phone-input input{ width: 100%; height: 55rpx; border: 1px solid #dedede; border-radius: 10rpx; padding: 0 10rpx; box-sizing: border-box; font-size: 28rpx; } .get-code, .got-code{ font-size: 28rpx; background: rgba(159,21,18,.1); color: #9F1512; width: 28%; line-height: 55rpx; text-align: center; border-radius: 10rpx; } .got-code{ background: #fff; color: #4a4d52; border: 1px solid #eaeaea; } .set-phone-btn-box{ display: flex; justify-content: space-between; } .set-phone-btn{ width: 100%; height: 65rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #fff; background: #9F1512; border-radius: 10rpx; } .voice-box{ padding-right: 30px; position: relative; } .voice-box iamge{ position: absolute; top: 0; right: 0; width:25rpx; height: 25rpx; } .news-big-pic{ position: relative; } .news-big-pic image.play-btn{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80rpx; height: 80rpx; }