Skip to content

W
web2022
Commit 0046a3d1 authored by mxm-web-develop's avatar mxm-web-develop
Browse files
Options

312

parent 02378dd2
Hide whitespace changes
Inline Side-by-side
Showing with 517 additions and 532 deletions
src/components/DtailScrollView.tsx
View file @ 0046a3d1
......@@ -54,10 +54,12 @@ export const DetailScrollView = (props: ScrollViewType) => {
return (
<div className=" h-full overflow-hidden relative" ref={wrapRef}>
<div
className="h-[calc(100vh-85px)] overflow-hidden min-h-[750px] "
>
<div className="vertical-wrapper h-full relative" ref={wrapRef}>
{children}
</div>
</div>
);
};
src/components/Navbar/index.tsx
View file @ 0046a3d1
......@@ -5,6 +5,7 @@ import Logo from "@/assets/img/logo.png";
import LogoWhite from "@/assets/img/logo_white.png";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { AppContext } from "@/store/AppProvider";
import { debounce as _debounce, throttle as _throttle } from "lodash";
export interface IAppProps extends IProps {}
interface HoverLinkType extends IProps {
......@@ -32,58 +33,51 @@ const HoverLink = (props: HoverLinkType) => {
return (
<div
className={`relative normal-content font-normal ${
props.theme === "light" ? "text-[#061E3B]" : "text-white opacity-70"
props.theme === "light" ? "text-[#061E3B]" : "text-white "
}`}
onPointerEnter={() => setOnHover(true)}
onPointerLeave={() => setOnHover(false)}
>
<div className="cursor-pointer">合作生态</div>
<div className="cursor-pointer opacity-70">合作生态</div>
{onHover ? (
<div>
<div
className={`w-[180%]
<div
className={`w-[185%]
flex-cols
absolute
animate-fadeIn
animate-alternate
animate-fill-both
bg-opacity-30
duration-75
-translate-x-[18%] rounded-lg flex-col
text-[#061E3B]
items-center justify-center text-center py-3 px-2 bg-[#EAF0F4]
-translate-x-[20%] rounded-lg flex-col
items-center justify-center text-center
`}
>
<div
className={` mt-[15px] cursor-pointer ${
props.theme === "light"
? " text-theme-dark bg-[#EAF0F4]/50 hover:bg-[#EAF0F4] hover:text-theme-blue hover:bg-text-theme-blue"
: " text-white/70 hover:text-white bg-[#EAF0F4]/20 hover:bg-[#EAF0F4]/60 "
} rounded-t-lg py-3 px-2 `}
onClick={() => goLink("slc")}
>
上链查
</div>
<div
className={` cursor-pointer ${
props.theme === "light"
? " text-theme-dark bg-[#EAF0F4]/50 hover:bg-[#EAF0F4] hover:text-theme-blue "
: "text-white/70 hover:text-white bg-[#EAF0F4]/20 hover:bg-[#EAF0F4]/60 "
} py-3 px-2 `}
onClick={() => goLink("slg")}
>
<div
className={`my-[8px] cursor-pointer ${
props.theme === "light"
? "hover:text-theme-blue"
: "hover:text-white"
} `}
onClick={() => goLink("slc")}
>
上链查
</div>
<div
className={`my-[8px] cursor-pointer ${
props.theme === "light"
? "hover:text-theme-blue"
: "hover:text-white"
} `}
onClick={() => goLink("slg")}
>
上链购
</div>
<div
className={`my-[8px] cursor-pointer ${
props.theme === "light"
? "hover:text-theme-blue"
: "hover:text-white"
}`}
onClick={() => goLink("lzb")}
>
链证宝
</div>
上链购
</div>
<div
className={` cursor-pointer ${
props.theme === "light"
? " text-theme-dark bg-[#EAF0F4]/50 hover:bg-[#EAF0F4] hover:text-theme-blue "
: "text-white/70 hover:text-white bg-[#EAF0F4]/20 hover:bg-[#EAF0F4]/60 "
} rounded-b-lg py-3 px-2 `}
onClick={() => goLink("lzb")}
>
链证宝
</div>
</div>
) : (
......@@ -97,26 +91,35 @@ export default function Navbar(props: IAppProps) {
const { pathname } = useLocation();
const { data } = React.useContext(AppContext);
const navigate = useNavigate();
const navbarWithBg = useCallback(()=>{
if(pathname.includes('/news/')){
return true
}
const navbarWithBg = useCallback(() => {
if (pathname.includes("/news/")) {
return true;
}
// else if(pathname.includes("/details/")){
// return true;
// }
return false;
}, [pathname]);
},[pathname])
const myNavigate = (path: string)=>{
if(pathname === path){
return
}
navigate(path)
}
const themeStyle = useCallback(
(theme: string, active: boolean) => {
if (theme === "light") {
if (active) {
return "text-theme-dark content-sub2-title-cn py-0 hover:text-theme-blue";
return "text-theme-dark content-sub2-title-cn py-0 hover:text-theme-blue cursor-pointer";
}
return "text-[#061E3B] font-normal hover:text-theme-blue";
return "text-[#061E3B] font-normal hover:text-theme-blue cursor-pointer";
} else {
if (active) {
return "content-sub2-title-cn py-0 text-white hover:opacity-100";
return "content-sub2-title-cn py-0 text-[#EAF0F4] hover:text-white cursor-pointer";
}
return "font-normal py-0 text-white opacity-70 hover:opacity-100";
return "font-normal py-0 text-white opacity-70 hover:opacity-100 cursor-pointer";
}
},
[data]
......@@ -124,10 +127,10 @@ export default function Navbar(props: IAppProps) {
return (
<>
<nav
className={`invisible moblie:visible flex min-w-[1440px]
justify-between absolute px-[120px] w-full items-center
top-0 z-[99999] py-6 text-sm text-[#061E3B] font-normal
${navbarWithBg()?' bg-white':' bg-none'}
className={`visible h-[92px] flex min-w-[1440px]
justify-between fixed px-[120px] w-full items-center
top-0 z-[99999] text-sm text-[#061E3B] font-normal
${navbarWithBg() ? " bg-white" : " bg-none"}
`}
>
<div className="left ">
......@@ -140,8 +143,8 @@ export default function Navbar(props: IAppProps) {
/>
</div>
<div className="right normal-content items-start flex gap-x-12">
<Link
to="/"
<div
onClick={() => myNavigate("/")}
className={`${
pathname === "/"
? themeStyle(data.theme, true)
......@@ -149,9 +152,9 @@ export default function Navbar(props: IAppProps) {
}`}
>
Baas33
</Link>
<Link
to="chain33"
</div>
<div
onClick={() => myNavigate("/chain33")}
className={`${
pathname === "/chain33"
? themeStyle(data.theme, true)
......@@ -159,10 +162,10 @@ export default function Navbar(props: IAppProps) {
}`}
>
Chain33
</Link>
</div>
<HoverLink theme={data.theme} />
<Link
to="news"
<div
onClick={() => myNavigate("/news")}
className={`${
pathname === "/news"
? themeStyle(data.theme, true)
......@@ -170,10 +173,10 @@ export default function Navbar(props: IAppProps) {
}`}
>
新闻动态
</Link>
{/* <Link to='classes' className={`hover: text-theme-dark ${pathname ==='/classes'?' text-theme-dark':'text-[#061E3B] font-normal'}`}>公开课</Link> */}
<Link
to="about"
</div>
{/* <div to='classes' className={`hover: text-theme-dark ${pathname ==='/classes'?' text-theme-dark':'text-[#061E3B] font-normal'}`}>公开课</Link> */}
<div
onClick={() => myNavigate("/about")}
className={`${
pathname === "/about"
? themeStyle(data.theme, true)
......@@ -181,7 +184,7 @@ export default function Navbar(props: IAppProps) {
}`}
>
关于我们
</Link>
</div>
</div>
</nav>
</>
......
src/components/NewsScrollView.tsx
View file @ 0046a3d1
......@@ -54,7 +54,7 @@ export const NewsScrollView = (props: ScrollViewType) => {
},[wrapRef])
return (
<div className="h-full overflow-hidden -ml-[200px]" ref={wrapRef}>
<div className="h-full overflow-hidden -ml-[230px]" ref={wrapRef}>
{children}
</div>
);
......
src/components/ScrollView.tsx
View file @ 0046a3d1
......@@ -130,8 +130,7 @@ export const ScrollView = (props: ScrollViewType) => {
}
return (
<div
className="slide-vertical h-screen w-screen "
style={{ overflow: "hidden" }}
className="h-screen w-screen overflow-hidden min-h-[750px] min-w-[1440px]"
>
<div className="vertical-wrapper h-full relative" ref={wrapRef}>
{children}
......@@ -140,7 +139,7 @@ export const ScrollView = (props: ScrollViewType) => {
<LazyImg
img={data.theme==='light'?ContactImg:ContactImgWhite}
animate='contact'
className='absolute bottom-[20px] right-[0px] w-[234px]'
className='absolute bottom-[20px] right-[20px] w-[234px]'
></LazyImg>
</div>
);
......
src/config/ballSetting.ts
View file @ 0046a3d1
......@@ -131,19 +131,19 @@ export const aboutBalls=[
page: 1,
setting: [
{
size: "10%",
position: ["-50px", "75%"],
size: "13%",
position: ["-50px", "60%"],
rotation: "210",
zIndex: "9999",
zIndex: "-999",
color: "white",
},
{
size: "20%",
size: "25%",
align: "right",
position: ["8%", "45%"],
zIndex: "-1",
position: ["-85px", "10%"],
zIndex: "-999",
color: "blue",
},
}
]
},
{
......@@ -157,9 +157,9 @@ export const aboutBalls=[
color: "white"
},
{
size: "18%",
size: "25%",
align: "right",
position: ["-5%", "25%"],
position: ["-85px", "10%"],
zIndex: "-999",
color: "blue",
}
......
src/fetch/dataFetch.tsx
View file @ 0046a3d1
......@@ -43,8 +43,6 @@ export const getEvents = (index:number)=>{
const l = v.length
// const group = Math.ceil(l/index)
const output= _chunk(v,index)
console.log(output);
return output
}));
return observable
......
src/layouts/AppContianer.tsx
View file @ 0046a3d1
......@@ -10,7 +10,7 @@ interface AppContianerType extends IProps{
export const AppContianer=(props:AppContianerType)=>{
const {children,bgColor,className} = props
return(
<div className={`px-[120px] moblie:min-w-[1440px] relative ${className?className:''}`}>
<div className={`px-[120px] w-full h-full relative ${className?className:''}`}>
{children}
</div>
)
......
src/layouts/BallAnime.tsx
View file @ 0046a3d1
......@@ -62,7 +62,7 @@ export const BallAnime = (props: BallAnimeType) => {
const animation = props.animation ? props.animation : "move-in";
return (
<div className="w-full h-full moblie:min-w-[1440px] min-h-[750px] relative">
<div className="w-full h-full overflow-hidden relative">
{props.config && props.config.length > 0
? props.config.map((i,index) => {
return <BallHolder key={index} config={i}></BallHolder>;
......
src/layouts/GradientLay.tsx
View file @ 0046a3d1
......@@ -69,7 +69,7 @@ const BgImgHodler = (props:BgElement)=>{
export const GradientLay = (props: BgAnimeType) => {
const { children } = props;
return (
<div className=" relative h-full w-full moblie:min-w-[1440px] overflow-hidden">
<div className=" relative h-full w-full overflow-hidden ">
<div className="w-full h-full absolute top-0 left-0 z-[-999] ">
{props&&props.config && props.config.length > 0
? props.config.map((i,index) => {
......
src/layouts/PageLayout.tsx
View file @ 0046a3d1
......@@ -13,8 +13,8 @@ export const PageLayout=(props:PageLayoutType)=>{
const {children,className,ballConfig,gradientConfig,fullscreen} = props
return(
<GradientLay config={gradientConfig}>
<div className={`h-screen w-screen relative ${className}`}>
<BallAnime config={ballConfig}>
<div className={`w-full h-full min-w-[1440px] relative ${className?className:''}`}>
<BallAnime config={ballConfig} className='w-full h-full'>
<div className={`h-full w-full flex-col items-center ${fullscreen ?'pt-0':'pt-[70px]'}`}>
{children}
</div>
......
src/style.css
View file @ 0046a3d1
......@@ -11,26 +11,16 @@
}
.hero-title{
@apply text-theme-dark text-[75px] tracking-wider font-[400] font-galano leading-[90px]
@apply text-theme-dark text-[75px] tracking-wider font-[400] font-galano leading-[68px]
}
.title-1-cn{
@apply text-theme-dark text-[40px] tracking-[2px] font-[900] font-cnnote leading-[40px]
}
.normal-content{
@apply text-theme-dark text-[14px] tracking-[1px] font-[400] font-cnnote leading-[20px]
}
.title-1-en{
@apply text-theme-dark text-[75px] tracking-wider font-[400] font-galano leading-[65px]
}
.int-font-1{
@apply font-bebas text-[40px] font-[400]
}
......@@ -41,9 +31,8 @@
@apply font-bebas font-[700] text-[20px] ml-[25px] tracking-widest leading-[20px]
}
.subTitle-1-cn{
@apply text-theme-dark text-[30px] tracking-[1px] font-[400] font-cnnote leading-[30px]
@apply text-theme-dark text-[30px] tracking-[1px] font-[800] font-cnnote leading-[30px]
}
.sub-title-cn{
@apply text-theme-dark text-[24px] tracking-wide font-cnnote font-bold py-1
......@@ -91,21 +80,20 @@ boby{
text-shadow: 。56rem 。61rem 5rem rgba(55, 107, 227, 0.6);
}
body{
@apply normal-content
}
.verticalText-cn{
@apply subTitle-1-cn verticalText tracking-[15px]
}
.verticalText{
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
}
.centered{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.clip-title{
/*
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}
\ No newline at end of file
src/views/About/Contact/index.tsx
View file @ 0046a3d1
......@@ -26,35 +26,46 @@ const data = [
export const Contact = () => {
return (
<AppContianer className="flex items-center justify-center">
<div className="-translate-x-[5vw]">
<div className="py-12">
<div className="title-1-en">Contact us</div>
<AppContianer>
<div className="flex h-full items-center justify-center ">
<div>
<div className="pb-[60px]">
<div className="hero-title">Contact us</div>
<div className="subTitle-1-cn">联系我们</div>
</div>
<div className="grid grid-cols-2 gap-x-[100px] gap-y-[30px] pb-12">
{data.map((i, index) => (
<div className="item" key={index}>
<div className="normal-content">{i.location}</div>
<div className=" sub-title-cn">{i.tel}</div>
</div>
))}
</div>
<div className="item">
<div className="normal-content">邮箱</div>
<a className="sub-title-cn">support@33.cn</a>
</div>
<div className="locations flex items-start gap-x-[135px] pt-12">
<div className="item flex-col normal-content">
<div className='content-sub2-title-cn'>杭州西湖区办公室</div>
<div className='py-1 normal-content'>
<div>浙江省杭州市西湖区</div>
<div>文三路90号</div>
<div>东部软件园科技大厦7楼</div>
</div>
</div>
<div className="item flex-col normal-content">
<div className="item" >
<div className="normal-content">杭州总部</div>
<div className=" sub-title-cn">0571-8167-1366</div>
</div>
<div className="item" >
<div className="normal-content">广州分部</div>
<div className=" sub-title-cn">177-0642-5022</div>
</div>
<div className="item" >
<div className="normal-content">上海分部</div>
<div className=" sub-title-cn">135-8800-1627</div>
</div>
<div className="item" >
<div className="normal-content">南京分部</div>
<div className=" sub-title-cn">135-5811-2690</div>
</div>
<div className="item">
<div className="normal-content">邮箱</div>
<a className="sub-title-cn">support@33.cn</a>
</div>
<div className="item">
</div>
<div className="item flex-col normal-content">
<div className='content-sub2-title-cn'>杭州西湖区办公室</div>
<div className='py-1 normal-content'>
<div>浙江省杭州市西湖区</div>
<div>文三路90号</div>
<div>东部软件园科技大厦7楼</div>
</div>
</div>
<div className="item flex-col normal-content">
<div className='content-sub2-title-cn'>杭州滨江办公室</div>
<div className='py-1 normal-content'>
<div>浙江省杭州市滨江区</div>
......@@ -63,6 +74,7 @@ export const Contact = () => {
</div>
</div>
</div>
</div>
</AppContianer>
);
};
src/views/About/JoinUs/index.tsx
View file @ 0046a3d1
......@@ -23,7 +23,7 @@ interface DtailContainerType extends IProps {
const DataGrid = (props: DataGridType) => {
const { data, doSetSelecteItem,className } = props;
return (
<div className={`grid grid-cols-2 gap-y-[15px] ${className}`}>
<div className={`grid grid-cols-3 gap-y-[15px] ${className}`}>
{data?.map((i, index) => (
<div onClick={()=>doSetSelecteItem(i.id)} key={index}>
<HoverBox className='w-[270px] cursor-pointer flex items-center justify-between px-[20px] py-2'>
......@@ -45,7 +45,6 @@ const DataGrid = (props: DataGridType) => {
};
const DtailContainer = (props: DtailContainerType) => {
const { doCancelSelecteItem, data,className } = props;
return (
<div className={className+ " -translate-y-[8px]"}>
<div onClick={() => doCancelSelecteItem(undefined)} className={`flex normal-content hover:text-theme-blue items-center `}>
......@@ -118,48 +117,50 @@ export const JoinUs = () => {
return data?.filter((i) => i.id === selecteItem)[0];
}, [selecteItem]);
return (
<div className="flex items-center h-full w-full relative min-h-[750px] labtop:min-h-[960px] ">
<div className="centered min-h-[750px] labtop:min-h-[960px] w-full labtop:w-10/12">
<div className=" pb-5 pl-[375px]">
<div className="hero-title">Join us</div>
<div className="sub-title-cn">加入我们</div>
</div>
<div className="h-full w-full flex gap-x-16">
<div className='left min-w-[100px]'>
<div className="flex-col">
{departments.map((i: string) => (
<div
key={i}
onClick={() => {
selecteItem ? cancelAndSelect(i): setActivedDepartment(i);
}}
className={`item cursor-pointer content-sub2-title-cn my-5 ${
activedDepartment !== i ? "text-gray-500" : "text-black"
}`}
>
{i}
</div>
))}
</div>
</div>
<AppContianer>
<div className="flex items-center h-full w-full relative py-[30px] ">
<div className=" w-full">
<div className="right pl-[210px] flex-col w-full">
{selecteItem ? (
<DtailContainer
className="min-h-[520px] w-7/12 labtop:w-6/12 screen:w-5/12"
doCancelSelecteItem={setSelecteItem}
data={selectedItem}
></DtailContainer>
) : (
<DataGrid
className='w-10/12 labtop:w-11/12 screen:w-5/12 -translate-x-[19px]'
data={selecteData ? selecteData : []}
doSetSelecteItem={setSelecteItem}
></DataGrid>
)}
<div className="h-full min-h-[520px] w-full labtop:w-10/12 mx-auto flex gap-x-[100px]">
<div className='left translate-y-[130px] min-w-[100px]'>
<div className="flex-col justify-start items-center">
{departments.map((i: string) => (
<div
key={i}
onClick={() => {
selecteItem ? cancelAndSelect(i): setActivedDepartment(i);
}}
className={`item cursor-pointer content-sub2-title-cn my-5 ${
activedDepartment !== i ? "text-gray-500" : "text-black"
}`}
>
{i}
</div>
))}
</div>
</div>
<div className="flex-col w-full">
<div className="w-full pb-[40px]">
<div className="hero-title">Join us</div>
<div className="subTitle-1-cn">加入我们</div>
</div>
{selecteItem ? (
<DtailContainer
className="w-7/12"
doCancelSelecteItem={setSelecteItem}
data={selectedItem}
></DtailContainer>
) : (
<DataGrid
className='w-10/12 -translate-x-[18px] '
data={selecteData ? selecteData : []}
doSetSelecteItem={setSelecteItem}
></DataGrid>
)}
</div>
</div>
</div>
</div>
</div>
</AppContianer>
);
};
src/views/About/Memorabilia/EventItem.tsx
View file @ 0046a3d1
......@@ -7,7 +7,7 @@ import {
useInteractions,
useHover,
} from "@floating-ui/react-dom-interactions";
import {resizeOb} from "@/store/AppProvider";
interface EventItemType extends IProps {
itmeIndex: number;
data: any;
......@@ -23,16 +23,16 @@ interface EventColsType extends IProps {
export const EventItem = (props: EventItemType) => {
const { itmeIndex, data } = props;
const [open, setOpen] = useState(false);
const { x, y, reference, floating, strategy,context } = useFloating({
const { x, y, reference, floating, strategy, context } = useFloating({
open,
onOpenChange: setOpen,
placement: itmeIndex>1?"left" :"right",
placement: itmeIndex > 1 ? "left" : "right",
strategy: "fixed",
});
const {getReferenceProps, getFloatingProps} = useInteractions([
const { getReferenceProps, getFloatingProps } = useInteractions([
useHover(context, {
// props
})
}),
]);
const move = useMemo(() => {
return itmeIndex * 85 + "px";
......@@ -49,35 +49,37 @@ export const EventItem = (props: EventItemType) => {
return (
<>
<div
className={`max-w-[12rem] h-fit cursor-pointer`}
className={`max-w-[15.5rem] h-fit cursor-pointer`}
ref={reference}
style={{
transform: `translateY(${move})`,
}}
>
<div className="flex items-baseline">
<div className="flex items-baseline justify-end">
<div className="int-font-sub text-theme-dark">
{dates && dates[0]}/
</div>
<div className="int-font-hero border-b-[2px] border-theme-dark backdrop-opacity-30 text-theme-dark">
{dates && dates[1]}
<div className=" flex flex-col int-font-hero backdrop-opacity-30 text-theme-dark">
<div>{dates && dates[1]}</div>
<div className=" w-[80px] h-[2px] bg-theme-dark rounded"></div>
</div>
</div>
<div className="py-2 normal-content line-clamp-3 h-[70px] overflow-y-hidden ">
<div className="py-2 normal-content line-clamp-3 h-[70px] text-justify overflow-y-hidden ">
{data ? data.title : ""}
</div>
</div>
{open&&data && data.title.length > 37 && (
{open && data && data.title.length > 50 && (
<div
ref={floating}
className="bg-theme-dark normal-content z-[9999] text-white py-5 px-3 w-[260px] rounded-md break-all"
className="bg-theme-dark
normal-content z-[9999] text-white py-5 px-3 w-[270px] text-right rounded-md "
style={{
position: strategy,
top: y ?? 0,
left: x ?? 0,
}}
>
{data.title}
{data.title}
</div>
)}
</>
......@@ -87,7 +89,7 @@ export const EventItem = (props: EventItemType) => {
export const EventCols = (props: EventColsType) => {
const { data } = props;
return (
<div className="grid grid-cols-4 labtop:grid-cols-5 pb-[3rem]">
<div className="grid grid-cols-4 pb-[3rem]">
{data &&
data.length > 0 &&
data.map((i: any, index: number) => (
......@@ -95,30 +97,17 @@ export const EventCols = (props: EventColsType) => {
))}
</div>
);
};
const checkWidth=(width:number)=>{
return width>=1920
}
export const EventsTable = (props: EventsTableType) => {
const { tableIndex, data } = props;
const [colData, setColData] = useState<undefined | any[]>(undefined);
const setData=(width:number)=>{
let half=4
if(checkWidth(width)){
half=5
}
useEffect(() => {
const half = 4;
const c = _chunk(data, half);
setColData(c);
}
useEffect(() => {
resizeOb.subscribe((event)=>{
//@ts-ignore
setData(event.currentTarget?.innerWidth)
})
setData(window.innerWidth)
// setData(4);
}, [data]);
return (
<div>
{colData &&
......
src/views/About/Memorabilia/index.tsx
View file @ 0046a3d1
......@@ -13,34 +13,17 @@ interface MemorabiliaType extends IProps {
}
const checkWidth=(width:number)=>{
return width>=1920
}
export const Memorabilia = () => {
const [data,setData] = useState<any>()
const [currentSlide,setCurrentSlide] = useState(0)
useEffect(()=>{
let fetchNum=8,fetchData:any=null;
resizeOb.subscribe((event:any)=>{
//@ts-ignore
const _fetchNum=checkWidth(event.currentTarget.innerWidth)?10:8
if(_fetchNum!==fetchNum){
fetchNum=_fetchNum
setData(data.slice(0,8))
getEvents(_fetchNum).subscribe(v=>{
setData(v)
},err=>{ throw new Error(err)})
}
})
fetchData = getEvents(checkWidth(window.innerWidth)?10:8).subscribe(v=>{
const fetch =getEvents(8).subscribe(v=>{
setData(v)
},err=>{ throw new Error(err)})
return ()=> fetchData.unsubscribe()
return ()=> fetch.unsubscribe()
},[currentSlide])
const scrollHandler: {
next?: Function
prev?: Function
......@@ -62,32 +45,35 @@ export const Memorabilia = () => {
}
return (
<AppContianer className="flex items-center justify-start h-full w-full labtop:px-[120px] ">
<div className='w-[896px] labtop:w-[1120px] min-h-[750px] relative '>
<div className='absolute top-12 right-0 translate-x-[100%]'>
<AppContianer >
<div className="flex h-full min-h-[750px] items-center justify-start ">
<div className='absolute top-12 right-[120px] '>
<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 className=" w-[80px] h-[2px] bg-theme-dark rounded"></div>
<div>大事记</div>
</div>
</div>
<div className='w-10/12 relative '>
{
data?
<div className="relative">
<img className='absolute top-96 -left-16 rotate-180 opacity-30 hover:opacity-100 cursor-pointer' onClick={() => scrollTo(-1)} src={Step} alt="" />
<div className="relative flex">
<img className='absolute top-[18rem] -left-16 rotate-180 opacity-30 hover:opacity-100 cursor-pointer' onClick={() => scrollTo(-1)} src={Step} alt="" />
<div className='labtop:w-10/12 w-full mx-auto'>
<EventsScrollView getScrollHandler={getScrollHandler}>
<div className='flex '>
<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>
data&&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>
<img className='absolute top-96 -right-16 opacity-30 hover:opacity-100 cursor-pointer' onClick={() => scrollTo(1)} src={Step} alt="" />
</div>
<img className='absolute top-[18rem] -right-16 opacity-30 hover:opacity-100 cursor-pointer' onClick={() => scrollTo(1)} src={Step} alt="" />
</div>
:
<div>
......@@ -95,6 +81,7 @@ export const Memorabilia = () => {
</div>
}
</div>
</div>
</AppContianer >
)
}
\ No newline at end of file
src/views/About/Partners/index.tsx
View file @ 0046a3d1
......@@ -33,21 +33,20 @@ export const Partners = () => {
return (
<AppContianer className='h-full'>
<div className="flex h-full">
<div className='center w-10/12 flex items-center justify-start h-full'>
<div className='center w-10/12 flex items-center justify-center h-full'>
<div className='grid grid-cols-4 gap-5 -translate-y-10'>
{
imgList.map(i=> <img key={i} src={`/imgs/${i}.png`}></img>)
imgList.map(i=> <img key={i} className='max-w-[210px]' src={`/imgs/${i}.png`}></img>)
}
</div>
</div>
<div className="flex w-2/12 pl-[50px] pt-[46px] z-[2000]">
<div className="sub-title-cn verticalText">合作伙伴</div>
<div className="verticalText-cn">合作伙伴</div>
<div className="hero-title verticalText">Partners</div>
</div>
</div>
</AppContianer>
)
......
src/views/About/index.tsx
View file @ 0046a3d1
......@@ -26,7 +26,7 @@ const Description = () => {
2018年11月，复杂美区块链Chain33在Github上开源，是较早落地运行的平行链架构系统，并基于模块设计可协作开发，大幅降低区块链的开发维护成本，实现快捷易用的跨链交易，有近100个平行链项目落地，有去中心化交易、去中心化社交、去中心化电商、去中心化溯源存证等一系列应用。
</div>
</div>
<div className="flex content-sub2-title-cn labtop:pt-[168px] pt-[60px] gap-x-[100px] pl-[80px] ">
<div className="flex content-sub2-title-cn labtop:pt-[128px] labtop:pb-[40px] pt-[40px] pb-[20px] gap-x-[100px] pl-[80px] ">
<div>
<span className=" text-[#084DFD] border-b-4 border-[#084DFD] py-3">
优质
......@@ -89,25 +89,20 @@ export default function About(props: any) {
};
return (
<ScrollView>
<div className="vertival-content ">
<div>
<PageLayout
ballConfig={aboutBalls[0].setting}
gradientConfig={aboutBg[0].config}
className="h-full w-full"
>
<AppContianer className="flex items-center h-full w-full relative min-h-[750px] labtop:min-h-[960px]">
<div className=" labtop:h-[650px] centred -translate-y-[30px]">
<div className="flex w-full h-full items-start">
<div className='left w-[35vw] min-w-[480px]'>
<AppContianer>
<div className="flex overflow-y-hidden items-center h-full w-full relative py-[30px] ">
<div className='left w-[35vw] min-w-[480px]'>
<img src={AboutImg} />
</div>
<div className="right ">
<Description></Description>
</div>
</div>
</div>
</AppContianer>
</PageLayout>
......@@ -118,9 +113,7 @@ export default function About(props: any) {
<PageLayout ballConfig={aboutBalls[2].setting}
gradientConfig={aboutBg[2].config}>
<AppContianer>
<JoinUs />
</AppContianer>
</PageLayout>
<PageLayout ballConfig={aboutBalls[3].setting}
......
src/views/Baas33/Advantages/index.tsx
View file @ 0046a3d1
......@@ -16,8 +16,8 @@ const AdvantagesList = () => {
<span className="item-number">2</span>
<div className="item-title">稳定</div>
<div className="item-content">
支持“主链+平行链”分层区块链架构，主链上只允许基础核心的合约，稳定性强，进而保证
<br /> 整个区块链网络的稳定。
支持“主链+平行链”分层区块链架构，主链上只允许基础核心的合约，<br />稳定性强，进而保证
整个区块链网络的稳定。
</div>
</div>
<div className="relative ">
......@@ -44,17 +44,17 @@ const AdvantagesList = () => {
export const Advantages = (props: AdvantagesType) => {
return (
<AppContianer className="flex items-center h-full w-full relative min-h-[750px] labtop:min-h-[960px] ">
<div className="centred -translate-y-[30px]">
<AppContianer className="flex items-center h-full w-full relative py-[30px] ">
<div>
<div className="flex w-full h-full items-start gap-x-[100px] labtop:h-[710px] ">
<div className="left w-[40vw] h-full relative ">
<div className="sub-title-cn pb-[30px]">
<div className="py-[10px] flex items-center gap-x-[24px]">
<div className="w-[80px] h-[2px] bg-theme-dark rounded"></div>
<div>平台优势</div>
<div className="subTitle-1-cn">平台优势</div>
</div>
</div>
<div className="title-1-en">
<div className="hero-title">
Platform
<div>Advantages</div>
</div>
......
src/views/Baas33/Dtails.tsx
View file @ 0046a3d1
import { IProps } from "@/common/Iprops.interface"
import { DetailsExceTable, ItemType } from "@/components/DetailsExceTable"
import { DetailScrollView } from "@/components/DtailScrollView"
import { detailsBalls } from "@/config/ballSetting"
import { detailsBg } from "@/config/bgSetting"
import { detailInstances,contacts } from "@/config/constants"
import { fetchProduct } from "@/fetch/dataFetch"
import { IProps } from "@/common/Iprops.interface";
import { DetailsExceTable, ItemType } from "@/components/DetailsExceTable";
import { DetailScrollView } from "@/components/DtailScrollView";
import { detailsBalls } from "@/config/ballSetting";
import { detailsBg } from "@/config/bgSetting";
import { detailInstances, contacts } from "@/config/constants";
import { fetchProduct } from "@/fetch/dataFetch";
import { AppContianer } from "@/layouts/AppContianer"
import { PageLayout } from "@/layouts/PageLayout"
import { playGround } from "@/rxjs"
import { useEffect, useMemo, useState } from "react"
import { useParams } from 'react-router-dom'
interface DetailsType extends IProps{}
interface TableHeader extends IProps{
data:any
import { AppContianer } from "@/layouts/AppContianer";
import { PageLayout } from "@/layouts/PageLayout";
import { playGround } from "@/rxjs";
import { useEffect, useMemo, useState } from "react";
import { useParams } from "react-router-dom";
interface DetailsType extends IProps {}
interface TableHeader extends IProps {
data: any;
}
const TableHeader = (props:TableHeader)=>{
const {data} = props
return(
<div className='pt-5 pb-10'>
<div className='subTitle-1-cn mb-[30px]'>{data.title}</div>
<div className='flex justify-between'>
{
data.features.map((i:any,index:number)=>(
<div className='item max-w-[284px]' key={index}>
<div className='sub-title-cn'>{i.title}</div>
<div className='normal-content pt-[10px]'>{i.context}</div>
const TableHeader = (props: TableHeader) => {
const { data } = props;
return (
<div className="pt-5 pb-10">
<div className="subTitle-1-cn mb-[30px]">{data.title}</div>
<div className="flex justify-between">
{data.features.map((i: any, index: number) => (
<div className="item max-w-[284px]" key={index}>
<div className="sub-title-cn">{i.title}</div>
<div className="normal-content pt-[10px]">{i.context}</div>
</div>
))}
</div>
</div>
);
};
export const Details = (props: DetailsType) => {
const { id } = useParams();
const [products, setProducts] = useState();
useEffect(() => {
if (id) {
(async () => {
const res = await fetchProduct(String(Number(id) + 1));
const products = res[0].products;
setProducts(products);
})();
}
}, [id]);
const TableHeaderData = useMemo(() => {
const data = detailInstances;
switch (id) {
case "0":
return data[0];
case "1":
return data[1];
case "2":
return data[2];
}
}, [id]);
return (
<PageLayout
ballConfig={detailsBalls[0].setting}
gradientConfig={detailsBg[0].config}
>
<AppContianer className='overflow-hidden mt-[15px]'>
<DetailScrollView>
<div className="normal-content pt-[25px]">
<TableHeader data={TableHeaderData}></TableHeader>
<DetailsExceTable data={products} />
<div className="pb-20 normal-content">
<div className="sub-title-cn">如何收费</div>
<div className="w-6/12 py-3">{TableHeaderData?.fee}</div>
<div className="pt-2">联系方式</div>
{contacts.map((i, index) => (
<div className="flex my-2" key={index}>
<div> {i.text}</div>
<span className="px-1">:</span>
<div>{i.tel}</div>
</div>
))
}
</div>
</div>
)
}
export const Details = (props:DetailsType)=>{
const {id} = useParams()
const [products,setProducts] = useState()
useEffect(()=>{
if(id){
(async ()=>{
const res = await fetchProduct(String(Number(id)+1))
const products = res[0].products
setProducts(products)
})()
}
},[id])
const TableHeaderData = useMemo(() => {
const data = detailInstances
switch (id){
case "0":
return data[0]
case "1":
return data[1]
case "2":
return data[2]
}
},[id])
return(
<PageLayout ballConfig={detailsBalls[0].setting} gradientConfig={detailsBg[0].config}>
<DetailScrollView>
<div className='px-[120px] normal-content '>
<TableHeader data={TableHeaderData}></TableHeader>
<DetailsExceTable data={products} />
<div className='py-5 pb-20 normal-content'>
<div className="sub-title-cn">如何收费</div>
<div className='w-6/12 py-3'>{TableHeaderData?.fee}</div>
<div className='pt-2'>联系方式</div>
{
contacts.map((i,index)=>(
<div className='flex my-2' key={index}>
<div> {i.text}</div>
<span className='px-1'>:</span>
<div>{i.tel}</div>
</div>
))
}
</div>
</div>
</DetailScrollView>
</PageLayout>
)
}
))}
</div>
</div>
</DetailScrollView>
</AppContianer>
</PageLayout>
);
};
src/views/Baas33/Features/index.tsx
View file @ 0046a3d1
......@@ -5,76 +5,74 @@ interface FeaturesType extends IProps {}
export const Features = (props: FeaturesType) => {
return (
<AppContianer className="flex items-center h-full w-full relative min-h-[750px] labtop:min-h-[960px] ">
<>
<div className="h-[100vh] -translate-y-[83px] absolute top-0 left-0 min-w-[920px] w-[60vw] bg-white/40 -z-[1]"></div>
<div className="centred -translate-y-[30px]">
<div className="flex w-full h-full items-start ">
<div className="left min-w-[820px] w-[55vw] h-full relative ">
<div className="title-1-en ">
Functional
<div className="title-1-en">Features</div>
</div>
<div className="py-[10px] flex items-center gap-x-[24px]">
<div className=" w-[80px] h-[2px] bg-theme-dark rounded"></div>
<div className="subTitle-1-cn">功能特点</div>
</div>
<div className="normal-content">一键部署多样化区块链网络</div>
<div className="flex justify-start labtop:justify-end w-full relative pt-[60px] ">
<div className="grid grid-cols-2 labtop:w-9/12 ">
<div className="w-full pb-[48px] mr-[90px]">
<div className="sub-title-cn">快速构建</div>
<div className="normal-content pt-[14px]">
支持一键快速构建联盟链、
<br />
平行链等区块链网络
</div>
<AppContianer className="flex items-center h-full w-full relative py-[30px] ">
<div>
<div className="h-[100vh] -translate-y-[70px] absolute top-0 left-0 min-w-[920px] w-[60vw] bg-white/40 -z-[1]"></div>
<div className="flex w-full h-full items-start ">
<div className="left min-w-[820px] w-[55vw] h-full relative ">
<div className="hero-title ">
Functional
<div className="hero-title">Features</div>
</div>
<div className="py-[10px] flex items-center gap-x-[24px]">
<div className=" w-[80px] h-[2px] bg-theme-dark rounded"></div>
<div className="subTitle-1-cn">功能特点</div>
</div>
<div className="normal-content">一键部署多样化区块链网络</div>
<div className="flex justify-start labtop:justify-end w-full relative labtop:pt-[105px] pt-[90px] ">
<div className="grid grid-cols-2 labtop:w-9/12 ">
<div className="w-full pb-[48px] mr-[90px]">
<div className="sub-title-cn">快速构建</div>
<div className="normal-content pt-[14px]">
支持一键快速构建联盟链、
<br />
平行链等区块链网络
</div>
<div className="w-full pb-[48px] mr-[90px]">
<div className="sub-title-cn">隐私保护</div>
<div className="normal-content pt-[14px]">
提供权限管理、身份关联、
<br />
数据加密等方式保证数据安全
</div>
</div>
<div className="w-full pb-[48px] mr-[90px]">
<div className="sub-title-cn">隐私保护</div>
<div className="normal-content pt-[14px]">
提供权限管理、身份关联、
<br />
数据加密等方式保证数据安全
</div>
<div className="w-full pb-[48px] mr-[90px]">
<div className="sub-title-cn">灵活部署</div>
<div className="normal-content pt-[14px]">
支持节点一键自动化部署省去手动部署
<br />
等大量时间和精力
</div>
</div>
<div className="w-full pb-[48px] mr-[90px]">
<div className="sub-title-cn">灵活部署</div>
<div className="normal-content pt-[14px]">
支持节点一键自动化部署省去手动部署
<br />
等大量时间和精力
</div>
<div className="w-full pb-[48px] mr-[90px]">
<div className="sub-title-cn">多组件支持</div>
<div className="normal-content pt-[14px]">
智能合约模块可插拔
<br /> 支持智能合约语言的多样化
<br />
包括Solidity,Java,C++和Golang等成熟开发语言
</div>
</div>
<div className="w-full pb-[48px] mr-[90px]">
<div className="sub-title-cn">多组件支持</div>
<div className="normal-content pt-[14px]">
智能合约模块可插拔
<br /> 支持智能合约语言的多样化
<br />
包括Solidity,Java,C++和Golang等成熟开发语言
</div>
</div>
</div>
</div>
<div className="right w-[43vw] h-full">
<div className="flex-col w-[320px] items-center mx-auto justify-center ">
<div className="max-w-[320px] min-w-[280px]">
<div className="sub-title-cn pb-[14px]">弹性扩展</div>
<div className="normal-content">支持联盟节点动态增删</div>
</div>
<div className="max-w-[320px] min-w-[280px] mt-[46px]">
<div className="sub-title-cn pb-[14px]">运维监控</div>
<div className="normal-content">
支持区块链节点及硬件资源的实时监控
</div>
</div>
<div className="right w-[40vw] h-full">
<div className="flex-col w-[320px] items-center mx-auto justify-center ">
<div className="max-w-[320px] min-w-[280px]">
<div className="sub-title-cn pb-[14px]">弹性扩展</div>
<div className="normal-content">支持联盟节点动态增删</div>
</div>
<div className="max-w-[320px] min-w-[280px] mt-[46px]">
<div className="sub-title-cn pb-[14px]">运维监控</div>
<div className="normal-content">
支持区块链节点及硬件资源的实时监控
</div>
</div>
</div>
</div>
</div>
</>
</div>
</AppContianer>
);
};
src/views/Baas33/HeroBaas.tsx
View file @ 0046a3d1
......@@ -11,7 +11,7 @@ export const HeroBaas = () => {
>
Baas33
</div> */}
<img src={Baas33} className='min-w-[1440px] w-screen' />
<img src={Baas33} className='min- w-screen' />
<div className=" flex justify-center gap-x-20 sub-title-cn">
<div>高效</div>
<div>稳定</div>
......
src/views/Baas33/Service/index.tsx
View file @ 0046a3d1
......@@ -52,7 +52,7 @@ const ServiceList = () => {
{data.map((i, index) => (
<div
key={index}
onPointerDown={() => goDetails(index)}
onClick={() => goDetails(index)}
className="relative cursor-pointer w-[320px] labtop:w-[370px] pt-[30px] px-[40px] bg-white/40 h-[460px] rounded-[2.5rem] "
>
<div className="sub-title-cn border-black py-[20px]">{i.title}</div>
......@@ -92,12 +92,10 @@ export const Service = (props: ServiceType) => {
<div className=" w-10/12 flex items-center h-full">
<ServiceList />
</div>
<div className="flex w-2/12 pt-[46px] pl-[20px]">
<div className="sub-title-cn verticalText">服务版本</div>
<div className="verticalText-cn">服务版本</div>
<div className="hero-title verticalText">Service</div>
</div>
</div>
</AppContianer>
);
......
src/views/Baas33/index.tsx
View file @ 0046a3d1
......@@ -25,9 +25,9 @@ export default function Baas33() {
return (
<ScrollView>
<div className="vertival-content">
<PageLayout ballConfig={baasBalls[0].setting} className="flex items-center relative h-full w-full min-h-[750px] labtop:min-h-[960px] ">
<div className='h-full w-full relative min-h-[750px]'>
<div className="centered ">
<PageLayout ballConfig={baasBalls[0].setting}>
<div className='h-full w-full relative '>
<div>
<div className='px-[120px] pt-[70px]'>
<div className="title-1-cn">复杂美区块链开放服务平台</div>
<div className="flex gap-x-[20px] mt-[20px] ">
......@@ -65,7 +65,6 @@ export default function Baas33() {
>
<Features></Features>
</PageLayout>
<PageLayout
ballConfig={baasBalls[2].setting}
gradientConfig={baasBg[2].config}
......
src/views/Chain33/index.tsx
View file @ 0046a3d1
......@@ -33,7 +33,7 @@ const HeroItem = (props: HeroItemType) => {
}, [order]);
return (
<div
className={`flex min-h-[750px] h-[85vh] w-[148px] py-16 text-white justify-center
className={`flex min-h-[640px] h-[85vh] w-[148px] py-16 text-white justify-center
${itemPosition ? "items-start" : " items-end"}
`}
>
......@@ -75,8 +75,8 @@ export default function Chain33() {
<div className="vertival-content">
<PageLayout>
<div className="w-full h-full flex justify-center items-baseline overflow-hidden">
<div className=" mx-auto -translate-y-[5%] w-[1440px] relative ">
<div className="absolute z-[999] w-full h-full flex items-center -translate-x-[5%] -translate-y-[20%] justify-center text-white">
<div className=" mx-auto -translate-y-[5%] relative ">
<div className="absolute z-[999] w-full h-full flex items-center -translate-x-[5%] -translate-y-[20%] justify-center text-white">
<div>
<div className="p-[42px] border-white border-[4px] rounded">
<div className="super-hero-title py-5 tracking-widest">
......@@ -109,9 +109,9 @@ export default function Chain33() {
</div>
</PageLayout>
<PageLayout className=" bg-[#084DFF] relative items-center justify-center">
<AppContianer className="flex items-center h-full w-full relative min-h-[750px] labtop:min-h-[960px] ">
<AppContianer className="flex items-center h-full w-full relative labtop:min-h-[960px] ">
<div className='centred -translate-y-[30px] w-full labtop:w-10/12 mx-auto'>
<div className="flex justify-between items-center gap-x-5 min-h-[750px]">
<div className="flex justify-between items-center gap-x-5 ">
<HeroItem
heroTitle="高"
img={Gao}
......
src/views/News/NewsDetails.tsx
View file @ 0046a3d1
......@@ -8,97 +8,110 @@ import { useParams } from "react-router";
import { useNavigate } from "react-router-dom";
import { map } from "rxjs";
interface NewsDetailsType extends IProps{}
export const NewsDetails = (props:NewsDetailsType)=>{
const params = useParams()
const [data,setData] = useState<any>()
const [latestNews,setLatestNews] = useState<any>()
const navigate =useNavigate()
useEffect(() => {
if(params['id']){
getNewsDetail(params['id']).subscribe(v=>{
setData(v)
})
}
},[params])
useEffect(()=>{
getNews().pipe(map(v=> v.data.list)).subscribe(v=>{
const d = v.sort((a:any,b:any)=>{
return b.time_stamp - a.time_stamp
})
const output = d.filter((i:any,index:number)=>{
return index<5
})
setLatestNews(output)
})
},[])
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)
};
};
const useDate = useCallback((time: number)=>getDate(time),[params])
return(
<PageLayout className=" overflow-y-scroll">
<AppContianer>
<>
<div className="flex w-full pt-[30px]">
<div className="w-[170px]"></div>
<div className='title-1-cn '>{data&&data.title}</div>
<div className='w-[370px]'></div>
interface NewsDetailsType extends IProps {}
export const NewsDetails = (props: NewsDetailsType) => {
const params = useParams();
const [data, setData] = useState<any>();
const [latestNews, setLatestNews] = useState<any>();
const navigate = useNavigate();
useEffect(() => {
if (params["id"]) {
getNewsDetail(params["id"]).subscribe((v) => {
setData(v);
});
}
}, [params]);
useEffect(() => {
getNews()
.pipe(map((v) => v.data.list))
.subscribe((v) => {
const d = v.sort((a: any, b: any) => {
return b.time_stamp - a.time_stamp;
});
const output = d.filter((i: any, index: number) => {
return index < 5;
});
setLatestNews(output);
});
}, []);
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),
};
};
const useDate = useCallback((time: number) => getDate(time), [params]);
return (
<PageLayout>
<AppContianer>
<div className='max-w-[1440px] mx-auto'>
<div className=" w-full pl-[199px] pt-5">
<div className="title-1-cn w-8/12 text-left">{data && data.title}</div>
</div>
<div className="flex normal-content ">
<div className="w-[120px] pt-[30px]">
<div className="flex-col pr-5 text-center ">
<div className="py-5">
<div>- 来源 -</div>
<div className="content-sub-title-cn">杭州复杂美科技</div>
</div>
<div className="flex normal-content ">
<div className="w-[170px] pt-[35px]">
<div className='flex-col pr-5 text-center '>
<div className='py-5'>
<div>- 来源 -</div>
<div className='content-sub-title-cn'>杭州复杂美科技</div>
</div>
<div className='py-5'>
<div>- 日期 -</div>
<div className=' hero-title'>{useDate(data&&data.time_stamp).day}</div>
<div className='content-sub-title-cn'>
{useDate(data&&data.time_stamp).year}/{useDate(data&&data.time_stamp).month}</div>
</div>
<div className='py-5'>
<div>- 作者 -</div>
<div className='content-sub-title-cn'>{data&&data.publisher}</div>
</div>
</div>
</div>
<div >
<div className='richRender pt-5 px-20 pb-24'>
<div dangerouslySetInnerHTML={{__html:data&&data.content}} className="py-5"></div>
</div>
</div>
<div className='pt-[35px]'>
<div className='flex-col '>
<div className='content-sub-title-cn pb-[15px]'>最新消息</div>
<div>
{
latestNews&&latestNews.map((k:any,index:number)=>(
<div key={index} onClick={()=>navigate(`/news/${k.id}`)} className="pb-[21px] w-[300px] normal-content cursor-pointer hover:text-theme-blue">
<div>{k.title}</div>
<div>{useDate(data&&data.time_stamp).year}/{useDate(data&&data.time_stamp).month}/{useDate(data&&data.time_stamp).day}</div>
</div>
))
}
</div>
<div className="py-5">
<div>- 日期 -</div>
<div className=" hero-title">
{useDate(data && data.time_stamp).day}
</div>
<div className="content-sub-title-cn">
{useDate(data && data.time_stamp).year}/
{useDate(data && data.time_stamp).month}
</div>
</div>
<div className="py-5">
<div>- 作者 -</div>
<div className="content-sub-title-cn">
{data && data.publisher}
</div>
</div>
</div>
</div>
<div className="richRender pt-5 px-[100px] pb-24">
<div
dangerouslySetInnerHTML={{ __html: data && data.content }}
className="py-5 text-left"
></div>
</div>
<div className="w-[300px] pt-[35px]">
<div className="flex-col ">
<div className="content-sub-title-cn pb-[15px]">最新消息</div>
<div>
{latestNews &&
latestNews.map((k: any, index: number) => (
<div
key={index}
onClick={() => navigate(`/news/${k.id}`)}
className="pb-[21px] w-[300px] normal-content cursor-pointer hover:text-theme-blue"
>
<div>{k.title}</div>
<div>
{useDate(data && data.time_stamp).year}/
{useDate(data && data.time_stamp).month}/
{useDate(data && data.time_stamp).day}
</div>
</div>
</div>
))}
</div>
</>
</AppContianer>
</PageLayout>
)
}
\ No newline at end of file
</div>
</div>
</div>
</div>
</AppContianer>
</PageLayout>
);
};
src/views/News/index.tsx
View file @ 0046a3d1
......@@ -11,6 +11,8 @@ import { baasBalls } from "@/config/ballSetting";
import { newsBg } from "@/config/bgSetting";
import { ChevronRightIcon } from "@heroicons/react/solid";
import * as dayjs from 'dayjs'
import { LazyImg } from "@/components/LazyImg";
import ContactImgWhite from '@/assets/img/contactWhite.png'
export interface IAppProps {}
export default function News(props: IAppProps) {
......@@ -44,18 +46,26 @@ export default function News(props: IAppProps) {
const useDate = useCallback((time: number)=>getDate(time),[])
return (
<PageLayout fullscreen gradientConfig={newsBg[0].config}>
<div className="flex h-screen w-full normal-content">
<PageLayout fullscreen gradientConfig={newsBg[0].config} className='min-h-[750px]'>
<div className="flex h-screen w-full normal-content">
<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-[calc(100vh-92px)] mt-16 relative">
<div>
<div className=" hero-title text-white">News</div>
<div className="subTitle-1-cn text-white">新闻动态</div>
<div className="absolute bottom-0 ">
<div className="absolute bottom-[60px] ">
<div className="w-12/12 normal-content text-white">
提供区块链融合技术和产业链接的精选内容
</div>
<div className="w-12/12 normal-content text-white">帮助您紧跟落地实况和未来发展趋势</div>
<LazyImg
img={ContactImgWhite}
animate='contact'
className='pt-[25px] w-[234px]'
></LazyImg>
</div>
</div>
</div>
......@@ -63,10 +73,10 @@ export default function News(props: IAppProps) {
<div className="right h-full pt-28 w-7/12 relative" style={{boxSizing:"border-box"}}>
<NewsScrollView>
<div className="pb-[235px] ">
<div className="news-list ">
<div>
{news.map((i, index) => (
<div onClick={()=>navigate(`/news/${i.id}`)} key={index}
className="hoverGlass w-full rounded-3xl flex max-w-[920px] my-[15px] min-w-[650px] gap-x-[20px] items-start"
className="hoverGlass w-full rounded-3xl flex max-w-[920px] my-[15px] min-w-[650px] gap-x-[30px] items-start"
>
<div className="news-date min-w-[200px] flex text-white font-medium items-center ">
<div className="translate-y-[10px]">
......@@ -82,20 +92,19 @@ export default function News(props: IAppProps) {
<div className='w-10/12 border-t-2 border-white translate-x-[5px]'></div>
</div>
</div>
<div className="news-content text-black ">
<div className="news-content text-black flex items-center gap-x-[20px]">
<div>
<div className="sub-title-cn leading-[35px]">
{i.title}
</div>
<div className=" normal-content text-overflow:ellipsis line-clamp-3">
<div className="normal-content text-overflow:ellipsis line-clamp-3">
{i.desc}
</div>
</div>
<span className='invisible'>
<ChevronRightIcon className="w-5 h-5"></ChevronRightIcon>
</span>
</div>
<div className='hover-cover'></div>
<span className='invisible'>
<ChevronRightIcon className="w-5 h-5"></ChevronRightIcon>
</span>
</div>
))}
</div>
......@@ -111,6 +120,7 @@ export default function News(props: IAppProps) {
</div>
</NewsScrollView>
</div>
</div>
</PageLayout>
......
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