renguanyu
/
performance-appraisal-user-phone
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
绩效考核查看详情用户端（手机版）
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.
1 Commit
1 Branch
0 Tags
621 KiB
Tree: b6df4bb62f
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'b6df4bb62f'
${ noResults }
performance-appraisal-user-.../pages/componentsC/layout/layout.nvue

157 lines
5.4 KiB
Raw Normal View History

手机版查看详情
4 years ago
<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>