内置样式

通过内置的样式，可以快速的实现一些常用的页面布局，提高效率。

TIP

如果你使用过tailwindcss，那么你一定会非常熟悉。

WARNING

后面所有的${x}都只有能被 2 或 5 除尽的数，如（0、2、4、5、6、8、10、12、15...）, 单位默认是 rpx

基础示例

<view class="container flex flex-col border">
  <view class="text-center font-bold py-10">标题</view>

  <view class="bg-gray px-15 py-10 rounded-full">搜索栏</view>

  <view class="wrapper grid grid-cols-4 gap-20 mt-20">
    <view class="p-15 bg-gray rounded-5">菜单1</view>
    <view class="p-15 bg-gray rounded-5">菜单2</view>
    <view class="p-15 bg-gray rounded-5">菜单3</view>
    <view class="p-15 bg-gray rounded-5">菜单4</view>
  </view>

  <scroll-view scroll-y class="flex-1 mt-20" style="height:110px;">
    <view 
      v-for="(index) in 30"
      :key="index"
      class="p-15 bg-gray rounded-5 mt-15"
    >
      列表选项{{ index }}
    </view>
  </scroll-view>
  
  <view class="flex justify-between px-12 py-8 border-top">
    <view class="width-full px-15 py-10 bg-primary text-white text-center rounded-full">按钮</view>
  </view>
</view>

标题搜索栏 菜单1菜单2菜单3菜单4 列表选项1 列表选项2 列表选项3 列表选项4 列表选项5 列表选项6 列表选项7 列表选项8 列表选项9 列表选项10 列表选项11 列表选项12 列表选项13 列表选项14 列表选项15 列表选项16 列表选项17 列表选项18 列表选项19 列表选项20 列表选项21 列表选项22 列表选项23 列表选项24 列表选项25 列表选项26 列表选项27 列表选项28 列表选项29 列表选项30按钮