md5

src/Login2p/Login2p.tsx

@@ -5,14 +5,19 @@ import useRequest from '@ahooksjs/use-request'
 // @ts-ignore
 import wx from 'weixin-js-sdk'
 
-import { Col, Row, Card, Input, Button, Select, Form, message } from 'antd'
-import { WechatOutlined } from '@ant-design/icons'
+import { Col, Row, Divider, Input, Button, Select, Form, message, Checkbox, TabsProps, Tabs } from 'antd'
+import { WechatOutlined, SafetyCertificateOutlined } from '@ant-design/icons'
+
+import { ReactComponent as LoginMobile } from 'assets/login_mobile.svg'
+import { ReactComponent as LoginPassword } from 'assets/login_passwode.svg'
 
 import { Login2pService } from './Login2p.service'
 import { useLogin2p } from './Login2pContext'
+import SetUpPassword from './components/SetUpPassword'
 import { useMedia } from 'Context/Media/MediaContext'
 import styles from '../styles/NewPage.module.scss'
 
+import type { CheckboxProps } from 'antd'
 const { Option } = Select
 
 const Login2p: React.FC = () => {
@@ -23,11 +28,13 @@ const Login2p: React.FC = () => {
   const wechatToken = new URLSearchParams(useLocation().search).get('smtoken')
   const next = new URLSearchParams(useLocation().search).get('next')
   const [isDisabled, setIsDisabled] = useState<boolean>(false)
-  const [captchaBtnText, setCaptchaBtnText] = useState<string>('发送验证码')
+  const [isSelectAuthor, setIsSelectAuthor] = useState<boolean>(false)
+  const [captchaBtnText, setCaptchaBtnText] = useState<string>('获取验证码')
+  const [tabsAct, setTabsAct] = useState<string>('1')
   const [phoneArea, setPhoneArea] = useState<number>(86)
   const colSpanBlank = { xs: 1, sm: 1, md: 4, lg: 4, xl: 8 }
   const colSpanForm = { xs: 22, sm: 22, md: 16, lg: 16, xl: 8 }
-  const colPadding = media.isSmallMax === media.isBigMax ? '150px 0px 0px ' : '20px 0px'
+  const colPadding = media.isSmallMax === media.isBigMax ? '20px 0px 0px ' : '20px 0px'
   const phoneAreaList = [
     { id: 86, optionName: '中国(+86)', regText: /^1\d{10}$/ },
     { id: 853, optionName: '中国澳门(+853)', regText: /^6\d{7}$/ },
@@ -83,37 +90,74 @@ const Login2p: React.FC = () => {
     }, 1000)
     setTimeout(() => {
       setIsDisabled(false)
-      setCaptchaBtnText('发送验证码')
+      setCaptchaBtnText('获取验证码')
       clearInterval(captchaCountdown)
     }, 60000)
     getLoginCode(phoneArea.toString(), form.getFieldValue('phone_number'))
   }
-
+  // 是否选择了我是作者
+  const onCheckboxChange: CheckboxProps['onChange'] = e => {
+    setIsSelectAuthor(e.target.checked)
+  }
   React.useEffect(checkLogin, [])
 
+  const items: TabsProps['items'] = [
+    {
+      key: '1',
+      label: <span>验证码登录</span>,
+      children: <></>
+    },
+
+    {
+      key: '2',
+      label: <span>密码登陆</span>,
+      children: <></>
+    }
+  ]
+  // 点击了tabs的change
+  const onChange = (key: string) => {
+    setTabsAct(key)
+  }
+
+  // 阅读协议
+  const handleOpenWord = (path: string) => {
+    window.open(path)
+  }
+
   return (
-    <Row gutter={24} style={{ width: '100%' }}>
-      {/*0-780px*/}
-      {/*780px-1280px*/}
-      {/*1280px-max*/}
-      <Col {...colSpanBlank} />
-      <Col
-        {...colSpanForm}
-        style={{
-          padding: colPadding,
-          fontSize: '18px'
-        }}
-      >
-        <Card>
-          <Form form={form} onFinish={handleLoginegByCode}>
-            <div className={styles['login-title']}>验证码登录</div>
-            <Form.Item style={{ marginBottom: '5px' }}>
-              <p style={{ lineHeight: '24px', fontSize: '16px' }}>手机号</p>
-              <Form.Item name="phone_number" rules={[{ required: true, message: 'Please input your phone number!' }]}>
-                <Input
-                  addonBefore={
+    <>
+      <div className={styles['login-content-bg-img']}>
+        {!media.isSmallMax && (
+          <img
+            src="https://hzstatic.hzinsights.com/yx_xcx/web/login_log.png"
+            alt=""
+            className={styles['login-log-img']}
+          />
+        )}
+        <div className={`${media.isSmallMax ? styles['login-content-box-mobile'] : styles['login-content-box']}`}>
+          {!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 }} />
+              )}
+            </>
+          )}
+          <div className={styles['login-columncenter-content']}>
+            <Form form={form} onFinish={handleLoginegByCode}>
+              <Form.Item style={{ marginBottom: '5px' }}>
+                {/* <p style={{ lineHeight: '24px', fontSize: '16px' }}>手机号</p> */}
+                <Form.Item name="phone_number" rules={[{ required: true, message: 'Please input your phone number!' }]}>
+                  <div className={styles['input-content']}>
                     <Select
                       defaultValue={phoneArea}
+                      className="select-input"
                       onChange={value => {
                         setPhoneArea(value)
                       }}
@@ -124,49 +168,97 @@ const Login2p: React.FC = () => {
                         </Option>
                       ))}
                     </Select>
-                  }
-                  placeholder="请输入手机号"
-                />
+                    <Input
+                      className="mobile-phone-input"
+                      prefix={<LoginMobile style={{ width: 15 }} />}
+                      placeholder="请输入手机号"
+                    />
+                  </div>
+                </Form.Item>
               </Form.Item>
-            </Form.Item>
-            <Form.Item style={{ marginBottom: '5px' }}>
-              <p style={{ lineHeight: '24px', fontSize: '16px' }}>验证码</p>
-              <Form.Item>
-                <Form.Item
-                  name={'code'}
-                  style={{ width: '65%', display: 'inline-block' }}
-                  rules={[{ required: true, message: 'Please input Captcha!' }]}
-                >
-                  <Input placeholder="请输入验证码" />
+              {tabsAct === '1' || !isSelectAuthor ? (
+                <Form.Item style={{ marginBottom: '5px' }}>
+                  {/* <p style={{ lineHeight: '24px', fontSize: '16px' }}>验证码</p> */}
+                  <Form.Item name={'code'} rules={[{ required: true, message: 'Please input Captcha!' }]}>
+                    <div className={styles['input-content']}>
+                      <Input
+                        className="mobile-code-input"
+                        prefix={<SafetyCertificateOutlined style={{ color: '#E37318', fontSize: 20 }} />}
+                        placeholder="请输入验证码"
+                      />
+                      <Button
+                        onClick={getVCodeData}
+                        style={{ width: 160, marginLeft: '12px' }}
+                        loading={loadingVCode}
+                        disabled={isDisabled}
+                        className="custom-style-bottom-code"
+                      >
+                        {captchaBtnText}
+                      </Button>
+                    </div>
+                  </Form.Item>
                 </Form.Item>
-                <Button onClick={getVCodeData} style={{ width: '35%' }} loading={loadingVCode} disabled={isDisabled}>
-                  {captchaBtnText}
+              ) : (
+                <Form.Item style={{ marginBottom: '-19px' }}>
+                  {/* <p style={{ lineHeight: '24px', fontSize: '16px' }}>验证码</p> */}
+                  <Form.Item>
+                    <div className={styles['input-content']}>
+                      <Form.Item
+                        name={'password'}
+                        style={{ width: '100%', display: 'inline-block' }}
+                        rules={[{ required: true, message: 'Please input Password!' }]}
+                      >
+                        <Input
+                          style={{ height: 60 }}
+                          prefix={<LoginPassword style={{ width: 20 }} />}
+                          placeholder="请输入密码"
+                        />
+                      </Form.Item>
+                    </div>
+                  </Form.Item>
+                </Form.Item>
+              )}
+
+              <Form.Item>
+                <Button type="primary" block htmlType="submit" className="custom-style-bottom">
+                  登录
                 </Button>
               </Form.Item>
-            </Form.Item>
-            <Form.Item>
-              <Button type="primary" block htmlType="submit">
-                验证码登录
-              </Button>
-            </Form.Item>
-            <Form.Item style={{ textAlign: 'center' }}>
-              <Button
-                icon={<WechatOutlined style={{ color: '#60C84D' }} />}
-                onClick={() =>
-                  login2p.loginWechatLaunch(
-                    `${process.env.REACT_APP_URL}login2p/wechat?next=${next ? next : encodeURIComponent('/')}`
-                  )
-                }
-                shape="circle"
-                size="large"
-                style={{ paddingTop: '7px' }}
-              ></Button>
-            </Form.Item>
-          </Form>
-        </Card>
-      </Col>
-      <Col {...colSpanBlank} />
-    </Row>
+
+              <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>
+          </div>
+        </div>
+      </div>
+      <SetUpPassword visible={false} />
+    </>
   )
 }
 

src/Login2p/components/SetUpPassword.tsx

@@ -0,0 +1,171 @@
+import React, { useEffect, useState } from 'react'
+import useRequest from '@ahooksjs/use-request'
+import { useHistory, useLocation } from 'react-router-dom'
+import { Col, Row, Divider, Input, Button, Select, Form, message, Modal, TabsProps, Tabs } from 'antd'
+
+import styles from 'styles/NewPage.module.scss'
+import { SafetyCertificateOutlined, ExclamationCircleFilled } from '@ant-design/icons'
+import { useLogin2p } from '../Login2pContext'
+import { ReactComponent as LoginMobile } from 'assets/login_mobile.svg'
+import { ReactComponent as LoginPassword } from 'assets/login_passwode.svg'
+
+import { Login2pService } from '../Login2p.service'
+interface ISetUpPasswordProps {
+  visible: boolean
+  onClose?: () => void
+  onRefresh?: () => void
+}
+
+/**
+ * 编辑专栏信息
+ */
+const SetUpPassword: React.FC<ISetUpPasswordProps> = props => {
+  const { Option } = Select
+  const { visible, onClose, onRefresh } = props
+  const [form] = Form.useForm()
+  const login2p = useLogin2p()
+  const next = new URLSearchParams(useLocation().search).get('next')
+  const wechatToken = new URLSearchParams(useLocation().search).get('smtoken')
+  const [phoneArea, setPhoneArea] = useState<number>(86)
+
+  const [isDisabled, setIsDisabled] = useState<boolean>(false)
+  const [captchaBtnText, setCaptchaBtnText] = useState<string>('获取验证码')
+
+  const phoneAreaList = [
+    { id: 86, optionName: '中国(+86)', regText: /^1\d{10}$/ },
+    { id: 853, optionName: '中国澳门(+853)', regText: /^6\d{7}$/ },
+    { id: 852, optionName: '中国香港(+852)', regText: /^[569]\d{3}\-?\d{4}$/ },
+    { id: 61, optionName: '澳大利亚(+61)', regText: /^4\d{8}$/ },
+    { id: 65, optionName: '新加坡(+65)', regText: /^[89]\d{7}$/ },
+    { id: 1, optionName: '美国(+001)', regText: /^[2-9]\d{2}[2-9](?!11)\d{6}$/ },
+    { id: 81, optionName: '日本(+81)', regText: /^\d{1,4}[ \-]?\d{1,4}[ \-]?\d{4}$/ },
+    { id: 44, optionName: '英国(+44)', regText: /^\+?[0-9,\-,\s]{5,20}$/ },
+    { id: 886, optionName: '中国台湾(+886)', regText: /^[0][9]\d{8}$/ }
+  ]
+  const { run: getLoginCode, loading: loadingVCode } = useRequest(Login2pService.getVCode, {
+    manual: true,
+    formatResult: response => response.data,
+    onSuccess: result => message.success('验证码请求成功!'),
+    onError: e => message.error('验证码请求失败~')
+  })
+  const handleToClose = () => {
+    // onClose()
+  }
+  const handleLoginegByCode = (value: any) => {
+    login2p
+      .login2pByCode(value.phone_number, value.code, next ? next : '/', wechatToken ? wechatToken : undefined)
+      .then(r => undefined)
+  }
+  const checkPhoneNumber = (phoneNumber: string) => {
+    const findItem = phoneAreaList.find(item => item.id === phoneArea)
+    return findItem ? findItem.regText.test(phoneNumber) : false
+  }
+  const getVCodeData = () => {
+    if (!checkPhoneNumber(form.getFieldValue('phone_number'))) {
+      message.warning('格式错误，请输入正确的手机号码')
+      return
+    }
+    setIsDisabled(true)
+    let countdown = 60
+    const captchaCountdown = setInterval(() => {
+      setCaptchaBtnText(`${countdown--}s`)
+    }, 1000)
+    setTimeout(() => {
+      setIsDisabled(false)
+      setCaptchaBtnText('获取验证码')
+      clearInterval(captchaCountdown)
+    }, 60000)
+    getLoginCode(phoneArea.toString(), form.getFieldValue('phone_number'))
+  }
+  return (
+    <Modal
+      open={visible}
+      closable={false}
+      onCancel={handleToClose}
+      destroyOnClose={true}
+      maskClosable={false}
+      footer={null}
+      width={800}
+    >
+      <div className={styles['set-up-password-text']}>
+        <ExclamationCircleFilled style={{ color: '#E37318', fontSize: 18, marginRight: 8 }} />
+        该账号尚未设置登录密码，请先设置登录密码
+      </div>
+      <div className={styles['login-content-box-set-up']}>
+        <div className="password-dlg-title">设置密码</div>
+        <div className={styles['login-columncenter-content']}>
+          <Form form={form} onFinish={handleLoginegByCode}>
+            <Form.Item style={{ marginBottom: '5px' }}>
+              <Form.Item name="phone_number" rules={[{ required: true, message: 'Please input your phone number!' }]}>
+                <div className={styles['input-content']}>
+                  <Select
+                    defaultValue={phoneArea}
+                    className="select-input"
+                    onChange={value => {
+                      setPhoneArea(value)
+                    }}
+                  >
+                    {phoneAreaList.map(item => (
+                      <Option value={item.id} key={item.id}>
+                        {item.optionName}
+                      </Option>
+                    ))}
+                  </Select>
+                  <Input prefix={<LoginMobile style={{ width: 15 }} />} placeholder="请输入手机号" />
+                </div>
+              </Form.Item>
+            </Form.Item>
+            <Form.Item style={{ marginBottom: '5px' }}>
+              <Form.Item name={'code'} rules={[{ required: true, message: 'Please input Captcha!' }]}>
+                <div className={styles['input-content']}>
+                  <Input
+                    prefix={<SafetyCertificateOutlined style={{ color: '#E37318', fontSize: 20 }} />}
+                    placeholder="请输入验证码"
+                  />
+                  <Button
+                    onClick={getVCodeData}
+                    style={{ width: 160, marginLeft: '12px' }}
+                    loading={loadingVCode}
+                    disabled={isDisabled}
+                    className="custom-style-bottom"
+                  >
+                    {captchaBtnText}
+                  </Button>
+                </div>
+              </Form.Item>
+            </Form.Item>
+            <Form.Item style={{ marginBottom: '-19px' }}>
+              <Form.Item>
+                <div className={styles['input-content']}>
+                  <Form.Item
+                    name={'password'}
+                    style={{ width: '100%', display: 'inline-block' }}
+                    rules={[{ required: true, message: 'Please input Password!' }]}
+                  >
+                    <Input
+                      style={{ height: 60 }}
+                      prefix={<LoginPassword style={{ width: 20 }} />}
+                      placeholder="请输入密码"
+                    />
+                  </Form.Item>
+                </div>
+              </Form.Item>
+            </Form.Item>
+            <Form.Item>
+              <div className="password-btn-box">
+                <Button htmlType="button" className="password-btn" style={{ color: '#faa12f' }}>
+                  取消
+                </Button>
+                <Button type="primary" htmlType="submit" className="password-btn">
+                  登录
+                </Button>
+              </div>
+            </Form.Item>
+          </Form>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default SetUpPassword

src/NewPageHeader.tsx

@@ -362,6 +362,9 @@ const NewPage: React.FC = props => {
                   <div className="person-line person-center-link" onClick={handleToMy}>
                     个人中心
                   </div>
+                  <div className="person-line person-center-link" onClick={handleToMy}>
+                    设置登录密码
+                  </div>
                   <div className="person-line person-exit" onClick={login2p.logout}>
                     退出
                   </div>

src/assets/login_mobile.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="24" viewBox="0 0 18 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.00082 21.7502C9.60072 21.7502 10.1257 21.2251 10.1257 20.625C10.1257 20.0248 9.60014 19.5 9.00082 19.5C8.4015 19.5 7.87562 20.0251 7.87562 20.625C7.87562 21.2249 8.40063 21.7502 9.00082 21.7502ZM14.6251 0H3.37507C1.72513 0 0.375 1.34984 0.375 3.00007V20.9999C0.375 22.6499 1.72513 24 3.37507 24H14.6251C16.2751 24 17.6252 22.6499 17.6252 20.9999V3.00007C17.6252 1.34984 16.2751 0 14.6251 0ZM16.125 20.9999C16.1239 21.3973 15.9656 21.7782 15.6845 22.0591C15.4034 22.3401 15.0225 22.4983 14.6251 22.4992H3.37507C2.97756 22.4983 2.59659 22.34 2.3155 22.0589C2.03442 21.7778 1.8761 21.3969 1.87518 20.9993V18.7501H16.125V20.9999ZM16.125 17.2499H1.87518V5.24991H16.125V17.2499ZM16.125 3.74857H1.87518V3.00007C1.87602 2.60251 2.03431 2.22146 2.3154 1.94031C2.59649 1.65917 2.97751 1.50081 3.37507 1.49989H14.6251C15.0227 1.50081 15.4037 1.65917 15.6848 1.94031C15.9659 2.22146 16.1242 2.60251 16.125 3.00007V3.74857Z" fill="#E37318"/>
+</svg>

src/assets/login_passwode.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.5179 8.16094H17.7585V6.04922C17.7585 2.97656 15.1757 0.480469 12.0046 0.480469C8.82178 0.480469 6.23897 2.97422 6.23897 6.04922V8.16094H5.47959C3.52021 8.16094 1.91943 9.74531 1.91943 11.7117V19.9852C1.91943 21.9375 3.5085 23.5219 5.47959 23.5219H18.5179C20.4772 23.5219 22.078 21.9375 22.078 19.9852V11.6953C22.0804 9.74297 20.4913 8.16094 18.5179 8.16094ZM8.16084 6.04922C8.16084 4.03828 9.88584 2.4 12.0069 2.4C14.121 2.4 15.8413 4.03594 15.8413 6.04922V8.01328H8.16084V6.04922ZM20.1608 19.9828C20.1608 20.8734 19.4249 21.6 18.5202 21.6H5.48193C4.57725 21.6 3.84131 20.8758 3.84131 19.9828V11.7094C3.84131 10.8117 4.57725 10.0805 5.48193 10.0805H18.5202C19.4249 10.0805 20.1608 10.8047 20.1608 11.6977V19.9828Z" fill="#E37318"/>
+<path d="M12 12.9609C11.4727 12.9609 11.0391 13.3922 11.0391 13.9219V17.7609C11.0391 18.2883 11.4703 18.7219 12 18.7219C12.5273 18.7219 12.9609 18.2906 12.9609 17.7609V13.9195C12.9609 13.3922 12.5273 12.9609 12 12.9609Z" fill="#E37318"/>
+</svg>

src/index.tsx

@@ -17,7 +17,19 @@ ReactDOM.render(
   <React.StrictMode>
     <React.Suspense fallback={<Spin />}>
       <StyleProvider hashPriority="high" transformers={[legacyLogicalPropertiesTransformer]}>
-        <ConfigProvider locale={zhCN}>
+        <ConfigProvider
+          locale={zhCN}
+          theme={{
+            token: {
+              // Seed Token，影响范围大
+              colorPrimary: '#f1a84a',
+              borderRadius: 2
+
+              // 派生变量，影响范围小
+              // colorBgContainer: '#ffffff'
+            }
+          }}
+        >
           <Router basename={process.env.REACT_APP_BASE_NAME}>
             <Login2pProvider>
               <MediaProvider>

src/styles/NewPage.module.scss

@@ -316,17 +316,17 @@
           }
         }
       }
-      .person-vip-card-wrapper{
+      .person-vip-card-wrapper {
         width: 222px;
         height: 87px;
         margin: 10px auto 0 auto;
         position: relative;
-        .person-vip-card-img{
+        .person-vip-card-img {
           width: 100%;
           height: 100%;
         }
-        .person-vip-timetext{
-          color:#F1A84A;
+        .person-vip-timetext {
+          color: #f1a84a;
           line-height: 20px;
           position: absolute;
           bottom: 15px;
@@ -364,14 +364,11 @@
   color: #ffffff;
 }
 .login-title {
-  color: rgba(0, 0, 0, 0.85);
-  font-weight: 600;
-  font-size: 20px;
-  line-height: 32px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding: 16px 24px 16px 0;
+  color: #ff9100;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 28px;
+  padding: 16px 24px 28px 0;
 }
 .home-chart-wrapper {
   margin: 4vh auto;
@@ -423,6 +420,145 @@
   }
 }
 
+.custom-style-divider {
+  width: 224px;
+  margin: 62px auto 0;
+  color: #999999;
+  .divider-text {
+    color: #999999 !important;
+  }
+  .divider-line::before,
+  .divider-line::after {
+    border-top: 1px solid #999999 !important;
+  }
+}
+.set-up-password-text {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  color: #999999;
+}
+
+.login-content-box {
+  width: 800px;
+  height: 600px;
+  padding: 36px 116px 22px;
+  border-radius: 16px;
+  background-color: #fff;
+  margin: 0 auto;
+  box-sizing: border-box;
+}
+.login-content-box-set-up {
+  padding: 10px 100px 22px;
+}
+.login-content-bg-img {
+  width: 100%;
+  height: 100vh;
+  background: url('../assets/login_bg.png') no-repeat 100% 100%;
+  .login-log-img {
+    display: block;
+    width: 408px;
+    height: 90px;
+    margin: 0 auto;
+    padding: 70px 20px 30px 0;
+  }
+  :global {
+    .css-dev-only-do-not-override-c9yi28.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 {
+      color: #faa12f;
+    }
+    .css-dev-only-do-not-override-zl9ks2.ant-tabs .ant-tabs-tab:hover {
+      color: #faa12f;
+    }
+    .css-dev-only-do-not-override-zl9ks2.ant-tabs .ant-tabs-ink-bar {
+      background: #faa12f;
+    }
+    .css-dev-only-do-not-override-zl9ks2.ant-tabs-top > .ant-tabs-nav::before {
+      border: none;
+    }
+    .css-dev-only-do-not-override-c9yi28.ant-checkbox-wrapper {
+      color: #999999;
+    }
+    .login-columncenter-content {
+      padding: 0 20px;
+      .columncenter-content-item {
+        border-bottom: 1px solid #f8f8fa;
+        padding: 20px 0;
+        &:last-child {
+          border-bottom: none;
+        }
+        .columncenter-title {
+          font-size: 16px;
+          line-height: 22px;
+          font-weight: bold;
+          color: #000000;
+          cursor: pointer;
+          &:hover {
+            color: #faa12f;
+          }
+        }
+      }
+      .detele-btn {
+        background: #fff0ed;
+        color: #d54941;
+      }
+      .update-btn {
+        background: #faa12f;
+        color: #ffffff;
+      }
+      .cancel-btn {
+        background: #e5efff;
+        color: #faa12f;
+      }
+    }
+    .select-input {
+      width: 160px !important;
+      height: 60px !important;
+      margin-right: 15px !important;
+    }
+    .custom-style-bottom,.custom-style-bottom-code {
+      color: #fff !important;
+      background-color: #faa12f !important;
+      height: 60px !important;
+    }
+    .password-btn-box {
+      display: flex;
+      justify-content: space-between;
+    }
+    .password-btn {
+      width: 260px;
+      height: 60px !important;
+    }
+    .ant-select-selector,
+    .ant-input-outlined {
+      border: 1px solid #faa12f !important;
+    }
+    .buymodel-checkbox-wrapper {
+      text-align: center;
+    }
+    .buymodel-checkbox-wrapper span {
+      vertical-align: middle;
+    }
+    .buymodel-text-orange {
+      color: #faa12f;
+      cursor: pointer;
+    }
+    .password-dlg-title {
+      font-size: 22px;
+      font-weight: 600;
+      line-height: 28px;
+      color: #faa12f;
+      margin-bottom: 20px;
+    }
+  }
+}
+.input-content {
+  display: flex;
+  justify-content: space-between;
+}
 @media screen and (max-width: 1280px) {
   .newpage-header {
     padding: 0 30px !important;
@@ -457,10 +593,54 @@
   .newindex-content {
     padding: 0px;
   }
-  // .newpage-web-header {
-  //   display: none !important;
-  // }
-  // .newpage-mobile-header {
-  //   display: block;
-  // }
+  .login-content-bg-img {
+    width: 100%;
+    height: 100vh;
+    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 {
+        height: 44px !important;
+      }
+      .custom-style-bottom-code {
+        background-color: #fff !important;
+        color: #faa12f !important;
+        margin-left: 0 !important;
+        border: 1px solid #faa12f !important;
+        border-left: none !important;
+      }
+      .mobile-code-input {
+        border-right: none !important;
+      }
+      .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){
+          color: #999;
+        }
+      }
+    }
+  
+  }
+  .login-content-box-mobile {
+    width: 100%;
+    height: 100vh;
+    padding: 230px 30px 0;
+    height: auto;
+    box-sizing: border-box;
+  }
+  .custom-style-divider {
+    padding-top: 180px;
+  }
+ 
 }