diff --git a/src/assets/images/HostCenter/edit.png b/src/assets/images/HostCenter/edit.png
new file mode 100644
index 0000000..a9c9f6d
Binary files /dev/null and b/src/assets/images/HostCenter/edit.png differ
diff --git a/src/assets/images/HostCenter/hostTab.png b/src/assets/images/HostCenter/hostTab.png
new file mode 100644
index 0000000..3dda0b9
Binary files /dev/null and b/src/assets/images/HostCenter/hostTab.png differ
diff --git a/src/assets/images/HostCenter/whitebox.png b/src/assets/images/HostCenter/whitebox.png
new file mode 100644
index 0000000..6764562
Binary files /dev/null and b/src/assets/images/HostCenter/whitebox.png differ
diff --git a/src/components/HostCenter/workReportBox.vue b/src/components/HostCenter/workReportBox.vue
new file mode 100644
index 0000000..a680f8d
--- /dev/null
+++ b/src/components/HostCenter/workReportBox.vue
@@ -0,0 +1,154 @@
+<template>
+  <div style="position: relative; width: 100%">
+    <img :src="whiteBox" alt="" width="100%" style="display: block" />
+    <div
+      style="
+        width: 48%;
+        height: 46%;
+        border-radius: 12px;
+        margin: 2.5%;
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: -1;
+        display: flex;
+        justify-content: flex-end;
+      "
+      :style="{ backgroundImage }"
+    >
+      <div
+        style="width: 50%; height: 50%; display: flex; justify-content: center; align-items: center"
+      >
+        <div class="type" :style="{ fontSize }">{{ type }}</div>
+      </div>
+    </div>
+    <div style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; padding: 4%">
+      <div
+        style="height: 100%; display: flex; flex-direction: column; justify-content: space-around"
+      >
+        <div class="contentTime">{{ date }}</div>
+        <div style="display: grid; grid-template-columns: repeat(2, 1fr)">
+          <div class="contentText">Target: {{ target }}</div>
+          <div class="contentText">Salary: ${{ salary }}</div>
+        </div>
+        <div class="contentText">Time(Days):{{ days }}</div>
+      </div>
+      <div
+        v-if="more"
+        class="moreBt"
+        style="position: absolute; bottom: 8%; right: 4%; color: #bb92ff; font-weight: 500"
+      >
+        More >
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import whiteBox from '@/assets/images/HostCenter/whitebox.png'
+import { computed, ref, watch } from 'vue'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: '',
+  },
+
+  date: {
+    type: String,
+    default: '',
+  },
+
+  target: {
+    type: String,
+    default: '',
+  },
+
+  salary: {
+    type: String,
+    default: '',
+  },
+
+  days: {
+    type: String,
+    default: '',
+  },
+
+  more: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const backgroundImage = ref('')
+const fontSize = ref('')
+
+watch(
+  () => props.type,
+  (newType) => {
+    if (newType == 'In progress') {
+      backgroundImage.value = 'linear-gradient(112deg, #759CFF 5.66%, #3D73FF 42.49%)'
+      fontSize.value = '1.1em'
+    }
+
+    if (newType == 'Pending') {
+      backgroundImage.value = 'linear-gradient(112deg, #FF7578 5.66%, #FF3D40 42.49%)'
+      fontSize.value = '1.1em'
+    }
+    if (newType == 'Completed') {
+      backgroundImage.value = 'linear-gradient(112deg, #75FF98 5.66%, #3DFF54 42.49%)'
+      fontSize.value = '1.1em'
+    }
+    if (newType == 'Out Of Account') {
+      backgroundImage.value = 'linear-gradient(112deg, #BDBDBD 5.66%, #AEAEAE 42.49%)'
+      fontSize.value = '0.9em'
+    }
+    return
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+  font-weight: 700;
+}
+
+.type {
+  font-size: 0.9em;
+  color: #fff;
+  font-weight: 600;
+}
+
+.contentTime {
+  font-size: 1.3em;
+}
+
+.contentText {
+  font-size: 1em;
+}
+
+.moreBt {
+  font-size: 1em;
+}
+
+@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>
diff --git a/src/views/HostCenterView.vue b/src/views/HostCenterView.vue
index 1fc826b..c48b41d 100644
--- a/src/views/HostCenterView.vue
+++ b/src/views/HostCenterView.vue
@@ -5,15 +5,42 @@
 
     <!-- 主要内容 -->
     <div class="content">
-      <!-- 用户信息卡片 -->
-      <div class="user-card">
-        <!-- APP连接状态指示 -->
-        <div v-if="isInApp() && !appConnected" class="app-status connecting">
-          <div class="status-indicator"></div>
-          <span>正在连接APP...</span>
-        </div>
+      <!-- 身份 -->
+      <div
+        style="
+          margin: 0 1%;
+          margin-bottom: 12px;
+          font-weight: 600;
+          display: flex;
+          align-items: center;
+          font-size: 1.3em;
+        "
+      >
+        My account
+        <img
+          src="/src/assets/images/HostCenter/hostTab.png"
+          alt=""
+          height="20px"
+          style="margin-left: 10px"
+        />
+      </div>
 
-        <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: 0 1%;
+          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"
@@ -23,103 +50,127 @@
             />
             <span v-else class="avatar-placeholder">{{ getAvatarPlaceholder() }}</span>
           </div>
-          <div class="user-details">
-            <h3>{{ userInfo.userNickname || userInfo.name }}</h3>
-            <p>ID: {{ userInfo.id || userInfo.id }}</p>
-          </div>
-          <button class="notification-btn" @click="goToNotification">
-            <span>✏️</span>
-          </button>
-        </div>
-
-        <!-- 账户状态标签 -->
-        <div class="account-tags">
-          <span class="tag host-tag">👑 Host</span>
-        </div>
-      </div>
-
-      <!-- My salary 区域 -->
-      <div class="salary-section">
-        <div class="salary-header">
-          <h3>My salary:</h3>
-          <button class="personal-salary-btn" @click="showDatePicker">
-            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.hostSalary }}</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>
-
-      <!-- Today's Task -->
-      <div class="task-section">
-        <div class="task-header">
-          <h3>Today's Task:</h3>
-          <button class="platform-policy-btn" @click="goToPlatformPolicy">
-            Platform Policy <span class="arrow">></span>
-          </button>
-        </div>
-
-        <!-- 任务表格 -->
-        <div class="task-table">
-          <div class="table-row table-header">
-            <div class="table-cell">Anchor type</div>
-            <div class="table-cell">Minutes</div>
-            <div class="table-cell">Gift Task</div>
-          </div>
-          <div class="table-row table-data">
-            <div class="table-cell">{{ taskInfo.anchorType }}</div>
-            <div class="table-cell">
-              <span class="minutes-progress">{{ taskInfo.minutesProgress }}</span>
-              <span class="minutes-completed">/{{ taskInfo.minutesTotal }}</span>
+          <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
+            style="width: 32px; height: 32px; border: none; background: none; font-size: 16px"
+            @click="goToNotification"
+          >
+            <img src="/src/assets/images/HostCenter/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="showDatePicker"
+            >
+              Personal Salary >
+            </button>
+          </div>
+        </div>
+
+        <!-- 历史薪资 -->
+        <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
+        class="task-section"
+        style="display: flex; flex-direction: column; justify-content: space-between; gap: 5px"
+      >
+        <div style="display: flex; justify-content: space-between">
+          <div style="font-weight: 600">Today's Task:</div>
+          <button
+            style="
+              font-weight: 500;
+              color: rgba(0, 0, 0, 0.4);
+              border: 0;
+              background-color: transparent;
+            "
+            @click="goToPlatformPolicy"
+          >
+            Platform Policy >
+          </button>
+        </div>
+        <div style="display: flex">
+          <div style="flex: 1">
+            <div
+              style="
+                width: max-content;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 5px;
+              "
+            >
+              <div style="font-weight: 600">Anchor Type</div>
+              <div style="font-weight: 600">{{ taskInfo.anchorType }}</div>
+            </div>
+          </div>
+          <div
+            style="flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px"
+          >
+            <div style="font-weight: 600">Minutes</div>
+            <div style="font-weight: 600">
+              {{ taskInfo.minutesProgress }}/{{ taskInfo.minutesTotal }}
+            </div>
+          </div>
+          <div style="flex: 1; display: flex; justify-content: flex-end">
+            <div
+              style="
+                width: max-content;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 5px;
+              "
+            >
+              <div style="font-weight: 600">Gift Task</div>
+              <div style="font-weight: 600">{{ taskInfo.giftTask }}</div>
             </div>
-            <div class="table-cell">{{ taskInfo.giftTask }}</div>
           </div>
         </div>
       </div>
 
       <!-- 进度信息 -->
-      <div class="progress-section">
-        <div class="progress-header">
-          <span class="progress-date">
-            <span v-if="loadingProgressInfo.value">Loading...</span>
-            <span v-else>{{ progressInfo.date }}</span>
-          </span>
-          <span class="progress-status">
-            <span v-if="loadingProgressInfo.value">–</span>
-            <span v-else>{{ progressInfo.status }}</span>
-          </span>
-        </div>
-
-        <div class="progress-details">
-          <div class="progress-item">
-            <span>Level: {{ loadingProgressInfo.value ? '–' : progressInfo.target }}</span>
-            <span>Salary: ${{ loadingProgressInfo.value ? '–' : progressInfo.salary }}</span>
-          </div>
-          <div class="progress-item">
-            <span>Time(Days): {{ loadingProgressInfo.value ? '–' : progressInfo.timeDays }}</span>
-          </div>
-        </div>
-      </div>
+      <workReportBox
+        style="margin-bottom: 10px"
+        :type="progressInfo.status"
+        :date="progressInfo.date"
+        :target="progressInfo.target"
+        :salary="progressInfo.salary"
+        :days="progressInfo.timeDays"
+      ></workReportBox>
 
       <!-- 操作按钮 -->
       <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>
         <!--
         <button class="action-btn withdraw-btn" @click="cashWithdraw">
           Cash<br>Withdraw
@@ -131,17 +182,17 @@
 </template>
 
 <script setup>
-import { reactive } from 'vue'
+import { onMounted, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import MobileHeader from '../components/MobileHeader.vue'
-import {usePageInitializationWithConfig} from "@/utils/pageConfig.js";
-import {isInApp} from "@/utils/appBridge.js";
-import {getTeamMemberWork} from "@/api/teamBill.js";
-import {getUserId} from "@/utils/userStore.js";
+import { usePageInitializationWithConfig } from '@/utils/pageConfig.js'
+import { isInApp } from '@/utils/appBridge.js'
+import { getTeamMemberWork } from '@/api/teamBill.js'
+import { getUserId } from '@/utils/userStore.js'
+import workReportBox from '@/components/HostCenter/workReportBox.vue'
 
 const router = useRouter()
 
-
 // 进度信息
 const progressInfo = reactive({
   date: '–',
@@ -151,7 +202,7 @@ const progressInfo = reactive({
   timeDays: '–',
   hostSalary: '–',
   agentSalary: '–',
-  total: '–'
+  total: '–',
 })
 const loadingProgressInfo = reactive({ value: false })
 
@@ -182,24 +233,25 @@ const fetchMemberWorkData = async () => {
         // 格式化状态
         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
         }
 
         // 获取level值
-        const level = latestTarget.target?.settlementResult?.level || latestTarget.target?.level || '–'
+        const level =
+          latestTarget.target?.settlementResult?.level || latestTarget.target?.level || '–'
 
         // 更新数据
         Object.assign(progressInfo, {
-          date: `${month}/${year}`,
+          date: `${month}.${year}`,
           status: formatStatus(latestTarget.status),
           target: level,
           salary: latestTarget.target?.settlementResult?.ownSalary?.toFixed(2) || '–',
-          timeDays: latestTarget.target?.effectiveDay || '–'
+          timeDays: latestTarget.target?.effectiveDay || '–',
         })
       } else {
         console.warn('No targets data available')
@@ -234,79 +286,36 @@ const transfer = () => {
   router.push('/transfer')
 }
 
-const {
-  appConnected,
-  userInfo,
-  salaryInfo,
-  taskInfo,
-  handleImageError,
-  getAvatarPlaceholder
-} = usePageInitializationWithConfig('HOST_CENTER', {
-  needsTeamInfo: true,
-  onDataLoaded: () => {
-    fetchMemberWorkData() // 新增：获取成员工作数据
-  }
-})
+const { appConnected, userInfo, salaryInfo, taskInfo, handleImageError, getAvatarPlaceholder } =
+  usePageInitializationWithConfig('HOST_CENTER', {
+    needsTeamInfo: true,
+    onDataLoaded: () => {
+      fetchMemberWorkData() // 新增：获取成员工作数据
+    },
+  })
 
+onMounted(() => {
+  console.log('userInfo:', userInfo)
+  console.log('salaryInfo:', salaryInfo)
+  console.log('userInfo:', userInfo)
+})
 </script>
 
 <style scoped>
-.host-center {
-  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
 }
 
-
-
 .content {
   padding: 16px;
   position: relative;
   z-index: 2;
 }
 
-/* 用户信息卡片 */
-.user-card {
-  background-color: white;
-  padding: 16px;
-  border-radius: 12px;
-  margin-bottom: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-}
-
-/* APP连接状态 */
-.app-status {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 12px;
-  border-radius: 8px;
-  margin-bottom: 12px;
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.app-status.connecting {
-  background-color: #fef3c7;
-  color: #d97706;
-}
-
-.app-status.connected {
-  background-color: #d1fae5;
-  color: #059669;
-}
-
-.status-indicator {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: currentColor;
-}
-
-.app-status.connecting .status-indicator {
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
 @keyframes pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
   }
   50% {
@@ -314,17 +323,11 @@ const {
   }
 }
 
-.user-info {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
 .avatar {
   width: 50px;
   height: 50px;
   border-radius: 25px;
-  background-color: #8B5CF6;
+  background-color: #8b5cf6;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -349,201 +352,14 @@ const {
   font-weight: 600;
 }
 
-.user-details {
-  flex: 1;
-}
-
-.user-details h3 {
-  margin: 0 0 4px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.user-details p {
-  margin: 0;
-  font-size: 14px;
-  color: #666;
-}
-
-.system-info {
-  font-size: 12px !important;
-  color: #8B5CF6 !important;
-  margin-top: 2px !important;
-}
-
-.edit-btn {
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: none;
-  font-size: 16px;
-  cursor: pointer;
-}
-
-.notification-btn {
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: none;
-  font-size: 16px;
-  cursor: pointer;
-}
-
-/* 身份切换标签 */
-.identity-tabs {
-  display: flex;
-  gap: 8px;
-  margin: 12px 0;
-}
-
-.identity-tab {
-  padding: 6px 12px;
-  border: 1px solid #e5e7eb;
-  border-radius: 16px;
-  background-color: white;
-  color: #666;
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.identity-tab.active {
-  background-color: #8B5CF6;
-  color: white;
-  border-color: #8B5CF6;
-}
-
-.identity-tab:not(.active):hover {
-  border-color: #8B5CF6;
-  color: #8B5CF6;
-}
-
-.identity-tab.disabled {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.identity-tab.disabled:hover {
-  border-color: #e5e7eb;
-  color: #666;
-}
-
-.identity-tab.disabled.active:hover {
-  border-color: #8B5CF6;
-  color: white;
-}
-
-.account-tags {
-  display: flex;
-  gap: 8px;
-}
-
-.tag {
-  padding: 4px 12px;
-  border-radius: 16px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.host-tag {
-  background-color: #E0E7FF;
-  color: #5B21B6;
-}
-
-.agency-tag {
-  background-color: #DBEAFE;
-  color: #1E40AF;
-}
-
-.coin-tag {
-  background-color: #FEF3C7;
-  color: #D97706;
-}
-
-.salary-tag {
-  background-color: #FEF3C7;
-  color: #D97706;
-}
-
-/* My salary 区域 */
-.salary-section {
-  background-color: white;
-  padding: 16px;
-  border-radius: 12px;
-  margin-bottom: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-}
-
-.salary-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 16px;
-}
-
-.salary-header h3 {
-  margin: 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.personal-salary-btn {
-  background: none;
-  border: none;
-  color: #8B5CF6;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  transition: all 0.2s;
-}
-
-.personal-salary-btn:hover {
-  color: #7C3AED;
-}
-
-.salary-content {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-
-.salary-item {
-  flex: 1;
-  text-align: center;
-}
-
-.salary-label {
-  margin: 0 0 8px 0;
-  font-size: 14px;
-  color: #666;
-}
-
-.salary-amount {
-  margin: 0;
-  font-size: 20px;
-  font-weight: 600;
-  color: #333;
-}
-
-.salary-separator {
-  width: 1px;
-  height: 40px;
-  background-color: #8B5CF6;
-}
-
 /* Today's Task 区域 */
 .task-section {
   background-color: white;
   padding: 16px;
   border-radius: 12px;
+  margin: 0 1%;
   margin-bottom: 12px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
 }
 
 /* 任务区域头部样式 */
@@ -576,124 +392,6 @@ const {
   margin-bottom: 12px;
 }
 
-.table-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-}
-
-.table-header {
-  background-color: #f8f9fa;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.table-data {
-  background-color: white;
-}
-
-.table-cell {
-  padding: 12px 8px;
-  text-align: center;
-  border-right: 1px solid #e5e7eb;
-  font-size: 14px;
-}
-
-.table-cell:last-child {
-  border-right: none;
-}
-
-.table-header .table-cell {
-  font-weight: 600;
-  color: #374151;
-}
-
-.table-data .table-cell {
-  color: #111827;
-}
-
-.minutes-progress {
-  color: #6B7280;
-}
-
-.minutes-completed {
-  color: #10B981;
-  font-weight: 600;
-}
-
-
-
-.platform-policy-btn {
-  background: none;
-  border: none;
-  color: #8B5CF6;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  transition: all 0.2s;
-}
-
-.platform-policy-btn:hover {
-  color: #7C3AED;
-}
-
-.platform-policy-btn .arrow {
-  font-size: 16px;
-  font-weight: bold;
-  color: #8B5CF6;
-}
-
-
-
-/* 进度信息 */
-.progress-section {
-  background-color: white;
-  padding: 16px;
-  border-radius: 12px;
-  margin-bottom: 16px;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-}
-
-.progress-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
-.progress-date {
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.progress-status {
-  background: linear-gradient(to right, #FF7578, #FF3D40);
-  color: white;
-  padding: 4px 12px;
-  border-radius: 12px;
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.progress-details {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-}
-
-.progress-item {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.progress-item span {
-  font-size: 14px;
-  color: #333;
-}
-
 /* 操作按钮 */
 .action-buttons {
   display: grid;
@@ -707,7 +405,6 @@ const {
   border-radius: 12px;
   font-size: 14px;
   font-weight: 600;
-  cursor: pointer;
   text-align: center;
   line-height: 1.2;
   transition: all 0.2s;
@@ -719,26 +416,36 @@ const {
 }
 
 .exchange-btn {
-  background-color: #FDE68A;
-  color: #D97706;
+  background: linear-gradient(135deg, #f1eca6 2.82%, #ffd22f 99.15%), #fff;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+  color: white;
 }
 
 .transfer-btn {
-  background-color: #8B5CF6;
+  background: linear-gradient(135deg, #a6aaf1 2.82%, #592fff 99.15%), #fff;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
   color: white;
 }
 
 .withdraw-btn {
-  background-color: #10B981;
   color: white;
 }
 
+@media screen and (max-width: 360px) {
+  * {
+    font-size: 10px;
+  }
+}
 
+@media screen and (min-width: 360px) {
+  * {
+    font-size: 12px;
+  }
+}
 
-/* 通用箭头样式 */
-.arrow {
-  font-size: 16px;
-  font-weight: bold;
-  color: #8B5CF6;
+@media screen and (min-width: 768px) {
+  * {
+    font-size: 24px;
+  }
 }
 </style>