优化推荐数据页面样式增加排行

pages/recommend/index.vue

@@ -35,15 +35,20 @@
               <view class="cate-cont-box">
                 <view class="flex-two" v-for="(item, idx) in list" :key="idx"
                       @click="onTargetGoods(item.goods_islicode)">
+                  <view class="cate-top-rank" :class="rank_bg_arr[idx]">
+                    <view class="cate-top-num" :class="rank_font_arr[idx]">{{idx+1}}</view>
+                  </view>
                   <view class="cate-img-padding">
                     <view v-if="item.rankingDetails.goodsImage" class="cate-img">
                       <image class="image" mode="scaleToFill" :src="item.rankingDetails.goodsImage"></image>
                     </view>
                   </view>
                   <view class="name">
-                    <text>{{ item.goodsName }}</text>
-                    <text class="name-price">￥ {{ item.rankingDetails.price }}</text>
-                    <text class="name-type">交易类型：{{ item.rankingDetails.goodsEntrust == 1 ? '转让' : '授权'}}</text>
+                    <text class="name-name">{{ item.goodsName }}</text>
+                    <view class="name-bottom">
+                      <text class="name-price">￥ {{ item.rankingDetails.price }}</text>
+                      <text class="name-type">交易类型：{{ item.rankingDetails.goodsEntrust == 1 ? '转让' : '授权'}}</text>
+                    </view>
                   </view>
                 </view>
               </view>
@@ -114,6 +119,8 @@ export default {
       scrollTop: 0,
       // 菜单
       menus,
+      rank_font_arr: ['rank_one', 'rank_two', 'rank_three', 'rank_four', 'rank_five'],
+      rank_bg_arr: ['bg_one', 'bg_two', 'bg_three', 'bg_four', 'bg_five']
     }
   },
 
@@ -145,6 +152,7 @@ export default {
       if (this.searchValue == '') {
         this.$error('请输入搜索关键词');
       } else {
+        this.getCatList()
       }
     },
 
@@ -176,7 +184,7 @@ export default {
         goods_type: '', //1.文化资源数据,2.文化数字内容
         lbdSet: 1, //1 热门标的推荐 2 交易(销售) 3 点击
         pageIndex: this.page,
-        pageRows: 10,
+        pageRows: 5,
         typeStatus: 1,
       }
 
@@ -185,6 +193,9 @@ export default {
       } else if (type === 2) {
         param.lbdSet = 3
       }
+      if (this.searchValue != '') {
+        param.goodsName = this.searchValue
+      }
       this.bindData(param)
     },
     // 标的详情
@@ -373,23 +384,31 @@ export default {
     overflow: hidden;
 
     .name {
-      width: 45%;
+      width: 42%;
       height: 200rpx;
-      float: left;
-      margin-left: 51%;
-      margin-top: -45%;
+      position: absolute;
       display: inline-block;
-      font-size: 26rpx;
+      margin-left: 250rpx;
+      margin-top: -225rpx;
       font-weight: bold;
-      color: #444444;
 
-      .name-price{
-        color: #fe7730;
-        margin-top: 30rpx;
+      .name-name {
+        font-size: 26rpx;
+        color: #444444;
       }
-      .name-type{
-        color: #cec7bf;
-        margin-top: 20rpx;
+
+      .name-bottom {
+        position: absolute;
+        top: 125rpx;
+
+        .name-price{
+          color: #fe7730;
+          margin-bottom: 10rpx;
+        }
+
+        .name-type{
+          color: #cec7bf;
+        }
       }
     }
 
@@ -404,6 +423,55 @@ export default {
         display: inline-block;
       }
 
+      .cate-top-rank {
+        position: relative;
+        float: left;
+        z-index: 9999;
+        width: 0;
+        height: 0;
+        border-right: 50px solid transparent; /* 控制三角形的大小 */
+
+        .cate-top-num {
+          float: left;
+          margin-top: -80rpx;
+          margin-left: 23rpx;
+          font-family: 'Impact';
+          font-size: 28rpx;
+          font-weight: 900;
+        }
+        .rank_one{
+          color: #e99d42;
+        }
+        .rank_two{
+          color: #93d2f3;
+        }
+        .rank_three{
+          color: #9b7d31;
+        }
+        .rank_four{
+          color: #93d2f3;
+        }
+        .rank_five{
+          color: #93d2ef;
+        }
+      }
+      .bg_one {
+        border-top: 50px solid #febd45; /* 控制三角形的颜色 */
+      }
+      .bg_two {
+        border-top: 50px solid #b4fdff; /* 控制三角形的颜色 */
+      }
+      .bg_three {
+        border-top: 50px solid #cba43f; /* 控制三角形的颜色 */
+      }
+      .bg_four {
+        border-top: 50px solid #10476e; /* 控制三角形的颜色 */
+      }
+      .bg_five {
+        border-top: 50px solid #10476e; /* 控制三角形的颜色 */
+      }
+
+
       .cate-img-padding {
         width: 250rpx;
         height: 250rpx;
@@ -419,6 +487,7 @@ export default {
           width: 100%;
           height: 100%;
           position: absolute;
+          z-index: 10;
           top: 0;
           left: 0;
         }