generated from root/feiqiu-ETL
feat:引入 TDesign 以及前端初稿
This commit is contained in:
144
Prototype/pages/no-permission.html
Normal file
144
Prototype/pages/no-permission.html
Normal file
@@ -0,0 +1,144 @@
|
||||
<!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',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Noto Sans SC', 'sans-serif'],
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
}
|
||||
.bg-pattern {
|
||||
background-color: #f8fafc;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23e34d59' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: rotate(0deg); }
|
||||
25% { transform: rotate(-5deg); }
|
||||
75% { transform: rotate(5deg); }
|
||||
}
|
||||
.shake-animation {
|
||||
animation: shake 0.5s ease-in-out;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-pattern min-h-screen flex flex-col">
|
||||
<!-- 顶部装饰 -->
|
||||
<div class="absolute top-0 left-0 right-0 h-64 bg-gradient-to-b from-error/10 to-transparent"></div>
|
||||
|
||||
<!-- 主体内容 -->
|
||||
<div class="flex-1 flex flex-col items-center justify-center px-8 relative z-10">
|
||||
<!-- 图标区域 -->
|
||||
<div class="relative mb-8">
|
||||
<!-- 背景光晕 -->
|
||||
<div class="absolute inset-0 w-32 h-32 bg-error/20 rounded-full blur-xl"></div>
|
||||
|
||||
<!-- 主图标 -->
|
||||
<div class="relative w-28 h-28 bg-gradient-to-br from-rose-400 to-red-500 rounded-3xl flex items-center justify-center shadow-xl shadow-error/30">
|
||||
<svg class="w-14 h-14 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"/>
|
||||
<line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 装饰点 -->
|
||||
<div class="absolute -top-2 -right-2 w-4 h-4 bg-error rounded-full opacity-60"></div>
|
||||
<div class="absolute -bottom-1 -left-3 w-3 h-3 bg-rose-300 rounded-full opacity-60"></div>
|
||||
</div>
|
||||
|
||||
<!-- 文字区域 -->
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-2xl font-bold text-gray-10 mb-3">无访问权限</h1>
|
||||
<p class="text-sm text-gray-7 leading-relaxed max-w-xs mx-auto">
|
||||
很抱歉，您的访问申请未通过审核，或当前账号无访问权限
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 原因说明卡片 -->
|
||||
<div class="w-full max-w-sm bg-white rounded-2xl p-5 shadow-lg shadow-gray-200/50 mb-6">
|
||||
<div class="flex items-start gap-4 mb-4">
|
||||
<div class="w-10 h-10 bg-error/10 rounded-xl flex items-center justify-center flex-shrink-0">
|
||||
<svg class="w-5 h-5 text-error" 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-2h2v2zm0-4h-2V7h2v6z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-gray-13 mb-1">可能的原因</p>
|
||||
<ul class="text-xs text-gray-6 space-y-1">
|
||||
<li>• 申请信息不完整或不符合要求</li>
|
||||
<li>• 非本店授权员工账号</li>
|
||||
<li>• 账号权限已被管理员收回</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="pt-4 border-t border-gray-100">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-gray-6">请联系管理员</span>
|
||||
<span class="text-sm text-gray-13 font-medium">厉超</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 帮助提示 -->
|
||||
<div class="flex items-center gap-2 text-gray-6 mb-8">
|
||||
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/>
|
||||
</svg>
|
||||
<span class="text-xs">如有疑问，请联系管理员重新申请</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<div class="px-8 pb-12">
|
||||
<button onclick="switchAccount()" class="w-full py-3.5 bg-white border border-gray-200 rounded-xl text-gray-9 font-medium text-sm flex items-center justify-center gap-2 shadow-sm">
|
||||
<svg class="w-4 h-4" 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>
|
||||
更换登录账号
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchAccount() {
|
||||
// 清除登录凭证
|
||||
localStorage.clear();
|
||||
sessionStorage.clear();
|
||||
// 返回登录页
|
||||
window.location.href = 'login.html';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user