From 1806808d112283eb894a0e61721a79462a04594b Mon Sep 17 00:00:00 2001
From: oneao <hi_itao@163.com>
Date: Wed, 8 Oct 2025 21:21:01 +0800
Subject: [PATCH] a

---
 .../src/pages/account/index.vue               | 103 +++-----
 code/base-project/base-uniapp-main/test.html  | 232 +++++++++---------
 2 files changed, 160 insertions(+), 175 deletions(-)

diff --git a/code/base-project/base-uniapp-main/src/pages/account/index.vue b/code/base-project/base-uniapp-main/src/pages/account/index.vue
index 3f543977..8d03efb6 100644
--- a/code/base-project/base-uniapp-main/src/pages/account/index.vue
+++ b/code/base-project/base-uniapp-main/src/pages/account/index.vue
@@ -23,83 +23,58 @@ function handleLoginOut() {
 <template>
   <view class="account-container">
     <view class="account-header">
-      <view class="header-bg" />
-      <view class="welcome">
-        <view class="welcome-title">
-          {{ userStore.isLogined ? '✨ 您好，欢迎回来！' : '你好，请登录！' }}
-        </view>
-        <sar-tag v-if="userStore.isLogined" theme="primary" round>
-          已登录
-        </sar-tag>
-        <sar-tag v-else theme="secondary">
-          未登录
-        </sar-tag>
-      </view>
-      <view class="info-row">
-        <sar-icon name="user" size="28rpx" color="#0064fa" />
-        <view class="info-label">
-          账号
-        </view>
-        <view class="info-value">
-          {{ userStore.isLogined ? userStore.userInfo.userid : '登录后查看' }}
-        </view>
-      </view>
-      <view class="info-row">
-        <sar-icon name="organization" size="28rpx" color="#0064fa" />
-        <view class="info-label">
-          机构码
-        </view>
-        <view class="info-value">
-          {{ userStore.isLogined ? userStore.userInfo.orgid : '登录后查看' }}
-        </view>
+      <sar-avatar background="#7f8c8d" color="#fff">
+        A
+      </sar-avatar>
+      <view class="user-info">
+        <text class="user-account">
+          123
+        </text>
+        <text class="user-orgid">
+          123
+        </text>
       </view>
     </view>
-    <sar-list style="margin-top: 32rpx;">
-      <sar-list-item title="修改密码" hover arrow />
-      <sar-list-item title="退出登录" hover arrow @click="handleLoginOut" />
-    </sar-list>
+
+    <view class="actions">
+      <sar-list-item title="修改资料" />
+      <sar-list-item title="退出登录" value="值" />
+    </view>
   </view>
 </template>
 
 <style lang="scss" scoped>
 .account-header {
-  position: relative;
+  display: flex;
+  align-items: center;
   padding: 40rpx 32rpx;
-  background-color: #fff;
-  border-bottom-left-radius: 24rpx;
-  border-bottom-right-radius: 24rpx;
-  .welcome {
-    position: relative;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 32rpx;
-    z-index: 1;
+  background-color: #2c3e50; /* 工业风深色 */
+  border-radius: 2rpx; /* 轻微卡片感 */
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
 
-    .welcome-title {
-      font-weight: 600;
+  .user-info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 32rpx;
+    color: #fff;
+
+    .user-account {
       font-size: 34rpx;
-      color: #222;
-    }
-  }
-
-  .info-row {
-    display: flex;
-    align-items: center;
-    font-size: 28rpx;
-    z-index: 1;
-    margin-top: 24rpx;
-
-    .info-label {
-      width: 120rpx;
-      color: #555;
+      font-weight: 600;
+      line-height: 42rpx;
     }
 
-    .info-value {
-      flex: 1;
-      color: #111;
-      font-weight: 500;
+    .user-orgid {
+      font-size: 28rpx;
+      margin-top: 6rpx;
+      color: #6b788e;
+      line-height: 34rpx;
     }
   }
 }
+
+.actions{
+  margin-top: 32rpx;
+}
 </style>
diff --git a/code/base-project/base-uniapp-main/test.html b/code/base-project/base-uniapp-main/test.html
index 11910410..01f29181 100644
--- a/code/base-project/base-uniapp-main/test.html
+++ b/code/base-project/base-uniapp-main/test.html
@@ -1,128 +1,138 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="zh-CN">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>个人中心</title>
-    <style>
-      body {
-        margin: 0;
-        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-        background: #f2f3f5;
-        color: #2c3e50;
-      }
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>个人中心</title>
+  <style>
+    :root {
+      --theme-color: #2c3e50;
+      --text-main: #2c3e50;
+      --text-sub: #7f8c8d;
+      --bg-light: #f4f5f7;
+      --card-bg: #ffffff;
+    }
 
-      .profile-container {
-        max-width: 420px;
-        margin: 20px auto;
-        padding: 16px;
-      }
+    body {
+      margin: 0;
+      font-family: "SF Pro Text", "Roboto", "Segoe UI", Arial, sans-serif;
+      background: var(--bg-light);
+      color: var(--text-main);
+    }
 
-      /* 用户信息头部 */
-      .profile-header {
-        display: flex;
-        align-items: center;
-        background: #fff;
-        padding: 16px;
-        border: 1px solid #dfe4ea;
-        border-radius: 4px; /* 小圆角，偏工业 */
-      }
+    /* 卡片式 Header */
+    .header-card {
+      background: var(--theme-color);
+      color: #fff;
+      margin: 20px 16px 0;
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+    }
 
-      .avatar {
-        width: 70px;
-        height: 70px;
-        background: #95a5a6;
-        color: #fff;
-        font-size: 28px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-right: 16px;
-      }
+    .avatar {
+      width: 70px;
+      height: 70px;
+      background: #7f8c8d;
+      color: #fff;
+      font-size: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: 20px;
+      flex-shrink: 0;
+    }
 
-      .user-info {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-      }
+    .user-info {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
 
-      .user-name {
-        font-size: 18px;
-        font-weight: 600;
-        margin-bottom: 6px;
-        color: #2c3e50;
-      }
+    .welcome {
+      font-size: 14px;
+      color: #c0cfd8;
+      margin-bottom: 6px;
+    }
 
-      .status {
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-        color: #2c3e50;
-      }
+    .user-name {
+      font-size: 20px;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
 
-      .status-dot {
-        width: 8px;
-        height: 8px;
-        border-radius: 50%;
-        margin-right: 6px;
-        background-color: #27ae60; /* 在线：绿色 */
-      }
+    .user-details span {
+      display: block;
+      font-size: 14px;
+      color: #d0d6db;
+      line-height: 1.6;
+    }
 
-      /* 下方信息块 */
-      .info-list {
-        margin-top: 20px;
-        background: #fff;
-        border: 1px solid #dfe4ea;
-        border-radius: 4px;
-      }
+    /* 操作按钮区 */
+    .actions {
+      margin: 28px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
 
-      .info-item {
-        display: flex;
-        justify-content: space-between;
-        padding: 14px 16px;
-        font-size: 15px;
-        border-bottom: 1px solid #e0e0e0;
-      }
+    .btn {
+      background: var(--theme-color);
+      color: #fff;
+      text-align: center;
+      padding: 14px 0;
+      font-size: 15px;
+      border: none;
+      border-radius: 2px;
+      cursor: pointer;
+      transition: 0.2s;
+    }
 
-      .info-item:last-child {
-        border-bottom: none;
-      }
+    .btn:hover {
+      background: #1e2d3a;
+    }
 
-      .info-label {
-        color: #7f8c8d;
-      }
+    .btn.secondary {
+      background: transparent;
+      color: var(--theme-color);
+      border: 1px solid var(--theme-color);
+    }
 
-      .info-value {
-        font-weight: 500;
-        color: #2c3e50;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="profile-container">
-      <!-- 顶部用户信息 -->
-      <div class="profile-header">
-        <div class="avatar">U</div>
-        <div class="user-info">
-          <div class="user-name">张三</div>
-          <div class="status">
-            <div class="status-dot"></div>
-            在线
-          </div>
-        </div>
-      </div>
+    .btn.secondary:hover {
+      background: rgba(44,62,80,0.05);
+    }
 
-      <!-- 下方账号和机构码 -->
-      <div class="info-list">
-        <div class="info-item">
-          <span class="info-label">账号</span>
-          <span class="info-value">zhangsan</span>
-        </div>
-        <div class="info-item">
-          <span class="info-label">机构码</span>
-          <span class="info-value">123456</span>
-        </div>
+    /* 底部 */
+    .footer {
+      text-align: center;
+      margin-top: 32px;
+      font-size: 12px;
+      color: #999;
+    }
+  </style>
+</head>
+<body>
+  <!-- 卡片式 Header -->
+  <div class="header-card">
+    <div class="avatar">U</div>
+    <div class="user-info">
+      <div class="welcome">欢迎登录！</div>
+      <div class="user-name">张三</div>
+      <div class="user-details">
+        <span>账号：zhangsan</span>
+        <span>机构码：A-102938</span>
       </div>
     </div>
-  </body>
+  </div>
+
+  <!-- 操作按钮区 -->
+  <div class="actions">
+    <button class="btn">修改资料</button>
+    <button class="btn secondary">退出登录</button>
+  </div>
+
+  <!-- 底部 -->
+  <div class="footer">© 2025 工业控制系统中心</div>
+</body>
 </html>