kaifabu/RentWeAppFront
2
0
Fork 0
mirror of http://36.133.248.69:3088/admin/RentWeAppFront.git synced 2026-03-07 17:32:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

个人中心样式改版完成

Browse Source
This commit is contained in:
wenqi.peng
2025-12-30 11:25:41 +08:00
parent 6413160b63
commit fb6acc71be
15 changed files with 90 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
pages/center/center.vue
View File

@@ -1,6 +1,16 @@
<template>
<view class="user-center">
<u-navbar title="个人中心" :is-back="false" :background="background" title-color="#2D2B2C"></u-navbar>
<customNavbar
title="个人中心"
ref="navbar"
:is-transparent="navbarStyle.isTransparent"
:bg-color="navbarStyle.bgColor"
:text-color="navbarStyle.textColor"
:opacity="navbarStyle.opacity"
:extra-icons="navbarStyle.extraIcons"
:show-home="false"
:show-back="false"
/>
<!-- 顶部用户信息 -->
<view class="user-header">
<u-avatar :src="avatar" size="133"></u-avatar>
@@ -21,8 +31,10 @@
<view class="contract-view">
<!-- 我的合同和我的预约 -->
<view class="contract-appointment">
<view class="card" @click="clickNav('pages/center/history')">
<view class="contract-appointment">
<view class="card" @click="clickNav('pages/center/contract')">
<view class="card-title">我的合同</view>
<view class="card-main">
<view class="card-content">
<view class="card-number">5</view>
<view class="card-type">份合同</view>
@@ -30,19 +42,21 @@
<view class="card-icon">
<image src="/static/icon/sign.png" mode="widthFix"></image>
</view>
<view class="card-title">我的合同</view>
</view>
<view class="card" @click="clickNav('pages/reserve/reserveRecords')">
</view>
<view class="card" @click="clickNav('pages/reserve/reserveRecords')">
<view class="card-title">我的预约</view>
<view class="card-main">
<view class="card-content">
<view class="card-number">3</view>
<view class="card-type">个预约</view>
</view>
<view class="card-icon">
<image src="/static/icon/预约.png" mode="widthFix"></image>
<image src="/static/icon/sign.png" mode="widthFix"></image>
</view>
<view class="card-title">我的预约</view>
</view>
</view>
</view>
<!-- 我的服务 -->
<view class="my-service">
@@ -56,7 +70,7 @@
</view>
<view class="service-item" @click="clickNav('pages/center/myLease')">
<view class="service-icon">
<image src="/static/icon/住房C.png" mode="widthFix"></image>
<image src="/static/icon/租赁资产.png" mode="widthFix"></image>
</view>
<view class="service-name">租赁资产</view>
</view>
@@ -169,9 +183,13 @@
url: "pages/wae/waeRecords"
}
],
background: {
// 渐变色
backgroundImage: 'linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);'
// 导航栏样式控制
navbarStyle: {
isTransparent: true,
bgColor: '#ffffff',
textColor: '#000000',
opacity: 0,
extraIcons: [] // 右侧额外图标
},
}
},
@@ -312,8 +330,12 @@
<style lang="scss" scoped>
.user-center {
background: linear-gradient(-90deg, #F9DED9 0%, #F8DFC0 99%);
min-height: 100vh;
padding-top: 120rpx;
background-image: url(https://eyidu.ydszw.cn/static/img/test/my-bg.png);
background-color: #fff;
background-repeat: space;
background-size: 750rpx 731rpx;
min-height: 100vh;
}
/* 用户信息头 */
@@ -332,24 +354,24 @@
.user-name {
display: flex;
align-items: center;
margin-bottom: 20rpx;
margin-bottom: 10rpx;
}
.name-text {
font-size: 48rpx;
font-size: 38rpx;
font-weight: 500;
color: #2D2B2C;
margin-right: 16rpx;
}
.auth-tag {
font-size: 30rpx;
font-size: 26rpx;
color: #86868C;
padding: 4rpx 12rpx;
}
.user-type {
font-size: 30rpx;
font-size: 26rpx;
color: #86868C;
}
@@ -361,7 +383,8 @@
.contract-view{
width: 96%;
margin: 0 auto;
background: linear-gradient(0deg, #FCFAF5 0%, #FAECCE 100%);
background-image: url("https://eyidu.ydszw.cn/static/img/test/my-bg2.png");//只支持网络图片，请自行上传至图片服务器
background-repeat: round;
border-radius: 10rpx;
}
@@ -375,45 +398,50 @@
.card {
flex: 1;
background-color: #fff;
border-radius: 12rpx;
padding: 30rpx 20rpx;
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
border-radius: 10rpx;
padding: 24rpx;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.card-content {
text-align: center;
margin-bottom: 20rpx;
}
.card-number {
font-size: 48rpx;
font-weight: 600;
color: #FF6B35;
}
.card-type {
font-size: 28rpx;
color: #666;
margin-top: 8rpx;
}
.card-icon {
margin-bottom: 16rpx;
}
.card-icon image {
width: 80rpx;
height: 80rpx;
}
.card-title {
font-size: 30rpx;
font-weight: 500;
color: #333;
color: #222222;
}
.card-main {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.card-content {
flex: 1;
}
.card-number {
font-size: 48rpx;
font-weight: 600;
color: #EC712E;
margin-bottom: 8rpx;
}
.card-type {
font-size: 26rpx;
color: #86868C;
}
.card-icon {
position: absolute;
right: 0;
bottom: -20rpx;
}
.card-icon image {
width: 120rpx;
height: 111rpx;
}
/* 我的服务 */
@@ -442,7 +470,7 @@
}
.service-icon {
margin-bottom: 16rpx;
// margin-bottom: 16rpx;
}
.service-icon image {
@@ -459,8 +487,6 @@
.common-tools {
width: 96%;
margin: 0 auto;
background-color: #fff;
border-radius: 10rpx;
padding: 30rpx 40rpx;
}
@@ -472,14 +498,15 @@
}
.tools-list {
margin-top: 20rpx;
margin-top: 50rpx;
margin-left: -20rpx;
display: flex;
flex-flow: row wrap;
}
.tool-item {
width: 25%;
margin-bottom: 20rpx;
margin-bottom: 40rpx;
display: flex;
flex-direction: column;
align-items: center;