✨ feat(登录页面): 已完成登陆页面UI

src/components/normalButton/index.module.scss

@@ -1,37 +1,69 @@
 .button {
+  $current_color: #fff;
   display: flex;
-  padding: 0 40px;
-  height: 36PX;
-  border: 1px solid $color_main;
-  background-color: #fff;
-  text-align: center;
   flex-flow: row nowrap;
   justify-content: center;
   align-items: center;
+  padding: 0 80px;
+  height: 72px;
+  border: 1px solid $color_main;
+  background-color: #fff;
+  text-align: center;
+  color: #fff;
   &--normal {
-    height: 36PX;
+    height: 72px;
     font-size: $font_size_medium;
   }
   &--small {
-    height: 30PX;
+    height: 60px;
     font-size: $font_size_min;
   }
   &--disabled {
     opacity: $opacity-disabled;
   }
+  // 按钮类型
   &--primary {
     border: 1px solid $color_main;
     color: $color_main;
+    $current_color: $color_main;
   }
   &--danger {
     border: 1px solid $color_danger;
     color: $color_danger;
+    $current_color: $color_danger;
   }
   &--warning {
     border: 1px solid $color_warning;
     color: $color_warning;
+    $current_color: $color_warning;
   }
-  &--circle {
+  &--round {
     border-radius: 50px;
   }
+  &--circle {
+    border-radius: 16px;
+  }
+  &--plain {
+    background-color: currentColor;
+    border-color: currentColor;
+    .button--text {
+      color: #fff;
+    }
+  }
+  &--text {
+    color: currentColor;
+  }
+  // active 伪类
+  &--primary:active {
+    background-color: rgba($color: $color_main, $alpha: 0.5);
+    color: #fff;
+  }
+  &--danger:active {
+    background-color: rgba($color: $color_danger, $alpha: 0.5);
+    color: #fff;
+  }
+  &--warning:active {
+    background-color: rgba($color: $color_warning, $alpha: 0.5);
+    color: #fff;
+  }
 }

src/components/normalButton/index.tsx

@@ -1,4 +1,4 @@
-import { View } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import { FC, ReactNode } from 'react'
 import classnames from 'classnames'
 import styles from './index.module.scss'
@@ -9,18 +9,36 @@ type ButtonSize = 'normal' | 'small'
 interface PropsType {
   size?: ButtonSize
   type?: ButtonType
-  circle?: boolean
+  round?: boolean
   disabled?: boolean
+  plain?: boolean
+  circle?: boolean
   children?: ReactNode
   onClick?: Function
+  customClassName?: string
+  customStyles?: React.CSSProperties
 }
 
-const NormalButton: FC<PropsType> = ({ type = 'primary', size = 'normal', circle = false, disabled = false, children, onClick }) => {
+const NormalButton: FC<PropsType> = (props) => {
+  const {
+    type = 'primary',
+    size = 'normal',
+    round = false,
+    disabled = false,
+    children,
+    onClick,
+    plain = false,
+    circle = false,
+    customStyles = {},
+    customClassName = '',
+  } = props
   const getClassName = () => {
     const classObject = {
       [styles[`button--disabled`]]: disabled,
       [styles[`button--${size}`]]: size,
       [styles[`button--${type}`]]: type,
+      [styles['button--round']]: round,
+      [styles['button--plain']]: plain,
       [styles['button--circle']]: circle,
     }
     console.log('classObj==>button', classObject)
@@ -35,8 +53,8 @@ const NormalButton: FC<PropsType> = ({ type = 'primary', size = 'normal', circle
   }
 
   return (
-    <View className={classnames(styles['button'], getClassName())} onClick={handleClick}>
-      {children}
+    <View className={classnames(styles['button'], getClassName(), customStyles, customClassName)} onClick={handleClick}>
+      <Text className={styles['button--text']}>{children}</Text>
     </View>
   )
 }