a

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>