@import url("static-qianhai/style/main.css"); html, body, #app { height: 100%; } .el-loading-spinner .path { stroke: #037cfc; } .el-loading-spinner .el-loading-text { color: #037cfc; } .homePgae-dialog { margin: auto; } .poli { position: relative; width: 100%; height: 100%; zoom: 0.95; min-height: 910rem; } .poli .poli-new-report-content { position: absolute; right: 43rem; top: 49%; transform: translateY(-50%); z-index: 12; } .poli .poli-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .poli .font { padding: 20rem 64rem 32rem; display: flex; justify-content: space-between; } .poli .font .images { background-repeat: no-repeat; display: flex; flex-direction: row; justify-content: center; align-items: center; position: relative; } .poli .font .images img { width: 241rem; background-repeat: no-repeat; } .poli .font .metten { display: flex; flex-direction: row; align-items: center; } .poli .font .metten button { font-size: 18rem; } .poli .font .metten img { width: 18rem; height: 18rem; } .poli .font .metten .fangdajing-i { width: 310rem; position: relative; display: flex; align-items: center; font-size: 18rem; margin-right: 64rem; } .poli .font .metten .fangdajing { position: absolute; left: 30rem; } .poli .font .metten input { width: 310rem; height: 40rem; background: #fff; border-radius: 1rem 1rem 1rem 1rem; margin-left: 10rem; padding-left: 48rem; border: none; display: flex; font-size: 18rem; align-content: center; color: #b6b7bc; top: 2rem; box-sizing: border-box; } .poli .font .metten .login-btn { text-align: center; width: 96rem; height: 40rem; line-height: 40rem; background: rgba(255, 255, 255, 0.0727); border-radius: 1rem; border: 1rem solid rgba(255, 255, 255, 0.3174); font-size: 20rem; font-weight: 350; color: #ffffff; cursor: pointer; position: relative; } .poli .font .metten .icon { color: #fff !important; } .poli .font .metten input:focus { outline: none; } .poli .font .metten input::placeholder { font-size: 18rem; margin-left: 10rem; font-family: "PingFang SC", "PingFang SC"; font-weight: 400; color: #b6b7bc; } .poli .font .metten button { color: #fff; width: 86rem; height: 40rem; background: rgba(255, 255, 255, 0.0727); border-radius: 1rem; border: 1rem solid rgba(255, 255, 255, 0.3174); cursor: pointer; } @keyframes translateY { 0% { transform: translateY(-100%); } 100% { opacity: 1; transform: translateY(0); } } .poli .ourty { position: relative; } .poli .ourty .hy { display: flex; flex-direction: row; justify-content: center; align-items: center; } .poli .ourty .hy .hy-label { display: flex; align-items: center; font-size: 83rem; letter-spacing: 3rem; color: #fff; font-family: "fonsize"; } .poli .ourty .hy .hy-label p:nth-child(1) { color: #ffcb93; } .poli .ourty .hy .test-run { height: 25rem; line-height: 25rem; white-space: nowrap; padding: 0 8rem; box-sizing: border-box; border-radius: 2rem; border: 1rem solid #ffffff; font-size: 12rem; font-family: Source Han Sans, Source Han Sans; font-weight: 400; color: #ffffff; display: flex; justify-content: center; align-items: center; margin-left: 8rem; position: relative; top: 12.92rem; } .poli .ourty .title-e { margin-top: 2vh; text-align: center; font-size: 24rem; font-family: "PingFang SC", "PingFang SC"; letter-spacing: 4rem; font-weight: 400; color: rgba(255, 255, 255, 0.3932); } .poli .ourty .title { margin: 19rem auto; margin: 0rem auto; width: 767rem; height: 53rem; line-height: 53rem; background: linear-gradient(90deg, rgba(3, 124, 252, 0) 0%, rgba(3, 95, 191, 0.5) 24%, #066cd8 49%, rgba(3, 124, 252, 0.5) 74%, rgba(3, 124, 252, 0) 100%); border-radius: 0; text-align: center; font-size: 34rem; font-family: "YouSheBiaoTiHei"; font-family: "fonsize"; letter-spacing: 3rem; color: #ffffff; } @font-face { font-family: "fonsize"; src: url("static-qianhai/font/YouSheBiaoTiHei-2.ttf"); } @font-face { font-family: "AlimamaShuHeiT"; src: url("static-qianhai/font/AlimamaShuHeiTi-Bold.ttf"); } @keyframes translateX { 100% { transform: translateX(0); } } .poli .centen { margin-top: 60rem; margin-top: 30rem; display: flex; justify-content: center; align-items: flex-start; position: relative; } .poli .centen .center-left { display: flex; flex-direction: column; width: 764rem; } .poli .centen .center-top .levere { display: flex; flex-direction: row; justify-content: space-between; } .poli .centen .center-top .leveret { cursor: pointer; width: 372rem; height: 84rem; display: flex; align-items: center; justify-content: center; margin-bottom: 24rem; border-radius: 7rem; position: relative; } .poli .centen .center-top .leveret .leveret-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .poli .centen .center-top .leveret .icon { position: relative; width: 32rem; height: 32rem; margin-right: 6rem; } .poli .centen .center-top .leveret span { position: relative; font-size: 24rem; -webkit-background-clip: text; font-family: "AlimamaShuHeiT"; font-weight: 400; color: #ffffff; } .poli .centen .center-top .l-orange-active { transform: scale(1.03); } @font-face { font-family: "AlimamaShuHeiTi-Bold"; src: url("../static-qianhai/font/Alibaba_PuHuiTi_2.0_95_ExtraBold_95_ExtraBold.ttf"); } .poli .centen .center-top .leveret1 { cursor: pointer; display: flex; align-items: center; justify-content: center; width: 242.15rem; height: 84.19rem; border-radius: 7rem; margin-bottom: 21rem; position: relative; } .poli .centen .center-top .leveret1 .leveret2-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .poli .centen .center-top .leveret1 .icon { position: relative; width: 32rem; height: 32rem; margin-right: 6rem; } .poli .centen .center-top .leveret1 span { position: relative; font-size: 24rem; -webkit-background-clip: text; font-family: "AlimamaShuHeiT"; font-weight: 400; color: #ffffff; } .poli .centen .center-top .s-orange-active { transform: scale(1.03); } .poli .centen .center-bot { height: 163rem; display: flex; flex-direction: row; justify-content: space-between; } .poli .centen .center-bot .center-bot-big { width: 220rem; height: 100%; position: relative; cursor: pointer; } .poli .centen .center-bot .center-bot-big .ganqi-mark { position: absolute; top: unset; bottom: 0; left: 0; width: 220rem; height: 67rem; } .poli .centen .center-bot .center-bot-big .mgc-mark { position: absolute; top: unset; bottom: 0; left: 0; width: 292rem; height: 81rem; } .poli .centen .center-bot .center-bot-big.mgc { width: 292rem; } .poli .centen .center-bot .center-bot-big .center-bot-big-bg { position: absolute; left: 0; right: 0; width: 100%; height: 100%; } .poli .centen .center-bot .center-bot-big .center-bot-bg { position: absolute; left: 0; right: 0; width: 100%; height: 100%; } .poli .centen .center-bot .center-bot-big img { width: 194rem; height: 100%; position: absolute; top: 0; left: 0; } .poli .centen .center-bot .center-bot-small-right { display: flex; flex-direction: column; width: 220rem; justify-content: space-between; } .poli .centen .center-bot .center-bot-small { height: 73rem; width: 220rem; position: relative; cursor: pointer; } .poli .centen .center-bot .center-bot-small img { width: 220rem; height: 100%; position: absolute; top: 0; left: 0; } .poli .centen .center-bot .big-label { font-size: 24rem; color: #ffffff; position: absolute !important; bottom: 43rem; left: 22rem; font-weight: 700; letter-spacing: 1rem; text-shadow: 0rem 4rem 10rem #000000; font-family: "Lucida Grande", "Source_Han_Sans_SC_Regular", "PingFangSC", "PingFang SC" !important; } .poli .centen .center-bot .big-label.zq-left { width: 84rem; height: 24rem; font-weight: 700; font-size: 20rem; color: #ffffff; line-height: 24rem; letter-spacing: 1rem; text-shadow: 0rem 4rem 10rem #000000; text-align: left; font-style: normal; text-transform: none; bottom: 24rem; left: 20rem; } .poli .centen .center-bot .small-label { font-size: 16rem; font-family: "Lucida Grande", "Source_Han_Sans_SC_Regular", "PingFangSC", "PingFang SC" !important; font-weight: 400; color: #ffffff; position: absolute !important; left: 22rem; bottom: 18rem; } .poli .centen .center-bot .small-label.qw-right { height: 16rem; font-weight: 400; font-size: 16rem; color: #ffffff; line-height: 16rem; text-align: left; font-style: normal; text-transform: none; right: 8rem; left: unset; bottom: 28rem; } .poli .centen .center-bot .small-label { cursor: pointer; } .poli .centen .center-right { margin-left: 19rem; width: 620rem; border-radius: 12rem; display: flex; flex-direction: column; justify-content: space-between; } .poli .centen .center-right .bage3 { margin-top: 24rem; height: 268rem; background: rgba(42, 42, 42, 0.2); border-radius: 12rem; border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.26719397), rgba(255, 255, 255, 0.2469397)) 1 1; backdrop-filter: blur(6rem); } .poli .centen .center-right .bage3 .img { display: flex; width: 20rem; height: 20rem; } .poli .centen .center-right .bage3 .bage3-img { display: flex; align-items: center; justify-content: center; } .poli .centen .center-right .bage3 .content:last-child .bage3-content { border-bottom: none; } .poli .centen .center-right .bage3 .content .bage3-content { height: 50rem; line-height: 50rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 20rem; font-weight: 400; color: #ffffff; padding: 0rem 20rem 0 20rem; border-bottom: 1rem dashed rgba(255, 255, 255, 0.3851); cursor: pointer; box-sizing: border-box; } .poli .centen .center-right .bage3 .bage3-title { padding: 0 24rem 0 20rem; height: 64rem; display: flex; align-items: center; justify-content: space-between; font-size: 18rem; color: #ffffff; border-bottom: 1rem solid rgba(255, 255, 255, 0.3851); } .poli .centen .center-right .bage3 .qianhai { margin-left: 12rem; font-size: 24rem; line-height: 24rem; font-weight: 700; color: #ffffff; } .poli .centen .center-right .bage { height: 192rem; position: relative; } .poli .centen .center-right .bage .next-btn { width: 23rem; height: 34rem; position: absolute; top: 50%; right: 0; transform: translate(0, -50%); cursor: pointer; } .poli .centen .center-right .bage .next-btn img { width: 23rem; height: 34rem; } .poli .centen .center-right .bage .pre-btn { width: 23rem; height: 34rem; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); cursor: pointer; } .poli .centen .center-right .bage .pre-btn img { width: 23rem; height: 34rem; } .poli .centen .center-right .bage .bage-img { position: absolute; top: 0; left: 0; } .poli .centen .center-right .bage a { position: absolute; bottom: 23rem; left: 27rem; display: flex; font-size: 24rem; font-family: "AlimamaShuHeiT"; font-weight: 600; color: #ffffff; } .selspot { position: absolute; bottom: 0; width: 100%; display: flex; justify-content: center; align-items: center; height: 56rem; background: #000000; background-color: #000000; } .selspot .label { font-size: 14rem; opacity: 0.6; color: #ffffff; margin-left: 30rem; } .selspot .first { margin-left: 20rem; } .selspot .second { margin-left: 6rem; } .selspot .border-right { padding-right: 10rem; border-right: 1rem solid #ffffff; line-height: 16rem; } .selspot .border-left { margin-left: 10rem; } .selspot .firstImg { cursor: pointer; display: flex; width: 31rem; height: 38rem; border-radius: 0rem 0rem 0rem 0rem; opacity: 1; } .selspot .lastImg { cursor: pointer; margin-left: 20rem; display: flex; width: 60rem; height: 30rem; border-radius: 0rem 0rem 0rem 0rem; opacity: 1; } .selspot .goan { margin-left: 25rem; display: flex; width: 18rem; height: 20rem; border-radius: 0rem 0rem 0rem 0rem; opacity: 1; } .selspot .label-click { cursor: pointer; } .welcome-label-bold { font-weight: 700; cursor: pointer; max-width: 145rem; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } .cha { cursor: pointer; height: 22rem; font-size: 18rem; font-weight: 350; color: #ffffff; line-height: 22rem; } .carousel-container { position: relative; --width: 620rem; --height: 192rem; width: var(--width); overflow: hidden; border-radius: 12rem 12rem 12rem 12rem; } .carousel-container img { object-fit: cover; width: 100%; height: 100%; } .carousel-wrapper { height: 100%; padding: 0; margin: 0; list-style: none; display: flex; transition: transform 0.5s ease-in-out; } /* 每一张图片的容器 */ .slide { position: relative; flex-shrink: 0; width: var(--width); height: 192rem; cursor: pointer; } .slide .slide-title { position: absolute; bottom: 0; left: 0; width: 100%; } .dot { position: absolute; display: flex; gap: 6rem; bottom: 16rem; right: 16rem; } .dot span { width: 9rem; height: 9rem; background-color: rgba(255, 255, 255, 0.25); border-radius: 50%; cursor: pointer; } .dot span.active { background-color: #ffffff; } .carousel { position: relative; width: 607rem; height: 180rem; overflow: hidden; border-radius: 12rem; } .slides { width: 100%; height: 100%; list-style: none; margin: 0; padding: 0; } .slides li { width: 100%; height: 100%; display: none; cursor: pointer; } .slides li img { width: 100%; height: 100%; object-fit: cover; } .slides li.active { display: block; } .dot { display: flex; gap: 6rem; position: absolute; right: 34rem; bottom: 16rem; } .dot span { width: 9rem; height: 9rem; cursor: pointer; background: rgba(255, 255, 255, 0.25); border-radius: 50%; } .dot span.active { background: #ffffff; } .ad1 { position: absolute; right: -57rem; bottom: 260rem; cursor: pointer; width: 220rem; height: 115rem; } .ad { display: flex; flex-direction: column; position: absolute; right: 42rem; bottom: 154rem; cursor: pointer; } .small-t { position: absolute !important; bottom: 10rem; left: 20rem; } .mb-3 { margin-bottom: 3rem !important; } .h-224 { height: 224rem !important; } .el-empty__image { height: 120rem !important; } .z-1 { z-index: 1; } .z-2 { z-index: 2; } .z-3 { z-index: 3; } /* MGC Carousel Styles */ .mgc-carousel-container { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 12rem; } .mgc-carousel-wrapper { height: 100%; padding: 0; margin: 0; list-style: none; display: flex; transition: transform 0.5s ease-in-out; } .mgc-slide { position: relative; flex-shrink: 0; width: 292rem; /* Matches .center-bot-big.mgc width */ height: 100%; cursor: pointer; } .mgc-slide img { object-fit: cover; width: 100%; height: 100%; } /* MGC Carousel Arrow Buttons */ .poli .centen .center-bot .center-bot-big.mgc .mgc-next-btn { width: 23rem; height: 34rem; position: absolute; top: 50%; right: 0; transform: translate(0, -50%); cursor: pointer; z-index: 10; } .poli .centen .center-bot .center-bot-big.mgc .mgc-next-btn img { width: 23rem; height: 34rem; } .poli .centen .center-bot .center-bot-big.mgc .mgc-pre-btn { width: 23rem; height: 34rem; position: absolute; top: 50%; left: 0; transform: translate(0, -50%); cursor: pointer; z-index: 10; } .poli .centen .center-bot .center-bot-big.mgc .mgc-pre-btn img { width: 23rem; height: 34rem; }