Files
shoot-miniprograms/src/pages/user.vue

96 lines
1.6 KiB
Vue
Raw Normal View History

2025-05-01 16:17:51 +08:00
<script setup>
</script>
<template>
<view class="user-container">
<navigator open-type="navigateBack" hover-class="back-hover" class="back-btn">返回</navigator>
<view class="user-header">
<view class="avatar-box">
<image class="avatar" src="/static/avatar.png" mode="aspectFill" />
</view>
<text class="username">用户名</text>
</view>
<view class="user-info">
<view class="info-item">
<text class="label">ID</text>
<text class="value">10001</text>
</view>
<view class="info-item">
<text class="label">注册时间</text>
<text class="value">2024-01-01</text>
</view>
</view>
</view>
</template>
<style scoped>
.user-container {
padding: 2rem;
}
.user-header {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 2rem;
}
.avatar-box {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 1rem;
}
.avatar {
width: 100%;
height: 100%;
}
.username {
font-size: 1.2rem;
font-weight: bold;
}
.user-info {
background-color: #ffffff;
border-radius: 10px;
padding: 1rem;
}
.info-item {
display: flex;
justify-content: space-between;
padding: 0.8rem 0;
border-bottom: 1px solid #eee;
}
.info-item:last-child {
border-bottom: none;
}
.label {
color: #666;
}
.value {
color: #333;
}
.back-btn {
position: fixed;
top: 2rem;
left: 2rem;
padding: 0.5rem 1rem;
background-color: #007AFF;
color: #fff;
border-radius: 5px;
font-size: 14px;
}
.back-hover {
opacity: 0.8;
}
</style>