uniapp 学习笔记三个人中心

逃离我推掉我的手 2024-04-08 12:16 77阅读 0赞

uniapp 学习笔记三 个人中心

![a38605fbab844d188c33c1f5268d389f.png][]

**my.vue**

<template>
        <view class="">
            
            <view class="cont"></view>
            <view class="margin bg-fff">
                <view class="text-center">
                    <image class="avatar" src="../../static/logo.png" />
                </view>
                <view class="fs-28 text-center">
                    曹国舅
                </view>
                <view class="flex grid">
                    <view v-for="(item,index) in gridArr" class="flex flex-direction align-center padding">
                        <text :class="['iconfont margin-bottom-xs', item.icon]"></text>
                        {
       {item.name}}
                    </view>
                    <view v-for="(item,index) in gridArr" class="flex flex-direction align-center padding">
                        <text :class="['iconfont margin-bottom-xs', item.icon]"></text>
                        {
       {item.name}}
                    </view>
                </view>
            </view>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    gridArr:[
                        {
                            icon:'icon-zhangdan-xianxing',
                            name:'我的订单',
                        },{
                            icon:'icon-weicheng',
                            name:'待收货',
                        },{
                            icon:'icon-kaoqinchuqin',
                            name:'待付款',
                        },{
                            icon:'icon-yonghuziliao',
                            name:'会员等级',
                        },
                    ],
                    
                }
            },
            methods: {
                
            }
        }
    </script>
    
    <style lang="scss">
    .cont{
        background-color: #f6f6f6;
        height: 400upx;
    }
    .grid .iconfont{
        font-size: 70upx;
        color: #888888;
    }
    .avatar{
        width: 150upx;
        height: 150upx;
        border-radius: 50%;
        // transform: translateY(-50%);
        margin-top: -75upx;
    }
    .margin.bg-fff{
        margin-top: -200upx;
    }
    </style>

/* 背景色 */
    .bg-fff{
        background-color: #fff !important;
    }

[a38605fbab844d188c33c1f5268d389f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/8463a0931b1241f6be28c2ccce1534fd.png