🐞 fix(#1000663#13): 修复购物页面的样式问题
This commit is contained in:
parent
b64a003277
commit
7070ec425e
@ -1,9 +1,20 @@
|
||||
.iconText{
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
font-size: 28px;
|
||||
.iconfont{
|
||||
font-size: 40px;
|
||||
}
|
||||
.text{
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
// 水平方向
|
||||
.iconText--horizontal{
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
// 垂直方向
|
||||
.iconText--vertical{
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
@ -1,27 +1,54 @@
|
||||
import { FC } from "react"
|
||||
import React, { FC, useMemo } from "react"
|
||||
import { View, Text } from '@tarojs/components'
|
||||
import IconFont, { IconNames } from '../iconfont/iconfont'
|
||||
import styles from './index.module.scss'
|
||||
import classnames from 'classnames'
|
||||
|
||||
type Direaction = 'left' | 'right' | 'bottom' | 'top'
|
||||
|
||||
type PropsType = {
|
||||
iconName: IconNames
|
||||
iconSize?: number
|
||||
svg?: boolean
|
||||
color?: string,
|
||||
text?: string
|
||||
direction?: Direaction
|
||||
children?: React.ReactNode
|
||||
customClass?: string
|
||||
customStyle?: React.CSSProperties
|
||||
textClassName?: string
|
||||
textCustomStyle?: React.CSSProperties
|
||||
}
|
||||
|
||||
const IconText: FC<PropsType> = (props) => {
|
||||
const { children, svg = false, iconName, iconSize = 40, text = '', color } = props
|
||||
const { children, svg = false, iconName, iconSize = 40, text = '', color,textCustomStyle,direction='left' } = props
|
||||
const classNameObject = {
|
||||
[styles['iconText--horizontal']]: ['left', 'right'].includes(direction),
|
||||
[styles['iconText--vertical']]: ['bottom', 'top'].includes(direction)
|
||||
}
|
||||
const iconComponent = svg ? <IconFont name={iconName} size={iconSize} color={color}></IconFont> : <Text className={classnames('iconfont', iconName, styles.iconfont)}></Text>
|
||||
|
||||
const textComponent = children ? children : <Text className={classnames(props.textClassName, styles['text'])} style={textCustomStyle}>{text}</Text>
|
||||
|
||||
const component = ()=>{
|
||||
console.log('direction===>',direction);
|
||||
if(direction === 'left' || direction === 'top'){
|
||||
return <>
|
||||
{iconComponent}
|
||||
{textComponent}
|
||||
</>
|
||||
}else if(direction === 'right' || direction === 'bottom'){
|
||||
return <>
|
||||
{textComponent}
|
||||
{iconComponent}
|
||||
</>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<View className={classnames(styles.iconText, props.customStyle, props.customClass)}>
|
||||
{svg ? <IconFont name={iconName} size={iconSize} color={color}></IconFont> : <Text className={classnames('iconfont', iconName, styles.iconfont)}></Text>}
|
||||
{children ? children : <Text className={classnames(props.textClassName)}>{text}</Text>}
|
||||
<View className={classnames(styles.iconText,classNameObject, props.customStyle, props.customClass)}>
|
||||
{component()}
|
||||
</View>
|
||||
)
|
||||
}
|
||||
|
@ -92,6 +92,7 @@ export default memo(
|
||||
<IconFont
|
||||
name='icon-sousuo'
|
||||
size={37}
|
||||
color='#ababac'
|
||||
customClassName={classnames(styles.icon_a_sousuo1_self, placeIcon == 'inner' ? styles.icon_inner : styles.icon_out)}></IconFont>
|
||||
)}
|
||||
<View className={styles.input_bar}>
|
||||
|
@ -33,7 +33,10 @@
|
||||
}
|
||||
|
||||
.unit{
|
||||
font-size: 24px;
|
||||
font-size: 22px;
|
||||
transform: scale(.7);
|
||||
margin-right: 10px;
|
||||
}
|
||||
.money{
|
||||
font-size: 36px;
|
||||
}
|
||||
|
@ -23,9 +23,10 @@ export default props => {
|
||||
<Text className={styles.moneyText}>预估金额:</Text>
|
||||
<Text className={styles.moneyNumber}>
|
||||
<Text className={styles.unit}>¥</Text>
|
||||
{Number(Number(amount)
|
||||
<Text className={styles.money}>{Number(Number(amount)
|
||||
.toFixed(2))
|
||||
.toLocaleString()}
|
||||
.toLocaleString()}</Text>
|
||||
|
||||
</Text>
|
||||
</View>
|
||||
<View className={styles.bottomRight}>
|
||||
|
@ -22,6 +22,7 @@
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
flex: 1 1 auto;
|
||||
&--title {
|
||||
color: $color_font_one;
|
||||
@ -46,7 +47,7 @@
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: flex-end;
|
||||
justify-content: space-around;
|
||||
justify-content: space-between;
|
||||
align-self: stretch;
|
||||
&--price {
|
||||
color: $color_money;
|
||||
|
@ -1,7 +1,6 @@
|
||||
.layout {
|
||||
margin: 24px;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding: 30px 0;
|
||||
border: 1px solid transparent;
|
||||
.checkbox {
|
||||
padding: 0 24px;
|
||||
|
Loading…
x
Reference in New Issue
Block a user