Merge pull request #1849 from nfs0619/fixhomepage

fix homepage css
Seeed-Studio · Nov 7, 2024 · 53e4d85 · 53e4d85
2 parents 4478e2a + 0d99a99
commit 53e4d85
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 44 deletions.
diff --git a/...enseCAP/SenseCAP_Watcher/Firmware_architecture_Overview/watcher_architecture.md b/...enseCAP/SenseCAP_Watcher/Firmware_architecture_Overview/watcher_architecture.md
@@ -1,7 +1,7 @@
 ---
 description: Introducing the SenseCAP Watcher software framework.
 title: Watcher Software Framework
-image: https://files.seeedstudio.com/wiki/watcher_software_framework/architecture.png
+image: https://files.seeedstudio.com/wiki/watcher_software_framework/architecture_1.webp
 slug: /watcher_software_framework
 sidebar_position: 2
 last_update:

diff --git a/...CAP_Watcher/Firmware_architecture_Overview/watcher_function_module_dev_guide.md b/...CAP_Watcher/Firmware_architecture_Overview/watcher_function_module_dev_guide.md
@@ -1,7 +1,7 @@
 ---
 description: Describes how to develop a Watcher function block.
 title: Watcher Function Module Development Guide
-image: https://files.seeedstudio.com/wiki/watcher_software_framework/architecture.png
+image: https://files.seeedstudio.com/wiki/watcher_software_framework/watcher_function_module.webp
 slug: /watcher_function_module_development_guide
 sidebar_position: 3
 last_update:

diff --git a/...CAP/SenseCAP_Watcher/Firmware_architecture_Overview/watcher_idf_installation.md b/...CAP/SenseCAP_Watcher/Firmware_architecture_Overview/watcher_idf_installation.md
@@ -1,7 +1,7 @@
 ---
 description: Introduces how to download Watcher's open source repository and build an IDF environment.
 title: Build the Watcher Development Environment
-image: https://files.seeedstudio.com/wiki/watcher_getting_started/64.jpg
+image: https://files.seeedstudio.com/wiki/watcher_getting_started/64.webp
 slug: /build_watcher_development_environment
 sidebar_position: 1
 last_update:

diff --git a/...enseCAP_Watcher/Firmware_architecture_Overview/watcher_ui_intergration_guide.md b/...enseCAP_Watcher/Firmware_architecture_Overview/watcher_ui_intergration_guide.md
@@ -1,7 +1,7 @@
 ---
 description: Introduces how to develop your own set of UI for Watcher, with the help of SquareLine Studio and LVGL.
 title: Watcher UI Integration Guide
-image: https://files.seeedstudio.com/wiki/watcher_software_framework/ui_framework.png
+image: https://files.seeedstudio.com/wiki/watcher_software_framework/ui_framework.webp
 slug: /watcher_ui_integration_guide
 sidebar_position: 4
 last_update:

diff --git a/generateWiki.js b/generateWiki.js
@@ -7,8 +7,9 @@ const wikiFilePath = path.join(__dirname, '/src/utils/wiki.js')
 
 const docList = []
 const excludedPaths = [
-  path.join(docsDirectory, 'Seeed_Elderly', 'weekly_wiki'), // 排除的目录
-  path.join(docsDirectory, 'weekly_wiki.md') // 排除的文件
+  path.join(docsDirectory, 'Seeed_Elderly', 'weekly_wiki'), // weekly wiki 的历史目录
+  path.join(docsDirectory, 'zh-CN'), // 排除中文文档的目录
+  path.join(docsDirectory, 'weekly_wiki.md') // 排除 weekly wiki 的文件
 ];
 
 // 递归函数，用于遍历多层文件夹

diff --git a/src/components/home/form.module.scss b/src/components/home/form.module.scss
@@ -165,8 +165,8 @@
     img {
       border-radius: 12px;
       margin-bottom: 20px;
-      height: 200px;
-      width: 100%;
+      width: 100%;            /* 图片宽度占满容器宽度 */
+      aspect-ratio: 4 / 3;    /* 设置宽高比为 4:3 */
 
     }
 
@@ -189,7 +189,8 @@
   @media (max-width: 768px) {
     .wiki_item {
       img {
-        height: 100px;
+        width: 100%;             /* 图片宽度占满容器 */
+        aspect-ratio: 4 / 3;     /* 继续保持 4:3 比例 */
       }
     }
   }
@@ -261,6 +262,11 @@
 
       .wiki_name {
         height: 56px;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;      /* 显示的行数 */
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
         margin-top: 18px;
       }
 
@@ -269,10 +275,9 @@
       }
 
       img {
-        border-radius: 12px;
-        // margin-bottom: 20px;
-        height: 200px;
-        width: 100%;
+        width: 100%;        /* 图片宽度占满容器宽度 */
+        aspect-ratio: 1;    /* 宽高比为 1:1 */
+        border-radius: 12px; /* 圆角效果 */
 
       }
     }
@@ -315,10 +320,15 @@
     .browseBy_container {
 
       .doc_item {
-        width: calc(50% - 10px);
+        width: calc(50% - 10px); /* 在移动端调整每行显示 2 个项 */
 
+        .wiki_name {
+          font-size: 16px; /* 调整字体大小 */
+        }
+
         img {
-          height: 100px;
+          height: auto;           /* 高度自动调整 */
+          aspect-ratio: 1;        /* 保持 1:1 的宽高比 */
         }
 
         &:nth-child(2n) {

diff --git a/src/components/home/lasted.tsx b/src/components/home/lasted.tsx
@@ -96,7 +96,7 @@ function IndexLatestedViki() {
               <div className={css.wiki_group}>
                 {group.map((doc, subIndex) => (
                   <a className={css.wiki_item} href={doc.path} key={subIndex}>
-                    <img src={doc.image} alt={doc.title} style={{ maxWidth: '210px', height: '160px' }} />
+                    <img src={doc.image} alt={doc.title} />
                     <div className={css.wiki_name}>{doc.title}</div>
                   </a>
                 ))}

diff --git a/src/utils/wiki.js b/src/utils/wiki.js
@@ -1,4 +1,32 @@
 const docList = [
+  [
+    {
+      "path": "/watcher_software_framework",
+      "image": "https://files.seeedstudio.com/wiki/watcher_software_framework/architecture_1.webp",
+      "title": "Software Architecture",
+      "date": "11/5/2024"
+    },
+    {
+      "path": "/watcher_function_module_development_guide",
+      "image": "https://files.seeedstudio.com/wiki/watcher_software_framework/watcher_function_module.webp",
+      "title": "Watcher Function Module Development Guide",
+      "date": "11/5/2024"
+    }
+  ],
+  [
+    {
+      "path": "/build_watcher_development_environment",
+      "image": "https://files.seeedstudio.com/wiki/watcher_getting_started/64.webp",
+      "title": "Build the Watcher Development Environment",
+      "date": "11/5/2024"
+    },
+    {
+      "path": "/watcher_ui_integration_guide",
+      "image": "https://files.seeedstudio.com/wiki/watcher_software_framework/ui_framework.webp",
+      "title": "UI Integration Guide",
+      "date": "11/5/2024"
+    }
+  ],
   [
     {
       "path": "/xiao_rp2350_arduino",
@@ -54,34 +82,6 @@ const docList = [
       "title": "SenseCAP Watcher Task Assignment Guideline",
       "date": "10/18/2024"
     }
-  ],
-  [
-    {
-      "path": "/watcher_hardware_overview",
-      "image": "https://files.seeedstudio.com/wiki/watcher_getting_started/hardware_overview_1.webp",
-      "title": "SenseCAP Watcher Hardware Overview",
-      "date": "10/18/2024"
-    },
-    {
-      "path": "/watcher_operation_guideline",
-      "image": "https://files.seeedstudio.com/wiki/watcher_getting_started/0_1.webp",
-      "title": "SenseCAP Watcher Operation Guideline",
-      "date": "10/18/2024"
-    }
-  ],
-  [
-    {
-      "path": "/watcher_price",
-      "image": "https://files.seeedstudio.com/wiki/watcher_getting_started/price_month_simpler_1.webp",
-      "title": "SenseCraft AI for Watcher Plans and Benefits",
-      "date": "10/18/2024"
-    },
-    {
-      "path": "/sensecap_app_introduction",
-      "image": "https://files.seeedstudio.com/wiki/watcher_getting_started/sensecraft_app.webp",
-      "title": "SenseCraft APP Guideline",
-      "date": "10/18/2024"
-    }
   ]
 ];