reader/pages/invite/index.wxml

<view class="invite">
    <image src="http://reader-wx.ai160.com/images/reader/v3/learn/yxbg.png" class='headerBg' />
    <view class="progressBox">
        <!-- 第一关 -->
        <view class="row ">
            <view class="line"></view>
            <view class="numBox" wx:for="{{2}}" wx:key="index">
                <view class="num">邀{{index+1}}人</view>
                <image src="{{count>=index+1?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
            </view>
            <view class="numBox {{count>2?'qualify':''}}">
                <view class="rewardNum">VIP7天</view>
                <view class="rewardN">第一关</view>
                <image src="{{count>=2?'/static/qb-2.png':'/static/qb-1.png'}}" class="reward" />
            </view>
        </view>
        <!-- 第二关 -->
        <view class="row ">
            <view class="line"></view>
            <view class="numBox" wx:for="{{3}}" wx:key="index">
                <view class="num">邀{{index+3}}人</view>
                <image src="{{count>=index+3?'/static/lock-2.png':'/static/lock-1.png'}}" class="icon" />
            </view>
            <view class="numBox {{count>=5?'qualify':''}}">
                <view class="rewardNum">VIP15天</view>
                <view class="rewardN">第二关</view>
                <image src="{{count>=5?'/static/qb-2.png':'/static/qb-1.png'}}" class="reward" />
            </view>
        </view>
        <!-- 第三关 -->
        <view class="row ">
            <view class="line"></view>
            <view class="numBox">
                <view class="num">邀6人</view>
                <image src="/static/lock-2.png" class="icon" />
            </view>
            <view class="numBox">
                <view class="num">邀7人</view>
                <image src="/static/lock-1.png" class="icon" />
            </view>
            <view class="numBox">
                <view class="num">邀8人</view>
                <image src="/static/lock-1.png" class="icon" />
            </view>
            <view class="numBox">
                <view class="num">邀9人</view>
                <image src="/static/lock-1.png" class="icon" />
            </view>
            <view class="numBox">
                <view class="num">邀10人</view>
                <image src="/static/lock-1.png" class="icon" />
            </view>
            <view class="numBox">
                <view class="rewardNum">VIP1个月</view>
                <view class="rewardN">第三关</view>
                <image src="/static/qb-2.png" class="reward" />
            </view>
        </view>
    </view>
</view>