.move-circle[data-v-e20c63a2] { position: absolute; bottom: 0; right: 0; width: 10.9375rem; height: 10.9375rem; display: flex; justify-content: center; align-items: center; z-index: 99; touch-action: none; } .move-circle .click-box-top[data-v-e20c63a2] { position: absolute; top: 0.625rem; right: 2.1875rem; width: 6.875rem; height: 2.5rem; } .move-circle .click-box-bottom[data-v-e20c63a2] { position: absolute; bottom: 0.625rem; right: 2.1875rem; width: 6.875rem; height: 2.5rem; } .move-circle .click-box-right[data-v-e20c63a2] { position: absolute; bottom: 3.125rem; right: 0; width: 2.8125rem; height: 4.6875rem; } .move-circle .click-box-left[data-v-e20c63a2] { position: absolute; bottom: 3.125rem; left: 0; width: 2.8125rem; height: 4.6875rem; } .move-circle .click-box-center[data-v-e20c63a2] { position: absolute; bottom: 4.0625rem; right: 4.0625rem; width: 2.8125rem; height: 2.8125rem; } .move-circle-all[data-v-e20c63a2] { width: 10.9375rem; height: 10.9375rem; } .light-shadow[data-v-e20c63a2] { position: absolute; width: 1.25rem; height: 1.25rem; background-color: transparent; border: 1.875rem solid #3da6ff; border-radius: 50%; pointer-events: none; opacity: 1; } /* 无限循环波纹动画,长按时用 */ .ripple-loop[data-v-e20c63a2] { animation: rippleLoop-e20c63a2 1.2s ease-out infinite; } /* 点击一次的波纹动画 */ .ripple-once[data-v-e20c63a2] { animation: rippleLoop-e20c63a2 1.2s ease-out forwards; } @keyframes rippleLoop-e20c63a2 { 0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; } } .light-circle[data-v-e20c63a2] { position: relative; width: 150px; height: 150px; border-radius: 50%; background: #111; /* 你背景色自己改 */ overflow: visible; } .circle[data-v-e20c63a2] { position: relative; width: 150px; height: 150px; border-radius: 50%; background: #222; margin: 50px; } .pulse-circle[data-v-e20c63a2] { position: absolute; top: 50%; right: 50%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #03a4ff 0%, transparent 70%); animation: pulse-e20c63a2 3s forwards; } @keyframes pulse-e20c63a2 { 0% { width: 0; height: 0; opacity: 0.8; } 50% { width: 10.9375rem; height: 10.9375rem; opacity: 0.4; } 100% { width: 0; height: 0; opacity: 0; } } .view[data-v-4b26e9e6] { background-color: #eff0f4; width: 100%; height: 100vh; display: flex; } .view .view-left[data-v-4b26e9e6] { height: 100%; width: 23%; } .view .view-left .title-father[data-v-4b26e9e6] { padding-top: 3.75rem; padding-bottom: 1.5625rem; padding-left: 1.875rem; display: flex; } .view .view-left .title-father .title-img[data-v-4b26e9e6] { width: 1.71875rem; height: 1.71875rem; margin-right: 0.625rem; } .view .view-left .title-father .title-font[data-v-4b26e9e6] { font-size: 1.25rem; font-weight: 800; } .view .view-left .menus-father[data-v-4b26e9e6] { width: 100%; height: 28.125rem; } .view .view-left .menus-father .menu[data-v-4b26e9e6] { margin: 1.40625rem 0; margin-left: 0.9375rem; height: 3.4375rem; width: 12.5rem; border-radius: 1.875rem; overflow: hidden; display: flex; align-items: center; } .view .view-left .menus-father .menu .menu-img[data-v-4b26e9e6] { width: 2.03125rem; height: 2.03125rem; margin-left: 0.78125rem; display: flex; justify-content: center; align-items: center; border-radius: 50%; } .view .view-right[data-v-4b26e9e6] { height: 100%; width: 90%; position: relative; } .view .view-right .scroll-vi[data-v-4b26e9e6] { height: 3.125rem; width: 100%; margin-left: 0; margin-top: 3.125rem; position: relative; display: flex; } .view .view-right .scroll-vi .menu[data-v-4b26e9e6] { flex: 0 0 auto; height: 2.8125rem; width: 7.5rem; border-radius: 1.5625rem; margin-left: 0.625rem; background-color: #fff; display: flex; justify-content: center; align-items: center; padding-top: 0.28125rem; } .view .view-right .scroll-vi .menu .menu-img[data-v-4b26e9e6] { width: 1.71875rem; height: 1.71875rem; margin-right: 0.46875rem; } .view .view-right .scroll-vi .menu .menu-font[data-v-4b26e9e6] { margin-top: 0.5625rem; font-size: 0.78125rem; } .new-weight[data-v-4b26e9e6] { margin: 0 0.9375rem; margin-top: 1.25rem; font-size: 1rem; } .big-bgc[data-v-4b26e9e6] { margin-left: -0.625rem; margin-top: 0.625rem; width: 41.25rem; height: 32.65625rem; border-radius: 1.5625rem; overflow: hidden; display: flex; justify-content: center; align-items: center; position: relative; } @keyframes glowFlash-4b26e9e6 { 0%, 100% { box-shadow: 0 0 0.125rem #f1d7da, 0 0 0.25rem #f1d7da, 0 0 0.375rem #f1d7da; } 50% { box-shadow: 0 0 0.3125rem #f1d7da, 0 0 0.625rem #f1d7da, 0 0 0.9375rem #f1d7da; } } .right-right[data-v-4b26e9e6] { position: absolute; right: -0.625rem; top: 7.1875rem; height: calc(100% - 7.8125rem); width: 20.3125rem; } .right-right .red-kuang[data-v-4b26e9e6] { margin-top: 0; margin-left: 2.8125rem; width: 15.9375rem; height: 3.75rem; border-radius: 1.5625rem; position: relative; display: flex; align-items: center; background-color: rgba(226, 227, 231, 0.5); } .right-right .red-kuang .blue-bgc[data-v-4b26e9e6] { width: 3.75rem; height: 1.5625rem; display: flex; justify-content: center; align-items: center; z-index: 1; font-size: 0.71875rem; background-color: rgba(248, 249, 250, 0.5); color: #017DE9; border-radius: 0.625rem; margin-left: 0.9375rem; } .right-right .red-kuang .font-weight[data-v-4b26e9e6] { font-size: 0.9375rem; font-weight: 600; } .right-right .red-kuang .font-small[data-v-4b26e9e6] { font-size: 0.78125rem; } .states-father[data-v-4b26e9e6] { display: flex; margin-top: 0.625rem; margin-left: 2.8125rem; width: 100%; } .states-father .states[data-v-4b26e9e6] { width: 4.90625rem; margin-right: 0.46875rem; height: 1.875rem; border-radius: 1.875rem; background-color: rgba(226, 227, 231, 0.5); display: flex; justify-content: center; align-items: center; } .states-father .phone-number[data-v-4b26e9e6] { width: 100%; height: 2.5rem; display: flex; align-items: center; position: relative; } .bottom-view[data-v-4b26e9e6] { margin-left: 2.8125rem; margin-top: 0.625rem; width: 15.9375rem; height: 21.5625rem; border-radius: 1.5625rem; background-color: rgba(226, 227, 231, 0.5); position: relative; display: flex; flex-wrap: wrap; overflow: hidden; align-items: flex-start; align-content: flex-start; } .bottom-view .button-father[data-v-4b26e9e6] { margin-top: 0.625rem; margin-bottom: 0; margin-left: 1.40625rem; text-align: center; } .bottom-view .button-father .bottom-button[data-v-4b26e9e6] { background-color: #F2F2F4; display: flex; justify-content: center; align-items: center; width: 3.4375rem; height: 3.4375rem; border: 0.03125rem solid #CDD3DD; border-radius: 1.09375rem; margin-bottom: 0.15625rem; } .big-view[data-v-4b26e9e6] { margin-left: 2.8125rem; margin-top: 0.625rem; width: 15.9375rem; height: 10.625rem; border-radius: 1.5625rem; background-color: rgba(226, 227, 231, 0.5); position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; } .big-view .font-weight[data-v-4b26e9e6] { font-size: 1.25rem; margin-top: 0.9375rem; font-weight: 600; } .big-view .pao[data-v-4b26e9e6] { position: absolute; right: 1.25rem; top: 0.625rem; width: 2.65625rem; height: 1.25rem; display: flex; justify-content: center; align-items: center; color: #fff; } .small-button[data-v-4b26e9e6] { margin-top: 0.3125rem; height: 2.1875rem; display: flex; } .small-button .gray-ball[data-v-4b26e9e6] { display: flex; justify-content: center; align-items: center; background-color: #F8F9FA; width: 1.875rem; height: 1.875rem; border-radius: 50%; margin: 0 0.3125rem; } .small-button .gray-ball .laba-img[data-v-4b26e9e6] { width: 1.09375rem; height: 1.09375rem; } .right-bottom[data-v-4b26e9e6] { margin-left: 1.5625rem; margin-top: 0.9375rem; width: 17.1875rem; height: 7.5rem; border-radius: 1.5625rem; background-color: rgba(226, 227, 231, 0.5); position: relative; } .right-bottom .bottom-img[data-v-4b26e9e6] { width: 1.875rem; height: 1.875rem; margin-bottom: 0.9375rem; } .right-bottom .people-card[data-v-4b26e9e6] { width: 7.65625rem; height: 3.125rem; border-radius: 0.78125rem; background-color: rgba(248, 249, 250, 0.5); margin-left: 0.625rem; display: flex; justify-content: center; align-items: center; } .right-father[data-v-4b26e9e6] { width: 20.3125rem; position: absolute; right: 0; top: 0; display: flex; justify-content: center; align-items: center; } .warning[data-v-4b26e9e6] { animation: glowFlash-4b26e9e6 1.2s infinite ease-in-out; border: 0.03125rem solid #ff5757; background-color: rgba(239, 240, 244, 0.5); } .zoom[data-v-4b26e9e6] { transform: scale(1.2); transform-origin: bottom left; transition: transform 1s ease; } .juzhong[data-v-4b26e9e6] { position: absolute; top: 0%; left: 50%; transform: translateX(-50%); } .zhezhao-left[data-v-4b26e9e6] { position: absolute; top: 0; left: 0%; height: 100%; width: 3.75rem; background: linear-gradient(to right, #eff0f4 0%, /* #eff0f4 全不透明 */ rgba(239, 240, 244, 0) 100% /* #eff0f4 完全透明 */); z-index: 4; pointer-events: none; } .zhezhao-right[data-v-4b26e9e6] { position: absolute; top: 0; right: 34%; height: 100%; width: 3.75rem; background: linear-gradient(to left, #eff0f4 0%, /* #eff0f4 全不透明 */ rgba(239, 240, 244, 0) 100% /* #eff0f4 完全透明 */); z-index: 4; pointer-events: none; } .zhezhao-top[data-v-4b26e9e6] { position: absolute; top: 6.875rem; left: 0%; width: 14.0625rem; height: 3.75rem; background: linear-gradient(to bottom, #eff0f4 0%, /* #eff0f4 全不透明 */ rgba(239, 240, 244, 0) 100% /* #eff0f4 完全透明 */); z-index: 4; pointer-events: none; } .zhezhao-bottom[data-v-4b26e9e6] { position: absolute; bottom: 11.875rem; left: 0%; width: 14.0625rem; height: 3.75rem; background: linear-gradient(to top, #eff0f4 0%, /* #eff0f4 全不透明 */ rgba(239, 240, 244, 0) 100% /* #eff0f4 完全透明 */); z-index: 4; pointer-events: none; } .bgc-image[data-v-4b26e9e6] { width: 15.625rem; height: 6.25rem; position: absolute; top: -1.5625rem; left: 0; } .font-phone[data-v-4b26e9e6] { font-size: 1.09375rem; font-weight: 600; margin-left: 0.9375rem; } .phone-ball[data-v-4b26e9e6] { width: 1.5625rem; height: 1.5625rem; position: absolute; top: 50%; transform: translateY(-50%); right: 4.0625rem; } .target[data-v-4b26e9e6] { --color: #99C9FD; --thick: 2px; --radius: 1.875rem; --outline-offset: 0; /* 外扩多少 */ /* 内层虚线(你现在用的) */ border-radius: var(--radius); background-color: #ddf0ff; /* 内部背景 */ 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: 1; } .targetbutton[data-v-4b26e9e6] { --color: #99C9FD; --thick: 2px; --radius: 1.875rem; --outline-offset: 0.3125rem; /* 外扩多少 */ /* 内层虚线(你现在用的) */ border-radius: var(--radius); /* 内部背景 */ 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: 1; } .picture[data-v-4b26e9e6] { display: flex; margin-top: 0.9375rem; } .picture .picture-card[data-v-4b26e9e6] { display: flex; flex-direction: column; justify-content: center; align-items: center; margin-left: 0.625rem; margin-right: 0.3125rem; width: 6.25rem; } .picture .picture-card .bgc-card[data-v-4b26e9e6] { width: 100%; height: 4.0625rem; background-color: #EAEAEC; border-radius: 0.9375rem; display: flex; justify-content: center; align-items: center; margin-bottom: 0.3125rem; } .jump-white[data-v-4b26e9e6] { position: absolute; bottom: 0.625rem; left: 1.5625rem; width: 9.375rem; height: 12.5rem; background-color: #fff; border-radius: 0.9375rem; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); } .jump-item[data-v-4b26e9e6] { margin: 0.3125rem 0.3125rem; height: 1.875rem; justify-content: center; width: 93%; display: flex; border-radius: 0.625rem; align-items: center; }