登录样式

src/pages/login/login.module.scss

@@ -1,5 +1,6 @@
 .container {
   position: relative;
+  padding: 0 30rpx;
 }
 
 .navbar,
@@ -39,8 +40,7 @@
   justify-content: center;
   align-items: center;
   gap: 12px;
-  margin: 0 auto;
-  padding: 25px 0;
+  margin: 20rpx auto;
 
   a {
 

src/pages/login/login.tsx

@@ -1,6 +1,6 @@
 import {FC, useEffect, useRef, useState} from "react";
 import {Profile} from "@/store";
-import {Button, Form, Image, Input, Text, View} from "@tarojs/components";
+import {Form, Image, Input, Text, View} from "@tarojs/components";
 import Taro from "@tarojs/taro";
 import styles from './login.module.scss'
 import Loading from "@/components/loading";
@@ -9,6 +9,7 @@ import {LoginData, userApi} from "@/api";
 import {regexTel} from "@/utils/regu";
 import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
 import {loginApi, LoginParams} from "@/api/login";
+import MyButton from "@/components/button/MyButton";
 
 interface BingProps {
   code: string
@@ -74,24 +75,23 @@ const Bing: FC<BingProps> = ({code, catch_key}: BingProps) => {
           </View>
         </View>
 
-        <Button className={'button ' + styles.submit} style='margin:30px auto' formType='submit'
-                disabled={loading}>提交</Button>
+        <MyButton className={styles.submit} formType='submit' disabled={loading}>提交</MyButton>
       </Form>
     </View>
   )
 }
 
-function getMenuButtonBoundingClientRect() {
-  if (process.env.TARO_ENV === 'h5') {
-    return {top: 0, bottom: 44}
-  }
-  return Taro.getMenuButtonBoundingClientRect()
-}
+// function getMenuButtonBoundingClientRect() {
+//   if (process.env.TARO_ENV === 'h5') {
+//     return {top: 0, bottom: 44}
+//   }
+//   return Taro.getMenuButtonBoundingClientRect()
+// }
 
 const Login: FC = () => {
-  const {statusBarHeight = 0} = Taro.getSystemInfoSync()
-  const bbc = getMenuButtonBoundingClientRect();
-  const navHeight = bbc.bottom + (bbc.top - statusBarHeight) - statusBarHeight
+  // const {statusBarHeight = 0} = Taro.getSystemInfoSync()
+  // const bbc = getMenuButtonBoundingClientRect();
+  // const navHeight = bbc.bottom + (bbc.top - statusBarHeight) - statusBarHeight
 
   const [isLoading, setLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -177,7 +177,7 @@ const Login: FC = () => {
 
   return (
     <View className={styles.container}>
-      <CustomPageContainer show={!!validateCode} position='bottom'  onBeforeLeave={() => setCode(null)}>
+      <CustomPageContainer show={!!validateCode} position='bottom' onBeforeLeave={() => setCode(null)}>
         {validateCode && <Bing code={validateCode!} catch_key={catch_key!}/>}
       </CustomPageContainer>
 
@@ -187,18 +187,20 @@ const Login: FC = () => {
       <View className={styles.loginTips}>
         <Text>请完成微信授权以继续使用！</Text>
       </View>
-      <Button className={'button ' + styles.submit} onClick={login} disabled={isLoading}>
-        {isLoading ? <Loading/> : null}
-        <View className={styles.navbar} style={`height:${navHeight}px;margin-top:${statusBarHeight}px`}>
-          <Text>微信授权登录</Text>
-          {error ? <View className={styles.errorTips}>
-            <View style={{flex: 1}}>{error}</View>
-            <View>
-              <Icon name={'close'} onClick={() => setError(null)}/>
-            </View>
-          </View> : null}
+      <MyButton onClick={login} disabled={isLoading}>
+        <View className={styles.submit}>
+          {isLoading ? <Loading/> : null}
+          <View className={styles.navbar}>
+            <Text>微信授权登录</Text>
+            {error ? <View className={styles.errorTips}>
+              <View style={{flex: 1}}>{error}</View>
+              <View>
+                <Icon name={'close'} onClick={() => setError(null)}/>
+              </View>
+            </View> : null}
+          </View>
         </View>
-      </Button>
+      </MyButton>
     </View>
   )
 }