884 lines
28 KiB
SCSS
884 lines
28 KiB
SCSS
@function px2rem($px) {
|
|
@return $px / 75+rem;
|
|
}
|
|
|
|
// body,
|
|
// html {
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// font-family: "Heiti SC", "Microsoft Sans Serif";
|
|
// }
|
|
|
|
// pc端
|
|
@media screen and (min-width:769px) {
|
|
|
|
.h5 {
|
|
display: none;
|
|
}
|
|
|
|
body,
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(180deg, #302286 0%, #0E0B24 100%);
|
|
font-family: Avenir, Avenir;
|
|
cursor: pointer;
|
|
|
|
// .pc {
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// // background: url(../images/pcBg.png) no-repeat center;
|
|
// // background-size: px2rem(1920) px2rem(1080);
|
|
// position: relative;
|
|
// // display: block;
|
|
// display: none;
|
|
|
|
// .header {
|
|
// width: 1400px;
|
|
// height: 108px;
|
|
// position: absolute;
|
|
// left: 50%;
|
|
// top: 0;
|
|
// transform: translateX(-50%);
|
|
|
|
// .logo {
|
|
// width: px2rem(54);
|
|
// height: px2rem(54);
|
|
// position: absolute;
|
|
// top: px2rem(27);
|
|
// // left: px2rem(360);
|
|
// left: 3.8rem;
|
|
// }
|
|
|
|
// .name {
|
|
// height: 100%;
|
|
// line-height: px2rem(108);
|
|
// font-size: px2rem(40);
|
|
// color: #FFFFFF;
|
|
// font-weight: 800;
|
|
// position: absolute;
|
|
// top: 0;
|
|
// // left: px2rem(430);
|
|
// left: 4.73333rem;
|
|
// }
|
|
|
|
// .index {
|
|
// height: 100%;
|
|
// line-height: px2rem(108);
|
|
// font-family: PingFangSC, PingFang SC;
|
|
// font-weight: 500;
|
|
// position: absolute;
|
|
// top: 0;
|
|
// left: 7.76rem;
|
|
// font-size: px2rem(28);
|
|
// color: #fff;
|
|
|
|
// span {
|
|
// width: px2rem(28);
|
|
// height: px2rem(6);
|
|
// background: #9168FA;
|
|
// border-radius: px2rem(6);
|
|
// position: absolute;
|
|
// left: 50%;
|
|
// transform: translateX(-50%);
|
|
// top: px2rem(76);
|
|
// }
|
|
// }
|
|
|
|
// .diamound {
|
|
// width: px2rem(118);
|
|
// height: px2rem(48);
|
|
// line-height: px2rem(48);
|
|
// color: #FFFFFF;
|
|
// font-size: px2rem(24);
|
|
// text-align: center;
|
|
// background: rgba(255, 255, 255, 0.2);
|
|
// border-radius: px2rem(48);
|
|
// box-sizing: border-box;
|
|
// border: 1px solid #fff;
|
|
// position: absolute;
|
|
// right: 3.06667rem;
|
|
// top: px2rem(30);
|
|
// vertical-align: middle;
|
|
|
|
// img {
|
|
// display: inline-block;
|
|
// width: px2rem(30);
|
|
// height: px2rem(30);
|
|
// vertical-align: middle;
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
// .Box {
|
|
// position: relative;
|
|
// // width: px2rem(2720);
|
|
// width: 28.08rem;
|
|
// height: px2rem(1506);
|
|
// overflow: hidden;
|
|
// top: px2rem(140);
|
|
// left: 50%;
|
|
// transform: translateX(-50%);
|
|
// }
|
|
|
|
// .pcMarket1 {
|
|
// width: px2rem(1542/2);
|
|
// height: px2rem(1506/2);
|
|
// position: absolute;
|
|
// left: px2rem(0);
|
|
// top: px2rem(0);
|
|
// }
|
|
|
|
// .pcText {
|
|
// width: px2rem(1060/2);
|
|
// height: px2rem(320/2);
|
|
// position: absolute;
|
|
// // left: px2rem(1092);
|
|
// right: px2rem(0);
|
|
// top: px2rem(400/2);
|
|
// }
|
|
|
|
// .pcIos {
|
|
// width: px2rem(284);
|
|
// height: px2rem(64);
|
|
// position: absolute;
|
|
// // left: px2rem(1091);
|
|
// right: px2rem(484/2);
|
|
// top: px2rem(816/2);
|
|
// }
|
|
|
|
// .pcAnd {
|
|
// width: px2rem(284);
|
|
// height: px2rem(64);
|
|
// position: absolute;
|
|
// // left: px2rem(1091);
|
|
// right: px2rem(484/2);
|
|
// top: px2rem(1000/2);
|
|
// }
|
|
|
|
// .code {
|
|
// width: px2rem(160);
|
|
// height: px2rem(166);
|
|
// position: absolute;
|
|
// // left: px2rem(1373);
|
|
// right: px2rem(100/2);
|
|
// top: px2rem(806/2);
|
|
// }
|
|
|
|
// .bottom {
|
|
// text-align: center;
|
|
// color: #B7B6BE;
|
|
// font-size: px2rem(16);
|
|
// width: 100%;
|
|
// padding: px2rem(29) 0;
|
|
// position: fixed;
|
|
// left: 0;
|
|
// bottom: 0;
|
|
// background: #0E0B24;
|
|
// min-height: 1rem;
|
|
|
|
// p {
|
|
// margin-bottom: px2rem(16);
|
|
// }
|
|
// }
|
|
// }
|
|
|
|
.container {
|
|
position: relative;
|
|
}
|
|
.pc-bg{
|
|
display: none;
|
|
}
|
|
.homePc {
|
|
width: 100%;
|
|
height: 10rem;
|
|
background: url(../images/pcBgBig.png) no-repeat;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
|
|
.diamound {
|
|
width: 1.2rem;
|
|
height: 0.5rem;
|
|
line-height: px2rem(35);
|
|
color: #FFFFFF;
|
|
font-size: 0.25rem;
|
|
text-align: center;
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-radius: px2rem(40);
|
|
box-sizing: border-box;
|
|
border: 1px solid #fff;
|
|
position: absolute;
|
|
right: px2rem(260);
|
|
top: 0.3rem;
|
|
vertical-align: middle;
|
|
|
|
img {
|
|
display: inline-block;
|
|
width: 0.33rem;
|
|
height: 0.33rem;
|
|
vertical-align: middle;
|
|
margin-top: -0.01rem;
|
|
}
|
|
}
|
|
|
|
.pcIos {
|
|
width: 2.9rem;
|
|
height: 0.64rem;
|
|
position: absolute;
|
|
right: 5rem;
|
|
top: 5.855rem;
|
|
// background: url(../images/pcIos.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
}
|
|
|
|
.pcAnd {
|
|
width: 2.9rem;
|
|
height: 0.64rem;
|
|
position: absolute;
|
|
right: 5rem;
|
|
top: 6.79rem;
|
|
// background: url(../images/pcAnd.png) no-repeat;
|
|
// background-size: 100% 100%;
|
|
}
|
|
}
|
|
.bootom {
|
|
width: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
background: #0F0B27;
|
|
text-align: center;
|
|
color: #fff;
|
|
padding-bottom: 0.2rem;
|
|
padding-top: 0.1rem;
|
|
p{
|
|
margin-bottom: 0.1rem;
|
|
font-size: 0.15rem;
|
|
color: #B8B7BF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 移动端
|
|
@media screen and (max-width:768px) {
|
|
|
|
.pc,
|
|
.homePc {
|
|
display: none;
|
|
}
|
|
|
|
body,
|
|
html {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #0E0B24;
|
|
|
|
.header {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: px2rem(90);
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(40);
|
|
margin: px2rem(20) auto 0;
|
|
z-index: 3;
|
|
|
|
.line {
|
|
width: 90%;
|
|
height: px2rem(2);
|
|
background: #fff;
|
|
opacity: .3;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0;
|
|
}
|
|
|
|
.logo {
|
|
display: block;
|
|
width: px2rem(64);
|
|
height: px2rem(64);
|
|
margin-right: px2rem(16);
|
|
float: left;
|
|
}
|
|
|
|
.name {
|
|
font-size: px2rem(35);
|
|
color: #FFFFFF;
|
|
font-weight: 800;
|
|
float: left;
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
.diamound {
|
|
width: px2rem(140);
|
|
height: px2rem(56);
|
|
line-height: px2rem(56);
|
|
box-sizing: border-box;
|
|
border: 1px solid #fff;
|
|
vertical-align: middle;
|
|
color: #fff;
|
|
font-size: px2rem(24);
|
|
float: right;
|
|
margin-top: px2rem(4);
|
|
margin-right: px2rem(32);
|
|
text-align: center;
|
|
border-radius: px2rem(56);
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
width: px2rem(38);
|
|
height: px2rem(32);
|
|
display: inline-block;
|
|
margin-top: -0.1rem;
|
|
}
|
|
}
|
|
|
|
.more {
|
|
float: right;
|
|
width: px2rem(40);
|
|
height: px2rem(40);
|
|
display: block;
|
|
margin-top: px2rem(12);
|
|
}
|
|
}
|
|
|
|
.h5 {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
|
|
.pagesBox {
|
|
width: 100%;
|
|
height: 100%;
|
|
// overflow: hidden;
|
|
transition: all .5s;
|
|
transform: translateY(-0%);
|
|
|
|
.page1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: url(../images/h51.png) no-repeat center;
|
|
background-size: px2rem(750) 100%;
|
|
|
|
.pageTxte1 {
|
|
width: px2rem(482);
|
|
height: px2rem(100);
|
|
position: absolute;
|
|
left: px2rem(108);
|
|
top: px2rem(376);
|
|
}
|
|
|
|
.pageTxte2 {
|
|
width: px2rem(482);
|
|
height: px2rem(100);
|
|
position: absolute;
|
|
right: px2rem(108);
|
|
top: px2rem(508);
|
|
}
|
|
|
|
.downioad {
|
|
width: px2rem(374);
|
|
height: px2rem(92);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(222);
|
|
display: block;
|
|
}
|
|
|
|
.down {
|
|
width: px2rem(38);
|
|
height: px2rem(28);
|
|
position: absolute;
|
|
left: 48%;
|
|
// transform: translateX(-50%);
|
|
bottom: px2rem(20);
|
|
}
|
|
|
|
}
|
|
|
|
.page2 {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
// display: none;
|
|
|
|
.pageText2 {
|
|
width: px2rem(750);
|
|
height: px2rem(814);
|
|
position: relative;
|
|
top: px2rem(258);
|
|
margin: 0 auto;
|
|
display: block;
|
|
display: none;
|
|
}
|
|
|
|
.page2_in {
|
|
width: px2rem(750);
|
|
height: px2rem(874);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
// bottom: px2rem(194);
|
|
top: px2rem(188);
|
|
}
|
|
|
|
.pagetx1 {
|
|
width: px2rem(476);
|
|
height: px2rem(308);
|
|
position: absolute;
|
|
left: px2rem(234);
|
|
top: px2rem(342);
|
|
// bottom: px2rem(620);
|
|
}
|
|
|
|
.pagetx2 {
|
|
width: px2rem(476);
|
|
height: px2rem(308);
|
|
position: absolute;
|
|
left: px2rem(40);
|
|
top: px2rem(688);
|
|
// bottom: px2rem(300);
|
|
}
|
|
|
|
.downioad {
|
|
width: px2rem(374);
|
|
height: px2rem(84);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(125);
|
|
display: block;
|
|
}
|
|
|
|
.down {
|
|
width: px2rem(38);
|
|
height: px2rem(28);
|
|
position: absolute;
|
|
left: 48%;
|
|
// transform: translateX(-50%);
|
|
bottom: px2rem(20);
|
|
}
|
|
}
|
|
|
|
.page3 {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
// display: none;
|
|
|
|
.pageText3 {
|
|
width: px2rem(512);
|
|
height: px2rem(114);
|
|
position: relative;
|
|
// left: 50%;
|
|
// transform: translateX(-50%);
|
|
display: block;
|
|
margin: 0 auto;
|
|
top: px2rem(210);
|
|
display: none;
|
|
}
|
|
|
|
.page3_in {
|
|
width: px2rem(750);
|
|
height: px2rem(874);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(188);
|
|
// bottom: px2rem(194);
|
|
}
|
|
|
|
.page3Icon1 {
|
|
width: px2rem(307);
|
|
height: px2rem(220);
|
|
position: absolute;
|
|
left: px2rem(426);
|
|
top: px2rem(424);
|
|
// bottom: px2rem(648);
|
|
}
|
|
|
|
.page3Icon2 {
|
|
width: px2rem(324);
|
|
height: px2rem(232);
|
|
position: absolute;
|
|
left: px2rem(0);
|
|
top: px2rem(364);
|
|
// bottom: px2rem(738);
|
|
}
|
|
|
|
.page3Icon3 {
|
|
width: px2rem(324);
|
|
height: px2rem(232);
|
|
position: absolute;
|
|
// left: px2rem(440);
|
|
right: px2rem(0);
|
|
top: px2rem(750);
|
|
// bottom: px2rem(376);
|
|
}
|
|
|
|
.page3Icon4 {
|
|
width: px2rem(284);
|
|
height: px2rem(204);
|
|
position: absolute;
|
|
left: px2rem(0);
|
|
top: px2rem(836);
|
|
// bottom: px2rem(284);
|
|
}
|
|
|
|
.downioad {
|
|
width: px2rem(374);
|
|
height: px2rem(84);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(125);
|
|
display: block;
|
|
}
|
|
|
|
.down {
|
|
width: px2rem(38);
|
|
height: px2rem(28);
|
|
position: absolute;
|
|
left: 48%;
|
|
// transform: translateX(-50%);
|
|
bottom: px2rem(20);
|
|
}
|
|
}
|
|
|
|
.page4 {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
// display: none;
|
|
|
|
.pageText4 {
|
|
width: px2rem(480);
|
|
height: px2rem(114);
|
|
position: relative;
|
|
top: px2rem(210);
|
|
display: block;
|
|
margin: 0 auto;
|
|
display: none;
|
|
}
|
|
|
|
.page4_in {
|
|
width: px2rem(750);
|
|
height: px2rem(874);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(188);
|
|
// bottom: px2rem(194);
|
|
}
|
|
|
|
.page4Icon1 {
|
|
width: px2rem(418);
|
|
height: px2rem(384);
|
|
position: absolute;
|
|
left: px2rem(0);
|
|
top: px2rem(384);
|
|
// bottom: px2rem(224);
|
|
}
|
|
|
|
.page4Icon2 {
|
|
width: px2rem(418);
|
|
height: px2rem(384);
|
|
position: absolute;
|
|
right: px2rem(0);
|
|
top: px2rem(644);
|
|
// bottom: px2rem(224);
|
|
}
|
|
|
|
.downioad {
|
|
width: px2rem(374);
|
|
height: px2rem(84);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(125);
|
|
display: block;
|
|
}
|
|
|
|
.down {
|
|
width: px2rem(38);
|
|
height: px2rem(28);
|
|
position: absolute;
|
|
left: 48%;
|
|
// transform: translateX(-50%);
|
|
bottom: px2rem(20);
|
|
}
|
|
}
|
|
|
|
.page5 {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url(../images/h55.png) no-repeat center;
|
|
background-size: 100% px2rem(1344);
|
|
position: relative;
|
|
overflow: hidden;
|
|
// display: none;
|
|
|
|
.pageTxte5 {
|
|
width: px2rem(496);
|
|
height: px2rem(332);
|
|
position: relative;
|
|
top: px2rem(256);
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.contactUs {
|
|
width: px2rem(272);
|
|
height: px2rem(92);
|
|
position: absolute;
|
|
display: block;
|
|
margin: 0 auto;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
// top: 5rem;
|
|
bottom: px2rem(386);
|
|
}
|
|
|
|
.bootom {
|
|
width: 100%;
|
|
// height: 1.5rem;
|
|
position: absolute;
|
|
bottom: px2rem(24);
|
|
left: 0;
|
|
text-align: center;
|
|
color: #B4B4BA;
|
|
font-size: px2rem(24);
|
|
|
|
p {
|
|
margin-bottom: px2rem(8);
|
|
}
|
|
}
|
|
|
|
|
|
.downioad {
|
|
width: px2rem(374);
|
|
height: px2rem(92);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: px2rem(222);
|
|
display: block;
|
|
}
|
|
|
|
.down {
|
|
width: px2rem(38);
|
|
height: px2rem(28);
|
|
position: absolute;
|
|
left: 48%;
|
|
// transform: translateX(-50%);
|
|
bottom: px2rem(20);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 菜单
|
|
.menu {
|
|
width: 100%;
|
|
height: 0%;
|
|
background: #0E0B24;
|
|
position: fixed;
|
|
// z-index: 4;
|
|
transition: all .2s;
|
|
// display: none;
|
|
left: 0;
|
|
top: 0;
|
|
overflow: hidden;
|
|
|
|
.top {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: px2rem(90);
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(40);
|
|
margin: px2rem(20) auto 0;
|
|
z-index: 3;
|
|
top: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
|
|
.line {
|
|
width: 90%;
|
|
height: px2rem(2);
|
|
background: #fff;
|
|
opacity: .3;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
bottom: 0;
|
|
}
|
|
|
|
.logo {
|
|
display: block;
|
|
width: px2rem(64);
|
|
height: px2rem(64);
|
|
margin-right: px2rem(16);
|
|
float: left;
|
|
}
|
|
|
|
.name {
|
|
font-size: px2rem(35);
|
|
color: #FFFFFF;
|
|
font-weight: 800;
|
|
float: left;
|
|
margin-top: 0.2rem;
|
|
}
|
|
|
|
.diamound {
|
|
width: px2rem(140);
|
|
height: px2rem(56);
|
|
line-height: px2rem(56);
|
|
box-sizing: border-box;
|
|
border: 1px solid #fff;
|
|
vertical-align: middle;
|
|
color: #fff;
|
|
font-size: px2rem(24);
|
|
float: right;
|
|
margin-top: px2rem(4);
|
|
margin-right: px2rem(32);
|
|
text-align: center;
|
|
border-radius: px2rem(56);
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
width: px2rem(38);
|
|
height: px2rem(32);
|
|
display: inline-block;
|
|
margin-top: -0.1rem;
|
|
}
|
|
}
|
|
|
|
.close {
|
|
float: right;
|
|
width: px2rem(40);
|
|
height: px2rem(40);
|
|
display: block;
|
|
margin-top: px2rem(12);
|
|
}
|
|
}
|
|
|
|
ul {
|
|
width: 100%;
|
|
height: px2rem(90);
|
|
box-sizing: border-box;
|
|
padding: 0 px2rem(40);
|
|
margin: 1.6rem auto 0;
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(116);
|
|
line-height: px2rem(116);
|
|
border-bottom: 1px solid rgba(255, 255, 255, .3);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
color: #FFFFFF;
|
|
font-size: px2rem(32);
|
|
}
|
|
|
|
img {
|
|
width: px2rem(32);
|
|
height: px2rem(32);
|
|
display: block;
|
|
margin-top: px2rem(44);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.contactUs_pub {
|
|
position: fixed;
|
|
z-index: 99;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, .6);
|
|
display: none;
|
|
|
|
.contactUs_pub_in {
|
|
width: 7.8rem;
|
|
height: px2rem(480);
|
|
left: 50%;
|
|
top: 50%;
|
|
position: relative;
|
|
transform: translate(-50%, -50%);
|
|
background: #fff;
|
|
border-radius: px2rem(32);
|
|
overflow: hidden;
|
|
|
|
.sClose {
|
|
width: px2rem(32);
|
|
height: px2rem(32);
|
|
position: absolute;
|
|
right: px2rem(32);
|
|
top: px2rem(26);
|
|
}
|
|
|
|
.title {
|
|
text-align: center;
|
|
width: 100%;
|
|
margin-top: px2rem(36);
|
|
margin-bottom: px2rem(16);
|
|
color: #1F1B4F;
|
|
font-size: px2rem(32);
|
|
font-weight: 600;
|
|
}
|
|
|
|
ul {
|
|
width: 7.2rem;
|
|
margin: 0 auto 0;
|
|
|
|
li {
|
|
width: 100%;
|
|
height: px2rem(112);
|
|
line-height: px2rem(112);
|
|
border-bottom: px2rem(2) solid #EBECF0;
|
|
|
|
img {
|
|
display: block;
|
|
width: px2rem(48);
|
|
height: px2rem(48);
|
|
float: left;
|
|
margin-top: px2rem(32);
|
|
margin-right: px2rem(44);
|
|
}
|
|
|
|
span {
|
|
display: block;
|
|
float: left;
|
|
height: 100%;
|
|
color: #1F1B4F;
|
|
font-size: px2rem(28);
|
|
font-weight: 500;
|
|
|
|
b {
|
|
color: #1F1B4F;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
} |