.culture-swiper, swiper, .swiper-img{ width: 100%; height: 480rpx; } .swiper-img{ height: 440rpx; border-radius: 40rpx; } .culture-swiper{ padding: 20rpx; border-radius: 40rpx; overflow: hidden; box-sizing: border-box; } .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{ border-radius:31rpx 31rpx 0px 0px; background: #fff; } .culture-title{ padding: 20rpx; font-size: 34rpx; color: #122939; font-weight: bold; } .culture-info{ padding: 0 30rpx 20rpx; } .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 image{ width: 22rpx; height: 22rpx; margin-right: 10rpx; } .info text{ color: #999; } .part{ padding: 20rpx; } .part-title{ font-size: 32rpx; margin-bottom: 20rpx; color: #122939; font-weight: bold; } .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; } .library-person { background: #FFFFFF; box-shadow: 0px 2px 8px 0px rgba(35, 24, 21, 0.1); border-radius: 12rpx; margin-bottom: 20rpx; padding-bottom: 20rpx; } .library-person:last-child { border-bottom: none; } .person-info{ display: flex; } .person-info image.man{ width: 20rpx; height: 20rpx; margin-top: 15rpx; } .person-info image.woman{ width: 16rpx; height: 24rpx; margin-top: 13rpx; } .person-number{ width: 130rpx; height: 50rpx; text-align: center; line-height: 50rpx; color: #fff; font-size: 26rpx; background: linear-gradient(90deg, rgba(21, 113, 250, 0.97), rgba(21, 183, 250, 0.97)); border-top-left-radius: 12rpx; border-bottom-right-radius: 28rpx; margin-right: 20rpx; } .person-name{ line-height: 50rpx; font-size: 28rpx; color: #122939; font-weight: bold; margin-right: 20rpx; } .person-birth{ flex: 1; font-size: 26rpx; padding: 0 15rpx; color: #333; } .person-birth text{ color: #999; }