🌈 style(Tag): 调整Tag组件的plain样式

This commit is contained in:
xuan 2022-09-29 10:26:44 +08:00
parent a619b24e6b
commit 4b00a2b4fa
5 changed files with 39 additions and 28 deletions

View File

@ -14,17 +14,17 @@ const SaleModeTag: FC<SaleModeProps> = (props) => {
return ( return (
<> <>
{saleMode === EnumSaleMode.Bulk && ( {saleMode === EnumSaleMode.Bulk && (
<Tag circle type='primary' plain size={size} customClassName={customClassName}> <Tag circle type='primary' size={size} customClassName={customClassName}>
</Tag> </Tag>
)} )}
{saleMode === EnumSaleMode.Plate && ( {saleMode === EnumSaleMode.Plate && (
<Tag circle type='danger' plain size={size} customClassName={customClassName}> <Tag circle type='danger' size={size} customClassName={customClassName}>
</Tag> </Tag>
)} )}
{saleMode === EnumSaleMode.BulkCut && ( {saleMode === EnumSaleMode.BulkCut && (
<Tag circle type='warning' plain size={size} customClassName={customClassName}> <Tag circle type='warning' size={size} customClassName={customClassName}>
</Tag> </Tag>
)} )}

View File

@ -12,39 +12,54 @@
font-size: $font_size_medium; font-size: $font_size_medium;
height: 40px; height: 40px;
} }
&--small{ &--small {
font-size: $font_size_min; font-size: $font_size_min;
height: 30px; height: 30px;
} }
&--circle{ &--circle {
border-radius: 10px; border-radius: 10px;
} }
&--danger { &--danger {
border: 1px solid $color_danger; border: 1px solid $color_danger;
color: $color_danger; background-color: $color_danger;
color: white;
} }
&--primary{ &--primary {
border: 1px solid $color_main; border: 1px solid $color_main;
color: $color_main; background-color: $color_main;
color: white;
} }
&--warning{ &--warning {
border: 1px solid $color_warning; border: 1px solid $color_warning;
color: $color_warning; background-color: $color_warning;
color: white;
} }
&--info{ &--info {
border: 1px solid $color_info; border: 1px solid $color_info;
color: $color_info; background-color: $color_info;
.tag--text { color: white;
color: rgba($color: #333333, $alpha: 0.8) !important;
}
} }
&--plain { &--plain {
background-color: currentColor; background-color: white;
border-color: currentColor; &.tag--danger {
border: unset; border: 1px solid $color_danger;
.tag--text { color: $color_danger;
color: #ffffff; }
&.tag--primary {
border: 1px solid $color_main;
color: $color_main;
}
&.tag--warning {
border: 1px solid $color_warning;
color: $color_warning;
}
&.tag--info {
border: 1px solid $color_info;
color: $color_info;
.tag--text {
color: rgba($color: #333333, $alpha: 0.8) !important;
}
} }
} }
&--disabled { &--disabled {

View File

@ -27,7 +27,7 @@ const Tag: FC<PropsType> = (props) => {
onClick, onClick,
circle = false, circle = false,
customStyle = {}, customStyle = {},
plain = false, plain = false, // 朴素
customClassName = '', customClassName = '',
} = props } = props
const handleClick = (event) => { const handleClick = (event) => {

View File

@ -191,7 +191,7 @@ export default memo<PropsType>(props => {
<View className={styles.topItem}> <View className={styles.topItem}>
<View className='flex-row items-center'> <View className='flex-row items-center'>
<View className={styles.topTitle}>{itemData?.purchaser_name}</View> <View className={styles.topTitle}>{itemData?.purchaser_name}</View>
<Tag type='info' size='normal' circle plain> <Tag type='info' size='normal' circle customStyle={{ backgroundColor: '#f0f0f0',borderColor: 'transparent' }} plain>
{itemData?.sale_user_name} {itemData?.sale_user_name}
</Tag> </Tag>
</View> </View>
@ -200,10 +200,6 @@ export default memo<PropsType>(props => {
{materialChecked} {colorChecked} {' '} {materialChecked} {colorChecked} {' '}
{selected === EnumSaleMode.Bulk ? `${lengthOrRollChecked}` : `${lengthOrRollChecked}`} {selected === EnumSaleMode.Bulk ? `${lengthOrRollChecked}` : `${lengthOrRollChecked}`}
</Text> </Text>
{/* <Text>
{0} {0} {' '}
{selected === EnumSaleMode.Bulk ? `${0}` : `${0}`}
</Text> */}
</View> </View>
</View> </View>
<DrawerButton isOpen={openDetail} /> <DrawerButton isOpen={openDetail} />
@ -240,7 +236,7 @@ export default memo<PropsType>(props => {
<Divider customClassName={styles.line}></Divider> <Divider customClassName={styles.line}></Divider>
<View className={classnames(styles.orderTitle, 'justify-between')}> <View className={classnames(styles.orderTitle, 'justify-between')}>
<Text></Text> <Text></Text>
<Tag type='danger' size='normal' circle plain={false}> <Tag type='danger' size='normal' circle plain>
{selectList[selected].title}{selectList[selected].unit} {selectList[selected].title}{selectList[selected].unit}
</Tag> </Tag>
</View> </View>

View File

@ -141,7 +141,7 @@ const UserInfo: FC = () => {
</View> </View>
</View> </View>
<View className={styles.bottomBar}> <View className={styles.bottomBar}>
<Tag type='primary' size='normal' circle customStyle={{ marginRight: '10px' }}> <Tag type='primary' size='normal' circle plain customStyle={{ marginRight: '10px' }}>
{userInfo.userInfo.department_name} {userInfo.userInfo.department_name}
</Tag> </Tag>
<Divider direction='vertical'></Divider> <Divider direction='vertical'></Divider>