✨ feat(支付优化):线下汇款UI优化

This commit is contained in:
Haiyi
2022-12-13 13:55:37 +08:00
committed by cheng
parent 3401b77a03
commit a79ffacf95
4 changed files with 197 additions and 81 deletions
+76 -35
View File
@@ -1,40 +1,81 @@
.searchInput_main{
.searchInput_main {
display: flex;
min-height: 62px;
align-items: center;
border-bottom: 1px solid #f0f0f0;
.searchInput_title {
min-width: 145px;
min-height: 50px;
font-size: 28px;
color: $color_font_two;
margin-right: 20px;
padding-left: 20px;
display: flex;
min-height: 62px;
align-items: center;
border-bottom: 1px solid #F0F0F0;
.searchInput_title {
min-width: 145px;
min-height: 50px;
font-size: 28px;
color: $color_font_two;
margin-right: 20px;
padding-left: 20px;
display: flex;
align-items: center;
position: relative;
&::before{
content: "";
height: 30px;
width: 1px;
background-color: #F0F0F0;
position: absolute;
right: 0;
}
position: relative;
&::before {
content: '';
height: 30px;
width: 1px;
background-color: #f0f0f0;
position: absolute;
right: 0;
}
.searchInput_con{
flex:1;
width: 100%;
display: flex;
width: 100%;
align-items: center;
input{
font-size: 26px;
}
}
.searchInput_con {
flex: 1;
width: 100%;
display: flex;
width: 100%;
align-items: center;
input {
font-size: 26px;
}
.icon_more_self{
font-size: 28px;
color: $color_font_two;
}
.icon_more_self {
font-size: 28px;
color: $color_font_two;
}
}
.searchActive {
display: flex;
min-height: 62px;
align-items: center;
border-bottom: 1px solid #f0f0f0;
justify-content: space-between;
.searchInput_title {
min-width: 145px;
min-height: 50px;
font-size: 28px;
color: $color_font_two;
margin-right: 20px;
padding-left: 20px;
display: flex;
align-items: center;
position: relative;
&::before {
content: '';
height: 30px;
width: 1px;
background-color: #f0f0f0;
position: absolute;
right: 0;
}
}
}
.searchInput_con {
// flex: 1;
// width: 100%;
display: flex;
// width: 100%;
// align-items: center;
padding-right: 48px;
input {
font-size: 26px;
}
}
.icon_more_self {
font-size: 28px;
color: $color_font_two;
}
}
+3 -1
View File
@@ -16,6 +16,7 @@ interface Params {
height?: string
titleStyle?: Object
styleObj?: Object
hasCopy?: boolean
}
const SearchInput = (props: Params) => {
const {
@@ -29,6 +30,7 @@ const SearchInput = (props: Params) => {
clickOnInput,
height = '80rpx',
titleStyle = {},
hasCopy = false,
} = props
const stylen = useMemo(() => {
@@ -38,7 +40,7 @@ const SearchInput = (props: Params) => {
return {}
}, [showBorder])
return (
<View className={styles.searchInput_main} style={{ height, ...stylen }}>
<View className={!hasCopy ? styles.searchInput_main : styles.searchActive} style={{ height, ...stylen }}>
{showTitle && (
<View className={styles.searchInput_title} style={titleStyle}>
{title}