Lee
/
consumer-coupon
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

商户搜索修改

master
Lee 2022-09-21 11:31:10 +08:00
parent 5a916933fc
commit 601e5b0bf6
3 changed files with 63 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
css/style.css
View File

@ -297,18 +297,48 @@
width: calc(100% - .5rem); width: calc(100% - .5rem);
height: .86rem; height: .86rem;
margin: .3rem auto 0; margin: .3rem auto 0;
padding: 0 .3rem 0 .4rem;
border: .02rem solid #868686;
} }
.search-form{ .search-form{
width: calc(100% - .6rem); justify-content: space-between;
width: 100%;
}
.search-select-bg{
width: 1.94rem;
border: .02rem solid #868686;
position: relative;
}
.search-select{
width: 100%;
height: 100%;
padding: 0 .3rem;
color: #868686;
}
.search-select-bg>img{
display: block;
width: .14rem;
height: .3rem;
position: absolute;
top: 50%;
right: .15rem;
transform: translateY(-50%);
}
.search-input-bg{
align-items: center;
width: calc(100% - 2.1rem);
} }
.search-input { .search-input {
width: 100%; width: 100%;
line-height: .8rem; line-height: .8rem;
border-radius: .25rem 0 0 .25rem;
border: .02rem solid #868686;
border-right: 0;
padding: 0 .3rem;
-webkit-appearance: none; -webkit-appearance: none;
color: #868686;
} }
.search-input::-webkit-input-placeholder { .search-input::-webkit-input-placeholder {
@ -319,9 +349,18 @@
-webkit-appearance: none; -webkit-appearance: none;
} }
.search img { .search-btn{
justify-content: center;
align-items: center;
width: .96rem;
height: 100%;
border-radius: 0 .25rem .25rem 0;
}
.search-btn>img {
width: .4rem; width: .4rem;
height: .4rem; height: .4rem;
filter: grayscale(100%) brightness(100);
} }
/* 商户列表 */ /* 商户列表 */

BIN
images/icon/icon-arrow.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

22
user/business.html
View File

@ -17,12 +17,28 @@
</head> </head>
<body class="business-body"> <body class="business-body">
<!-- 商户搜索 --> <!-- 商户搜索 -->
<div class="search radius25 border-box flex"> <div class="search flex">
<form action="" class="search-form"> <form action="" class="search-form flex">
<div class="search-select-bg radius25 border-box">
<select class="search-select font24">
<option value="全部区域">全部区域</option>
<option value="区域A">区域A</option>
<option value="区域B">区域B</option>
<option value="区域C">区域C</option>
<option value="区域D">区域D</option>
<option value="区域E">区域E</option>
</select>
<img src="../images/icon/icon-arrow.png" alt="区域选择">
</div>
<div class="search-input-bg flex">
<input class="search-input font24" type="search" placeholder="商户搜索" autocomplete="off"> <input class="search-input font24" type="search" placeholder="商户搜索" autocomplete="off">
</form> <div class="search-btn background-f35 flex">
<img src="../images/icon/icon-search.png" alt="搜索"> <img src="../images/icon/icon-search.png" alt="搜索">
</div> </div>
</div>
</form>
</div>
<!-- 商户列表 --> <!-- 商户列表 -->
<div class="business-list"> <div class="business-list">
<div class="item radius50 border-box flex"> <div class="item radius50 border-box flex">