Skip to content

W
web2022
Commit 4c0532a7 authored by mxm-web-develop's avatar mxm-web-develop
Browse files
Options

init

parent 7a941171
Hide whitespace changes
Inline Side-by-side
Showing with 327 additions and 124 deletions
.env.development
View file @ 4c0532a7
NODE_ENV=dev NODE_ENV=dev
VITE_FETCH_URL = http://192.168.31.12:3000/ VITE_FETCH_URL = http://localhost:3000/
\ No newline at end of file \ No newline at end of file
package.json
View file @ 4c0532a7
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
"dependencies": { "dependencies": {
"@better-scroll/core": "^2.4.2", "@better-scroll/core": "^2.4.2",
"@better-scroll/mouse-wheel": "^2.4.2", "@better-scroll/mouse-wheel": "^2.4.2",
"@better-scroll/observe-dom": "^2.4.2",
"@better-scroll/pull-up": "^2.4.2", "@better-scroll/pull-up": "^2.4.2",
"@better-scroll/scroll-bar": "^2.4.2", "@better-scroll/scroll-bar": "^2.4.2",
"@better-scroll/slide": "^2.4.2", "@better-scroll/slide": "^2.4.2",
......
src/App.tsx
View file @ 4c0532a7
...@@ -23,7 +23,7 @@ const Loading=()=>{ ...@@ -23,7 +23,7 @@ const Loading=()=>{
export function App () { export function App () {
return ( return (
<> <>
<BrowserRouter>
<Navbar></Navbar> <Navbar></Navbar>
<Routes> <Routes>
<Route element={<MxmRoute meta={{name:'Bass33'}}> <Baas33></Baas33> </MxmRoute>} path='/'></Route> <Route element={<MxmRoute meta={{name:'Bass33'}}> <Baas33></Baas33> </MxmRoute>} path='/'></Route>
...@@ -39,7 +39,7 @@ export function App () { ...@@ -39,7 +39,7 @@ export function App () {
} }
/> />
</Routes> </Routes>
</BrowserRouter>
</> </>
); );
} }
src/components/DtailScrollView.tsx
View file @ 4c0532a7
...@@ -4,7 +4,7 @@ import BScroll from "@better-scroll/core"; ...@@ -4,7 +4,7 @@ import BScroll from "@better-scroll/core";
import { BScrollConstructor } from "@better-scroll/core/dist/types/BScroll"; import { BScrollConstructor } from "@better-scroll/core/dist/types/BScroll";
import MouseWheel from "@better-scroll/mouse-wheel"; import MouseWheel from "@better-scroll/mouse-wheel";
import ScrollBar from "@better-scroll/scroll-bar"; import ScrollBar from "@better-scroll/scroll-bar";
import ObserveDOM from '@better-scroll/observe-dom'
import Pullup from '@better-scroll/pull-up' import Pullup from '@better-scroll/pull-up'
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
interface ScrollViewType extends IProps { interface ScrollViewType extends IProps {
...@@ -20,10 +20,13 @@ const initBScroll = (el:HTMLElement) => { ...@@ -20,10 +20,13 @@ const initBScroll = (el:HTMLElement) => {
invert: false, invert: false,
easeTime: 300, easeTime: 300,
}, },
pullUpLoad: {
threshold: 200
},
observeDOM: true,
probeType:2, probeType:2,
// 显示滚动条, // 显示滚动条,
useTransition:true, useTransition:true,
scrollbar:true,
scrollX: false, scrollX: false,
momentum: true, momentum: true,
scrollY: true, scrollY: true,
...@@ -36,8 +39,8 @@ const initBScroll = (el:HTMLElement) => { ...@@ -36,8 +39,8 @@ const initBScroll = (el:HTMLElement) => {
export const DetailScrollView = (props: ScrollViewType) => { export const DetailScrollView = (props: ScrollViewType) => {
BScroll.use(MouseWheel); BScroll.use(MouseWheel);
BScroll.use(Pullup);
BScroll.use(ScrollBar) BScroll.use(ScrollBar)
BScroll.use(ObserveDOM);
const { wrapHeight, children } = props; const { wrapHeight, children } = props;
const wrapRef = useRef<HTMLDivElement>(null); const wrapRef = useRef<HTMLDivElement>(null);
...@@ -55,12 +58,10 @@ export const DetailScrollView = (props: ScrollViewType) => { ...@@ -55,12 +58,10 @@ export const DetailScrollView = (props: ScrollViewType) => {
return ( return (
<div
className="slide-vertical h-full w-full" <div className=" h-full overflow-hidden relative" ref={wrapRef}>
>
<div className="vertical-wrapper h-full pt-40 pb-40 overflow-hidden relative" ref={wrapRef}>
{children} {children}
</div> </div>
</div>
); );
}; };
src/components/HoverBox.tsx 0 → 100644
View file @ 4c0532a7
import { IProps } from "@/common/Iprops.interface";
import * as React from 'react';
import { PointerEventHandler, useMemo, useRef } from 'react';
import { throttle as _throttle } from 'lodash';
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>
);
}
src/components/Navbar/index.tsx
View file @ 4c0532a7
import { IProps } from "@/common/Iprops.interface"; import { IProps } from "@/common/Iprops.interface";
import * as React from 'react'; import * as React from 'react';
import { useState } from 'react'; import { useState } from 'react';
import Logo from '@/assets/img/33logo.png';
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
export interface IAppProps extends IProps { export interface IAppProps extends IProps {
} }
...@@ -45,7 +46,7 @@ export default function Navbar (props: IAppProps) { ...@@ -45,7 +46,7 @@ export default function Navbar (props: IAppProps) {
return ( return (
<nav className='flex justify-between absolute px-28 w-full top-0 z-[99999] py-6 text-sm text-slate-400 '> <nav className='flex justify-between absolute px-28 w-full top-0 z-[99999] py-6 text-sm text-slate-400 '>
<div className='left '> <div className='left '>
logo <img src={Logo} alt="" />
</div> </div>
<div className='right flex gap-x-12'> <div className='right flex gap-x-12'>
<Link to='/' className={`hover:text-black ${pathname ==='/'?'text-black':'text-slate-400'}`}>Baas33</Link> <Link to='/' className={`hover:text-black ${pathname ==='/'?'text-black':'text-slate-400'}`}>Baas33</Link>
......
src/components/NewsScrollView.tsx
View file @ 4c0532a7
...@@ -4,9 +4,9 @@ import BScroll from "@better-scroll/core"; ...@@ -4,9 +4,9 @@ import BScroll from "@better-scroll/core";
import { BScrollConstructor } from "@better-scroll/core/dist/types/BScroll"; import { BScrollConstructor } from "@better-scroll/core/dist/types/BScroll";
import MouseWheel from "@better-scroll/mouse-wheel"; import MouseWheel from "@better-scroll/mouse-wheel";
import ScrollBar from "@better-scroll/scroll-bar"; import ScrollBar from "@better-scroll/scroll-bar";
import ObserveDOM from '@better-scroll/observe-dom'
import Pullup from '@better-scroll/pull-up' import Pullup from '@better-scroll/pull-up'
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { ForwardedRef, forwardRef, ForwardRefRenderFunction, useCallback, useEffect, useMemo, useRef, useState } from "react";
interface ScrollViewType extends IProps { interface ScrollViewType extends IProps {
wrapHeight?: string; wrapHeight?: string;
prop?: any; prop?: any;
...@@ -23,6 +23,7 @@ const initBScroll = (el:HTMLElement) => { ...@@ -23,6 +23,7 @@ const initBScroll = (el:HTMLElement) => {
pullUpLoad: { pullUpLoad: {
threshold: 200 threshold: 200
}, },
observeDOM: true,
probeType:2, probeType:2,
// 显示滚动条, // 显示滚动条,
useTransition:true, useTransition:true,
...@@ -39,11 +40,11 @@ const initBScroll = (el:HTMLElement) => { ...@@ -39,11 +40,11 @@ const initBScroll = (el:HTMLElement) => {
export const NewsScrollView = (props: ScrollViewType) => { export const NewsScrollView = (props: ScrollViewType) => {
BScroll.use(MouseWheel); BScroll.use(MouseWheel);
BScroll.use(Pullup) BScroll.use(Pullup)
BScroll.use(ObserveDOM);
const { wrapHeight, children } = props; const { wrapHeight, children } = props;
const wrapRef = useRef<HTMLDivElement>(null); const wrapRef = useRef<HTMLDivElement>(null);
const [scrollObj, setScrollObj] = useState<BScrollConstructor<{}>>(); const [scrollObj, setScrollObj] = useState<BScrollConstructor<{}>>();
const [currentPage,setCurrentPage] = useState(0)
useEffect(()=>{ useEffect(()=>{
const scrollEl = initBScroll(wrapRef.current as HTMLDivElement) const scrollEl = initBScroll(wrapRef.current as HTMLDivElement)
setScrollObj(scrollEl) setScrollObj(scrollEl)
...@@ -52,16 +53,13 @@ export const NewsScrollView = (props: ScrollViewType) => { ...@@ -52,16 +53,13 @@ export const NewsScrollView = (props: ScrollViewType) => {
}; };
},[wrapRef]) },[wrapRef])
return ( return (
<div
className="slide-vertical h-full -translate-x-[220px]"
> <div className=" h-full overflow-hidden pb-5 -translate-x-[200px]" ref={wrapRef}>
<div className="vertical-wrapper h-full overflow-hidden relative" ref={wrapRef}>
{children} {children}
</div> </div>
</div>
); );
}; }
src/components/ScrollView.tsx
View file @ 4c0532a7
import { useAsyncState } from "@/common/hooks"; import { useAsyncState } from "@/common/hooks";
import { IProps } from "@/common/Iprops.interface"; import { IProps } from "@/common/Iprops.interface";
import { AppContext } from "@/store/AppProvider";
import BScroll from "@better-scroll/core"; import BScroll from "@better-scroll/core";
import { BScrollConstructor } from "@better-scroll/core/dist/types/BScroll"; import { BScrollConstructor } from "@better-scroll/core/dist/types/BScroll";
import MouseWheel from "@better-scroll/mouse-wheel"; import MouseWheel from "@better-scroll/mouse-wheel";
import ScrollBar from "@better-scroll/scroll-bar"; import ScrollBar from "@better-scroll/scroll-bar";
import Slide from "@better-scroll/slide"; import Slide from "@better-scroll/slide";
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
interface ScrollViewType extends IProps { interface ScrollViewType extends IProps {
wrapHeight?: string; wrapHeight?: string;
prop?: any; prop?: any;
...@@ -75,12 +76,18 @@ export const ScrollView = (props: ScrollViewType) => { ...@@ -75,12 +76,18 @@ export const ScrollView = (props: ScrollViewType) => {
const [dots,setDots]= useState(0) const [dots,setDots]= useState(0)
const [scrollObj, setScrollObj] = useState<BScrollConstructor<{}>>(); const [scrollObj, setScrollObj] = useState<BScrollConstructor<{}>>();
const [currentPage,setCurrentPage] = useState(0) const [currentPage,setCurrentPage] = useState(0)
useEffect(()=>{
const scrollEl = initBScroll(wrapRef.current as HTMLDivElement) const {data,dispatch} = useContext(AppContext)
setScrollObj(scrollEl) useEffect(()=>{
return () => { console.log(data);
scrollObj?.destroy(); dispatch({type:'doSome'})
}; },[])
useEffect(()=>{
const scrollEl = initBScroll(wrapRef.current as HTMLDivElement)
setScrollObj(scrollEl)
return () => {
scrollObj?.destroy();
};
},[wrapRef]) },[wrapRef])
useEffect(() => { useEffect(() => {
setDots(children&&children.props.children.length) setDots(children&&children.props.children.length)
...@@ -94,7 +101,9 @@ export const ScrollView = (props: ScrollViewType) => { ...@@ -94,7 +101,9 @@ export const ScrollView = (props: ScrollViewType) => {
} }
return prevState return prevState
}) })
scrollObj?.on('slideWillChange', (page:any) => { scrollObj?.on('slidePageChanged', (page:any) => {
console.log(page);
setCurrentPage((prevState: number)=>{ setCurrentPage((prevState: number)=>{
if(prevState !== page.pageY){ if(prevState !== page.pageY){
return page.pageY return page.pageY
......
src/main.tsx
View file @ 4c0532a7
import React from 'react' import React from "react";
import ReactDOM from 'react-dom/client' import ReactDOM from "react-dom/client";
import './style.css' import "./style.css";
import { App } from './App' import { App } from "./App";
import { AppProvider } from "./store/AppProvider";
import { BrowserRouter } from "react-router-dom";
const Root = ReactDOM.createRoot(document.getElementById('root')!) const Root = ReactDOM.createRoot(document.getElementById("root")!);
Root.render( Root.render(
<BrowserRouter>
<AppProvider>
<App /> <App />
</AppProvider>
) </BrowserRouter>
);
src/service/api.ts
View file @ 4c0532a7
import service from "."; import {service , newsService} from ".";
import { Job } from "./types"; import { Job } from "./types";
import {filter, from} from "rxjs"
import { AxiosResponse } from "axios";
export const getJobsByDept = async (department: string) => { export const getJobsByDept = async (department: string) => {
return service.get<unknown, Job[]>( return service.get<unknown, Job[]>(
'/jobs', '/jobs',
...@@ -16,4 +17,11 @@ export const getJobsById = async (id: string) => { ...@@ -16,4 +17,11 @@ export const getJobsById = async (id: string) => {
return service.get<unknown, Job>( return service.get<unknown, Job>(
`/jobs/${id}`, `/jobs/${id}`,
) )
}
export const getNews = async () => {
let data: AxiosResponse<any, any>
const res = newsService.get(`news/newsList`)
const observable = from(res).pipe(filter(r=>r.data))
return observable
} }
\ No newline at end of file
src/service/index.ts
View file @ 4c0532a7
...@@ -4,6 +4,9 @@ const service = Axios.create( ...@@ -4,6 +4,9 @@ const service = Axios.create(
baseURL: 'http://192.168.21.133:3000/' baseURL: 'http://192.168.21.133:3000/'
} }
) )
const newsService = Axios.create({
baseURL: 'https://33.cn/api/'
})
const response_interceptor = (res: AxiosResponse<any>) => { const response_interceptor = (res: AxiosResponse<any>) => {
if (res.status === 200 || res.status === 201) { if (res.status === 200 || res.status === 201) {
...@@ -22,4 +25,13 @@ service.interceptors.response.use( ...@@ -22,4 +25,13 @@ service.interceptors.response.use(
} }
); );
export default service newsService.interceptors.response.use(
\ No newline at end of file (response) => {
let res = response_interceptor(response);
return res;
},
(err) => {
return Promise.reject(err);
}
);
export {service, newsService}
\ No newline at end of file
src/store/AppProvider.tsx
View file @ 4c0532a7
import { createContext } from "react" import { createContext, useEffect, useReducer } from "react"
import {useLocation} from 'react-router-dom'
export {}
const data ={ const data ={
device:'',
layouts:{ layouts:{
currentPage:'',
pageIndex:1
}, },
theme:{ theme:{
} }
} }
const AppContext = createContext(data) export const AppContext = createContext<{data:typeof data,dispatch:any}>({
data:{
device:'pc',
layouts:{
currentPage:'',
pageIndex:0
},
theme:{
}
},
dispatch:()=>null
})
interface Actions {
type: string
payload: any
}
const AppReducer = (state:typeof data,action:Actions)=>{
const {type,payload} = action
console.log(type);
// switch(type){
// case
// }
return state
}
const AppProvider = (props: any)=>{ export const AppProvider = (props: any)=>{
const [state,dispatch] = useReducer(AppReducer,data)
const location = useLocation()
return( return(
<AppContext.Provider value={data}> <AppContext.Provider value={{data:state,dispatch}}>
{props.children} {props.children}
</AppContext.Provider> </AppContext.Provider>
) )
......
src/style.css
View file @ 4c0532a7
...@@ -28,7 +28,13 @@ ...@@ -28,7 +28,13 @@
.table-header{ .table-header{
@apply text-white bg-black py-3 px-2 @apply text-white bg-black py-3 px-2
} }
.hoverGlass{
@apply flex cursor-pointer
hover:shadow-lg hover:backdrop-blur-sm
hover:backdrop-brightness-105
px-8 py-7 rounded-lg transition-all duration-150
relative
}
.featuresGrid{ .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] @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]
} }
......
src/views/About/Contact/index.tsx
View file @ 4c0532a7
...@@ -35,24 +35,50 @@ const Tels = () => { ...@@ -35,24 +35,50 @@ const Tels = () => {
) )
} }
const data = [
{
location: '杭州总部',
tel: '0571-8167-1366'
},
{
location: '广州分部',
tel: '17706425022'
},
{
location: '上海分部',
tel: '135-8800-1627'
},
{
location: '南京分部',
tel: '135-5811-2690'
}
]
export const Contact = () => { export const Contact = () => {
return ( return (
<AppContianer> <AppContianer className='flex items-center justify-center'>
<div className=" w-10/12 mx-auto mt-16"> <div className='-translate-x-[5vw]'>
<div>Contact us</div> <div className="py-12">
<div>联系我们</div> <div className="hero-title">Contact us</div>
<Tels /> <div className="sub-title-cn">联系我们</div>
<div className="grid grid-cols-2"> </div>
<div>
<div>西湖区办公室</div> <div className='grid grid-cols-2 gap-[2rem] pb-12'>
<div>地点</div> {
data.map((i,index)=>(
<div className='item' key={index}>
<div>{i.location}</div>
<div className=' text-2xl font-extrabold'>{i.tel}</div>
</div> </div>
<div> ))
<div>西湖区办公室</div> }
<div>地点</div> </div>
<div>
<div className='item'>
<div>邮箱</div>
<div className=' text-2xl font-extrabold'>support@33.cn</div>
</div> </div>
</div> </div>
</div> </div>
</AppContianer> </AppContianer>
) )
......
src/views/About/JoinUs/index.tsx
View file @ 4c0532a7
...@@ -10,6 +10,7 @@ import { useAsyncState } from "@/common/hooks"; ...@@ -10,6 +10,7 @@ import { useAsyncState } from "@/common/hooks";
import { Job } from "@/service/types"; import { Job } from "@/service/types";
import { getJobs } from "@/fetch/dataFetch"; import { getJobs } from "@/fetch/dataFetch";
import StyledButton from "@/components/StyledButton"; import StyledButton from "@/components/StyledButton";
import HoverBox from "@/components/HoverBox";
interface DataGridType extends IProps { interface DataGridType extends IProps {
data: any[]; data: any[];
doSetSelecteItem: (id: string) => any; doSetSelecteItem: (id: string) => any;
...@@ -24,20 +25,18 @@ const DataGrid = (props: DataGridType) => { ...@@ -24,20 +25,18 @@ const DataGrid = (props: DataGridType) => {
return ( return (
<div className={`grid grid-cols-2 labtop:grid-cols-3 gap-11 ${className}`}> <div className={`grid grid-cols-2 labtop:grid-cols-3 gap-11 ${className}`}>
{data?.map((i, index) => ( {data?.map((i, index) => (
<div <HoverBox key={index} className='min-w-[280px] cursor-pointer flex items-center justify-between gap-x-3 px-5 py-2'>
key={index} <>
onClick={() => doSetSelecteItem(i.id)}
className="job-item min-w-[300px] cursor-pointer flex items-center justify-between gap-x-3 border px-5 py-2"
>
<div> <div>
<div className="content-title-cn">{i.title}</div> <div className="content-title-cn h-[50px] w-[100%] line-clamp-1 ">{i.title}</div>
<div className='normal-text'>{i.diploma}</div> <div className='normal-text'>{i.diploma}</div>
<div className='normal-text'>{i.location}</div> <div className='normal-text'>{i.location}</div>
</div> </div>
<div> <div>
<ChevronRightIcon className="w-5 h-5"></ChevronRightIcon> <ChevronRightIcon className="w-5 h-5"></ChevronRightIcon>
</div> </div>
</div> </>
</HoverBox>
))} ))}
</div> </div>
); );
...@@ -98,6 +97,7 @@ export const JoinUs = () => { ...@@ -98,6 +97,7 @@ export const JoinUs = () => {
useEffect(() => { useEffect(() => {
(async () => { (async () => {
const res = await getJobs(activedDepartment); const res = await getJobs(activedDepartment);
setSelecteData(res); setSelecteData(res);
})(); })();
}, [activedDepartment]); }, [activedDepartment]);
......
src/views/Baas33/Dtails.tsx
View file @ 4c0532a7
...@@ -27,16 +27,15 @@ export const Details = (props:DetailsType)=>{ ...@@ -27,16 +27,15 @@ export const Details = (props:DetailsType)=>{
} }
},[id]) },[id])
return( return(
// <DetailScrollView> <PageLayout ballConfig={detailsBalls[0].setting} gradientConfig={detailsBg[0].config}>
<PageLayout ballConfig={detailsBalls[0].setting} gradientConfig={detailsBg[0].config} className='overflow-y-scroll'> <DetailScrollView>
<AppContianer>
<div> <div className='px-28'>
<div className="h-[48px]"></div> <DetailsExceTable data={products} />
<DetailsExceTable data={products} />
<div className="h-[260px]"></div>
</div> </div>
</AppContianer>
</DetailScrollView>
</PageLayout> </PageLayout>
// </DetailScrollView>
) )
} }
src/views/Baas33/index.tsx
View file @ 4c0532a7
...@@ -11,14 +11,14 @@ import { HeroBaas } from './HeroBaas'; ...@@ -11,14 +11,14 @@ import { HeroBaas } from './HeroBaas';
import { baasBg } from '@/config/bgSetting'; import { baasBg } from '@/config/bgSetting';
import { Service } from './Service'; import { Service } from './Service';
import { useContext, useEffect } from 'react';
import { AppContext } from '@/store/AppProvider';
export interface IAppProps { export interface IAppProps {
} }
export default function Baas33 () { export default function Baas33 () {
const b =['#sdfiw2','#fud8fu','#sdif822'] const b =['#sdfiw2','#fud8fu','#sdif822']
console.log( b.toString());
return ( return (
<ScrollView> <ScrollView>
<div className="vertival-content"> <div className="vertival-content">
......
src/views/News/index.tsx
View file @ 4c0532a7
import HoverBox from "@/components/HoverBox";
import { NewsScrollView } from "@/components/NewsScrollView"; import { NewsScrollView } from "@/components/NewsScrollView";
import { PageLayout } from "@/layouts/PageLayout"; import { PageLayout } from "@/layouts/PageLayout";
import { getNews } from "@/service/api";
import { array } from "prop-types"; import { array } from "prop-types";
import * as React from "react"; import * as React from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { count, filter, map, reduce } from "rxjs";
export interface IAppProps {} export interface IAppProps {}
export default function News(props: IAppProps) { export default function News(props: IAppProps) {
const [news, setNews] = useState<any[]>([]);
useEffect(() => {
(async () => {
(await getNews()).pipe<any[]>(map((v) => v.data.list)).subscribe(
(v) => {
const result = v.filter((v, i) => i < 10);
console.log(result);
setNews(result);
},
(err) => new Error(err)
);
})();
}, []);
const getDate = (time: number) => {
const date = new Date(time);
return {
year: date.getFullYear(),
day: date.getDay(),
month: date.getMonth(),
};
};
return ( return (
// <PageLayout> </PageLayout> // <PageLayout> </PageLayout>
<div className="flex h-screen w-full "> <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="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 className="pl-28 h-[75%] mt-16 relative">
<div> <div>
<div className=" text-8xl font-bold">News</div> <div className=" text-8xl font-bold">News</div>
<div className=" text-lg tracking-wide">新闻动态</div> <div className=" text-lg tracking-wide">新闻动态</div>
...@@ -21,53 +49,79 @@ export default function News(props: IAppProps) { ...@@ -21,53 +49,79 @@ export default function News(props: IAppProps) {
<div className="w-12/12">帮助您紧跟落地实况和未来发展趋势</div> <div className="w-12/12">帮助您紧跟落地实况和未来发展趋势</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="right h-full pt-28 w-7/12 relative"> <div className="right h-full pt-28 w-7/12 relative">
<> <NewsScrollView>
<NewsScrollView> <div>
<div> <ul className="news-list">
<div className="news-list overflow-y-hidden "> {news.map((i, index) => (
{ <HoverBox key={index} className="min-w-[650px] my-12 max-w-[90%]">
Array(11).fill('any').map((i,index)=>( <>
<div className="news-item flex min-w-[650px] my-12 max-w-[90%] cursor-pointer <div className="news-date min-w-[200px] flex gap-x-2 text-white font-medium items-center ">
hover:shadow-lg hover:backdrop-blur-sm <div className="translate-y-3">
hover:backdrop-brightness-105 <div className="tracking-wide">
px-8 py-7 rounded-lg transition-all duration-150 " key={index}> {getDate(i.time_stamp).year}/
<div className="news-date min-w-[200px] flex gap-x-2 text-white font-medium items-center "> </div>
<div className="translate-y-3"> <div className="tracking-wide">
<div className="tracking-wide">2002/</div> {getDate(i.time_stamp).month}/
<div className="tracking-wide">02/</div> </div>
</div> </div>
<div className="text-8xl border-white border-b-4">19</div> <div className="text-8xl border-white border-b-4">
</div> {getDate(i.time_stamp).day}
<div className="news-content text-black "> </div>
<div className="title text-lg py-2 text-overflow: ellipsis line-clamp-2"> </div>
福建省高校区块链技术师资培训召开 | 华侨大学复杂美产教融合 <div className="news-content text-black ">
</div> <div className="title text-lg py-2 text-overflow: ellipsis line-clamp-2">
<div className='text-sm opacity-75 indent-8 text-overflow: ellipsis line-clamp-3'> {i.title}
“时光荏苒如白驹过隙，回首2021年，依然是曲折多变的一年，疫情反复，你我众志成城；格局动荡，依然坚守阵地。 </div>
2021年，在国家政策支持下，以区块链为代表的新兴技术力量势如破竹，回顾2021年，复杂美创造了哪些新成绩呢？” <div className="text-sm opacity-75 indent-8 text-overflow: ellipsis line-clamp-3">
</div> {i.desc}
</div> </div>
</div> </div>
)) </>
}
</div> </HoverBox>
<div className="pullup-tips"> // <li
<div className="before-trigger"> // className="min-w-[650px] my-12 max-w-[90%] hoverGlass bg-white/10"
// key={index}
// >
// <div className="absolute rounded-lg backdrop-filter blur-[2px] top-0 left-0 border-2 border-white w-full h-full px-5 py-5"></div>
// <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">
// {getDate(i.time_stamp).year}/
// </div>
// <div className="tracking-wide">
// {getDate(i.time_stamp).month}/
// </div>
// </div>
// <div className="text-8xl border-white border-b-4">
// {getDate(i.time_stamp).day}
// </div>
// </div>
// <div className="news-content text-black ">
// <div className="title text-lg py-2 text-overflow: ellipsis line-clamp-2">
// {i.title}
// </div>
// <div className="text-sm opacity-75 indent-8 text-overflow: ellipsis line-clamp-3">
// {i.desc}
// </div>
// </div>
// </li>
))}
</ul>
<div className="pullup-tips">
<div className="before-trigger">
<span className="pullup-txt">Pull up and load more</span> <span className="pullup-txt">Pull up and load more</span>
</div> </div>
<div className="after-trigger"> <div className="after-trigger">
<span className="pullup-txt">Loading...</span> <span className="pullup-txt">Loading...</span>
</div> </div>
</div>
</div> </div>
</NewsScrollView> </div>
</> </NewsScrollView>
{/* <div>312</div> */}</div> </div>
</div> </div>
); );
} }
yarn.lock
View file @ 4c0532a7
...@@ -257,6 +257,13 @@ ...@@ -257,6 +257,13 @@
dependencies: dependencies:
"@better-scroll/core" "^2.4.2" "@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"
integrity sha512-eeS77CZs+V72dkya10e5ptndBAbhQVcXoYGvfoIihOJgCPqO5MdYTpzRmlbshYCEE5juUMLe82Kx8FSbOejpAw==
dependencies:
"@better-scroll/core" "^2.4.2"
"@better-scroll/pull-up@^2.4.2": "@better-scroll/pull-up@^2.4.2":
version "2.4.2" version "2.4.2"
resolved "https://registry.yarnpkg.com/@better-scroll/pull-up/-/pull-up-2.4.2.tgz#25357ceef7bac7520930f0631896b63a10f82a6f" resolved "https://registry.yarnpkg.com/@better-scroll/pull-up/-/pull-up-2.4.2.tgz#25357ceef7bac7520930f0631896b63a10f82a6f"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment