header_copy.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. <!DOCTYPE html>
  2. <html data-bs-theme="light" lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  6. <title>{dreamer-cms:global name="title" /}</title>
  7. <link rel="stylesheet" href="{dreamer-cms:template /}assets/bootstrap/css/bootstrap.min.css">
  8. <link rel="stylesheet" href="{dreamer-cms:template /}assets/css/Roboto.css">
  9. <link rel="stylesheet" href="{dreamer-cms:template /}assets/css/Roboto%20Slab.css">
  10. <link rel="stylesheet" href="{dreamer-cms:template /}assets/css/styles.css">
  11. <style>
  12. .logo{
  13. max-height: 3.2rem;
  14. }
  15. .nav-bar-box{
  16. display: flex;
  17. flex-wrap: inherit;
  18. align-items: center;
  19. justify-content: space-between;
  20. width: 100%;
  21. }
  22. .nav-bar-header{
  23. width: 100%;
  24. display: flex;
  25. align-items: center;
  26. justify-content: space-between;
  27. }
  28. @media (max-width: 450px) {
  29. .logo{
  30. max-height: 2rem;
  31. }
  32. }
  33. .navbar-toggler-icon {
  34. --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  35. }
  36. .header{
  37. position: relative;
  38. width: 100%;
  39. background: white;
  40. }
  41. .navbar-expand-md .navbar-collapse {
  42. background-color: white;
  43. --bs-navbar-active-color: black;
  44. }
  45. .navbar-toggler {
  46. --bs-navbar-toggler-border-radius: 0;
  47. background-color: #000;
  48. border: none
  49. }
  50. @media (min-width: 768px){
  51. .header{
  52. position: absolute;
  53. top: 0;
  54. z-index: 99999;
  55. width: 100%;
  56. background: transparent;
  57. }
  58. .navbar-expand-md .navbar-collapse {
  59. flex: 0 0 auto;
  60. background-color: white;
  61. --bs-navbar-active-color: black;
  62. }
  63. .navbar-expand-md .navbar-collapse {
  64. background-color: rgba(255, 255, 255, 0);
  65. --bs-navbar-active-color: white;
  66. }
  67. }
  68. </style>
  69. </head>
  70. <body style="margin: 0px;">
  71. <header class="header">
  72. <div class="" style="margin: 0 auto;padding: 0;">
  73. <nav class="navbar navbar-expand-md pt-3" style="width: 100%;">
  74. <div class="nav-bar-box">
  75. <div class="nav-bar-header px-1 px-sm-2 px-md-2 px-l-3 px-xl-4">
  76. <a class="navbar-brand d-flex align-items-center" href="/">
  77. {dreamer-cms:sql sql="select image_path as litpic from system_archives where id = [1800352925088759808]"}
  78. <img class="logo" data-src="/resources/uploads/[field:litpic /]"
  79. src="{dreamer-cms:template /}assets/img/none.png" alt="logo" style="margin: 0 .5rem 0 0;">
  80. {/dreamer-cms:sql}
  81. <!-- <span>{dreamer-cms:global name="title" /}</span> -->
  82. </a>
  83. <button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-2">
  84. <span class="navbar-toggler-icon"></span>
  85. </button>
  86. </div>
  87. <div class="collapse navbar-collapse px-1 px-sm-2 px-md-2 px-l-3 px-xl-4" id="navcol-2">
  88. <ul class="navbar-nav ms-auto">
  89. <li class="nav-item"><a class="nav-link active" href="/">首页</a></li>
  90. {dreamer-cms:categoryartlist length="5"}
  91. {dreamer-cms:if test="('true' eq [field:haschildren/])"}
  92. <li class="nav-item ">
  93. <a class="nav-link active" href="[field:typeurl/]">[field:typenamecn /]</a>
  94. </li>
  95. {/dreamer-cms:if}
  96. {dreamer-cms:if test="('false' eq [field:haschildren/])"}
  97. <li class="nav-item"><a class="nav-link active" href="[field:typeurl /]">[field:typenamecn
  98. /]</a></li>
  99. {/dreamer-cms:if}
  100. {/dreamer-cms:categoryartlist}
  101. </ul>
  102. </div>
  103. </div>
  104. </nav>
  105. </div>
  106. </header>
  107. </body>
  108. </html>