Task：热门词条样式控制

pages/shop/GoodSearch/index.vue

@@ -63,12 +63,20 @@
       <view class="title">热门搜索</view>
       <view class="list acea-row">
         <view
-          v-for="keywordsKey of keywords"
+          v-for="(hot, key) in keywords"
-          :key="keywordsKey"
+          :key="key"
-          class="item v12-font-28"
+          class="item v12-font-28 v12-align-center"
-          @click="toSearch(keywordsKey)"
+          :style="{paddingRight: hot.isNew === 1 ? '0 !important' : '24rpx !important'}"
+          @click="toSearch(hot.keyword)"
         >
-          {{ keywordsKey }}
+          
+          <view v-if="hot.isNew === 2">
+            <image :src="webUrl + '/icon/fire.png'" class="fire-icon"></image>
+          </view>
+          {{ hot.keyword }}
+          <view class="new-icon-box" v-if="hot.isNew === 1" >
+            <image class="new-icon" :src="webUrl + '/icon/new.png'"></image>
+          </view>
         </view>
       </view>
     </view>
@@ -136,6 +144,7 @@ export default {
   name: 'GoodSearch',
   data: function () {
     return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
       showkey: true,
       currentSearch: '',
       keywords: [],
@@ -227,7 +236,7 @@ export default {
       getSearchPageConfig().then(res => {
         const { success, data } = res
         if (success) {
-          this.keywords = data.hotKeyword
+          this.keywords = data.searchKeywords
           this.rankingArr.push(data.ranking1)
           this.rankingArr.push(data.ranking2)
           this.recommendKeyword = data.recommendKeyword.split(',')
@@ -277,6 +286,23 @@ export default {
 </script>
 
 <style lang="less">
+.new-icon-box{
+  position: relative;
+  width: 50rpx;
+  height: 100%;
+}
+.fire-icon{
+  width: 24rpx;
+  height: 24rpx;
+  margin-right: 5rpx;
+}
+.new-icon{
+  width: 40rpx;
+  height: 26rpx;
+  left: 10rpx;
+  top: -5rpx;
+  position: absolute;
+}
 .iconfont{
   position: relative;
 }
@@ -359,11 +385,12 @@ export default {
         box-sizing: border-box;
         margin: 0 24rpx 20rpx 0;
         padding: 0 24rpx;
-        border-radius: 28rpx;
+        border-radius: 12rpx;
-        background: #F1F0EE;
+        background: #F2F2F2;
-        color: #666;
+        color: #333;
         font-size: 24rpx;
         line-height: 48rpx;
+        position: relative;
       }
     }