321

a2ec0a01 · mxm-web-develop · bf354f84 · a2ec0a01 · a2ec0a01 · a2ec0a01
Commit a2ec0a01 authored Jul 28, 2022 by mxm-web-develop
33 changed files
--- a/.env.development
+++ b/.env.development
 NODE_ENV=dev
-VITE_FETCH_URL = http://121.40.18.70:3333/
-VITE_CHAIN33_DOC = "http://121.40.18.70:3335/guide/"
-VITE_BAAS33_DOC = "http://192.168.31.12:3336"
\ No newline at end of file
+VITE_FETCH_URL = http://localhost:3333/
+VITE_CHAIN33_DOC = "http://localhost:3335"
+VITE_BAAS33_DOC = "http://localhost:3336"
\ No newline at end of file
--- a/env.production
+++ b/env.production
--- a/.env.test
+++ b/.env.test
+NODE_ENV=test
+VITE_FETCH_URL = http://localhost:3333/
+VITE_CHAIN33_DOC = "http://localhost:3335"
+VITE_BAAS33_DOC = "http://localhost:3336"
\ No newline at end of file
--- a/README.md
+++ b/README.md
+## 中文-Noto Sans Simplified Chinese
+
+
+## number Bebas Neue  ,,, Righteous
\ No newline at end of file
--- a/index.html
+++ b/index.html
@@ -5,6 +5,16 @@
    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
+
+
+    <link rel="preconnect" href="https://fonts.font.im">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.font.im/css2?family=Bebas+Neue&family=Catamaran:wght@300&family=DM+Sans&display=swap&family=Righteous&display=swap&family=Noto+Sans+SC:wght@400;700" rel="stylesheet">
+
+
+    <!-- <link rel="preconnect" href="https://fonts.font.im">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.font.im/css2?family=Catamaran:wght@300&family=DM+Sans&display=swap" rel="stylesheet"> -->
  </head>
  <body>
    <div id="root"></div>

--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
  "dependencies": {
    "@better-scroll/core": "^2.4.2",
    "@better-scroll/mouse-wheel": "^2.4.2",
+    "@better-scroll/nested-scroll": "^2.4.2",
    "@better-scroll/observe-dom": "^2.4.2",
    "@better-scroll/pull-up": "^2.4.2",
    "@better-scroll/scroll-bar": "^2.4.2",
@@ -18,6 +19,7 @@
    "ahooks": "^3.4.1",
    "axios": "^0.27.2",
    "gsap": "^3.10.4",
+    "jquery": "^3.6.0",
    "lodash": "^4.17.21",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
@@ -27,6 +29,7 @@
  },
  "devDependencies": {
    "@tailwindcss/line-clamp": "^0.4.0",
+    "@types/jquery": "^3.5.14",
    "@types/lodash": "^4.14.182",
    "@types/node": "^17.0.31",
    "@types/react": "^18.0.0",

--- a/src/assets/img/an.png
+++ b/src/assets/img/an.png
--- a/src/assets/img/gao.png
+++ b/src/assets/img/gao.png
--- a/src/assets/img/jian.png
+++ b/src/assets/img/jian.png
--- a/src/assets/img/kuo.png
+++ b/src/assets/img/kuo.png
--- a/src/assets/img/weng.png
+++ b/src/assets/img/weng.png
--- a/src/components/EventsScrollView.tsx
+++ b/src/components/EventsScrollView.tsx
+import { useAsyncState } from "@/common/hooks";
+import { IProps } from "@/common/Iprops.interface";
+import { AppContext } from "@/store/AppProvider";
+import BScroll from "@better-scroll/core";
+import { BScrollConstructor } from "@better-scroll/core/dist/types/BScroll";
+import MouseWheel from "@better-scroll/mouse-wheel";
+import NestedScroll from '@better-scroll/nested-scroll'
+import Slide from "@better-scroll/slide";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+interface ScrollViewType extends IProps {
+  wrapHeight?: string;
+  prop?: any;
+}
+
+const initBScroll = (el:HTMLElement) => {
+  const res = new BScroll(el, {
+    click: true,
+    mouseWheel: {
+      speed: 20,
+      invert: false,
+      easeTime: 300,
+    },
+    slide: {
+      threshold: 100,
+      autoplay:true,
+      startPageYIndex:0,
+      loop:false,
+    },
+    probeType:2,
+    nestedScroll: true,
+    
+    //  显示滚动条,
+    useTransition:true,
+    scrollX: true,
+    momentum: false,
+    scrollY: false,
+    bounce: false,
+    stopPropagation: true,
+  })
+  return res
+};
+
+
+export const EventsScrollView = (props: ScrollViewType) => {
+  BScroll.use(MouseWheel);
+  BScroll.use(Slide);
+  BScroll.use(NestedScroll);
+  const { wrapHeight, children } = props;
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [dots,setDots]= useState(0)
+  const [scrollObj, setScrollObj] = useState<BScrollConstructor<{}>>();
+  const [currentPage,setCurrentPage] = useState(0)
+
+    const {data,dispatch} = useContext(AppContext)
+    useEffect(()=>{
+      console.log(data);
+      dispatch({type:'doSome'})
+    },[])
+    useEffect(()=>{
+      const scrollEl =  initBScroll(wrapRef.current as HTMLDivElement)
+      setScrollObj(scrollEl)
+      return () => {
+        scrollObj?.destroy();
+    };
+  },[wrapRef])
+
+  useEffect(()=>{
+    const page = scrollObj?.plugins['slide'].pages.currentPage
+    page&&
+    setCurrentPage((prevState: number)=>{
+      if(prevState !==  page.pageY){
+        return  page.pageY
+      }
+      return prevState
+    })
+    scrollObj?.on('slidePageChanged', (page:any) => {
+      setCurrentPage((prevState: number)=>{
+        if(prevState !== page.pageY){
+          return  page.pageY
+        }
+        return prevState
+      })
+    })
+  },[scrollObj])
+
+
+  return (
+    <div
+      className="slide-vertical "
+      style={{ overflow: "hidden" }}
+    >
+      <div className="vertical-wrapper w-full h-full relative" ref={wrapRef}>
+          {children}
+      </div>
+    </div>
+  );
+};
--- a/src/components/HoverBox.tsx
+++ b/src/components/HoverBox.tsx
 import { IProps } from "@/common/Iprops.interface";
 import * as React from 'react';
-import { PointerEventHandler, useMemo, useRef } from 'react';
-import { throttle as _throttle } from 'lodash';
+import { useRef } from 'react';
+
 export interface HoverBoxType extends IProps {
   
 }
@@ -9,36 +9,11 @@ export interface HoverBoxType extends IProps {
 export default function HoverBox (props: HoverBoxType) {
  const item = useRef(null)
  const {children, className} = props;
-  const moveIn = _throttle((e:any)=>{
-      e.stopPropagation();
-      const target =item.current! as HTMLElement
-      const coverLayer = target.nodeName === 'LI'?target.children[0]:target
-      if(coverLayer){
-        const isHidden= Array.from(coverLayer.classList.values()).includes('hidden')
-        if(isHidden){
-            coverLayer.classList.remove(...['hidden'])
-        }
-      } 
-},550)
- const moveOut = _throttle((e:any)=>{
-    e.stopPropagation();
-    const target = item.current! as HTMLElement
-    const coverLayer = target.nodeName === 'LI'?target.children[0]:target
-    if(coverLayer){
-      const isHidden= Array.from(coverLayer.classList.values()).includes('hidden')
-      if(!isHidden){
-          coverLayer.classList.add(...['hidden'])
-      }
-    }
- },550)
  return (
    <li
        ref={item}
        className={" hoverGlass " + " " +className }
-        onPointerEnter={moveIn}
-        onPointerLeave={moveOut}
    >
-    <div className="absolute -z-[3] duration-150 hidden rounded-lg backdrop-filter blur-[2px] top-0 left-0 bg-white/10 border-2 border-white  w-full h-full px-5 py-5"></div>
    {children}
  </li>
  );

--- a/src/components/ScrollView.tsx
+++ b/src/components/ScrollView.tsx
@@ -6,6 +6,9 @@ import { BScrollConstructor } from "@better-scroll/core/dist/types/BScroll";
 import MouseWheel from "@better-scroll/mouse-wheel";
 import ScrollBar from "@better-scroll/scroll-bar";
 import Slide from "@better-scroll/slide";
+import NestedScroll from '@better-scroll/nested-scroll'
+
+
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 interface ScrollViewType extends IProps {
  wrapHeight?: string;
@@ -33,6 +36,7 @@ const initBScroll = (el:HTMLElement) => {
    momentum: false,
    scrollY: true,
    scrollbar: true,
+    nestedScroll: true,
    bounce: false,
    stopPropagation: true,
  })
@@ -71,6 +75,7 @@ export const ScrollView = (props: ScrollViewType) => {
  BScroll.use(MouseWheel);
  BScroll.use(ScrollBar);
  BScroll.use(Slide);
+  BScroll.use(NestedScroll)
  const { wrapHeight, children } = props;
  const wrapRef = useRef<HTMLDivElement>(null);
  const [dots,setDots]= useState(0)

--- a/src/config/ballSetting.ts
+++ b/src/config/ballSetting.ts
@@ -113,7 +113,7 @@ export const aboutBalls=[
        setting: [
            {
              size: "8%",
-              position: ["12%", "54%"],
+              position: ["7%", "54%"],
              rotation: "210",
              zIndex: "9999",
              color: "blue",

--- a/src/config/bgSetting.ts
+++ b/src/config/bgSetting.ts
@@ -7,13 +7,13 @@ export const baasBg = [
        page:1,
        config:[
            {
-              size: ["30%","55%"],
-              position: ["10%", "35%"],
+              size: ["37%","65%"],
+              position: ["16%", "30%"],
              align:'left',
              zIndex: "-99",
              rotation:'90',
              color: "cyan",
-              blur:'30px'
+              blur:'20px'
          },
          {
              size:[ "70%",'550px'],
@@ -22,7 +22,7 @@ export const baasBg = [
              rotation:'-0',
              zIndex: "-180",
              color: "blue",
-              blur:'50px'
+              blur:'30px'
            }
          ]
    },
@@ -30,22 +30,22 @@ export const baasBg = [
        page:2,
        config:[
            {
-              size: ["90%","50%"],
-              position: ["0%", "50%"],
+              size: ["55%","50%"],
+              position: ["0%", "30%"],
              align:'right',
              zIndex: "-99",
-              rotation:'90',
+              rotation:'180',
              color: "cyan",
              blur:'30px'
          },
          {
              size:[ "85%",'65%'],
              align: "left",
-              position: ["0%", "15%"],
+              position: ["-5%", "15%"],
              rotation:'270',
              zIndex: "180",
              color: "blue",
-              blur:'130px'
+              blur:'40px'
            },
          ]
    },
@@ -53,26 +53,42 @@ export const baasBg = [
        page:3,
        config:[
            {
-              size: ["50%","45%"],
-              position: ["10%", "35%"],
+              size: ["32%","65%"],
+              position: ["15%", "25%"],
              align:'left',
              zIndex: "-99",
-              rotation:'180',
+              rotation:'90',
              color: "cyan",
-              blur:'100px'
+              blur:'30px'
          },
          {
-              size:[ "80%",'45%'],
+              size:[ "87%",'45%'],
              align: "left",
-              position: ["85px", "13%"],
+              position: ["3%", "9%"],
              rotation:'-0',
              zIndex: "-180",
              color: "blue",
-              blur:'150px'
+              blur:'70px'
            }
          ]
    }
 ]
+export const newsBg =[
+  {
+    page:0,
+    config:[
+        {
+          size: ["45%","85%"],
+          position: ["-5%", "10%"],
+          align:'right',
+          zIndex: "-99",
+          rotation:'-360',
+          color: "cyan",
+          blur:'40px'
+      }
+      ]
+} 
+]

 export const detailsBg = [
  {
@@ -98,4 +114,122 @@ export const detailsBg = [
        }
      ]
 } 
+]
+
+export const aboutBg = [
+  {
+    page:0,
+    config:[
+        {
+          size: ["50%","65%"],
+          position: ["10%", "16%"],
+          align:'right',
+          zIndex: "-99",
+          rotation:'360',
+          color: "cyan",
+          blur:'40px'
+      },
+      {
+          size:[ "80%",'75%'],
+          align: "left",
+          position: ["-3%", "13%"],
+          rotation:'-90',
+          zIndex: "-90",
+          color: "blue",
+          blur:'60px'
+        }
+      ]
+  },
+  {
+    page:1,
+    config:[
+        {
+          size: ["35%","55%"],
+          position: ["10%", "35%"],
+          align:'left',
+          zIndex: "-99",
+          rotation:'180',
+          color: "cyan",
+          blur:'30px'
+      },
+      {
+          size:[ "80%",'45%'],
+          align: "left",
+          position: ["85px", "8%"],
+          rotation:'360',
+          zIndex: "-180",
+          color: "blue",
+          blur:'50px'
+        }
+      ]
+  },  
+  {
+    page:2,
+    config:[
+        {
+          size: ["50%","55%"],
+          position: ["5%", "25%"],
+          align:'left',
+          zIndex: "-99",
+          rotation:'90',
+          color: "cyan",
+          blur:'30px'
+      },
+      {
+          size:[ "85%",'45%'],
+          align: "right",
+          position: ["85px", "8%"],
+          rotation:'360',
+          zIndex: "-180",
+          color: "blue",
+          blur:'50px'
+        }
+      ]
+  },  
+  {
+    page:3,
+    config:[
+      {
+        size: ["50%","55%"],
+        position: ["5%", "25%"],
+        align:'left',
+        zIndex: "-99",
+        rotation:'90',
+        color: "cyan",
+        blur:'30px'
+    },
+      {
+        size:[ "85%",'45%'],
+        align: "right",
+        position: ["85px", "8%"],
+        rotation:'360',
+        zIndex: "-180",
+        color: "blue",
+        blur:'50px'
+      }
+      ]
+  }, 
+  {
+    page:4,
+    config:[
+      {
+        size: ["50%","55%"],
+        position: ["5%", "25%"],
+        align:'left',
+        zIndex: "-99",
+        rotation:'90',
+        color: "cyan",
+        blur:'30px'
+    },
+      {
+        size:[ "85%",'45%'],
+        align: "right",
+        position: ["85px", "8%"],
+        rotation:'360',
+        zIndex: "-180",
+        color: "blue",
+        blur:'50px'
+      }
+      ]
+  }, 
 ]
\ No newline at end of file
--- a/src/fetch/dataFetch.tsx
+++ b/src/fetch/dataFetch.tsx
-import { AxiosRequestConfig } from "axios";
+import { AxiosRequestConfig, AxiosResponse } from "axios";
+import { count, from, map, Observable,reduce,tap } from "rxjs";
 import { initialization } from "./axios";
-
+import {chunk as _chunk} from 'lodash';
 export const baseURL = import.meta.env.VITE_FETCH_URL
 export const axiosRequestConfiguration: AxiosRequestConfig = {
    baseURL,
@@ -33,4 +34,18 @@ export const getJobs =  async(department?: string)=>{
    }else{
        throw new Error('network went wrong')
    }
+}
+
+
+export const getEvents = (index:number)=>{
+//    const res = await req.get('/events')
+   const observable = from(req.get('/events')).pipe(map(res =>res.data),map((v,i) =>{ 
+        const l = v.length
+        // const group = Math.ceil(l/index)
+        const output= _chunk(v,index)
+        console.log(output);
+        
+        return output
+   }));
+   return observable
 }
\ No newline at end of file
--- a/src/layouts/GradientLay.tsx
+++ b/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 overflow-hidden">
+    <div className=" relative h-full w-full min-w-[1200px] 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) => {

--- a/src/layouts/PageLayout.tsx
+++ b/src/layouts/PageLayout.tsx
@@ -6,15 +6,16 @@ interface PageLayoutType extends IProps{
    className?:string
    ballConfig?:any
    gradientConfig?:any
+    fullscreen?:boolean
 }

 export const PageLayout=(props:PageLayoutType)=>{
-    const {children,className,ballConfig,gradientConfig} = props
+    const {children,className,ballConfig,gradientConfig,fullscreen} = props
    return(
        <GradientLay config={gradientConfig}>
-            <div className={`h-screen w-screen relative ${className}`}>
+            <div className={`h-screen w-screen min-h-[750px] relative ${className}`}>
                <BallAnime config={ballConfig}>
-                <div className='h-full w-full pt-[70px]  flex-col items-center'>
+                <div className={`h-full w-full flex-col items-center ${fullscreen ?'pt-0':'pt-[70px]'}`}>
                    {children}    
                </div>
                </BallAnime>

--- a/src/style.css
+++ b/src/style.css
@@ -5,20 +5,25 @@
    font-family: "Galano";
    src: url('./assets/fonts/GalanoGrotesqueDEMO-Bold.otf');
 }
-
 @layer components{
+
+    .hero-title{
+        @apply  text-theme-dark  text-[90px] tracking-wider font-[400] font-galano leading-[90px]
+    }
+
+
    .title-1-cn{
-        @apply text-theme-dark text-[40px] tracking-[2px] font-[900] font-['arial']  leading-[56px]
+        @apply text-theme-dark text-[40px] tracking-[2px] font-[900] font-cnnote  leading-[56px]
    }

    .title-2-cn{
-        @apply text-theme-dark text-[24px] tracking-[1px] font-[800] font-['arial']  leading-[33px]
+        @apply text-theme-dark text-[24px] tracking-[1px] font-[800] font-cnnote  leading-[33px]
    }
    .subTitle-1-cn{
-        @apply text-theme-dark text-[30px] tracking-[1px] font-[800] font-['arial'] leading-[42px]
+        @apply text-theme-dark text-[30px] tracking-[1px] font-[800] font-cnnote leading-[42px]
    }
    .content-1-cn{
-        @apply text-theme-dark text-[14px] tracking-[1px] font-[400] font-['arial']  leading-[20px]
+        @apply text-theme-dark text-[14px] tracking-[1px] font-[400] font-cnnote  leading-[20px]
    }

    .title-1-en{
@@ -26,39 +31,48 @@
    }


+    .int-font-1{
+        @apply font-bebas text-[40px] font-[400]
+    }
+    .int-font-hero{
+        @apply font-bebas font-[700] text-[90px] ml-[25px]  tracking-widest leading-[91px]
+    }
+    .int-font-sub{
+        @apply font-bebas font-[700] text-[20px] ml-[25px]  tracking-widest leading-[20px]
+    }
+    


-
-
-
-    .hero-title{
-        @apply  text-theme-dark  text-[78px] labtop:text-[68px]  screen:text-[90px] tracking-wider font-bold font-galano leading-[90px]
-    }
    .sub-title-cn{
-        @apply   text-theme-dark text-[16px] labtop:text-[26px] screen:text-[30px] tracking-wide font-mono font-bold screen:py-3 py-1
+        @apply   text-theme-dark text-[24px] tracking-wide font-cnnote font-bold screen:py-3 py-1
    }
    .content-title-cn{
-        @apply   text-theme-dark text-[22px] labtop:text-[22px] screen:text-[24px] tracking-wide font-mono font-bold py-3
+        @apply   text-theme-dark text-[20px]  tracking-wide font-cnnote font-bold py-3
    }
    .content-sub-title-cn{
-        @apply   text-theme-dark text-[14px] labtop:text-[16px] tracking-wide font-mono font-bold py-3
+        @apply   text-theme-dark text-[14px] tracking-wide font-cnnote font-bold py-3
+    }
+    .content-sub2-title-cn{
+        @apply   text-theme-dark text-[16px] tracking-wide font-cnnote font-bold py-3
    }
    .normal-text{
-        @apply  text-theme-dark  text-[12px] labtop:text-[14px] screen:text-[14px] tracking-wide font-mono font-normal
+        @apply  text-theme-dark  text-[12px] tracking-wide font-cnnote font-normal
    }
    .des-cn{
-        @apply font-galano font-light text-theme-dark
+        @apply font-galano font-light text-theme-dark text-[14px]
    }
    .table-header{
-        @apply text-white bg-black py-3 px-2
+        @apply text-white bg-black py-3 px-2 font-cnnote
    }
    .hoverGlass{
        @apply flex cursor-pointer
-        hover:shadow-lg  hover:backdrop-blur-sm 
-        hover:backdrop-brightness-105
+        hover:bg-white/30 hover:shadow-sm
        px-8 py-7 rounded-lg transition-all duration-150 
        relative
    }
+    .hoverGlass:hover span{
+        @apply visible transition-all duration-150 
+    }
    .featuresGrid{
        @apply grid grid-cols-2 w-full labtop:w-10/12 gap-y-[1rem]  gap-x-[3.5rem] screen:gap-y-[5rem] screen:gap-x-[10rem]
    }

--- a/src/views/About/Contact/index.tsx
+++ b/src/views/About/Contact/index.tsx
@@ -57,32 +57,32 @@ export const Contact = () => {
      <div className="-translate-x-[5vw]">
        <div className="py-12">
          <div className="hero-title">Contact us</div>
-          <div className="sub-title-cn">联系我们</div>
+          <div className="subTitle-1-cn">联系我们</div>
        </div>

        <div className="grid grid-cols-2 gap-[2rem] pb-12">
          {data.map((i, index) => (
            <div className="item" key={index}>
-              <div>{i.location}</div>
-              <div className=" text-2xl font-extrabold">{i.tel}</div>
+              <div className="content-1-cn">{i.location}</div>
+              <div className=" sub-title-cn">{i.tel}</div>
            </div>
          ))}
        </div>

        <div className="item">
-          <div>邮箱</div>
-          <div className=" text-2xl font-extrabold">support@33.cn</div>
+          <div className="content-1-cn">邮箱</div>
+          <div className="sub-title-cn">support@33.cn</div>
        </div>
        <div className="locations flex justify-between pt-12">
          <div className="item flex-col">
            <div className='sub-title-cn'>杭州西湖区办公室</div>
-            <div className='py-3'>
+            <div className='py-3 content-1-cn'>
              <div>浙江省杭州市西湖区</div>
              <div>文三路90号</div>
              <div>东部软件园科技大厦7楼</div>
            </div>
          </div>
-          <div className="item flex-col">
+          <div className="item flex-col content-1-cn">
            <div className='sub-title-cn'>杭州滨江办公室</div>
            <div className='py-3'>
              <div>浙江省杭州市滨江区</div>

--- a/src/views/About/JoinUs/index.tsx
+++ b/src/views/About/JoinUs/index.tsx
@@ -34,9 +34,9 @@ const DataGrid = (props: DataGridType) => {
            <div className='normal-text'>{i.diploma}</div>
            <div className='normal-text'>{i.location}</div>
          </div>
-          <div>
+          <span className='invisible'>
            <ChevronRightIcon className="w-5 h-5"></ChevronRightIcon>
-          </div>
+          </span>
          </>
        </HoverBox>
        </div>

--- a/src/views/About/Memorabilia/EventItem.tsx
+++ b/src/views/About/Memorabilia/EventItem.tsx
+import { IProps } from "@/common/Iprops.interface";
+import { useEffect, useMemo, useState } from "react";
+import {chunk as _chunk} from "lodash";
+interface EventItemType extends IProps{
+    itmeIndex: number;
+    data:any
+}
+interface EventsTableType extends IProps {
+    tableIndex: number;
+    data:any
+}
+interface EventColsType extends IProps{
+    data:any
+}
+
+export const EventItem = (props:EventItemType)=>{
+    const{itmeIndex,data} = props;
+    const move = useMemo(() => {
+        return itmeIndex*4.5+'rem'
+    },[itmeIndex])
+    const dates = useMemo(() =>{
+        let date;
+        if(data.date){
+            date = data.date.split("-")
+        }else{
+            date = undefined
+        }
+        return date
+    },[data])
+    
+    return(
+        <div
+            className={`max-w-[12rem] h-fit`}
+            style={{
+                transform: `translateY(${move})`
+            }}
+        >
+          <div className="flex items-baseline">
+             <div className='int-font-sub'>{dates&&dates[0]}/</div>
+             <div className=' int-font-hero border-b-[2px] border-theme-dark'>{dates&&dates[1]}</div>
+          </div>
+          <div className='py-2 line-clamp-3 h-[70px] des-cn overflow-y-hidden font-cnnote'>
+                {data?data.title:''}
+          </div>
+        </div>
+    )
+}
+
+export const EventCols = (props: EventColsType)=>{
+        const {data}= props;
+        return(
+            <div className='grid grid-cols-4 pb-[3rem]'>
+                {    
+                    data&&data.length>0&&data.map((i:any,index:number)=><EventItem 
+                    itmeIndex={index}
+                    data={i}
+                    key={index}
+                    ></EventItem>)
+                }
+            </div>
+        )
+}
+
+export const EventsTable = (props: EventsTableType)=>{
+    const {tableIndex,data} = props
+    const [colData,setColData]= useState<undefined|any[]>(undefined)
+    useEffect(() => {
+        const half =4
+        const c = _chunk(data,half)
+        console.log(c);
+        
+        setColData(c)
+    },[data])
+    return(
+        <div>
+            {colData&&colData.map((k,index)=>(
+                <EventCols data={k} key={index}></EventCols>
+            ))}
+        </div>
+    )
+}
\ No newline at end of file
--- a/src/views/About/Memorabilia/index.tsx
+++ b/src/views/About/Memorabilia/index.tsx
 import { IProps } from "@/common/Iprops.interface"
 import { AppContianer } from "@/layouts/AppContianer"
-import BScroll from '@better-scroll/core'
-import Slide from '@better-scroll/slide'
+
 import { useRef, useState, useEffect, useMemo, useCallback } from 'react'
-import { BScrollConstructor } from "@better-scroll/core/dist/types/BScroll";
-import { useMediaQuery } from "@/common/hooks"
+import { getEvents } from "@/fetch/dataFetch"
+import { EventItem, EventsTable } from "./EventItem"
+import { EventsScrollView } from "@/components/EventsScrollView"


 interface MemorabiliaType extends IProps {
@@ -12,26 +12,49 @@ interface MemorabiliaType extends IProps {
 }


-const initBScroll = (el: HTMLElement) => {
-  const res = new BScroll(el, {
-    scrollX: true,
-    scrollY: false,
-    slide: {
-      threshold: 100,
-      autoplay: false,
-    },
-    momentum: false,
-    bounce: false,
-    probeType: 3,
-  })
-  return res
-};
-
 export const Memorabilia = () => {
+  const [data,setData] = useState<any>()
+  const [currentSlide,setCurrentSlide] = useState(0)
+  useEffect(()=>{
+    const fetchData = getEvents(8).subscribe(v=>{
+      setData(v)
+    },err=>{ throw new Error(err)})
+    return ()=> fetchData.unsubscribe()
+  },[currentSlide])
+  

  return (
-    <AppContianer>
-      <div>123</div>
+    <AppContianer className="flex items-center justify-start h-full w-full relative  labtop:px-28 ">
+
+      <div className='w-[896px]'>
+      <div className='absolute top-12 labtop:right-[14rem] right-[7rem]'>
+        <div className="hero-title">Memorabilia</div>
+        <div className="subTitle-1-cn py-3 flex items-center gap-x-5">
+        <div className=" w-28 h-1 bg-theme-dark rounded"></div>
+          <div>功能特点</div>
+        </div>
+      </div>
+            {
+              data?
+              <EventsScrollView>
+              <div className='flex '>
+                {
+                  data.length>0&&data.map((g:any,index:number)=>(
+                    <div className='w-full h-[800px]  translate-y-[60px]  ' key={index}>
+                    <EventsTable tableIndex={currentSlide} data={g} ></EventsTable>
+                    </div>
+                  ))
+                }
+                </div>
+                </EventsScrollView>
+                :
+                <div>
+                  loading
+                </div>
+            }
+          
+      </div>
+    
    </AppContianer >
  )
 }
\ No newline at end of file
--- a/src/views/About/Partners/index.tsx
+++ b/src/views/About/Partners/index.tsx
@@ -33,7 +33,7 @@ export const Partners = () => {
  return (
    <AppContianer className='h-full'>
    <div className="flex  h-full">
-        <div className='center w-10/12 flex items-center justify-center  h-full'>
+        <div className='center w-10/12 flex items-center justify-start  h-full'>
          <div className='grid grid-cols-4 gap-5 -translate-y-10'>
              {
                imgList.map(i=> <img key={i} src={`/imgs/${i}.png`}></img>)

--- a/src/views/About/index.tsx
+++ b/src/views/About/index.tsx
@@ -9,24 +9,24 @@ import { Partners } from "./Partners";
 import { Memorabilia } from "./Memorabilia";
 import { JoinUs } from "./JoinUs";
 import { aboutBalls } from "@/config/ballSetting";
-import { baasBg } from "@/config/bgSetting";
+import { aboutBg, baasBg } from "@/config/bgSetting";

 const Description = () => {
  return (
    <div className="w-full">
-      <div className="text-3xl mb-16 ">链上复杂美 上链不复杂</div>
-      <div className="paragraph  tracking-wide leading-7 flex-col gap-y-4">
-        <div>
+      <div className="sub-title-cn mb-[63px] ">链上复杂美 上链不复杂</div>
+      <div className="paragraph  content-1-cn flex-col gap-y-4">
+        <div className="pb-[14px]">
          公司成立于2008年，2013年启动区块链、智能合约的研发与创新，2014年申请区块链发明专利：钱包找回功能。已累计申请了400多项区块链技术的发明专利，2019年据德温特专利家族统计，复杂美区块链发明专利排名位于全球第三，仅次于阿里巴巴和IBM。
        </div>
-        <div>
+        <div className="pb-[14px]">
          总公司总部位于杭州，并在南京、广州、海南、宁波、重庆设有分部。目前，公司员工100人，其中80%左右为技术人员，吸引了一批甲骨文、阿里、华为程序员。总公司与多家世界500强开展区块链项目合作，在票据、供应链金融、积分、仓单有区块链应用落地。
        </div>
        <div>
          2018年11月，复杂美区块链Chain33在Github上开源，是较早落地运行的平行链架构系统，并基于模块设计可协作开发，大幅降低区块链的开发维护成本，实现快捷易用的跨链交易，有近100个平行链项目落地，有去中心化交易、去中心化社交、去中心化电商、去中心化溯源存证、等一系列应用。
        </div>
      </div>
-      <div className="flex py-10 text-xl font-bold gap-x-10 tracking-wider">
+      <div className="flex py-10 content-sub2-title-cn  gap-x-[100px] ">
        <div>
          <span className=" text-[#084DFD] border-b-4 border-[#084DFD] py-3">
            优质
@@ -93,39 +93,37 @@ export default function About(props: any) {
      <div className="vertival-content ">
        <PageLayout
          ballConfig={aboutBalls[0].setting}
-          gradientConfig={baasBg[1].config}
+          gradientConfig={aboutBg[0].config}
        >
-          <AppContianer className="h-full -translate-y-[5rem]">
-            <div className="flex gap-x-[12rem] w-full h-full items-center">
-              <div className="left w-4/12 screen:w-3/12 ">
-                <img src={AboutImg} />
-              </div>
-              <div className="right w-8/12 screen:w-9/12  mt-8">
+          <AppContianer className="h-full -translate-y-[5rem] labtop:px-28">
+            <div className="flex gap-x-[5rem] w-full h-full items-center">
+                <img src={AboutImg} className="w-[420px]"/>
+              <div className="flex-grow-0  mt-8">
                <Description></Description>
              </div>
            </div>
          </AppContianer>
        </PageLayout>

-        {/* <PageLayout  ballConfig={aboutBalls[1].setting}
-          gradientConfig={baasBg[1].config}>
+         <PageLayout  ballConfig={aboutBalls[1].setting}
+          gradientConfig={aboutBg[1].config}>
          <Memorabilia />
-        </PageLayout> */}
+        </PageLayout> 

        <PageLayout  ballConfig={aboutBalls[2].setting}
-          gradientConfig={baasBg[1].config}>
+          gradientConfig={aboutBg[2].config}>
          <AppContianer>
            <JoinUs />
          </AppContianer>
        </PageLayout>

        <PageLayout  ballConfig={aboutBalls[3].setting}
-          gradientConfig={baasBg[1].config}>
+          gradientConfig={aboutBg[3].config}>
          <Contact />
        </PageLayout>

        <PageLayout  ballConfig={aboutBalls[3].setting}
-          gradientConfig={baasBg[1].config}>
+          gradientConfig={aboutBg[4].config}>
          <Partners />
        </PageLayout>
      </div>

--- a/src/views/Baas33/Advantages/index.tsx
+++ b/src/views/Baas33/Advantages/index.tsx
@@ -27,7 +27,7 @@ const AdvantagesList = ()=>{
        <div className='flex flex-col gap-y-[2.5rem] mt-[10vh]'>
            {
                data.map((i,index)=>(
-                    <div key={index} className='relative my-5'>
+                    <div key={index} className='relative my-[1.2vh]'>
                        <span className='absolute title-1-cn text-[90px] -top-[1.5rem] -left-[2rem] opacity-10'>{index+1}</span>
                        <div className='title-2-cn border-black border-b-[3px] w-[90px]'>{i.title}</div>
                        <div className='pt-2 content-1-cn'>{i.text}</div>

--- a/src/views/Baas33/Features/index.tsx
+++ b/src/views/Baas33/Features/index.tsx
@@ -42,6 +42,8 @@ export const Features = (props: FeaturesType)=>{

    return(
        <AppContianer className='h-full'>
+            <>
+        <div className='h-[100vh] -translate-y-[83px] absolute top-0 left-0  w-[60vw] bg-white/40 -z-[1]'></div>
        <div className="flex items-center h-full">
            <div className="left w-8/12  h-full py-16">
                <div className="title-1-en">
@@ -73,6 +75,7 @@ export const Features = (props: FeaturesType)=>{
                </div>
            </div>
        </div>
+        </>
        </AppContianer>
    )


--- a/src/views/Baas33/Service/index.tsx
+++ b/src/views/Baas33/Service/index.tsx
@@ -51,10 +51,10 @@ const ServiceList = ()=>{
        })
    }
    return(
-        <div className=' px-8 grid grid-cols-3 gap-x-[3rem] -translate-y-[5vh]'>
+        <div className=' grid grid-cols-3  w-full   -translate-y-[5vh]'>
            {
                data.map((i,index)=>(
-                    <div key={index} className='relative py-8 px-10 bg-white/40 min-w-[340px] max-w-[420px] h-[460px] rounded-[3.5rem] '>
+                    <div key={index} className='relative w-[320px] py-[40px] px-[40px] bg-white/40  h-[460px] rounded-[2.5rem] '>
                        <div className='sub-title-cn border-black py-5'>{i.title}</div>
                        <div className='pt-2 des-cn'>{i.text}</div>
                        <ul className='py-5 des-cn font-bold'>
@@ -62,7 +62,7 @@ const ServiceList = ()=>{
                                i.features.map((k,x)=>(
                                    <li className='my-1 flex' key={'child'+x}>
                                        <div>
-                                        <CheckIcon className='w-5 h-5 border-[1px] border-black border-dashed ' />
+                                        <CheckIcon className='w-5 h-5 ' />
                                        </div>
           
                                        <div className='pl-3'>{k}</div>    
@@ -75,8 +75,8 @@ const ServiceList = ()=>{
                                介绍详情
                            </div>
                            <div className='des-cn font-bold text-theme-blue'>
-                                <span className=' text-4xl '>{i.price}</span>
-                                /年
+                                <span className=' int-font-1 '>{i.price}</span>
+                                <span>/年</span> 
                            </div>
                        </div>
                    </div>
@@ -88,12 +88,12 @@ const ServiceList = ()=>{

 export const Service = (props: ServiceType)=>{
    return(
-        <AppContianer className='h-full'>
-            <div className="flex  h-full">
-                <div className='center w-10/12 flex items-center justify-center  h-full'>
+        <AppContianer className='h-full w-full '>
+            <div className=" relative w-full  h-full">
+                <div className='center flex items-center  h-full'>
                    <ServiceList />
                </div>
-                <div className="right w-2/12 z-[200000] pl-[3rem]">
+                <div className=" absolute top-0 right-0 z-[200000] pl-[3rem]">
                    <div className='flex pt-16'>
                        <VerticalText text='服务版本' containerStyle="sub-title-cn py-5 px-5"/>
                        <VerticalText text='service' containerStyle="hero-title mt-6" itemStyle=" rotate-90 -my-[2.7rem]"/>

--- a/src/views/Chain33/index.tsx
+++ b/src/views/Chain33/index.tsx
@@ -35,7 +35,7 @@ const HeroItem =(props: HeroItemType)=>{
   `}>
      <div>
        <div className="hero font-sans font-extrabold text-9xl">
-          <img src={img} className='labtop:w-44 w-20' />
+          <img src={img} />
        </div>
        <div className="subtitle border-b-2 text-lg font-medium  w-4/12 my-3">
          {subtitle}
@@ -50,6 +50,10 @@ const HeroItem =(props: HeroItemType)=>{

 export default function Chain33() {
  const navigate = useNavigate()
+  const imgOnload = (e:any)=>{
+    console.log(e);
+    
+  }
  return (
    <ScrollView>
      <div className="vertival-content">
@@ -75,6 +79,7 @@ export default function Chain33() {
              </div>

              <img
+                onLoad={imgOnload}
                src={chain33Bg}
                className="object-scale-down   object-bottom"
              />

--- a/src/views/News/index.tsx
+++ b/src/views/News/index.tsx
@@ -7,6 +7,8 @@ import * as React from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { count, filter, map, reduce } from "rxjs";
 import { useNavigate } from 'react-router-dom';
+import { baasBalls } from "@/config/ballSetting";
+import {  newsBg } from "@/config/bgSetting";

 export interface IAppProps {}

@@ -38,18 +40,18 @@ export default function News(props: IAppProps) {
  };

  return (
-    <div>
-      <div className="flex h-screen w-full   ">
+  <PageLayout fullscreen  gradientConfig={newsBg[0].config}>
+      <div className="flex h-screen w-full  ">
        <div className="left bg-blue-600 pt-16 h-full w-5/12 min-w-[650px] text-white ">
          <div className="pl-28 h-[75%] mt-16 relative">
            <div>
              <div className=" text-8xl font-bold">News</div>
-              <div className=" text-lg tracking-wide">新闻动态</div>
+              <div className="  sub-title-cn text-white">新闻动态</div>
              <div className="absolute bottom-0 ">
-                <div className="w-12/12">
+                <div className="w-12/12 content-1-cn text-white">
                  提供区块链融合技术和产业链接的精选内容
                </div>
-                <div className="w-12/12">帮助您紧跟落地实况和未来发展趋势</div>
+                <div className="w-12/12 content-1-cn text-white">帮助您紧跟落地实况和未来发展趋势</div>
              </div>
            </div>
          </div>
@@ -64,14 +66,14 @@ export default function News(props: IAppProps) {
                    <>
                      <div className="news-date min-w-[200px] flex gap-x-2  text-white font-medium items-center ">
                      <div className="translate-y-3">
-                        <div className="tracking-wide">
+                        <div className="int-font-sub">
                          {getDate(i.time_stamp).year}/
                        </div>
-                        <div className="tracking-wide">
+                        <div className="int-font-sub text-right">
                          {getDate(i.time_stamp).month}/
                        </div>
                      </div>
-                      <div className="text-8xl  border-white border-b-4">
+                      <div className="int-font-hero border-white border-b-2">
                        {getDate(i.time_stamp).day}
                      </div>
                    </div>
@@ -104,6 +106,7 @@ export default function News(props: IAppProps) {
          </NewsScrollView>
        </div>
      </div>
-    </div>
+
+    </PageLayout>
  );
 }
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,9 @@ module.exports = withAnimations({
  theme: {
    extend: {
      fontFamily:{
-        galano:['Galano','system-ui']
+        galano:['Galano','system-ui'],
+        bebas:['Bebas Neue', "cursive"],
+        cnnote:['Noto Sans SC',"sans-serif"]
      },
      colors:{
        'theme-blue':'#084DFD',

--- a/yarn.lock
+++ b/yarn.lock
@@ -257,6 +257,13 @@
  dependencies:
    "@better-scroll/core" "^2.4.2"

+"@better-scroll/nested-scroll@^2.4.2":
+  version "2.4.2"
+  resolved "https://registry.yarnpkg.com/@better-scroll/nested-scroll/-/nested-scroll-2.4.2.tgz#44680f4b02176461250e6be6d95f2ac6169a1c98"
+  integrity sha512-JnC2sqtDqVkj9F5J39u52b6qDsMqXbnURG67dHf97tYoYP2dluwjkvhhxjSFrghREoQzT/KWcDbkfcGy47lQwQ==
+  dependencies:
+    "@better-scroll/core" "^2.4.2"
+
 "@better-scroll/observe-dom@^2.4.2":
  version "2.4.2"
  resolved "https://registry.yarnpkg.com/@better-scroll/observe-dom/-/observe-dom-2.4.2.tgz#cc1e6d82a8f53525c282c9a4bcea5d1be8c21c95"
@@ -360,6 +367,13 @@
  resolved "https://registry.yarnpkg.com/@tailwindcss/line-clamp/-/line-clamp-0.4.0.tgz#03353e31e77636b785f2336e8c978502cec1de81"
  integrity sha512-HQZo6gfx1D0+DU3nWlNLD5iA6Ef4JAXh0LeD8lOGrJwEDBwwJNKQza6WoXhhY1uQrxOuU8ROxV7CqiQV4CoiLw==

+"@types/jquery@^3.5.14":
+  version "3.5.14"
+  resolved "https://registry.yarnpkg.com/@types/jquery/-/jquery-3.5.14.tgz#ac8e11ee591e94d4d58da602cb3a5a8320dee577"
+  integrity sha512-X1gtMRMbziVQkErhTQmSe2jFwwENA/Zr+PprCkF63vFq+Yt5PZ4AlKqgmeNlwgn7dhsXEK888eIW2520EpC+xg==
+  dependencies:
+    "@types/sizzle" "*"
+
 "@types/js-cookie@^2.x.x":
  version "2.2.7"
  resolved "https://registry.yarnpkg.com/@types/js-cookie/-/js-cookie-2.2.7.tgz#226a9e31680835a6188e887f3988e60c04d3f6a3"
@@ -401,6 +415,11 @@
  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.2.tgz#1a62f89525723dde24ba1b01b092bf5df8ad4d39"
  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==

+"@types/sizzle@*":
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.3.tgz#ff5e2f1902969d305225a047c8a0fd5c915cebef"
+  integrity sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==
+
 "@vitejs/plugin-react@^1.3.0":
  version "1.3.2"
  resolved "https://registry.yarnpkg.com/@vitejs/plugin-react/-/plugin-react-1.3.2.tgz#2fcf0b6ce9bcdcd4cec5c760c199779d5657ece1"
@@ -933,6 +952,11 @@ is-number@^7.0.0:
  resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==

+jquery@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
+  integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==
+
 js-cookie@^2.x.x:
  version "2.2.1"
  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"