提交代码

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'}>

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={() => {

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'}>

src/pages/index/index.scss

@@ -1,3 +1,3 @@
-page {
+body {
 
 }

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>
           </>
         )