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>
如图所示