moliparty/peko-h5
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

适配官网

Browse Source
This commit is contained in:
Dragon
2024-01-24 20:10:25 +08:00
parent ebc54bd4a0
commit 6a84f98e41
33 changed files with 525 additions and 476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

352
view/peko/home/css/index.css
View File

@@ -6,156 +6,86 @@
html {
width: 100%;
height: 100%;
background: #0E0B24;
background: linear-gradient(180deg, #302286 0%, #0E0B24 100%);
font-family: Avenir, Avenir;
cursor: pointer;
}
body .pc,
html .pc {
width: 25.6rem;
height: 100%;
background: url(../images/pcBg.png) no-repeat center;
background-size: 25.6rem 14.4rem;
body .container,
html .container {
position: relative;
margin: 0 auto 0;
display: block;
}
body .pc .header,
html .pc .header {
body .homePc,
html .homePc {
width: 100%;
height: 1.44rem;
position: absolute;
left: 0;
top: 0;
height: 10rem;
background: url(../images/pcBgBig.png) no-repeat;
background-size: 100% 100%;
position: relative;
}
body .pc .header .logo,
html .pc .header .logo {
width: 0.72rem;
height: 0.72rem;
position: absolute;
top: 0.36rem;
left: 4.8rem;
}
body .pc .header .name,
html .pc .header .name {
height: 100%;
line-height: 1.44rem;
font-size: 0.53333rem;
color: #FFFFFF;
font-weight: 800;
position: absolute;
top: 0;
left: 5.73333rem;
}
body .pc .header .index,
html .pc .header .index {
height: 100%;
line-height: 1.44rem;
font-family: PingFangSC, PingFang SC;
color: fff;
font-weight: 500;
position: absolute;
top: 0;
left: 8.76rem;
font-size: 0.37333rem;
color: #fff;
}
body .pc .header .index span,
html .pc .header .index span {
width: 0.37333rem;
height: 0.08rem;
background: #9168FA;
border-radius: 0.08rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 1.01333rem;
}
body .pc .header .diamound,
html .pc .header .diamound {
width: 1.57333rem;
height: 0.64rem;
line-height: 0.64rem;
body .homePc .diamound,
html .homePc .diamound {
width: 1.46667rem;
height: 0.53333rem;
line-height: 0.46667rem;
color: #FFFFFF;
font-size: 0.32rem;
text-align: center;
background: rgba(255, 255, 255, 0.2);
border-radius: 0.64rem;
border-radius: 0.53333rem;
box-sizing: border-box;
border: 1px solid #fff;
position: absolute;
right: 5.06667rem;
top: 0.4rem;
right: 3.46667rem;
top: 0.30667rem;
vertical-align: middle;
}
body .pc .header .diamound img,
html .pc .header .diamound img {
body .homePc .diamound img,
html .homePc .diamound img {
display: inline-block;
width: 0.4rem;
height: 0.4rem;
vertical-align: middle;
margin-top: -0.01rem;
}
body .pc .pcMarket1,
html .pc .pcMarket1 {
width: 9.32rem;
height: 9.10667rem;
body .homePc .pcIos,
html .homePc .pcIos {
width: 2.9rem;
height: 0.64rem;
position: absolute;
left: 4.61333rem;
top: 2.77333rem;
right: 5rem;
top: 5.855rem;
}
body .pc .pcText,
html .pc .pcText {
width: 5.30667rem;
height: 1.6rem;
body .homePc .pcAnd,
html .homePc .pcAnd {
width: 2.9rem;
height: 0.64rem;
position: absolute;
left: 14.56rem;
top: 5.38667rem;
right: 5rem;
top: 6.79rem;
}
body .pc .pcIos,
html .pc .pcIos {
width: 3.38667rem;
height: 0.77333rem;
position: absolute;
left: 14.54667rem;
top: 8.13333rem;
}
body .pc .pcAnd,
html .pc .pcAnd {
width: 3.38667rem;
height: 0.77333rem;
position: absolute;
left: 14.54667rem;
top: 9.30667rem;
}
body .pc .code,
html .pc .code {
width: 2.13333rem;
height: 2.21333rem;
position: absolute;
left: 18.30667rem;
top: 8rem;
}
body .pc .bottom,
html .pc .bottom {
text-align: center;
color: #B7B6BE;
font-size: 0.21333rem;
body .bootom,
html .bootom {
width: 100%;
padding: 0.38667rem 0;
position: fixed;
left: 0;
bottom: 0;
background: #0E0B24;
min-height: 1rem;
background: #0F0B27;
text-align: center;
color: #fff;
padding-bottom: 0.2rem;
padding-top: 0.1rem;
}
body .pc .bottom p,
html .pc .bottom p {
margin-bottom: 0.21333rem;
body .bootom p,
html .bootom p {
margin-bottom: 0.1rem;
font-size: 0.15rem;
color: #B8B7BF;
}
}
@media screen and (max-width: 768px) {
.pc {
.pc,
.homePc {
display: none;
}
body,
@@ -215,7 +145,7 @@
font-size: 0.32rem;
float: right;
margin-top: 0.05333rem;
margin-right: 1.06667rem;
margin-right: 0.42667rem;
text-align: center;
border-radius: 0.74667rem;
}
@@ -246,45 +176,51 @@
html .h5 .pagesBox {
width: 100%;
height: 100%;
transition: all .4s;
transition: all .5s;
transform: translateY(0%);
}
body .h5 .pagesBox .page1,
html .h5 .pagesBox .page1 {
width: 100%;
height: 100%;
background: url(../images/h51.png) no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
background: url(../images/h51.png) no-repeat center;
background-size: 10rem 100%;
}
body .h5 .pagesBox .page1 .pageTxte1,
html .h5 .pagesBox .page1 .pageTxte1 {
width: 6.42667rem;
height: 3.04rem;
position: relative;
top: 5.25333rem;
margin: 0 auto;
display: block;
height: 1.33333rem;
position: absolute;
left: 1.44rem;
top: 5.01333rem;
}
body .h5 .pagesBox .page1 .pageTxte2,
html .h5 .pagesBox .page1 .pageTxte2 {
width: 6.42667rem;
height: 1.33333rem;
position: absolute;
right: 1.44rem;
top: 6.77333rem;
}
body .h5 .pagesBox .page1 .downioad,
html .h5 .pagesBox .page1 .downioad {
width: 6.58667rem;
height: 1.38667rem;
width: 4.98667rem;
height: 1.22667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 3.41333rem;
bottom: 2.96rem;
display: block;
}
body .h5 .pagesBox .page1 .down,
html .h5 .pagesBox .page1 .down {
width: 0.85333rem;
height: 0.64rem;
width: 0.50667rem;
height: 0.37333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.96rem;
left: 48%;
bottom: 0.26667rem;
}
body .h5 .pagesBox .page2,
html .h5 .pagesBox .page2 {
@@ -295,56 +231,56 @@
}
body .h5 .pagesBox .page2 .pageText2,
html .h5 .pagesBox .page2 .pageText2 {
width: 5.94667rem;
height: 1.52rem;
width: 10rem;
height: 10.85333rem;
position: relative;
top: 2.8rem;
top: 3.44rem;
margin: 0 auto;
display: block;
display: none;
}
body .h5 .pagesBox .page2 .page2_in,
html .h5 .pagesBox .page2 .page2_in {
width: 10rem;
height: 10.72rem;
height: 11.65333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2.58667rem;
top: 2.50667rem;
}
body .h5 .pagesBox .page2 .pagetx1,
html .h5 .pagesBox .page2 .pagetx1 {
width: 4.02667rem;
width: 6.34667rem;
height: 4.10667rem;
position: absolute;
left: 5.97333rem;
bottom: 8.26667rem;
left: 3.12rem;
top: 4.56rem;
}
body .h5 .pagesBox .page2 .pagetx2,
html .h5 .pagesBox .page2 .pagetx2 {
width: 6.02667rem;
height: 3.52rem;
width: 6.34667rem;
height: 4.10667rem;
position: absolute;
left: 0.53333rem;
bottom: 4rem;
top: 9.17333rem;
}
body .h5 .pagesBox .page2 .downioad,
html .h5 .pagesBox .page2 .downioad {
width: 6.58667rem;
height: 1.38667rem;
width: 4.98667rem;
height: 1.12rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.92rem;
bottom: 1.66667rem;
display: block;
}
body .h5 .pagesBox .page2 .down,
html .h5 .pagesBox .page2 .down {
width: 0.85333rem;
height: 0.64rem;
width: 0.50667rem;
height: 0.37333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.96rem;
left: 48%;
bottom: 0.26667rem;
}
body .h5 .pagesBox .page3,
html .h5 .pagesBox .page3 {
@@ -361,66 +297,66 @@
display: block;
margin: 0 auto;
top: 2.8rem;
display: none;
}
body .h5 .pagesBox .page3 .page3_in,
html .h5 .pagesBox .page3 .page3_in {
width: 10rem;
height: 10.72rem;
height: 11.65333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2.58667rem;
top: 2.50667rem;
}
body .h5 .pagesBox .page3 .page3Icon1,
html .h5 .pagesBox .page3 .page3Icon1 {
width: 4.32rem;
height: 3.06667rem;
width: 4.09333rem;
height: 2.93333rem;
position: absolute;
left: 5.68rem;
bottom: 8.64rem;
top: 5.65333rem;
}
body .h5 .pagesBox .page3 .page3Icon2,
html .h5 .pagesBox .page3 .page3Icon2 {
width: 2.05333rem;
height: 2.05333rem;
width: 4.32rem;
height: 3.09333rem;
position: absolute;
left: 1.52rem;
bottom: 9.84rem;
left: 0rem;
top: 4.85333rem;
}
body .h5 .pagesBox .page3 .page3Icon3,
html .h5 .pagesBox .page3 .page3Icon3 {
width: 2.90667rem;
height: 1.89333rem;
width: 4.32rem;
height: 3.09333rem;
position: absolute;
left: 5.86667rem;
bottom: 5.01333rem;
right: 0rem;
top: 10rem;
}
body .h5 .pagesBox .page3 .page3Icon4,
html .h5 .pagesBox .page3 .page3Icon4 {
width: 3.97333rem;
height: 2.34667rem;
width: 3.78667rem;
height: 2.72rem;
position: absolute;
left: 0.26667rem;
bottom: 3.78667rem;
left: 0rem;
top: 11.14667rem;
}
body .h5 .pagesBox .page3 .downioad,
html .h5 .pagesBox .page3 .downioad {
width: 6.58667rem;
height: 1.38667rem;
width: 4.98667rem;
height: 1.12rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.92rem;
bottom: 1.66667rem;
display: block;
}
body .h5 .pagesBox .page3 .down,
html .h5 .pagesBox .page3 .down {
width: 0.85333rem;
height: 0.64rem;
width: 0.50667rem;
height: 0.37333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.96rem;
left: 48%;
bottom: 0.26667rem;
}
body .h5 .pagesBox .page4,
html .h5 .pagesBox .page4 {
@@ -437,50 +373,50 @@
top: 2.8rem;
display: block;
margin: 0 auto;
display: none;
}
body .h5 .pagesBox .page4 .page4_in,
html .h5 .pagesBox .page4 .page4_in {
width: 10rem;
height: 10.69333rem;
height: 11.65333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2.58667rem;
top: 2.50667rem;
}
body .h5 .pagesBox .page4 .page4Icon1,
html .h5 .pagesBox .page4 .page4Icon1 {
width: 6.61333rem;
height: 6.13333rem;
width: 5.57333rem;
height: 5.12rem;
position: absolute;
left: 0.08rem;
bottom: 5.94667rem;
left: 0rem;
top: 5.12rem;
}
body .h5 .pagesBox .page4 .page4Icon2,
html .h5 .pagesBox .page4 .page4Icon2 {
width: 6.61333rem;
height: 6.13333rem;
width: 5.57333rem;
height: 5.12rem;
position: absolute;
left: 3.28rem;
bottom: 2.98667rem;
right: 0rem;
top: 8.58667rem;
}
body .h5 .pagesBox .page4 .downioad,
html .h5 .pagesBox .page4 .downioad {
width: 6.58667rem;
height: 1.38667rem;
width: 4.98667rem;
height: 1.12rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1.92rem;
bottom: 1.66667rem;
display: block;
}
body .h5 .pagesBox .page4 .down,
html .h5 .pagesBox .page4 .down {
width: 0.85333rem;
height: 0.64rem;
width: 0.50667rem;
height: 0.37333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.96rem;
left: 48%;
bottom: 0.26667rem;
}
body .h5 .pagesBox .page5,
html .h5 .pagesBox .page5 {
@@ -494,9 +430,9 @@
body .h5 .pagesBox .page5 .pageTxte5,
html .h5 .pagesBox .page5 .pageTxte5 {
width: 6.61333rem;
height: 5.06667rem;
height: 4.42667rem;
position: relative;
top: 3.73333rem;
top: 3.41333rem;
display: block;
margin: 0 auto;
}
@@ -509,14 +445,13 @@
margin: 0 auto;
left: 50%;
transform: translateX(-50%);
bottom: 7.01333rem;
bottom: 5.14667rem;
}
body .h5 .pagesBox .page5 .bootom,
html .h5 .pagesBox .page5 .bootom {
width: 100%;
height: 1.5rem;
position: absolute;
bottom: 1.12rem;
bottom: 0.32rem;
left: 0;
text-align: center;
color: #B4B4BA;
@@ -528,22 +463,21 @@
}
body .h5 .pagesBox .page5 .downioad,
html .h5 .pagesBox .page5 .downioad {
width: 6.58667rem;
height: 1.38667rem;
width: 4.98667rem;
height: 1.22667rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 3.41333rem;
bottom: 2.96rem;
display: block;
}
body .h5 .pagesBox .page5 .down,
html .h5 .pagesBox .page5 .down {
width: 0.85333rem;
height: 0.64rem;
width: 0.50667rem;
height: 0.37333rem;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0.96rem;
left: 48%;
bottom: 0.26667rem;
}
body .h5 .menu,
html .h5 .menu {
@@ -610,7 +544,7 @@
font-size: 0.32rem;
float: right;
margin-top: 0.05333rem;
margin-right: 1.06667rem;
margin-right: 0.42667rem;
text-align: center;
border-radius: 0.74667rem;
}

564
view/peko/home/css/index.scss
View File

@@ -20,149 +20,239 @@
html {
width: 100%;
height: 100%;
background: #0E0B24;
background: linear-gradient(180deg, #302286 0%, #0E0B24 100%);
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);
// .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;
margin: 0 auto 0;
display: block;
}
.header {
width: 100%;
height: px2rem(108);
.homePc {
width: 100%;
height: 10rem;
background: url(../images/pcBgBig.png) no-repeat;
background-size: 100% 100%;
position: relative;
.diamound {
width: px2rem(110);
height: px2rem(40);
line-height: px2rem(35);
color: #FFFFFF;
font-size: px2rem(24);
text-align: center;
background: rgba(255, 255, 255, 0.2);
border-radius: px2rem(40);
box-sizing: border-box;
border: 1px solid #fff;
position: absolute;
left: 0;
top: 0;
right: px2rem(260);
top: px2rem(23);
vertical-align: middle;
.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);
img {
display: inline-block;
width: px2rem(30);
height: px2rem(30);
vertical-align: middle;
img {
display: inline-block;
width: px2rem(30);
height: px2rem(30);
vertical-align: middle;
}
margin-top: -0.01rem;
}
}
.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);
width: 2.9rem;
height: 0.64rem;
position: absolute;
left: px2rem(1091);
top: px2rem(610);
right: 5rem;
top: 5.855rem;
// background: url(../images/pcIos.png) no-repeat;
// background-size: 100% 100%;
}
.pcAnd {
width: px2rem(254);
height: px2rem(58);
width: 2.9rem;
height: 0.64rem;
position: absolute;
left: px2rem(1091);
top: px2rem(698);
right: 5rem;
top: 6.79rem;
// background: url(../images/pcAnd.png) no-repeat;
// background-size: 100% 100%;
}
.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);
}
}
.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;
}
}
}
@@ -170,7 +260,9 @@
// 移动端
@media screen and (max-width:768px) {
.pc {
.pc,
.homePc {
display: none;
}
@@ -229,7 +321,7 @@
font-size: px2rem(24);
float: right;
margin-top: px2rem(4);
margin-right: px2rem(80);
margin-right: px2rem(32);
text-align: center;
border-radius: px2rem(56);
@@ -261,43 +353,50 @@
width: 100%;
height: 100%;
// overflow: hidden;
transition: all .4s;
transition: all .5s;
transform: translateY(-0%);
.page1 {
width: 100%;
height: 100%;
background: url(../images/h51.png) no-repeat;
background-size: 100% 100%;
position: relative;
overflow: hidden;
background: url(../images/h51.png) no-repeat center;
background-size: px2rem(750) 100%;
.pageTxte1 {
width: px2rem(482);
height: px2rem(228);
position: relative;
top: px2rem(394);
margin: 0 auto;
display: block;
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(494);
height: px2rem(104);
width: px2rem(374);
height: px2rem(92);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(256);
bottom: px2rem(222);
display: block;
}
.down {
width: px2rem(64);
height: px2rem(48);
width: px2rem(38);
height: px2rem(28);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(72);
left: 48%;
// transform: translateX(-50%);
bottom: px2rem(20);
}
}
@@ -310,58 +409,60 @@
// display: none;
.pageText2 {
width: px2rem(446);
height: px2rem(114);
width: px2rem(750);
height: px2rem(814);
position: relative;
top: px2rem(210);
top: px2rem(258);
margin: 0 auto;
display: block;
display: none;
}
.page2_in {
width: px2rem(750);
height: px2rem(804);
height: px2rem(874);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(194);
// bottom: px2rem(194);
top: px2rem(188);
}
.pagetx1 {
width: px2rem(302);
width: px2rem(476);
height: px2rem(308);
position: absolute;
left: px2rem(448);
// top: px2rem(406);
bottom: px2rem(620);
left: px2rem(234);
top: px2rem(342);
// bottom: px2rem(620);
}
.pagetx2 {
width: px2rem(452);
height: px2rem(264);
width: px2rem(476);
height: px2rem(308);
position: absolute;
left: px2rem(40);
// top: px2rem(770);
bottom: px2rem(300);
top: px2rem(688);
// bottom: px2rem(300);
}
.downioad {
width: px2rem(494);
height: px2rem(104);
width: px2rem(374);
height: px2rem(84);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(144);
bottom: px2rem(125);
display: block;
}
.down {
width: px2rem(64);
height: px2rem(48);
width: px2rem(38);
height: px2rem(28);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(72);
left: 48%;
// transform: translateX(-50%);
bottom: px2rem(20);
}
}
@@ -381,71 +482,73 @@
display: block;
margin: 0 auto;
top: px2rem(210);
display: none;
}
.page3_in {
width: px2rem(750);
height: px2rem(804);
height: px2rem(874);
position: absolute;
left: 50%;
transform: translateX(-50%);
// top: px2rem(336);
bottom: px2rem(194);
top: px2rem(188);
// bottom: px2rem(194);
}
.page3Icon1 {
width: px2rem(324);
height: px2rem(230);
width: px2rem(307);
height: px2rem(220);
position: absolute;
left: px2rem(426);
// top: px2rem(456);
bottom: px2rem(648);
top: px2rem(424);
// bottom: px2rem(648);
}
.page3Icon2 {
width: px2rem(154);
height: px2rem(154);
width: px2rem(324);
height: px2rem(232);
position: absolute;
left: px2rem(114);
// top: px2rem(442);
bottom: px2rem(738);
left: px2rem(0);
top: px2rem(364);
// bottom: px2rem(738);
}
.page3Icon3 {
width: px2rem(218);
height: px2rem(142);
width: px2rem(324);
height: px2rem(232);
position: absolute;
left: px2rem(440);
// top: px2rem(816);
bottom: px2rem(376);
// left: px2rem(440);
right: px2rem(0);
top: px2rem(750);
// bottom: px2rem(376);
}
.page3Icon4 {
width: px2rem(298);
height: px2rem(176);
width: px2rem(284);
height: px2rem(204);
position: absolute;
left: px2rem(20);
// top: px2rem(874);
bottom: px2rem(284);
left: px2rem(0);
top: px2rem(836);
// bottom: px2rem(284);
}
.downioad {
width: px2rem(494);
height: px2rem(104);
width: px2rem(374);
height: px2rem(84);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(144);
bottom: px2rem(125);
display: block;
}
.down {
width: px2rem(64);
height: px2rem(48);
width: px2rem(38);
height: px2rem(28);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(72);
left: 48%;
// transform: translateX(-50%);
bottom: px2rem(20);
}
}
@@ -463,53 +566,54 @@
top: px2rem(210);
display: block;
margin: 0 auto;
display: none;
}
.page4_in {
width: px2rem(750);
height: px2rem(802);
height: px2rem(874);
position: absolute;
left: 50%;
transform: translateX(-50%);
// top: px2rem(338);
bottom: px2rem(194);
top: px2rem(188);
// bottom: px2rem(194);
}
.page4Icon1 {
width: px2rem(496);
height: px2rem(460);
width: px2rem(418);
height: px2rem(384);
position: absolute;
left: px2rem(6);
// top: px2rem(428);
bottom: px2rem(446);
left: px2rem(0);
top: px2rem(384);
// bottom: px2rem(224);
}
.page4Icon2 {
width: px2rem(496);
height: px2rem(460);
width: px2rem(418);
height: px2rem(384);
position: absolute;
left: px2rem(246);
// top: px2rem(650);
bottom: px2rem(224);
right: px2rem(0);
top: px2rem(644);
// bottom: px2rem(224);
}
.downioad {
width: px2rem(494);
height: px2rem(104);
width: px2rem(374);
height: px2rem(84);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(144);
bottom: px2rem(125);
display: block;
}
.down {
width: px2rem(64);
height: px2rem(48);
width: px2rem(38);
height: px2rem(28);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(72);
left: 48%;
// transform: translateX(-50%);
bottom: px2rem(20);
}
}
@@ -524,9 +628,9 @@
.pageTxte5 {
width: px2rem(496);
height: px2rem(380);
height: px2rem(332);
position: relative;
top: px2rem(280);
top: px2rem(256);
display: block;
margin: 0 auto;
}
@@ -540,14 +644,14 @@
left: 50%;
transform: translateX(-50%);
// top: 5rem;
bottom: px2rem(526);
bottom: px2rem(386);
}
.bootom {
width: 100%;
height: 1.5rem;
// height: 1.5rem;
position: absolute;
bottom: px2rem(84);
bottom: px2rem(24);
left: 0;
text-align: center;
color: #B4B4BA;
@@ -558,24 +662,24 @@
}
}
.downioad {
width: px2rem(494);
height: px2rem(104);
width: px2rem(374);
height: px2rem(92);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(256);
bottom: px2rem(222);
display: block;
}
.down {
width: px2rem(64);
height: px2rem(48);
width: px2rem(38);
height: px2rem(28);
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: px2rem(72);
left: 48%;
// transform: translateX(-50%);
bottom: px2rem(20);
}
}
}
@@ -645,7 +749,7 @@
font-size: px2rem(24);
float: right;
margin-top: px2rem(4);
margin-right: px2rem(80);
margin-right: px2rem(32);
text-align: center;
border-radius: px2rem(56);

BIN
view/peko/home/images/contactUs.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.4 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
view/peko/home/images/down.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 710 B

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
view/peko/home/images/downioad.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.9 KiB

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
view/peko/home/images/downioadH5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
view/peko/home/images/h51.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 478 KiB

BIN
view/peko/home/images/h55.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 81 KiB

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
view/peko/home/images/h5And.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

BIN
view/peko/home/images/h5Ios.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 10 KiB

BIN
view/peko/home/images/homePc2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 356 KiB

BIN
view/peko/home/images/page2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 454 KiB

BIN
view/peko/home/images/page3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 99 KiB

After

Width:  |  Height:  |  Size: 540 KiB

BIN
view/peko/home/images/page3Icon1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 72 KiB

BIN
view/peko/home/images/page3Icon2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.9 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
view/peko/home/images/page3Icon3.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 21 KiB

BIN
view/peko/home/images/page3Icon4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 43 KiB

BIN
view/peko/home/images/page4.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 266 KiB

BIN
view/peko/home/images/page4Icon1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 25 KiB

After

Width:  |  Height:  |  Size: 85 KiB

BIN
view/peko/home/images/page4Icon2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 26 KiB

After

Width:  |  Height:  |  Size: 82 KiB

BIN
view/peko/home/images/pageTxte1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.9 KiB

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
view/peko/home/images/pageTxte2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
view/peko/home/images/pageTxte5.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 38 KiB

BIN
view/peko/home/images/pagetx1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 48 KiB

BIN
view/peko/home/images/pagetx2.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 56 KiB

BIN
view/peko/home/images/pcAnd.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
view/peko/home/images/pcBgBig.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 622 KiB

BIN
view/peko/home/images/pcCode.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
view/peko/home/images/pcIos.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

BIN
view/peko/home/images/pcMarket1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 121 KiB

After

Width:  |  Height:  |  Size: 462 KiB

BIN
view/peko/home/images/pcText.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 11 KiB

49
view/peko/home/index.html
View File

@@ -14,34 +14,22 @@
<body>
<!-- pc端 -->
<div class="pc">
<!-- 頭部 -->
<div class="header">
<img src="./images/logo.png" alt="" class="logo">
<div class="name">PIKO</div>
<div class="index">
首頁
<span></span>
<div class="container pc">
<div class="pc-bg">
<!-- <img src="./images/homePc.png" alt=""> -->
<div class="homePc">
<div class="diamound">
<img src="./images/diamond.png" alt=""> 儲值
</div>
<div class="pcIos"></div>
<div class="pcAnd"></div>
</div>
<div class="diamound">
<img src="./images/diamond.png" alt=""> 儲值
<div class="bootom">
<p>Hongkong Han Fei Technology Co.,Limited</p>
<p>CR No:3040005&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Address: BLDG. 19-21 HING YIP STREET KWUN TONG.KLN
</p>
</div>
</div>
<!-- 市場圖 -->
<img src="./images/pcMarket1.png" alt="" class="pcMarket1">
<!-- 頁面文案 -->
<img src="./images/pcText.png" alt="" class="pcText">
<!-- 蘋果下載 -->
<img src="./images/pcIos.png" alt="" class="pcIos">
<!-- 安卓下載 -->
<img src="./images/pcAnd.png" alt="" class="pcAnd">
<!-- 二維碼 -->
<img src="./images/pcCode.png" alt="" class="code">
<!-- 底部 -->
<div class="bottom">
<p>Hongkong Han Fei Technology Co.,Limited</p>
<p>CR No:3040005&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Address: BLDG. 19-21 HING YIP STREET KWUN TONG.KLN</p>
</div>
</div>
<!-- h5端 -->
<div class="h5">
@@ -64,9 +52,10 @@
<!-- 頁面1 -->
<div class="pages page1 animate__animated">
<img src="./images/pageTxte1.png" alt="" class="pageTxte1 animate__animated animate__slow__3s">
<img src="./images/pageTxte2.png" alt="" class="pageTxte2 animate__animated animate__slow__3s">
<!-- <img src="./images/h5And.png" alt="" class="h5And animate__animated animate__slow__1.8s"> -->
<img style="display: none;" src="" alt="" class="downioad animate__animated animate__slow__1.8s">
<img src="./images/down.png" alt="" class="down">
<img src="./images/down.png" alt="" class="down animate__animated animate__slideInDown animate__slow">
</div>
<!-- 頁面2 -->
@@ -76,7 +65,7 @@
<img src="./images/pagetx1.png" alt="" class="pagetx1 animate__animated ">
<img src="./images/pagetx2.png" alt="" class="pagetx2 animate__animated ">
<img src="./images/downioad.png" alt="" class="downioad animate__animated ">
<img src="./images/down.png" alt="" class="down">
<img src="./images/down.png" alt="" class="down animate__animated animate__slideInDown animate__slow ">
</div>
<!-- 頁面3 -->
@@ -88,7 +77,7 @@
<img src="./images/page3Icon3.png" alt="" class="page3Icon3 animate__animated animate__delay-4s">
<img src="./images/page3Icon4.png" alt="" class="page3Icon4 animate__animated animate__delay-3s">
<img src="./images/downioad.png" alt="" class="downioad animate__animated">
<img src="./images/down.png" alt="" class="down">
<img src="./images/down.png" alt="" class="down animate__animated animate__slideInDown animate__slow ">
</div>
<!-- 頁面4 -->
@@ -98,7 +87,7 @@
<img src="./images/page4Icon2.png" alt="" class="page4Icon2 animate__animated">
<img src="./images/page4Icon1.png" alt="" class="page4Icon1 animate__animated">
<img src="./images/downioad.png" alt="" class="downioad animate__animated">
<img src="./images/down.png" alt="" class="down">
<img src="./images/down.png" alt="" class="down animate__animated animate__slideInDown animate__slow ">
</div>
<!-- 頁面5 -->
@@ -110,7 +99,7 @@
<div class="bootom">
<p>Hongkong Han Fei Technology Co.,Limited</p>
<p>CR No:3040005</p>
<p>Address: BLDG. 19-21 HING YIP STREET KWUN TONG.KLN</p>
<p style="margin-bottom:0">Address: BLDG. 19-21 HING YIP STREET KWUN TONG.KLN</p>
</div>
</div>
</div>

36
view/peko/home/js/index.js
View File

@@ -33,6 +33,23 @@ var androidSkipType;
var iosSkipType;
// 初始化函數
$(function () {
$(document).ready(function () {
var deviceWidth = document.documentElement.clientWidth;
if (deviceWidth > 768) {
document.documentElement.style.fontSize = deviceWidth / 19.20 + 'px';
} else {
document.documentElement.style.fontSize = deviceWidth / 7.50 + 'px';
}
});
window.onresize = function () {
var deviceWidth = document.documentElement.clientWidth;
// console.log('deviceWidth', deviceWidth);
if (deviceWidth > 768) {
document.documentElement.style.fontSize = deviceWidth / 19.20 + 'px';
} else {
document.documentElement.style.fontSize = deviceWidth / 7.50 + 'px';
}
}
getInfoFromClient();
getConfig();
})
@@ -116,12 +133,15 @@ $('body .h5').on('touchend', function (e) {
// 動畫調用
function animatedImplementFun (index) {
if (index == 0) {
// animatedFun($(`body .h5 .pagesBox .page1 .pageTxte1`), ['animate__zoomInDown',]);
animatedFun($(`body .h5 .pagesBox .page1 .pageTxte1`), ['animate__fadeInLeft',]);
animatedFun($(`body .h5 .pagesBox .page1 .pageTxte2`), ['animate__fadeInRight',]);
// animatedFun($(`body .h5 .pagesBox .page1 .downioad`), ['animate__wobble',]);
// animatedFun($(`body .h5 .pagesBox .page1 .down`), ['animate__slideInDown',]);
} else if (index == 1) {
// animatedFun($(`body .h5 .pagesBox .page2 .pageText2`), ['animate__bounce',]);
animatedFun($(`body .h5 .pagesBox .page2 .pagetx1`), ['animate__bounceInRight',]);
animatedFun($(`body .h5 .pagesBox .page2 .pagetx2`), ['animate__bounceInLeft',]);
// animatedFun($(`body .h5 .pagesBox .page2 .down`), ['animate__slideInDown',]);
// animatedFun($(`body .h5 .pagesBox .page2 .downioad`), ['animate__wobble',]);
} else if (index == 2) {
// animatedFun($(`body .h5 .pagesBox .page3 .pageText3`), ['animate__rubberBand',]);
@@ -129,12 +149,14 @@ function animatedImplementFun (index) {
animatedFun($(`body .h5 .pagesBox .page3 .page3Icon2`), ['animate__lightSpeedInLeft',]);
animatedFun($(`body .h5 .pagesBox .page3 .page3Icon3`), ['animate__lightSpeedInRight',]);
animatedFun($(`body .h5 .pagesBox .page3 .page3Icon4`), ['animate__lightSpeedInLeft',]);
// animatedFun($(`body .h5 .pagesBox .page3 .down`), ['animate__slideInDown',]);
// animatedFun($(`body .h5 .pagesBox .page3 .downioad`), ['animate__slideInUp',]);
} else if (index == 3) {
// animatedFun($(`body .h5 .pagesBox .page4 .pageText4 `), ['animate__rubberBand',]);
animatedFun($(`body .h5 .pagesBox .page4 .page4Icon1 `), ['animate__lightSpeedInLeft',]);
animatedFun($(`body .h5 .pagesBox .page4 .page4Icon2 `), ['animate__lightSpeedInRight',]);
// animatedFun($(`body .h5 .pagesBox .page4 .down`), ['animate__slideInDown',]);
// animatedFun($(`body .h5 .pagesBox .page4 .downioad `), ['animate__slideInUp',]);
} else if (index == 4) {
// animatedFun($(`body .h5 .pagesBox .page5 .pageTxte5 `), ['animate__jackInTheBox',]);
@@ -160,7 +182,7 @@ $('body .pc .header .diamound, html .pc .header .diamound').click(function () {
// PC蘋果下載按鈕
$('html .pc .pcIos').click(function () {
if (ios) {
officialClick(0,ios);
officialClick(0, ios);
window.location = ios;
} else {
toastMsg('暫未開放下載，詳情請聯繫客服')
@@ -169,7 +191,7 @@ $('html .pc .pcIos').click(function () {
// PC安卓下載按鈕
$('html .pc .pcAnd').click(function () {
if (and) {
officialClick(1,and);
officialClick(1, and);
window.location = and;
} else {
toastMsg('暫未開放下載，詳情請聯繫客服')
@@ -215,7 +237,7 @@ $('.page5 .contactUs').click(function () {
// h5首頁安卓下載
$('body .h5 .pagesBox .page1 .h5And').click(function () {
if (and) {
officialClick(1,and);
officialClick(1, and);
window.location = and;
} else {
toastMsg('暫未開放下載，詳情請聯繫客服')
@@ -224,7 +246,7 @@ $('body .h5 .pagesBox .page1 .h5And').click(function () {
// h5首頁蘋果下載
$('body .h5 .pagesBox .page1 .h5Ios').click(function () {
if (ios) {
officialClick(0,ios);
officialClick(0, ios);
window.location = ios;
} else {
toastMsg('暫未開放下載，詳情請聯繫客服')
@@ -234,10 +256,10 @@ $('body .h5 .pagesBox .page1 .h5Ios').click(function () {
$('body .h5 .pagesBox .pages .downioad').click(function () {
if (url) {
if (browser.ios) {
officialClick(0,url);
officialClick(0, url);
window.location = url;
} else if (browser.android) {
officialClick(1,url);
officialClick(1, url);
window.location = url;
} else {
$('.menu').css("z-index", "1");