diff --git a/view/peko/home/css/index.css b/view/peko/home/css/index.css index 2e246c9..4a8f087 100644 --- a/view/peko/home/css/index.css +++ b/view/peko/home/css/index.css @@ -16,7 +16,6 @@ html { .m-bg img { display: block; } - .homePc { width: 100%; height: 10rem; @@ -28,7 +27,7 @@ html { width: 1.11rem; height: 0.5rem; background: rgba(255, 255, 255, 0.2); - border-radius: 0.13rem; + border-radius: .13rem; font-size: 0.24rem; color: #fff; text-align: center; @@ -58,13 +57,14 @@ html { left: 2.4rem; bottom: 1.6rem; } - .eori { width: 100%; background: #30312C; color: white; padding: 0.2rem 0; vertical-align: top; + position: absolute; + top: 0.8rem; } .eori .gongsi { display: flex; @@ -78,19 +78,17 @@ html { margin: 0 0.2rem; } } + @media screen and (max-width: 768px) { body { background-color: #0C0122; } - .pc-bg { display: none; } - .m-bg { display: block; } - .homeM { width: 100%; height: 14.89rem; @@ -102,7 +100,7 @@ html { width: 1.11rem; height: 0.5rem; background: rgba(255, 255, 255, 0.2); - border-radius: 0.13rem; + border-radius: .13rem; font-size: 0.24rem; color: #fff; text-align: center; @@ -148,26 +146,24 @@ html { width: 2.2rem; height: 0.7rem; } - .button-wrapper { display: block; position: absolute; left: 1.28rem; top: 17.52rem; - width: 7.4666666667rem; - height: 1.2266666667rem; + width: 7.46667rem; + height: 1.22667rem; } .button-wrapper a { display: inline-block; width: 100%; height: 100%; } - .button2-wrapper { display: block; position: absolute; - left: 3.0933333333rem; - bottom: 1.7066666667rem; + left: 3.09333rem; + bottom: 1.70667rem; width: 4rem; height: 0.8rem; background: rgba(255, 255, 255, 0); @@ -177,11 +173,9 @@ html { width: 100%; height: 100%; } - .m-button { display: block; } - .text-wrapper { padding-left: 0; width: 90%; @@ -192,15 +186,16 @@ html { margin-bottom: 10px; } .text-wrapper .text1, -.text-wrapper p { + .text-wrapper p { text-align: center; } - .eori { width: 100%; background: #30312C; color: white; padding: 0.2rem 0; + position: absolute; + top: 0.75rem; } .eori .recordfoot { color: #fff; @@ -210,9 +205,9 @@ html { } .eori .recordfoot .record { display: inline-block; - padding-right: 0.0533333333rem; - height: 0.3733333333rem; - width: 0.4266666667rem; + padding-right: 0.05333rem; + height: 0.37333rem; + width: 0.42667rem; background: url(../images/icon_police.png) no-repeat; } .eori .gongsi { @@ -233,6 +228,7 @@ html { font-size: 20px; } } + .toast { background: rgba(0, 0, 0, 0.9); border-radius: 10px; @@ -254,9 +250,7 @@ html { display: none; position: fixed; top: 0; - right: 0.2666666667rem; - width: 6.1333333333rem; + right: 0.26667rem; + width: 6.13333rem; z-index: 9; } - -/*# sourceMappingURL=index.css.map */ diff --git a/view/peko/home/css/index.scss b/view/peko/home/css/index.scss index 0357477..bc2484e 100644 --- a/view/peko/home/css/index.scss +++ b/view/peko/home/css/index.scss @@ -1,449 +1,300 @@ -@function px2rem($px, $rem: 75) { - @return $px / $rem+rem; +@function px2rem($px) { + @return $px / 75+rem; } body, html { - width: 100%; - height: 100%; - font-family: "Heiti SC", "Microsoft Sans Serif"; - //overflow: hidden; + width: 100%; + height: 100%; + font-family: "Heiti SC", "Microsoft Sans Serif"; + //overflow: hidden; } .container { - position: relative; + position: relative; } -// .eori { -// // height: 8.7%; -// width: 100%; -// background: #000; -// // color: #D1D1D1; -// position: absolute; -// left: 0; -// padding: px2rem(10, ) 0; -// // p { -// // height: 40px; -// // width: 50%; -// // float: left; -// // text-align: center; -// // line-height: 40px; -// // font-size: 10px; -// // text-align: right; -// // padding-right: 20px; -// // box-sizing: border-box; - -// // a { -// // color: #666; -// // } -// // } - -// .weixin-name { -// padding-top: px2rem(20); -// } - -// .recordfoot { -// width: 100%; -// color: #000; -// text-align: left; -// display: flex; -// justify-content: center; -// align-items: center; -// font-size: 13px; -// margin-bottom: px2rem(6, ); - -// .record { -// display: inline-block; -// padding-right: px2rem(4); -// width: px2rem(14, ); -// height: px2rem(16, ); -// background: url(../images/icon_police.png) no-repeat; -// // background: #948aff; -// } - -// a { -// color: #fff; -// } -// } - -// .gongsi { -// display: flex; -// justify-content: center; -// font-size: 13px; -// color: #fff; - -// p { -// &:nth-child(2) { -// margin: 0 14px; -// } -// } -// } - -// // div { -// // // height: 30px; -// // width: 100%; -// // text-align: center; -// // // line-height: 30px; -// // font-size: 16px; -// // } - -// .tit { -// height: 60px; -// line-height: 60px; -// text-align: center; -// font-size: 20px; -// } -// } - -// .footer { -// line-height: 70px; -// text-align: center; -// font-size: 14px; -// color: #fff; -// background: rgba(0, 0, 0, 0.6); - -// span { -// margin: 0 6px; -// } - -// a { -// color: #fff; -// } -// } - -// .button-wrapper { -// cursor: pointer; -// position: absolute; -// left: 68.55%; -// // top: 62.27%; -// top: 68%; -// width: 19.4%; -// height: 6.6%; -// background: rgba(253, 247, 247, 0); - -// a { -// display: inline-block; -// width: 100%; -// height: 100%; -// } -// } - -// .button2-wrapper { -// cursor: pointer; -// position: absolute; -// left: 45.55%; -// // top: 61.09%; -// top: 67%; -// width: 19.4%; -// height: 7.6%; -// // background: rgba(253, 247, 247, 0); - -// a { -// display: inline-block; -// width: 100%; -// height: 100%; -// } -// } - -// .button-wrapper, -// .button2-wrapper { -// display: none; -// } - // pc端 @media screen and (min-width:769px) { - .m-bg { - display: none; + .m-bg { + display: none; - img { - display: block; - } - } - - .homePc { - width: 100%; - height: 10rem; - background: url(../images/homePc.png) no-repeat; - background-size: 100% 100%; - position: relative; - - .charge { - width: 1.11rem; - height: 0.5rem; - background: rgb(255, 255, 255, 0.2); - border-radius: .13rem; - font-size: 0.24rem; - color: #fff; - text-align: center; - line-height: 0.5rem; - position: absolute; - top: 0.16rem; - right: 2.77rem; - } - - .googlePlay { - width: 2.2rem; - height: 0.7rem; - position: absolute; - left: 2.4rem; - bottom: 3.4rem; - } - .appleStore { - width: 2.2rem; - height: 0.7rem; - position: absolute; - left: 2.4rem; - bottom: 2.5rem; - } - .apk { - width: 2.2rem; - height: 0.7rem; - position: absolute; - left: 2.4rem; - bottom: 1.6rem; - } - } - - .eori { - // height: 1.2rem; - width: 100%; - background: #30312C; - color: rgb(255, 255, 255); - padding: 0.2rem 0; - vertical-align: top; - // position: absolute; - // top: 0.75rem; - - // .recordfoot { - // color: #fff; - // display: flex; - // justify-content: center; - // align-items: center; - - // .record { - // display: inline-block; - // padding-right: px2rem(4); - // height: px2rem(28, ); - // width: px2rem(32, ); - // background: url(../images/icon_police.png) no-repeat; - // } - // } - - .gongsi { - display: flex; - justify-content: center; - text-align: center; - - p { - font-size: 0.2rem; - - &:nth-child(2) { - margin: 0 0.2rem; + img { + display: block; } - } } - } + .homePc { + width: 100%; + height: 10rem; + background: url(../images/homePc.png) no-repeat; + background-size: 100% 100%; + position: relative; + + .charge { + width: 1.11rem; + height: 0.5rem; + background: rgba(255, 255, 255, 0.2); + border-radius: .13rem; + font-size: 0.24rem; + color: #fff; + text-align: center; + line-height: 0.5rem; + position: absolute; + top: 0.16rem; + right: 2.77rem; + } + + .googlePlay { + width: 2.2rem; + height: 0.7rem; + position: absolute; + left: 2.4rem; + bottom: 3.4rem; + } + + .appleStore { + width: 2.2rem; + height: 0.7rem; + position: absolute; + left: 2.4rem; + bottom: 2.5rem; + } + + .apk { + width: 2.2rem; + height: 0.7rem; + position: absolute; + left: 2.4rem; + bottom: 1.6rem; + } + } + + .eori { + // height: 1.2rem; + width: 100%; + background: #30312C; + color: rgb(255, 255, 255); + padding: 0.2rem 0; + vertical-align: top; + position: absolute; + top: 0.8rem; + + .gongsi { + display: flex; + justify-content: center; + text-align: center; + + p { + font-size: 0.2rem; + + &:nth-child(2) { + margin: 0 0.2rem; + } + } + } + + } } // 移动端 @media screen and (max-width:768px) { - body { - background-color: #0C0122; - } - - .pc-bg { - display: none; - } - - .m-bg { - display: block; - } - - .homeM { - width: 100%; - // width: px2rem(750, ); - // height: px2rem(1489, ); - // height: 19.88rem; - height: 14.89rem; - background: url(../images/homeM.png) no-repeat; - background-size: 100% 100%; - position: relative; - - .charge { - width: 1.11rem; - height: 0.5rem; - background: rgb(255, 255, 255, 0.2); - border-radius: .13rem; - font-size: 0.24rem; - color: #fff; - text-align: center; - line-height: 0.5rem; - position: absolute; - top: 0.2rem; - right: 0.4rem; - // left: 50%; - // transform: translateX(-50%); + body { + background-color: #0C0122; } - .swiper { - width: 100%; - height: 8.6rem; - position: absolute; - top: 4.8rem; - overflow: hidden; + .pc-bg { + display: none; + } - .swiper-wrapper { - width: 60%; - height: 100%; + .m-bg { + display: block; + } - .swiper-slide { - img { + .homeM { + width: 100%; + // width: px2rem(750); + // height: px2rem(1489); + // height: 19.88rem; + height: 14.89rem; + background: url(../images/homeM.png) no-repeat; + background-size: 100% 100%; + position: relative; + + .charge { + width: 1.11rem; + height: 0.5rem; + background: rgba(255, 255, 255, 0.2); + border-radius: .13rem; + font-size: 0.24rem; + color: #fff; + text-align: center; + line-height: 0.5rem; + position: absolute; + top: 0.2rem; + right: 0.4rem; + // left: 50%; + // transform: translateX(-50%); + } + + .swiper { + width: 100%; + height: 8.6rem; + position: absolute; + top: 4.8rem; + overflow: hidden; + + .swiper-wrapper { + width: 60%; + height: 100%; + + .swiper-slide { + img { + width: 100%; + height: 100%; + } + } + + .swiper-slide-prev { + width: 100%; + height: 90%; + margin-top: 0.6rem; + } + + .swiper-slide-next { + width: 100%; + height: 90%; + margin-top: 0.6rem; + } + } + } + + .logo { + position: absolute; + bottom: 0.6rem; + left: 0; + width: 100%; + display: flex; + justify-content: space-evenly; + + img { + width: 2.2rem; + height: 0.7rem; + } + } + } + + .button-wrapper { + display: block; + position: absolute; + left: px2rem(96); + top: px2rem(1314); + width: px2rem(560); + height: px2rem(92); + + a { + display: inline-block; width: 100%; height: 100%; - } + } + } + + .button2-wrapper { + display: block; + position: absolute; + left: px2rem(232); + // top: px2rem(1208); + bottom: px2rem(128); + width: px2rem(300); + height: px2rem(60); + background: rgba(255, 255, 255, 0); + + a { + display: inline-block; + width: 100%; + height: 100%; + } + } + + .m-button { + display: block; + } + + .text-wrapper { + padding-left: 0; + width: 90%; + margin-left: -45%; + padding-top: 108px; + + .text { + .txt1 { + margin-bottom: 10px; + } + } - .swiper-slide-prev { - width: 100%; - height: 90%; - margin-top: 0.6rem; + .text1, + p { + text-align: center; + } + } + + .eori { + // height: 1.2rem; + width: 100%; + background: #30312C; + color: rgb(255, 255, 255); + padding: 0.2rem 0; + position: absolute; + top: 0.75rem; + + .recordfoot { + color: #fff; + display: flex; + justify-content: center; + align-items: center; + + .record { + display: inline-block; + padding-right: px2rem(4); + height: px2rem(28); + width: px2rem(32); + background: url(../images/icon_police.png) no-repeat; + } } - .swiper-slide-next { - width: 100%; - height: 90%; - margin-top: 0.6rem; + .gongsi { + display: block; + text-align: center; + + p { + line-height: 1.3; + font-size: 0.2rem; + + &:nth-child(2) { + margin: 0; + } + } } - } - } - .logo { - position: absolute; - bottom: 0.6rem; - left: 0; - width: 100%; - display: flex; - justify-content: space-evenly; + // div { + // // height: 30px; + // width: 100%; + // text-align: center; + // // line-height: 30px; + // font-size: 14px; + // } - img { - width: 2.2rem; - height: 0.7rem; - } - } - } - - .button-wrapper { - display: block; - position: absolute; - left: px2rem(96); - top: px2rem(1314); - width: px2rem(560); - height: px2rem(92); - - a { - display: inline-block; - width: 100%; - height: 100%; - } - } - - .button2-wrapper { - display: block; - position: absolute; - left: px2rem(232); - // top: px2rem(1208); - bottom: px2rem(128); - width: px2rem(300); - height: px2rem(60); - background: rgba(255, 255, 255, 0); - - a { - display: inline-block; - width: 100%; - height: 100%; - } - } - - .m-button { - display: block; - } - - .text-wrapper { - padding-left: 0; - width: 90%; - margin-left: -45%; - padding-top: 108px; - - .text { - .txt1 { - margin-bottom: 10px; - } - - } - - .text1, - p { - text-align: center; - } - } - - .eori { - // height: 1.2rem; - width: 100%; - background: #30312C; - color: rgb(255, 255, 255); - padding: 0.2rem 0; - // position: absolute; - // top: 0.75rem; - - .recordfoot { - color: #fff; - display: flex; - justify-content: center; - align-items: center; - - .record { - display: inline-block; - padding-right: px2rem(4); - height: px2rem(28, ); - width: px2rem(32, ); - background: url(../images/icon_police.png) no-repeat; - } - } - - .gongsi { - display: block; - text-align: center; - - p { - line-height: 1.3; - font-size: 0.2rem; - - &:nth-child(2) { - margin: 0; + .tit { + height: px2rem(120); + line-height: px2rem(120); + text-align: center; + font-size: 20px; } - } + } - // div { - // // height: 30px; - // width: 100%; - // text-align: center; - // // line-height: 30px; - // font-size: 14px; - // } - - .tit { - height: px2rem(120); - line-height: px2rem(120); - text-align: center; - font-size: 20px; - } - - } - } // @media screen and (max-width:375px) { @@ -459,27 +310,27 @@ html { .toast { - background: rgba(0, 0, 0, 0.9); - border-radius: 10px; - width: 100px; - font-size: 16px; - position: fixed; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - color: #fff; - height: 40px; - line-height: 40px; - text-align: center; - display: none; - z-index: 9; + background: rgba(0, 0, 0, 0.9); + border-radius: 10px; + width: 100px; + font-size: 16px; + position: fixed; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + color: #fff; + height: 40px; + line-height: 40px; + text-align: center; + display: none; + z-index: 9; } .tips { - display: none; - position: fixed; - top: 0; - right: px2rem(20); - width: px2rem(460); - z-index: 9; + display: none; + position: fixed; + top: 0; + right: px2rem(20); + width: px2rem(460); + z-index: 9; } \ No newline at end of file diff --git a/view/peko/home/index.html b/view/peko/home/index.html index c350d1c..52693af 100644 --- a/view/peko/home/index.html +++ b/view/peko/home/index.html @@ -82,10 +82,10 @@ 粤ICP备2020098441号 -->
-

Hong Kong Li Zi Technology Co., Limited

-

香港荔枝科技有限公司

+

Hongkong Han Fei Technology Co., Limited

+

香港翰飞科技有限公司

CR No:3040005

-

地址:FLAT/RM 7022 BLK D 7/F,TAK WING IND BLDG,3 TSUN WEN ROAD,TUEN MUN

+

地址:BLDG. 19-21 HING YIP STREET KWUN TONG, KLN