From ffb6e93dc85d910206327af071bca53a4fffce40 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E5=BF=A0=E6=9E=97?= <170083662@qq.com>
Date: Sun, 13 Apr 2025 16:09:03 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/cms/article.tsx        | 13 +++++-
 src/components/Header.tsx  |  3 +-
 src/pages/index/Help.tsx   |  2 +-
 src/pages/index/index.scss |  2 +-
 src/pages/index/index.tsx  | 89 ++++++++++++++++++++++++++++++--------
 5 files changed, 85 insertions(+), 24 deletions(-)

diff --git a/src/cms/article.tsx b/src/cms/article.tsx
index 19b409d..539d185 100644
--- a/src/cms/article.tsx
+++ b/src/cms/article.tsx
@@ -5,6 +5,7 @@ import {CmsArticle} from "@/api/cms/cmsArticle/model";
 import Taro from '@tarojs/taro'
 import {useRouter} from '@tarojs/taro'
 import Header from "@/components/Header";
+import {getCmsNavigation} from "@/api/cms/cmsNavigation";
 
 /**
  * 文章终极列表
@@ -13,7 +14,15 @@ import Header from "@/components/Header";
 const Article = () => {
   const {params} = useRouter();
   const [list, setList] = useState<CmsArticle[]>([])
+  const [title, setTitle] = useState<string>()
+
   const reload = () => {
+    getCmsNavigation(Number(params.id)).then(res => {
+      setTitle(res.title)
+      Taro.setNavigationBarTitle({
+        title: `${res.title}`
+      })
+    })
     pageCmsArticle({categoryId: Number(params.id)}).then(res => {
       if (res?.list) {
         setList(res?.list)
@@ -23,11 +32,11 @@ const Article = () => {
 
   useEffect(() => {
     reload()
-  }, [])
+  }, [params])
 
   return (
     <>
-      <Header title={'帮助中心'} />
+      <Header title={title} />
       <div className={'px-2'}>
         <div className={'flex flex-col justify-between items-center bg-white px-3 py-1'}>
           <div className={'bg-white min-h-36 w-full'}>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 26d79d0..72e11cf 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -7,7 +7,8 @@ function Header(props) {
     <>
       <NavBar
         style={{
-          backgroundColor: '#cf1313',
+          background: 'url(https://oss.wsdns.cn/20250413/defb52abb1414429930ae2727d2b8ff6.png)',
+          backgroundSize: 'cover',
           color: '#fff',
         }}
         onBackClick={() => {
diff --git a/src/pages/index/Help.tsx b/src/pages/index/Help.tsx
index b19833a..6b611fe 100644
--- a/src/pages/index/Help.tsx
+++ b/src/pages/index/Help.tsx
@@ -33,7 +33,7 @@ const Help = (props: any) => {
     <div className={'bg-white'}>
       <div className={'flex flex-col justify-between items-center bg-white p-3'}>
         <div className={'title-bar flex justify-between items-center w-full mb-2'}>
-          <div className={'font-bold text-sm flex text-gray-800 justify-center items-center'}>{props.title}帮助中心</div>
+          <div className={'font-bold text-sm flex text-gray-800 justify-center items-center'}>{props.title}</div>
           <a className={'text-gray-400 text-xs'} onClick={() => Taro.navigateTo({url: `/cms/article?id=${categoryId}`})}>查看全部</a>
         </div>
         <div className={'bg-white min-h-36 w-full'}>
diff --git a/src/pages/index/index.scss b/src/pages/index/index.scss
index f79efd0..5b7e679 100644
--- a/src/pages/index/index.scss
+++ b/src/pages/index/index.scss
@@ -1,3 +1,3 @@
-page {
+body {
 
 }
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 343ded3..a195f10 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -1,25 +1,27 @@
-import './index.scss'
 import Taro from '@tarojs/taro';
 import {useEffect, useState} from "react";
 import {getSiteInfo} from "@/api/layout";
 import {CmsWebsite} from "@/api/cms/cmsWebsite/model";
-import {Avatar, NavBar, Grid} from '@nutui/nutui-react-taro'
-import Help from "./Help";
+import {Avatar, NavBar} from '@nutui/nutui-react-taro'
+// import Help from "./Help";
+import './index.scss'
 
 function Home() {
   const [website, setWebsite] = useState<CmsWebsite>()
-
-  const onNav = (item:any) => {
-    if(item.model == 'article'){
+  const [screenWidth, setScreenWidth] = useState(390)
+  const onNav = (item: any) => {
+    if (item.model == 'article') {
       Taro.navigateTo({
         url: `/cms/article?id=${item.navigationId}`
       })
     }
-    if(item.model == 'links'){
+    if (item.model == 'links') {
       window.open(item.path, '_self')
     }
   }
   const reload = () => {
+    const systemInfoSync = Taro.getSystemInfoSync();
+    setScreenWidth(systemInfoSync.screenWidth)
     // 获取站点信息
     getSiteInfo().then((data) => {
       console.log(data, 'siteInfo')
@@ -39,7 +41,8 @@ function Home() {
           <>
             <NavBar
               style={{
-                backgroundColor: '#cf1313',
+                background: 'url(https://oss.wsdns.cn/20250413/defb52abb1414429930ae2727d2b8ff6.png)',
+                backgroundSize: 'cover',
                 color: '#fff',
               }}
               fixed={true}
@@ -57,18 +60,66 @@ function Home() {
               }
             >
             </NavBar>
-            <div className={'fixed top-8 p-2 py-3 w-full bg-red-50'}>
-              <Grid columns={3}>
-                {website.topNavs?.map((item, index) => {
-                  return (
-                    <Grid.Item key={index} text={item.title} onClick={() => onNav(item)}>
-                      <Avatar src={item.icon}/>
-                    </Grid.Item>
-                  )
-                })}
-              </Grid>
+            <div
+              className={'mt-8 p-2 py-3 w-full'}
+              style={{
+                height: 'calc(100vh - 2rem)',
+                background: screenWidth > 390 ? 'url(https://oss.wsdns.cn/20250413/4650a6d214434159a5d6bf161c7a9367.png?x-oss-process=image/resize,m_fixed,w_2000/quality,Q_90) #fef2f2' : 'url(https://oss.wsdns.cn/20250413/4650a6d214434159a5d6bf161c7a9367.png?x-oss-process=image/resize,m_fixed,w_750/quality,Q_90) #fef2f2',
+                backgroundSize: screenWidth > 390 ? 'cover' : '100%',
+                backgroundPosition: 'bottom',
+                backgroundRepeat: 'no-repeat'
+              }}>
+              {/*PC*/}
+              {screenWidth > 800 && (
+                <>
+                  {website.topNavs?.map((item, index) => {
+                    return (
+                      <div style={{maxWidth: '1024px',marginBottom: '20px'}} className={'item bg-white p-2 m-auto rounded-lg hover:bg-red-200 cursor-pointer'} onClick={() => onNav(item)}>
+                        <div key={index} className={'flex items-center'}>
+                          <Avatar src={item.icon} size={'90'}/>
+                          <div className={'flex flex-col ml-3'}>
+                            <div className={'title font-bold'} style={{ fontSize: '24px'}}>{item.title}</div>
+                            <div className={'comments text-gray-400 my-1'} style={{ fontSize: '18px'}}>{item.comments}</div>
+                          </div>
+                        </div>
+                      </div>
+                    )
+                  })}
+                </>
+              )}
+              {/*H5*/}
+              {
+                screenWidth < 800 && (
+                  <>
+                    {website.topNavs?.map((item, index) => {
+                      return (
+                        <div className={'w-full item bg-white mb-2 p-2 m-auto rounded-lg cursor-pointer'} onClick={() => onNav(item)}>
+                          <div key={index} className={'flex items-center'}>
+                            <Avatar src={item.icon} size={'45'}/>
+                            <div className={'flex flex-col ml-3'}>
+                              <div className={'title font-bold'} style={{ fontSize: '18px'}}>{item.title}</div>
+                              <div className={'comments text-gray-400 my-1'} style={{ fontSize: '14px'}}>{item.comments}</div>
+                            </div>
+                          </div>
+                        </div>
+                      )
+                    })}
+                  </>
+                  // <>
+                  //   <Grid columns={3}>
+                  //     {website.topNavs?.map((item, index) => {
+                  //       return (
+                  //         <Grid.Item key={index} text={item.title} onClick={() => onNav(item)}>
+                  //           <Avatar src={item.icon}/>
+                  //         </Grid.Item>
+                  //       )
+                  //     })}
+                  //   </Grid>
+                  // </>
+                )
+              }
               <div className={'h-3'}></div>
-              <Help title={'帮助中心'}/>
+              {/*<Help title={'帮助中心'}/>*/}
             </div>
           </>
         )