leiyun
/
pap_web
1
0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 0 Wiki Aktivität
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
1 Commit
1 Branch
428 KiB
 
 
 
 
 
 
Struktur: e1c935e06f
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „e1c935e06f“
${ noResults }
pap_web/view/admin/dashboard_index.html

208 Zeilen
8.3 KiB
Originalformat Blame Verlauf 

  1. {% extends "./layout.html" %}

  2. 

  3. {% block title %}控制台{% endblock %}

  4. 

  5. {% block css %}

  6. <style>

  7. .stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px;}

  8. .stat-card{

  9.   background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow);

  10.   padding:20px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:14px;

  11.   position:relative;overflow:hidden;transition:.2s;

  12. }

  13. .stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(0,0,0,.1);}

  14. .stat-icon{

  15.   width:48px;height:48px;border-radius:10px;display:flex;

  16.   align-items:center;justify-content:center;flex-shrink:0;

  17. }

  18. .stat-icon svg{width:24px;height:24px;}

  19. .stat-info{flex:1;min-width:0;}

  20. .stat-value{font-size:26px;font-weight:700;color:var(--text);font-family:var(--font-en);line-height:1.2;}

  21. .stat-label{font-size:12px;color:var(--text-secondary);margin-top:4px;}

  22. .stat-footer{

  23.   width:100%;padding-top:12px;margin-top:4px;border-top:1px solid var(--border-light);

  24.   font-size:12px;color:var(--text-secondary);

  25. }

  26. .stat-up{color:var(--success);font-weight:500;}

  27. .stat-down{color:var(--danger);font-weight:500;}

  28. 

  29. .dashboard-row{display:flex;gap:16px;}

  30. 

  31. .shortcuts{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}

  32. .shortcut-item{

  33.   display:flex;flex-direction:column;align-items:center;gap:8px;

  34.   padding:14px 8px;border-radius:var(--radius);transition:.15s;cursor:pointer;

  35.   text-decoration:none;

  36. }

  37. .shortcut-item:hover{background:var(--bg);}

  38. .shortcut-icon{

  39.   width:40px;height:40px;border-radius:10px;display:flex;

  40.   align-items:center;justify-content:center;

  41. }

  42. .shortcut-icon svg{width:20px;height:20px;}

  43. .shortcut-item span{font-size:12px;color:var(--text-regular);}

  44. 

  45. .todo-list{display:flex;flex-direction:column;gap:0;}

  46. .todo-item{

  47.   display:flex;align-items:center;gap:10px;padding:10px 0;

  48.   border-bottom:1px solid var(--border-light);font-size:13px;color:var(--text-regular);

  49. }

  50. .todo-item:last-child{border-bottom:none;}

  51. .todo-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

  52. .todo-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  53. 

  54. @media(max-width:1200px){

  55.   .stat-cards{grid-template-columns:repeat(2,1fr);}

  56.   .dashboard-row{flex-direction:column;}

  57.   .dashboard-row>div:last-child{width:100%;}

  58. }

  59. </style>

  60. {% endblock %}

  61. 

  62. {% block content %}

  63. <!-- 统计卡片 -->

  64. <div class="stat-cards">

  65.   <div class="stat-card">

  66.     <div class="stat-icon" style="background:rgba(232,117,26,.1);color:var(--primary);">

  67.       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>

  68.     </div>

  69.     <div class="stat-info">

  70.       <div class="stat-value">{{ stats.contentCount or 0 }}</div>

  71.       <div class="stat-label">内容总数</div>

  72.     </div>

  73.     <div class="stat-footer"><span class="stat-up">↑ 12%</span> 较上月</div>

  74.   </div>

  75.   <div class="stat-card">

  76.     <div class="stat-icon" style="background:rgba(230,162,60,.1);color:var(--warning);">

  77.       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>

  78.     </div>

  79.     <div class="stat-info">

  80.       <div class="stat-value">{{ stats.pendingCount or 0 }}</div>

  81.       <div class="stat-label">待审核</div>

  82.     </div>

  83.     <div class="stat-footer"><span class="stat-down">↓ 3</span> 较昨日</div>

  84.   </div>

  85.   <div class="stat-card">

  86.     <div class="stat-icon" style="background:rgba(103,194,58,.1);color:var(--success);">

  87.       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>

  88.     </div>

  89.     <div class="stat-info">

  90.       <div class="stat-value">{{ stats.visitCount or '0' }}</div>

  91.       <div class="stat-label">本月访问</div>

  92.     </div>

  93.     <div class="stat-footer"><span class="stat-up">↑ 28%</span> 较上月</div>

  94.   </div>

  95.   <div class="stat-card">

  96.     <div class="stat-icon" style="background:rgba(26,53,80,.1);color:var(--blue);">

  97.       <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>

  98.     </div>

  99.     <div class="stat-info">

  100.       <div class="stat-value">¥{{ stats.donationTotal or '0' }}</div>

  101.       <div class="stat-label">累计捐赠</div>

  102.     </div>

  103.     <div class="stat-footer"><span class="stat-up">↑ 5.2%</span> 较上季</div>

  104.   </div>

  105. </div>

  106. 

  107. <!-- 下方两列 -->

  108. <div class="dashboard-row">

  109.   <!-- 最近更新 -->

  110.   <div class="card" style="flex:1;">

  111.     <div class="card-header">

  112.       <span class="card-title">最近更新</span>

  113.       <button class="el-btn el-btn-sm">查看全部</button>

  114.     </div>

  115.     <table class="el-table">

  116.       <thead>

  117.         <tr>

  118.           <th>标题</th>

  119.           <th>栏目</th>

  120.           <th>状态</th>

  121.           <th>更新时间</th>

  122.         </tr>

  123.       </thead>

  124.       <tbody>

  125.         {% if recentList and recentList.length %}

  126.         {% for item in recentList %}

  127.         <tr>

  128.           <td>{{ item.title }}</td>

  129.           <td>{{ item.column_name }}</td>

  130.           <td>

  131.             {% if item.status == 1 %}

  132.             <span class="el-tag el-tag-success">已发布</span>

  133.             {% else %}

  134.             <span class="el-tag el-tag-warning">待审核</span>

  135.             {% endif %}

  136.           </td>

  137.           <td>{{ item.update_time }}</td>

  138.         </tr>

  139.         {% endfor %}

  140.         {% else %}

  141.         <tr>

  142.           <td colspan="4" style="text-align:center;color:var(--text-secondary);">暂无数据</td>

  143.         </tr>

  144.         {% endif %}

  145.       </tbody>

  146.     </table>

  147.   </div>

  148. 

  149.   <!-- 快捷操作 & 待办 -->

  150.   <div style="width:320px;display:flex;flex-direction:column;gap:16px;">

  151.     <!-- 快捷操作 -->

  152.     <div class="card">

  153.       <div class="card-header">

  154.         <span class="card-title">快捷操作</span>

  155.       </div>

  156.       <div class="shortcuts">

  157.         <a href="/admin/content/article-edit.html" class="shortcut-item">

  158.           <div class="shortcut-icon" style="background:rgba(232,117,26,.1);color:var(--primary);">

  159.             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>

  160.           </div>

  161.           <span>发布文章</span>

  162.         </a>

  163.         <a href="/admin/content/image.html" class="shortcut-item">

  164.           <div class="shortcut-icon" style="background:rgba(103,194,58,.1);color:var(--success);">

  165.             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>

  166.           </div>

  167.           <span>上传图片</span>

  168.         </a>

  169.         <a href="/admin/data/medicine.html" class="shortcut-item">

  170.           <div class="shortcut-icon" style="background:rgba(26,53,80,.1);color:var(--blue);">

  171.             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>

  172.           </div>

  173.           <span>录入数据</span>

  174.         </a>

  175.         <a href="#" class="shortcut-item">

  176.           <div class="shortcut-icon" style="background:rgba(230,162,60,.1);color:var(--warning);">

  177.             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>

  178.           </div>

  179.           <span>审核内容</span>

  180.         </a>

  181.       </div>

  182.     </div>

  183. 

  184.     <!-- 待办事项 -->

  185.     <div class="card">

  186.       <div class="card-header">

  187.         <span class="card-title">待办事项</span>

  188.       </div>

  189.       <div class="todo-list">

  190.         {% if todoList and todoList.length %}

  191.         {% for item in todoList %}

  192.         <div class="todo-item">

  193.           <span class="todo-dot" style="background:var(--warning);"></span>

  194.           <span class="todo-text">{{ item.title }}</span>

  195.         </div>

  196.         {% endfor %}

  197.         {% else %}

  198.         <div class="todo-item">

  199.           <span class="todo-dot" style="background:var(--success);"></span>

  200.           <span class="todo-text">暂无待办事项</span>

  201.         </div>

  202.         {% endif %}

  203.       </div>

  204.     </div>

  205.   </div>

  206. </div>

  207. {% endblock %}