.index-content-other.data-v-5b62ffe9 { width: calc(100% - 407rpx); height: 100%; transition: opacity 1s ease; position: relative; } .index-content-other .abs-time.data-v-5b62ffe9 { position: absolute; right: 20rpx; top: 150rpx; } .index-content-other .abs-time .big-time.data-v-5b62ffe9 { font-size: 90rpx; font-weight: 600; width: 100%; justify-content: center; } .right-container-title-nav.data-v-5b62ffe9 { margin-top: 60rpx; display: flex; align-items: center; height: 60rpx; position: relative; font-size: 28rpx; } .right-container-title-nav .new-weight.data-v-5b62ffe9 { margin-left: 30rpx; font-weight: 600; } .right-container-title-nav .right-icons.data-v-5b62ffe9 { position: absolute; right: 30rpx; top: 0; display: flex; align-items: center; height: 60rpx; } .right-container-title-nav .right-icons-img.data-v-5b62ffe9 { width: 60rpx; height: 60rpx; margin-left: 20rpx; margin-right: 20rpx; } .scroll-vi.data-v-5b62ffe9 { height: 120rpx; width: 95%; margin-left: 20rpx; margin-top: 20rpx; position: relative; margin-bottom: 80rpx; } .scroll-vi .menu.data-v-5b62ffe9 { margin-top: 15rpx; flex: 0 0 auto; height: 90rpx; width: 240rpx; border-radius: 50rpx; margin-right: 20rpx; background-color: #fff; display: flex; justify-content: center; align-items: center; padding-top: 9rpx; } .scroll-vi .menu .menu-img.data-v-5b62ffe9 { width: 55rpx; height: 55rpx; margin-right: 15rpx; } .scroll-vi .menu .menu-font.data-v-5b62ffe9 { margin-top: 18rpx; font-size: 25rpx; } .date.data-v-5b62ffe9 { display: flex; justify-content: space-around; margin-top: 10rpx; } .right-container-tem.data-v-5b62ffe9 { display: flex; } .right-container-tem .right-container-tem-text.data-v-5b62ffe9 { font-size: 30rpx; margin-right: 20rpx; } .right-container-tem .right-container-tem-img.data-v-5b62ffe9 { width: 38rpx; height: 38rpx; } .photo-father.data-v-5b62ffe9 { width: 100%; height: 1100rpx; display: flex; flex-direction: column; align-items: center; position: relative; margin-top: 0rpx; } .juzhong.data-v-5b62ffe9 { position: absolute; top: 0%; left: 50%; transform: translate(-50%, -10%); } .weight-time.data-v-5b62ffe9 { font-weight: 800; font-size: 100rpx; margin-bottom: 0rpx; position: relative; margin-left: -50rpx; } .big-img.data-v-5b62ffe9 { width: 1000rpx; height: 700rpx; } .server-name.data-v-5b62ffe9 { font-size: 45rpx; margin-right: 10rpx; font-weight: 600; } .server-bgc.data-v-5b62ffe9 { width: 160rpx; height: 50rpx; display: flex; justify-content: center; align-items: center; position: relative; } .bgc-img.data-v-5b62ffe9 { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .bgc-font.data-v-5b62ffe9 { color: #fff; z-index: 1; } .down-img.data-v-5b62ffe9 { width: 35rpx; height: 35rpx; } .states-father.data-v-5b62ffe9 { display: flex; margin: 0 20rpx; } .icon-img.data-v-5b62ffe9 { width: 55rpx; height: 55rpx; } .start-button.data-v-5b62ffe9 { width: 100%; height: 100%; background: linear-gradient(to bottom, #009DEF, #0076FF); display: flex; justify-content: center; align-items: center; border-radius: 40rpx; color: #fff; font-size: 30rpx; } .end-button.data-v-5b62ffe9 { width: 100%; height: 100%; background: linear-gradient(to bottom, #FFFFFF, #C8D0D9); display: flex; justify-content: center; align-items: center; border-radius: 40rpx; font-size: 30rpx; } .pao-father.data-v-5b62ffe9 { position: absolute; top: 25rpx; right: -110rpx; font-size: 22rpx; width: 100rpx; height: 50rpx; display: flex; justify-content: center; align-items: center; color: #FFFFFF; } .pao-father .pao-img.data-v-5b62ffe9 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .left-menu.data-v-5b62ffe9 { position: absolute; top: 50%; left: 150rpx; transform: translateY(-50%); } .zoom.data-v-5b62ffe9 { transform: scale(1.2); transform-origin: bottom left; transition: transform 1s ease; } .left-ball.data-v-5b62ffe9 { width: 100rpx; height: 100rpx; border-radius: 50%; display: flex; justify-content: center; align-items: center; background-color: #fff; } .left-ball .left-menu-img.data-v-5b62ffe9 { width: 50rpx; height: 50rpx; } .right-menu.data-v-5b62ffe9 { position: absolute; top: 50%; right: 150rpx; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; width: 140rpx; } .right-menu .top-img.data-v-5b62ffe9 { width: 140rpx; height: 110rpx; padding: 0 50rpx; } .right-menu .right-scroll.data-v-5b62ffe9 { width: 100%; height: 750rpx; } .right-menu .white-circle.data-v-5b62ffe9 { height: 200rpx; border-radius: 60rpx; background-color: #fff; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; } .right-menu .white-circle .right-menu-img.data-v-5b62ffe9 { width: 80rpx; height: 80rpx; } .right-menu .white-circle .right-menu-name.data-v-5b62ffe9 { width: 80rpx; } .zhezhao-top.data-v-5b62ffe9 { position: absolute; top: 105rpx; left: 0%; width: 120%; height: 120rpx; background: linear-gradient(to bottom, #eff0f4 0%, /* #eff0f4 全不透明 */ rgba(239, 240, 244, 0) 100% /* #eff0f4 完全透明 */); z-index: 4; } .zhezhao-bottom.data-v-5b62ffe9 { position: absolute; bottom: 105rpx; left: 0%; width: 120%; height: 120rpx; background: linear-gradient(to top, #eff0f4 0%, /* #eff0f4 全不透明 */ rgba(239, 240, 244, 0) 100% /* #eff0f4 完全透明 */); z-index: 4; } .zhezhao-left.data-v-5b62ffe9 { position: absolute; top: 0rpx; left: 0%; height: 100%; width: 120rpx; background: linear-gradient(to right, #eff0f4 0%, /* #eff0f4 全不透明 */ rgba(239, 240, 244, 0) 100% /* #eff0f4 完全透明 */); z-index: 4; } .zhezhao-right.data-v-5b62ffe9 { position: absolute; top: 0rpx; right: 0%; height: 100%; width: 120rpx; background: linear-gradient(to left, #eff0f4 0%, /* #eff0f4 全不透明 */ rgba(239, 240, 244, 0) 100% /* #eff0f4 完全透明 */); z-index: 4; } .zerotarget.data-v-5b62ffe9 { --color: #99C9FD; --thick: 2px; --radius: 50rpx; --outline-offset: 0rpx; /* 外扩多少 */ /* 内层虚线(你现在用的) */ border-radius: var(--radius); background-color: white; /* 内部背景 */ animation: scalePulse-5b62ffe9 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; } .firsttarget.data-v-5b62ffe9 { --color: #99C9FD; --thick: 2px; --radius: 50%; --outline-offset: 0rpx; /* 外扩多少 */ /* 内层虚线(你现在用的) */ border-radius: var(--radius); background-color: white; /* 内部背景 */ animation: scalePulse-5b62ffe9 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; } .secondtarget.data-v-5b62ffe9 { --color: #99C9FD; --thick: 2px; --radius: 60rpx; --outline-offset: 0rpx; /* 外扩多少 */ /* 内层虚线(你现在用的) */ border-radius: var(--radius); background-color: white; /* 内部背景 */ animation: scalePulse-5b62ffe9 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; } .thirdtarget.data-v-5b62ffe9 { --color: #99C9FD; --thick: 2px; --radius: 40rpx; --outline-offset: 0rpx; /* 外扩多少 */ /* 内层虚线(你现在用的) */ border-radius: var(--radius); background-color: white; /* 内部背景 */ animation: scalePulse-5b62ffe9 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-5b62ffe9 { 0% { transform: scale(1); } 25% { /* 先收缩一点点 */ transform: scale(0.94); } 65% { /* 再放大到略超出的感觉 */ transform: scale(1.08); } 100% { transform: scale(1); } }