hy/aslan-h5
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(充值代理邀请规则页): 使用新的头部组件，对接语言切换功能并调整布局

Browse Source
This commit is contained in:
hzj 2025-10-30 16:39:04 +08:00
parent 59b9c7f406
commit 6d672f971f
1 changed files with 51 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
src/views/InviteMembersView.vue
View File

@ -1,35 +1,46 @@
<template>
<div class="invite-members gradient-background-circles">
<MobileHeader title="Invite Members" />
<!-- 使用 GeneralHeader 替换 MobileHeader -->
<GeneralHeader
:title="t('invite_members')"
:isHomePage="false"
:showLanguageList="true"
color="black"
style="box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 999"
/>
<div class="content">
<div class="instructions">
<div class="instruction-item">
<span class="step-number">1.</span>
<span>Invite users to download Likei APP</span>
<span>{{ t('invite_download_app') }}</span>
</div>
<div class="instruction-item">
<span class="step-number">2.</span>
<span>Invited users need to log in to the Likei APP!</span>
<span>{{ t('invited_users_login') }}</span>
</div>
<div class="instruction-item">
<span class="step-number">3.</span>
<span>Me > Host Center >Apply to join the team.</span>
<span>{{ t('join_team_steps') }}</span>
</div>
<div class="instruction-item">
<span class="step-number">4.</span>
<span>Enter the team ID,click send to join.</span>
<span>{{ t('enter_team_id') }}</span>
</div>
</div>
</div>
</div>
</template>
<script setup>
import MobileHeader from '../components/MobileHeader.vue'
import { useI18n } from 'vue-i18n'
import GeneralHeader from '../components/GeneralHeader.vue'
import { setDocumentDirection } from '@/locales/i18n'
const { t, locale } = useI18n()
// 监听语言变化并设置文档方向
locale.value && setDocumentDirection(locale.value)
</script>
<style scoped>
@ -49,7 +60,7 @@ import MobileHeader from '../components/MobileHeader.vue'
padding: 20px;
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.instruction-item {
@ -64,7 +75,7 @@ import MobileHeader from '../components/MobileHeader.vue'
}
.step-number {
color: #8B5CF6;
color: #8b5cf6;
font-weight: 600;
margin-right: 8px;
flex-shrink: 0;
@ -80,7 +91,7 @@ import MobileHeader from '../components/MobileHeader.vue'
background-color: white;
padding: 20px;
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);
}
.team-id-section {
@ -153,7 +164,7 @@ import MobileHeader from '../components/MobileHeader.vue'
.share-btn:hover {
background-color: #e9ecef;
border-color: #8B5CF6;
border-color: #8b5cf6;
}
.share-btn:active {
@ -170,4 +181,32 @@ import MobileHeader from '../components/MobileHeader.vue'
font-weight: 500;
color: #666;
}
@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;
}
}
/* RTL支持 */
[dir='rtl'] .step-number {
margin-right: 0;
margin-left: 8px;
}
[dir='rtl'] .instruction-item {
text-align: right;
}
</style>