diff --git a/view/peko/home/css/index.css b/view/peko/home/css/index.css index cad8bc6..7e837c9 100644 --- a/view/peko/home/css/index.css +++ b/view/peko/home/css/index.css @@ -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; } diff --git a/view/peko/home/css/index.scss b/view/peko/home/css/index.scss index b620097..aea5c93 100644 --- a/view/peko/home/css/index.scss +++ b/view/peko/home/css/index.scss @@ -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); diff --git a/view/peko/home/images/contactUs.png b/view/peko/home/images/contactUs.png index e13104e..eb21033 100644 Binary files a/view/peko/home/images/contactUs.png and b/view/peko/home/images/contactUs.png differ diff --git a/view/peko/home/images/down.png b/view/peko/home/images/down.png index 2395165..4de5deb 100644 Binary files a/view/peko/home/images/down.png and b/view/peko/home/images/down.png differ diff --git a/view/peko/home/images/downioad.png b/view/peko/home/images/downioad.png index 008aaa8..5df1510 100644 Binary files a/view/peko/home/images/downioad.png and b/view/peko/home/images/downioad.png differ diff --git a/view/peko/home/images/downioadH5.png b/view/peko/home/images/downioadH5.png new file mode 100644 index 0000000..f1833ee Binary files /dev/null and b/view/peko/home/images/downioadH5.png differ diff --git a/view/peko/home/images/h51.png b/view/peko/home/images/h51.png index f1b685a..36eaa5a 100644 Binary files a/view/peko/home/images/h51.png and b/view/peko/home/images/h51.png differ diff --git a/view/peko/home/images/h55.png b/view/peko/home/images/h55.png index 3941c81..dc4c79d 100644 Binary files a/view/peko/home/images/h55.png and b/view/peko/home/images/h55.png differ diff --git a/view/peko/home/images/h5And.png b/view/peko/home/images/h5And.png index 024c25d..ac4328d 100644 Binary files a/view/peko/home/images/h5And.png and b/view/peko/home/images/h5And.png differ diff --git a/view/peko/home/images/h5Ios.png b/view/peko/home/images/h5Ios.png index 336c071..96bfd95 100644 Binary files a/view/peko/home/images/h5Ios.png and b/view/peko/home/images/h5Ios.png differ diff --git a/view/peko/home/images/homePc2.png b/view/peko/home/images/homePc2.png new file mode 100644 index 0000000..6ad2c68 Binary files /dev/null and b/view/peko/home/images/homePc2.png differ diff --git a/view/peko/home/images/page2.png b/view/peko/home/images/page2.png index f922ab3..0a0aec6 100644 Binary files a/view/peko/home/images/page2.png and b/view/peko/home/images/page2.png differ diff --git a/view/peko/home/images/page3.png b/view/peko/home/images/page3.png index 229d57a..b86d22c 100644 Binary files a/view/peko/home/images/page3.png and b/view/peko/home/images/page3.png differ diff --git a/view/peko/home/images/page3Icon1.png b/view/peko/home/images/page3Icon1.png index ca6710f..ed74bd6 100644 Binary files a/view/peko/home/images/page3Icon1.png and b/view/peko/home/images/page3Icon1.png differ diff --git a/view/peko/home/images/page3Icon2.png b/view/peko/home/images/page3Icon2.png index 7e9adc7..367c4a6 100644 Binary files a/view/peko/home/images/page3Icon2.png and b/view/peko/home/images/page3Icon2.png differ diff --git a/view/peko/home/images/page3Icon3.png b/view/peko/home/images/page3Icon3.png index cca233d..b2e7bf5 100644 Binary files a/view/peko/home/images/page3Icon3.png and b/view/peko/home/images/page3Icon3.png differ diff --git a/view/peko/home/images/page3Icon4.png b/view/peko/home/images/page3Icon4.png index 29abbf0..36ec2ad 100644 Binary files a/view/peko/home/images/page3Icon4.png and b/view/peko/home/images/page3Icon4.png differ diff --git a/view/peko/home/images/page4.png b/view/peko/home/images/page4.png index 78b6c8d..025a172 100644 Binary files a/view/peko/home/images/page4.png and b/view/peko/home/images/page4.png differ diff --git a/view/peko/home/images/page4Icon1.png b/view/peko/home/images/page4Icon1.png index 9662a5e..61cbbb1 100644 Binary files a/view/peko/home/images/page4Icon1.png and b/view/peko/home/images/page4Icon1.png differ diff --git a/view/peko/home/images/page4Icon2.png b/view/peko/home/images/page4Icon2.png index 059a3fc..712d9ee 100644 Binary files a/view/peko/home/images/page4Icon2.png and b/view/peko/home/images/page4Icon2.png differ diff --git a/view/peko/home/images/pageTxte1.png b/view/peko/home/images/pageTxte1.png index 5ca55a2..c1fae07 100644 Binary files a/view/peko/home/images/pageTxte1.png and b/view/peko/home/images/pageTxte1.png differ diff --git a/view/peko/home/images/pageTxte2.png b/view/peko/home/images/pageTxte2.png new file mode 100644 index 0000000..61d23e1 Binary files /dev/null and b/view/peko/home/images/pageTxte2.png differ diff --git a/view/peko/home/images/pageTxte5.png b/view/peko/home/images/pageTxte5.png index b3b1916..dab3e85 100644 Binary files a/view/peko/home/images/pageTxte5.png and b/view/peko/home/images/pageTxte5.png differ diff --git a/view/peko/home/images/pagetx1.png b/view/peko/home/images/pagetx1.png index bb4b05d..865029b 100644 Binary files a/view/peko/home/images/pagetx1.png and b/view/peko/home/images/pagetx1.png differ diff --git a/view/peko/home/images/pagetx2.png b/view/peko/home/images/pagetx2.png index 3115971..0888513 100644 Binary files a/view/peko/home/images/pagetx2.png and b/view/peko/home/images/pagetx2.png differ diff --git a/view/peko/home/images/pcAnd.png b/view/peko/home/images/pcAnd.png index f6171ec..ee0be2e 100644 Binary files a/view/peko/home/images/pcAnd.png and b/view/peko/home/images/pcAnd.png differ diff --git a/view/peko/home/images/pcBgBig.png b/view/peko/home/images/pcBgBig.png new file mode 100644 index 0000000..f129e4f Binary files /dev/null and b/view/peko/home/images/pcBgBig.png differ diff --git a/view/peko/home/images/pcCode.png b/view/peko/home/images/pcCode.png index 79592e1..0b018e6 100644 Binary files a/view/peko/home/images/pcCode.png and b/view/peko/home/images/pcCode.png differ diff --git a/view/peko/home/images/pcIos.png b/view/peko/home/images/pcIos.png index e00b24e..3208f11 100644 Binary files a/view/peko/home/images/pcIos.png and b/view/peko/home/images/pcIos.png differ diff --git a/view/peko/home/images/pcMarket1.png b/view/peko/home/images/pcMarket1.png index 7eff8f4..2f038e6 100644 Binary files a/view/peko/home/images/pcMarket1.png and b/view/peko/home/images/pcMarket1.png differ diff --git a/view/peko/home/images/pcText.png b/view/peko/home/images/pcText.png index aeca4ab..02327ef 100644 Binary files a/view/peko/home/images/pcText.png and b/view/peko/home/images/pcText.png differ diff --git a/view/peko/home/index.html b/view/peko/home/index.html index 5b50d93..37e8208 100644 --- a/view/peko/home/index.html +++ b/view/peko/home/index.html @@ -14,34 +14,22 @@ -
- -
- -
PIKO
-
- 首頁 - +
+
+ +
+
+ 儲值 +
+
+
-
- 儲值 +
+

Hongkong Han Fei Technology Co.,Limited

+

CR No:3040005      Address: BLDG. 19-21 HING YIP STREET KWUN TONG.KLN +

- - - - - - - - - - - -
-

Hongkong Han Fei Technology Co.,Limited

-

CR No:3040005      Address: BLDG. 19-21 HING YIP STREET KWUN TONG.KLN

-
@@ -64,9 +52,10 @@
+ - +
@@ -76,7 +65,7 @@ - +
@@ -88,7 +77,7 @@ - +
@@ -98,7 +87,7 @@ - +
@@ -110,7 +99,7 @@

Hongkong Han Fei Technology Co.,Limited

CR No:3040005

-

Address: BLDG. 19-21 HING YIP STREET KWUN TONG.KLN

+

Address: BLDG. 19-21 HING YIP STREET KWUN TONG.KLN

diff --git a/view/peko/home/js/index.js b/view/peko/home/js/index.js index 2ce012b..3b42050 100644 --- a/view/peko/home/js/index.js +++ b/view/peko/home/js/index.js @@ -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");