diff --git a/view/peko/modules/statistic/css/login.css b/view/peko/modules/statistic/css/login.css index 736bf6f..9da2bd4 100644 --- a/view/peko/modules/statistic/css/login.css +++ b/view/peko/modules/statistic/css/login.css @@ -6,10 +6,10 @@ body { .back { position: fixed; z-index: 9; - width: 0.7466666667rem; - height: 0.7466666667rem; - left: 0.5333333333rem; - top: 0.6666666667rem; + width: 0.74667rem; + height: 0.74667rem; + left: 0.53333rem; + top: 0.66667rem; display: none; } @@ -21,25 +21,28 @@ body { position: relative; margin: 0 auto -2rem; } + .header .logo { position: absolute; - width: 5.7066666667rem; - height: 5.7066666667rem; + width: 5.70667rem; + height: 5.70667rem; left: 50%; - top: 2.4266666667rem; + top: 2.42667rem; transform: translateX(-50%); + border-radius: 0.53333rem; } .box { width: 10rem; - height: 14.6133333333rem; - border-radius: 0.6666666667rem 0.6666666667rem 0px 0px; + height: 14.61333rem; + border-radius: 0.66667rem 0.66667rem 0px 0px; margin: 0 auto; position: relative; z-index: 2; background: #fff; overflow: hidden; } + .box input { background: transparent; border: none; @@ -47,92 +50,106 @@ body { box-sizing: border-box; padding: 0 0.64rem; } + .box input::placeholder { - font-size: 0.3733333333rem; + font-size: 0.37333rem; color: #8A8CAB; } + .box .idLogin .id { width: 8.08rem; - height: 1.3866666667rem; + height: 1.38667rem; background: #F3F5FA; - border-radius: 1.3866666667rem; - margin: 1.28rem auto 0.5333333333rem; + border-radius: 1.38667rem; + margin: 1.28rem auto 0.53333rem; display: block; } + .box .idLogin .password { width: 8.08rem; - height: 1.3866666667rem; + height: 1.38667rem; background: #F3F5FA; - border-radius: 1.3866666667rem; - margin: 0rem auto 1.0666666667rem; + border-radius: 1.38667rem; + margin: 0rem auto 1.06667rem; display: block; } + .box .phone { display: none; } + .box .phone .phoneNumberBox { width: 8.08rem; - height: 1.3866666667rem; + height: 1.38667rem; background: #F3F5FA; - border-radius: 1.3866666667rem; - margin: 1.28rem auto 0.5333333333rem; + border-radius: 1.38667rem; + margin: 1.28rem auto 0.53333rem; box-sizing: border-box; padding-left: 0.64rem; } + .box .phone .phoneNumberBox .prefix { float: left; - font-size: 0.4266666667rem; + font-size: 0.42667rem; color: #1F1B4F; font-weight: bold; height: 100%; - line-height: 1.3866666667rem; + line-height: 1.38667rem; } + .box .phone .phoneNumberBox .prefix b { - font-size: 0.4266666667rem; + font-size: 0.42667rem; color: #1F1B4F; font-weight: bold; - margin-right: 0.1066666667rem; + margin-right: 0.10667rem; } + .box .phone .phoneNumberBox .prefix img { display: inline-block; width: 0.32rem; - height: 0.2133333333rem; + height: 0.21333rem; vertical-align: middle; } + .box .phone .phoneNumberBox .phoneNumber { float: right; height: 100%; padding: 0; width: 5.5rem; } + .box .phone .codeBox { width: 8.08rem; - height: 1.3866666667rem; + height: 1.38667rem; background: #F3F5FA; - border-radius: 1.3866666667rem; - margin: 0rem auto 1.0666666667rem; + border-radius: 1.38667rem; + margin: 0rem auto 1.06667rem; } + .box .phone .codeBox .code { float: left; width: 5rem; height: 100%; } + .box .phone .codeBox .codeBut { text-align: center; color: #FFFFFF; - font-size: 0.3733333333rem; - border-radius: 1.0133333333rem; + font-size: 0.37333rem; + border-radius: 1.01333rem; width: 2.72rem; - height: 1.0133333333rem; - line-height: 1.0133333333rem; + height: 1.01333rem; + line-height: 1.01333rem; float: right; - margin-top: 0.1866666667rem; - margin-right: 0.2133333333rem; + margin-top: 0.18667rem; + margin-right: 0.21333rem; background: #9168FA; } + .box .phone .codeBox .codeButTime { background: #DED1FD; } + .box .but { width: 8.08rem; height: 1.28rem; @@ -140,13 +157,15 @@ body { line-height: 1.28rem; text-align: center; color: #FFFFFF; - font-size: 0.4266666667rem; - margin: 0 auto 0.5333333333rem; + font-size: 0.42667rem; + margin: 0 auto 0.53333rem; background: linear-gradient(90deg, #EEDCFF 0%, #DEE4FF 50%, #CCF8F9 100%); } + .box .butok { background: linear-gradient(90deg, #5AECFA 0%, #9DB4FF 49%, #CF70FF 100%); } + .box .hone { width: 8.08rem; height: 1.28rem; @@ -154,8 +173,8 @@ body { line-height: 1.28rem; text-align: center; color: #9168FA; - font-size: 0.4266666667rem; - margin: 0 auto 0.5333333333rem; + font-size: 0.42667rem; + margin: 0 auto 0.53333rem; background: linear-gradient(270deg, #FAEDFF 0%, #E6FDFF 100%); border: 1px solid #D480FF; } @@ -170,45 +189,48 @@ body { background: rgba(0, 0, 0, 0.6); display: none; } + .area .box { width: 100%; height: 8.88rem; - border-radius: 0.7466666667rem 0.7466666667rem 0 0; + border-radius: 0.74667rem 0.74667rem 0 0; background: #fff; position: absolute; bottom: 0; left: 0; } + .area .box p { width: 100%; text-align: center; - height: 1.8133333333rem; - line-height: 1.8133333333rem; - border-bottom: 0.0133333333rem solid #EBEEF5; + height: 1.81333rem; + line-height: 1.81333rem; + border-bottom: 0.01333rem solid #EBEEF5; font-size: 0.48rem; font-weight: bold; color: #1F1B4F; } + .area .box .list { position: absolute; left: 0; - top: 1.8133333333rem; + top: 1.81333rem; overflow-y: scroll; width: 100%; height: 7rem; } + .area .box .list span { display: block; width: 100%; height: 1.36rem; line-height: 1.36rem; - font-size: 0.4266666667rem; - border-bottom: 0.0133333333rem solid #EBEEF5; + font-size: 0.42667rem; + border-bottom: 0.01333rem solid #EBEEF5; text-align: center; color: #1F1B4F; } + .area .box .list .active { background: #F3F5FA; } - -/*# sourceMappingURL=login.css.map */ diff --git a/view/peko/modules/statistic/css/login.scss b/view/peko/modules/statistic/css/login.scss index a0703ce..da921f7 100644 --- a/view/peko/modules/statistic/css/login.scss +++ b/view/peko/modules/statistic/css/login.scss @@ -1,5 +1,5 @@ -@function px2rem($px, $rem:75) { - @return $px / $rem+rem; +@function px2rem($px) { + @return $px / 75+rem; } html, @@ -10,16 +10,16 @@ body { .back { position: fixed; z-index: 9; - width: px2rem(56, ); - height: px2rem(56, ); - left: px2rem(40, ); - top: px2rem(50, ); + width: px2rem(56); + height: px2rem(56); + left: px2rem(40); + top: px2rem(50); display: none; } .header { width: 100%; - height: px2rem(666, ); + height: px2rem(666); background: url(../images/login/bg.png) no-repeat; background-size: 100% 100%; position: relative; @@ -27,19 +27,20 @@ body { .logo { position: absolute; - width: px2rem(428, ); - height: px2rem(428, ); + width: px2rem(428); + height: px2rem(428); left: 50%; - top: px2rem(182, ); + top: px2rem(182); transform: translateX(-50%); + border-radius: px2rem(40); } } .box { - width: px2rem(750, ); - height: px2rem(1096, ); - border-radius: px2rem(50, ) px2rem(50, ) 0px 0px; + width: px2rem(750); + height: px2rem(1096); + border-radius: px2rem(50) px2rem(50) 0px 0px; margin: 0 auto; position: relative; z-index: 2; @@ -51,30 +52,30 @@ body { border: none; outline: none; box-sizing: border-box; - padding: 0 px2rem(48, ); + padding: 0 px2rem(48); &::placeholder { - font-size: px2rem(28, ); + font-size: px2rem(28); color: #8A8CAB; } } .idLogin { .id { - width: px2rem(606, ); - height: px2rem(104, ); + width: px2rem(606); + height: px2rem(104); background: #F3F5FA; - border-radius: px2rem(104, ); - margin: px2rem(96, ) auto px2rem(40, ); + border-radius: px2rem(104); + margin: px2rem(96) auto px2rem(40); display: block; } .password { - width: px2rem(606, ); - height: px2rem(104, ); + width: px2rem(606); + height: px2rem(104); background: #F3F5FA; - border-radius: px2rem(104, ); - margin: px2rem(0, ) auto px2rem(80, ); + border-radius: px2rem(104); + margin: px2rem(0) auto px2rem(80); display: block; } } @@ -83,33 +84,33 @@ body { display: none; .phoneNumberBox { - width: px2rem(606, ); - height: px2rem(104, ); + width: px2rem(606); + height: px2rem(104); background: #F3F5FA; - border-radius: px2rem(104, ); - margin: px2rem(96, ) auto px2rem(40, ); + border-radius: px2rem(104); + margin: px2rem(96) auto px2rem(40); box-sizing: border-box; - padding-left: px2rem(48, ); + padding-left: px2rem(48); .prefix { float: left; - font-size: px2rem(32, ); + font-size: px2rem(32); color: #1F1B4F; font-weight: bold; height: 100%; - line-height: px2rem(104, ); + line-height: px2rem(104); b { - font-size: px2rem(32, ); + font-size: px2rem(32); color: #1F1B4F; font-weight: bold; - margin-right: px2rem(8, ); + margin-right: px2rem(8); } img { display: inline-block; - width: px2rem(24, ); - height: px2rem(16, ); + width: px2rem(24); + height: px2rem(16); vertical-align: middle; } } @@ -123,11 +124,11 @@ body { } .codeBox { - width: px2rem(606, ); - height: px2rem(104, ); + width: px2rem(606); + height: px2rem(104); background: #F3F5FA; - border-radius: px2rem(104, ); - margin: px2rem(0, ) auto px2rem(80, ); + border-radius: px2rem(104); + margin: px2rem(0) auto px2rem(80); .code { float: left; @@ -138,14 +139,14 @@ body { .codeBut { text-align: center; color: #FFFFFF; - font-size: px2rem(28, ); - border-radius: px2rem(76, ); - width: px2rem(204, ); - height: px2rem(76, ); - line-height: px2rem(76, ); + font-size: px2rem(28); + border-radius: px2rem(76); + width: px2rem(204); + height: px2rem(76); + line-height: px2rem(76); float: right; - margin-top: px2rem(14, ); - margin-right: px2rem(16, ); + margin-top: px2rem(14); + margin-right: px2rem(16); background: #9168FA; } @@ -158,14 +159,14 @@ body { .but { - width: px2rem(606, ); - height: px2rem(96, ); - border-radius: px2rem(96, ); - line-height: px2rem(96, ); + width: px2rem(606); + height: px2rem(96); + border-radius: px2rem(96); + line-height: px2rem(96); text-align: center; color: #FFFFFF; - font-size: px2rem(32, ); - margin: 0 auto px2rem(40, ); + font-size: px2rem(32); + margin: 0 auto px2rem(40); background: linear-gradient(90deg, #EEDCFF 0%, #DEE4FF 50%, #CCF8F9 100%); } @@ -174,14 +175,14 @@ body { } .hone { - width: px2rem(606, ); - height: px2rem(96, ); - border-radius: px2rem(96, ); - line-height: px2rem(96, ); + width: px2rem(606); + height: px2rem(96); + border-radius: px2rem(96); + line-height: px2rem(96); text-align: center; color: #9168FA; - font-size: px2rem(32, ); - margin: 0 auto px2rem(40, ); + font-size: px2rem(32); + margin: 0 auto px2rem(40); background: linear-gradient(270deg, #FAEDFF 0%, #E6FDFF 100%); border: 1px solid #D480FF; } @@ -199,8 +200,8 @@ body { .box { width: 100%; - height: px2rem(666, ); - border-radius: px2rem(56, ) px2rem(56, ) 0 0; + height: px2rem(666); + border-radius: px2rem(56) px2rem(56) 0 0; background: #fff; position: absolute; bottom: 0; @@ -209,10 +210,10 @@ body { p { width: 100%; text-align: center; - height: px2rem(136, ); - line-height: px2rem(136, ); - border-bottom: px2rem(1, ) solid #EBEEF5; - font-size: px2rem(36, ); + height: px2rem(136); + line-height: px2rem(136); + border-bottom: px2rem(1) solid #EBEEF5; + font-size: px2rem(36); font-weight: bold; color: #1F1B4F; } @@ -220,7 +221,7 @@ body { .list { position: absolute; left: 0; - top: px2rem(136, ); + top: px2rem(136); overflow-y: scroll; width: 100%; height: 7rem; @@ -228,10 +229,10 @@ body { span { display: block; width: 100%; - height: px2rem(102, ); - line-height: px2rem(102, ); - font-size: px2rem(32, ); - border-bottom: px2rem(1, ) solid #EBEEF5; + height: px2rem(102); + line-height: px2rem(102); + font-size: px2rem(32); + border-bottom: px2rem(1) solid #EBEEF5; text-align: center; color: #1F1B4F; } diff --git a/view/peko/modules/statistic/images/logo.png b/view/peko/modules/statistic/images/logo.png index 4ebfdfa..19cf03e 100644 Binary files a/view/peko/modules/statistic/images/logo.png and b/view/peko/modules/statistic/images/logo.png differ diff --git a/view/peko/modules/statistic/images/logo1.png b/view/peko/modules/statistic/images/logo1.png index 19cf03e..2a34d31 100644 Binary files a/view/peko/modules/statistic/images/logo1.png and b/view/peko/modules/statistic/images/logo1.png differ diff --git a/view/peko/modules/statistic/login.html b/view/peko/modules/statistic/login.html index 1c76358..0103d97 100644 --- a/view/peko/modules/statistic/login.html +++ b/view/peko/modules/statistic/login.html @@ -17,7 +17,7 @@
- +