feat(用户中心): 实现个人中心页面布局及功能
添加用户信息展示、消息中心、项目存档和退出登录功能 实现跳转到项目存档页面的导航逻辑 添加样式布局和响应式设计
This commit is contained in:
parent
7959a0bd7d
commit
dcb0ab1377
|
|
@ -1,3 +1,94 @@
|
|||
<!-- 个人中心 -->
|
||||
<template>
|
||||
<div>用户中心</div>
|
||||
<view class="PageBox">
|
||||
<view class="CardBox">
|
||||
<view class="imgBox">
|
||||
<u-image src="https://img95.699pic.com/photo/60054/8564.jpg_wh300.jpg" shape="circle" width="100rpx"
|
||||
height="100rpx" />
|
||||
</view>
|
||||
<view class="usrInfoBox">
|
||||
<view class="FlexBox Title">{{ userInfo.name }}-{{ userInfo.position }} </view>
|
||||
<view class="FlexBox">所属单位:{{ userInfo.unit }} </view>
|
||||
<view class="FlexBox">联系方式:{{ userInfo.phone }} </view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="CardBox">
|
||||
<u-icon name="bell-fill" size="32rpx" color="#0088FF" />
|
||||
<view class="TxtBox">消息中心</view>
|
||||
</view>
|
||||
<view class="CardBox" @click="toArchivesRoom">
|
||||
<u-icon name="file-text-fill" size="32rpx" color="#0088FF" />
|
||||
<view class="TxtBox">项目存档</view>
|
||||
</view>
|
||||
<view class="CardBox">
|
||||
<u-icon name="arrow-leftward" size="32rpx" color="#0088FF" />
|
||||
<view class="TxtBox">退出登录</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
|
||||
const userInfo = ref({
|
||||
id: '123456', // 用户ID
|
||||
name: '张三', // 用户名
|
||||
phone: '13800138000', // 手机号
|
||||
email: 'zhangsan@example.com', // 邮箱
|
||||
position: '工程师', // 职位
|
||||
unit: '中国建筑集团有限公司', // 所属单位
|
||||
})
|
||||
|
||||
|
||||
// 跳转到项目存档页面
|
||||
const toArchivesRoom = () => {
|
||||
uni.navigateTo({
|
||||
url: '/pages/ArchivesRoom/index',
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.FlexBox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.Title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
|
||||
.PageBox {
|
||||
background-color: #fff;
|
||||
height: calc(100vh - 120rpx);
|
||||
overflow: hidden;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
|
||||
.CardBox {
|
||||
width: 100%;
|
||||
padding: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 20rpx;
|
||||
background-color: #F9FAFB;
|
||||
border-radius: 10rpx;
|
||||
margin-bottom: 40rpx;
|
||||
box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.imgBox {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue