bwadmin/FileCollect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

home1022

Browse Source
This commit is contained in:
bwstudio
2025-10-22 08:19:00 +08:00
parent 467b04e5b0
commit 97fbfe08d7
6040 changed files with 529099 additions and 9685 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/componentsC/layout/layout.nvue
+156
View File
@@ -0,0 +1,156 @@
<template>
<view class="u-page">
<view class="u-demo-block">
<text class="u-demo-block__title">基础使用</text>
<view class="u-demo-block__content">
<u-row customStyle="margin-bottom: 10px">
<u-col span="6">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="6">
<view class="demo-layout bg-purple"></view>
</u-col>
</u-row>
<u-row customStyle="margin-bottom: 10px">
<u-col span="4">
<view class="demo-layout bg-purple"></view>
</u-col>
<u-col span="4">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="4">
<view class="demo-layout bg-purple-dark"></view>
</u-col>
</u-row>
<u-row justify="space-between">
<u-col span="3">
<view class="demo-layout bg-purple"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
</u-row>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">分栏间隔</text>
<view class="u-demo-block__content">
<u-row justify="space-between" gutter="10">
<u-col span="3">
<view class="demo-layout bg-purple"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
</u-row>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">混合布局</text>
<view class="u-demo-block__content">
<u-row justify="space-between" gutter="10">
<u-col span="2">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="4">
<view class="demo-layout bg-purple"></view>
</u-col>
<u-col span="6">
<view class="demo-layout bg-purple-dark"></view>
</u-col>
</u-row>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">分栏偏移</text>
<view class="u-demo-block__content">
<u-row
justify="space-between"
customStyle="margin-bottom: 10px"
>
<u-col span="3" offset="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="3" offset="3">
<view class="demo-layout bg-purple"></view>
</u-col>
</u-row>
<u-row>
<u-col span="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="3" offset="3">
<view class="demo-layout bg-purple"></view>
</u-col>
</u-row>
</view>
</view>
<view class="u-demo-block">
<text class="u-demo-block__title">对齐方式</text>
<view class="u-demo-block__content">
<u-row
justify="space-between"
customStyle="margin-bottom: 10px"
>
<u-col span="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple"></view>
</u-col>
</u-row>
<u-row>
<u-col span="3">
<view class="demo-layout bg-purple-light"></view>
</u-col>
<u-col span="3">
<view class="demo-layout bg-purple"></view>
</u-col>
</u-row>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {};
},
};
</script>
<style lang="scss">
.wrap {
padding: 12px;
}
.demo-layout {
height: 25px;
border-radius: 4px;
}
.bg-purple {
background: #ced7e1;
}
.bg-purple-light {
background: #e5e9f2;
}
.bg-purple-dark {
background: #99a9bf;
}
</style>