.menus-father.data-v-0df9d5ac { margin-top: 50rpx; width: 100%; } .menus-father .menu.data-v-0df9d5ac { height: 110rpx; width: 280rpx; border-radius: 60rpx; margin: 45rpx 0; display: flex; justify-content: center; align-items: center; margin-left: 30rpx; } .backgroundContainer.data-v-0df9d5ac { display: flex; position: relative; width: 100%; height: 100vh; background-color: #eff0f4; overflow: hidden; z-index: 12; } .darkbackgroundContainer.data-v-0df9d5ac { display: flex; position: relative; width: 100%; height: 100vh; background-image: url('../../static/index/background.png'); background-size: cover; background-position: center center; overflow: hidden; z-index: 11; } .move-font.data-v-0df9d5ac { position: absolute; z-index: 10; pointer-events: none; background-color: #c9e8ff; border-radius: 20rpx; border: 2rpx solid #fff; width: 220rpx; height: 100rpx; display: flex; justify-content: center; align-items: center; text-align: center; font-size: 40rpx; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); will-change: transform; } .left-container.data-v-0df9d5ac { width: 420rpx; height: 100%; } .left-container .blue-circle-pos.data-v-0df9d5ac { position: relative; } .left-container .blue-circle-pos .blue-circle.data-v-0df9d5ac { position: absolute; top: -50rpx; left: -68rpx; } .left-container .blue-circle-pos .blue-circle .blue-circle-size.data-v-0df9d5ac { width: 170rpx; height: 250rpx; } .left-container .left-head.data-v-0df9d5ac { display: flex; justify-content: center; align-items: center; flex-direction: column; } .left-container .left-head .left-head-img.data-v-0df9d5ac { width: 120rpx; height: 120rpx; margin-top: 80rpx; } .left-container .left-head .left-head-font.data-v-0df9d5ac { font-weight: 700; font-size: 32rpx; } .left-container .left-head .left-head-font-dark.data-v-0df9d5ac { font-weight: 700; font-size: 40rpx; background: linear-gradient(to right, #EBF4FF, #ADC4E0); -webkit-background-clip: text; color: transparent; } .left-container .left-img-container.data-v-0df9d5ac { display: flex; justify-content: center; align-items: center; flex-direction: column; } .left-container .left-img-container .left-img.data-v-0df9d5ac { width: 93rpx; height: 93rpx; margin: 50rpx 0; z-index: 100; } .title-time-border-yellow.data-v-0df9d5ac { width: 255rpx; height: 189rpx; margin: 10rpx; border: 1rpx solid #dae8fa; background: linear-gradient(to bottom, #fff1db, #ffe2b2); border-radius: 20rpx; display: flex; align-items: center; flex-direction: column; position: absolute; z-index: 10; } .title-time-border-pouple.data-v-0df9d5ac { width: 255rpx; height: 189rpx; margin: 10rpx; border: 1rpx solid #dae8fa; background: linear-gradient(to bottom, #f1eeff, #e3deff); border-radius: 20rpx; display: flex; align-items: center; flex-direction: column; position: absolute; z-index: 10; } .title-time.data-v-0df9d5ac { display: flex; width: 100%; position: relative; } .title-time .title-time-time.data-v-0df9d5ac { font-size: 32rpx; margin-left: 27rpx; margin-top: 12rpx; } .title-time .title-time-button.data-v-0df9d5ac { position: absolute; top: -5rpx; right: 0rpx; width: 70rpx; height: 70rpx; } .title-time .title-time-font.data-v-0df9d5ac { position: absolute; top: 7rpx; right: 5rpx; font-size: 23rpx; color: #fff; } .down-icons.data-v-0df9d5ac { margin-top: 20rpx; width: 100%; height: 50rpx; background-color: #ffd87e; display: flex; justify-content: center; align-items: center; } .down-icons .icon.data-v-0df9d5ac { margin: 0 5rpx; font-size: 20rpx; padding: 5rpx 10rpx; background-color: #ff8a00; color: #fff; border-radius: 5rpx; } .target.data-v-0df9d5ac { --color: #99C9FD; --thick: 2px; --radius: 60rpx; --outline-offset: 0rpx; /* 外扩多少 */ /* 内层虚线(你现在用的) */ border-radius: var(--radius); background-color: white; /* 内部背景 */ animation: scalePulse-0df9d5ac 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; } @keyframes scalePulse-0df9d5ac { 0% { transform: scale(1); } 25% { /* 先收缩一点点 */ transform: scale(0.94); } 65% { /* 再放大到略超出的感觉 */ transform: scale(1.08); } 100% { transform: scale(1); } }