Bladeren bron

feat(profile): redesign profile page with gradient header and card list

- Apply deep-blue gradient header (bg-gradient-to-br from-blue-900 to-blue-800)
- Unify account info and function menu into separate white cards (bg-white rounded-xl shadow-sm)
- Style logout button as red rounded-xl with scoped :active state
- Add hover-class tap feedback via scoped CSS
- Remove unused UniCard import

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
xuyunhui 1 week geleden
bovenliggende
commit
574496f485
1 gewijzigde bestanden met toevoegingen van 51 en 30 verwijderingen
  1. 51 30
      src/components/my/ProfileView.vue

+ 51 - 30
src/components/my/ProfileView.vue

@@ -1,17 +1,17 @@
 <template>
   <view class="app-container pb-20">
     <!-- 顶部个人信息 -->
-    <view class="bg-white px-4 pb-6 border-b border-gray-200">
+    <view class="bg-gradient-to-br from-blue-900 to-blue-800 px-4 pb-6 rounded-b-3xl">
       <StatusBar />
       <view class="flex items-center pt-3">
-        <view class="w-16 h-16 bg-primary-light rounded-full flex items-center justify-center mr-4">
-          <text class="uni-icons uniui-person-filled text-primary text-2xl"></text>
+        <view class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center mr-4">
+          <text class="uni-icons uniui-person-filled text-white text-2xl"></text>
         </view>
         <view class="flex-1 min-w-0">
-          <text class="text-gray-800 text-lg font-semibold block truncate">{{ displayName }}</text>
+          <text class="text-white text-lg font-semibold block truncate">{{ displayName }}</text>
           <view class="flex items-center flex-wrap mt-1">
-            <text v-if="primaryMeta" class="text-gray-500 text-sm mr-3">{{ primaryMeta }}</text>
-            <text v-if="secondaryMeta" class="text-gray-500 text-sm">{{ secondaryMeta }}</text>
+            <text v-if="primaryMeta" class="text-white/80 text-sm mr-3">{{ primaryMeta }}</text>
+            <text v-if="secondaryMeta" class="text-white/80 text-sm">{{ secondaryMeta }}</text>
           </view>
         </view>
       </view>
@@ -20,7 +20,8 @@
     <!-- 功能列表 -->
     <view class="px-4 py-4 gap-y-4">
       <!-- 账号信息 -->
-      <uni-card title="账号信息" icon="uniui-person-filled" :is-shadow="false">
+      <view class="bg-white rounded-xl shadow-sm p-4">
+        <text class="text-base font-semibold text-gray-800 block mb-3">账号信息</text>
         <uni-list :border="false">
           <uni-list-item title="姓名" :note="userInfo?.name || '-'" />
           <template v-if="role === 'construction'">
@@ -38,35 +39,42 @@
             <uni-list-item title="入职日期" :note="userInfo?.hireDate || '-'" />
           </template>
         </uni-list>
-      </uni-card>
+      </view>
 
       <!-- 功能菜单 -->
-      <uni-card title="功能菜单" icon="uniui-gear-filled" :is-shadow="false">
+      <view class="bg-white rounded-xl shadow-sm p-4">
+        <text class="text-base font-semibold text-gray-800 block mb-3">功能菜单</text>
         <uni-list :border="false">
-          <uni-list-item
-            title="修改密码"
-            icon="uniui-locked-filled"
-            show-arrow
-            @click="goToChangePassword"
-          />
-          <uni-list-item
-            title="通知公告"
-            icon="uniui-notification-filled"
-            show-arrow
-            @click="goToNotices"
-          />
-          <uni-list-item
-            title="帮助中心"
-            icon="uniui-help-filled"
-            show-arrow
-            @click="goToHelp"
-          />
+          <view hover-class="scale-down" :hover-start-time="0" :hover-stay-time="150" @click="goToChangePassword">
+            <uni-list-item
+              title="修改密码"
+              icon="uniui-locked-filled"
+              show-arrow
+              clickable
+            />
+          </view>
+          <view hover-class="scale-down" :hover-start-time="0" :hover-stay-time="150" @click="goToNotices">
+            <uni-list-item
+              title="通知公告"
+              icon="uniui-notification-filled"
+              show-arrow
+              clickable
+            />
+          </view>
+          <view hover-class="scale-down" :hover-start-time="0" :hover-stay-time="150" @click="goToHelp">
+            <uni-list-item
+              title="帮助中心"
+              icon="uniui-help-filled"
+              show-arrow
+              clickable
+            />
+          </view>
         </uni-list>
-      </uni-card>
+      </view>
 
       <!-- 退出登录 -->
       <view class="mt-4">
-        <button class="w-full py-3 bg-white text-danger rounded-xl font-medium border border-gray-200" @click="handleLogout">
+        <button class="w-full py-3 bg-red-500 text-white rounded-xl font-medium transition-colors logout-btn" @click="handleLogout">
           退出登录
         </button>
       </view>
@@ -78,7 +86,6 @@
 import { computed } from 'vue'
 import { useAuthStore } from '@/stores/auth'
 import StatusBar from '@/components/common/StatusBar.vue'
-import UniCard from '@/components/uni-card/uni-card.vue'
 import UniList from '@/components/uni-list/uni-list.vue'
 import UniListItem from '@/components/uni-list/uni-list-item.vue'
 
@@ -137,3 +144,17 @@ async function handleLogout() {
   }
 }
 </script>
+
+<style scoped>
+.scale-down {
+  transition: transform 0.15s ease;
+}
+.scale-down:hover,
+.scale-down:active {
+  transform: scale(0.95);
+}
+
+.logout-btn:active {
+  background-color: #dc2626;
+}
+</style>