.backgroundContainer[data-v-82a72f7e] { 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-82a72f7e] { 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-82a72f7e] { 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-82a72f7e] { display: flex; height: 100%; align-items: center; margin-top: 0.625rem; } .index-title .index-title-left .index-title-left-img[data-v-82a72f7e] { width: 2.34375rem; height: 2.34375rem; } .index-title .index-title-left .index-title-left-font[data-v-82a72f7e] { margin-left: 0.625rem; } .index-title .index-title-left .index-title-left-wel[data-v-82a72f7e] { margin-left: 1.25rem; } .index-title .index-title-left .index-title-left-weight[data-v-82a72f7e] { font-weight: 700; margin: 0 0.3125rem; } .index-title .index-title-right[data-v-82a72f7e] { display: flex; height: 100%; align-items: center; margin-top: 0.625rem; } .index-title .index-title-right .index-title-right-circle[data-v-82a72f7e] { width: 1.875rem; height: 1.875rem; border-radius: 50%; background-color: #cde0f8; display: flex; justify-content: center; align-items: center; } .index-title .index-title-right .index-title-right-circle .index-title-right-circle-img[data-v-82a72f7e] { width: 1.09375rem; height: 1.09375rem; } .index-title .index-title-right .index-title-right-font[data-v-82a72f7e] { margin-left: 0.625rem; font-weight: 700; } .index-content[data-v-82a72f7e] { width: 100%; height: calc(100vh - 4.6875rem); display: flex; } .index-content .index-content-leftMenus[data-v-82a72f7e] { height: 100%; width: 5.625rem; display: flex; justify-content: center; align-items: center; flex-direction: column; } .index-content .index-content-leftMenus .left-img[data-v-82a72f7e] { width: 2.90625rem; height: 2.90625rem; z-index: 100; } .index-content .index-content-leftMenus .left-img-font[data-v-82a72f7e] { margin-top: 0.3125rem; color: #fff; } .index-content .index-content-leftMenus .left-img-font-target[data-v-82a72f7e] { margin-top: 0.3125rem; color: #0174D3; } .index-content .index-content-leftMenus .blue-circle-pos[data-v-82a72f7e] { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 6.25rem; } .index-content .index-content-leftMenus .blue-circle-pos .blue-circle[data-v-82a72f7e] { position: absolute; top: -1.5625rem; left: -2.125rem; } .index-content .index-content-leftMenus .blue-circle-pos .blue-circle .blue-circle-size[data-v-82a72f7e] { width: 5.3125rem; height: 7.8125rem; } .red-pao[data-v-82a72f7e] { position: absolute; top: 0.9375rem; left: 1.875rem; padding: 0.09375rem 0.3125rem; background-color: #FF4C4E; color: #fff; font-size: 0.625rem; border-radius: 0.625rem; z-index: 101; } .index-content-other[data-v-82a72f7e] { width: 100%; height: 100%; } .index-content-right[data-v-82a72f7e] { height: calc(100% - 3.125rem); width: calc(100% - 1.875rem); background-color: rgba(255, 255, 255, 0.5); /* 白色背景透明度为 10% */ background-image: url('../../static/index/mountain.png'); background-position: 70% 45%; border-radius: 1.5625rem; box-shadow: 0.125rem 0.25rem 0.5rem 0.125rem rgba(0, 0, 0, 0.3); border-radius: 0.03125rem solid #fff; } .index-content-right .index-right-height[data-v-82a72f7e] { height: 0.625rem; } .index-content-right .index-right-title[data-v-82a72f7e] { margin-left: 0.9375rem; width: calc(100% - 1.875rem); height: 3.75rem; background: linear-gradient(to right, #C4E0FD, #D5CDFF, #D9ECFF); border-radius: 1.09375rem; border: 0.0625rem solid #fff; display: flex; align-items: center; } .index-content-right .index-right-title .index-right-name[data-v-82a72f7e] { margin-left: 0.625rem; margin-right: 0.3125rem; color: #19233B; font-size: 0.9375rem; } .index-content-right .index-right-title .index-right-input[data-v-82a72f7e] { font-size: 0.84375rem; width: 8.125rem; border: 0.0625rem #a0adc8 solid; padding: 0.46875rem 0 0.46875rem 0.625rem; background-color: #eaf3fe; border-radius: 0.3125rem; } .index-content-right .index-right-title .index-right-button-all[data-v-82a72f7e] { height: 100%; margin-left: auto; display: flex; align-items: center; } .index-content-right .index-right-title .index-right-button-all .index-right-button[data-v-82a72f7e] { height: 2.1875rem; background: linear-gradient(to right bottom, #00c9ff, #0076ff); color: #fff; font-size: 0.9375rem; display: flex; align-items: center; border-radius: 0.3125rem; border: 0.03125rem solid #fff; margin-right: 0.625rem; } .index-content-right .index-right-title .index-right-button-all .index-right-button .index-right-button-img[data-v-82a72f7e] { width: 1.40625rem; height: 1.40625rem; margin: 0 0.15625rem 0 0.3125rem; } .index-content-right .index-right-title .index-right-button-all .index-right-button .index-right-button-font[data-v-82a72f7e] { margin-right: 0.625rem; } .index-content-down[data-v-82a72f7e] { width: calc(100% - 1.875rem); height: 3.125rem; display: flex; justify-content: flex-end; align-items: center; } .swiper-contain[data-v-82a72f7e] { width: 100%; margin-left: 0.3125rem; height: calc(100% - 4.375rem); } .swiper-contain .swiper-flex[data-v-82a72f7e] { display: flex; flex-wrap: wrap; } .swiper-contain .swiper-flex .swiper-card[data-v-82a72f7e] { margin: 0.625rem 0 0 0.625rem; width: 31.46875rem; height: 16.5625rem; border: 0.0625rem solid #fff; border-radius: 0.9375rem; /* 设置背景图和白色背景 */ background: url("../../static/index/clearmountain.png") center / cover, rgba(255, 255, 255, 0.5); /* 使用 screen 混合模式,让图像与白色混合变淡 */ background-blend-mode: screen; isolation: isolate; box-shadow: 0.0625rem 0.0625rem 0.125rem 0 rgba(0, 0, 0, 0.3); display: flex; } .swiper-contain .swiper-flex .swiper-card .swiper-card-left[data-v-82a72f7e] { height: 100%; width: 12.5rem; } .swiper-contain .swiper-flex .swiper-card .swiper-card-left .swiper-card-left-white[data-v-82a72f7e] { margin: 1.25rem 0 1.09375rem 1.25rem; width: 10.9375rem; height: 10.9375rem; background-color: rgba(255, 255, 255, 0.3); display: flex; border-radius: 0.9375rem; justify-content: center; align-items: center; } .swiper-contain .swiper-flex .swiper-card .swiper-card-left .swiper-card-left-white .swiper-card-left-white-img[data-v-82a72f7e] { width: 9.375rem; height: 9.375rem; } .swiper-contain .swiper-flex .swiper-card .swiper-card-left .swiper-left-buttons[data-v-82a72f7e] { display: flex; } .swiper-contain .swiper-flex .swiper-card .swiper-card-left .swiper-left-buttons .swiper-left-button[data-v-82a72f7e] { display: flex; justify-content: center; align-items: center; width: 5.15625rem; height: 2.1875rem; border-radius: 1.25rem; background: linear-gradient(to bottom, #D5E0F8, #ECF6FF); border: 0.03125rem #fff solid; } .swiper-contain .swiper-flex .swiper-card .swiper-card-left .swiper-left-buttons .swiper-left-button-blue[data-v-82a72f7e] { display: flex; justify-content: center; align-items: center; width: 5.15625rem; height: 2.1875rem; border-radius: 1.25rem; background: linear-gradient(to right bottom, #00c9ff, #0076ff); color: #fff; border: 0.03125rem #fff solid; margin-right: 0.625rem; margin-left: 1.25rem; } .swiper-contain .swiper-flex .swiper-card .swiper-card-right[data-v-82a72f7e] { height: 100%; width: 17.5rem; margin-left: 1.25rem; } .swiper-contain .swiper-flex .swiper-card .swiper-card-right .swiper-right-title[data-v-82a72f7e] { margin-top: 1.09375rem; display: flex; justify-content: space-between; } .swiper-contain .swiper-flex .swiper-card .swiper-card-right .swiper-right-title .swiper-title-font[data-v-82a72f7e] { font-weight: 700; font-size: 1.25rem; } .swiper-contain .swiper-flex .swiper-card .swiper-card-right .swiper-right-title .swiper-title-mark[data-v-82a72f7e] { background-color: #d6d4f5; color: #19233B; padding: 0.15625rem 0.78125rem; font-size: 0.9375rem; border-radius: 0.78125rem; margin-right: 0.625rem; } .swiper-heng[data-v-82a72f7e] { width: 3.125rem; height: 0.3125rem; background: linear-gradient(to right, #0EA7DD, #047ADB); border-radius: 0.9375rem; margin-top: 0.3125rem; margin-bottom: 0.9375rem; } .popup-detail[data-v-82a72f7e] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; -webkit-backdrop-filter: blur(0.03125rem); backdrop-filter: blur(0.03125rem); background-color: rgba(89, 109, 154, 0.4); /* 添加毛玻璃效果 */ z-index: 999; } .popup-detail .popup-detail-content[data-v-82a72f7e] { display: flex; width: 46.875rem; height: 28.125rem; background: url("../../static/index/lightbgcnew.png") center / cover, rgba(255, 255, 255, 0.5); background-blend-mode: screen; border: 0.0625rem solid #fff; /* 使用 screen 混合模式,让图像与白色混合变淡 */ border-radius: 0.9375rem; box-shadow: 0.3125rem 0.3125rem 0.625rem rgba(0, 0, 0, 0.1); transition: opacity 0.4s ease; } .popup-detail .popup-detail-content .popup-detail-left[data-v-82a72f7e] { height: 100%; width: 45%; } .popup-detail .popup-detail-content .popup-detail-left .popup-detail-left-white[data-v-82a72f7e] { margin: 2.1875rem 0 0 2.1875rem; width: 18.75rem; height: 18.75rem; background-color: rgba(255, 255, 255, 0.3); display: flex; border-radius: 0.9375rem; justify-content: center; align-items: center; } .popup-detail .popup-detail-content .popup-detail-left .popup-detail-left-white .popup-detail-left-white-img[data-v-82a72f7e] { width: 17.1875rem; height: 17.1875rem; } .popup-detail .popup-detail-content .popup-detail-left .popup-detail-left-bottom[data-v-82a72f7e] { width: calc(100% - 2.1875rem); margin-left: 2.1875rem; height: 7.1875rem; background-color: #fff; } .popup-detail .popup-detail-content .popup-detail-right[data-v-82a72f7e] { height: 100%; width: 55%; }