style(历史薪资页): 调整样式

src/views/HistorySalaryView.vue

@@ -7,11 +7,11 @@
       <!-- 历史薪资 -->
       <div
         style="
+          margin: 0 1%;
           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;
           justify-content: space-between;
           align-items: center;
@@ -64,50 +64,111 @@
     <!-- 遮罩层 -->
     <div v-if="showDetailModal || showHelpModal" class="modal-overlay" @click="closeModal">
       <!-- 详情模态框 -->
-      <div v-if="showDetailModal" class="modal-item">
-        <div class="detail-modal" @click.stop>
-          <div class="detail-header">
-            <h3>{{ selectedReport?.date || 'Work Details' }}</h3>
-            <button class="close-btn" @click="closeModal">×</button>
+      <div v-if="showDetailModal" style="position: fixed; bottom: 0; width: 100%">
+        <div
+          style="
+            background: white;
+            border-radius: 16px 16px 0 0;
+            max-height: 80vh;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+            padding: 20px;
+          "
+          @click.stop
+        >
+          <div style="display: flex; justify-content: center; align-items: center">
+            <div style="margin: 0; font-size: 18px; font-weight: 600; color: #333">
+              Work Details
+            </div>
           </div>
 
-          <div class="detail-content">
-            <!-- 等级卡片 -->
-            <div v-if="selectedReport" class="level-card">
-              <div class="level-stats">
-                <div class="stat-row">
-                  <div class="stat-item">
-                    <span class="stat-label">Time(Days)</span>
-                    <span class="stat-value">{{ selectedReport.timeDays }}</span>
-                  </div>
-                  <div class="stat-item">
-                    <span class="stat-label">Target</span>
-                    <span class="stat-value">{{ selectedReport.target }}</span>
-                  </div>
-                  <div class="stat-item">
-                    <span class="stat-label">Salary</span>
-                    <span class="stat-value">${{ selectedReport.salary }}</span>
-                  </div>
-                </div>
+          <!-- 日期和类型 -->
+          <div style="display: flex; justify-content: space-between; align-items: center">
+            <div style="color: rgba(0, 0, 0, 0.5); font-weight: 600; font-size: 1.3em">
+              {{ selectedReport?.date }}
+            </div>
+            <div
+              style="
+                margin: 4px;
+                padding: 0 8px;
+                border-radius: 4px;
+                display: flex;
+                align-items: center;
+              "
+              :style="{ boxShadow }"
+            >
+              <div style="font-weight: 500" :style="{ color }">
+                {{ selectedReport.status }}
               </div>
             </div>
+          </div>
 
+          <div
+            v-if="dailyTargets.length > 0"
+            style="font-size: 16px; font-weight: 600; color: #333"
+          >
+            Monthly Salary:
+          </div>
+
+          <!-- 等级卡片 -->
+          <div
+            v-if="selectedReport"
+            style="
+              box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
+              border-radius: 8px;
+              padding: 12px;
+              margin: 0 4px;
+            "
+          >
+            <div>
+              <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px">
+                <div class="text-700">Target: {{ selectedReport.target }}</div>
+                <div class="text-700">Salary: ${{ selectedReport.salary }}</div>
+                <div class="text-700">Time(Days): {{ selectedReport.timeDays }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div
+            v-if="dailyTargets.length > 0"
+            style="font-size: 16px; font-weight: 600; color: #333"
+          >
+            Daily salary:
+          </div>
+
+          <div style="overflow-y: auto" class="salaryList">
             <!-- 每日薪资列表 -->
-            <div v-if="dailyTargets.length > 0" class="daily-salary">
-              <h4>Daily salary:</h4>
-              <div class="daily-list">
-                <div v-for="daily in dailyTargets" :key="daily.dateNumber" class="daily-item">
-                  <div class="daily-date">{{ formatDateNumber(daily.dateNumber) }}</div>
-                  <div class="daily-info">
-                    <div class="daily-target">
-                      <span>Level: {{ getLevelFromPolicy(daily.acceptGiftValue) }}</span>
-                    </div>
-                    <div class="daily-time">
-                      <span>Time: </span>
-                      <span class="time-value"
-                        >{{ Math.min(formatOnlineTime(daily.onlineTime), 120) }}/120</span
-                      >
-                    </div>
+
+            <div
+              v-if="dailyTargets.length > 0"
+              style="display: flex; flex-direction: column; gap: 8px; padding: 4px"
+            >
+              <div
+                v-for="daily in dailyTargets"
+                :key="daily.dateNumber"
+                style="box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25); border-radius: 8px; padding: 10px"
+              >
+                <div class="text-700" style="color: rgba(0, 0, 0, 0.4); margin-bottom: 8px">
+                  {{ formatDateNumber(daily.dateNumber) }}
+                </div>
+                <div style="display: flex; justify-content: space-between; align-items: center">
+                  <div class="text-700">
+                    Target: {{ getLevelFromPolicy(daily.acceptGiftValue) }}
+                  </div>
+
+                  <div style="font-size: 14px">
+                    <span class="text-700">Time:</span>
+                    <span
+                      class="text-700"
+                      style="font-weight: 600"
+                      :class="{
+                        'time-value': formatOnlineTime(daily.onlineTime) == 120,
+                      }"
+                    >
+                      {{ formatOnlineTime(daily.onlineTime) }}/120
+                    </span>
                   </div>
                 </div>
               </div>
@@ -174,7 +235,7 @@
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 import MobileHeader from '../components/MobileHeader.vue'
 import { getTeamMemberWork, getTeamReleasePolicy } from '../api/teamBill.js'
 import { getTeamId, getUserId, getUserProfile } from '@/utils/userStore.js'
@@ -194,6 +255,33 @@ const loadingPolicy = ref(false) // 政策加载状态
 const workReports = ref([])
 const dailyTargets = ref([])
 
+// 样式
+const color = ref('')
+const boxShadow = ref('')
+
+watch(
+  () => selectedReport.value?.status,
+  (newStatus) => {
+    if (newStatus == 'In Progress') {
+      boxShadow.value = '0 0 1px 0 #6085FF'
+      color.value = 'rgba(61, 115, 255, 1)'
+    }
+    if (newStatus == 'Pending') {
+      boxShadow.value = '0 0 1px 0 #FF6062'
+      color.value = 'rgba(255, 61, 64, 1)'
+    }
+    if (newStatus == 'Completed') {
+      boxShadow.value = '0 0 1px 0 #60FF65'
+      color.value = 'rgba(61, 255, 84, 1)'
+    }
+    if (newStatus == 'Out Of Account') {
+      boxShadow.value = '0 0 1px 0 #6A6161'
+      color.value = 'rgba(174, 174, 174, 1)'
+    }
+    return
+  }
+)
+
 // 获取政策数据
 const fetchPolicyData = async () => {
   try {
@@ -351,8 +439,8 @@ const showReportDetail = (report) => {
 
 // 格式化在线时间（为 Daily Salary 显示分钟数）
 const formatOnlineTime = (minutes) => {
-  const mins = parseInt(minutes) || 0
-  return mins.toString()
+  const mins = Math.min(parseInt(minutes), 120) || 0
+  return mins
 }
 
 // 格式化日期数字
@@ -364,7 +452,7 @@ const formatDateNumber = (dateNumber) => {
   const year = dateStr.substring(0, 4)
   const month = dateStr.substring(4, 6)
   const day = dateStr.substring(6, 8)
-  return `${month}/${day}/${year}`
+  return `${year}.${month}.${day}`
 }
 
 // 显示帮助信息
@@ -394,6 +482,14 @@ onMounted(async () => {
   font-family: 'SF Pro Text';
 }
 
+.salaryList::-webkit-scrollbar {
+  display: none;
+}
+
+.time-value {
+  color: #2fff3d;
+}
+
 .history-salary {
   font-family: -apple-system, BlinkMacSystemFont, sans-serif;
 }
@@ -600,34 +696,6 @@ onMounted(async () => {
   font-weight: bold;
 }
 
-/* 详情模态框样式 */
-.detail-modal {
-  background: white;
-  border-radius: 16px;
-  width: 90%;
-  max-width: 480px;
-  max-height: 80vh;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-.detail-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 16px 20px;
-  border-bottom: 1px solid #e5e7eb;
-  background-color: #f8f9fa;
-}
-
-.detail-header h3 {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 600;
-  color: #333;
-}
-
 .close-btn {
   background: none;
   border: none;
@@ -642,19 +710,7 @@ onMounted(async () => {
   justify-content: center;
 }
 
-.detail-content {
-  padding: 20px;
-  overflow-y: auto;
-}
-
 /* 等级卡片样式 */
-.level-card {
-  background-color: #f8f9fa;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 16px;
-  margin-bottom: 20px;
-}
 
 .level-header {
   margin-bottom: 12px;
@@ -667,89 +723,8 @@ onMounted(async () => {
   color: #333;
 }
 
-.level-stats {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.stat-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  gap: 12px;
-}
-
-.stat-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: 4px;
-}
-
-.stat-label {
-  font-size: 12px;
-  color: #666;
-  font-weight: 500;
-}
-
-.stat-value {
-  font-size: 14px;
-  font-weight: 600;
-  color: #333;
-}
-
-/* 每日薪资样式 */
-.daily-salary {
-  margin-top: 20px;
-}
-
-.daily-salary h4 {
-  margin: 0 0 12px 0;
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-}
-
-.daily-list {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.daily-item {
-  background-color: white;
-  border: 1px solid #e5e7eb;
-  border-radius: 8px;
-  padding: 16px;
-}
-
-.daily-date {
-  font-size: 12px;
-  color: #666;
-  margin-bottom: 8px;
-}
-
-.daily-info {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.daily-target {
-  font-size: 14px;
-  color: #333;
-  font-weight: 500;
-}
-
-.daily-time {
-  font-size: 14px;
-  color: #333;
-}
-
-.time-value {
-  color: #10b981;
-  font-weight: 600;
+.text-700 {
+  font-weight: 700;
 }
 
 .help-modal-body {
@@ -826,7 +801,6 @@ onMounted(async () => {
   align-items: center;
   justify-content: center;
   z-index: 1000;
-  padding: 16px;
 }
 
 .modal-item {