.index-content-other[data-v-764689cb] { width: calc(100% - 5.3125rem); height: 100%; transition: opacity 1s ease; } .index-content-down[data-v-764689cb] { width: calc(100% - 1.875rem); height: 3.125rem; display: flex; justify-content: flex-end; align-items: center; } .index-content-right[data-v-764689cb] { height: calc(100% - 3.125rem); width: calc(100% - 1.875rem); background-color: rgba(255, 255, 255, 0.8); background-image: url('../../static/index/leida/bgc.png'); background-position: 30% 70%; border-radius: 1.5625rem; box-shadow: 0.125rem 0.25rem 0.5rem 0.125rem rgba(0, 0, 0, 0.3); display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; } .index-content-right .index-content-title[data-v-764689cb] { position: absolute; top: 1.875rem; left: 1.875rem; display: flex; align-items: center; } .index-content-right .index-content-title .shu[data-v-764689cb] { width: 0.625rem; height: 1.5625rem; background: linear-gradient(to right, #0052C2, #00B4FF); border-radius: 0.625rem; margin-right: 0.9375rem; } .index-content-right .index-content-title .shu-font[data-v-764689cb] { color: #415273; font-size: 1.09375rem; } .big-photo[data-v-764689cb] { width: 37.5rem; height: 25rem; } .big-text[data-v-764689cb] { position: absolute; bottom: 3.75rem; left: 50%; transform: translateX(-50%); width: 25rem; display: flex; flex-direction: column; align-items: center; color: #415273; } .button-father[data-v-764689cb] { display: flex; width: 25rem; justify-content: space-between; margin-bottom: 6.25rem; } .button-father .ball-father[data-v-764689cb] { display: flex; justify-content: center; align-items: center; flex-direction: column; } .button-father .ball-bgc[data-v-764689cb] { width: 4.0625rem; height: 4.0625rem; background-color: #E3E6F1; display: flex; justify-content: center; align-items: center; border-radius: 50%; margin-bottom: 0.46875rem; } .button-father .ball-bgc-target[data-v-764689cb] { width: 4.0625rem; height: 4.0625rem; background: linear-gradient(to bottom, #00C9FF, #0076FF); display: flex; justify-content: center; align-items: center; border-radius: 50%; margin-bottom: 0.46875rem; } .button-father .ball-img[data-v-764689cb] { width: 2.5rem; height: 2.5rem; } .index-content-other[data-v-14770cca] { width: calc(100% - 5.3125rem); height: 100%; transition: opacity 1s ease; position: relative; } .index-content-down[data-v-14770cca] { width: calc(100% - 1.875rem); height: 3.125rem; display: flex; justify-content: flex-end; align-items: center; } .index-content-right[data-v-14770cca] { height: calc(100% - 3.125rem); width: calc(100% - 1.875rem); background-color: rgba(255, 255, 255, 0.8); background-image: url('../../static/index/leida/bgc.png'); background-position: 30% 70%; border-radius: 1.5625rem; box-shadow: 0.125rem 0.25rem 0.5rem 0.125rem rgba(0, 0, 0, 0.3); display: flex; position: relative; } .leida[data-v-14770cca] { margin-top: 0.9375rem; height: 100%; width: 35%; display: flex; justify-content: center; align-items: center; flex-direction: column; position: relative; } .kutong-father[data-v-14770cca] { width: 9.375rem; height: 14.0625rem; position: relative; } .kutong-img[data-v-14770cca] { position: absolute; top: 0; left: 0; width: 9.375rem; height: 9.375rem; } .kutong-shan[data-v-14770cca] { position: absolute; top: 0; left: 0; width: 4.6875rem; height: 6.4375rem; transform-origin: 100% 73%; } .spin-anim[data-v-14770cca] { animation: spin-14770cca 2s linear infinite; animation-play-state: running; } .no-anim[data-v-14770cca] { animation: spin-14770cca 2s linear infinite; animation-play-state: paused; } .spin-anim-spec[data-v-14770cca] { animation: spinx-14770cca 2s linear infinite; animation-play-state: running; } .no-anim-spec[data-v-14770cca] { animation: spinx-14770cca 2s linear infinite; animation-play-state: paused; } .huan[data-v-14770cca] { position: absolute; top: -2.03125rem; left: -2.03125rem; width: 13.4375rem; height: 13.4375rem; border: 0.625rem solid #cedcf5; border-radius: 50%; } .quarter-ring[data-v-14770cca] { position: absolute; top: -5%; left: -5%; width: 110%; height: 110%; box-sizing: border-box; border: 0.625rem solid transparent; border-top-color: #03a9ff; border-radius: 50%; transform: rotate(0deg); transform-origin: center center; } .jindutiao[data-v-14770cca] { width: 12.5rem; border-radius: 0.625rem; height: 0.625rem; background-color: #a6c9fa; overflow: hidden; } .progress-fill[data-v-14770cca] { width: 100%; height: 100%; background: linear-gradient(to bottom, #00C9FF, #0076FF); transform-origin: left center; will-change: transform; transition: transform 0.05s linear; } .color-font[data-v-14770cca] { color: #415273; margin-top: 0.625rem; height: 0.625rem; } .agagin-button[data-v-14770cca] { width: 7.5rem; height: 2.8125rem; margin-top: 2.5rem; border-radius: 1.09375rem; background: linear-gradient(to bottom, #00C9FF, #0076FF); display: flex; justify-content: center; align-items: center; color: #fff; } .other[data-v-14770cca] { width: 65%; height: 100%; } .other-father[data-v-14770cca] { margin-top: 4.6875rem; height: calc(100% - 4.6875rem); width: 100%; } .card-father[data-v-14770cca] { width: 100%; display: flex; flex-wrap: wrap; } .card[data-v-14770cca] { width: 45%; margin-left: 3%; height: 16.5625rem; box-shadow: 0.0625rem 0.125rem 0.25rem 0.0625rem rgba(0, 0, 0, 0.3); background-color: #fff; border-radius: 0.9375rem; margin-bottom: 1.09375rem; padding: 0 0.78125rem; position: relative; } .card .rename-father[data-v-14770cca] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 17.1875rem; height: 10.9375rem; 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; } .card .rename-father .rename-title[data-v-14770cca] { width: 100%; height: 2.5rem; border-bottom: 0.0625rem solid #f5f5f5; display: flex; justify-content: center; align-items: center; } .card .rename-father .rename-gray[data-v-14770cca] { width: 100%; height: 2.5rem; display: flex; color: #a7a7a7; align-items: center; } .card .rename-father .rename-input[data-v-14770cca] { 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; } .card .rename-father .rename-input .uni-input[data-v-14770cca] { font-size: 0.78125rem; } .card .rename-father .rename-input .left-img[data-v-14770cca] { width: 1.5625rem; height: 1.5625rem; margin-right: 0.46875rem; } .card .rename-father .rename-input .right-img[data-v-14770cca] { position: absolute; right: 0.9375rem; top: 50%; transform: translateY(-50%); width: 0.9375rem; height: 0.9375rem; } .card-title[data-v-14770cca] { width: 100%; height: 4.0625rem; display: flex; align-items: center; justify-content: space-between; } .card-middle[data-v-14770cca] { width: 100%; height: 10rem; display: flex; justify-content: space-between; } .video-box[data-v-14770cca] { width: 82%; height: 10rem; background-color: #E5ECFA; display: flex; justify-content: center; align-items: center; border-radius: 0.625rem; } .video-box-img[data-v-14770cca] { width: 2.5rem; height: 2.5rem; } /* 旋转动画 */ @keyframes spin-14770cca { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes spinx-14770cca { from { transform: rotate(-70deg); } to { transform: rotate(290deg); } } /* 新卡片淡入动画 */ @keyframes fadeIn-14770cca { from { opacity: 0; transform: translateY(0.3125rem); } to { opacity: 1; transform: translateY(0); } } .fade-in[data-v-14770cca] { animation: fadeIn-14770cca 0.4s ease-out forwards; } .index-content-title[data-v-14770cca] { position: absolute; top: 1.875rem; left: 1.875rem; display: flex; align-items: center; } .index-content-title .shu[data-v-14770cca] { 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-14770cca] { color: #415273; font-size: 1.09375rem; } .right-box[data-v-14770cca] { background: #00abff; width: 5rem; height: 2.03125rem; border-radius: 0.625rem; display: flex; justify-content: center; align-items: center; color: #fff; } .small-menu[data-v-14770cca] { width: 2.34375rem; height: 2.28125rem; border-radius: 0.625rem; background-color: #E7ECFA; display: flex; justify-content: center; align-items: center; margin-bottom: 0.3125rem; } .small-menu .small-img[data-v-14770cca] { height: 1.5625rem; width: 1.5625rem; } .card-bottom[data-v-14770cca] { margin-top: 0.53125rem; margin-left: 0.3125rem; display: flex; } .card-bottom .bottom-img[data-v-14770cca] { width: 1.1875rem; height: 1.1875rem; margin-left: 0.9375rem; } .blue-button[data-v-14770cca] { margin-top: 0.625rem; width: 5.625rem; height: 2.1875rem; border-radius: 0.9375rem; display: flex; justify-content: center; align-items: center; color: #fff; background: linear-gradient(to bottom, #00C9FF, #0076FF); } .index-content-other[data-v-ab7f57c7] { width: calc(100% - 5.3125rem); height: 100%; transition: opacity 1s ease; position: relative; } .index-content-down[data-v-ab7f57c7] { width: calc(100% - 1.875rem); height: 3.125rem; display: flex; justify-content: flex-end; align-items: center; } .index-content-right[data-v-ab7f57c7] { height: calc(100% - 3.125rem); width: calc(100% - 1.875rem); background-color: rgba(255, 255, 255, 0.8); background-image: url('../../static/index/leida/bgc.png'); background-position: 30% 70%; border-radius: 1.5625rem; box-shadow: 0.125rem 0.25rem 0.5rem 0.125rem rgba(0, 0, 0, 0.3); display: flex; position: relative; } .index-content-right .index-content-title[data-v-ab7f57c7] { position: absolute; top: 1.875rem; left: 1.875rem; display: flex; align-items: center; } .index-content-right .index-content-title .shu[data-v-ab7f57c7] { width: 0.625rem; height: 1.5625rem; background: linear-gradient(to right, #0052C2, #00B4FF); border-radius: 0.625rem; margin-right: 0.9375rem; } .index-content-right .index-content-title .shu-font[data-v-ab7f57c7] { color: #415273; font-size: 1.09375rem; } .saomiao[data-v-ab7f57c7] { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12.5rem; height: 12.5rem; background-image: url("../../static/index/leida/fourjiao.png"); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } .saomiao[data-v-ab7f57c7]::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; /* 初始给个向下的阴影(扫描线起点在顶部) */ animation: scanMove-ab7f57c7 1.3s ease-in-out infinite; z-index: 1001; height: 2.5rem; background: linear-gradient(to bottom, rgba(5, 170, 254, 0.6), rgba(5, 170, 254, 0.1), transparent); will-change: transform; } .saomiao .saomiao-son[data-v-ab7f57c7] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 11.25rem; height: 11.25rem; border-radius: 1.5625rem; background-color: #dae4f8; } .saomiao .saomiao-son .saomiao-son-son[data-v-ab7f57c7] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10rem; height: 10rem; border-radius: 1.5625rem; background-color: #d0e0f6; } .saomiao .saomiao-son .saomiao-son-son .saomiao-son-son-img[data-v-ab7f57c7] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 7.8125rem; height: 7.8125rem; border-radius: 0.9375rem; background-image: url("../../static/index/leida/QR.png"); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } @keyframes scanMove-ab7f57c7 { 0% { top: 10%; } 100% { top: 80%; } } .backgroundContainer[data-v-41b2a00b] { display: flex; flex-direction: column; position: relative; width: 100%; height: 100vh; background-image: url('../../static/index/lightbgcnew.png'); background-size: cover; background-position: center center; overflow: hidden; } .darkbackgroundContainer[data-v-41b2a00b] { display: flex; flex-direction: column; position: relative; width: 100%; height: 100vh; background-image: url('../../static/index/background.png'); background-size: cover; background-position: center center; overflow: hidden; } .index-title[data-v-41b2a00b] { display: flex; width: calc(100% - 3.4375rem); height: 4.0625rem; justify-content: space-between; margin: 0.625rem 1.5625rem 0 1.875rem; } .index-title .index-title-left[data-v-41b2a00b] { display: flex; height: 100%; align-items: center; margin-top: 0.625rem; } .index-title .index-title-left .index-title-left-img[data-v-41b2a00b] { width: 2.34375rem; height: 2.34375rem; } .index-title .index-title-left .index-title-left-font[data-v-41b2a00b] { margin-left: 0.625rem; } .index-title .index-title-left .index-title-left-wel[data-v-41b2a00b] { margin-left: 1.25rem; } .index-title .index-title-left .index-title-left-weight[data-v-41b2a00b] { font-weight: 700; margin: 0 0.3125rem; } .index-title .index-title-right[data-v-41b2a00b] { display: flex; height: 100%; align-items: center; margin-top: 0.625rem; } .index-title .index-title-right .top-card[data-v-41b2a00b] { width: 5.625rem; height: 1.71875rem; border-radius: 0.9375rem; background-color: #E2E7FF; display: flex; align-items: center; margin-right: 0.625rem; } .index-title .index-title-right .top-card .top-card-img[data-v-41b2a00b] { width: 1.09375rem; height: 1.09375rem; margin-right: 0.15625rem; margin-left: 0.625rem; } .index-title .index-title-right .top-card .top-card-font[data-v-41b2a00b] { font-size: 0.78125rem; } .index-content[data-v-41b2a00b] { width: 100%; height: calc(100vh - 4.6875rem); display: flex; } .index-content .index-content-leftMenus[data-v-41b2a00b] { height: 100%; width: 5.3125rem; display: flex; justify-content: center; align-items: center; flex-direction: column; } .index-content .index-content-leftMenus .left-img[data-v-41b2a00b] { width: 2.90625rem; height: 2.90625rem; z-index: 100; } .index-content .index-content-leftMenus .left-img-font[data-v-41b2a00b] { margin-top: 0.3125rem; color: #fff; } .index-content .index-content-leftMenus .left-img-font-target[data-v-41b2a00b] { margin-top: 0.3125rem; color: #0174D3; } .index-content .index-content-leftMenus .blue-circle-pos[data-v-41b2a00b] { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 7.1875rem; } .index-content .index-content-leftMenus .blue-circle-pos .blue-circle[data-v-41b2a00b] { position: absolute; top: -1.5625rem; left: -2.125rem; } .index-content .index-content-leftMenus .blue-circle-pos .blue-circle .blue-circle-size[data-v-41b2a00b] { width: 5.3125rem; height: 7.8125rem; } .red-pao[data-v-41b2a00b] { position: absolute; top: 1.25rem; left: 1.875rem; padding: 0.09375rem 0.3125rem; background-color: #FF4C4E; color: #fff; font-size: 0.625rem; border-radius: 0.625rem; z-index: 101; } .ball-bgc[data-v-41b2a00b] { width: 1.8125rem; height: 1.8125rem; border-radius: 50%; background-color: #E2E7FF; display: flex; align-items: center; justify-content: center; margin-right: 0.78125rem; } .ball-bgc .ball-img[data-v-41b2a00b] { width: 1.1875rem; height: 1.1875rem; }