uniapp 学习笔记三 个人中心 逃离我推掉我的手 2024-04-08 12:16 24阅读 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
还没有评论,来说两句吧...