You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.7 KiB
100 lines
2.7 KiB
extends /layouts/page.pug
|
|
|
|
block pageContent
|
|
.about-container
|
|
h1 关于我们
|
|
p 我们致力于打造一个基于 Koa3 的现代 Web 示例项目，帮助开发者快速上手高效、可扩展的 Web 应用开发。
|
|
.about-section
|
|
h2 我们的愿景
|
|
p 推动 Node.js 生态下的现代 Web 技术发展，降低开发门槛，提升开发体验。
|
|
.about-section
|
|
h2 技术栈
|
|
ul
|
|
li Koa3
|
|
li Pug 模板引擎
|
|
li 现代前端技术（如 ES6+、CSS3）
|
|
.about-section
|
|
h2 联系我们
|
|
p 如有建议或合作意向，欢迎通过
|
|
a(href="mailto:1549469775@qq.com") 联系方式
|
|
| 与我们取得联系。
|
|
|
|
style.
|
|
.about-container {
|
|
margin: 32px auto 0 auto;
|
|
padding: 56px 40px 44px 40px;
|
|
border-radius: 28px;
|
|
background: rgba(255, 255, 255, 0.25);
|
|
backdrop-filter: blur(18px);
|
|
|
|
//- max-width: 900px;
|
|
//- min-width: 340px;
|
|
}
|
|
.about-container h1 {
|
|
font-size: 2.7em;
|
|
color: rgb(80, 168, 255);
|
|
margin-bottom: 28px;
|
|
text-align: center;
|
|
font-weight: 900;
|
|
letter-spacing: 2.5px;
|
|
text-shadow: 0 2px 16px rgba(33,150,243,0.10);
|
|
background: linear-gradient(90deg,rgb(80, 168, 255) 30%, #7ec6f7 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.about-container p {
|
|
font-size: 1.18em;
|
|
color: #fff;
|
|
margin-bottom: 26px;
|
|
line-height: 1.85;
|
|
}
|
|
.about-section {
|
|
margin-bottom: 38px;
|
|
padding-bottom: 14px;
|
|
border-bottom: 1px dashed #b2ebf2;
|
|
}
|
|
.about-section:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.about-section h2 {
|
|
font-size: 1.22em;
|
|
color:rgb(80, 168, 255);
|
|
margin-bottom: 10px;
|
|
font-weight: 700;
|
|
letter-spacing: 1.2px;
|
|
background: linear-gradient(90deg,rgb(80, 168, 255) 60%, #7ec6f7 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.about-section ul {
|
|
padding-left: 28px;
|
|
margin-bottom: 0;
|
|
}
|
|
.about-section li {
|
|
font-size: 1.08em;
|
|
color: #fff;
|
|
margin-bottom: 8px;
|
|
line-height: 1.7;
|
|
}
|
|
.about-container a {
|
|
color:rgb(80, 168, 255);
|
|
text-decoration: underline;
|
|
font-weight: 600;
|
|
transition: color 0.2s, background 0.2s;
|
|
border-radius: 8px;
|
|
padding: 1px 4px;
|
|
}
|
|
.about-container a:hover {
|
|
color: #fff;
|
|
background: linear-gradient(90deg, #7ec6f7 0%, #ff8ca8 100%);
|
|
text-decoration: none;
|
|
}
|
|
@media (max-width: 900px) {
|
|
.about-container {
|
|
max-width: 98vw;
|
|
padding: 18px 4vw 18px 4vw;
|
|
}
|
|
.about-container h1 {
|
|
font-size: 1.5em;
|
|
}
|
|
}
|
|
|