Преглед изворни кода

search update

把搜索框的颜色改成bg-color,然后点击搜索显示历史记录的功能去掉
mulioid пре 4 година
родитељ
комит
546a0f0ef5

+ 1 - 1
miniprogram/app.json

@@ -1,5 +1,6 @@
 {
   "pages": [
+    "pages/search/search",
     "pages/main/main",
     "pages/setting/setting",
     "pages/activity/activity",
@@ -10,7 +11,6 @@
     "pages/activityPublish/activityPublish",
     "pages/user/user",
     "pages/message/message",
-    "pages/search/search",
     "pages/myQuestion/myQuestion",
     "pages/receivedQuestion/receivedQuestion",
     "pages/publisherInfoChange/publisherInfoChange",

+ 3 - 2
miniprogram/app.wxss

@@ -14,15 +14,16 @@
 .dark-primary-color-font { color: #303F9F; }
 .default-primary-color-font { color: #3F51B5; }
 .light-primary-color   { background: #C5CAE9; }
-.text-primary-color    { color: #FFFFFF; }
 .accent-color          { background: #FF4081; }
 .primary-text-color    { color: #212121; }
-
 .divider-color         { background: #BDBDBD; }
 .block-background-color{ background:#F0F0F0;}
+
 .primary-color-fg { color: #469298; }
 .primary-color-bg { background: #469298; }
 .secondary-text-color  { color: #707070; }
+.bg-color {background:#ededed}
+.text-primary-color    { color: #FFFFFF; }
 
 page {
   background: #ededed;

BIN
miniprogram/images/more.png


+ 22 - 11
miniprogram/pages/search/search.wxml

@@ -1,23 +1,34 @@
 <!--为搜索页面-->
-<view class="search block-background-color">
-  <view class="search-inside" style="display: flex; align-items: center;">
-    <icon type="search"></icon>
-    <input class="search-input primary-text-color" style="width: {{searchEnable ? 550 : 650}}rpx;" value="{{searchText}}" placeholder="搜索" confirm-type="search" bindinput="update" bindfocus="focus" bindconfirm="search"></input>
+<view class="search" style="background-color:#ffffff;">
+  <view class="search-inside bg-color" style="display: flex; align-items: center;">
+    <icon type="search" size="20"></icon>
+    <input class="search-input" style="width: {{searchEnable ? 550 : 650}}rpx;" value="{{searchText}}" placeholder="搜索" confirm-type="search" bindinput="update" bindfocus="focus" bindconfirm="search"></input>
   </view>
-  <view wx:if="{{searchEnable}}" class="cancel-button secondary-text-color" bindtap="cancel">取消</view>
+  <view wx:if="{{searchEnable}}" class="cancel-button" bindtap="cancel">取消</view>
 </view>
 
 <scroll-view class="hot-block" scroll-y="true">
-  <view class="hot-tag-block block-background-color">
-    <view class="hot-tag-title default-primary-color-font">热门搜索</view>
-    <view class="hot-tags">
-      <view class="hot-tag light-primary-color" wx:for="{{hotTagData}}" wx:key="tag" wx:for-item="item" data-search-tag="{{item.tag}}" bindtap="searchTag">{{item.tag}}</view>
+  <view class="hot-tag-block">
+    <view class="hot-tag-title primary-color-fg">历史搜索</view>
+    <view class="hot-tags secondary-text-color">
+      <view class="hot-tag" wx:for="{{hotTagData}}" wx:key="tag" wx:for-item="item" data-search-tag="{{item.tag}}" bindtap="searchTag">{{item.tag}}</view>
+    </view>
+  </view>
+  <view class="hot-tag-block">
+    <view class="hot-tag-title primary-color-fg">热门搜索</view>
+    <view class="hot-tags secondary-text-color">
+      <view class="hot-tag" wx:for="{{hotTagData}}" wx:key="tag" wx:for-item="item" data-search-tag="{{item.tag}}" bindtap="searchTag">{{item.tag}}</view>
     </view>
   </view>
 
   <view class="hot-bar-block">
-    <view class="hot-bar-title default-primary-color-font">实时热点</view>
-    <view class="hot-bar block-background-color" wx:for="{{hotBarData}}" wx:key="rank" wx:for-item="item" data-activity-id="{{item.id}}" bindtap="viewActivity">{{item.rank}}. {{item.title}}</view>
+    <text class="hot-bar-title primary-color-bg text-primary-color">实时热点</text>
+    <view class="hot-bar" wx:for="{{hotBarData}}" wx:key="rank" wx:for-item="item" data-activity-id="{{item.id}}" bindtap="viewActivity">
+      <view>
+        <text class="primary-color-fg" space="nbsp">{{item.rank}}    </text><text class="secondary-text-color">{{item.title}} </text>
+      </view>
+      <image class="more" src="/images/more.png" mode="aspectFill"></image>
+    </view>
   </view>
 </scroll-view>
 

+ 27 - 23
miniprogram/pages/search/search.wxss

@@ -38,47 +38,46 @@
 
 .hot-tag-title {
   font-size: 30rpx;
-  margin-top: 30rpx;
+  margin-top: 10rpx;
   margin-left: 40rpx;
 }
 
 .hot-tags {
-  margin: 20rpx 40rpx;
+  margin: 10rpx 40rpx;
 }
 
 .hot-tag {
+  font-size: 24rpx;
   display: inline-block;
-  margin-bottom: 20rpx;
-  margin-right: 20rpx;
-  padding: 10rpx;
-  font-size: 30rpx;
-  line-height: 40rpx;
-  border-radius: 10rpx 10rpx;
+  margin-bottom: 10rpx;
+  margin: 10rpx 10rpx;
 }
 
 .hot-bar-block {
-  width: 100%;
-  height: 400rpx;
-  margin-top: 10rpx;
+  background-color: #ffffff;
+  border-radius: 24rpx;
+  margin: 60rpx 40rpx 0rpx 40rpx;
+  box-shadow: 5rpx 5rpx 8rpx 0rpx rgba(0,0,0,0.16);
+  padding-bottom: 40rpx;
 }
 
 .hot-bar-title {
-  font-size: 35rpx;
-  margin-top: 20rpx;
-  margin-bottom: 20rpx;
-  margin-left: 40rpx;
-  font-weight: 900;
+  font-size: 30rpx;
+  border-radius: 24rpx;
+  position: relative;
+  top: -25rpx;
+  margin: 20rpx 20rpx 0rpx 20rpx;
+  padding: 8rpx 30rpx 8rpx 30rpx;
+  box-shadow: 5rpx 5rpx 8rpx 0rpx rgba(0,0,0,0.16);
 }
 
 .hot-bar {
   height: 50rpx;
-  padding: 10rpx 40rpx;
-
-  border-style: solid;
-  border-width: 1rpx;
-  border-color: #FFFFFF;
-  font-size: 30rpx;
-  line-height: 50rpx;
+  margin: 10rpx 40rpx;
+  font-size: 24rpx;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
 }
 
 .hot-block {
@@ -109,4 +108,9 @@
   justify-content: space-between;
   font-size: 35rpx;
   padding: 25rpx 40rpx;
+}
+
+.more{
+  width: 30rpx;
+  height: 30rpx;
 }