增加新功能
This commit is contained in:
parent
3707bcaf34
commit
8c2a0e12a3
@ -241,3 +241,178 @@ input:checked + .slider {
|
||||
input:checked + .slider:before {
|
||||
transform: translateX(24px);
|
||||
}
|
||||
|
||||
/* 在现有CSS文件末尾添加以下内容 */
|
||||
|
||||
/* 首页专用样式 */
|
||||
.dashboard {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
gap: 20px;
|
||||
margin: 30px 0;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
flex: 1;
|
||||
background: linear-gradient(135deg, #4285f4, #34a853);
|
||||
color: white;
|
||||
padding: 25px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.dashboard-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.dashboard-card h3 {
|
||||
margin-top: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stat {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
margin: 10px 0 0;
|
||||
}
|
||||
|
||||
.proxy-info {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 10px;
|
||||
padding: 25px;
|
||||
margin: 30px 0;
|
||||
border-left: 4px solid #4285f4;
|
||||
}
|
||||
|
||||
.proxy-info h2 {
|
||||
margin-top: 0;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.proxy-info p {
|
||||
margin: 15px 0;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.proxy-info code {
|
||||
background-color: #e9ecef;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
color: #d63384;
|
||||
}
|
||||
|
||||
/* 响应式设计 */
|
||||
@media (max-width: 768px) {
|
||||
.dashboard {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dashboard-card {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 添加以下新样式 */
|
||||
|
||||
.home-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.home-header .subtitle {
|
||||
color: #6c757d;
|
||||
font-size: 18px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 40px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 14px;
|
||||
opacity: 0.9;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.info-steps {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.step {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.step-number {
|
||||
background-color: #4285f4;
|
||||
color: white;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.action-card {
|
||||
flex: 1;
|
||||
background-color: white;
|
||||
border-radius: 10px;
|
||||
padding: 25px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
transition: transform 0.3s, box-shadow 0.3s;
|
||||
}
|
||||
|
||||
.action-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
font-size: 36px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.action-card h3 {
|
||||
margin: 0 0 10px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.action-card p {
|
||||
margin: 0;
|
||||
color: #6c757d;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.quick-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.step {
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
@ -1,28 +1,61 @@
|
||||
<!-- templates/index.html -->
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Squid代理用户管理系统{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="home-header">
|
||||
<h1>Squid代理用户管理系统</h1>
|
||||
<p class="subtitle">高效、安全的代理服务管理平台</p>
|
||||
</div>
|
||||
|
||||
<div class="dashboard">
|
||||
<div class="dashboard">
|
||||
<div class="dashboard-card">
|
||||
<div class="card-icon">👥</div>
|
||||
<h3>用户数量</h3>
|
||||
<p class="stat">{{ user_count }}</p>
|
||||
<p class="card-desc">当前活跃用户总数</p>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-card">
|
||||
<div class="card-icon">🔌</div>
|
||||
<h3>代理地址</h3>
|
||||
<p class="stat">{{ proxy_address }}:{{ proxy_port }}</p>
|
||||
<p class="card-desc">服务器连接信息</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="proxy-info">
|
||||
<h2>代理使用说明</h2>
|
||||
<p>1. 在浏览器或系统设置中配置代理服务器</p>
|
||||
<p>2. 地址: <code>{{ proxy_address }}</code> 端口: <code>{{ proxy_port }}</code></p>
|
||||
<p>3. 使用格式: <code>http://用户名:密码@{{ proxy_address }}:{{ proxy_port }}</code></p>
|
||||
<p>4. 或者在PAC文件中配置: <code>PROXY {{ proxy_address }}:{{ proxy_port }}</code></p>
|
||||
<div class="proxy-info">
|
||||
<h2><i class="icon">📋</i> 代理使用说明</h2>
|
||||
<div class="info-steps">
|
||||
<div class="step">
|
||||
<span class="step-number">1</span>
|
||||
<p>在浏览器或系统设置中配置代理服务器</p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<span class="step-number">2</span>
|
||||
<p>地址: <code>{{ proxy_address }}</code> 端口: <code>{{ proxy_port }}</code></p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<span class="step-number">3</span>
|
||||
<p>使用格式: <code>http://用户名:密码@{{ proxy_address }}:{{ proxy_port }}</code></p>
|
||||
</div>
|
||||
<div class="step">
|
||||
<span class="step-number">4</span>
|
||||
<p>或者在PAC文件中配置: <code>PROXY {{ proxy_address }}:{{ proxy_port }}</code></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="quick-actions">
|
||||
<a href="{{ url_for('clients') }}" class="action-card">
|
||||
<div class="action-icon">👤</div>
|
||||
<h3>用户管理</h3>
|
||||
<p>添加、编辑或删除用户</p>
|
||||
</a>
|
||||
<a href="{{ url_for('settings') }}" class="action-card">
|
||||
<div class="action-icon">⚙️</div>
|
||||
<h3>系统设置</h3>
|
||||
<p>配置代理参数</p>
|
||||
</a>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
x
Reference in New Issue
Block a user