You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

74 lines
1.3 KiB

<template>
<cl-page :padding="20">
<cl-card label="基础用法">
<cl-row :gutter="20">
<cl-col :span="4" @tap="onTap">
<view class="item">4</view>
</cl-col>
<cl-col :span="12">
<view class="item">12</view>
</cl-col>
<cl-col :span="8">
<view class="item">8</view>
</cl-col>
</cl-row>
<cl-row :gutter="20">
<cl-col :span="8">
<view class="item">8</view>
</cl-col>
<cl-col :span="8">
<view class="item">8</view>
</cl-col>
<cl-col :span="8">
<view class="item">8</view>
</cl-col>
</cl-row>
<cl-row :gutter="20">
<cl-col :span="14">
<view class="item">14</view>
</cl-col>
<cl-col :span="4">
<view class="item">4</view>
</cl-col>
<cl-col :span="6">
<view class="item">6</view>
</cl-col>
</cl-row>
<cl-row :gutter="20" type="flex" justify="space-between">
<cl-col :span="6">
<view class="item">6</view>
</cl-col>
<cl-col :span="6">
<view class="item">6</view>
</cl-col>
</cl-row>
</cl-card>
</cl-page>
</template>
<script setup lang="ts">
function onTap() {
console.log("tap");
}
</script>
<style lang="scss" scoped>
.item {
background-color: #f6f7fa;
text-align: center;
font-size: 28rpx;
height: 60rpx;
line-height: 60rpx;
margin: 10rpx 0;
}
</style>