开发pk榜另一个样式

components/activityList/index.js

@@ -1,8 +1,4 @@
-// components/activityList/index.js
 Component({
-  /**
-   * 组件的属性列表
-   */
   properties: {
 
   },
@@ -11,7 +7,8 @@ Component({
    * 组件的初始数据
    */
   data: {
-
+    //，2：邀新榜，3：热播榜，4：挑战pk榜，5，朗读赛
+    type: '4'
   },
 
   /**
@@ -20,4 +17,4 @@ Component({
   methods: {
 
   }
-})
+})

components/activityList/index.less

@@ -145,7 +145,6 @@
       justify-content: space-between;
       padding: 25rpx 30rpx;
       box-sizing: border-box;
-      background-color: #6D9FFE;
 
       .left {
         display: flex;
@@ -179,11 +178,10 @@
       width: 100%;
       padding: 25rpx 20rpx;
       box-sizing: border-box;
-      background-image: linear-gradient(180deg, #A6CDFF 0%, #ECF4FF 100%, #FFFFFF 100%);
 
       .row {
         padding: 14rpx 25rpx;
-        border-radius: 10rpx;
+        border-radius: 14rpx;
         margin-bottom: 20rpx;
         display: flex;
         align-items: center;
@@ -228,4 +226,39 @@
       }
     }
   }
+
+  .yxb {
+    .header {
+      background-color: #FF7E6C;
+    }
+
+    .body {
+      background-image: linear-gradient(180deg, #FFB4A8 0%, #FFDCD7 100%);
+    }
+  }
+
+  .rbb {
+    .header {
+      background-color: #6D9FFE;
+    }
+
+    .body {
+      background-image: linear-gradient(180deg, #A6CDFF 0%, #ECF4FF 100%, #FFFFFF 100%);
+    }
+  }
+
+  .pkb {
+    .header {
+      background-color: #967DFF;
+    }
+
+    .body {
+      background-image: linear-gradient(180deg, #8265F9 0%, #B8A7FF 100%);
+    }
+
+    .playIcon {
+      width: 38rpx !important;
+      height: 34rpx !important;
+    }
+  }
 }

components/activityList/index.wxml

@@ -35,14 +35,14 @@
       </view>
     </view>
   </view>
-  <view class="ranking-class-2">
+  <view class="ranking-class-2 {{type=='2'?'yxb':type=='3'?'rbb':'pkb'}}">
     <view class="header">
       <view class="left">
-        <image src="/static/rbb.png" class="icon" />
-        <view class="title">热播榜</view><text>TOP100</text>
+        <image src="{{type=='2'?'/static/yxb.png':type=='3'?'/static/rbb.png':'/static/pkb.png'}}" class="icon" />
+        <view class="title">{{type=='2'?'邀新榜':type=='3'?'热播榜':'PK榜'}}</view><text>TOP100</text>
       </view>
       <view class="toAll">查看全部
-        <image src="/static/black.png" class="backIcon" />
+        <image src="/static/rBtn.png" class="backIcon" />
       </view>
     </view>
     <view class="body">
@@ -53,7 +53,7 @@
           <view class="nickName textOver">樱桃小丸子</view>
         </view>
         <view class="right">
-          <image src="/static/play.png" class="playIcon" />
+          <image src="{{type=='2'?'/static/yx.png':type=='3'?'/static/play.png':'/static/win.png'}}" class="playIcon" />
           <view class="num">186</view>
         </view>
       </view>
@@ -64,7 +64,7 @@
           <view class="nickName textOver">樱桃小丸子</view>
         </view>
         <view class="right">
-          <image src="/static/play.png" class="playIcon" />
+          <image src="{{type=='2'?'/static/yx.png':type=='3'?'/static/play.png':'/static/win.png'}}" class="playIcon" />
           <view class="num">186</view>
         </view>
       </view>
@@ -75,7 +75,7 @@
           <view class="nickName textOver">樱桃小丸子</view>
         </view>
         <view class="right">
-          <image src="/static/play.png" class="playIcon" />
+          <image src="{{type=='2'?'/static/yx.png':type=='3'?'/static/play.png':'/static/win.png'}}" class="playIcon" />
           <view class="num">186</view>
         </view>
       </view>

components/activityList/index.wxss

@@ -122,7 +122,6 @@
   justify-content: space-between;
   padding: 25rpx 30rpx;
   box-sizing: border-box;
-  background-color: #6D9FFE;
 }
 .activityList .ranking-class-2 .header .left {
   display: flex;
@@ -150,11 +149,10 @@
   width: 100%;
   padding: 25rpx 20rpx;
   box-sizing: border-box;
-  background-image: linear-gradient(180deg, #A6CDFF 0%, #ECF4FF 100%, #FFFFFF 100%);
 }
 .activityList .ranking-class-2 .body .row {
   padding: 14rpx 25rpx;
-  border-radius: 10rpx;
+  border-radius: 14rpx;
   margin-bottom: 20rpx;
   display: flex;
   align-items: center;
@@ -190,3 +188,25 @@
 .activityList .ranking-class-2 .body .row .right .num {
   font-size: 28rpx;
 }
+.activityList .yxb .header {
+  background-color: #FF7E6C;
+}
+.activityList .yxb .body {
+  background-image: linear-gradient(180deg, #FFB4A8 0%, #FFDCD7 100%);
+}
+.activityList .rbb .header {
+  background-color: #6D9FFE;
+}
+.activityList .rbb .body {
+  background-image: linear-gradient(180deg, #A6CDFF 0%, #ECF4FF 100%, #FFFFFF 100%);
+}
+.activityList .pkb .header {
+  background-color: #967DFF;
+}
+.activityList .pkb .body {
+  background-image: linear-gradient(180deg, #8265F9 0%, #B8A7FF 100%);
+}
+.activityList .pkb .playIcon {
+  width: 38rpx !important;
+  height: 34rpx !important;
+}