reader/pages/activity/index/index.wxml

<!--pages/activity/index/index.wxml-->
<view class="activity-index">
  <view class="rule">
    <image src=""></image>
  </view>
  <view class="activity-works">
    <text class="activity-works-title">选择下面课文进行朗读</text>
    <view class="activity-works-swiper">
      <swiper indicator-dots="true" autoplay="false" circular="true" previous-margin="66rpx" next-margin="56rpx" indicator-color="#BABABA" indicator-active-color="#7ACAFF">
        <block wx:for="{{background}}" wx:key="*this">
          <swiper-item>
            <view class="swiper-item-view" style="background: {{item}};"></view>
          </swiper-item>
        </block>
      </swiper>
    </view>
  </view>
  <view class="activity-ranking">
    <view class="activity-ranking-tab">
      <text class="select">TOP100人气榜单</text>
      <text>我的参赛作品</text>
    </view>
    <view class="activity-ranking-container">
      <view class="activity-ranking-title">
        <text>排名</text>
        <text>名称</text>
        <text>人气值</text>
      </view>
      <scroll-view scroll-y="true" style="height: 300rpx;">
        <view class="scroll-view-item">
          <text class="ranking-number">1</text>
          <view class="ranking-message">
            <view class="reanking-message-head">
              <image class="haed-url" src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
            </view>
            <view class="reanking-message-name">
              <text>小明</text>
              <view class="operation">
                <view class="forward">
                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
                  1
                </view>
                <view class="like">
                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
                  1
                </view>
                <view class="comment">
                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
                  1
                </view>
              </view>
            </view>
          </view>
          <view class="popularity">99</view>
        </view>
        <view class="scroll-view-item">
          <text class="ranking-number">1</text>
          <view class="ranking-message">
            <view class="reanking-message-head">
              <image class="haed-url" src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
              <image class="follow-url" src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
            </view>
            <view class="reanking-message-name">
              <text>小明</text>
              <view class="operation">
                <view class="forward">
                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
                  1
                </view>
                <view class="like">
                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
                  1
                </view>
                <view class="comment">
                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
                  1
                </view>
              </view>
            </view>
          </view>
          <view class="popularity">99</view>
        </view>
        <view class="scroll-view-item">
          <text class="ranking-number">1</text>
          <view class="ranking-message">
            <view class="reanking-message-head">
              <image class="haed-url" src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
            </view>
            <view class="reanking-message-name">
              <text>小明</text>
              <view class="operation">
                <view class="forward">
                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
                  1
                </view>
                <view class="like">
                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
                  1
                </view>
                <view class="comment">
                  <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
                  1
                </view>
              </view>
            </view>
          </view>
          <view class="popularity">99</view>
        </view>
      </scroll-view>
    </view>
  </view>
  <view class="activity-my-ranking">
        <text class="ranking-number" style="color: #fff;">1</text>
        <view class="ranking-message">
          <view class="reanking-message-head">
            <image class="haed-url" src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
          </view>
          <view class="reanking-message-name" style="color: #fff;">
            <text style="color: #fff;">小明</text>
            <view class="operation">
              <view class="forward" style="color: #fff;">
                <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
                1
              </view>
              <view class="like">
                <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
                1
              </view>
              <view class="comment">
                <image src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>
                1
              </view>
            </view>
          </view>
        </view>
        <view class="popularity" style="color: #fff;">99</view>
  </view>
</view>