From aae58fa0dea494cdb0688bc577dcbd784d9fad76 Mon Sep 17 00:00:00 2001
From: huangzijie130 <129676495+huangzijie130@users.noreply.github.com>
Date: Wed, 24 Sep 2025 19:28:44 +0800
Subject: [PATCH] =?UTF-8?q?style(=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4):=20?=
 =?UTF-8?q?=E4=BB=A3=E7=90=86=E4=B8=AD=E5=BF=83=E9=A1=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icon/bell.png       | Bin 0 -> 658 bytes
 src/views/AgencyCenterView.vue | 294 +++++++++++++++++++++------------
 2 files changed, 187 insertions(+), 107 deletions(-)
 create mode 100644 src/assets/icon/bell.png

diff --git a/src/assets/icon/bell.png b/src/assets/icon/bell.png
new file mode 100644
index 0000000000000000000000000000000000000000..0962b8d1086385fc1b7e0b94d5a7884237fba47a
GIT binary patch
literal 658
zcmV;D0&V??P)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk00009a7bBm001F4
z001F40Y#QEU;qFB0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0w+mCK~#7F?V7<+
zgFqOCKlS3#4*WYXM{iPs9fS@n0XxtRv;*zHbbwYsI?$t@a97Ak7z4Wjmfg7D%$sBq
zV0k=t`GJK<B;p$-oGE2Wg;H66-s#^tG-|VXZM3a?4%4D^qx7IuD7{zv`6K;3S9+?K
z5iF^bEIV|IBT}Uoe$AOmAAqH4BaPE|mkK5(p=zWYD7}qd<2`17#6;-6^1yJTZRu^w
zu14odSQsbOuC(Q^hIJq9F?>&8W}BuL?Z!*TqqN}0Y-iH7>HEg%y{?lV{gRa9&TP~4
zECoe|d$Swe;TT~)vl}Hi<cawW=Qtu^ezO}bvE&$gtQ(n-l!?)!qc7?1)t7A(zQ#Wi
zn}ux+U*R8<?$aEFhKY;|5!-|p_=%V<Xk*w{vl`=lvoY-R1F^|YX<zwwhK-4a4;>rB
z!T}HyK6Ikt4t%b(&P^AzF?@l)B#eyU=Uq}$f&r!pC-_gwh!psruzuIvTT`FVPllh5
zcG{dOeJQONfZ%_!ZFQ#H*M~z$woTggXP@B^XTc0gcujb`G5~$F3c~5X1tYK^4ATV$
z<?j(@2vzYR_{m!7S?PnwHYSC~zUcmcNp;jeE!Tm-(#qKGTT6p=61Jx$W(2~nSE?^m
z#+w6+&^<*lh&n(RZ{!sMVOL_#uc@vOrAPKRyCTrZ-6?iO%ZiB~HkcM3LrJLay!3N1
sJ!oyx)0dt%s`^(K4l5#&NF?&hH>-R;k;@KZSpWb407*qoM6N<$f&ok>qyPW_

literal 0
HcmV?d00001

diff --git a/src/views/AgencyCenterView.vue b/src/views/AgencyCenterView.vue
index 9b46297..babe53b 100644
--- a/src/views/AgencyCenterView.vue
+++ b/src/views/AgencyCenterView.vue
@@ -1,37 +1,117 @@
 <template>
   <div class="agency-center gradient-background-circles">
-    <MobileHeader title="Host Center" />
+    <MobileHeader title="Agency Center" />
 
     <div class="content">
+      <!-- 身份 -->
+      <div style="display: flex; justify-content: space-between">
+        <div
+          style="
+            margin: 0 1%;
+            margin-bottom: 12px;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            font-size: 1.3em;
+          "
+        >
+          My account
+          <img src="../assets/icon/agency.png" alt="" height="20px" style="margin-left: 10px" />
+        </div>
+        <img @click="goToNotification" src="../assets/icon/bell.png" height="20px" alt="" />
+      </div>
+
       <!-- 用户信息卡片 -->
-      <div class="user-card">
-        <div class="user-info">
+      <div
+        style="
+          background-color: white;
+          padding: 16px;
+          border-radius: 12px;
+          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+          margin-bottom: 12px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+        "
+      >
+        <!-- 头像信息 -->
+        <div style="display: flex; align-items: center; margin-bottom: 12px">
           <div class="avatar">
             <img
               v-if="userInfo.userAvatar"
               :src="userInfo.userAvatar"
-              :alt="userInfo.userNickname"
+              :alt="userInfo.name"
               @error="handleImageError"
             />
             <span v-else class="avatar-placeholder">{{ getAvatarPlaceholder() }}</span>
           </div>
-          <div class="user-details">
-            <h3>{{ userInfo.userNickname }}</h3>
-            <p>ID: {{ userInfo.id }}</p>
+          <div style="flex: 1">
+            <div style="margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: #333">
+              {{ userInfo.userNickname || userInfo.name }}
+            </div>
+            <div style="margin: 0; font-size: 14px; color: #666">ID: {{ userInfo.id }}</div>
           </div>
-          <button class="notification-btn" @click="goToNotification">
-            <span>🔔</span>
+          <button
+            style="width: 32px; height: 32px; border: none; background: none; font-size: 16px"
+          >
+            <img src="../assets/icon/edit.png" alt="" width="70%" />
           </button>
         </div>
+        <!-- 我的薪资 -->
+        <div>
+          <div style="display: flex; justify-content: space-between; margin-bottom: 5px">
+            <div style="font-weight: 600">My salary:</div>
+            <button
+              style="
+                font-weight: 500;
+                color: rgba(0, 0, 0, 0.4);
+                border: 0;
+                background-color: transparent;
+              "
+              @click="goToPersonalSalary"
+            >
+              Personal Salary >
+            </button>
+          </div>
+        </div>
 
-        <!-- 账户状态标签 -->
-        <div class="account-tags">
-          <span class="tag agency-tag">🏢 Agency</span>
+        <!-- 历史薪资 -->
+        <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
+          <div>
+            <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4); margin-bottom: 5px">
+              History Salary:
+            </div>
+            <div style="font-weight: 600">${{ salaryInfo.hostSalary }}</div>
+          </div>
+          <div>
+            <div style="font-weight: 500; color: rgba(0, 0, 0, 0.4); margin-bottom: 5px">
+              Current Salary:
+            </div>
+            <div style="font-weight: 600">${{ salaryInfo.currentSalary }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 标签选项 -->
+      <div style="display: flex; margin: 5px 0">
+        <div
+          style="padding: 0 5px"
+          :class="[taskTab === 'host' ? 'TabActive' : 'TabNoActive']"
+          @click="taskTab = 'host'"
+        >
+          Host
+        </div>
+        <div
+          style="padding: 0 5px"
+          :class="[taskTab === 'agency' ? 'TabActive' : 'TabNoActive']"
+          @click="taskTab = 'agency'"
+        >
+          Agency
         </div>
       </div>
 
       <!-- Host Agency 标签页 -->
-      <div class="host-agency-tabs">
+      <!-- <div class="host-agency-tabs">
         <button
           @click="taskTab = 'host'"
           :class="['host-agency-tab', { active: taskTab === 'host' }]"
@@ -47,30 +127,7 @@
             ?
           </button>
         </button>
-      </div>
-
-      <!-- My salary 区域 -->
-      <div class="salary-section">
-        <div class="salary-header">
-          <h3>My salary:</h3>
-          <button class="personal-salary-btn" @click="goToPersonalSalary">
-            Personal Salary <span class="arrow">></span>
-          </button>
-        </div>
-
-        <div class="salary-content">
-<!--暂时禁用，后面补充-->
-<!--          <div class="salary-item">
-            <p class="salary-label">History Salary:</p>
-            <p class="salary-amount">${{ salaryInfo.historySalary }}</p>
-          </div>
-          <div class="salary-separator"></div>-->
-          <div class="salary-item">
-            <p class="salary-label">Current Salary:</p>
-            <p class="salary-amount">${{ salaryInfo.currentSalary }}</p>
-          </div>
-        </div>
-      </div>
+      </div> -->
 
       <!-- Host Agency 内容 -->
       <div class="host-agency-content">
@@ -100,7 +157,7 @@
           </div>
 
           <!-- Platform Policy 链接 -->
-<!--          <div class="policy-link" @click="goToPlatformPolicy">
+          <!--          <div class="policy-link" @click="goToPlatformPolicy">
             <span>Platform Policy</span>
             <span class="arrow">></span>
           </div>-->
@@ -122,14 +179,20 @@
               <div class="card-details">
                 <div class="detail-row">
                   <span class="detail-label">Host Salary:</span>
-                  <span class="detail-value">{{ loadingTeamBill ? '–' : teamBillInfo.hostSalary }}</span>
+                  <span class="detail-value">{{
+                    loadingTeamBill ? '–' : teamBillInfo.hostSalary
+                  }}</span>
                   <span class="detail-label">Agent Salary:</span>
-                  <span class="detail-value">{{ loadingTeamBill ? '–' : teamBillInfo.agentSalary }}</span>
+                  <span class="detail-value">{{
+                    loadingTeamBill ? '–' : teamBillInfo.agentSalary
+                  }}</span>
                 </div>
                 <div class="detail-row">
                   <span class="detail-label">Total:</span>
                   <span class="detail-value">{{ loadingTeamBill ? '–' : teamBillInfo.total }}</span>
-                  <span class="status-badge">{{ loadingTeamBill ? '–' : teamBillInfo.status }}</span>
+                  <span class="status-badge">{{
+                    loadingTeamBill ? '–' : teamBillInfo.status
+                  }}</span>
                 </div>
               </div>
             </div>
@@ -153,12 +216,8 @@
 
       <!-- 操作按钮 -->
       <div class="action-buttons">
-        <button class="action-btn exchange-btn" @click="exchangeGoldCoins">
-          Exchange
-        </button>
-        <button class="action-btn transfer-btn" @click="transfer">
-          Transfer
-        </button>
+        <button class="action-btn exchange-btn" @click="exchangeGoldCoins">Exchange</button>
+        <button class="action-btn transfer-btn" @click="transfer">Transfer</button>
       </div>
     </div>
   </div>
@@ -168,9 +227,9 @@
 import { ref, reactive, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import MobileHeader from '../components/MobileHeader.vue'
-import {usePageInitializationWithConfig} from "@/utils/pageConfig.js";
-import {getTeamId} from "@/utils/userStore.js";
-import {getTeamMemberCount, getTeamBill} from "@/api/teamBill.js";
+import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
+import { getTeamId } from '@/utils/userStore.js'
+import { getTeamMemberCount, getTeamBill } from '@/api/teamBill.js'
 
 const router = useRouter()
 
@@ -187,7 +246,7 @@ const teamBillInfo = reactive({
   hostSalary: '–',
   agentSalary: '–',
   total: '–',
-  status: '–'
+  status: '–',
 })
 const loadingTeamBill = ref(false)
 
@@ -266,14 +325,14 @@ const fetchTeamBillData = async () => {
         const billBelong = latestBill.billBelong.toString()
         const year = billBelong.substring(0, 4)
         const month = billBelong.substring(4, 6)
-        
+
         // 格式化状态
         const formatStatus = (status) => {
           const statusMap = {
-            'SETTLED': 'Settled',
-            'UNPAID': 'Pending',
-            'HANG_UP': 'Pending',
-            'PAID': 'Completed'
+            SETTLED: 'Settled',
+            UNPAID: 'Pending',
+            HANG_UP: 'Pending',
+            PAID: 'Completed',
           }
           return statusMap[status] || status
         }
@@ -284,7 +343,7 @@ const fetchTeamBillData = async () => {
           hostSalary: latestBill.settleResult?.memberSalary?.toFixed(2) || '–',
           agentSalary: latestBill.settleResult?.ownSalary?.toFixed(2) || '–',
           total: latestBill.settleResult?.totalSalary?.toFixed(2) || '–',
-          status: formatStatus(latestBill.status)
+          status: formatStatus(latestBill.status),
         })
       }
     } else {
@@ -297,23 +356,31 @@ const fetchTeamBillData = async () => {
   }
 }
 
-
-const {
-  userInfo,
-  salaryInfo,
-  taskInfo,
-  handleImageError,
-  getAvatarPlaceholder
-} = usePageInitializationWithConfig('AGENCY_CENTER', {
-  needsTeamInfo: true,
-  onDataLoaded: (data) => {
-    fetchTeamMemberCount()
-    fetchTeamBillData() // 新增：获取团队账单数据
-  }
-})
+const { userInfo, salaryInfo, taskInfo, handleImageError, getAvatarPlaceholder } =
+  usePageInitializationWithConfig('AGENCY_CENTER', {
+    needsTeamInfo: true,
+    onDataLoaded: (data) => {
+      fetchTeamMemberCount()
+      fetchTeamBillData() // 新增：获取团队账单数据
+    },
+  })
 </script>
 
 <style scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
+.TabActive {
+  font-weight: 600;
+}
+
+.TabNoActive {
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.4);
+}
+
 .agency-center {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
 }
@@ -330,7 +397,7 @@ const {
   padding: 16px;
   border-radius: 12px;
   margin-bottom: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .user-info {
@@ -343,7 +410,7 @@ const {
   width: 50px;
   height: 50px;
   border-radius: 25px;
-  background-color: #8B5CF6;
+  background-color: #8b5cf6;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -394,7 +461,6 @@ const {
   cursor: pointer;
 }
 
-
 .account-tags {
   display: flex;
   gap: 8px;
@@ -408,8 +474,8 @@ const {
 }
 
 .agency-tag {
-  background-color: #DBEAFE;
-  color: #1E40AF;
+  background-color: #dbeafe;
+  color: #1e40af;
 }
 
 /* Host Agency 标签页 */
@@ -418,7 +484,7 @@ const {
   background-color: white;
   border-radius: 12px;
   margin-bottom: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   overflow: hidden;
 }
 
@@ -442,20 +508,20 @@ const {
 .host-agency-tab.active {
   background-color: white;
   color: #333;
-  border-bottom-color: #8B5CF6;
+  border-bottom-color: #8b5cf6;
   font-weight: 600;
 }
 
 .host-agency-tab:not(.active):hover {
   background-color: #e9ecef;
-  color: #8B5CF6;
+  color: #8b5cf6;
 }
 
 .host-agency-tab .help-btn {
   width: 16px;
   height: 16px;
   border-radius: 8px;
-  background-color: #8B5CF6;
+  background-color: #8b5cf6;
   color: white;
   border: none;
   font-size: 10px;
@@ -469,7 +535,7 @@ const {
   padding: 16px;
   border-radius: 12px;
   margin-bottom: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 .salary-header {
@@ -489,7 +555,7 @@ const {
 .personal-salary-btn {
   background: none;
   border: none;
-  color: #8B5CF6;
+  color: #8b5cf6;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -500,7 +566,7 @@ const {
 }
 
 .personal-salary-btn:hover {
-  color: #7C3AED;
+  color: #7c3aed;
 }
 
 .salary-content {
@@ -530,7 +596,7 @@ const {
 .salary-separator {
   width: 1px;
   height: 40px;
-  background-color: #8B5CF6;
+  background-color: #8b5cf6;
 }
 
 /* Host Agency 内容区域 */
@@ -539,7 +605,7 @@ const {
   padding: 16px;
   border-radius: 12px;
   margin-bottom: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
 /* 任务区域头部样式 */
@@ -572,7 +638,7 @@ const {
 .team-member-card {
   background-color: white;
   border-radius: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   transition: all 0.2s;
   border: 1px solid #e5e7eb;
@@ -588,8 +654,6 @@ const {
   align-items: center;
 }
 
-
-
 /* 任务表格 */
 .task-table {
   border: 1px solid #e5e7eb;
@@ -633,11 +697,11 @@ const {
 }
 
 .minutes-progress {
-  color: #6B7280;
+  color: #6b7280;
 }
 
 .minutes-completed {
-  color: #10B981;
+  color: #10b981;
   font-weight: 600;
 }
 
@@ -674,7 +738,7 @@ const {
 .card-date {
   font-size: 18px;
   font-weight: 600;
-  color: #1F2937;
+  color: #1f2937;
   margin-bottom: 8px;
 }
 
@@ -685,7 +749,7 @@ const {
   display: flex;
   align-items: center;
   gap: 4px;
-  color: #8B5CF6;
+  color: #8b5cf6;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -693,7 +757,7 @@ const {
 }
 
 .card-link:hover {
-  color: #7C3AED;
+  color: #7c3aed;
 }
 
 .card-link .arrow {
@@ -717,18 +781,18 @@ const {
 
 .detail-label {
   font-size: 14px;
-  color: #6B7280;
+  color: #6b7280;
 }
 
 .detail-value {
   font-size: 14px;
   font-weight: 500;
-  color: #1F2937;
+  color: #1f2937;
 }
 
 .status-badge {
-  background-color: #DBEAFE;
-  color: #1D4ED8;
+  background-color: #dbeafe;
+  color: #1d4ed8;
   padding: 4px 8px;
   border-radius: 12px;
   font-size: 12px;
@@ -739,7 +803,7 @@ const {
 .member-title {
   font-size: 16px;
   font-weight: 600;
-  color: #1F2937;
+  color: #1f2937;
 }
 
 .policy-link span:first-child {
@@ -748,8 +812,6 @@ const {
   color: #333;
 }
 
-
-
 /* 操作按钮 */
 .action-buttons {
   display: grid;
@@ -775,12 +837,12 @@ const {
 }
 
 .exchange-btn {
-  background-color: #FDE68A;
-  color: #D97706;
+  background-color: #fde68a;
+  color: #d97706;
 }
 
 .transfer-btn {
-  background-color: #8B5CF6;
+  background-color: #8b5cf6;
   color: white;
 }
 
@@ -788,7 +850,7 @@ const {
 .platform-policy-btn {
   background: none;
   border: none;
-  color: #8B5CF6;
+  color: #8b5cf6;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
@@ -799,19 +861,37 @@ const {
 }
 
 .platform-policy-btn:hover {
-  color: #7C3AED;
+  color: #7c3aed;
 }
 
 .platform-policy-btn .arrow {
   font-size: 16px;
   font-weight: bold;
-  color: #8B5CF6;
+  color: #8b5cf6;
 }
 
 /* 通用箭头样式 */
 .arrow {
   font-size: 16px;
   font-weight: bold;
-  color: #8B5CF6;
+  color: #8b5cf6;
+}
+
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
+
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
 }
 </style>