|
|
@@ -7,12 +7,38 @@
|
|
|
</block>
|
|
|
<block v-else>
|
|
|
<view class="ghs_list_page flex-col" v-if="!$util.isEmpty(list.data)">
|
|
|
- <view style="background-color:white;margin-bottom:20upx;display: flex;flex-direction: row;justify-content: space-around;">
|
|
|
- <button class="admin-button-com mini-btn blue top-button" @click="">修改密码</button>
|
|
|
- <button class="admin-button-com mini-btn blue top-button" @click="">修改手机号</button>
|
|
|
- <button class="admin-button-com mini-btn blue top-button" @click="">我的地址</button>
|
|
|
- <button class="admin-button-com mini-btn blue top-button" @click="">采购统计</button>
|
|
|
- <button class="admin-button-com mini-btn blue top-button" @click="logout()">退出</button>
|
|
|
+ <!-- 个人中心版块 -->
|
|
|
+ <view class="profile-section">
|
|
|
+ <!-- 个人信息头部 -->
|
|
|
+ <view class="profile-header">
|
|
|
+ <view class="avatar-container">
|
|
|
+ <image class="avatar" src="/static/images/default-avatar.png" mode="aspectFill" />
|
|
|
+ </view>
|
|
|
+ <view class="user-info">
|
|
|
+ <text class="username">刘小明</text>
|
|
|
+ <text class="user-id">ID 31548</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 功能按钮网格 -->
|
|
|
+ <view class="function-grid">
|
|
|
+ <view class="function-item" @click="">
|
|
|
+ <text class="function-icon">📊</text>
|
|
|
+ <text class="function-text">统计</text>
|
|
|
+ </view>
|
|
|
+ <view class="function-item" @click="">
|
|
|
+ <text class="function-icon">📍</text>
|
|
|
+ <text class="function-text">地址</text>
|
|
|
+ </view>
|
|
|
+ <view class="function-item" @click="">
|
|
|
+ <text class="function-icon">📱</text>
|
|
|
+ <text class="function-text">改号码</text>
|
|
|
+ </view>
|
|
|
+ <view class="function-item" @click="logout()">
|
|
|
+ <text class="function-icon">🚪</text>
|
|
|
+ <text class="function-text">退出</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
<view class="ghs_list_area flex-col justify-end">
|
|
|
<view class="ghs_box flex-col justify-end" v-for="(item, index) in list.data" :key="item.id">
|
|
|
@@ -249,6 +275,86 @@ page {
|
|
|
background-color: rgba(255, 255, 255, 1);
|
|
|
width: 750upx;
|
|
|
|
|
|
+ // 个人中心版块样式
|
|
|
+ .profile-section {
|
|
|
+ background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
|
|
|
+ padding: 30upx 25upx;
|
|
|
+ border-radius: 0 0 20upx 20upx;
|
|
|
+ border-bottom: 1upx solid #e8eaff;
|
|
|
+
|
|
|
+ .profile-header {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 30upx;
|
|
|
+
|
|
|
+ .avatar-container {
|
|
|
+ position: relative;
|
|
|
+ margin-right: 25upx;
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 100upx;
|
|
|
+ height: 100upx;
|
|
|
+ border-radius: 50upx;
|
|
|
+ border: 2upx solid #e8eaff;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-info {
|
|
|
+ flex: 1;
|
|
|
+
|
|
|
+ .username {
|
|
|
+ display: block;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 42upx;
|
|
|
+ font-weight: 600;
|
|
|
+ margin-bottom: 6upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .user-id {
|
|
|
+ display: block;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 26upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .function-grid {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ padding: 0 20upx;
|
|
|
+
|
|
|
+ .function-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100upx;
|
|
|
+ height: 90upx;
|
|
|
+ background: rgba(255, 255, 255, 0.8);
|
|
|
+ border-radius: 15upx;
|
|
|
+ border: 1upx solid #f0f0f0;
|
|
|
+ transition: all 0.2s ease;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: scale(0.95);
|
|
|
+ background: rgba(240, 242, 255, 0.9);
|
|
|
+ }
|
|
|
+
|
|
|
+ .function-icon {
|
|
|
+ font-size: 32upx;
|
|
|
+ margin-bottom: 6upx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .function-text {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 20upx;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.top-button {
|
|
|
padding-top: 18upx;
|
|
|
padding-bottom: 18upx;
|
