321

src/components/Navbar/index.tsx

 import { IProps } from "@/common/Iprops.interface";
-import * as React from 'react';
-import { useState } from 'react';
-import Logo from '@/assets/img/logo.png';
-import LogoWhite from '@/assets/img/logo_white.png'
-import { Link, useLocation } from 'react-router-dom';
+import * as React from "react";
+import { useCallback, useState } from "react";
+import Logo from "@/assets/img/logo.png";
+import LogoWhite from "@/assets/img/logo_white.png";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import { AppContext } from "@/store/AppProvider";
-export interface IAppProps extends IProps {
-}
-
-const HoverLink = () =>{
-  const [onHover,setOnHover] =useState(false);
-  const slgurl = import.meta.env.VITE_SLG
-  const slcurl = import.meta.env.VITE_SLC
-  const lzburl = import.meta.env.VITE_LZB
+export interface IAppProps extends IProps {}
 
-  const goLink = (name:string)=>{
-    switch(name){
-      case 'slc':
-          window.open(slcurl,'_blank')
+interface HoverLinkType extends IProps {
+  theme: string;
+}
+const HoverLink = (props: HoverLinkType) => {
+  const [onHover, setOnHover] = useState(false);
+  const slgurl = import.meta.env.VITE_SLG;
+  const slcurl = import.meta.env.VITE_SLC;
+  const lzburl = import.meta.env.VITE_LZB;
+  const goLink = (name: string) => {
+    switch (name) {
+      case "slc":
+        window.open(slcurl, "_blank");
         break;
-      case 'slg':
-          window.open(slgurl,'_blank')
+      case "slg":
+        window.open(slgurl, "_blank");
         break;
-        case 'lzb':
-          window.open(lzburl,'_blank')
+      case "lzb":
+        window.open(lzburl, "_blank");
         break;
     }
-  }
+  };
 
   return (
     <div
-     className='relative content-1-cn text-[#061E3B] font-normal'
-      onPointerEnter={()=>setOnHover(true)}
-    onPointerLeave={()=>setOnHover(false)}
+      className={`relative content-1-cn  font-normal ${
+        props.theme === "light" ? "text-[#061E3B]" : "text-white opacity-70"
+      }`}
+      onPointerEnter={() => setOnHover(true)}
+      onPointerLeave={() => setOnHover(false)}
     >
-     <div className='cursor-pointer'
-     >合作生态</div>
-     {
-       onHover?
-          <div className='py-3'>
-              <div className='hover-toggle-box w-[180%]
+      <div className="cursor-pointer">合作生态</div>
+      {onHover ? (
+        <div className="py-3">
+          <div
+            className={`hover-toggle-box w-[180%]
               flex-cols
               absolute
               animate-fadeIn
               animate-alternate
               animate-fill-both
-              bg-opacity-25
-              -translate-x-[18%]  text-theme-dark rounded-lg flex-col
-                items-center justify-center text-center py-3 px-2 bg-[#EAF0F4]'>
-                <div className='my-[8px] cursor-pointer  hover:text-theme-blue' onClick={()=>goLink('slc')}>上链查</div>
-                <div className='my-[8px] cursor-pointer  hover:text-theme-blue' onClick={()=>goLink('slg')}>
+              bg-opacity-30
+               duration-75
+              -translate-x-[18%]  rounded-lg flex-col
+              text-[#061E3B]
+              items-center justify-center text-center py-3 px-2 bg-[#EAF0F4]
+            
+                
+                `}
+          >
+            <div
+              className={`my-[8px] cursor-pointer ${
+                props.theme === "light"
+                  ? "hover:text-theme-blue"
+                  : "hover:text-white"
+              } `}
+              onClick={() => goLink("slc")}
+            >
+              上链查
+            </div>
+            <div
+              className={`my-[8px] cursor-pointer ${
+                props.theme === "light"
+                  ? "hover:text-theme-blue"
+                  : "hover:text-white"
+              } `}
+              onClick={() => goLink("slg")}
+            >
               上链购
             </div>
-                <div className='my-[8px] cursor-pointer  hover:text-theme-blue' onClick={()=>goLink('lzb')}>
+            <div
+              className={`my-[8px] cursor-pointer ${
+                props.theme === "light"
+                  ? "hover:text-theme-blue"
+                  : "hover:text-white"
+              }`}
+              onClick={() => goLink("lzb")}
+            >
               链证宝
             </div>
-                
           </div>
         </div>
-         :''
-     }
+      ) : (
+        ""
+      )}
     </div>
-  )
-}
-
+  );
+};
 
-export default function Navbar (props: IAppProps) {
-  const {pathname} = useLocation()
-  const {data} = React.useContext(AppContext)
+export default function Navbar(props: IAppProps) {
+  const { pathname } = useLocation();
+  const { data } = React.useContext(AppContext);
+  const navigate = useNavigate()
   // console.log('nav',data)
+  const themeStyle = useCallback(
+    (theme: string, active: boolean) => {
+      if (theme === "light") {
+        if (active) {
+          return "text-theme-dark content-sub2-title-cn py-0";
+        }
+        return "text-[#061E3B] font-normal";
+      } else {
+        if (active) {
+          return "content-sub2-title-cn py-0 text-white";
+        }
+        return "font-normal py-0  text-white opacity-70 ";
+      }
+    },
+    [data]
+  );
   return (
-      <nav className='flex min-w-[1440px]  justify-between absolute px-[120px] w-full top-0 z-[99999] py-6 text-sm text-[#061E3B] font-normal '>
-        <div className='left '>
-           <img src={Logo} />
+    <>
+      <nav className="invisible moblie:visible flex min-w-[1440px]  justify-between absolute px-[120px] w-full top-0 z-[99999] py-6 text-sm text-[#061E3B] font-normal ">
+        <div className="left ">
+          <img src={data.theme === "light" ? Logo : LogoWhite} onClick={()=>navigate('/')}  className=" cursor-pointer"/>
         </div>
-        <div className='right content-1-cn items-start flex gap-x-12'>
-        <Link to='/' className={`hover:text-theme-blue ${pathname ==='/'?' text-theme-dark content-sub2-title-cn py-0' :'text-[#061E3B] font-normal'}`}>Baas33</Link>
-        <Link to='chain33' className={`hover:text-theme-blue ${pathname ==='/chain33'?' text-theme-dark content-sub2-title-cn py-0' :'text-[#061E3B] font-normal'}`}>Chain33</Link>
-        <HoverLink />
-       <Link to='news' className={`hover:text-theme-blue ${pathname ==='/news'?' text-theme-dark content-sub2-title-cn py-0' :'text-[#061E3B] font-normal'}`}>新闻动态</Link>
+        <div className="right content-1-cn items-start flex gap-x-12">
+          <Link
+            to="/"
+            className={`hover:text-theme-blue ${
+              pathname === "/"
+                ? themeStyle(data.theme, true)
+                : themeStyle(data.theme, false)
+            }`}
+          >
+            Baas33
+          </Link>
+          <Link
+            to="chain33"
+            className={`hover:text-theme-blue ${
+              pathname === "/chain33"
+                ? themeStyle(data.theme, true)
+                : themeStyle(data.theme, false)
+            }`}
+          >
+            Chain33
+          </Link>
+          <HoverLink theme={data.theme} />
+          <Link
+            to="news"
+            className={`hover:text-theme-blue ${
+              pathname === "/news"
+                ? themeStyle(data.theme, true)
+                : themeStyle(data.theme, false)
+            }`}
+          >
+            新闻动态
+          </Link>
           {/* <Link to='classes' className={`hover: text-theme-dark ${pathname ==='/classes'?' text-theme-dark':'text-[#061E3B] font-normal'}`}>公开课</Link> */}
-        <Link to='about' className={`hover:text-theme-blue ${pathname ==='/about'?' text-theme-dark content-sub2-title-cn py-0' :'text-[#061E3B] font-normal'}`}>关于我们</Link>
+          <Link
+            to="about"
+            className={`hover:text-theme-blue ${
+              pathname === "/about"
+                ? themeStyle(data.theme, true)
+                : themeStyle(data.theme, false)
+            }`}
+          >
+            关于我们
+          </Link>
         </div>
-        {/* <div className='right flex-grow-0'>
-            toolbar
-        </div> */}
       </nav>
-   
+    </>
   );
 }

src/components/ScrollView.tsx

@@ -8,6 +8,7 @@ import ScrollBar from "@better-scroll/scroll-bar";
 import Slide from "@better-scroll/slide";
 import NestedScroll from '@better-scroll/nested-scroll'
 import ContactImg from '@/assets/img/contact.png'
+import ContactImgWhite from '@/assets/img/contactWhite.png'
 import { debounce as _debounce } from 'lodash'
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { LazyImg } from "./LazyImg";
@@ -113,7 +114,6 @@ export const ScrollView = (props: ScrollViewType) => {
           setTimeout(()=>{
             dispatch({type:'slideOnChange',payload:{pageIndex:page.pageY}})
           },0)
-
           return page.pageY
         }
         return prevState
@@ -138,7 +138,7 @@ export const ScrollView = (props: ScrollViewType) => {
       </div>
         <Dots dotNumber={dots} currentPage={currentPage} pageMove={pageMoving}/>
         <LazyImg 
-        img={ContactImg}
+        img={data.theme==='light'?ContactImg:ContactImgWhite}
         animate='contact'
         className='absolute bottom-[20px] right-[100px] w-[234px]'
         ></LazyImg>

src/layouts/AppContianer.tsx

@@ -10,7 +10,7 @@ interface AppContianerType extends IProps{
 export const AppContianer=(props:AppContianerType)=>{
     const {children,bgColor,className} = props
     return(
-        <div className={`px-[120px] min-w-[1440px] labtop:px-[16rem] relative w-full ${className?className:''}`}>
+        <div className={`moblie:px-[120px] moblie:min-w-[1440px] labtop:px-[16rem] relative w-full ${className?className:''}`}>
             {children}
         </div>
     )

src/layouts/BallAnime.tsx

@@ -62,7 +62,7 @@ export const BallAnime = (props: BallAnimeType) => {
   const animation = props.animation ? props.animation : "move-in";
 
   return (
-    <div className="w-full h-full min-w-[1440px]  relative">
+    <div className="w-full h-full moblie:min-w-[1440px]  relative">
       {props.config && props.config.length > 0
         ? props.config.map((i,index) => {
             return <BallHolder key={index} config={i}></BallHolder>;

src/layouts/GradientLay.tsx

@@ -69,7 +69,7 @@ const BgImgHodler = (props:BgElement)=>{
 export const GradientLay = (props: BgAnimeType) => {
   const { children } = props;
   return (
-    <div className=" relative h-full w-full min-w-[1440px] overflow-hidden">
+    <div className=" relative h-full w-full moblie:min-w-[1440px] overflow-hidden">
         <div className="w-full h-full absolute top-0 left-0  z-[-999] ">
             {props&&props.config && props.config.length > 0
                     ? props.config.map((i,index) => {

src/store/AppProvider.tsx

 import { createContext, useEffect, useReducer } from "react"
 import {useLocation} from 'react-router-dom'
+import { fromEvent } from "rxjs"
 
 const data ={
     device:'',
@@ -26,15 +27,11 @@ const AppReducer = (state:typeof data,action:Actions)=>{
             }else{
                 state.theme = 'light'
             }    
-
         break;
         case 'routerOnChange':
             state.currentPage = payload.currentPage
         break;
     }
-    // console.log(state);
-    
-    
     return {...state}
 }
 
@@ -43,7 +40,15 @@ export const AppProvider = (props: any)=>{
     const location = useLocation()
     useEffect(()=>{
         dispatch({type:'routerOnChange',payload:{currentPage:location.pathname}})
+        dispatch({type:'slideOnChange',payload:{pageIndex:0}})
     },[location])
+    useEffect(()=>{
+       const ob = fromEvent(window,'resize')
+       ob.subscribe(v=>{
+        console.log(v,1111);
+        
+       })
+    })
     return(
         <AppContext.Provider value={{data:state,dispatch}}>
             {props.children}

src/views/About/JoinUs/index.tsx

@@ -45,6 +45,7 @@ const DataGrid = (props: DataGridType) => {
 };
 const DtailContainer = (props: DtailContainerType) => {
   const { doCancelSelecteItem, data,className } = props;
+
   return (
     <div className={className+ " -translate-y-[8px]"}>
       <div className={`flex hover:text-theme-blue items-center `}>
@@ -60,7 +61,8 @@ const DtailContainer = (props: DtailContainerType) => {
       <div className='py-[5px]'>
         <div className='flex justify-between'>
           <div className='sub-title-cn'> {data.title}</div>
-          <StyledButton text='我要应聘' color="black"></StyledButton>
+          {/* <a href="mailto: hr@33.cn" className='normal-text block h-[40px] leading-[40px]  tracking-widest cursor-pointer rounded-full px-8 bg-black text-white'> 我要应聘</a> */}
+          {/* <StyledButton text='我要应聘' color="black" onClick={() =>sendEmail}></StyledButton> */}
          </div>
         <div className='normal-text'>{data.diploma}</div>
         <div className='normal-text'>{data.location}</div>
@@ -81,6 +83,7 @@ const DtailContainer = (props: DtailContainerType) => {
           ))}
         </div>
       </div>
+      <div className='content-sub2-title-cn'>有意向者请投简历到该邮箱：<a href="mailto: hr@33.cn">hr@33.cn</a> </div>
     </div>
   );
 };