132 lines
2.8 KiB
Vue
132 lines
2.8 KiB
Vue
<template>
|
|
<view class="mine-container">
|
|
<!-- 顶部个人信息栏 -->
|
|
<view class="header-section">
|
|
<view class="user-info">
|
|
<view class="avatar">
|
|
<uni-icons type="person-filled" size="40" color="#ffffff"></uni-icons>
|
|
</view>
|
|
<view class="user-details">
|
|
<text class="user-name">{{ userInfo.name }}</text>
|
|
<text class="user-id">ID: {{ userInfo.userId }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 内容区域 -->
|
|
<view class="content-section">
|
|
<view class="info-card">
|
|
<view class="info-item">
|
|
<text class="info-label">手机号</text>
|
|
<text class="info-value">{{ userInfo.phone }}</text>
|
|
</view>
|
|
<view class="info-divider"></view>
|
|
<view class="info-item">
|
|
<text class="info-label">邮箱</text>
|
|
<text class="info-value">{{ userInfo.email }}</text>
|
|
</view>
|
|
<view class="info-divider"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
// 模拟个人信息
|
|
const userInfo = ref({
|
|
name: '智聪',
|
|
userId: '10001',
|
|
phone: '138****5678',
|
|
email: 'qdintc@126.com'
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background-color: #f5f7fa;
|
|
}
|
|
|
|
.mine-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: #f5f7fa;
|
|
overflow-y: auto;
|
|
|
|
.header-section {
|
|
padding: 40rpx 32rpx;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.avatar {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
border-radius: 50rpx;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
.user-details {
|
|
flex: 1;
|
|
|
|
.user-name {
|
|
display: block;
|
|
color: #ffffff;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.user-id {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.content-section {
|
|
padding: 32rpx;
|
|
|
|
.info-card {
|
|
background: #ffffff;
|
|
border-radius: 16rpx;
|
|
padding: 32rpx;
|
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
|
|
|
.info-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 24rpx 0;
|
|
|
|
.info-label {
|
|
color: #666;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.info-value {
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
|
|
.info-divider {
|
|
height: 1rpx;
|
|
background-color: #f0f0f0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|