321

src/components/NewsDetailScrollView.tsx

+import { useAsyncState } from "@/common/hooks";
+import { IProps } from "@/common/Iprops.interface";
+import BScroll from "@better-scroll/core";
+import { BScrollConstructor } from "@better-scroll/core/dist/types/BScroll";
+import MouseWheel from "@better-scroll/mouse-wheel";
+import ScrollBar from "@better-scroll/scroll-bar";
+import ObserveDOM from '@better-scroll/observe-dom'
+import Pullup from '@better-scroll/pull-up'
+import { ForwardedRef, forwardRef, ForwardRefRenderFunction, useCallback, useEffect, useMemo, useRef, useState } from "react";
+interface ScrollViewType extends IProps {
+  wrapHeight?: string;
+  prop?: any;
+  NewsDataOnchanged?:()=>void;
+}
+
+const initBScroll = (el:HTMLElement) => {
+  const res = new BScroll(el, {
+    click: true,
+    mouseWheel: {
+      speed: 20,
+      invert: false,
+      easeTime: 300,
+    },
+    observeDOM: true,
+    probeType:2,
+    //  显示滚动条,
+    useTransition:true,
+    scrollX: false,
+    momentum: true,
+    scrollY: true,
+    bounce: true,
+    stopPropagation: true,
+  })
+  return res
+};
+
+
+export const NewsDetailScrollView = (props: ScrollViewType) => {
+  BScroll.use(MouseWheel);
+  BScroll.use(Pullup)
+  BScroll.use(ObserveDOM);
+  const { wrapHeight, children } = props;
+  const wrapRef = useRef<HTMLDivElement>(null);
+  const [scrollObj, setScrollObj] = useState<BScrollConstructor<{}>>();
+
+  useEffect(()=>{
+    if(!wrapRef) return
+    const scrollEl =  initBScroll(wrapRef.current as HTMLDivElement)
+    setScrollObj(scrollEl)
+    return () => {
+      scrollObj?.destroy();
+  };
+  },[wrapRef])
+
+  useEffect(()=>{
+    if(!scrollObj) return;
+    scrollObj.scrollTo(0,0)
+  },[props.NewsDataOnchanged])
+  return (
+      <div className="h-[calc(100vh-160px)] mt-[20px] overflow-hidden"  ref={wrapRef}>
+        {children}
+      </div>
+  );
+}

src/views/About/Contact/index.tsx

@@ -37,7 +37,7 @@ export const Contact = () => {
           </div>
         </div>
 
-        <div className="grid grid-cols-2 gap-x-[100px] gap-y-[30px] pb-12">
+        <div className="grid grid-cols-2 gap-x-[200px] gap-y-[30px] pb-12">
               <div className="item" >
                   <div className="normal-content">杭州总部</div>
                   <div className=" sub-title-cn">0571-8167-1366</div>

src/views/About/JoinUs/index.tsx

@@ -120,7 +120,7 @@ export const JoinUs = () => {
     <AppContianer>
     <div className="flex items-center h-full w-full relative py-[30px]  ">
       <div className="w-full">
-        <div className="h-full min-h-[520px] w-full labtop:w-10/12 mx-auto flex gap-x-[160px]">
+        <div className="h-full min-h-[520px] w-full labtop:w-[75rem] mx-auto flex gap-x-[200px]">
           <div className='left translate-y-[130px] min-w-[100px]'>
             <div className="flex-col justify-start items-center">
             {departments.map((i: string) => (
@@ -148,7 +148,7 @@ export const JoinUs = () => {
             </div>
             {selecteItem ? (
               <DtailContainer
-                className="w-9/12"
+                className="w-[680px]"
                 doCancelSelecteItem={setSelecteItem}
                 data={selectedItem}
               ></DtailContainer>

src/views/About/Memorabilia/EventItem.tsx

@@ -68,7 +68,7 @@ export const EventItem = (props: EventItemType) => {
           </div>
         </div>
         {/* <div className="py-2 normal-content  text-right  overflow-y-hidden "> */}
-        <div className="h-[90px] overflow-y-hidden line-clamp-4">
+        <div className="h-[93px] overflow-y-hidden line-clamp-4">
           
    
               <div
@@ -83,7 +83,7 @@ export const EventItem = (props: EventItemType) => {
         <div
           ref={floating}
           className="bg-theme-dark
-           normal-content z-[9999] text-white py-5 px-3 w-[270px]  rounded-md "
+           normal-content z-[9999] text-white py-[20px] px-[15px] w-[270px]  rounded-md "
           style={{
             position: strategy,
             top: y ?? 0,

src/views/About/Partners/index.tsx

@@ -41,9 +41,9 @@ export const Partners = () => {
           </div>
         </div>
 
-        <div className="flex gap-x-[20px] w-2/12 pl-[50px] pt-[46px] z-[2000]">
+        <div className="flex gap-x-[20px] w-2/12 pl-[50px] pt-[100px] z-[2000]">
 
-        <div className="verticalText-cn">合作伙伴</div>
+        <div className="verticalText-cn  translate-y-[10px]">合作伙伴</div>
             <div className="hero-title verticalText">Partners</div>
         
           </div>

src/views/Baas33/Service/index.tsx

@@ -91,8 +91,12 @@ export const Service = (props: ServiceType) => {
         <div className=" w-10/12 flex items-center h-full">
           <ServiceList />
         </div>
-          <div className="flex gap-x-[20px] w-2/12 pt-[46px] pl-[20px]">
-            <div className="verticalText-cn">服务版本</div>
+          <div className="flex gap-x-[20px] w-2/12 pt-[100px] pl-[20px]">
+
+          {/* <div className="verticalText-cn">合作伙伴</div>
+            <div className="hero-title verticalText">Partners</div> */}
+        
+            <div className="verticalText-cn translate-y-[10px]">服务版本</div>
             <div className="hero-title verticalText">Service</div>
           </div>
       </div>

src/views/News/NewsDetails.tsx

 import { IProps } from "@/common/Iprops.interface";
+import { NewsDetailScrollView } from "@/components/NewsDetailScrollView";
+import { NewsScrollView } from "@/components/NewsScrollView";
 import { AppContianer } from "@/layouts/AppContianer";
 import { PageLayout } from "@/layouts/PageLayout";
 import { getNews, getNewsDetail } from "@/service/api";
@@ -34,20 +36,28 @@ export const NewsDetails = (props: NewsDetailsType) => {
         setLatestNews(output);
       });
   }, []);
+  const newDetailChanged = (id:any) => {
+    navigate(`/news/${id}`)
+    newsDataOnchanged()
+  }
+  const newsDataOnchanged = ()=>{
+    console.log(11);
+    
+  }
   const getDate = (time: number) => {
     const d = dayjs.unix(Math.floor(time / 1000));
     return {
       year: d.year().toString(),
-      day: d.date(),
-      month: d.month() + 1 > 10 ? d.month() + 1 : "0" + (d.month() + 1),
+      day: d.date().toString(),
+      month: d.month() + 1 > 10 ? d.month() + 1 : "0" + (d.month() + 1).toString(),
     };
   };
 
   const useDate = useCallback((time: number) => getDate(time), [params]);
 
   return (
-    <PageLayout>
-      <AppContianer>
+    <PageLayout className="h-screen min-h-[750px]">
+      <AppContianer >
         <div className='max-w-[1440px] mx-auto'>
           <div className=" w-full pl-[199px] pt-5">
   
@@ -79,14 +89,14 @@ export const NewsDetails = (props: NewsDetailsType) => {
                 </div>
               </div>
             </div>
-
-            <div className="richRender pt-5 px-[100px]  pb-24">
-              <div
-                dangerouslySetInnerHTML={{ __html: data && data.content }}
-                className="py-5 text-left"
-              ></div>
+            <NewsDetailScrollView NewsDataOnchanged={newsDataOnchanged}>
+            <div className="richRender pt-5 px-[100px] pb-24">
+                <div
+                  dangerouslySetInnerHTML={{ __html: data && data.content }}
+                  className="py-5 text-left"
+                ></div>
             </div>
-
+            </NewsDetailScrollView>
             <div className="w-[300px] pt-[35px]">
               <div className="flex-col ">
                 <div className="content-sub-title-cn pb-[15px]">最新消息</div>
@@ -95,7 +105,7 @@ export const NewsDetails = (props: NewsDetailsType) => {
                     latestNews.map((k: any, index: number) => (
                       <div
                         key={index}
-                        onClick={() => navigate(`/news/${k.id}`)}
+                        onClick={()=>newDetailChanged(k.id)}
                         className="pb-[21px] w-[300px] normal-content cursor-pointer hover:text-theme-blue"
                       >
                         <div>{k.title}</div>