🌈 style(Tag): 调整Tag组件的plain样式
This commit is contained in:
parent
a619b24e6b
commit
4b00a2b4fa
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@ -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 {
|
||||||
|
|||||||
@ -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) => {
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user