🐞 fix(#1000663#13): 修复购物页面的样式问题

This commit is contained in:
xuan 2022-11-09 11:55:26 +08:00
parent b64a003277
commit 7070ec425e
7 changed files with 56 additions and 13 deletions

View File

@ -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;
}

View File

@ -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>
)
}

View File

@ -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}>

View File

@ -33,7 +33,10 @@
}
.unit{
font-size: 24px;
font-size: 22px;
transform: scale(.7);
margin-right: 10px;
}
.money{
font-size: 36px;
}

View File

@ -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}>

View File

@ -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;

View File

@ -1,7 +1,6 @@
.layout {
margin: 24px;
padding-left: 0;
padding-right: 0;
padding: 30px 0;
border: 1px solid transparent;
.checkbox {
padding: 0 24px;