add product page
This commit is contained in:
parent
0865e2de16
commit
906156070e
@ -685,7 +685,7 @@ section {
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# categories
|
||||
# category
|
||||
--------------------------------------------------------------*/
|
||||
.blog-posts{
|
||||
max-width: 1200px;
|
||||
@ -775,6 +775,83 @@ section {
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# categories
|
||||
--------------------------------------------------------------*/
|
||||
/* 基础布局与样式 */
|
||||
ul.category-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap; /* 支持换行 */
|
||||
gap: 15px; /* 项目之间的间距 */
|
||||
}
|
||||
|
||||
.category-item {
|
||||
list-style: none;
|
||||
width: calc(25% - 15px); /* 每行展示四个分类项 */
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.category-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
transition: box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
.category-item:hover .category-card {
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
transform: translateY(-5px); /* 卡片悬浮效果 */
|
||||
}
|
||||
|
||||
.category-link {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
padding: 15px 20px;
|
||||
background-color: #f8f8f8;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.category-link:hover {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
.category-name {
|
||||
font-size: 18px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 响应式布局 */
|
||||
@media (max-width: 1024px) {
|
||||
.category-item {
|
||||
width: calc(33.33% - 15px); /* 中等屏幕（如平板）上，每行显示三个分类项 */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.category-item {
|
||||
width: calc(50% - 15px); /* 小屏幕（如手机）上，每行显示两个分类项 */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.category-item {
|
||||
width: 100%; /* 极小屏幕上，每行显示一个分类项 */
|
||||
}
|
||||
}
|
||||
|
||||
/*--------------------------------------------------------------
|
||||
# article
|
||||
--------------------------------------------------------------*/
|
||||
|
||||
26
templates/products.html
Normal file
26
templates/products.html
Normal file
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="https://www.thymeleaf.org" lang="zh-CN">
|
||||
|
||||
<th:block th:replace="~{modules/import}" />
|
||||
|
||||
<body>
|
||||
<th:block th:replace="~{modules/header::goPage('home')}" />
|
||||
<main>
|
||||
<div class="main-content">
|
||||
<article>
|
||||
<h1 th:text="${singlePage.spec.title}"></h1>
|
||||
<div th:utext="${singlePage.content.content}"> </div>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<!-- ======= Footer ======= -->
|
||||
<th:block th:replace="~{modules/footer}" />
|
||||
<!-- End Footer -->
|
||||
<script th:src="@{/assets/js/script.js?v={version}(version=${theme.spec.version})}"></script>
|
||||
<script type="module"
|
||||
src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/ionicons/5.5.2/ionicons/ionicons.esm.js"></script>
|
||||
<script nomodule
|
||||
src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/ionicons/5.5.2/ioniconshttps://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/ionicons/5.5.2/ionicons/ionicons.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
26
templates/resume.html
Normal file
26
templates/resume.html
Normal file
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="https://www.thymeleaf.org" lang="zh-CN">
|
||||
|
||||
<th:block th:replace="~{modules/import}" />
|
||||
|
||||
<body>
|
||||
<th:block th:replace="~{modules/header::goPage('home')}" />
|
||||
<main>
|
||||
<div class="main-content">
|
||||
<article>
|
||||
<h1 th:text="${singlePage.spec.title}"></h1>
|
||||
<div th:utext="${singlePage.content.content}"> </div>
|
||||
</article>
|
||||
</div>
|
||||
</main>
|
||||
<!-- ======= Footer ======= -->
|
||||
<th:block th:replace="~{modules/footer}" />
|
||||
<!-- End Footer -->
|
||||
<script th:src="@{/assets/js/script.js?v={version}(version=${theme.spec.version})}"></script>
|
||||
<script type="module"
|
||||
src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/ionicons/5.5.2/ionicons/ionicons.esm.js"></script>
|
||||
<script nomodule
|
||||
src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/ionicons/5.5.2/ioniconshttps://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/ionicons/5.5.2/ionicons/ionicons.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -38,3 +38,11 @@ spec:
|
||||
description: 博客
|
||||
screenshot:
|
||||
file: blog.html
|
||||
- name: 产品页
|
||||
description: 用于介绍公司产品
|
||||
screenshot:
|
||||
file: products.html
|
||||
- name: 个人简历
|
||||
description: 个人简历页面模板
|
||||
screenshot:
|
||||
file: resume.html
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user