style(样式调整): 平台政策页
This commit is contained in:
huangzijie130
parent
c2b745cfb5
commit
f57425ae47
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user