xuan/TestEShopDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🎈 perf(UI界面): 完成UI界面和逻辑，等待后端对接

Browse Source
This commit is contained in:
xuan
2022-12-27 17:02:57 +08:00
parent 5560b3b903
commit 0c1fb844a2
9 changed files with 110 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/normalButton/index.module.scss
+19 -17
View File
@@ -10,7 +10,9 @@
text-align: center;
color: #fff;
box-sizing: border-box;
&:active {
opacity: $opacity-active;
}
&--normal {
height: 72px;
font-size: $font_size_medium;
@@ -85,20 +87,20 @@
}
}
// 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;
}
&--info:active {
background-color: rgba($color: $color_info, $alpha: 0.5);
color: #fff;
}
// &--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 {
// opacity: $opacity-active;
// }
// &--info:active {
// // background-color: rgba($color: $color_info, $alpha: 0.5);
// opacity: $opacity-active;
// // color: #fff;
// }
}
src/components/normalButton/index.tsx
+4 -2
View File
@@ -12,7 +12,7 @@ interface PropsType {
type?: ButtonType
round?: boolean // 大圆角
disabled?: boolean
plain?: boolean // plain
plain?: boolean // 朴素(背景色为白色那种，不是全背景色)
circle?: boolean // 小圆角
children?: ReactNode
onClick?: Function
@@ -20,10 +20,12 @@ interface PropsType {
customStyles?: React.CSSProperties
customTextClassName?: string
loading?: boolean
hoverClass?: string
}
const NormalButton: FC<PropsType> = (props) => {
const {
hoverClass = '',
type = 'primary',
size = 'normal',
round = false,
@@ -57,7 +59,7 @@ const NormalButton: FC<PropsType> = (props) => {
}
return (
<View className={classnames(styles.button, getClassName(), customClassName)} style={customStyles} onClick={handleClick}>
<View hoverClass={hoverClass} className={classnames(styles.button, getClassName(), customClassName)} style={customStyles} onClick={handleClick}>
<View className={classnames(styles['button--text'], customTextClassName)}>
<View className={styles.loading}>{loading && <Loading width={30} />}</View>
{children}</View>