开发活动排行榜

components/activityList/index.json

@@ -1,4 +1,5 @@
 {
   "component": true,
-  "usingComponents": {}
+  "usingComponents": {},
+  "styleIsolation": "apply-shared"
 }

components/activityList/index.less

@@ -1 +1,231 @@
-/* components/activityList/index.wxss */
+.activityList {
+  padding: 0rpx 14rpx;
+  padding-bottom: calc(140rpx + env(safe-area-inset-bottom)) !important;
+  box-sizing: border-box;
+
+  .ranking-class-1 {
+    margin-bottom: 20rpx;
+    width: 100%;
+    padding: 20rpx 20rpx 34rpx;
+    box-sizing: border-box;
+    background-color: white;
+    border-radius: 30rpx;
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0rpx 14rpx;
+      box-sizing: border-box;
+
+      .title {
+        font-size: 30rpx;
+        font-weight: bold;
+      }
+
+      .toAll {
+        font-size: 28rpx;
+
+        .backIcon {
+          width: 12rpx;
+          height: 22rpx;
+        }
+      }
+    }
+
+    .body {
+
+      .top {
+        margin-top: 16rpx;
+        display: flex;
+        justify-content: space-around;
+        align-items: flex-end;
+
+        .userBox {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+        }
+
+        .nickName {
+          width: 140rpx;
+          font-size: 20rpx;
+          margin-top: 14rpx;
+        }
+
+        .firstUser {
+          width: 130rpx;
+          height: 130rpx;
+          background: url(http://reader-wx.ai160.com/images/reader/v3/first.png) no-repeat;
+          background-size: 100% 100%;
+          text-align: center;
+
+          .avatar {
+            margin-top: 36rpx;
+            width: 90rpx;
+            height: 90rpx;
+            border-radius: 50%;
+            background-color: #EBEBEB;
+          }
+
+        }
+
+        .secondUser {
+          width: 110rpx;
+          height: 110rpx;
+          background: url(http://reader-wx.ai160.com/images/reader/v3/second.png) no-repeat;
+          background-size: 100% 100%;
+          text-align: center;
+
+          .avatar {
+            margin-top: 26rpx;
+            width: 80rpx;
+            height: 80rpx;
+            border-radius: 50%;
+            background-color: #EBEBEB;
+          }
+
+        }
+
+        .thirdUser {
+          width: 110rpx;
+          height: 110rpx;
+          background: url(http://reader-wx.ai160.com/images/reader/v3/third.png) no-repeat;
+          background-size: 100% 100%;
+          text-align: center;
+
+          .avatar {
+            margin-top: 26rpx;
+            width: 80rpx;
+            height: 80rpx;
+            background-color: #EBEBEB;
+            border-radius: 50%;
+          }
+        }
+      }
+
+      .btm {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+
+        .userBox {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+
+          .avatar {
+            margin-top: 26rpx;
+            width: 80rpx;
+            height: 80rpx;
+            border-radius: 50%;
+            background-color: #EBEBEB;
+          }
+
+          .nickName {
+            width: 120rpx;
+            font-size: 20rpx;
+            margin-top: 14rpx;
+          }
+        }
+      }
+    }
+  }
+
+  .ranking-class-2 {
+    margin-bottom: 20rpx;
+    width: 100%;
+    box-sizing: border-box;
+    border-radius: 30rpx;
+    overflow: hidden;
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 25rpx 30rpx;
+      box-sizing: border-box;
+      background-color: #6D9FFE;
+
+      .left {
+        display: flex;
+        align-items: center;
+        color: white;
+
+        .icon {
+          width: 26rpx;
+          height: 30rpx;
+        }
+
+        .title {
+          font-size: 30rpx;
+          font-weight: bold;
+          margin: 0rpx 10rpx;
+        }
+      }
+
+      .toAll {
+        font-size: 28rpx;
+        color: white;
+
+        .backIcon {
+          width: 12rpx;
+          height: 22rpx;
+        }
+      }
+    }
+
+    .body {
+      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;
+        margin-bottom: 20rpx;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background-color: white;
+
+        .left {
+          display: flex;
+          align-items: center;
+
+          .stand {
+            width: 36rpx;
+            height: 36rpx;
+          }
+
+          .avatar {
+            width: 72rpx;
+            height: 72rpx;
+            margin: 0rpx 30rpx;
+            border-radius: 50%;
+          }
+
+          .nickName {
+            width: 210rpx;
+            font-size: 26rpx;
+          }
+        }
+
+        .right {
+          text-align: center;
+          font-size: 0rpx;
+
+          .playIcon {
+            width: 34rpx;
+            height: 34rpx;
+          }
+
+          .num {
+            font-size: 28rpx;
+          }
+        }
+      }
+    }
+  }
+}

components/activityList/index.wxml

@@ -1,2 +1,84 @@
-<!--components/activityList/index.wxml-->
-<text>components/activityList/index.wxml</text>
+<view class="activityList">
+  <view class="ranking-class-1">
+    <view class="header">
+      <view class="title">邀新榜TOP100</view>
+      <view class="toAll">查看全部
+        <image src="/static/black.png" class="backIcon" />
+      </view>
+    </view>
+    <view class="body">
+      <view class="top">
+        <view class="userBox">
+          <view class="secondUser">
+            <image src="/static/task1.png" class="avatar" />
+          </view>
+          <view class="nickName textOver">正直的憨憨正直的憨憨</view>
+        </view>
+        <view class="userBox">
+          <view class="firstUser">
+            <image src="/static/task1.png" class="avatar" />
+          </view>
+          <view class="nickName textOver">正直的憨憨正直的憨憨</view>
+        </view>
+        <view class="userBox">
+          <view class="thirdUser">
+            <image src="/static/task1.png" class="avatar" />
+          </view>
+          <view class="nickName textOver">正直的憨憨正直的憨憨</view>
+        </view>
+      </view>
+      <view class="btm">
+        <view class="userBox" wx:for="{{5}}" wx:key="index">
+          <image src="/static/task1.png" class="avatar" />
+          <view class="nickName textOver">正直的憨憨正直的憨憨</view>
+        </view>
+      </view>
+    </view>
+  </view>
+  <view class="ranking-class-2">
+    <view class="header">
+      <view class="left">
+        <image src="/static/rbb.png" class="icon" />
+        <view class="title">热播榜</view><text>TOP100</text>
+      </view>
+      <view class="toAll">查看全部
+        <image src="/static/black.png" class="backIcon" />
+      </view>
+    </view>
+    <view class="body">
+      <view class="row">
+        <view class="left">
+          <image src="/static/1-1.png" class="stand" />
+          <image src="/static/play-big.png" class="avatar" />
+          <view class="nickName textOver">樱桃小丸子</view>
+        </view>
+        <view class="right">
+          <image src="/static/play.png" class="playIcon" />
+          <view class="num">186</view>
+        </view>
+      </view>
+      <view class="row">
+        <view class="left">
+          <image src="/static/2-1.png" class="stand" />
+          <image src="/static/play-big.png" class="avatar" />
+          <view class="nickName textOver">樱桃小丸子</view>
+        </view>
+        <view class="right">
+          <image src="/static/play.png" class="playIcon" />
+          <view class="num">186</view>
+        </view>
+      </view>
+      <view class="row">
+        <view class="left">
+          <image src="/static/3-1.png" class="stand" />
+          <image src="/static/play-big.png" class="avatar" />
+          <view class="nickName textOver">樱桃小丸子</view>
+        </view>
+        <view class="right">
+          <image src="/static/play.png" class="playIcon" />
+          <view class="num">186</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>

components/activityList/index.wxss

@@ -1 +1,192 @@
-/* components/activityList/index.wxss */
+.activityList {
+  padding: 0rpx 14rpx;
+  padding-bottom: calc(140rpx + env(safe-area-inset-bottom)) !important;
+  box-sizing: border-box;
+}
+.activityList .ranking-class-1 {
+  margin-bottom: 20rpx;
+  width: 100%;
+  padding: 20rpx 20rpx 34rpx;
+  box-sizing: border-box;
+  background-color: white;
+  border-radius: 30rpx;
+}
+.activityList .ranking-class-1 .header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0rpx 14rpx;
+  box-sizing: border-box;
+}
+.activityList .ranking-class-1 .header .title {
+  font-size: 30rpx;
+  font-weight: bold;
+}
+.activityList .ranking-class-1 .header .toAll {
+  font-size: 28rpx;
+}
+.activityList .ranking-class-1 .header .toAll .backIcon {
+  width: 12rpx;
+  height: 22rpx;
+}
+.activityList .ranking-class-1 .body .top {
+  margin-top: 16rpx;
+  display: flex;
+  justify-content: space-around;
+  align-items: flex-end;
+}
+.activityList .ranking-class-1 .body .top .userBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.activityList .ranking-class-1 .body .top .nickName {
+  width: 140rpx;
+  font-size: 20rpx;
+  margin-top: 14rpx;
+}
+.activityList .ranking-class-1 .body .top .firstUser {
+  width: 130rpx;
+  height: 130rpx;
+  background: url(http://reader-wx.ai160.com/images/reader/v3/first.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+}
+.activityList .ranking-class-1 .body .top .firstUser .avatar {
+  margin-top: 36rpx;
+  width: 90rpx;
+  height: 90rpx;
+  border-radius: 50%;
+  background-color: #EBEBEB;
+}
+.activityList .ranking-class-1 .body .top .secondUser {
+  width: 110rpx;
+  height: 110rpx;
+  background: url(http://reader-wx.ai160.com/images/reader/v3/second.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+}
+.activityList .ranking-class-1 .body .top .secondUser .avatar {
+  margin-top: 26rpx;
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background-color: #EBEBEB;
+}
+.activityList .ranking-class-1 .body .top .thirdUser {
+  width: 110rpx;
+  height: 110rpx;
+  background: url(http://reader-wx.ai160.com/images/reader/v3/third.png) no-repeat;
+  background-size: 100% 100%;
+  text-align: center;
+}
+.activityList .ranking-class-1 .body .top .thirdUser .avatar {
+  margin-top: 26rpx;
+  width: 80rpx;
+  height: 80rpx;
+  background-color: #EBEBEB;
+  border-radius: 50%;
+}
+.activityList .ranking-class-1 .body .btm {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+.activityList .ranking-class-1 .body .btm .userBox {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.activityList .ranking-class-1 .body .btm .userBox .avatar {
+  margin-top: 26rpx;
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+  background-color: #EBEBEB;
+}
+.activityList .ranking-class-1 .body .btm .userBox .nickName {
+  width: 120rpx;
+  font-size: 20rpx;
+  margin-top: 14rpx;
+}
+.activityList .ranking-class-2 {
+  margin-bottom: 20rpx;
+  width: 100%;
+  box-sizing: border-box;
+  border-radius: 30rpx;
+  overflow: hidden;
+}
+.activityList .ranking-class-2 .header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 25rpx 30rpx;
+  box-sizing: border-box;
+  background-color: #6D9FFE;
+}
+.activityList .ranking-class-2 .header .left {
+  display: flex;
+  align-items: center;
+  color: white;
+}
+.activityList .ranking-class-2 .header .left .icon {
+  width: 26rpx;
+  height: 30rpx;
+}
+.activityList .ranking-class-2 .header .left .title {
+  font-size: 30rpx;
+  font-weight: bold;
+  margin: 0rpx 10rpx;
+}
+.activityList .ranking-class-2 .header .toAll {
+  font-size: 28rpx;
+  color: white;
+}
+.activityList .ranking-class-2 .header .toAll .backIcon {
+  width: 12rpx;
+  height: 22rpx;
+}
+.activityList .ranking-class-2 .body {
+  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;
+  margin-bottom: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: white;
+}
+.activityList .ranking-class-2 .body .row .left {
+  display: flex;
+  align-items: center;
+}
+.activityList .ranking-class-2 .body .row .left .stand {
+  width: 36rpx;
+  height: 36rpx;
+}
+.activityList .ranking-class-2 .body .row .left .avatar {
+  width: 72rpx;
+  height: 72rpx;
+  margin: 0rpx 30rpx;
+  border-radius: 50%;
+}
+.activityList .ranking-class-2 .body .row .left .nickName {
+  width: 210rpx;
+  font-size: 26rpx;
+}
+.activityList .ranking-class-2 .body .row .right {
+  text-align: center;
+  font-size: 0rpx;
+}
+.activityList .ranking-class-2 .body .row .right .playIcon {
+  width: 34rpx;
+  height: 34rpx;
+}
+.activityList .ranking-class-2 .body .row .right .num {
+  font-size: 28rpx;
+}

pages/index/index.js

@@ -20,7 +20,7 @@ Page({
   data: {
     navBarHeight: app.globalData.navBarHeight,
     background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
-    currentType: '1',
+    currentType: '3',
     // 控制一级分类是否固定
     isFixed: false,
     categoryList: []

pages/index/index.wxml

@@ -25,5 +25,6 @@
   <!-- 优秀作品展播及官方推荐列表组件 -->
   <worksList id="worksList" wx:if="{{currentType!='3'}}" worksList="{{list}}"
     videoType="{{currentType=='1'?'excellent':'public'}}" />
+  <activityList wx:if="{{currentType=='3'}}" />
 </view>
 <canvas id='share' type="2d"> </canvas>