.index-content-other.data-v-7e18bee5 { width: calc(100% - 170rpx); height: 100%; transition: opacity 1s ease; position: relative; } .index-content-down.data-v-7e18bee5 { width: calc(100% - 60rpx); height: 100rpx; display: flex; justify-content: flex-end; align-items: center; } .index-content-right.data-v-7e18bee5 { height: calc(100% - 30rpx); width: 100%; display: flex; flex-direction: column; position: relative; } .big-ball.data-v-7e18bee5 { width: 200rpx; height: 200rpx; position: absolute; top: 50%; left: -55rpx; transform: translateY(-50%); border-radius: 50%; background-color: #dbe4f6; } .big-ball .ball.data-v-7e18bee5 { width: 150rpx; height: 150rpx; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; background-color: #cfddf1; } .tab.data-v-7e18bee5 { width: 200rpx; height: 120rpx; font-size: 32rpx; display: flex; justify-content: center; align-items: center; position: relative; } .tab .tab-heng.data-v-7e18bee5 { position: absolute; left: 50%; bottom: 35rpx; transform: translateX(-50%); width: 50rpx; height: 12rpx; border-radius: 10rpx; background-color: #00B4FF; } .scroll-box.data-v-7e18bee5 { display: flex; flex-wrap: wrap; } .scroll-box .card.data-v-7e18bee5 { margin-right: 30rpx; margin-bottom: 30rpx; border: 2rpx solid #fff; background-image: url('../../static/index/mountain.png'); background-color: rgba(255, 255, 255, 0.6); background-position: 60% 50%; width: 1045rpx; height: 650rpx; border-radius: 50rpx; display: flex; border-top-right-radius: 40rpx; } .scroll-box .card .card-left.data-v-7e18bee5 { height: 100%; width: 68%; position: relative; } .scroll-box .card .card-left .card-left-title.data-v-7e18bee5 { height: 23%; width: 100%; padding: 0 20rpx; display: flex; justify-content: space-between; align-items: center; } .scroll-box .card .card-left .card-left-title .left-view.data-v-7e18bee5 { display: flex; margin-top: 20rpx; position: relative; width: 100%; } .scroll-box .card .card-left .card-left-title .left-view .left-view-img.data-v-7e18bee5 { width: 85rpx; height: 85rpx; } .scroll-box .card .card-right.data-v-7e18bee5 { height: 100%; width: 32%; background-color: rgba(244, 235, 249, 0.3); border-top-right-radius: 38rpx; border-bottom-right-radius: 38rpx; position: relative; } .top-font-line.data-v-7e18bee5 { display: flex; align-items: center; font-size: 23rpx; } .top-font-line .line-weight.data-v-7e18bee5 { font-size: 35rpx; font-weight: 600; margin-left: 20rpx; } .top-font-line .line-margin.data-v-7e18bee5 { margin-left: 20rpx; margin-right: 20rpx; } .top-font-line .font-gray.data-v-7e18bee5 { margin-left: 20rpx; font-size: 28rpx; color: #555555; } .blue-button.data-v-7e18bee5 { position: absolute; right: 20rpx; top: -3rpx; width: 130rpx; height: 50rpx; color: #fff; font-size: 25rpx; background: linear-gradient(to bottom, #00C9FF, #0076FF); border-radius: 15rpx; display: flex; justify-content: center; align-items: center; margin: 20rpx 10rpx 0 0; } .font-gray-right.data-v-7e18bee5 { margin-top: 10rpx; font-size: 25rpx; color: #858585; margin-right: 8rpx; } .right-spec.data-v-7e18bee5 { margin-top: 68rpx; font-weight: 600; margin-right: 10rpx; width: 150rpx; } .video-img.data-v-7e18bee5 { margin-left: 110rpx; width: 570rpx; height: 400rpx; border-radius: 30rpx; } .video-bottom.data-v-7e18bee5 { width: 100%; overflow: hidden; height: 85rpx; display: flex; align-items: center; padding-left: 110rpx; color: #858585; font-size: 24rpx; position: relative; } .video-bottom .font-bottom-weight.data-v-7e18bee5 { font-size: 28rpx; font-weight: 600; color: black; } .video-bottom .bottom-shu.data-v-7e18bee5 { margin: 0 15rpx; } .bottom-balls.data-v-7e18bee5 { position: absolute; bottom: 120rpx; left: 38%; transform: translateX(-35%); z-index: 999; display: flex; } .bottom-balls .one-ball-father.data-v-7e18bee5 { width: 120rpx; height: 50rpx; display: flex; justify-content: center; align-items: center; border: 2rpx solid #fff; margin: 0 5rpx; color: #fff; font-size: 25rpx; border-radius: 10rpx; } .right-balls.data-v-7e18bee5 { position: absolute; left: 25rpx; top: 140rpx; padding-top: 10rpx; z-index: 999; } .right-balls .blue-ball.data-v-7e18bee5 { width: 35rpx; height: 35rpx; } .right-balls .blue-ball-father.data-v-7e18bee5 { width: 70rpx; height: 70rpx; display: flex; justify-content: center; align-items: center; background-color: #dbe8f9; border-radius: 25rpx; margin-right: 20rpx; margin-bottom: 18rpx; position: relative; overflow: hidden; } .right-balls .blue-ball-father-target.data-v-7e18bee5 { width: 70rpx; height: 70rpx; display: flex; justify-content: center; align-items: center; background-color: #dbe8f9; border-radius: 25rpx; margin-right: 20rpx; margin-bottom: 18rpx; position: relative; overflow: auto; } .right-title.data-v-7e18bee5 { position: absolute; right: -50rpx; top: 10rpx; width: 250rpx; height: 120rpx; z-index: 1; } .right-other.data-v-7e18bee5 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; border-top-left-radius: 30rpx; border-bottom-left-radius: 30rpx; width: 150rpx; height: 60rpx; } .right-other .other-class.data-v-7e18bee5 { width: 35rpx; height: 35rpx; margin-right: 5rpx; margin-left: 5rpx; } .right-other .other-font.data-v-7e18bee5 { color: #fff; } .time.data-v-7e18bee5 { display: flex; margin-top: 120rpx; align-items: center; justify-content: center; } .time .time-left.data-v-7e18bee5 { background: linear-gradient(to bottom, #7080A1, #263556); -webkit-background-clip: text; color: transparent; font-size: 45rpx; font-weight: 600; } .time-img.data-v-7e18bee5 { width: 240rpx; height: 180rpx; margin-bottom: 15rpx; } .time-weight.data-v-7e18bee5 { font-weight: 600; font-size: 32rpx; margin-top: 25rpx; } .time-small.data-v-7e18bee5 { padding: 10rpx 30rpx; font-size: 20rpx; color: #666666; } .time-people-two.data-v-7e18bee5 { display: flex; margin-left: 20rpx; align-items: center; margin-bottom: 5rpx; } .time-people-two .time-people-img.data-v-7e18bee5 { width: 40rpx; height: 40rpx; margin-right: 10rpx; margin-left: 5rpx; } .time-people-two .time-people-font.data-v-7e18bee5 { font-size: 27rpx; } .right-time.data-v-7e18bee5 { position: absolute; top: 40%; right: 0; transform: translateY(-40%); } .right-time .right-laba.data-v-7e18bee5 { width: 60rpx; height: 60rpx; margin-right: 5rpx; border-top-left-radius: 30rpx; border-bottom-left-radius: 30rpx; background-color: #fff; display: flex; justify-content: center; align-items: center; margin-bottom: 10rpx; } .fail-img.data-v-7e18bee5 { width: 250rpx; height: 250rpx; } .fail-img-spec.data-v-7e18bee5 { width: 400rpx; height: 350rpx; margin-left: -70rpx; } .fail-text.data-v-7e18bee5 { margin-top: 15rpx; color: #333333; } .fail-text-spec.data-v-7e18bee5 { margin-top: -100rpx; color: #333333; } .kufang-img.data-v-7e18bee5 { width: 43rpx; height: 43rpx; } .tab-heng.data-v-7e18bee5 { position: absolute; left: 50%; bottom: -15rpx; transform: translateX(-50%); width: 40rpx; height: 10rpx; border-radius: 10rpx; } .right-title-father.data-v-7e18bee5 { position: absolute; right: 20rpx; height: 100%; top: 0; display: flex; align-items: center; } .split-line-white-sec.data-v-7e18bee5 { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 2rpx; /* 线条的宽度 */ height: 600rpx; z-index: 999; /* 高度占满父容器 */ background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, #fff 50%, rgba(0, 0, 0, 0) 100%); } .topright-ball.data-v-7e18bee5 { position: absolute; top: 170rpx; right: 50rpx; width: 75rpx; height: 75rpx; border-radius: 50%; background-color: rgba(255, 255, 255, 0.3); z-index: 999; display: flex; justify-content: center; align-items: center; } .topright-ball .ball-righttop.data-v-7e18bee5 { width: 45rpx; height: 45rpx; margin-top: -10rpx; } .small-button.data-v-7e18bee5 { width: 70%; height: 70rpx; display: flex; justify-content: space-between; } .small-button .gray-ball.data-v-7e18bee5 { display: flex; justify-content: center; align-items: center; background-color: #d8e1f2; width: 60rpx; height: 60rpx; border-radius: 50%; } .laba-img.data-v-7e18bee5 { width: 30rpx; height: 30rpx; } .time-right.data-v-7e18bee5 { position: absolute; right: 10rpx; top: 5rpx; width: 90rpx; height: 35rpx; display: flex; justify-content: center; align-items: center; background-color: #FFD5AC; color: #FF5834; border: 2rpx solid #FF5834; margin-left: 5rpx; border-radius: 10rpx; font-size: 20rpx; }