display-flex布局app菜单

---

<template>
    <view>
        <view class="label">
            <text class="label-text">我的工作台</text>
        </view>

        <view class="work-list-con">
            <view class="list-item-info" v-for="(item,index) in fruit" :key="item.index">
                <navigator url="../../subpack/material/material" hover-class="navigator-hover">
                    <view class="item-bg-icon">
                        <image src="../../static/material/icon-work-hyfw.png"></image>
                    </view>
                    <view class="item-title-infotext">{{item}}</view>
                </navigator>
            </view>

        </view>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                num: 10,
                fruit: ["小金桔","葡萄", "大柿子", "西北枸杞", "北方大红枣", "泰国榴莲", "红苹果", "新疆哈密瓜", "山东樱桃"]
            }
        },
        methods: {

        }
    }
</script>

<style lang="scss">
    .label {
        width: 670rpx;
        margin: 40rpx auto;
    }

    .work-list-con {
        display: flex;
        box-sizing: border-box;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 30rpx 30rpx;

        .list-item-info {
            width: 24%;
            flex-direction: row;
            flex-wrap: wrap;
            text-align: center;
            margin-bottom: 50rpx;
            // border: solid 1rpx red;
        }

        .item-bg-icon {

//此处与前面一篇对比，无法调整内部对齐方式，改为把image图片调整了样式。

            image {
                width: 62rpx;
                height: 62rpx;
                padding: 25rpx;
                background-color: #d7f0fd;
                border-radius: 30rpx;
            }
        }

        .item-title-infotext {
            color: #333333;
            font-size: 28rpx;
            margin-top: 10rpx;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

    }
</style>