.index-content-other.data-v-53a8654b { width: 100%; height: 100%; position: relative; background-color: #EFF0F4; display: flex; justify-content: center; align-items: center; } .index-content-down.data-v-53a8654b { position: absolute; bottom: 40rpx; left: 50%; transform: translateX(-50%); } .index-content-right.data-v-53a8654b { position: absolute; top: 0; left: 0; width: 100%; display: flex; align-items: center; padding-top: 100rpx; font-size: 32rpx; } .back-img.data-v-53a8654b { width: 30rpx; height: 30rpx; margin-left: 100rpx; margin-right: 20rpx; } .all-img.data-v-53a8654b { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; } .blue-bgc.data-v-53a8654b { width: 600rpx; height: 600rpx; display: flex; justify-content: center; align-items: center; position: relative; flex-direction: column; } .inset-img.data-v-53a8654b { width: 400rpx; height: 400rpx; position: relative; } .ball-layer.data-v-53a8654b { position: absolute; top: 50%; left: 50%; width: 200px; height: 200px; transform: translate(-50%, -50%); z-index: 999; } .ball.data-v-53a8654b { position: absolute; border-radius: 50%; transition: opacity 0.5s ease; z-index: 10; } /* 进度条样式 */ .progress-wrap.data-v-53a8654b { width: 60%; height: 13px; background-color: #E6E9EE; border-radius: 9999px; overflow: hidden; margin-top: 30px; } .progress-inner.data-v-53a8654b { height: 100%; background-image: linear-gradient(90deg, #0097FF 0%, #007CFF 100%); border-radius: inherit; transition: width 0.2s ease; } .progress-text.data-v-53a8654b { margin-top: 8px; font-size: 28rpx; color: #007CFF; } .blue-button.data-v-53a8654b { margin-top: 30rpx; width: 250rpx; height: 90rpx; border-radius: 40rpx; display: flex; justify-content: center; align-items: center; color: #007CFF; font-size: 30rpx; background-color: #ddf0ff; border: 1rpx solid #007CFF; } .other.data-v-53a8654b { width: 50%; height: 100%; margin-left: 100rpx; } .other-father.data-v-53a8654b { margin-top: 200rpx; height: 950rpx; width: 100%; } .card-father.data-v-53a8654b { width: 100%; display: flex; flex-wrap: wrap; } .card.data-v-53a8654b { width: 45%; margin-left: 4%; height: 450rpx; box-shadow: 3rpx 6rpx 12rpx 3rpx rgba(206, 206, 206, 0.5); background-color: #f4f5f7; border-radius: 30rpx; margin-top: 5rpx; margin-bottom: 35rpx; padding: 0 25rpx; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; overflow: hidden; } .card-title.data-v-53a8654b { width: 100%; height: 130rpx; display: flex; align-items: center; justify-content: space-between; } /* 旋转动画 */ @keyframes spin-53a8654b { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes spinx-53a8654b { from { transform: rotate(-70deg); } to { transform: rotate(290deg); } } /* 新卡片淡入动画 */ @keyframes fadeIn-53a8654b { from { opacity: 0; transform: translateY(10rpx); } to { opacity: 1; transform: translateY(0); } } .fade-in.data-v-53a8654b { animation: fadeIn-53a8654b 0.4s ease-out forwards; } .index-content-title.data-v-53a8654b { position: absolute; top: 60rpx; left: 60rpx; display: flex; align-items: center; } .index-content-title .shu.data-v-53a8654b { width: 20rpx; height: 50rpx; background: linear-gradient(to right, #0052C2, #00B4FF); border-radius: 20rpx; margin-right: 30rpx; } .index-content-title .shu-font.data-v-53a8654b { color: #415273; font-size: 35rpx; } .right-box.data-v-53a8654b { background: #00abff; width: 160rpx; height: 65rpx; border-radius: 20rpx; display: flex; justify-content: center; align-items: center; color: #fff; } .card-bottom.data-v-53a8654b { margin-top: 17rpx; margin-left: 10rpx; display: flex; } .card-bottom .bottom-img.data-v-53a8654b { width: 38rpx; height: 38rpx; margin-left: 30rpx; } .left-contain.data-v-53a8654b { margin-right: 80rpx; } .main-title.data-v-53a8654b { display: flex; align-items: center; margin-top: 70rpx; margin-bottom: 10rpx; } .edit-img.data-v-53a8654b { width: 40rpx; height: 30rpx; } .card-tags.data-v-53a8654b { position: absolute; top: 50rpx; left: 0rpx; width: 200rpx; height: 65rpx; font-size: 25rpx; display: flex; justify-content: center; align-items: center; } .play-img.data-v-53a8654b { position: absolute; top: 50rpx; right: 30rpx; width: 130rpx; height: 55rpx; font-size: 26rpx; border-radius: 35rpx; border: 2rpx solid #999; display: flex; justify-content: center; align-items: center; } .rename-father.data-v-53a8654b { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 600rpx; height: 420rpx; 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; z-index: 999; } .rename-father .rename-title.data-v-53a8654b { width: 100%; height: 80rpx; display: flex; justify-content: center; align-items: center; margin-top: 30rpx; margin-bottom: 20rpx; font-size: 32rpx; } .rename-father .rename-gray.data-v-53a8654b { width: 100%; height: 80rpx; display: flex; color: #a7a7a7; align-items: center; } .rename-father .rename-input.data-v-53a8654b { width: 100%; height: 80rpx; display: flex; background-color: #f5f6fa; border-radius: 20rpx; color: #a7a7a7; align-items: center; padding: 0 20rpx; position: relative; } .rename-father .rename-input .uni-input.data-v-53a8654b { font-size: 25rpx; width: 100%; } .rename-father .rename-input .left-img.data-v-53a8654b { width: 50rpx; height: 50rpx; margin-right: 15rpx; } .rename-father .rename-input .right-img.data-v-53a8654b { position: absolute; right: 30rpx; top: 50%; transform: translateY(-50%); width: 30rpx; height: 30rpx; } .popup-any.data-v-53a8654b { position: fixed; inset: 0; /* 初始透明度 */ opacity: 0; /* 播放动画:名称 fadeIn,时长 0.5s,缓动函数 ease,保持最后状态 */ transition: opacity 0.5s ease; -webkit-backdrop-filter: blur(1rpx); backdrop-filter: blur(1rpx); background-color: rgba(236, 237, 241, 0.4); /* 添加毛玻璃效果 */ z-index: 999; } .mask.data-v-53a8654b { position: absolute; inset: 0; } .video-father.data-v-53a8654b { width: 60rpx; height: 60rpx; display: flex; justify-content: center; align-items: center; margin-left: 15rpx; } .zerotarget.data-v-53a8654b { --color: #99C9FD; --thick: 2px; --radius: 30rpx; --outline-offset: 0rpx; /* 外扩多少 */ /* 内层虚线(你现在用的) */ border-radius: var(--radius); background-color: white; /* 内部背景 */ animation: scalePulse 360ms cubic-bezier(0.2, 0.8, 0.2, 1); /* 外层虚线:放在 outline(不会影响元素尺寸) */ outline: var(--thick) dashed var(--color); outline-offset: var(--outline-offset); /* 保证文本 / 子元素在最上层 */ position: relative; z-index: 0; }