758 lines
23 KiB
SCSS
758 lines
23 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: #0E0B24;
|
|
font-family: Avenir, Avenir;
|
|
cursor: pointer;
|
|
|
|
.pc {
|
|
width: px2rem(1920);
|
|
height: 100%;
|
|
background: url(../images/pcBg.png) no-repeat center;
|
|
background-size: px2rem(1920) px2rem(1080);
|
|
position: relative;
|
|
margin: 0 auto 0;
|
|
display: block;
|
|
|
|
.header {
|
|
width: 100%;
|
|
height: px2rem(108);
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
|
|
.logo {
|
|
width: px2rem(54);
|
|
height: px2rem(54);
|
|
position: absolute;
|
|
top: px2rem(27);
|
|
left: px2rem(360);
|
|
}
|
|
|
|
.name {
|
|
height: 100%;
|
|
line-height: px2rem(108);
|
|
font-size: px2rem(40);
|
|
color: #FFFFFF;
|
|
font-weight: 800;
|
|
position: absolute;
|
|
top: 0;
|
|
left: px2rem(430);
|
|
}
|
|
|
|
.index {
|
|
height: 100%;
|
|
line-height: px2rem(108);
|
|
font-family: PingFangSC, PingFang SC;
|
|
color: fff;
|
|
font-weight: 500;
|
|
position: absolute;
|
|
top: 0;
|
|
left: px2rem(657);
|
|
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: px2rem(380);
|
|
top: px2rem(30);
|
|
vertical-align: middle;
|
|
|
|
img {
|
|
display: inline-block;
|
|
width: px2rem(30);
|
|
height: px2rem(30);
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pcMarket1 {
|
|
width: px2rem(699);
|
|
height: px2rem(683);
|
|
position: absolute;
|
|
left: px2rem(346);
|
|
top: px2rem(208);
|
|
}
|
|
|
|
.pcText {
|
|
width: px2rem(398);
|
|
height: px2rem(120);
|
|
position: absolute;
|
|
left: px2rem(1092);
|
|
top: px2rem(404);
|
|
}
|
|
|
|
.pcIos {
|
|
width: px2rem(254);
|
|
height: px2rem(58);
|
|
position: absolute;
|
|
left: px2rem(1091);
|
|
top: px2rem(610);
|
|
}
|
|
|
|
.pcAnd {
|
|
width: px2rem(254);
|
|
height: px2rem(58);
|
|
position: absolute;
|
|
left: px2rem(1091);
|
|
top: px2rem(698);
|
|
}
|
|
|
|
.code {
|
|
width: px2rem(160);
|
|
height: px2rem(166);
|
|
position: absolute;
|
|
left: px2rem(1373);
|
|
top: px2rem(600);
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 移动端
|
|
@media screen and (max-width:768px) {
|
|
.pc {
|
|
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: 0.53333rem;
|
|
color: #FFFFFF;
|
|
font-weight: 800;
|
|
float: left;
|
|
margin-top: px2rem(6);
|
|
}
|
|
|
|
.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(80);
|
|
text-align: center;
|
|
border-radius: px2rem(56);
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
width: px2rem(38);
|
|
height: px2rem(32);
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.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 .6s;
|
|
transform: translateY(-0%);
|
|
|
|
.page1 {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url(../images/h51.png) no-repeat center;
|
|
background-size: 100% px2rem(1334);
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.pageTxte1 {
|
|
width: px2rem(482);
|
|
height: px2rem(228);
|
|
position: relative;
|
|
top: px2rem(394);
|
|
margin: 0 auto;
|
|
display: block;
|
|
}
|
|
|
|
.downioad {
|
|
width: px2rem(494);
|
|
height: px2rem(104);
|
|
position: relative;
|
|
margin: 9rem auto 0;
|
|
display: block;
|
|
}
|
|
|
|
.down {
|
|
width: px2rem(64);
|
|
height: px2rem(48);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(1214);
|
|
}
|
|
|
|
}
|
|
|
|
.page2 {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
// display: none;
|
|
|
|
.pageText2 {
|
|
width: px2rem(446);
|
|
height: px2rem(114);
|
|
position: relative;
|
|
top: px2rem(210);
|
|
margin: 0 auto;
|
|
display: block;
|
|
}
|
|
|
|
.page2_in {
|
|
width: px2rem(750);
|
|
height: px2rem(804);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(336);
|
|
}
|
|
|
|
.pagetx1 {
|
|
width: px2rem(302);
|
|
height: px2rem(308);
|
|
position: absolute;
|
|
left: px2rem(448);
|
|
top: px2rem(406);
|
|
}
|
|
|
|
.pagetx2 {
|
|
width: px2rem(452);
|
|
height: px2rem(264);
|
|
position: absolute;
|
|
left: px2rem(40);
|
|
top: px2rem(770);
|
|
}
|
|
|
|
.downioad {
|
|
width: px2rem(494);
|
|
height: px2rem(104);
|
|
position: relative;
|
|
display: block;
|
|
margin: 0 auto;
|
|
top: px2rem(970);
|
|
}
|
|
|
|
.down {
|
|
width: px2rem(64);
|
|
height: px2rem(48);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(1214);
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.page3_in {
|
|
width: px2rem(750);
|
|
height: px2rem(804);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(336);
|
|
}
|
|
|
|
.page3Icon1 {
|
|
width: px2rem(324);
|
|
height: px2rem(230);
|
|
position: absolute;
|
|
left: px2rem(426);
|
|
top: px2rem(456);
|
|
}
|
|
|
|
.page3Icon2 {
|
|
width: px2rem(154);
|
|
height: px2rem(154);
|
|
position: absolute;
|
|
left: px2rem(114);
|
|
top: px2rem(442);
|
|
}
|
|
|
|
.page3Icon3 {
|
|
width: px2rem(218);
|
|
height: px2rem(142);
|
|
position: absolute;
|
|
left: px2rem(440);
|
|
top: px2rem(816);
|
|
}
|
|
|
|
.page3Icon4 {
|
|
width: px2rem(298);
|
|
height: px2rem(176);
|
|
position: absolute;
|
|
left: px2rem(20);
|
|
top: px2rem(874);
|
|
}
|
|
|
|
.downioad {
|
|
width: px2rem(494);
|
|
height: px2rem(104);
|
|
position: relative;
|
|
// left: 50%;
|
|
// transform: translateX(-50%);
|
|
display: block;
|
|
margin: 0 auto;
|
|
top: px2rem(970);
|
|
}
|
|
|
|
.down {
|
|
width: px2rem(64);
|
|
height: px2rem(48);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(1214);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.page4_in {
|
|
width: px2rem(750);
|
|
height: px2rem(802);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(338);
|
|
}
|
|
|
|
.page4Icon1 {
|
|
width: px2rem(496);
|
|
height: px2rem(460);
|
|
position: absolute;
|
|
left: px2rem(6);
|
|
top: px2rem(428);
|
|
}
|
|
|
|
.page4Icon2 {
|
|
width: px2rem(496);
|
|
height: px2rem(460);
|
|
position: absolute;
|
|
left: px2rem(246);
|
|
top: px2rem(650);
|
|
}
|
|
|
|
.downioad {
|
|
width: px2rem(494);
|
|
height: px2rem(104);
|
|
position: relative;
|
|
top: px2rem(970);
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.down {
|
|
width: px2rem(64);
|
|
height: px2rem(48);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(1214);
|
|
}
|
|
}
|
|
|
|
.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(380);
|
|
position: relative;
|
|
top: px2rem(280);
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.contactUs {
|
|
width: px2rem(272);
|
|
height: px2rem(92);
|
|
position: relative;
|
|
display: block;
|
|
margin: 0 auto;
|
|
top: 5rem;
|
|
}
|
|
|
|
.bootom {
|
|
width: 100%;
|
|
height: 1.5rem;
|
|
position: absolute;
|
|
bottom: px2rem(84);
|
|
left: 0;
|
|
text-align: center;
|
|
color: #B4B4BA;
|
|
font-size: px2rem(24);
|
|
|
|
p {
|
|
margin-bottom: px2rem(8);
|
|
}
|
|
}
|
|
|
|
.downioad {
|
|
width: px2rem(494);
|
|
height: px2rem(104);
|
|
position: relative;
|
|
top: 6rem;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.down {
|
|
width: px2rem(64);
|
|
height: px2rem(48);
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
top: px2rem(1468);
|
|
}
|
|
}
|
|
}
|
|
|
|
// 菜单
|
|
.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: 0.53333rem;
|
|
color: #FFFFFF;
|
|
font-weight: 800;
|
|
float: left;
|
|
margin-top: px2rem(6);
|
|
}
|
|
|
|
.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(80);
|
|
text-align: center;
|
|
border-radius: px2rem(56);
|
|
|
|
img {
|
|
vertical-align: middle;
|
|
width: px2rem(38);
|
|
height: px2rem(32);
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.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: px2rem(534);
|
|
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: 6rem;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
} |