.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: 1.25rem; 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: 3.125rem; font-size: 1rem; } .back-img[data-v-53a8654b] { width: 0.9375rem; height: 0.9375rem; margin-left: 3.125rem; margin-right: 0.625rem; } .all-img[data-v-53a8654b] { position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; } .blue-bgc[data-v-53a8654b] { width: 18.75rem; height: 18.75rem; display: flex; justify-content: center; align-items: center; position: relative; flex-direction: column; } .inset-img[data-v-53a8654b] { width: 12.5rem; height: 12.5rem; 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: 0.875rem; color: #007CFF; } .blue-button[data-v-53a8654b] { margin-top: 0.9375rem; width: 7.8125rem; height: 2.8125rem; border-radius: 1.25rem; display: flex; justify-content: center; align-items: center; color: #007CFF; font-size: 0.9375rem; background-color: #ddf0ff; border: 0.03125rem solid #007CFF; } .other[data-v-53a8654b] { width: 50%; height: 100%; margin-left: 3.125rem; } .other-father[data-v-53a8654b] { margin-top: 6.25rem; height: 29.6875rem; width: 100%; } .card-father[data-v-53a8654b] { width: 100%; display: flex; flex-wrap: wrap; } .card[data-v-53a8654b] { width: 45%; margin-left: 4%; height: 14.0625rem; box-shadow: 0.09375rem 0.1875rem 0.375rem 0.09375rem rgba(206, 206, 206, 0.5); background-color: #f4f5f7; border-radius: 0.9375rem; margin-top: 0.15625rem; margin-bottom: 1.09375rem; padding: 0 0.78125rem; position: relative; display: flex; justify-content: center; align-items: center; flex-direction: column; overflow: hidden; } .card-title[data-v-53a8654b] { width: 100%; height: 4.0625rem; 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(0.3125rem); } 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: 1.875rem; left: 1.875rem; display: flex; align-items: center; } .index-content-title .shu[data-v-53a8654b] { width: 0.625rem; height: 1.5625rem; background: linear-gradient(to right, #0052C2, #00B4FF); border-radius: 0.625rem; margin-right: 0.9375rem; } .index-content-title .shu-font[data-v-53a8654b] { color: #415273; font-size: 1.09375rem; } .right-box[data-v-53a8654b] { background: #00abff; width: 5rem; height: 2.03125rem; border-radius: 0.625rem; display: flex; justify-content: center; align-items: center; color: #fff; } .card-bottom[data-v-53a8654b] { margin-top: 0.53125rem; margin-left: 0.3125rem; display: flex; } .card-bottom .bottom-img[data-v-53a8654b] { width: 1.1875rem; height: 1.1875rem; margin-left: 0.9375rem; } .left-contain[data-v-53a8654b] { margin-right: 2.5rem; } .main-title[data-v-53a8654b] { display: flex; align-items: center; margin-top: 2.1875rem; margin-bottom: 0.3125rem; } .edit-img[data-v-53a8654b] { width: 1.25rem; height: 0.9375rem; } .card-tags[data-v-53a8654b] { position: absolute; top: 1.5625rem; left: 0; width: 6.25rem; height: 2.03125rem; font-size: 0.78125rem; display: flex; justify-content: center; align-items: center; } .play-img[data-v-53a8654b] { position: absolute; top: 1.5625rem; right: 0.9375rem; width: 4.0625rem; height: 1.71875rem; font-size: 0.8125rem; border-radius: 1.09375rem; border: 0.0625rem 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: 18.75rem; height: 13.125rem; border-radius: 0.9375rem; box-shadow: 0.0625rem 0.125rem 0.25rem 0.0625rem rgba(0, 0, 0, 0.3); background-color: #fff; display: flex; flex-direction: column; align-items: center; padding: 0 0.9375rem; z-index: 999; } .rename-father .rename-title[data-v-53a8654b] { width: 100%; height: 2.5rem; display: flex; justify-content: center; align-items: center; margin-top: 0.9375rem; margin-bottom: 0.625rem; font-size: 1rem; } .rename-father .rename-gray[data-v-53a8654b] { width: 100%; height: 2.5rem; display: flex; color: #a7a7a7; align-items: center; } .rename-father .rename-input[data-v-53a8654b] { width: 100%; height: 2.5rem; display: flex; background-color: #f5f6fa; border-radius: 0.625rem; color: #a7a7a7; align-items: center; padding: 0 0.625rem; position: relative; } .rename-father .rename-input .uni-input[data-v-53a8654b] { font-size: 0.78125rem; width: 100%; } .rename-father .rename-input .left-img[data-v-53a8654b] { width: 1.5625rem; height: 1.5625rem; margin-right: 0.46875rem; } .rename-father .rename-input .right-img[data-v-53a8654b] { position: absolute; right: 0.9375rem; top: 50%; transform: translateY(-50%); width: 0.9375rem; height: 0.9375rem; } .popup-any[data-v-53a8654b] { position: fixed; inset: 0; /* 初始透明度 */ opacity: 0; /* 播放动画:名称 fadeIn,时长 0.5s,缓动函数 ease,保持最后状态 */ transition: opacity 0.5s ease; -webkit-backdrop-filter: blur(0.03125rem); backdrop-filter: blur(0.03125rem); 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: 1.875rem; height: 1.875rem; display: flex; justify-content: center; align-items: center; margin-left: 0.46875rem; } .zerotarget[data-v-53a8654b] { --color: #99C9FD; --thick: 2px; --radius: 0.9375rem; --outline-offset: 0; /* 外扩多少 */ /* 内层虚线(你现在用的) */ 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; }