投票评选活动小程序的活动情况区域和投票区域实现

票评选活动小程序的活动情况区域和投票区域实现

活动情况区域

<!-- 活动情况区域 start -->
<view class="situation-box">
    <view class="situation-box-in">
        <text class="icon-time"></text>
        <text class="text-lg">距活动结束</text>
        <text class="cu-tag">10</text> 天
    </view>
    <view class="situation-box-in">
        <text class="icon-friend"></text>
        <text class="text-lg">已有3人参与</text>
    </view>
</view>
<!-- 活动情况区域 end -->

投票区域

Grid 布局即网格布局，是一种新的 CSS 布局模型，比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。

利用 Grid 布局，我们可以轻松实现类似下图布局：

<!-- 投票区域 start -->
<view class='grid col-2'>
    <view class='padding-sm' wx:for="{{30}}" wx:key="index">
        <view class='vote-box'>
            <view class="vote-num">
                {{index+1}}号
            </view>
            <view>
                <image src="/images/{{index+2}}.jpg" mode='widthFix' class="vote-img"></image>
            </view>
            <view class="vote-title">b{{index+2}}</view>
            <view class='vote-content'>请大家投我一票吧，谢谢大家了</view>
            <view class="bill-num">
                <text class="text-orange">{{2*index+2}}</text>票
            </view>
            <view class="vote-btn-box">
                <button catchtap="goToVote" class="cu-btn"> 投票 </button>
            </view>
        </view>
    </view>
</view>
<!-- 投票区域 end -->

讲到布局，我们就会想到 flex 布局，甚至有人认为竟然有 flex 布局了，似乎没有必要去了解 Grid 布局。

但 flex 布局和 Grid 布局有实质的区别，那就是 flex 布局是一维布局，Grid 布局是二维布局。

flex 布局一次只能处理一个维度上的元素布局，一行或者一列。Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格，我们可以将网格元素放在与这些行和列相关的位置上，从而达到我们布局的目的。

Grid 布局远比 flex 布局强大！