150 lines
2.7 KiB
Vue
150 lines
2.7 KiB
Vue
<template>
|
|
<div class="host-setting gradient-background-circles">
|
|
<MobileHeader title="Host Setting" />
|
|
|
|
<div class="content">
|
|
<!-- My Agent 部分 -->
|
|
<div class="section">
|
|
<div class="section-header">
|
|
<h3>My Agent</h3>
|
|
<span class="agency-tag">🏢 Agency</span>
|
|
</div>
|
|
|
|
<div class="agent-card">
|
|
<div class="agent-info">
|
|
<div class="avatar">
|
|
<span>{{ userInfo.name.charAt(0) }}</span>
|
|
</div>
|
|
<div class="agent-details">
|
|
<h4>{{ userInfo.name }}</h4>
|
|
<p>ID: {{ userInfo.id }}</p>
|
|
</div>
|
|
<button class="leave-btn" @click="leaveAgent">Leave</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import MobileHeader from '../components/MobileHeader.vue'
|
|
|
|
const router = useRouter()
|
|
|
|
// 用户信息
|
|
const userInfo = reactive({
|
|
name: 'User1',
|
|
id: '1234567890'
|
|
})
|
|
|
|
// 方法
|
|
const leaveAgent = () => {
|
|
if (confirm('Are you sure you want to leave this agent?')) {
|
|
alert('Leave agent request submitted')
|
|
// 这里可以添加实际的离开代理商逻辑
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.host-setting {
|
|
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
|
|
}
|
|
|
|
.content {
|
|
padding: 16px;
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.section {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.section-header h3 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.agency-tag {
|
|
background-color: #DBEAFE;
|
|
color: #1E40AF;
|
|
padding: 4px 12px;
|
|
border-radius: 16px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Agent Card */
|
|
.agent-card {
|
|
background-color: white;
|
|
padding: 16px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.agent-info {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.avatar {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 25px;
|
|
background-color: #8B5CF6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.agent-details {
|
|
flex: 1;
|
|
}
|
|
|
|
.agent-details h4 {
|
|
margin: 0 0 4px 0;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.agent-details p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
.leave-btn {
|
|
background-color: #EF4444;
|
|
color: white;
|
|
border: none;
|
|
padding: 8px 16px;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.leave-btn:active {
|
|
background-color: #DC2626;
|
|
}
|
|
</style>
|