✨ feat(支付优化):线下汇款UI优化
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user