.culture-swiper, swiper, .swiper-img{ width: 100%; height: 850rpx; } .culture-swiper{ position: relative; } .prev{ width: 60rpx; height: 100rpx; position: absolute; top: 50%; left: 0rpx; transform: translate(0, -50%); background-color: rgba(0, 0, 0, 0.5); border-top-right-radius: 100rpx; border-bottom-right-radius: 100rpx; display: flex; justify-content: center; align-items: center; } .next image, .prev image{ width: 30rpx; height: 30rpx; } .next{ width: 60rpx; height: 100rpx; position: absolute; top: 50%; right: 0rpx; transform: translate(0, -50%); background-color: rgba(0, 0, 0, 0.5); border-top-left-radius: 100rpx; border-bottom-left-radius: 100rpx; display: flex; justify-content: center; align-items: center; } .culture{ position: absolute; top: 800rpx; left: 0; right: 0; border-radius:31rpx 31rpx 0px 0px; background: #fff; margin-bottom: 120rpx; } .culture-title{ padding: 30rpx; border-bottom: 3px solid #FBFBFB; font-size: 34rpx; color: #242424; } .culture-info{ padding: 20rpx 30rpx; border-bottom: 3px solid #FBFBFB; } .row{ display: flex; } .info{ flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 26rpx; color: #242424; padding-right: 10rpx; line-height: 50rpx; } .info text{ color: #BBBBBB; } .part{ padding: 30rpx; border-bottom: 3px solid #FBFBFB; } .part-title{ font-size: 32rpx; border-left: 3px solid #9F1512; padding-left: 10rpx; margin-bottom: 20rpx; } .part-content{ font-size: 26rpx; line-height: 40rpx; color: #5F5F5F; } .sign-box{ position: fixed; bottom: 0; left: 0; right: 0; box-shadow:0px 0px 17px 0px rgba(0,0,0,0.1); height: 120rpx; padding: 20rpx 30rpx; box-sizing: border-box; background: #fff; } .sign-btn{ width: 100%; height: 100%; background: #9F1512; border-radius: 10rpx; display: flex; justify-content: center; align-items: center; font-size: 30rpx; color: #fff; }