Skip to content

Commit c8fec2a

Browse files
xuwei-fit2cloudxuwei-fit2cloud
committed
style: 修改导航栏样式
1 parent 294e08d commit c8fec2a

File tree

2 files changed

+16
-68
lines changed

2 files changed

+16
-68
lines changed

‎theme/css/f2c-header.css‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -131,31 +131,29 @@ button::-moz-focus-inner{padding:0;border:0;}
131131
.mega-nav-sandbox .mega-nav-icon-outline .mega-nav-icon{display:block;}
132132
.mega-nav-sandbox .mega-nav-body-ct{bottom:0;display:none;left:0;overflow-y:auto;position:fixed;right:0;top:0;z-index:1100;}
133133
.mega-nav-sandbox .mega-nav.open .mega-nav-body-ct{display:block;}
134-
.mega-nav-sandbox .mega-nav-body{background-color:white;box-shadow:0 2px 16px rgba(79,99,122,0.2);color:black;margin:1em;padding:1em;}
134+
.mega-nav-sandbox .mega-nav-body{background-color:white;box-shadow:0 2px 16px rgba(79,99,122,0.2);color:black;margin:1em;padding:1em;border-radius: 6px;}
135135
.mega-nav-sandbox .mega-nav-body-footer{color:#a4b1b2;display:none;}
136136
.mega-nav-sandbox .mega-nav-close{background-color:transparent;border:1px solid currentColor;float:right;margin-left:1em;margin-bottom:1em;padding:0.5em;text-align:center;}
137137
.mega-nav-sandbox .mega-nav-close:hover,.mega-nav-sandbox .mega-nav-close:focus{color:#333333;outline:none;}
138138
.mega-nav-sandbox .mega-nav-close:active{outline:none;}
139139
.mega-nav-sandbox .mega-nav-close .mega-nav-icon{display:block;}
140-
@media (min-width: 570px){
141-
.mega-nav-sandbox .mega-nav-body{padding:2em 2em 1em;}
142-
}
140+
.mega-nav-sandbox .mega-nav-body .mega-nav-ul {list-style: none;margin: 0 !important;padding: 0;min-width: 280px;font-size: 12px;}
141+
.mega-nav-sandbox .mega-nav-body .mega-nav-ul li {padding: 10px 10px;}
142+
.mega-nav-sandbox .mega-nav-body .mega-nav-ul li a {font-weight: 400;color: #3c4858;}
143+
.mega-nav-sandbox .mega-nav-body .mega-nav-ul li a:hover {color: #007bff;}
143144
@media (min-width: 768px){
144145
.mega-nav-sandbox .mega-nav-banner-item:first-child{display:block;}
145146
}
146147
@media (min-width: 992px){
147148
.mega-nav-sandbox .mega-nav{position:relative;}
148149
.mega-nav-sandbox .mega-nav::before{border-bottom:1em solid white;border-left:0.71429em solid transparent;border-right:0.71429em solid transparent;content:' ';display:none;height:0;left:50%;position:absolute;top:100%;transform:translateX(-50%);width:0;z-index:1101;}
149-
.mega-nav-sandbox .mega-nav-body-ct{bottom:auto;left:auto;overflow:visible;position:absolute;right:0;top:100%;width:940px;}
150+
.mega-nav-sandbox .mega-nav-body-ct{bottom:auto;left:auto;overflow:visible;position:absolute;right:0;top:100%;}
150151
.mega-nav-sandbox .mega-nav-body{margin:1em 0 0;}
151152
.mega-nav-sandbox .mega-nav-body-header{text-align:center;}
152153
.mega-nav-sandbox .mega-nav-body-header-item:last-child{margin-left:auto;}
153154
.mega-nav-sandbox .mega-nav-body-footer{display:block;padding-top:1em;}
154155
.mega-nav-sandbox .mega-nav-close{display:none;}
155156
}
156-
@media (min-width: 1200px){
157-
.mega-nav-sandbox .mega-nav-body-ct{width:1140px;}
158-
}
159157
.text-muted{color:#8492a6!important;font-weight:600;}
160158
.rounded{border-radius:6px!important;}
161159
.card .card-body{padding:1.5rem;}
@@ -188,9 +186,6 @@ h4,h5{font-family:-apple-system, BlinkMacSystemFont, "Neue Haas Grotesk Text Pro
188186
.card{background:none;}
189187
@media (max-width: 768px){
190188
.notice-phone{display:none!important;}
191-
.mega-nav-sandbox .mega-nav-body{background-color:white;box-shadow:0 2px 16px rgba(79,99,122,0.2);color:black;margin:1em;padding:1em!important;}
192-
}
193-
.mega-nav-sandbox .mega-nav-body{background-color:white;box-shadow:0 2px 16px rgba(79,99,122,0.2);color:black;margin-top:1em;padding:1em;padding-left:100px;padding-right:100px;}
194189
.explore-feature .icon-size{height:30px;width:30px;line-height:30px;-webkit-transition:all 0.5s ease;transition:all 0.5s ease;}
195190
.explore-feature .product-text-color{color:#6c757d;}
196191
.explore-feature:hover .bg-js{background-color:#2b937c;color:white!important;}

‎theme/f2c-header.html‎

Lines changed: 10 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -44,63 +44,16 @@
4444

4545
<div id="mega-nav-body-ct" class="mega-nav-body-ct" aria-labelledby="mega-nav-ctrl" style="display: none;">
4646
<div class="mega-nav-body" style="margin-top: 0.5rem">
47-
<button type="button" id="mega-nav-close" class="mega-nav-close">
48-
<svg class="mega-nav-icon mega-nav-icon-close" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#mega-nav-icon-close"></use></svg>
49-
<span class="visuallyhidden">Close</span>
50-
</button>
51-
<div class="mega-nav-body-header">
52-
<div class="mega-nav-body-header-item">
53-
<h5 class="mt-4 mb-2 text-center title-weight400" style="font-size: 23px">我们基于创新的开源模式，向中国数字化团队交付被广泛验证、可信赖的通用工具软件。</h5>
54-
</div>
55-
</div>
56-
<div class="row">
57-
<div class="col-lg-4 col-md-6 col-6 mt-2 pt-2" style="flex:0 0 33%;max-width:50%">
58-
<div class="card explore-feature border-0 rounded text-center bg-white shadow">
59-
<a href="https://www.jumpserver.org/" target="_blank" class="product-text-color">
60-
<div class="card-body card-item">
61-
<h5 style="color: #000000">运维审计</h5>
62-
<div class="mb-4">
63-
<img src="{{ base_url }}/img/logo/banner-nav-JumpServer.svg" alt="JumpServer Logo">
64-
<p class="text-muted mb-2 pl-0 pr-0" style="font-size: 14px;">
65-
广受欢迎的开源堡垒机</p>
66-
<img alt="GitHub stars" src="https://img.shields.io/github/stars/jumpserver/jumpserver?style=social">
67-
</div>
68-
</div>
69-
</a>
70-
</div>
71-
</div>
72-
<div class="col-lg-4 col-md-6 col-6 mt-2 pt-2" style="flex:0 0 33%;max-width:50%">
73-
<div class="card explore-feature border-0 rounded text-center bg-white shadow">
74-
<a href="https://dataease.io/" target="_blank" class="product-text-color">
75-
<div class="card-body card-item">
76-
<h5 style="color: #000000">BI 分析</h5>
77-
<div class="mb-4">
78-
<img src="{{ base_url }}/img/logo/banner-nav-DataEase.svg" alt="DataEase Logo">
79-
<p class="text-muted mb-2 pl-0 pr-0" style="font-size: 14px;">
80-
人人可用的开源数据可视化分析工具</p>
81-
<img alt="GitHub stars" src="https://img.shields.io/github/stars/dataease/dataease?style=social">
82-
</div>
83-
</div>
84-
</a>
85-
</div>
86-
</div>
87-
<div class="col-lg-4 col-md-6 col-6 mt-2 pt-2" style="flex:0 0 33%;max-width:50%">
88-
<div class="card explore-feature border-0 rounded text-center bg-white shadow">
89-
<a href="https://metersphere.io/" target="_blank" class="product-text-color">
90-
<div class="card-body card-item">
91-
<h5 style="color: #000000">软件测试</h5>
92-
<div class="mb-4">
93-
<img src="{{ base_url }}/img/logo/banner-nav-MeterSphere.svg" alt="MeterSphere Logo">
94-
<p class="text-muted mb-2 pl-0 pr-0" style="font-size: 14px;">
95-
一站式开源持续测试平台</p>
96-
<img alt="GitHub stars" src="https://img.shields.io/github/stars/metersphere/metersphere?style=social">
97-
</div>
98-
</div>
99-
</a>
100-
</div>
101-
</div>
102-
</div>
103-
<div class="mega-nav-body-footer"></div>
47+
<ul class="mega-nav-ul">
48+
<li><a href="https://1panel.cn/" target="_blank">1Panel - 现代化、开源的 Linux 面板</a></li>
49+
<li><a href="https://www.fit2cloud.com/jumpserver/index.html" target="_blank">JumpServer - 广受欢迎的开源堡垒机</a></li>
50+
<li><a href="https://www.fit2cloud.com/dataease/index.html" target="_blank">DataEase - 人人可用的开源 BI 工具</a></li>
51+
<li><a href="https://www.fit2cloud.com/metersphere/index.html" target="_blank">MeterSphere - 开源持续测试平台</a></li>
52+
<li><a href="https://halo.run/" target="_blank">Halo - 强大易用的开源建站工具</a></li>
53+
<li><a href="https://github.com/1Panel-dev/MaxKB" target="_blank">MaxKB - 基于大模型的开源知识库问答系统</a></li>
54+
<li><a href="https://www.fit2cloud.com/cloudexplorer-lite/index.html" target="_blank">CloudExplorer Lite - 开源轻量级云管平台</a></li>
55+
<li><a href="https://www.fit2cloud.com/gitea/index.html" target="_blank">Gitea - 新一代的代码托管平台（By 上海吉谛）</a></li>
56+
</ul>
10457
</div>
10558
</div>
10659
</div>

0 commit comments

Comments
 (0)