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