generated from root/feiqiu-ETL
feat:引入 TDesign 以及前端初稿
This commit is contained in:
180
Prototype/pages/apply.html
Normal file
180
Prototype/pages/apply.html
Normal file
@@ -0,0 +1,180 @@
|
||||
<!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%);
|
||||
}
|
||||
.safe-area-top {
|
||||
padding-top: env(safe-area-inset-top, 44px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-gradient-main min-h-screen flex flex-col">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="safe-area-top bg-white/80 backdrop-blur-lg sticky top-0 z-10">
|
||||
<div class="h-11 flex items-center justify-center relative border-b border-gray-200/50">
|
||||
<button onclick="history.back()" class="absolute left-4 p-1">
|
||||
<svg class="w-5 h-5 text-gray-10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="15 18 9 12 15 6"/>
|
||||
</svg>
|
||||
</button>
|
||||
<h1 class="text-base font-medium text-gray-13">申请访问权限</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="flex-1 p-4">
|
||||
<!-- 欢迎卡片 -->
|
||||
<div class="bg-gradient-to-br from-primary to-blue-400 rounded-2xl p-5 mb-4 text-white shadow-lg shadow-primary/20">
|
||||
<div class="flex items-center gap-4 mb-3">
|
||||
<div class="w-12 h-12 bg-white/20 backdrop-blur-sm rounded-xl flex items-center justify-center">
|
||||
<svg class="w-6 h-6 text-white" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-lg font-semibold mb-1">欢迎加入球房运营助手</h2>
|
||||
<p class="text-white/80 text-sm">请填写申请信息，等待管理员审核</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 说明文字 -->
|
||||
<div class="bg-primary/5 border border-primary/10 rounded-xl p-4 mb-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<svg class="w-5 h-5 text-primary flex-shrink-0 mt-0.5" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p class="text-sm text-primary font-medium mb-1">申请说明</p>
|
||||
<p class="text-xs text-gray-7 leading-relaxed">
|
||||
请填写您的真实信息，包括姓名、岗位和所属门店等，以便管理员快速审核您的申请。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 表单区域 -->
|
||||
<div class="bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50">
|
||||
<div class="mb-3 flex items-center gap-1">
|
||||
<span class="text-error text-sm">*</span>
|
||||
<span class="text-sm font-medium text-gray-13">申请说明</span>
|
||||
</div>
|
||||
<textarea
|
||||
id="applyReason"
|
||||
class="w-full h-36 p-4 bg-gray-50 rounded-xl border border-gray-100 resize-none text-sm text-gray-13 placeholder-gray-5 focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary/30 transition-all"
|
||||
placeholder="点击填写申请信息： 1. 您的姓名 2. 您的岗位（如：助教、店长等） 3. 所属门店 4. 其他说明（可选）"
|
||||
></textarea>
|
||||
<p id="errorTip" class="text-error text-xs mt-2 hidden">申请说明不能为空</p>
|
||||
<div class="flex items-center justify-between mt-3">
|
||||
<span class="text-xs text-gray-5">请认真填写，信息不完整可能导致审核不通过</span>
|
||||
<span class="text-xs text-gray-6"><span id="charCount">0</span>/200</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 审核流程说明 -->
|
||||
<div class="mt-4 bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50">
|
||||
<h3 class="text-sm font-medium text-gray-13 mb-4">审核流程</h3>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 bg-primary rounded-full flex items-center justify-center text-white text-xs font-medium mb-2">1</div>
|
||||
<span class="text-xs text-gray-7">提交申请</span>
|
||||
</div>
|
||||
<div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">2</div>
|
||||
<span class="text-xs text-gray-6">等待审核</span>
|
||||
</div>
|
||||
<div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">3</div>
|
||||
<span class="text-xs text-gray-6">审核通过</span>
|
||||
</div>
|
||||
<div class="flex-1 h-0.5 bg-gray-200 mx-2"></div>
|
||||
<div class="flex flex-col items-center">
|
||||
<div class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-6 text-xs font-medium mb-2">4</div>
|
||||
<span class="text-xs text-gray-6">开始使用</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="p-4 pb-8 bg-white/80 backdrop-blur-lg border-t border-gray-100">
|
||||
<button id="submitBtn" class="w-full py-4 bg-gradient-to-r from-primary to-blue-500 rounded-xl text-white font-medium text-base shadow-lg shadow-primary/30 active:scale-[0.98] transition-transform">
|
||||
提交申请
|
||||
</button>
|
||||
<p class="text-xs text-gray-5 text-center mt-3">
|
||||
审核通常需要 1-3 个工作日
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const textarea = document.getElementById('applyReason');
|
||||
const charCount = document.getElementById('charCount');
|
||||
const errorTip = document.getElementById('errorTip');
|
||||
const submitBtn = document.getElementById('submitBtn');
|
||||
|
||||
textarea.addEventListener('input', function() {
|
||||
const len = this.value.length;
|
||||
charCount.textContent = len;
|
||||
if (len > 200) {
|
||||
this.value = this.value.slice(0, 200);
|
||||
charCount.textContent = 200;
|
||||
}
|
||||
if (this.value.trim()) {
|
||||
errorTip.classList.add('hidden');
|
||||
}
|
||||
});
|
||||
|
||||
submitBtn.addEventListener('click', function() {
|
||||
if (!textarea.value.trim()) {
|
||||
errorTip.classList.remove('hidden');
|
||||
return;
|
||||
}
|
||||
alert('申请已提交，请等待审核');
|
||||
window.location.href = 'reviewing.html';
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user