个人中心静态界面0.8

This commit is contained in:
minimaxagent1 2025-08-13 16:56:25 +08:00
parent 9fb7ee8ed8
commit bedd88216c

View File

@ -1,9 +1,6 @@
<template> <template>
<view class="profile-page"> <view class="profile-page">
<!-- 页面标题 --> <image :src="commonEnum.FIRE_BACKGROUND" class="fire-background"></image>
<view class="page-title">
<text class="title-text">个人中心</text>
</view>
<!-- 头部用户信息 --> <!-- 头部用户信息 -->
<view class="user-header"> <view class="user-header">
@ -163,40 +160,26 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.profile-page { .profile-page {
position: relative; background: #f3f5f6;
background: #f5f5f5;
padding-bottom: 120rpx;
.fire-background { .fire-background {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 750rpx;
height: 100%; height: 592rpx;
opacity: 1; opacity: 1;
z-index: 1; z-index: -1;
}
}
//
.page-title {
text-align: center;
padding: 40rpx 0 20rpx 0;
.title-text {
font-size: 36rpx;
font-weight: bold;
color: #333;
} }
} }
// //
.user-header { .user-header {
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
padding: 40rpx; padding: 40rpx;
margin: 20rpx; margin: 270rpx 20rpx 20rpx 20rpx;
border-radius: 20rpx; border-radius: 20rpx;
position: relative; position: relative;
background: #ffffff;
.user-info { .user-info {
display: flex; display: flex;
@ -206,7 +189,7 @@ export default {
.avatar { .avatar {
width: 100rpx; width: 100rpx;
height: 100rpx; height: 100rpx;
background: rgba(255, 255, 255, 0.3); background: #817f7f;
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
@ -216,7 +199,7 @@ export default {
.avatar-text { .avatar-text {
font-size: 40rpx; font-size: 40rpx;
font-weight: bold; font-weight: bold;
color: #fff; color: #130000;
} }
} }
@ -227,17 +210,18 @@ export default {
display: block; display: block;
font-size: 32rpx; font-size: 32rpx;
font-weight: bold; font-weight: bold;
color: #fff; color: #3d3d3d;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
.user-id { .user-id {
font-size: 28rpx; font-size: 28rpx;
color: rgba(255, 255, 255, 0.8); color: #817f7f;
} }
} }
.settings-icon { .settings-icon {
margin-top: 50rpx;
width: 60rpx; width: 60rpx;
height: 60rpx; height: 60rpx;
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
@ -257,7 +241,7 @@ export default {
position: absolute; position: absolute;
top: 40rpx; top: 40rpx;
right: 40rpx; right: 40rpx;
background: rgba(255, 255, 255, 0.2); background: linear-gradient(135deg, #fffcfa 0, #ffe0c7 100%);
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
border-radius: 30rpx; border-radius: 30rpx;
display: flex; display: flex;
@ -271,7 +255,7 @@ export default {
.share-text { .share-text {
font-size: 24rpx; font-size: 24rpx;
color: #fff; color: #722b03;
} }
} }
} }