From 0d99a99d1c39306fe98d7a9f5aa4930956420334 Mon Sep 17 00:00:00 2001 From: nfs0619 <1447996181@qq.com> Date: Wed, 6 Nov 2024 18:10:50 +0800 Subject: [PATCH] fix homepage css --- .../watcher_architecture.md | 2 +- .../watcher_function_module_dev_guide.md | 2 +- .../watcher_idf_installation.md | 2 +- .../watcher_ui_intergration_guide.md | 2 +- generateWiki.js | 5 +- src/components/home/form.module.scss | 28 +++++++--- src/components/home/lasted.tsx | 2 +- src/utils/wiki.js | 56 +++++++++---------- 8 files changed, 55 insertions(+), 44 deletions(-) diff --git a/docs/Sensor/SenseCAP/SenseCAP_Watcher/Firmware_architecture_Overview/watcher_architecture.md b/docs/Sensor/SenseCAP/SenseCAP_Watcher/Firmware_architecture_Overview/watcher_architecture.md index 3961a6688258..effaa0209f93 100644 --- a/docs/Sensor/SenseCAP/SenseCAP_Watcher/Firmware_architecture_Overview/watcher_architecture.md +++ b/docs/Sensor/SenseCAP/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/docs/Sensor/SenseCAP/SenseCAP_Watcher/Firmware_architecture_Overview/watcher_function_module_dev_guide.md b/docs/Sensor/SenseCAP/SenseCAP_Watcher/Firmware_architecture_Overview/watcher_function_module_dev_guide.md index ecce035743dc..575bdc56a0ab 100644 --- a/docs/Sensor/SenseCAP/SenseCAP_Watcher/Firmware_architecture_Overview/watcher_function_module_dev_guide.md +++ b/docs/Sensor/SenseCAP/SenseCAP_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/docs/Sensor/SenseCAP/SenseCAP_Watcher/Firmware_architecture_Overview/watcher_idf_installation.md b/docs/Sensor/SenseCAP/SenseCAP_Watcher/Firmware_architecture_Overview/watcher_idf_installation.md index 5c8292fb0ffd..dc89b6b3af65 100644 --- a/docs/Sensor/SenseCAP/SenseCAP_Watcher/Firmware_architecture_Overview/watcher_idf_installation.md +++ b/docs/Sensor/SenseCAP/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/docs/Sensor/SenseCAP/SenseCAP_Watcher/Firmware_architecture_Overview/watcher_ui_intergration_guide.md b/docs/Sensor/SenseCAP/SenseCAP_Watcher/Firmware_architecture_Overview/watcher_ui_intergration_guide.md index 79b4c2fb435a..6af21485e2aa 100644 --- a/docs/Sensor/SenseCAP/SenseCAP_Watcher/Firmware_architecture_Overview/watcher_ui_intergration_guide.md +++ b/docs/Sensor/SenseCAP/SenseCAP_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 index 8fb1cfa7a6b7..7c404a613815 100644 --- 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 index 245ebd7678ad..88182a993e85 100644 --- 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 index 8fd1740824cf..b7160420e95f 100644 --- a/src/components/home/lasted.tsx +++ b/src/components/home/lasted.tsx @@ -96,7 +96,7 @@ function IndexLatestedViki() {
{group.map((doc, subIndex) => ( - {doc.title} + {doc.title}
{doc.title}
 ))} diff --git a/src/utils/wiki.js b/src/utils/wiki.js index 0d1e9e08eb33..7b57beced835 100644 --- 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" - } ] ];