小程序页面样式设计 - 排课、权限管理、我的功能模块

<view>
    <view class='bg-image'></view>
        <view class='grid-container'>
            <view class='grid-item' bindtap='nav1'>
            <image class='grid-icon' src='/image/schedule.png'></image>
            <view class='grid-text'>排课</view>
        </view>
    </view>
        <view class='grid-container'>
            <view class='grid-item' bindtap='nav2'>
            <image class='grid-icon' src='/image/idity.png'></image>
            <view class='grid-text'>权限管理</view>
        </view>
    </view>
        <view class='grid-container'>
            <view class='grid-item' bindtap='nav3'>
            <image class='grid-icon' src='/image/my.png'></image>
            <view class='grid-text'>我的</view>
        </view>
    </view>
</view><style>
    .bg-image {
        background-image: url('/image/background.jpg');
        background-size: cover;
        height: 200px;
        margin-bottom: 20px;
    }
    .grid-container {
        display: flex;
        justify-content: space-between;
        margin: 0 20px;
    }
    .grid-item {
        flex-basis: calc(33.33% - 10px);
        background-color: #fff;
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        text-align: center;
        padding: 20px;
        cursor: pointer;
    }
    .grid-icon {
        width: 50px;
        height: 50px;
    }
    .grid-text {
        margin-top: 10px;
        font-size: 16px;
        color: #333;
    }
</style>