Преглед на файлове

feat: 移动端登录页面添加注册引导

cuiyalong преди 8 месеца
родител
ревизия
5ccf762250

+ 24 - 7
src/jfw/modules/app/src/web/staticres/jyapp/me/css/login.css

@@ -68,8 +68,21 @@
   text-align: center;
 }
 
-.forget:not(.flex) .fast-login-open-link {
+.fast-login-open-link {
+  position: relative;
   font-size: 16px;
+  line-height: 26px;
+  color: #2ABED1;
+  margin-right: .48rem;
+}
+.fast-login-open-link::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -.24rem;
+  width: 1px;
+  height: 100%;
+  background-color: #2ABED1;
 }
 
 
@@ -78,14 +91,19 @@
   font-size: 14px;
 }
 
-.login .forget .forget-password{
-    display: none;
-}
 
 /*.login .forget a.register {*/
 /*  float: right;*/
 /*}*/
 
+.third-and-fast-login-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: .32rem;
+  margin-top: .64rem;
+}
+
 .login .wx {
   text-align: center;
   margin-top:20px;
@@ -145,10 +163,9 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin-top: .32rem;
   padding: .16rem;
-  width: .96rem;
-  height: .96rem;
+  width: .8rem;
+  height: .8rem;
   border-radius: 50%;
   background: rgba(15, 184, 103, 0.05);
   border: 1px solid rgba(15, 184, 103, 0.1);

+ 2 - 2
src/jfw/modules/app/src/web/staticres/jyapp/me/js/login.js

@@ -45,9 +45,9 @@ var loginEvents = {
   },
   fastButtonShow: function (f) {
     if (f) {
-      $('.forget').removeClass('center').find('.fast-login-open-link').show()
+      $('.fast-login-open-link').show()
     } else {
-      $('.forget').addClass('center').find('.fast-login-open-link').hide()
+      $('.fast-login-open-link').hide()
     }
   },
   checkAutoFastLogin: function (auto) {

+ 19 - 8
src/jfw/modules/app/src/web/templates/me/login.html

@@ -177,9 +177,9 @@
               <span id="sendIdentCode">获取验证码</span>
             </div>
             <button type="button" id="btn" class="disabled btn" />登录</button>
-            <div class="forget center">
+            <div class="forget center form-bottom-actions">
               <a class="forget-password" href="javascript:void(0)">忘记密码?</a>
-      			<a href="javascript:void(0)" class="fast-login-open-link" style="display: none;">本机号码一键登录</a>
+              <a class="user-register" href="javascript:void(0)">新用户注册</a>
                 <!-- <span class="tip">未注册用户验证通过后自动注册</span> -->
             </div>
           </div>
@@ -187,13 +187,18 @@
       </div>
       <!--微信登录start-->
       <div class="wx">
-        <div class="third_title">
+        <!-- <div class="third_title">
           <div class="third_line"></div>
           <div style="padding: 0 12px;">第三方登录</div>
           <div class="third_line"></div>
-        </div>
-        <div class="third_wx">
-          <img src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/me/images/login_wx.png?v={{Msg "seo" "version"}}">
+        </div> -->
+        <div class="third-and-fast-login-container">
+            <div class="fast-login-item">
+              <a href="javascript:void(0)" class="fast-login-open-link" style="display: none;">本机号码一键登录</a>
+            </div>
+            <div class="fast-login-item third_wx">
+              <img src="{{Cdns .Host "seo" "cdn"|SafeUrl}}/jyapp/me/images/login_wx.png?v={{Msg "seo" "version"}}">
+            </div>
         </div>
       </div>
       <!--微信登录end-->
@@ -330,6 +335,10 @@
 				}
 			});
 
+      $('.user-register').on('tap', function() {
+        toggleLoginTypeClass('login-code')
+      })
+
       function toggleLoginTypeClass (type) {
         $(".header-tab>a").removeClass("header-tab-active");
         $(".header-tab>a[name=" + type + "]").addClass("header-tab-active");
@@ -337,14 +346,16 @@
           $(".login .onePass").show();
           $(".login .code").css("display","none");
           $(".header-tab>i").css("left",left_2);
-          $('.forget-password').show()
+          // $('.forget-password').show()
+          $('.form-bottom-actions.forget').show()
           $('.login .forget').addClass('flex')
           $('#btn').text('登录')
         } else {
           $(".login .onePass").hide();
           $(".login .code").css("display","table");
           $(".header-tab>i").css("left",left_1);
-          $('.forget-password').hide()
+          // $('.forget-password').hide()
+          $('.form-bottom-actions.forget').hide()
           $('.login .forget').removeClass('flex')
           $('#btn').text('登录')
         }