root/LLZQ-XCX
1
0
Fork 0
generated from root/feiqiu-ETL
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:引入 TDesign 以及前端初稿

Browse Source
This commit is contained in:
Neo
2026-01-24 22:56:57 +08:00
parent 6147924889
commit c972c52e04
80 changed files with 35245 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
Prototype/pages/login.html Normal file
View File

@@ -0,0 +1,198 @@
<!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;
}
.bg-gradient-main {
background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #ecfeff 100%);
}
.checkbox-custom {
position: relative;
}
.checkbox-custom:checked {
background-color: #0052d9;
border-color: #0052d9;
}
.checkbox-custom:checked::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 5px;
height: 9px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.btn-disabled {
background-color: #dcdcdc !important;
cursor: not-allowed;
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.float-animation {
animation: float 4s ease-in-out infinite;
}
@keyframes pulse-soft {
0%, 100% { opacity: 0.4; }
50% { opacity: 0.8; }
}
.pulse-soft {
animation: pulse-soft 3s ease-in-out infinite;
}
</style>
</head>
<body class="bg-gradient-main min-h-screen flex flex-col">
<!-- 装饰元素 -->
<div class="absolute top-20 left-8 w-16 h-16 bg-primary/10 rounded-full blur-xl pulse-soft"></div>
<div class="absolute top-40 right-6 w-20 h-20 bg-cyan-400/10 rounded-full blur-xl pulse-soft" style="animation-delay: 1s;"></div>
<div class="absolute bottom-40 left-12 w-12 h-12 bg-blue-400/10 rounded-full blur-xl pulse-soft" style="animation-delay: 0.5s;"></div>
<!-- 顶部区域 - Logo 和名称 -->
<div class="flex-1 flex flex-col items-center justify-center px-8 relative z-10">
<!-- Logo -->
<div class="relative mb-6 float-animation">
<div class="w-24 h-24 bg-gradient-to-br from-primary to-blue-400 rounded-3xl flex items-center justify-center shadow-xl shadow-primary/30">
<svg class="w-14 h-14 text-white" viewBox="0 0 24 24" fill="currentColor">
<circle cx="12" cy="12" r="10" fill="currentColor" opacity="0.3"/>
<circle cx="12" cy="12" r="6" fill="currentColor"/>
<circle cx="12" cy="12" r="2" fill="white"/>
</svg>
</div>
<!-- 装饰点 -->
<div class="absolute -top-1 -right-1 w-4 h-4 bg-cyan-400 rounded-full shadow-lg"></div>
<div class="absolute -bottom-2 -left-2 w-3 h-3 bg-blue-300 rounded-full shadow-lg"></div>
</div>
<!-- 应用名称 -->
<h1 class="text-2xl font-bold text-gray-13 mb-2">球房运营助手</h1>
<!-- 产品描述 -->
<p class="text-gray-7 text-sm text-center leading-relaxed mb-8">
为台球厅提升运营效率的内部管理工具
</p>
<!-- 功能亮点 -->
<div class="w-full max-w-sm bg-white/60 backdrop-blur-sm rounded-2xl p-5 mb-6">
<div class="grid grid-cols-3 gap-4 text-center">
<div>
<div class="w-10 h-10 bg-primary/10 rounded-xl flex items-center justify-center mx-auto mb-2">
<svg class="w-5 h-5 text-primary" viewBox="0 0 24 24" fill="currentColor">
<path d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/>
</svg>
</div>
<p class="text-xs text-gray-9 font-medium">任务管理</p>
</div>
<div>
<div class="w-10 h-10 bg-success/10 rounded-xl flex items-center justify-center mx-auto mb-2">
<svg class="w-5 h-5 text-success" viewBox="0 0 24 24" fill="currentColor">
<path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
</svg>
</div>
<p class="text-xs text-gray-9 font-medium">数据看板</p>
</div>
<div>
<div class="w-10 h-10 bg-warning/10 rounded-xl flex items-center justify-center mx-auto mb-2">
<svg class="w-5 h-5 text-warning" 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>
<p class="text-xs text-gray-9 font-medium">智能助手</p>
</div>
</div>
</div>
</div>
<!-- 底部区域 - 登录按钮和协议 -->
<div class="px-8 pb-10 relative z-10">
<!-- 微信登录按钮 -->
<button id="loginBtn" class="btn-disabled w-full py-4 rounded-xl text-white font-medium text-base flex items-center justify-center gap-2 transition-all duration-200 shadow-lg">
<svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor">
<path d="M8.691 2.188C3.891 2.188 0 5.476 0 9.53c0 2.212 1.17 4.203 3.002 5.55a.59.59 0 0 1 .213.665l-.39 1.48c-.019.07-.048.141-.048.213 0 .163.13.295.29.295a.32.32 0 0 0 .165-.054l1.9-1.106a.96.96 0 0 1 .465-.116.94.94 0 0 1 .272.04 10.6 10.6 0 0 0 2.822.384c.136 0 .271-.002.405-.009a6.9 6.9 0 0 1-.315-2.053c0-3.694 3.614-6.69 8.076-6.69.233 0 .463.01.691.027C16.964 4.837 13.132 2.188 8.691 2.188zm-2.97 5.28a1.03 1.03 0 1 1 0-2.06 1.03 1.03 0 0 1 0 2.06zm5.96 0a1.03 1.03 0 1 1 0-2.06 1.03 1.03 0 0 1 0 2.06zM24 14.2c0-3.355-3.4-6.08-7.59-6.08s-7.59 2.725-7.59 6.08c0 3.356 3.4 6.08 7.59 6.08.772 0 1.515-.094 2.215-.268a.77.77 0 0 1 .224-.033.79.79 0 0 1 .382.095l1.565.912a.26.26 0 0 0 .135.044c.13 0 .238-.108.238-.242 0-.06-.024-.117-.04-.175l-.32-1.218a.48.48 0 0 1 .175-.547C22.95 17.89 24 16.165 24 14.2zm-10.14-.426a.85.85 0 1 1 0-1.7.85.85 0 0 1 0 1.7zm5.1 0a.85.85 0 1 1 0-1.7.85.85 0 0 1 0 1.7z"/>
</svg>
使用微信登录
</button>
<!-- 协议勾选 -->
<div class="flex items-start gap-3 mt-5">
<input type="checkbox" id="agreeCheckbox" class="checkbox-custom w-4 h-4 mt-0.5 border-2 border-gray-4 rounded appearance-none cursor-pointer transition-all duration-200 flex-shrink-0">
<label for="agreeCheckbox" class="text-xs text-gray-7 leading-relaxed cursor-pointer">
我已阅读并同意
<a href="#" class="text-primary font-medium">《用户协议》</a>
和
<a href="#" class="text-primary font-medium">《隐私政策》</a>
</label>
</div>
<!-- 底部说明 -->
<p class="text-xs text-gray-5 text-center mt-6">
仅限球房内部员工使用
</p>
</div>
<script>
const checkbox = document.getElementById('agreeCheckbox');
const loginBtn = document.getElementById('loginBtn');
function updateButtonState() {
if (checkbox.checked) {
loginBtn.classList.remove('btn-disabled');
loginBtn.classList.add('bg-gradient-to-r', 'from-primary', 'to-blue-500', 'shadow-primary/30');
} else {
loginBtn.classList.add('btn-disabled');
loginBtn.classList.remove('bg-gradient-to-r', 'from-primary', 'to-blue-500', 'shadow-primary/30');
}
}
checkbox.addEventListener('change', updateButtonState);
loginBtn.addEventListener('click', function() {
if (!checkbox.checked) {
return;
}
// 模拟登录
alert('正在使用微信登录...');
});
</script>
</body>
</html>