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

src/components/Divider/index.module.scss

@@ -1,6 +1,8 @@
 
 .divider {
   position: relative;
+  font-size: 28px;
+  color: $color_font_one;
   // 垂直
   &-vertical {
     display: inline-block;
@@ -22,9 +24,9 @@
     position: absolute;
     text-align: center;
     padding: 0 40px;
+    font-size: inherit;
     font-weight: 500;
-    font-size: 28px;
-    color: #333;
+    color: currentColor;
     background-color: #fff;
   }
 }

src/components/Divider/index.tsx

@@ -1,57 +1,45 @@
 /**
  * Usage:
- * 
+ *
  * <View>巴拉巴拉小魔仙</View>
  * <Divider direction="vertical" borderStyle="solid"></Divider
  * <View>全身变</View>
- * 
+ *
  */
 
-import { View } from "@tarojs/components";
-import { FC, ReactNode } from "react";
-import styles from "./index.module.scss";
-import classnames from "classnames";
+import { View } from '@tarojs/components'
+import { FC, ReactNode } from 'react'
+import styles from './index.module.scss'
+import classnames from 'classnames'
 
 type BorderStype = 'solid' | 'dashed' | 'dotted' | 'double'
 
 interface DividerProps {
-  direction?: "horizontal" | "vertical";
-  borderStyle?: BorderStype;
-  contentPosition?: "left" | "center" | "right";
-  children?: ReactNode;
+  direction?: 'horizontal' | 'vertical'
+  borderStyle?: BorderStype
+  contentPosition?: 'left' | 'center' | 'right'
+  children?: ReactNode
+  customClassName?: string
 }
-const Divider: FC<DividerProps> = props => {
-  const {
-    direction = "horizontal",
-    borderStyle = "solid",
-    contentPosition = "center"
-  } = props;
+const Divider: FC<DividerProps> = (props) => {
+  const { direction = 'horizontal', borderStyle = 'solid', contentPosition = 'center', customClassName='' } = props
 
-  const classname = classnames(
-    styles["divider"],
-    styles["divider-" + direction]
-  );
-  const contentClassname = classnames(
-    styles["divider-text"],
-    styles["is-" + contentPosition]
-  );
+  const classname = classnames(styles['divider'], styles['divider-' + direction], customClassName)
+  const contentClassname = classnames(styles['divider-text'], styles['is-' + contentPosition])
 
   const borderTopStyle: { borderTopStyle: BorderStype } = {
-    borderTopStyle: borderStyle
-  };
+    borderTopStyle: borderStyle,
+  }
   const borderLeftStyle: { borderLeftStyle: BorderStype } = {
-    borderLeftStyle: borderStyle
-  };
+    borderLeftStyle: borderStyle,
+  }
 
-  const dividerStyle =
-    direction === "horizontal" ? borderTopStyle : borderLeftStyle;
+  const dividerStyle = direction === 'horizontal' ? borderTopStyle : borderLeftStyle
 
   return (
     <View className={classname} style={dividerStyle}>
-      {props.children && direction !== "vertical" && (
-        <View className={contentClassname}>{props.children}</View>
-      )}
+      {props.children && direction !== 'vertical' && <View className={contentClassname}>{props.children}</View>}
     </View>
-  );
-};
+  )
+}
 export default Divider