3.5 准备发版

src/Login2p/Login2p.tsx

@@ -155,8 +155,8 @@ const Login2p: React.FC = () => {
   }
   return (
     <>
-      <div className={styles['login-content-bg-img']}>
-        {!media.isSmallMax && (
+      <div style={{ paddingTop: !wechatToken ? 0 : 130 }} className={styles['login-content-bg-img']}>
+        {!wechatToken && !media.isSmallMax && (
           <img
             src="https://hzstatic.hzinsights.com/yx_xcx/web/login_log.png"
             alt=""
@@ -164,19 +164,27 @@ const Login2p: React.FC = () => {
           />
         )}
         <div className={`${media.isSmallMax ? styles['login-content-box-mobile'] : styles['login-content-box']}`}>
-          {!media.isSmallMax && (
+          {!wechatToken ? (
             <>
-              <div>
-                <Checkbox onChange={onCheckboxChange} value={isSelectAuthor}>
-                  我是专栏作者
-                </Checkbox>
-              </div>
-              {!isSelectAuthor ? (
-                <div className={styles['login-title']}>验证码登录</div>
+              {!media.isSmallMax ? (
+                <>
+                  <div>
+                    <Checkbox onChange={onCheckboxChange} value={isSelectAuthor}>
+                      我是专栏作者
+                    </Checkbox>
+                  </div>
+                  {!isSelectAuthor ? (
+                    <div className={styles['login-title']}>验证码登录</div>
+                  ) : (
+                    <Tabs defaultActiveKey={'1'} items={items} onChange={onChange} style={{ marginTop: 10 }} />
+                  )}
+                </>
               ) : (
-                <Tabs defaultActiveKey={'1'} items={items} onChange={onChange} style={{ marginTop: 10 }} />
+                <div className={styles['login-title']}>验证码登录</div>
               )}
             </>
+          ) : (
+            <div className={styles['login-title']}>绑定手机号</div>
           )}
           <div className={styles['login-columncenter-content']}>
             <Form form={form} onFinish={handleLoginegByCode}>
@@ -207,7 +215,7 @@ const Login2p: React.FC = () => {
                     </Select>
                     <Input
                       className="mobile-phone-input"
-                      prefix={<LoginMobile style={{ width: 15 }} />}
+                      prefix={<LoginMobile style={{ width: 15, marginRight: 10 }} />}
                       placeholder="请输入手机号"
                     />
                   </div>
@@ -220,7 +228,9 @@ const Login2p: React.FC = () => {
                     <div className={styles['input-content']}>
                       <Input
                         className="mobile-code-input"
-                        prefix={<SafetyCertificateOutlined style={{ color: '#E37318', fontSize: 20 }} />}
+                        prefix={
+                          <SafetyCertificateOutlined style={{ color: '#E37318', fontSize: 20, marginRight: 10 }} />
+                        }
                         placeholder="请输入验证码"
                       />
                       <Button
@@ -246,8 +256,8 @@ const Login2p: React.FC = () => {
                         rules={[{ required: true, message: 'Please input Password!' }]}
                       >
                         <Input.Password
-                          style={{ height: 60 }}
-                          prefix={<LoginPassword style={{ width: 20 }} />}
+                          style={{ height: 40 }}
+                          prefix={<LoginPassword style={{ width: 20, marginRight: 10 }} />}
                           placeholder="请输入密码"
                         />
                       </Form.Item>
@@ -258,41 +268,43 @@ const Login2p: React.FC = () => {
                   </Form.Item>
                 </Form.Item>
               )}
-
               <Form.Item>
                 <Button type="primary" block htmlType="submit" className="custom-style-bottom">
                   登录
                 </Button>
               </Form.Item>
+              {!wechatToken && (
+                <>
+                  <div className={styles['custom-style-divider']}>
+                    <Divider className={styles['divider-line']}>
+                      <span className={styles['divider-text']}>其他登录方式</span>
+                    </Divider>
+                  </div>
 
-              <div className={styles['custom-style-divider']}>
-                <Divider className={styles['divider-line']}>
-                  <span className={styles['divider-text']}>其他登陆方式</span>
-                </Divider>
-              </div>
-
-              <Form.Item style={{ textAlign: 'center' }}>
-                <Button
-                  icon={<WechatOutlined style={{ color: '#60C84D', fontSize: 38 }} />}
-                  onClick={() =>
-                    login2p.loginWechatLaunch(
-                      `${process.env.REACT_APP_URL}login2p/wechat?next=${next ? next : encodeURIComponent('/')}`
-                    )
-                  }
-                  shape="circle"
-                  size="large"
-                  style={{ paddingTop: '7px', width: 64, height: 64 }}
-                ></Button>
-              </Form.Item>
-              <div className="buymodel-checkbox-wrapper m-t-md">
-                <span>登录即代表您阅读并同意</span>
-                <span className="buymodel-text-orange" onClick={handleOpenWord.bind(this, '/material/license')}>
-                  《研选平台服务协议》
-                </span>
-                <span className="buymodel-text-orange" onClick={handleOpenWord.bind(this, '/material/policy')}>
-                  《研选平台隐私政策》
-                </span>
-              </div>
+                  <Form.Item style={{ textAlign: 'center' }}>
+                    <Button
+                      icon={<WechatOutlined style={{ color: '#60C84D', fontSize: 38 }} />}
+                      onClick={() =>
+                        login2p.loginWechatLaunch(
+                          `${process.env.REACT_APP_URL}login2p/wechat?next=${next ? next : encodeURIComponent('/')}`
+                        )
+                      }
+                      shape="circle"
+                      size="large"
+                      style={{ paddingTop: '7px', width: 64, height: 64 }}
+                    ></Button>
+                  </Form.Item>
+                  <div className="buymodel-checkbox-wrapper m-t-md">
+                    <span>登录即代表您阅读并同意</span>
+                    <span className="buymodel-text-orange" onClick={handleOpenWord.bind(this, '/material/license')}>
+                      《研选平台服务协议》
+                    </span>
+                    <span className="buymodel-text-orange" onClick={handleOpenWord.bind(this, '/material/policy')}>
+                      《研选平台隐私政策》
+                    </span>
+                  </div>
+                </>
+              )}
             </Form>
           </div>
         </div>

src/Login2p/Login2pContext.tsx

@@ -141,7 +141,7 @@ const Login2pProvider: React.FC<ContextProviderProps> = ({ children }: ContextPr
         message.error(data.data.Msg)
       }
     } else {
-      message.error(tabsAct === '1' ? '验证码错误' : '密码错误')
+      message.error(data.data.Msg)
     }
   }
 

src/Login2p/components/SetUpPassword.tsx

@@ -101,7 +101,7 @@ const SetUpPassword: React.FC<ISetUpPasswordProps> = props => {
     onCancelPassword()
   }
   return (
-    <Modal open={visible} closable={false} destroyOnClose={true} maskClosable={false} footer={null} width={800}>
+    <Modal open={visible} closable={false} destroyOnClose={true} maskClosable={false} footer={null} width={600}>
       {isBindMobile === 1 && (
         <div className={styles['set-up-password-text']}>
           <ExclamationCircleFilled style={{ color: '#E37318', fontSize: 18, marginRight: 8 }} />
@@ -135,7 +135,7 @@ const SetUpPassword: React.FC<ISetUpPasswordProps> = props => {
                         </Option>
                       ))}
                     </Select>
-                    <Input prefix={<LoginMobile style={{ width: 15 }} />} placeholder="请输入手机号" />
+                    <Input prefix={<LoginMobile style={{ width: 15, marginRight: 10 }} />} placeholder="请输入手机号" />
                   </div>
                 </Form.Item>
               </Form.Item>
@@ -145,7 +145,7 @@ const SetUpPassword: React.FC<ISetUpPasswordProps> = props => {
               <Form.Item name={'code'} rules={[{ required: true, message: 'Please input Captcha!' }]}>
                 <div className={styles['input-content']}>
                   <Input
-                    prefix={<SafetyCertificateOutlined style={{ color: '#E37318', fontSize: 20 }} />}
+                    prefix={<SafetyCertificateOutlined style={{ color: '#E37318', fontSize: 20, marginRight: 10 }} />}
                     placeholder="请输入验证码"
                   />
                   <Button
@@ -169,8 +169,8 @@ const SetUpPassword: React.FC<ISetUpPasswordProps> = props => {
                     rules={[{ required: true, message: 'Please input Password!' }]}
                   >
                     <Input.Password
-                      style={{ height: 60 }}
-                      prefix={<LoginPassword style={{ width: 20 }} />}
+                      style={{ height: 40 }}
+                      prefix={<LoginPassword style={{ width: 20, marginRight: 10 }} />}
                       placeholder="请设置登录密码（6位以上数字字母组合）"
                     />
                   </Form.Item>

src/SetPassword/modify.password.tsx

@@ -21,7 +21,7 @@ const SetUpPassword: React.FC<ISetUpPasswordProps> = props => {
   const { visible, onCancelPassword } = props
   const [form] = Form.useForm()
 
-  // 点击了登录
+  // 修改了密码
   const handleLoginegByCode = async (value: any) => {
     // 至少 6 位字符，包含字母和数字
     const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,}$/
@@ -43,10 +43,11 @@ const SetUpPassword: React.FC<ISetUpPasswordProps> = props => {
 
   // 关闭弹框事件
   const closeModalHandler = () => {
+    form.resetFields()
     onCancelPassword()
   }
   return (
-    <Modal open={visible} closable={false} destroyOnClose={true} maskClosable={false} footer={null} width={800}>
+    <Modal open={visible} closable={false} destroyOnClose={true} maskClosable={false} footer={null} width={600}>
       <div className={`${styles['login-content-bg-img']} ${styles['login-content-box-set-up']} `}>
         <div className="password-dlg-title">修改密码</div>
         <div className={styles['login-columncenter-content']}>
@@ -60,7 +61,7 @@ const SetUpPassword: React.FC<ISetUpPasswordProps> = props => {
                     rules={[{ required: true, message: 'Please input Password!' }]}
                   >
                     <Input.Password
-                      style={{ height: 60 }}
+                      style={{ height: 40 }}
                       prefix={<LoginPassword style={{ width: 20 }} />}
                       placeholder=" 请输入原密码（6位以上数字字母组合）"
                     />
@@ -77,7 +78,7 @@ const SetUpPassword: React.FC<ISetUpPasswordProps> = props => {
                     rules={[{ required: true, message: 'Please input Password!' }]}
                   >
                     <Input.Password
-                      style={{ height: 60 }}
+                      style={{ height: 40 }}
                       prefix={<LoginPassword style={{ width: 20 }} />}
                       placeholder=" 请输入新密码（6位以上数字字母组合）"
                     />

src/SetPassword/mySet.password.tsx

@@ -78,7 +78,7 @@ const SetUpPassword: React.FC<ISetUpPasswordProps> = props => {
     onCancelPassword()
   }
   return (
-    <Modal open={visible} closable={false} destroyOnClose={true} maskClosable={false} footer={null} width={800}>
+    <Modal open={visible} closable={false} destroyOnClose={true} maskClosable={false} footer={null} width={600}>
       <div className={`${styles['login-content-bg-img']} ${styles['login-content-box-set-up']} `}>
         <div className="password-dlg-title">设置密码</div>
         <div className={styles['login-columncenter-content']}>
@@ -91,7 +91,7 @@ const SetUpPassword: React.FC<ISetUpPasswordProps> = props => {
               <Form.Item name={'code'} rules={[{ required: true, message: 'Please input Captcha!' }]}>
                 <div className={styles['input-content']}>
                   <Input
-                    prefix={<SafetyCertificateOutlined style={{ color: '#E37318', fontSize: 20 }} />}
+                    prefix={<SafetyCertificateOutlined style={{ color: '#E37318', fontSize: 20, marginRight: 10 }} />}
                     placeholder="请输入验证码"
                   />
                   <Button
@@ -115,8 +115,8 @@ const SetUpPassword: React.FC<ISetUpPasswordProps> = props => {
                     rules={[{ required: true, message: 'Please input Password!' }]}
                   >
                     <Input.Password
-                      style={{ height: 60 }}
-                      prefix={<LoginPassword style={{ width: 20 }} />}
+                      style={{ height: 40 }}
+                      prefix={<LoginPassword style={{ width: 20, marginRight: 10 }} />}
                       placeholder="请设置登录密码（6位以上数字字母组合）"
                     />
                   </Form.Item>

src/styles/NewPage.module.scss

@@ -364,11 +364,11 @@
   color: #ffffff;
 }
 .login-title {
-  color: #ff9100;
+  color: #faa12f;
   font-weight: 500;
-  font-size: 14px;
+  font-size: 16px;
   line-height: 28px;
-  padding: 16px 24px 28px 0;
+  padding: 12px 0 26px 0;
 }
 .home-chart-wrapper {
   margin: 4vh auto;
@@ -422,7 +422,7 @@
 
 .custom-style-divider {
   width: 224px;
-  margin: 38px auto 0;
+  margin: 0 auto;
   color: #999999;
   .divider-text {
     color: #999999 !important;
@@ -449,9 +449,8 @@
   margin-bottom: 20px;
 }
 .login-content-box {
-  width: 800px;
-  height: 600px;
-  padding: 36px 116px 22px;
+  width: 600px;
+  padding: 48px 72px 48px;
   border-radius: 16px;
   background-color: #fff;
   margin: 0 auto;
@@ -462,6 +461,8 @@
   width: 100%;
   height: 100vh;
   background: url('../assets/login_bg.png') no-repeat 100% 100%;
+  box-sizing: border-box;
+
   .login-log-img {
     display: block;
     width: 408px;
@@ -470,24 +471,36 @@
     padding: 70px 20px 30px 0;
   }
   :global {
-    .css-dev-only-do-not-override-c9yi28.ant-tabs-top > .ant-tabs-nav::before {
+    .ant-tabs-top > .ant-tabs-nav::before {
       border: none;
     }
-    .css-dev-only-do-not-override-zl9ks2.ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+    .ant-tabs .ant-tabs-tab {
+      font-size: 16px;
+      color: #ffbd66;
+    }
+    .ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
       color: #faa12f;
     }
-    .css-dev-only-do-not-override-zl9ks2.ant-tabs .ant-tabs-tab:hover {
+    .ant-tabs .ant-tabs-tab:hover {
       color: #faa12f;
     }
-    .css-dev-only-do-not-override-zl9ks2.ant-tabs .ant-tabs-ink-bar {
+    .ant-tabs .ant-tabs-ink-bar {
       background: #faa12f;
     }
-    .css-dev-only-do-not-override-zl9ks2.ant-tabs-top > .ant-tabs-nav::before {
+    .ant-tabs-top > .ant-tabs-nav::before {
       border: none;
     }
-    .css-dev-only-do-not-override-c9yi28.ant-checkbox-wrapper {
+    .ant-btn.ant-btn-circle.ant-btn-lg  {
+      border: 1px solid #DCDFE6;
+    }
+    .ant-checkbox-wrapper {
+      font-size: 16px;
       color: #999999;
     }
+    .ant-select .ant-select-arrow {
+      color: #333;
+      font-size: 14px;
+    }
     .login-columncenter-content {
       padding: 0 20px;
       .columncenter-content-item {
@@ -522,25 +535,37 @@
     }
     .select-input {
       width: 160px !important;
-      height: 60px !important;
-      margin-right: 15px !important;
+      height: 40px;
+      margin-right: 15px;
+    }
+    .custom-style-bottom,
+    .custom-style-bottom-code {
+      color: #fff;
+      background-color: #faa12f;
+      height: 40px;
+      border-radius: 4px;
+      box-shadow: none;
     }
-    .custom-style-bottom,.custom-style-bottom-code {
-      color: #fff !important;
-      background-color: #faa12f !important;
-      height: 60px !important;
+    .ant-btn-default {
+      border-color: rgba(0, 0, 0, 0);
     }
     .password-btn-box {
       display: flex;
       justify-content: space-between;
+      .ant-btn-default {
+        border-color: #fff6e8;
+        border: 1px solid #faa12f;
+        color: #faa12f;
+      }
     }
     .password-btn {
-      width: 260px;
-      height: 60px !important;
+      width: 200px !important;
+      height: 40px;
     }
     .ant-select-selector,
     .ant-input-outlined {
       border: 1px solid #faa12f !important;
+      border-radius: 4px !important;
     }
     .buymodel-checkbox-wrapper {
       text-align: center;
@@ -571,10 +596,9 @@
   }
 }
 .login-content-box-set-up {
-  width: 75% ;
-  height: 100% ;
-  background: none ;
-  padding: 10px 100px 22px;
+  height: 100%;
+  background: none;
+  padding: 10px 52px 10px;
 }
 .input-content {
   display: flex;
@@ -620,48 +644,53 @@
     background: url('../assets/login_bg_phone.png') no-repeat 100% 100%;
     background-size: cover;
     :global {
-      .custom-style-bottom,.mobile-phone-input,.custom-style-bottom-code {
+      .custom-style-bottom,
+      .mobile-phone-input,
+      .custom-style-bottom-code {
         height: 44px !important;
       }
+      .ant-input-outlined ,.ant-select-selector{
+        border:none !important;
+        border-radius:0 !important;
+      }
       .custom-style-bottom-code {
-        background-color: #fff !important;
-        color: #faa12f !important;
+        background-color: #fff;
+        color: #faa12f ;
         margin-left: 0 !important;
-        border: 1px solid #faa12f !important;
-        border-left: none !important;
-      }
-      .mobile-code-input {
-        border-right: none !important;
+        border-radius: 0;
       }
       .select-input {
         width: 160px !important;
         height: 44px !important;
         margin-right: 0px !important;
-        .ant-select-selector {
-          border-right: none !important;
-        }
-      }
-      .mobile-phone-input {
-        border-left: none !important;
       }
+
+
       .buymodel-checkbox-wrapper {
         text-align: left !important;
-        :nth-child(1){
+        border-radius: 4px 0 0 4px !important;
+        :nth-child(1) {
           color: #999;
         }
       }
     }
-  
+    .input-content {
+      border-radius: 4px;
+      border: 1px solid #faa12f;
+      overflow: hidden;
+    }
+    .login-title {
+      padding: 0 0 10px 0;
+    }
   }
   .login-content-box-mobile {
     width: 100%;
     height: 100%;
-    padding: 230px 30px 0;
+    padding: 220px 30px 0;
     height: auto;
     box-sizing: border-box;
   }
   .custom-style-divider {
-    padding-top: 180px;
+    padding-top: 130px;
   }
- 
 }