unapp之Grid部署学习

jjxworld

已于 2023-10-27 00:17:08 修改

阅读量120

点赞数

分类专栏： WEB前端文章标签： css html javascript

于 2023-10-26 16:43:50 首次发布

本文链接：https://blog.csdn.net/jjxworld/article/details/134059810

版权

WEB前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

2023-10-27更新的HBuilder X工具，在格式方面有都有了严格的要求，否则容易报错，如粘贴的栏目问题，见如下代码。

<template>
        <view>
                    <view class="label">
                            <text class="label-text">我的工作台</text>
                        </view>
                    
                <view class="work-list">
                        <view class="list-item" v-for="(item,index) in fruit" :key="item.index">
                                <navigator url="../../subpack/material/material" hover-class="navigator-hover">
                                        <view class="item-bg">
                                                <image src="../../static/material/icon-work-hyfw.png"></image>
                                            </view>
                                        <view class="item-title">{{item}}</view>
                                    </navigator>
                            </view>
                        
                    </view>
            
            </view>
</template>

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

        }
    }
</script>

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

    .work-list {
        width: 670rpx;
        padding-bottom: 50rpx;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 22%);
        grid-gap: 4%;
        /* border: 1rpx solid green; */
    }

    .list-item {
        width: 144rpx;
        margin-bottom: 10rpx;
        /* border: 1rpx solid blue;
        background: darkgreen; */
        display: grid;
        justify-content: center;
        align-items: center;
    }

    .item-bg {
        display: flex;
        justify-content: center;
        align-items: center;
        /* border: 1rpx solid #ecf2fe;*/
        background-color: #ecf2fe;
        border-radius: 30rpx;
        width: 110rpx;
        height: 110rpx;

        image {
            width: 62rpx;
            height: 62rpx;
        }
    }

    .item-title {
        /* border: 1rpx solid #ecf2fe;*/
        text-align: center;
        font-size: 28rpx;
    }
</style>