feat(主播中心): 调整样式，更新图源，新增“提现”按钮
This commit is contained in:
hzj
parent
2f34cd0e76
commit
2d3a8dabd0
Binary file not shown.
|
Before Width: | Height: | Size: 654 B After Width: | Height: | Size: 489 B |
@ -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 class="salary-header">
|
||||
<div class="salary-title">{{ t('my_salary') }}</div>
|
||||
<button class="salary-link" @click="showDatePicker">
|
||||
<div style="margin-bottom: 10px">
|
||||
<div style="display: flex; justify-content: space-between; margin-bottom: 5px">
|
||||
<div style="font-weight: 600">{{ t('my_salary') }}</div>
|
||||
<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 class="task-header">
|
||||
<div class="task-title">{{ t('todays_task') }}</div>
|
||||
<button class="policy-link" @click="goToPlatformPolicy">
|
||||
<div
|
||||
style="
|
||||
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);
|
||||
"
|
||||
>
|
||||
<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">
|
||||
<button class="action-btn exchange-btn" @click="exchangeGoldCoins">
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2vw; margin: 0 1%">
|
||||
<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: 14px;
|
||||
font-size: 1em;
|
||||
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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user