Realization of the activity status area and voting area of the vote selection activity applet
activity area
<!-- 活动情况区域 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 -->
voting area
Grid layout is grid layout, which is a new CSS layout model. It is good at dividing a page into several main areas, and defining the size, position, hierarchy and other relationships of these areas.
Using the Grid layout, we can easily implement a layout similar to the one shown below:
<!-- 投票区域 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 -->When it comes to layout, we will think of flex layout. Some people even think that there is flex layout. It seems that there is no need to understand Grid layout.
But there is a substantial difference between flex layout and Grid layout, that is, flex layout is a one-dimensional layout, and Grid layout is a two-dimensional layout.
flex layout can only handle the layout of elements in one dimension at a time, either row or column. Grid layout is to divide the container into "rows" and "columns", and generate grids one by one. We can place grid elements in positions related to these rows and columns, so as to achieve the purpose of our layout.
Grid layout is far more powerful than flex layout!
