generated from root/feiqiu-ETL
199 lines
9.4 KiB
HTML
199 lines
9.4 KiB
HTML
<!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>
|