generated from root/feiqiu-ETL
feat:引入 TDesign 以及前端初稿
This commit is contained in:
172
Prototype/pages/my-profile.html
Normal file
172
Prototype/pages/my-profile.html
Normal file
@@ -0,0 +1,172 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>我的 - 球房运营助手</title>
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
<script>
|
||||
tailwind.config = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: '#0052d9',
|
||||
'primary-light': '#ecf2fe',
|
||||
success: '#00a870',
|
||||
warning: '#ed7b2f',
|
||||
error: '#e34d59',
|
||||
'gray-1': '#f3f3f3',
|
||||
'gray-2': '#eeeeee',
|
||||
'gray-3': '#e7e7e7',
|
||||
'gray-4': '#dcdcdc',
|
||||
'gray-5': '#c5c5c5',
|
||||
'gray-6': '#a6a6a6',
|
||||
'gray-7': '#8b8b8b',
|
||||
'gray-8': '#777777',
|
||||
'gray-9': '#5e5e5e',
|
||||
'gray-10': '#4b4b4b',
|
||||
'gray-11': '#393939',
|
||||
'gray-12': '#2c2c2c',
|
||||
'gray-13': '#242424',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Noto Sans SC', 'sans-serif'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top, 44px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gray-1 min-h-screen">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="safe-area-top bg-white">
|
||||
<div class="h-11 flex items-center justify-center relative border-b border-gray-2">
|
||||
<h1 class="text-base font-medium text-gray-13">我的</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 用户信息区域 -->
|
||||
<div class="bg-white p-6 flex items-center gap-4">
|
||||
<div class="w-16 h-16 rounded-full overflow-hidden shadow-lg">
|
||||
<img src="../img/zjtx.png" class="w-full h-full object-cover" alt="助教头像">
|
||||
</div>
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<span class="text-lg font-semibold text-gray-13">小燕</span>
|
||||
<span class="px-2 py-0.5 bg-primary/10 text-primary text-xs rounded">助教</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-7">广州朗朗桌球</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 菜单列表 -->
|
||||
<div class="mt-4">
|
||||
<a href="notes.html" class="flex items-center justify-between bg-white px-4 py-4 border-b border-gray-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
|
||||
<path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm text-gray-13">备注记录</span>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="chat-history.html" class="flex items-center justify-between bg-white px-4 py-4 border-b border-gray-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-success/10 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-success" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm text-gray-13">助手对话记录</span>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a href="home-settings.html" class="flex items-center justify-between bg-white px-4 py-4 border-b border-gray-1">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-warning/10 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-warning" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm text-gray-13">首页设置</span>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<button onclick="showLogoutModal()" class="w-full flex items-center justify-between bg-white px-4 py-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 bg-error/10 rounded-lg flex items-center justify-center">
|
||||
<svg class="w-5 h-5 text-error" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4"/>
|
||||
<polyline points="16 17 21 12 16 7"/>
|
||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||
</svg>
|
||||
</div>
|
||||
<span class="text-sm text-gray-13">退出账号</span>
|
||||
</div>
|
||||
<svg class="w-4 h-4 text-gray-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="9 18 15 12 9 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 退出确认弹窗 -->
|
||||
<div id="logoutModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
|
||||
<div class="bg-white rounded-2xl w-72 overflow-hidden">
|
||||
<div class="p-6 text-center">
|
||||
<h3 class="text-base font-medium text-gray-13 mb-2">确认退出</h3>
|
||||
<p class="text-sm text-gray-7">确认退出当前账号吗？</p>
|
||||
</div>
|
||||
<div class="flex border-t border-gray-2">
|
||||
<button onclick="hideLogoutModal()" class="flex-1 py-3 text-sm text-gray-7 border-r border-gray-2">取消</button>
|
||||
<button onclick="logout()" class="flex-1 py-3 text-sm text-error font-medium">退出</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 悬浮助手按钮 -->
|
||||
<script src="../js/ai-float-btn.js"></script>
|
||||
|
||||
<!-- 通用底部导航 -->
|
||||
<script src="../js/bottom-nav.js"></script>
|
||||
|
||||
<script>
|
||||
function showLogoutModal() {
|
||||
document.getElementById('logoutModal').classList.remove('hidden');
|
||||
document.getElementById('logoutModal').classList.add('flex');
|
||||
}
|
||||
|
||||
function hideLogoutModal() {
|
||||
document.getElementById('logoutModal').classList.add('hidden');
|
||||
document.getElementById('logoutModal').classList.remove('flex');
|
||||
}
|
||||
|
||||
function logout() {
|
||||
window.location.href = 'login.html';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user