uni-app学习笔记-引入全局uni.css和flex布局（七）

@import './common/uni.css';

<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>