base.html 3.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>{% block title %}期货数据管理系统{% endblock %}</title>
  7. <!-- Bootstrap CSS -->
  8. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  9. <!-- Font Awesome -->
  10. <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
  11. <!-- Custom CSS -->
  12. <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
  13. <style>
  14. /* 固定表头 */
  15. .table thead th {
  16. position: -webkit-sticky; /* for Safari */
  17. position: sticky;
  18. top: 0; /* 或者根据你的导航栏高度调整 */
  19. background-color: #f8f9fa; /* 表头背景色,避免下方内容透上来 */
  20. z-index: 1020; /* 确保表头在其他元素之上,小于导航栏 */
  21. }
  22. /* 解决边框问题 */
  23. .table-responsive {
  24. overflow: visible; /* 允许粘性定位生效 */
  25. }
  26. </style>
  27. {% block styles %}{% endblock %}
  28. </head>
  29. <body>
  30. <!-- 导航栏 -->
  31. <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  32. <div class="container">
  33. <a class="navbar-brand" href="{{ url_for('index') }}">期货数据管理系统</a>
  34. <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
  35. <span class="navbar-toggler-icon"></span>
  36. </button>
  37. <div class="collapse navbar-collapse" id="navbarNav">
  38. <ul class="navbar-nav mr-auto">
  39. <li class="nav-item">
  40. <a class="nav-link" href="{{ url_for('future_info.index') }}">期货基础信息</a>
  41. </li>
  42. <li class="nav-item">
  43. <a class="nav-link" href="{{ url_for('transaction.index') }}">交易记录</a>
  44. </li>
  45. <li class="nav-item">
  46. <a class="nav-link" href="{{ url_for('trade.index') }}">交易汇总</a>
  47. </li>
  48. <li class="nav-item">
  49. <a class="nav-link" href="{{ url_for('monitor.index') }}">标的监控</a>
  50. </li>
  51. </ul>
  52. </div>
  53. </div>
  54. </nav>
  55. <!-- 主内容区 -->
  56. <div class="container mt-4">
  57. {% block content %}{% endblock %}
  58. </div>
  59. <!-- 页脚 -->
  60. <footer class="footer mt-5 py-3 bg-light">
  61. <div class="container">
  62. <span class="text-muted">© 2023 期货数据管理系统</span>
  63. </div>
  64. </footer>
  65. <!-- Toast容器 -->
  66. <div id="toast-container" class="toast-container position-fixed bottom-0 end-0 p-3"></div>
  67. <!-- jQuery -->
  68. <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
  69. <!-- Bootstrap Bundle with Popper -->
  70. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  71. <script src="{{ url_for('static', filename='js/main.js') }}"></script>
  72. {% block scripts %}{% endblock %}
  73. </body>
  74. </html>