From 906156070eadc2eb91dc617c478183a2a58d322c Mon Sep 17 00:00:00 2001
From: Qubot <1445788683@qq.com>
Date: Mon, 5 May 2025 13:34:40 +0000
Subject: [PATCH] add product page
---
templates/assets/css/style.css | 79 +++++++++++++++++++++++++++++++++-
templates/products.html | 26 +++++++++++
templates/resume.html | 26 +++++++++++
theme.yaml | 8 ++++
4 files changed, 138 insertions(+), 1 deletion(-)
create mode 100644 templates/products.html
create mode 100644 templates/resume.html
diff --git a/templates/assets/css/style.css b/templates/assets/css/style.css
index 5b4061e..3604a99 100644
--- a/templates/assets/css/style.css
+++ b/templates/assets/css/style.css
@@ -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
--------------------------------------------------------------*/
diff --git a/templates/products.html b/templates/products.html
new file mode 100644
index 0000000..d0d5766
--- /dev/null
+++ b/templates/products.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/templates/resume.html b/templates/resume.html
new file mode 100644
index 0000000..d0d5766
--- /dev/null
+++ b/templates/resume.html
@@ -0,0 +1,26 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/theme.yaml b/theme.yaml
index 3bdc2ce..623c72b 100644
--- a/theme.yaml
+++ b/theme.yaml
@@ -38,3 +38,11 @@ spec:
description: 博客
screenshot:
file: blog.html
+ - name: 产品页
+ description: 用于介绍公司产品
+ screenshot:
+ file: products.html
+ - name: 个人简历
+ description: 个人简历页面模板
+ screenshot:
+ file: resume.html