diff --git a/css/style.css b/css/style.css index 695ec88..1cd26af 100644 --- a/css/style.css +++ b/css/style.css @@ -297,18 +297,48 @@ width: calc(100% - .5rem); height: .86rem; margin: .3rem auto 0; - padding: 0 .3rem 0 .4rem; - border: .02rem solid #868686; } .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 { width: 100%; line-height: .8rem; + border-radius: .25rem 0 0 .25rem; + border: .02rem solid #868686; + border-right: 0; + padding: 0 .3rem; -webkit-appearance: none; + color: #868686; } .search-input::-webkit-input-placeholder { @@ -319,9 +349,18 @@ -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; height: .4rem; + filter: grayscale(100%) brightness(100); } /* 商户列表 */ diff --git a/images/icon/icon-arrow.png b/images/icon/icon-arrow.png new file mode 100644 index 0000000..fbd644a Binary files /dev/null and b/images/icon/icon-arrow.png differ diff --git a/user/business.html b/user/business.html index bb4d8e7..d711057 100644 --- a/user/business.html +++ b/user/business.html @@ -17,11 +17,27 @@ -
-
- +
+ +
+ + 区域选择 +
+ +
+ +
+ 搜索 +
+
- 搜索