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