1:把uni.css放在公共文件夹里面
2:打开App.vue,引入全局uni.css
@import './common/uni.css';
3:实现flex布局样式
<template>
<view>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-flex uni-row">
<view class="text" style="width: 200upx;height: 220upx;display: -webkit-flex;display: flex; -webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
</view>
<view class="uni-flex uni-column" style="-webkit-flex: 1;flex: 1;-webkit-justify-content: space-between;justify-content: space-between;">
<view class="uni-flex uni-row">
<view class="text" style="-webkit-flex: 1;flex: 1;">迟到</view>
<view class="text" style="-webkit-flex: 1;flex: 1;">早退</view>
</view>
<view class="uni-flex uni-row">
<view class="text" style="-webkit-flex: 1;flex: 1;">缺勤</view>
<view class="text" style="-webkit-flex: 1;flex: 1;">正常</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style>
.text {
margin: 1upx 10upx;
padding: 0 20upx;
background-color: #ebebeb;
height: 110upx;
line-height: 110upx;
text-align: center;
color: #777;
font-size: 26upx;
}
</style>
如图所示