当前位置：首页 > news >正文

uni-app项目实战笔记8--个人中心页面搭建

news 来源：原创 2025/6/15 8:29:32

在pages目录下新建user.vue，并写入下面的代码：

<template><view class="userLayout"><view class="userInfo"><view class="avatar"><image src="/static/images/xxmLogo.png" mode="aspectFill"></image></view><view class="ip">192.168.158.169</view><view class="address">来自于：广东</view></view><view class="section"><view class="list"><view class="row" ><view class="left"><uni-icons type="download-filled" size="20" color="#28b389"></uni-icons><view class="text">我的下载</view></view><view class="right"><view class="text">33</view><uni-icons type="right" size="15" color="#aaa"></uni-icons></view></view><view class="row" ><view class="left"><uni-icons type="star-filled" size="20" color="#28b389"></uni-icons><view class="text">我的评分</view></view><view class="right"><view class="text">33</view><uni-icons type="right" size="15" color="#aaa"></uni-icons></view></view><view class="row" ><view class="left"><uni-icons type="chatboxes-filled" size="20" color="#28b389"></uni-icons><view class="text">联系客服</view></view><view class="right"><view class="text">33</view><uni-icons type="right" size="15" color="#aaa"></uni-icons></view></view></view></view><view class="section"><view class="list"><view class="row" ><view class="left"><uni-icons type="notification-filled" size="20" color="#28b389"></uni-icons><view class="text">订阅更新</view></view><view class="right"><view class="text">33</view><uni-icons type="right" size="15" color="#aaa"></uni-icons></view></view><view class="row" ><view class="left"><uni-icons type="flag-filled" size="20" color="#28b389"></uni-icons><view class="text">常见问题</view></view><view class="right"><view class="text">33</view><uni-icons type="right" size="15" color="#aaa"></uni-icons></view></view></view></view></view>
</template>

CSS部分：

<style lang="scss" scoped>.userLayout{.userInfo{display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 50rpx 0;.avatar{width: 160rpx;height: 160rpx;border-radius: 50%;overflow: hidden;image{height: 100%;width: 100%;}}.ip{font-size: 44rpx;color: #333;padding: 20rpx 0 50rpx;}.address{font-size: 28rpx;color: #aaa;}}.section{width: 690rpx;margin: 50rpx auto;border: 1px solid #eee;border-radius: 10rpx;box-shadow: 0 0 30rpx rgba(0,0,0,0.05);.list{.row{display: flex;justify-content: space-between;align-items: center;padding: 0 30rpx;height: 100rpx;border-bottom: 1px solid #eee;&:last-child{border-bottom:0}.left{display: flex;align-items: center;.text{padding-left: 20rpx;color: #666;}}.right{display: flex;align-items: center;.text{font-size: 20rpx;color: #aaa;}}}}}}      
</style>

主要样式定义：

.row{display: flex;justify-content: space-between;align-items: center;padding: 0 30rpx;height: 100rpx;border-bottom: 1px solid #eee;&:last-child{border-bottom:0}
}

实现的效果：

Flex 横向布局

display: flex; → 启用 Flex 布局，子元素默认横向排列（flex-direction: row）。

align-items: center; → 子元素在垂直方向上居中对齐。

两端对齐

justify-content: space-between; → 子元素会均匀分布，第一个元素靠左，最后一个元素靠右，中间元素等间距分布。

固定高度与内边距

height: 100rpx; → 每行高度固定为 100rpx。

padding: 0 30rpx; → 左右内边距 30rpx，上下无内边距。

底部边框（分割线）

border-bottom: 1px solid #eee; → 每行底部有一条浅灰色 (#eee) 的 1px 细线。

&:last-child { border-bottom: 0 } → 最后一行移除底部边框（避免多余的分割线）。

其他CSS样式：

box-shadow: 0 0 30rpx rgba(0,0,0,0.05);

实现的效果：

阴影位置

0 0 → 阴影 不偏移（水平和垂直方向均为 0），即阴影均匀环绕在元素四周。

模糊程度

30rpx → 阴影边缘的模糊半径较大（约等于屏幕宽度的 4%，因 750rpx ≈ 100% 屏幕宽度），会产生柔和、扩散的虚化效果。

阴影颜色

rgba(0,0,0,0.05) → 阴影为纯黑色（#000），但透明度极低（5%），呈现极浅的灰色半透明效果，视觉上接近淡淡的雾状光晕。