321

.env.development

 NODE_ENV=dev
 VITE_FETCH_URL = http://localhost:3333/
 VITE_CHAIN33_DOC = "http://localhost:3335"
-VITE_BAAS33_DOC = "http://localhost:3336"
+VITE_BAAS33_DOC = "http://localhost:3336"
\ No newline at end of file
+VITE_NEWS_API = "'https://33.cn/api/"
\ No newline at end of file

src/components/LazyImg.tsx

+import { IProps } from "@/common/Iprops.interface"
+import { useEffect, useRef, useState } from "react"
+import {gsap} from 'gsap'
+interface LazyImgType extends IProps{
+    img:any
+}
+
+export const LazyImg =(props:LazyImgType)=>{
+    const {img,className}=props
+    const [show,setShow] = useState(false)
+    const imgbox = useRef(null)
+    const loaded = (e:any)=>{
+        if(e){
+            setShow(true)
+        }
+    }
+    useEffect(()=>{
+        gsap.from(imgbox.current,{opacity:0,y:300,duration:0.8})
+    },[])
+    return(
+        <img src={img} ref={imgbox} className={`${show?" visible":" invisible"} ${className}`} onLoad={loaded}/>
+    )
+}
\ No newline at end of file

src/fetch/dataFetch.tsx

@@ -48,4 +48,5 @@ export const getEvents = (index:number)=>{
         return output
    }));
    return observable
-}
+}
\ No newline at end of file
+

src/service/api.ts

 import {service , newsService} from ".";
 import { Job } from "./types";
-import {filter, from} from "rxjs"
+import {filter, from, map} from "rxjs"
 import { AxiosResponse } from "axios";
 export const getJobsByDept = async (department: string) => {
   return service.get<unknown, Job[]>(
@@ -19,9 +19,14 @@ export const getJobsById = async (id: string) => {
   )
 }
 
-export const getNews = async () => {
-  let data: AxiosResponse<any, any>
+export const getNews = () => {
   const res = newsService.get(`news/newsList`)
   const observable = from(res).pipe(filter(r=>r.data))
   return observable
+}
+
+export const getNewsDetail = (id:string)=>{
+  const res =newsService.get(`news/news?id=${id}`)
+  const ob = from(res).pipe(map(v=>v.data))
+  return ob
 }
\ No newline at end of file

src/service/index.ts

@@ -5,7 +5,7 @@ const service = Axios.create(
   }
 )
 const newsService = Axios.create({
-  baseURL: 'https://33.cn/api/'
+  baseURL: '/proxyFile'
 })
 
 const response_interceptor = (res: AxiosResponse<any>) => {

src/views/Chain33/index.tsx

@@ -4,7 +4,7 @@ import { PageLayout } from "@/layouts/PageLayout";
 import chain33Bg from "@/assets/img/chain33.png";
 import StyledButton from "@/components/StyledButton";
 import { IProps } from "@/common/Iprops.interface";
-import { useMemo } from "react";
+import { Suspense, useMemo } from "react";
 import { AppContianer } from "@/layouts/AppContianer";
 import { GradientLay } from "@/layouts/GradientLay";
 import Gao from '@/assets/img/gao.png'
@@ -13,6 +13,7 @@ import Kuo from '@/assets/img/kuo.png'
 import Weng from '@/assets/img/weng.png'
 import An from '@/assets/img/an.png'
 import { useNavigate } from "react-router";
+import { LazyImg } from "@/components/LazyImg";
 interface HeroItemType extends IProps{
     heroTitle: string;
     subtitle:string;
@@ -60,7 +61,9 @@ export default function Chain33() {
         <PageLayout>
           <div className="w-full h-full flex justify-center items-baseline overflow-hidden">
             <div className="img-holder w-10/12 xl:w-8/12 relative ">
-              <div className="absolute w-full h-full flex items-center -translate-x-[5%] -translate-y-[15%] justify-center text-white">
+               
+   
+              <div className="absolute z-[999] w-full h-full flex items-center -translate-x-[5%] -translate-y-[15%] justify-center text-white">
                 <div>
                   <div className="p-5  border-white border-[4px] rounded xl:border-[8px]">
                     <div className="text-7xl xl:text-9xl tracking-widest font-bold">
@@ -78,11 +81,11 @@ export default function Chain33() {
                 </div>
               </div>
 
-              <img
-                onLoad={imgOnload}
-                src={chain33Bg}
-                className="object-scale-down   object-bottom"
-              />
+              <LazyImg
+                img={chain33Bg}
+                className='object-scale-down object-bottom z-[9]'
+              ></LazyImg>
+        
             </div>
           </div>
         </PageLayout>

src/views/News/NewsDetails.tsx

 import { IProps } from "@/common/Iprops.interface";
 import { AppContianer } from "@/layouts/AppContianer";
 import { PageLayout } from "@/layouts/PageLayout";
+import { getNews, getNewsDetail } from "@/service/api";
+import { useEffect, useState } from "react";
+import { useParams } from "react-router";
+import { map } from "rxjs";
 
 interface NewsDetailsType extends IProps{}
 export const NewsDetails = (props:NewsDetailsType)=>{
+    const params = useParams()
+    const [data,setData] = useState<any>()
+    const [latestNews,setLatestNews] = useState<any>()
+    useEffect(() => {
+        if(params['id']){
+            getNewsDetail(params['id']).subscribe(v=>{
+                setData(v)
+            })
+        }
+    },[params])
+    useEffect(()=>{
+        getNews().pipe(map(v=> v.data.list)).subscribe(v=>{
+            const d = v.sort((a:any,b:any)=>{
+                return b.time_stamp - a.time_stamp
+            })
+            const output = d.filter((i:any,index:number)=>{
+                return index<5
+            })
+            setLatestNews(output)
+        })
+    },[])
     return(
-        <PageLayout>
+        <PageLayout className=" overflow-y-scroll">
             <AppContianer>
-                <div className="flex normal-text">
-                    <div className='left'>
+                <div className="flex normal-text ">
+                    <div className="w-2/12">
                         <div className='flex-col pr-5 pt-12 text-center '>
                                 <div className='py-5'>
                                     <div>- 来源 -</div>
@@ -21,20 +46,25 @@ export const NewsDetails = (props:NewsDetailsType)=>{
                                 </div>
                                 <div className='py-5'>
                                 <div>- 作者 -</div>
-                                    <div className='content-sub-title-cn'>复杂美科技</div>
+                                    <div className='content-sub-title-cn'>{data&&data.publisher}</div>
                                 </div>
                         </div>
                     </div>
-                    <div className='center flex-grow'>
+                    <div className="w-8/12">
                         <div className='richRender pt-5 px-20'>
-                        richcontent from 33 news service
+                            <div className='title-1-cn'>{data&&data.title}</div>
+                            <div dangerouslySetInnerHTML={{__html:data&&data.content}} className="py-5"></div>
                         </div>
                     </div>
-                    <div className='right'>
-                        <div className='flex-col pl-5 pt-12'>
+                    <div className='w-2/12 '>
+                        <div className='flex-col  pt-12'>
                             <div className='content-sub-title-cn'>最新消息</div>
                             <div>
-                                news Items
+                                {
+                                  latestNews&&latestNews.map((k:any,index:number)=>(
+                                    <div key={index} className="py-1 normal-text cursor-pointer hover:text-theme-blue">{k.title}</div>
+                                  ))  
+                                }
                             </div>
                         </div>
                     </div>

vite.config.ts

@@ -20,7 +20,14 @@ export default defineConfig({
     },
   },
   server:{
-    port:8008
+    port:8008,
+    proxy:{
+      "/proxyFile":{
+        target:'https://33.cn/api/',
+        changeOrigin: true,
+        rewrite: path => path.replace(/^\/proxyFile/, '')
+      }
+    }
   },
   build:{
     sourcemap:false,