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

---
 src/views/PlatformPolicyView.vue | 164 ++++++++++++++++++-------------
 1 file changed, 97 insertions(+), 67 deletions(-)

diff --git a/src/views/PlatformPolicyView.vue b/src/views/PlatformPolicyView.vue
index 3e873e0..e221b2d 100644
--- a/src/views/PlatformPolicyView.vue
+++ b/src/views/PlatformPolicyView.vue
@@ -3,71 +3,73 @@
     <MobileHeader title="Platform Policy" />
 
     <div class="content">
-      <!-- 加载状态 -->
-      <div v-if="loading" class="loading-container">
-        <div class="loading-spinner"></div>
-        <p>Loading policy...</p>
-      </div>
-
       <!-- 政策列表 -->
-      <div v-else-if="policies.length > 0" class="policy-list">
+      <div v-if="policies.length > 0" style="display: flex; flex-direction: column; gap: 16px">
         <div
+          style="
+            background-color: white;
+            padding: 16px;
+            border-radius: 12px;
+            margin-bottom: 12px;
+            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            gap: 5px;
+          "
           v-for="policy in policies"
           :key="policy.level"
-          class="policy-item"
         >
-          <div class="policy-header">
-            <h3>Lv.{{ policy.level }}</h3>
-          </div>
-
-          <div class="policy-details">
-            <div class="policy-grid">
-              <div class="policy-cell">
-                <span class="cell-label">Time (hours)</span>
-                <span class="cell-value">{{ policy.onlineTime || 0 }}</span>
-              </div>
-              <div class="policy-cell">
-                <span class="cell-label">Target</span>
-                <span class="cell-value">{{ formatTarget(policy.target) }}</span>
-              </div>
-              <div class="policy-cell">
-                <span class="cell-label">Member Salary</span>
-                <span class="cell-value salary">${{ policy.memberSalary || 0 }}</span>
+          <div style="font-weight: 600; font-size: 1.2em">Lv.{{ policy.level }}</div>
+          <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px">
+            <div
+              style="
+                width: max-content;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 5px;
+              "
+            >
+              <div style="font-weight: 600">Time (hours)</div>
+              <div style="font-weight: 500">{{ policy.onlineTime || 0 }}</div>
+            </div>
+            <div style="display: flex; flex-direction: column; align-items: center; gap: 5px">
+              <div style="font-weight: 600">Target</div>
+              <div style="font-weight: 500">
+                {{ formatTarget(policy.target) }}
               </div>
             </div>
-
-            <!-- 只有角色是 OWN 时才显示额外的薪资信息 -->
-            <div v-if="role === 'OWN'" class="policy-grid bottom-row">
-              <div class="policy-cell">
-                <span class="cell-label">Owner Salary</span>
-                <span class="cell-value salary">${{ policy.ownSalary || 0 }}</span>
+            <div style="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">Member Salary</div>
+                <div style="font-weight: 500">${{ policy.memberSalary || 0 }}</div>
               </div>
-              <div class="policy-cell">
-                <span class="cell-label">Total Salary</span>
-                <span class="cell-value salary">${{ policy.totalSalary || 0 }}</span>
-              </div>
-              <div class="policy-cell empty"></div>
             </div>
-
-            <!-- 道具奖励区域 -->
-            <div v-if="policy.propsRewards && policy.propsRewards.length > 0" class="rewards-section">
-              <div class="rewards-divider"></div>
-              <div class="rewards-header">
-                <span class="rewards-title">Rewards:</span>
-              </div>
-              <div class="rewards-list">
-                <div
-                  v-for="(reward, index) in policy.propsRewards"
-                  :key="index"
-                  class="reward-item"
-                >
-                  <div class="reward-info">
-                    <span class="reward-name">{{ reward.name }}</span>
-                    <span class="reward-type">{{ formatRewardType(reward.type) }}</span>
-                  </div>
-                  <div class="reward-amount">${{ reward.amount || 0 }}</div>
-                </div>
-              </div>
+            <!-- 第二行 -->
+            <div
+              style="
+                width: max-content;
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 5px;
+              "
+            >
+              <div style="font-weight: 600">Owner Salary</div>
+              <div style="font-weight: 500">${{ policy.ownSalary || 0 }}</div>
+            </div>
+            <div style="display: flex; flex-direction: column; align-items: center; gap: 5px">
+              <div style="font-weight: 600">Total Salary</div>
+              <div style="font-weight: 500">${{ policy.totalSalary || 0 }}</div>
             </div>
           </div>
         </div>
@@ -87,7 +89,7 @@ import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import MobileHeader from '../components/MobileHeader.vue'
 import { get } from '../utils/http.js'
-import {getTeamId} from "@/utils/userStore.js";
+import { getTeamId } from '@/utils/userStore.js'
 
 const router = useRouter()
 const loading = ref(false)
@@ -133,11 +135,11 @@ const formatTarget = (target) => {
 // 格式化奖励类型
 const formatRewardType = (type) => {
   const typeMap = {
-    'AVATAR_FRAME': 'Avatar Frame',
-    'RIDE': 'Ride Effect',
-    'THEME': 'Theme',
-    'BADGE': 'Badge',
-    'GIFT': 'Gift'
+    AVATAR_FRAME: 'Avatar Frame',
+    RIDE: 'Ride Effect',
+    THEME: 'Theme',
+    BADGE: 'Badge',
+    GIFT: 'Gift',
   }
   return typeMap[type] || type
 }
@@ -149,6 +151,11 @@ onMounted(() => {
 </script>
 
 <style scoped>
+* {
+  color: rgba(0, 0, 0, 0.8);
+  font-family: 'SF Pro Text';
+}
+
 .platform-policy {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
   min-height: 100vh;
@@ -174,15 +181,20 @@ onMounted(() => {
   width: 32px;
   height: 32px;
   border: 3px solid #f3f3f3;
-  border-top: 3px solid #8B5CF6;
+  border-top: 3px solid #8b5cf6;
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin-bottom: 12px;
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 /* 政策列表 */
@@ -195,7 +207,7 @@ onMounted(() => {
 .policy-item {
   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);
   overflow: hidden;
 }
 
@@ -255,7 +267,7 @@ onMounted(() => {
 }
 
 .cell-value.salary {
-  color: #FF6600;
+  color: #ff6600;
   font-weight: 700;
 }
 
@@ -376,4 +388,22 @@ onMounted(() => {
     font-size: 13px;
   }
 }
+
+@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>