feat(主播中心): 调整样式，更新图源，新增“提现”按钮

src/views/HostCenter/index.vue

@@ -11,7 +11,7 @@
     />
 
     <!-- 主要内容 -->
-    <div class="content">
+    <div style="padding: 16px; position: relative; z-index: 2">
       <!-- 身份 -->
       <div class="section-title">
         {{ t('my_account') }}
@@ -19,40 +19,98 @@
       </div>
 
       <!-- 用户信息卡片 -->
-      <div class="user-card">
+      <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 class="user-header">
+        <div style="display: flex; align-items: center; margin-bottom: 12px">
+          <!-- 头像 -->
           <div class="avatar">
             <img
               v-if="userInfo.userAvatar"
               :src="userInfo.userAvatar"
               :alt="userInfo.name"
+              style="width: 100%; height: 100%; object-fit: cover; border-radius: 25px"
               @error="handleImageError"
             />
-            <span v-else class="avatar-placeholder">{{ getAvatarPlaceholder() }}</span>
+            <span v-else style="color: white; font-size: 20px; font-weight: 600">{{
+              getAvatarPlaceholder()
+            }}</span>
           </div>
+
+          <!-- 信息 -->
           <div class="user-info">
-            <div class="user-name">
+            <div
+              style="
+                margin: 0 0 4px 0;
+                font-weight: 600;
+                color: #333;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                width: 100%;
+              "
+            >
               {{ userInfo.userNickname || userInfo.name }}
             </div>
-            <div class="user-id">{{ t('user_id_prefix') }} {{ userInfo.id }}</div>
+            <div style="margin: 0; font-size: 0.9em; color: #666">
+              {{ t('user_id_prefix') }} {{ userInfo.id }}
+            </div>
           </div>
-          <button class="edit-btn" @click="goToNotification">
+
-            <img src="../../assets/icon/edit.png" alt="" class="edit-icon" />
+          <!-- 跳转按钮 -->
+          <button
+            style="
+              width: 1.5em;
+              border: none;
+              background: none;
+
+              display: flex;
+              justify-content: center;
+              align-items: center;
+            "
+            @click="goToNotification"
+          >
+            <img
+              v-smart-img
+              src="../../assets/icon/edit.png"
+              alt=""
+              style="display: block; width: 70%; object-fit: contain"
+            />
           </button>
         </div>
+
         <!-- 我的薪资 -->
-        <div class="salary-section">
+        <div style="margin-bottom: 10px">
-          <div class="salary-header">
+          <div style="display: flex; justify-content: space-between; margin-bottom: 5px">
-            <div class="salary-title">{{ t('my_salary') }}</div>
+            <div style="font-weight: 600">{{ t('my_salary') }}</div>
-            <button class="salary-link" @click="showDatePicker">
+            <button
+              style="
+                font-weight: 500;
+                color: rgba(0, 0, 0, 0.4);
+                border: 0;
+                background-color: transparent;
+                cursor: pointer;
+              "
+              @click="showDatePicker"
+            >
               {{ t('personal_salary') }} >
             </button>
           </div>
         </div>
 
         <!-- 历史薪资 -->
-        <div class="salary-grid">
+        <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px">
           <div class="salary-item">
             <div class="salary-label">{{ t('history_salary') }}</div>
             <div class="salary-value">${{ historySalary.toFixed(2) }}</div>
@@ -65,14 +123,36 @@
       </div>
 
       <!-- 今日任务 -->
-      <div class="task-card">
+      <div
-        <div class="task-header">
+        style="
-          <div class="task-title">{{ t('todays_task') }}</div>
+          display: flex;
-          <button class="policy-link" @click="goToPlatformPolicy">
+          flex-direction: column;
+          justify-content: space-between;
+          gap: 5px;
+          background-color: white;
+          padding: 3%;
+          border-radius: 12px;
+          margin: 0 1%;
+          margin-bottom: 12px;
+          box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+        "
+      >
+        <div style="display: flex; justify-content: space-between; margin-bottom: 10px">
+          <div style="font-weight: 600">{{ t('todays_task') }}</div>
+          <button
+            style="
+              font-weight: 500;
+              color: rgba(0, 0, 0, 0.4);
+              border: 0;
+              background-color: transparent;
+              cursor: pointer;
+            "
+            @click="goToPlatformPolicy"
+          >
             {{ t('platform_policy') }} >
           </button>
         </div>
-        <div class="task-content">
+        <div style="display: flex; justify-content: space-between">
           <div class="task-item">
             <div class="task-label">{{ t('host_type') }}</div>
             <div class="task-value">{{ taskInfo.anchorType }}</div>
@@ -90,7 +170,7 @@
 
       <!-- 进度信息 -->
       <workReportBox
-        class="work-report"
+        style="margin-bottom: 10px"
         :type="progressInfo.status"
         :date="progressInfo.date"
         :target="progressInfo.target"
@@ -100,13 +180,28 @@
       ></workReportBox>
 
       <!-- 操作按钮 -->
-      <div class="action-buttons">
+      <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2vw; margin: 0 1%">
-        <button class="action-btn exchange-btn" @click="exchangeGoldCoins">
+        <button
+          class="action-btn"
+          style="background: linear-gradient(135deg, #f1eca6 2.82%, #ffd22f 99.15%), #fff"
+          @click="exchangeGoldCoins"
+        >
           {{ t('exchange') }}
         </button>
-        <button class="action-btn transfer-btn" @click="transfer">
+        <button
+          class="action-btn"
+          style="background: linear-gradient(135deg, #a6aaf1 2.82%, #592fff 99.15%), #fff"
+          @click="transfer"
+        >
           {{ t('transfer') }}
         </button>
+        <button
+          class="action-btn"
+          style="background: linear-gradient(135deg, #a6f1b2 2.82%, #2fff3d 99.15%), #fff"
+          @click="withdraw"
+        >
+          {{ t('withdraw') }}
+        </button>
       </div>
     </div>
   </div>
@@ -244,10 +339,16 @@ const exchangeGoldCoins = () => {
   router.push('/exchange-gold-coins')
 }
 
+// 前往转账
 const transfer = () => {
   router.push('/transfer')
 }
 
+// 前往提现
+const withdraw = () => {
+  router.push('/cash-withdraw')
+}
+
 const { appConnected, userInfo, salaryInfo, taskInfo, handleImageError, getAvatarPlaceholder } =
   usePageInitializationWithConfig('HOST_CENTER', {
     needsTeamInfo: true,
@@ -274,12 +375,6 @@ onMounted(() => {
   background-image: url(../../assets/images/secondBg.png);
 }
 
-.content {
-  padding: 16px;
-  position: relative;
-  z-index: 2;
-}
-
 .section-title {
   margin: 0 1%;
   margin-bottom: 12px;
@@ -294,24 +389,6 @@ onMounted(() => {
   margin-left: 10px;
 }
 
-.user-card {
-  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;
-}
-
-.user-header {
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-}
-
 .avatar {
   width: 50px;
   height: 50px;
@@ -328,80 +405,11 @@ onMounted(() => {
   position: relative;
 }
 
-.avatar img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  border-radius: 25px;
-}
-
-.avatar .avatar-placeholder {
-  color: white;
-  font-size: 20px;
-  font-weight: 600;
-}
-
 .user-info {
   flex: 1;
   min-width: 0;
 }
 
-.user-name {
-  margin: 0 0 4px 0;
-  font-weight: 600;
-  color: #333;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  width: 100%;
-}
-
-.user-id {
-  margin: 0;
-  font-size: 0.9em;
-  color: #666;
-}
-
-.edit-btn {
-  width: 32px;
-  height: 32px;
-  border: none;
-  background: none;
-  font-size: 16px;
-}
-
-.edit-icon {
-  width: 70%;
-}
-
-.salary-section {
-  margin-bottom: 10px;
-}
-
-.salary-header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 5px;
-}
-
-.salary-title {
-  font-weight: 600;
-}
-
-.salary-link {
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.4);
-  border: 0;
-  background-color: transparent;
-  cursor: pointer;
-}
-
-.salary-grid {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 10px;
-}
-
 .salary-item {
   display: flex;
   flex-direction: column;
@@ -417,42 +425,6 @@ onMounted(() => {
   font-weight: 600;
 }
 
-.task-card {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  gap: 5px;
-  background-color: white;
-  padding: 3%;
-  border-radius: 12px;
-  margin: 0 1%;
-  margin-bottom: 12px;
-  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
-}
-
-.task-header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
-}
-
-.task-title {
-  font-weight: 600;
-}
-
-.policy-link {
-  font-weight: 500;
-  color: rgba(0, 0, 0, 0.4);
-  border: 0;
-  background-color: transparent;
-  cursor: pointer;
-}
-
-.task-content {
-  display: flex;
-  justify-content: space-between;
-}
-
 .task-item {
   display: flex;
   flex-direction: column;
@@ -469,23 +441,14 @@ onMounted(() => {
   font-weight: 600;
 }
 
-.work-report {
-  margin-bottom: 10px;
-}
-
-/* 操作按钮 */
-.action-buttons {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  margin: 0 1%;
-}
-
 .action-btn {
-  padding: 14px 12px;
+  border-radius: 4px;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+  color: white;
+
+  height: 36px;
   border: none;
-  border-radius: 12px;
+  font-size: 1em;
-  font-size: 14px;
   font-weight: 600;
   text-align: center;
   line-height: 1.2;
@@ -498,22 +461,6 @@ onMounted(() => {
   transform: scale(0.98);
 }
 
-.exchange-btn {
-  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: 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 {
-  color: white;
-}
-
 @media screen and (max-width: 360px) {
   * {
     font-size: 10px;
@@ -550,8 +497,4 @@ onMounted(() => {
 [dir='rtl'] .user-info {
   text-align: right;
 }
-
-[dir='rtl'] .action-buttons {
-  grid-template-columns: 1fr 1fr;
-}
 </style>