Skip to content

W
web2022
Commit 40ea0dbf authored by mxm-web-develop's avatar mxm-web-develop
Browse files
Options

321

parent 9dd76b23
Hide whitespace changes
Inline Side-by-side
Showing with 130 additions and 81 deletions
.env.development
View file @ 40ea0dbf
NODE_ENV=dev NODE_ENV=dev
VITE_FETCH_URL = http://localhost:3333/ VITE_FETCH_URL = http://192.168.23.80:3333/
VITE_CHAIN33_DOC = "http://localhost:3335" VITE_CHAIN33_DOC = "http://192.168.23.80:3335"
VITE_BAAS33_DOC = "http://localhost:3336" VITE_BAAS33_DOC = "http://192.168.23.80:3336"
VITE_NEWS_API = "'https://33.cn/api/" VITE_NEWS_API = "'https://33.cn/api/"
\ No newline at end of file
package.json
View file @ 40ea0dbf
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
"@heroicons/react": "^1.0.6", "@heroicons/react": "^1.0.6",
"ahooks": "^3.4.1", "ahooks": "^3.4.1",
"axios": "^0.27.2", "axios": "^0.27.2",
"dayjs": "^1.11.4",
"gsap": "^3.10.4", "gsap": "^3.10.4",
"jquery": "^3.6.0", "jquery": "^3.6.0",
"lodash": "^4.17.21", "lodash": "^4.17.21",
......
src/components/Animations.tsx 0 → 100644
View file @ 40ea0dbf
export const ListStaggering = ()=>{
}
\ No newline at end of file
src/components/EventsScrollView.tsx
View file @ 40ea0dbf
...@@ -24,11 +24,10 @@ const initBScroll = (el:HTMLElement) => { ...@@ -24,11 +24,10 @@ const initBScroll = (el:HTMLElement) => {
threshold: 100, threshold: 100,
autoplay:true, autoplay:true,
startPageYIndex:0, startPageYIndex:0,
loop:false, loop:true,
}, },
probeType:2, probeType:2,
nestedScroll: true, nestedScroll: true,
// 显示滚动条, // 显示滚动条,
useTransition:true, useTransition:true,
scrollX: true, scrollX: true,
......
src/components/HoverBox.tsx
View file @ 40ea0dbf
...@@ -10,11 +10,11 @@ export default function HoverBox (props: HoverBoxType) { ...@@ -10,11 +10,11 @@ export default function HoverBox (props: HoverBoxType) {
const item = useRef(null) const item = useRef(null)
const {children, className} = props; const {children, className} = props;
return ( return (
<li <div
ref={item} ref={item}
className={" hoverGlass " + " " +className } className={`hoverGlass ${className&&className} `}
> >
{children} {children}
</li> </div>
); );
} }
src/components/LazyImg.tsx
View file @ 40ea0dbf
...@@ -3,10 +3,11 @@ import { useEffect, useRef, useState } from "react" ...@@ -3,10 +3,11 @@ import { useEffect, useRef, useState } from "react"
import {gsap} from 'gsap' import {gsap} from 'gsap'
interface LazyImgType extends IProps{ interface LazyImgType extends IProps{
img:any img:any
animate?:string
} }
export const LazyImg =(props:LazyImgType)=>{ export const LazyImg =(props:LazyImgType)=>{
const {img,className}=props const {img,className,animate}=props
const [show,setShow] = useState(false) const [show,setShow] = useState(false)
const imgbox = useRef(null) const imgbox = useRef(null)
const loaded = (e:any)=>{ const loaded = (e:any)=>{
...@@ -15,9 +16,20 @@ export const LazyImg =(props:LazyImgType)=>{ ...@@ -15,9 +16,20 @@ export const LazyImg =(props:LazyImgType)=>{
} }
} }
useEffect(()=>{ useEffect(()=>{
gsap.from(imgbox.current,{opacity:0,y:300,duration:0.8}) switch(animate){
case 'contact':
gsap.from(imgbox.current,{opacity:0,x:-300,duration:0.6})
break;
case 'baas33':
gsap.from(imgbox.current,{opacity:0.1,duration:0.6})
break;
default:
gsap.from(imgbox.current,{opacity:0,y:300,duration:0.8})
break
}
},[]) },[])
return( return(
<img src={img} ref={imgbox} className={`${show?" visible":" invisible"} ${className}`} onLoad={loaded}/> <img src={img} ref={imgbox} className={`${show?" visible opacity-100":" invisible"} ${className}`} onLoad={loaded}/>
) )
} }
\ No newline at end of file
src/components/Navbar/index.tsx
View file @ 40ea0dbf
...@@ -10,7 +10,7 @@ const HoverLink = () =>{ ...@@ -10,7 +10,7 @@ const HoverLink = () =>{
const [onHover,setOnHover] =useState(false); const [onHover,setOnHover] =useState(false);
return ( return (
<div <div
className='relative' className='relative content-1-cn text-slate-400'
onPointerEnter={()=>setOnHover(true)} onPointerEnter={()=>setOnHover(true)}
onPointerLeave={()=>setOnHover(false)} onPointerLeave={()=>setOnHover(false)}
> >
...@@ -25,12 +25,12 @@ const HoverLink = () =>{ ...@@ -25,12 +25,12 @@ const HoverLink = () =>{
animate-fadeIn animate-fadeIn
animate-alternate animate-alternate
animate-fill-both animate-fill-both
bg-opacity-75 bg-opacity-25
-translate-x-[18%] text-black rounded-lg flex-col -translate-x-[18%] text-black rounded-lg flex-col
items-center justify-center text-center py-3 px-2 bg-[#EAF0F4]'> items-center justify-center text-center py-3 px-2 bg-[#EAF0F4]'>
<div className='my-[8px] cursor-pointer'>上链查</div> <div className='my-[8px] cursor-pointer hover:text-theme-blue'>上链查</div>
<div className='my-[8px] cursor-pointer'>上链购</div> <div className='my-[8px] cursor-pointer hover:text-theme-blue'>上链购</div>
<div className='my-[8px] cursor-pointer'>链证宝</div> <div className='my-[8px] cursor-pointer hover:text-theme-blue'>链证宝</div>
</div> </div>
</div> </div>
:'' :''
...@@ -48,7 +48,7 @@ export default function Navbar (props: IAppProps) { ...@@ -48,7 +48,7 @@ export default function Navbar (props: IAppProps) {
<div className='left '> <div className='left '>
<img src={Logo} alt="" /> <img src={Logo} alt="" />
</div> </div>
<div className='right flex gap-x-12'> <div className='right content-1-cn 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>
<Link to='chain33' className={`hover:text-black ${pathname ==='/chain33'?'text-black':'text-slate-400'}`}>Chain33</Link> <Link to='chain33' className={`hover:text-black ${pathname ==='/chain33'?'text-black':'text-slate-400'}`}>Chain33</Link>
<HoverLink /> <HoverLink />
......
src/components/ScrollView.tsx
View file @ 40ea0dbf
...@@ -7,9 +7,10 @@ import MouseWheel from "@better-scroll/mouse-wheel"; ...@@ -7,9 +7,10 @@ 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 NestedScroll from '@better-scroll/nested-scroll' import NestedScroll from '@better-scroll/nested-scroll'
import ContactImg from '@/assets/img/contact.png'
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
import { LazyImg } from "./LazyImg";
interface ScrollViewType extends IProps { interface ScrollViewType extends IProps {
wrapHeight?: string; wrapHeight?: string;
prop?: any; prop?: any;
...@@ -131,6 +132,11 @@ export const ScrollView = (props: ScrollViewType) => { ...@@ -131,6 +132,11 @@ export const ScrollView = (props: ScrollViewType) => {
{children} {children}
</div> </div>
<Dots dotNumber={dots} currentPage={currentPage} pageMove={pageMoving}/> <Dots dotNumber={dots} currentPage={currentPage} pageMove={pageMoving}/>
<LazyImg
img={ContactImg}
animate='contact'
className='absolute bottom-[20px] right-[100px] w-[234px]'
></LazyImg>
</div> </div>
); );
}; };
src/components/StyledButton.tsx
View file @ 40ea0dbf
...@@ -37,7 +37,7 @@ export default function StyledButton (props: StyledButtonType) { ...@@ -37,7 +37,7 @@ export default function StyledButton (props: StyledButtonType) {
},[colorIs]) },[colorIs])
return ( return (
<button <button
className={`text-sm py-2 tracking-widest cursor-pointer rounded-full px-8 ${className?className:''}`} className={`normal-text py-2 tracking-widest cursor-pointer rounded-full px-8 ${className?className:''}`}
style={{ style={{
color:colorStyle.text, color:colorStyle.text,
backgroundColor:colorStyle.bgColor backgroundColor:colorStyle.bgColor
......
src/style.css
View file @ 40ea0dbf
...@@ -7,6 +7,9 @@ ...@@ -7,6 +7,9 @@
} }
@layer components{ @layer components{
.super-hero-title{
@apply text-white text-[135px] tracking-wider font-bold font-sans leading-[90px]
}
.hero-title{ .hero-title{
@apply text-theme-dark text-[90px] tracking-wider font-[400] font-galano leading-[90px] @apply text-theme-dark text-[90px] tracking-wider font-[400] font-galano leading-[90px]
} }
...@@ -35,7 +38,7 @@ ...@@ -35,7 +38,7 @@
@apply font-bebas text-[40px] font-[400] @apply font-bebas text-[40px] font-[400]
} }
.int-font-hero{ .int-font-hero{
@apply font-bebas font-[700] text-[90px] ml-[25px] tracking-widest leading-[91px] @apply font-bebas font-[700] text-[90px] ml-[5px] text-right tracking-widest leading-[91px]
} }
.int-font-sub{ .int-font-sub{
@apply font-bebas font-[700] text-[20px] ml-[25px] tracking-widest leading-[20px] @apply font-bebas font-[700] text-[20px] ml-[25px] tracking-widest leading-[20px]
...@@ -55,6 +58,9 @@ ...@@ -55,6 +58,9 @@
.content-sub2-title-cn{ .content-sub2-title-cn{
@apply text-theme-dark text-[16px] tracking-wide font-cnnote font-bold py-3 @apply text-theme-dark text-[16px] tracking-wide font-cnnote font-bold py-3
} }
.normal-content{
@apply text-theme-dark text-[14px] tracking-wide font-cnnote font-normal
}
.normal-text{ .normal-text{
@apply text-theme-dark text-[12px] tracking-wide font-cnnote font-normal @apply text-theme-dark text-[12px] tracking-wide font-cnnote font-normal
} }
...@@ -66,6 +72,7 @@ ...@@ -66,6 +72,7 @@
} }
.hoverGlass{ .hoverGlass{
@apply flex cursor-pointer @apply flex cursor-pointer
hover:rounded-lg
hover:bg-white/30 hover:shadow-sm hover:bg-white/30 hover:shadow-sm
px-8 py-7 rounded-lg transition-all duration-150 px-8 py-7 rounded-lg transition-all duration-150
relative relative
......
src/views/About/JoinUs/index.tsx
View file @ 40ea0dbf
...@@ -22,7 +22,6 @@ interface DtailContainerType extends IProps { ...@@ -22,7 +22,6 @@ interface DtailContainerType extends IProps {
const DataGrid = (props: DataGridType) => { const DataGrid = (props: DataGridType) => {
const { data, doSetSelecteItem,className } = props; const { data, doSetSelecteItem,className } = props;
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) => (
...@@ -63,12 +62,12 @@ const DtailContainer = (props: DtailContainerType) => { ...@@ -63,12 +62,12 @@ const DtailContainer = (props: DtailContainerType) => {
<div className='sub-title-cn'> {data.title}</div> <div className='sub-title-cn'> {data.title}</div>
<StyledButton text='我要应聘' color="black"></StyledButton> <StyledButton text='我要应聘' color="black"></StyledButton>
</div> </div>
<div>{data.diploma}</div> <div className='normal-text'>{data.diploma}</div>
<div>{data.location}</div> <div className='normal-text'>{data.location}</div>
</div> </div>
<div className='py-3'> <div className='py-3'>
<div className='content-sub-title-cn'>岗位描述</div> <div className='content-sub-title-cn'>岗位描述</div>
<div className="flex-col normal-text"> <div className="flex-col content-1-cn">
{data.requirments.split("；").map((i: string, index: number) => ( {data.requirments.split("；").map((i: string, index: number) => (
<div key={index}> - {i}</div> <div key={index}> - {i}</div>
))} ))}
...@@ -76,7 +75,7 @@ const DtailContainer = (props: DtailContainerType) => { ...@@ -76,7 +75,7 @@ const DtailContainer = (props: DtailContainerType) => {
</div> </div>
<div className='py-3'> <div className='py-3'>
<div className='content-sub-title-cn'>岗位要求</div> <div className='content-sub-title-cn'>岗位要求</div>
<div className="flex-col normal-text"> <div className="flex-col content-1-cn">
{data.demands.split("；").map((i: string, index: number) => ( {data.demands.split("；").map((i: string, index: number) => (
<div key={index}> - {i}</div> <div key={index}> - {i}</div>
))} ))}
...@@ -110,13 +109,16 @@ export const JoinUs = () => { ...@@ -110,13 +109,16 @@ export const JoinUs = () => {
setSelecteData(res); setSelecteData(res);
})(); })();
}, [activedDepartment]); }, [activedDepartment]);
const cancelAndSelect =(id:string)=>{
setSelecteItem(undefined);
setActivedDepartment(id)
}
const selectedItem = useMemo(() => { const selectedItem = useMemo(() => {
return data?.filter((i) => i.id === selecteItem)[0]; return data?.filter((i) => i.id === selecteItem)[0];
}, [selecteItem]); }, [selecteItem]);
return ( return (
<> <>
<div className="py-12"> <div className="pt-12 pb-5">
<div className="hero-title">Join us</div> <div className="hero-title">Join us</div>
<div className="sub-title-cn">加入我们</div> <div className="sub-title-cn">加入我们</div>
</div> </div>
...@@ -128,9 +130,9 @@ export const JoinUs = () => { ...@@ -128,9 +130,9 @@ export const JoinUs = () => {
<div <div
key={i} key={i}
onClick={() => { onClick={() => {
selecteItem ? "" : setActivedDepartment(i); selecteItem ? cancelAndSelect(i): setActivedDepartment(i);
}} }}
className={`item cursor-pointer my-5 ${ className={`item cursor-pointer content-sub2-title-cn my-5 ${
activedDepartment !== i ? "text-gray-500" : "text-black" activedDepartment !== i ? "text-gray-500" : "text-black"
}`} }`}
> >
......
src/views/About/Memorabilia/EventItem.tsx
View file @ 40ea0dbf
...@@ -36,8 +36,8 @@ export const EventItem = (props:EventItemType)=>{ ...@@ -36,8 +36,8 @@ export const EventItem = (props:EventItemType)=>{
}} }}
> >
<div className="flex items-baseline"> <div className="flex items-baseline">
<div className='int-font-sub'>{dates&&dates[0]}/</div> <div className='int-font-sub text-theme-dark'>{dates&&dates[0]}/</div>
<div className=' int-font-hero border-b-[2px] border-theme-dark'>{dates&&dates[1]}</div> <div className=' int-font-hero border-b-[2px] border-theme-dark text-theme-dark'>{dates&&dates[1]}</div>
</div> </div>
<div className='py-2 line-clamp-3 h-[70px] des-cn overflow-y-hidden font-cnnote'> <div className='py-2 line-clamp-3 h-[70px] des-cn overflow-y-hidden font-cnnote'>
{data?data.title:''} {data?data.title:''}
......
src/views/About/Partners/index.tsx
View file @ 40ea0dbf
...@@ -43,7 +43,7 @@ export const Partners = () => { ...@@ -43,7 +43,7 @@ export const Partners = () => {
<div className="right w-2/12 z-[200000] pl-[3rem]"> <div className="right w-2/12 z-[200000] pl-[3rem]">
<div className='flex pt-16'> <div className='flex pt-16'>
<VerticalText text='合作伙伴' containerStyle="sub-title-cn py-5 px-5"/> <VerticalText text='合作伙伴' containerStyle="sub-title-cn py-5 px-5"/>
<VerticalText text='Partners' containerStyle="hero-title mt-6" itemStyle=" rotate-90 -my-[2.7rem]"/> <VerticalText text='Partners' containerStyle="hero-title mt-6" itemStyle=" rotate-90 -my-[1.81rem]"/>
</div> </div>
</div> </div>
</div> </div>
......
src/views/About/index.tsx
View file @ 40ea0dbf
...@@ -14,8 +14,8 @@ import { aboutBg, baasBg } from "@/config/bgSetting"; ...@@ -14,8 +14,8 @@ import { aboutBg, baasBg } from "@/config/bgSetting";
const Description = () => { const Description = () => {
return ( return (
<div className="w-full"> <div className="w-full">
<div className="sub-title-cn mb-[63px] ">链上复杂美 上链不复杂</div> <div className="sub-title-cn mb-[63px] pl-[80px]">链上复杂美 上链不复杂</div>
<div className="paragraph content-1-cn flex-col gap-y-4"> <div className="paragraph content-1-cn flex-col gap-y-4 pl-[80px] min-w-[720px] max-w-[85%]">
<div className="pb-[14px]"> <div className="pb-[14px]">
公司成立于2008年，2013年启动区块链、智能合约的研发与创新，2014年申请区块链发明专利：钱包找回功能。已累计申请了400多项区块链技术的发明专利，2019年据德温特专利家族统计，复杂美区块链发明专利排名位于全球第三，仅次于阿里巴巴和IBM。 公司成立于2008年，2013年启动区块链、智能合约的研发与创新，2014年申请区块链发明专利：钱包找回功能。已累计申请了400多项区块链技术的发明专利，2019年据德温特专利家族统计，复杂美区块链发明专利排名位于全球第三，仅次于阿里巴巴和IBM。
</div> </div>
...@@ -26,7 +26,7 @@ const Description = () => { ...@@ -26,7 +26,7 @@ const Description = () => {
2018年11月，复杂美区块链Chain33在Github上开源，是较早落地运行的平行链架构系统，并基于模块设计可协作开发，大幅降低区块链的开发维护成本，实现快捷易用的跨链交易，有近100个平行链项目落地，有去中心化交易、去中心化社交、去中心化电商、去中心化溯源存证、等一系列应用。 2018年11月，复杂美区块链Chain33在Github上开源，是较早落地运行的平行链架构系统，并基于模块设计可协作开发，大幅降低区块链的开发维护成本，实现快捷易用的跨链交易，有近100个平行链项目落地，有去中心化交易、去中心化社交、去中心化电商、去中心化溯源存证、等一系列应用。
</div> </div>
</div> </div>
<div className="flex py-10 content-sub2-title-cn gap-x-[100px] "> <div className="flex py-10 content-sub2-title-cn gap-x-[4.5rem] pl-[80px] ">
<div> <div>
<span className=" text-[#084DFD] border-b-4 border-[#084DFD] py-3"> <span className=" text-[#084DFD] border-b-4 border-[#084DFD] py-3">
优质 优质
......
src/views/Baas33/Dtails.tsx
View file @ 40ea0dbf
...@@ -72,7 +72,7 @@ export const Details = (props:DetailsType)=>{ ...@@ -72,7 +72,7 @@ export const Details = (props:DetailsType)=>{
<DetailScrollView> <DetailScrollView>
<div className='px-28'> <div className='px-28 normal-text'>
<TableHeader data={TableHeaderData}></TableHeader> <TableHeader data={TableHeaderData}></TableHeader>
<DetailsExceTable data={products} /> <DetailsExceTable data={products} />
</div> </div>
......
src/views/Baas33/index.tsx
View file @ 40ea0dbf
...@@ -14,6 +14,7 @@ import { Service } from './Service'; ...@@ -14,6 +14,7 @@ import { Service } from './Service';
import { useContext, useEffect } from 'react'; import { useContext, useEffect } from 'react';
import { AppContext } from '@/store/AppProvider'; import { AppContext } from '@/store/AppProvider';
import { useNavigate } from 'react-router'; import { useNavigate } from 'react-router';
import { LazyImg } from '@/components/LazyImg';
export interface IAppProps { export interface IAppProps {
} }
...@@ -26,9 +27,8 @@ export default function Baas33 () { ...@@ -26,9 +27,8 @@ export default function Baas33 () {
<div className="vertival-content"> <div className="vertival-content">
<PageLayout ballConfig={baasBalls[0].setting}> <PageLayout ballConfig={baasBalls[0].setting}>
<> <>
<div className="translate-y-[8vh] relative"> <div className="translate-y-[8vh] relative">
<AppContianer className='z-[999999]'> <AppContianer className='z-[9999] labtop:px-28'>
<div> <div>
<div className="title-1-cn">复杂美区块链开放服务平台</div> <div className="title-1-cn">复杂美区块链开放服务平台</div>
...@@ -40,7 +40,11 @@ export default function Baas33 () { ...@@ -40,7 +40,11 @@ export default function Baas33 () {
</div> </div>
</AppContianer> </AppContianer>
<div> <div>
<img src={Baas33img} className="w-[110%]" /> <LazyImg
img={Baas33img}
animate='baas33'
className="w-[110%]"
></LazyImg>
<div className=" -translate-y-[5rem] flex justify-center gap-x-20 title-2-cn"> <div className=" -translate-y-[5rem] flex justify-center gap-x-20 title-2-cn">
<div>高效</div> <div>高效</div>
<div>稳定</div> <div>稳定</div>
...@@ -49,9 +53,6 @@ export default function Baas33 () { ...@@ -49,9 +53,6 @@ export default function Baas33 () {
</div> </div>
</div> </div>
</div> </div>
{/*
<HeroBaas></HeroBaas> */}
</> </>
......
src/views/Chain33/index.tsx
View file @ 40ea0dbf
...@@ -38,10 +38,10 @@ const HeroItem =(props: HeroItemType)=>{ ...@@ -38,10 +38,10 @@ const HeroItem =(props: HeroItemType)=>{
<div className="hero font-sans font-extrabold text-9xl"> <div className="hero font-sans font-extrabold text-9xl">
<img src={img} /> <img src={img} />
</div> </div>
<div className="subtitle border-b-2 text-lg font-medium w-4/12 my-3"> <div className="content-title-cn border-b-2 text-white w-[130px] my-3">
{subtitle} {subtitle}
</div> </div>
<div className='labtop:text-sm w-[230px] text-xs'> <div className=' w-[230px] normal-text text-white'>
{content} {content}
</div> </div>
</div> </div>
...@@ -60,16 +60,16 @@ export default function Chain33() { ...@@ -60,16 +60,16 @@ export default function Chain33() {
<div className="vertival-content"> <div className="vertival-content">
<PageLayout> <PageLayout>
<div className="w-full h-full flex justify-center items-baseline overflow-hidden"> <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="img-holder mx-auto w-[1200px] relative ">
<div className="absolute z-[999] 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>
<div className="p-5 border-white border-[4px] rounded xl:border-[8px]"> <div className="p-5 border-white border-[6px] rounded ">
<div className="text-7xl xl:text-9xl tracking-widest font-bold"> <div className="super-hero-title py-5 tracking-widest font-bold">
Chain33 Chain33
</div> </div>
<div className="text-white text-lg xl:text-2xl pt-5 tracking-wide text-center"> <div className="content-title-cn text-white pt-5 tracking-wide text-center">
复杂美区块链开发者平台 复杂美区块链开发者平台
</div> </div>
</div> </div>
...@@ -80,7 +80,6 @@ export default function Chain33() { ...@@ -80,7 +80,6 @@ export default function Chain33() {
</div> </div>
</div> </div>
</div> </div>
<LazyImg <LazyImg
img={chain33Bg} img={chain33Bg}
className='object-scale-down object-bottom z-[9]' className='object-scale-down object-bottom z-[9]'
......
src/views/News/NewsDetails.tsx
View file @ 40ea0dbf
...@@ -4,6 +4,7 @@ import { PageLayout } from "@/layouts/PageLayout"; ...@@ -4,6 +4,7 @@ import { PageLayout } from "@/layouts/PageLayout";
import { getNews, getNewsDetail } from "@/service/api"; import { getNews, getNewsDetail } from "@/service/api";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { useParams } from "react-router"; import { useParams } from "react-router";
import { useNavigate } from "react-router-dom";
import { map } from "rxjs"; import { map } from "rxjs";
interface NewsDetailsType extends IProps{} interface NewsDetailsType extends IProps{}
...@@ -11,6 +12,7 @@ export const NewsDetails = (props:NewsDetailsType)=>{ ...@@ -11,6 +12,7 @@ export const NewsDetails = (props:NewsDetailsType)=>{
const params = useParams() const params = useParams()
const [data,setData] = useState<any>() const [data,setData] = useState<any>()
const [latestNews,setLatestNews] = useState<any>() const [latestNews,setLatestNews] = useState<any>()
const navigate =useNavigate()
useEffect(() => { useEffect(() => {
if(params['id']){ if(params['id']){
getNewsDetail(params['id']).subscribe(v=>{ getNewsDetail(params['id']).subscribe(v=>{
...@@ -62,7 +64,7 @@ export const NewsDetails = (props:NewsDetailsType)=>{ ...@@ -62,7 +64,7 @@ export const NewsDetails = (props:NewsDetailsType)=>{
<div> <div>
{ {
latestNews&&latestNews.map((k:any,index:number)=>( 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 key={index} onClick={()=>navigate(`/news/${k.id}`)} className="py-1 normal-text cursor-pointer hover:text-theme-blue">{k.title}</div>
)) ))
} }
</div> </div>
......
src/views/News/index.tsx
View file @ 40ea0dbf
...@@ -9,7 +9,8 @@ import { count, filter, map, reduce } from "rxjs"; ...@@ -9,7 +9,8 @@ import { count, filter, map, reduce } from "rxjs";
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { baasBalls } from "@/config/ballSetting"; import { baasBalls } from "@/config/ballSetting";
import { newsBg } from "@/config/bgSetting"; import { newsBg } from "@/config/bgSetting";
import { ChevronRightIcon } from "@heroicons/react/solid";
import * as dayjs from 'dayjs'
export interface IAppProps {} export interface IAppProps {}
export default function News(props: IAppProps) { export default function News(props: IAppProps) {
...@@ -31,21 +32,24 @@ export default function News(props: IAppProps) { ...@@ -31,21 +32,24 @@ export default function News(props: IAppProps) {
}, []); }, []);
const getDate = (time: number) => { const getDate = (time: number) => {
const date = new Date(time); const d = dayjs.unix(Math.floor(time/1000) )
return { return {
year: date.getFullYear(), year: d.year().toString(),
day: date.getDay(), day: d.date(),
month: date.getMonth(), month: d.month()+1>10?d.month():"0"+d.month()
}; };
}; };
const useDate = useCallback((time: number)=>getDate(time),[])
return ( return (
<PageLayout fullscreen gradientConfig={newsBg[0].config}> <PageLayout fullscreen gradientConfig={newsBg[0].config}>
<div className="flex h-screen w-full "> <div className="flex h-screen w-full normal-text">
<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=" hero-title text-white">News</div>
<div className=" sub-title-cn text-white">新闻动态</div> <div className=" sub-title-cn text-white">新闻动态</div>
<div className="absolute bottom-0 "> <div className="absolute bottom-0 ">
<div className="w-12/12 content-1-cn text-white"> <div className="w-12/12 content-1-cn text-white">
...@@ -59,34 +63,37 @@ export default function News(props: IAppProps) { ...@@ -59,34 +63,37 @@ export default function News(props: IAppProps) {
<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 className='mb-12 pb-[200px]'> <div className='mb-12 pb-[200px]'>
<ul className="news-list "> <ul className="news-list -translate-x-[25px]">
{news.map((i, index) => ( {news.map((i, index) => (
<div onClick={()=>navigate(`/news/${i.id}`)} key={index}> <div onClick={()=>navigate(`/news/${i.id}`)} key={index}>
<HoverBox className="min-w-[650px] my-12 max-w-[90%]"> <HoverBox className="max-w-[90%] my-[15px] flex gap-x-[20px] items-center min-w-[650px] ">
<> <>
<div className="news-date min-w-[200px] flex gap-x-2 text-white font-medium items-center "> <div className="news-date min-w-[200px] flex text-white font-medium items-center ">
<div className="translate-y-3"> <div className="translate-y-3">
<div className="int-font-sub"> <div className="int-font-sub">
{getDate(i.time_stamp).year}/ {useDate(i.time_stamp).year}/
</div>
<div className="int-font-sub text-right">
{useDate(i.time_stamp).month}/
</div>
</div>
<div className="int-font-hero border-white text-right border-b-2">
{useDate(i.time_stamp).day}
</div>
</div> </div>
<div className="int-font-sub text-right"> <div className="news-content text-black ">
{getDate(i.time_stamp).month}/ <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> </div>
</div> <span className='invisible'>
<div className="int-font-hero border-white border-b-2"> <ChevronRightIcon className="w-5 h-5"></ChevronRightIcon>
{getDate(i.time_stamp).day} </span>
</div> </>
</div> </HoverBox>
<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>
</>
</HoverBox>
</div> </div>
))} ))}
</ul> </ul>
......
yarn.lock
View file @ 40ea0dbf
...@@ -627,6 +627,11 @@ csstype@^3.0.2: ...@@ -627,6 +627,11 @@ csstype@^3.0.2:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw== integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
dayjs@^1.11.4:
version "1.11.4"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.4.tgz#3b3c10ca378140d8917e06ebc13a4922af4f433e"
integrity sha512-Zj/lPM5hOvQ1Bf7uAvewDaUcsJoI6JmNqmHhHl3nyumwe0XHwt8sWdOVAPACJzCebL8gQCi+K49w7iKWnGwX9g==
dayjs@^1.9.1: dayjs@^1.9.1:
version "1.11.2" version "1.11.2"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.2.tgz#fa0f5223ef0d6724b3d8327134890cfe3d72fbe5" resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.2.tgz#fa0f5223ef0d6724b3d8327134890cfe3d72fbe5"
......
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