applye 页面
This commit is contained in:
tianfeng
parent
f35b03a41a
commit
3b567b1da3
@ -115,6 +115,26 @@ export function getFreightWaterFlow(userId) {
|
||||
return get(`/wallet/freight/balance/running/water/client/flowByUserId?userId=${userId}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 根据账号搜索团队
|
||||
* @param {string} account - 代理账号
|
||||
* @returns {Promise} 返回团队信息
|
||||
*/
|
||||
export function searchTeamByAccount(account) {
|
||||
return get(`/team/search-account?account=${account}`)
|
||||
}
|
||||
|
||||
/**
|
||||
* 发送加入团队申请
|
||||
* @param {Object} data - 申请数据
|
||||
* @param {string} data.teamId - 团队ID
|
||||
* @param {string} data.reason - 申请原因
|
||||
* @returns {Promise} 返回申请结果
|
||||
*/
|
||||
export function sendTeamApplyJoin(data) {
|
||||
return post('/team/user/apply', data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化时间戳为可读格式
|
||||
* @param {number} timestamp - 时间戳（毫秒）
|
||||
|
||||
@ -1,377 +1,408 @@
|
||||
<template>
|
||||
<div class="apply-page gradient-background-circles">
|
||||
<!-- 顶部导航 -->
|
||||
<MobileHeader
|
||||
title="Apply to join the team"
|
||||
:show-help="true"
|
||||
@help="showHelp"
|
||||
/>
|
||||
<div class="apply-view gradient-background-circles">
|
||||
<MobileHeader title="Apply to join the team" :showHelp="true" @help="showHelp" />
|
||||
|
||||
<!-- 主要内容 -->
|
||||
<div class="content">
|
||||
<!-- 提醒信息 -->
|
||||
<div class="reminder">
|
||||
<!-- 申请说明 -->
|
||||
<div class="reminder-section">
|
||||
<h3>Reminder before application:</h3>
|
||||
<p>Enter the ID of your agent, and you will become the host after the agency is approved. After becoming an anchor, your income will be entrusted to your agent</p>
|
||||
<p>Enter the ID of your agent, and you will become the host after the host apply is approved. After becoming an host, your income will be entrusted to your agent</p>
|
||||
</div>
|
||||
|
||||
<!-- 申请表单 -->
|
||||
<div class="apply-form">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Apply ID:</label>
|
||||
<div class="input-group">
|
||||
<div class="application-form">
|
||||
<div class="input-group">
|
||||
<label for="agentId">Apply ID:</label>
|
||||
<div class="input-container">
|
||||
<input
|
||||
id="agentId"
|
||||
v-model="agentId"
|
||||
type="text"
|
||||
placeholder="Please enter the agent ID"
|
||||
class="form-input"
|
||||
class="agent-input"
|
||||
@input="clearError"
|
||||
/>
|
||||
<button class="apply-btn" @click="submitApplication" :disabled="!agentId">
|
||||
Apply
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 错误提示 -->
|
||||
<div v-if="errorMessage" class="error-message">
|
||||
<span>{{ errorMessage }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 搜索到的代理信息 -->
|
||||
<div v-if="agentInfo" class="agent-info">
|
||||
<div class="agent-card">
|
||||
<div class="agent-avatar">
|
||||
<img v-if="agentInfo.userAvatar" :src="agentInfo.userAvatar" :alt="agentInfo.userNickname" />
|
||||
<span v-else>{{ agentInfo.userNickname?.charAt(0) || 'A' }}</span>
|
||||
</div>
|
||||
<div class="agent-details">
|
||||
<h4>{{ agentInfo.userNickname || 'Agent' }}</h4>
|
||||
<p>ID: {{ agentInfo.account }}</p>
|
||||
<div class="agent-tags">
|
||||
<span class="tag">🏢 Agent</span>
|
||||
<span v-if="agentInfo.countryName" class="tag">🌍 {{ agentInfo.countryName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 申请按钮 -->
|
||||
<button
|
||||
class="apply-btn"
|
||||
@click="submitApplication"
|
||||
:disabled="!agentId.trim() || isLoading"
|
||||
>
|
||||
<span v-if="isLoading">Applying...</span>
|
||||
<span v-else>Apply</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 加载状态 -->
|
||||
<div v-if="isSearching" class="loading-state">
|
||||
<div class="loading-spinner"></div>
|
||||
<p>Searching agent...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 帮助弹窗 -->
|
||||
<div v-if="showHelpModal" class="modal-overlay" @click="showHelpModal = false">
|
||||
<div class="modal" @click.stop>
|
||||
<h3>Help Information</h3>
|
||||
<p>Please contact your agent to get the correct Agent ID before applying.</p>
|
||||
<button @click="showHelpModal = false">Close</button>
|
||||
<div v-if="showHelpModal" class="help-modal" @click="closeHelp">
|
||||
<div class="help-content" @click.stop>
|
||||
<h3>Application Help</h3>
|
||||
<div class="help-text">
|
||||
<p><strong>How to apply:</strong></p>
|
||||
<ul>
|
||||
<li>Enter your agent's ID in the input field</li>
|
||||
<li>The system will search and verify the agent</li>
|
||||
<li>Click "Apply" to submit your application</li>
|
||||
<li>Wait for the agent to approve your application</li>
|
||||
</ul>
|
||||
<p><strong>Note:</strong> After approval, your income will be managed by your agent.</p>
|
||||
</div>
|
||||
<button class="close-btn" @click="closeHelp">Got it</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import MobileHeader from '../components/MobileHeader.vue'
|
||||
import { get, post } from '../utils/http.js'
|
||||
import { searchTeamByAccount, sendTeamApplyJoin } from '../api/wallet.js'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// 响应式数据
|
||||
const searchAccount = ref('')
|
||||
const searching = ref(false)
|
||||
const applying = ref(false)
|
||||
const cancelling = ref(false)
|
||||
const agentId = ref('')
|
||||
const agentInfo = ref(null)
|
||||
const errorMessage = ref('')
|
||||
const isSearching = ref(false)
|
||||
const isLoading = ref(false)
|
||||
const showHelpModal = ref(false)
|
||||
const showInviteModal = ref(false)
|
||||
const showContactModal = ref(false)
|
||||
|
||||
const teamProfile = reactive({})
|
||||
const teamOwnUserProfile = reactive({})
|
||||
const applyMessageId = ref('')
|
||||
// 防抖搜索代理
|
||||
let searchTimeout = null
|
||||
|
||||
const inviteMessage = ref([])
|
||||
const inviteMessageLoading = ref(false)
|
||||
const processingItem = reactive({})
|
||||
// 监听代理ID输入，自动搜索
|
||||
watch(agentId, (newValue) => {
|
||||
if (searchTimeout) {
|
||||
clearTimeout(searchTimeout)
|
||||
}
|
||||
|
||||
const contactForm = reactive({
|
||||
id: '',
|
||||
status: '',
|
||||
contact: ''
|
||||
if (newValue.trim()) {
|
||||
searchTimeout = setTimeout(() => {
|
||||
searchAgent(newValue.trim())
|
||||
}, 500) // 500ms防抖
|
||||
} else {
|
||||
agentInfo.value = null
|
||||
errorMessage.value = ''
|
||||
}
|
||||
})
|
||||
|
||||
// 计算属性
|
||||
const hasUnreadInvites = computed(() => {
|
||||
return inviteMessage.value.some(msg => msg.status === 0)
|
||||
})
|
||||
// 搜索代理
|
||||
const searchAgent = async (account) => {
|
||||
if (!account) return
|
||||
|
||||
isSearching.value = true
|
||||
errorMessage.value = ''
|
||||
agentInfo.value = null
|
||||
|
||||
// 获取用户等待申请的团队信息
|
||||
const loadUserSendJoinWaitApplyTeamProfile = async () => {
|
||||
try {
|
||||
const response = await get('/team/wait-apply/profile')
|
||||
const response = await searchTeamByAccount(account)
|
||||
|
||||
if (response.status && response.body) {
|
||||
const result = response.body
|
||||
applyMessageId.value = result.messageId || ''
|
||||
Object.assign(teamProfile, result.teamProfile || {})
|
||||
Object.assign(teamOwnUserProfile, result.ownUserProfile || {})
|
||||
// 假设返回的是代理团队信息，我们需要显示代理信息
|
||||
agentInfo.value = {
|
||||
account: account,
|
||||
userNickname: response.body.teamName || 'Agent Team',
|
||||
userAvatar: response.body.teamAvatar || '',
|
||||
countryName: response.body.countryName || '',
|
||||
teamId: response.body.teamId,
|
||||
agentId: response.body.agentId
|
||||
}
|
||||
} else {
|
||||
errorMessage.value = 'Agent not found. Please check the ID and try again.'
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load wait apply profile:', error)
|
||||
if (error.errorCode === 6001) {
|
||||
// 用户已经在团队中，跳转到团队页面
|
||||
router.replace('/host-center')
|
||||
}
|
||||
console.error('搜索代理失败:', error)
|
||||
errorMessage.value = 'Failed to search agent. Please try again.'
|
||||
} finally {
|
||||
isSearching.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索团队
|
||||
const searchTeam = async () => {
|
||||
if (!searchAccount.value.trim()) {
|
||||
alert('Please enter agent ID')
|
||||
// 清除错误信息
|
||||
const clearError = () => {
|
||||
errorMessage.value = ''
|
||||
}
|
||||
|
||||
// 提交申请
|
||||
const submitApplication = async () => {
|
||||
if (!agentId.value.trim()) {
|
||||
errorMessage.value = 'Please enter agent ID'
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
searching.value = true
|
||||
const response = await get(`/team/search-account?account=${searchAccount.value.trim()}`)
|
||||
|
||||
if (response.status && response.body) {
|
||||
const result = response.body
|
||||
Object.assign(teamProfile, result.teamProfile || {})
|
||||
Object.assign(teamOwnUserProfile, result.ownUserProfile || {})
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to search team:', error)
|
||||
if (error.errorCode === 6010) {
|
||||
alert('Team not found!')
|
||||
} else if (error.errorMsg) {
|
||||
alert(error.errorMsg)
|
||||
}
|
||||
} finally {
|
||||
searching.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 提交申请加入团队
|
||||
const submitApplyJoin = async () => {
|
||||
if (!teamProfile.id) {
|
||||
alert('Invalid team information')
|
||||
if (!agentInfo.value) {
|
||||
errorMessage.value = 'Please wait for agent verification'
|
||||
return
|
||||
}
|
||||
|
||||
isLoading.value = true
|
||||
errorMessage.value = ''
|
||||
|
||||
try {
|
||||
applying.value = true
|
||||
const response = await post('/team/user/apply', {
|
||||
teamId: teamProfile.id,
|
||||
reason: 'JOIN'
|
||||
})
|
||||
|
||||
if (response.status && response.body) {
|
||||
applyMessageId.value = response.body
|
||||
alert('Application submitted successfully!')
|
||||
const applicationData = {
|
||||
teamId: agentInfo.value.teamId,
|
||||
reason: `Application to join team under agent ${agentId.value}`
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to apply:', error)
|
||||
if (error.errorMsg) {
|
||||
alert(error.errorMsg)
|
||||
}
|
||||
} finally {
|
||||
applying.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 加载邀请消息
|
||||
const loadInviteMessage = async () => {
|
||||
try {
|
||||
inviteMessageLoading.value = true
|
||||
const response = await get('/anchor-agent/invite/message')
|
||||
|
||||
if (response.status && response.body) {
|
||||
inviteMessage.value = response.body || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load invite messages:', error)
|
||||
inviteMessage.value = []
|
||||
} finally {
|
||||
inviteMessageLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 提交邀请处理
|
||||
const submitInviteProcess = async () => {
|
||||
try {
|
||||
const response = await post('/anchor-agent/invite/process', contactForm)
|
||||
const response = await sendTeamApplyJoin(applicationData)
|
||||
|
||||
if (response.status) {
|
||||
processingItem.status = contactForm.status
|
||||
closeContactModal()
|
||||
|
||||
if (contactForm.status === 1) {
|
||||
// 同意后跳转到主页
|
||||
router.replace('/host-center')
|
||||
}
|
||||
// 申请成功
|
||||
alert('Application submitted successfully! Please wait for approval.')
|
||||
router.go(-1) // 返回上一页
|
||||
} else {
|
||||
errorMessage.value = response.message || 'Application failed. Please try again.'
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to process invite:', error)
|
||||
if (error.errorMsg) {
|
||||
alert(error.errorMsg)
|
||||
}
|
||||
console.error('提交申请失败:', error)
|
||||
errorMessage.value = 'Application failed. Please try again.'
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 事件处理
|
||||
// 显示帮助
|
||||
const showHelp = () => {
|
||||
showHelpModal.value = true
|
||||
}
|
||||
|
||||
const closeContactModal = () => {
|
||||
showContactModal.value = false
|
||||
contactForm.contact = ''
|
||||
// 关闭帮助
|
||||
const closeHelp = () => {
|
||||
showHelpModal.value = false
|
||||
}
|
||||
|
||||
|
||||
// 组件挂载时执行
|
||||
onMounted(() => {
|
||||
loadUserSendJoinWaitApplyTeamProfile()
|
||||
loadInviteMessage()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.apply-page {
|
||||
.apply-view {
|
||||
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
min-height: 100vh;
|
||||
background-color: #f1f2f3;
|
||||
/*background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);*/
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 16px 16px 100px 16px;
|
||||
padding: 20px 16px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* 搜索区域 */
|
||||
.search-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.reminder {
|
||||
background-color: white;
|
||||
padding: 16px;
|
||||
/* 申请说明 */
|
||||
.reminder-section {
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
padding: 20px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.reminder h3 {
|
||||
.reminder-section h3 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.reminder p {
|
||||
.reminder-section p {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.apply-form {
|
||||
background-color: white;
|
||||
padding: 16px;
|
||||
/* 申请表单 */
|
||||
.application-form {
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
padding: 24px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 16px;
|
||||
.input-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
.input-group label {
|
||||
display: block;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
align-items: center;
|
||||
.input-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
padding: 12px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 8px;
|
||||
.agent-input {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
background-color: #f9f9f9;
|
||||
background-color: white;
|
||||
transition: border-color 0.2s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
.agent-input:focus {
|
||||
outline: none;
|
||||
border-color: #8B5CF6;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.apply-btn {
|
||||
padding: 12px 24px;
|
||||
background-color: #10B981;
|
||||
color: white;
|
||||
border: none;
|
||||
.agent-input::placeholder {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* 错误信息 */
|
||||
.error-message {
|
||||
margin-bottom: 16px;
|
||||
padding: 12px;
|
||||
background-color: #FEE2E2;
|
||||
border: 1px solid #FECACA;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
white-space: nowrap;
|
||||
color: #DC2626;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.apply-btn:hover:not(:disabled) {
|
||||
background-color: #059669;
|
||||
/* 代理信息 */
|
||||
.agent-info {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.apply-btn:disabled {
|
||||
background-color: #9CA3AF;
|
||||
cursor: not-allowed;
|
||||
.agent-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #F8FAFC;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
border: 2px solid #E2E8F0;
|
||||
}
|
||||
|
||||
/* 模态框样式 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
.agent-avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 25px;
|
||||
background-color: #8B5CF6;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
|
||||
.help-modal h3 {
|
||||
margin: 0 0 16px 0;
|
||||
color: white;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-right: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.help-modal p {
|
||||
margin: 0 0 20px 0;
|
||||
.agent-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.agent-details h4 {
|
||||
margin: 0 0 4px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.agent-details p {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.help-modal button {
|
||||
padding: 8px 20px;
|
||||
.agent-tags {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
background-color: #E0E7FF;
|
||||
color: #5B21B6;
|
||||
}
|
||||
|
||||
/* 申请按钮 */
|
||||
.apply-btn {
|
||||
width: 100%;
|
||||
padding: 16px;
|
||||
background-color: #8B5CF6;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.modal-header h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
border-radius: 12px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
|
||||
.contact-form .form-group {
|
||||
margin-bottom: 16px;
|
||||
.apply-btn:hover:not(:disabled) {
|
||||
background-color: #7C3AED;
|
||||
}
|
||||
|
||||
.contact-form label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
margin-bottom: 6px;
|
||||
.apply-btn:disabled {
|
||||
background-color: #D1D5DB;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.apply-btn:active:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* 加载状态 */
|
||||
.loading-state {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||||
border-top: 3px solid white;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 0 auto 12px;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
@ -379,23 +410,78 @@ onMounted(() => {
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
|
||||
.empty-invites p {
|
||||
.loading-state p {
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 帮助弹窗 */
|
||||
.help-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.help-content {
|
||||
background-color: white;
|
||||
padding: 24px;
|
||||
border-radius: 16px;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.help-content h3 {
|
||||
margin: 0 0 16px 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.help-text {
|
||||
margin-bottom: 20px;
|
||||
color: #666;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.help-text p {
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.help-text ul {
|
||||
margin: 8px 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.help-text li {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background-color: #8B5CF6;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 480px) {
|
||||
.input-group {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.apply-btn {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.close-btn:active {
|
||||
background-color: #7C3AED;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user