.index-content-other.data-v-14770cca { width: calc(100% - 170rpx); height: 100%; transition: opacity 1s ease; position: relative; } .index-content-down.data-v-14770cca { width: calc(100% - 60rpx); height: 100rpx; display: flex; justify-content: flex-end; align-items: center; } .index-content-right.data-v-14770cca { height: calc(100% - 100rpx); width: calc(100% - 60rpx); background-color: rgba(255, 255, 255, 0.8); background-image: url('../../static/index/leida/bgc.png'); background-position: 30% 70%; border-radius: 50rpx; box-shadow: 4rpx 8rpx 16rpx 4rpx rgba(0, 0, 0, 0.3); display: flex; position: relative; } .leida.data-v-14770cca { margin-top: 30rpx; height: 100%; width: 35%; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; } .kutong-father.data-v-14770cca { width: 300rpx; height: 450rpx; position: relative; } .kutong-img.data-v-14770cca { position: absolute; top: 0; left: 0; width: 300rpx; height: 300rpx; } .kutong-shan.data-v-14770cca { position: absolute; top: 0; left: 0; width: 150rpx; height: 206rpx; transform-origin: 100% 73%; } .spin-anim.data-v-14770cca { animation: spin-14770cca 2s linear infinite; animation-play-state: running; } .no-anim.data-v-14770cca { animation: spin-14770cca 2s linear infinite; animation-play-state: paused; } .spin-anim-spec.data-v-14770cca { animation: spinx-14770cca 2s linear infinite; animation-play-state: running; } .no-anim-spec.data-v-14770cca { animation: spinx-14770cca 2s linear infinite; animation-play-state: paused; } .huan.data-v-14770cca { position: absolute; top: -65rpx; left: -65rpx; width: 430rpx; height: 430rpx; border: 20rpx solid #cedcf5; border-radius: 50%; } .quarter-ring.data-v-14770cca { position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; box-sizing: border-box; border: 20rpx solid transparent; border-top-color: #03a9ff; border-radius: 50%; transform: rotate(0deg); transform-origin: center center; } .jindutiao.data-v-14770cca { width: 400rpx; border-radius: 20rpx; height: 20rpx; background-color: #a6c9fa; overflow: hidden; } .progress-fill.data-v-14770cca { width: 100%; height: 100%; background: linear-gradient(to bottom, #00C9FF, #0076FF); transform-origin: left center; will-change: transform; transition: transform 0.05s linear; } .color-font.data-v-14770cca { color: #415273; margin-top: 20rpx; height: 20rpx; } .agagin-button.data-v-14770cca { width: 240rpx; height: 90rpx; margin-top: 80rpx; border-radius: 35rpx; background: linear-gradient(to bottom, #00C9FF, #0076FF); display: flex; justify-content: center; align-items: center; color: #fff; } .other.data-v-14770cca { width: 65%; height: 100%; } .other-father.data-v-14770cca { margin-top: 150rpx; height: calc(100% - 150rpx); width: 100%; } .card-father.data-v-14770cca { width: 100%; display: flex; flex-wrap: wrap; } .card.data-v-14770cca { width: 45%; margin-left: 3%; height: 530rpx; box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.3); background-color: #fff; border-radius: 30rpx; margin-bottom: 35rpx; padding: 0 25rpx; position: relative; } .card .rename-father.data-v-14770cca { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 550rpx; height: 350rpx; border-radius: 30rpx; box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.3); background-color: #fff; display: flex; flex-direction: column; align-items: center; padding: 0 30rpx; } .card .rename-father .rename-title.data-v-14770cca { width: 100%; height: 80rpx; border-bottom: 2rpx solid #f5f5f5; display: flex; justify-content: center; align-items: center; } .card .rename-father .rename-gray.data-v-14770cca { width: 100%; height: 80rpx; display: flex; color: #a7a7a7; align-items: center; } .card .rename-father .rename-input.data-v-14770cca { width: 100%; height: 80rpx; display: flex; background-color: #f5f6fa; border-radius: 20rpx; color: #a7a7a7; align-items: center; padding: 0 20rpx; position: relative; } .card .rename-father .rename-input .uni-input.data-v-14770cca { font-size: 25rpx; } .card .rename-father .rename-input .left-img.data-v-14770cca { width: 50rpx; height: 50rpx; margin-right: 15rpx; } .card .rename-father .rename-input .right-img.data-v-14770cca { position: absolute; right: 30rpx; top: 50%; transform: translateY(-50%); width: 30rpx; height: 30rpx; } .card-title.data-v-14770cca { width: 100%; height: 130rpx; display: flex; align-items: center; justify-content: space-between; } .card-middle.data-v-14770cca { width: 100%; height: 320rpx; display: flex; justify-content: space-between; } .video-box.data-v-14770cca { width: 82%; height: 320rpx; background-color: #E5ECFA; display: flex; justify-content: center; align-items: center; border-radius: 20rpx; } .video-box-img.data-v-14770cca { width: 80rpx; height: 80rpx; } /* 旋转动画 */ @keyframes spin-14770cca { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes spinx-14770cca { from { transform: rotate(-70deg); } to { transform: rotate(290deg); } } /* 新卡片淡入动画 */ @keyframes fadeIn-14770cca { from { opacity: 0; transform: translateY(10rpx); } to { opacity: 1; transform: translateY(0); } } .fade-in.data-v-14770cca { animation: fadeIn-14770cca 0.4s ease-out forwards; } .index-content-title.data-v-14770cca { position: absolute; top: 60rpx; left: 60rpx; display: flex; align-items: center; } .index-content-title .shu.data-v-14770cca { width: 20rpx; height: 50rpx; background: linear-gradient(to right, #0052C2, #00B4FF); border-radius: 20rpx; margin-right: 30rpx; } .index-content-title .shu-font.data-v-14770cca { color: #415273; font-size: 35rpx; } .right-box.data-v-14770cca { background: #00abff; width: 160rpx; height: 65rpx; border-radius: 20rpx; display: flex; justify-content: center; align-items: center; color: #fff; } .small-menu.data-v-14770cca { width: 75rpx; height: 73rpx; border-radius: 20rpx; background-color: #E7ECFA; display: flex; justify-content: center; align-items: center; margin-bottom: 10rpx; } .small-menu .small-img.data-v-14770cca { height: 50rpx; width: 50rpx; } .card-bottom.data-v-14770cca { margin-top: 17rpx; margin-left: 10rpx; display: flex; } .card-bottom .bottom-img.data-v-14770cca { width: 38rpx; height: 38rpx; margin-left: 30rpx; } .blue-button.data-v-14770cca { margin-top: 20rpx; width: 180rpx; height: 70rpx; border-radius: 30rpx; display: flex; justify-content: center; align-items: center; color: #fff; background: linear-gradient(to bottom, #00C9FF, #0076FF); }