13 changed files with 170 additions and 329 deletions
@ -0,0 +1,54 @@ |
|||
html, |
|||
body { |
|||
margin: 0; |
|||
padding: 0; |
|||
height: 100%; |
|||
font-family: Arial, sans-serif; |
|||
color: #333; |
|||
} |
|||
|
|||
body { |
|||
min-height: 100vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.page-layout { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.page { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
flex: 1; |
|||
position: relative; |
|||
|
|||
max-width: 1226px; |
|||
margin-right: auto; |
|||
margin-left: auto; |
|||
color: white; |
|||
|
|||
} |
|||
|
|||
.content { |
|||
flex: 1; |
|||
width: 0; |
|||
} |
|||
|
|||
@media screen and (max-width: 768px) { |
|||
.content { |
|||
padding: 0 10px; |
|||
padding-top: 40px; |
|||
} |
|||
} |
|||
|
|||
.card { |
|||
padding: 20px; |
|||
border-radius: 28px; |
|||
background: rgba(255, 255, 255, 0.1); |
|||
backdrop-filter: blur(12px); |
|||
color: #fff; |
|||
} |
|||
@ -0,0 +1,14 @@ |
|||
html, |
|||
body { |
|||
margin: 0; |
|||
padding: 0; |
|||
height: 100%; |
|||
font-family: Arial, sans-serif; |
|||
color: #333; |
|||
} |
|||
|
|||
body { |
|||
min-height: 100vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
@ -1,160 +0,0 @@ |
|||
html, |
|||
body { |
|||
margin: 0; |
|||
padding: 0; |
|||
height: 100%; |
|||
font-family: Arial, sans-serif; |
|||
color: #333; |
|||
} |
|||
|
|||
body { |
|||
min-height: 100vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
/* |
|||
body::after { |
|||
content: ""; |
|||
position: fixed; |
|||
pointer-events: none; |
|||
left: 0; |
|||
top: 0; |
|||
right: 0; |
|||
bottom: 0; |
|||
background-image: var(--bg); |
|||
background-size: cover; |
|||
background-repeat: no-repeat; |
|||
background-color: #000000; |
|||
background-color: #f9f9f9; |
|||
filter: brightness(.75); |
|||
z-index: -2; |
|||
} */ |
|||
|
|||
/* .navbar { |
|||
height: 49px; |
|||
display: flex; |
|||
align-items: center; |
|||
box-shadow: 1px 1px 3px #e4e4e4; |
|||
} */ |
|||
|
|||
.title { |
|||
font-size: 1.5em; |
|||
margin-left: 10px; |
|||
color: #333; |
|||
} |
|||
|
|||
.page-layout { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
min-height: 0; |
|||
} |
|||
|
|||
.page { |
|||
width: 100%; |
|||
display: flex; |
|||
flex-direction: row; |
|||
flex: 1; |
|||
position: relative; |
|||
|
|||
/* max-width: 1400px; */ |
|||
/* margin: 0 auto; */ |
|||
} |
|||
|
|||
.content { |
|||
flex: 1; |
|||
width: 0; |
|||
} |
|||
|
|||
.footer {} |
|||
|
|||
.nav { |
|||
padding: 20px; |
|||
} |
|||
|
|||
.flota-nav { |
|||
position: sticky; |
|||
left: 0; |
|||
top: 20px; |
|||
width: 80px; |
|||
padding: 40px 0; |
|||
border-radius: 80px; |
|||
/* background: linear-gradient(135deg, #4fd1ff 0%, #ff6a6a 100%); */ |
|||
/* 更明亮的渐变色 */ |
|||
/* box-shadow: 0 8px 32px 0 rgba(80, 80, 200, 0.18), 0 2px 16px 0 rgba(255, 106, 106, 0.12); */ |
|||
/* 更明显的阴影 */ |
|||
/* transition: background 0.3s, box-shadow 0.3s; */ |
|||
background: rgba(255, 255, 255, 0.1); |
|||
backdrop-filter: blur(12px); |
|||
} |
|||
|
|||
.flota-nav .item { |
|||
display: block; |
|||
width: 100%; |
|||
height: 40px; |
|||
line-height: 40px; |
|||
color: #fff; |
|||
text-align: center; |
|||
cursor: pointer; |
|||
text-decoration: none; |
|||
font-weight: bold; |
|||
font-size: 1.1em; |
|||
letter-spacing: 1px; |
|||
margin-bottom: 8px; |
|||
transition: background 0.2s, color 0.2s, box-shadow 0.2s; |
|||
box-shadow: 0 2px 8px 0 rgba(79, 209, 255, 0.10); |
|||
/* item 也加轻微阴影 */ |
|||
} |
|||
|
|||
.flota-nav .item:hover { |
|||
background: linear-gradient(90deg, #ffb86c 0%, #4fd1ff 100%); |
|||
color: #fff200; |
|||
box-shadow: 0 4px 16px 0 rgba(255, 184, 108, 0.18); |
|||
} |
|||
|
|||
.flota-nav .item.active { |
|||
background: #fff200; |
|||
color: #ff6a6a; |
|||
box-shadow: 0 4px 20px 0 rgba(255, 242, 0, 0.22); |
|||
} |
|||
|
|||
.card { |
|||
padding: 56px 40px 44px 40px; |
|||
border-radius: 28px; |
|||
background: rgba(255, 255, 255, 0.1); |
|||
backdrop-filter: blur(12px); |
|||
color: #fff; |
|||
} |
|||
|
|||
|
|||
@media screen and (max-width: 768px) { |
|||
.nav { |
|||
width: 0; |
|||
height: 0; |
|||
overflow: hidden; |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
.flota-nav { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
right: 0; |
|||
width: 100%; |
|||
display: flex; |
|||
z-index: 9999; |
|||
padding: 0 10px; |
|||
height: 40px; |
|||
border-radius: 0; |
|||
} |
|||
|
|||
.flota-nav .item{ |
|||
margin-bottom: 0; |
|||
padding: 0 10px; |
|||
} |
|||
|
|||
.content { |
|||
padding: 0 10px; |
|||
padding-top: 40px; |
|||
} |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
extends /layouts/root.pug |
|||
//- 采用纯背景页面的布局，背景图片随机切换，卡片采用高斯滤镜类玻璃化效果 |
|||
//- .card |
|||
|
|||
block $$head |
|||
+css('css/layouts/bg-page.css') |
|||
block pageHead |
|||
|
|||
block $$content |
|||
.page-layout |
|||
.page |
|||
block pageContent |
|||
footer |
|||
include /htmx/footer.pug |
|||
|
|||
block $$scripts |
|||
+js('lib/bg-change.js') |
|||
block pageScripts |
|||
@ -1,11 +1,11 @@ |
|||
extends /layouts/pure.pug |
|||
extends /layouts/bg-page.pug |
|||
|
|||
block pageHead |
|||
+css("css/page/index.css") |
|||
|
|||
block pageContent |
|||
div. |
|||
sadasd |
|||
//- div(class="mt-[50px]") |
|||
//- +include() |
|||
//- include /htmx/navbar.pug |
|||
div(class="mt-[20px]") |
|||
+include() |
|||
include /htmx/navbar.pug |
|||
.card(class="mt-[20px]") |
|||
img(src="/static/bg2.webp" alt="bg") |
|||
Loading…
Reference in new issue