Skip to content

W
web2022
Commit 2a52dd1b authored by mxm-web-develop's avatar mxm-web-develop
Browse files
Options

init

parents
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1848 additions and 0 deletions
.gitignore 0 → 100644
View file @ 2a52dd1b
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
fzmweb.style.js 0 → 100644
View file @ 2a52dd1b
export default{
}
\ No newline at end of file
index.html 0 → 100644
View file @ 2a52dd1b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
package.json 0 → 100644
View file @ 2a52dd1b
{
"name": "fzm-web-2022",
"private": true,
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@better-scroll/core": "^2.4.2",
"@better-scroll/mouse-wheel": "^2.4.2",
"@better-scroll/pull-up": "^2.4.2",
"@better-scroll/scroll-bar": "^2.4.2",
"@better-scroll/slide": "^2.4.2",
"@heroicons/react": "^1.0.6",
"@loadable/component": "^5.15.2",
"ahooks": "^3.4.1",
"gsap": "^3.10.4",
"pixi-filters": "^4.1.6",
"pixi.js": "^6.4.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-helmet": "^6.1.0",
"react-router-dom": "6"
},
"devDependencies": {
"@tailwindcss/line-clamp": "^0.4.0",
"@types/node": "^17.0.31",
"@types/react": "^18.0.0",
"@types/react-dom": "^18.0.0",
"@vitejs/plugin-react": "^1.3.0",
"animated-tailwindcss": "^3.3.0",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.13",
"tailwindcss": "^3.0.24",
"typescript": "^4.6.3",
"vite": "^2.9.7"
}
}
postcss.config.js 0 → 100644
View file @ 2a52dd1b
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {})
},
}
src/App.tsx 0 → 100644
View file @ 2a52dd1b
import * as React from 'react';
import {Route,Routes} from 'react-router-dom'
import Navbar from './components/Navbar';
import {BrowserRouter} from 'react-router-dom'
// import { customizedRouter,buildRoutes } from './config';
import MxmRoute from './router/MxmRoute';
import Baas33 from './views/Baas33';
import Chain33 from './views/Chain33';
import About from './views/About';
import Cooperation from './views/Cooperation'
// import News from './views/News';
const News = React.lazy(()=>import('./views/News'))
const Loading=()=>{
return(
<div>
loading........
</div>
)
}
export function App () {
return (
<>
<BrowserRouter>
<Navbar></Navbar>
<Routes>
<Route element={<MxmRoute meta={{name:'Bass33'}}> <Baas33></Baas33> </MxmRoute>} path='/'></Route>
<Route element={<MxmRoute meta={{name:'Chain33'}}> <Chain33></Chain33> </MxmRoute>} path='/chain33'></Route>
<Route element={<MxmRoute meta={{name:'关于我们'}}><About /></MxmRoute>} path='/about'></Route>
<Route path='/news' element={
<React.Suspense fallback={<Loading></Loading>}>
<MxmRoute meta={{name:'新闻动态'}}> <News></News> </MxmRoute>
</React.Suspense>
}
/>
</Routes>
</BrowserRouter>
</>
);
}
src/assets/img/chain33.png 0 → 100644
View file @ 2a52dd1b
This diff is collapsed.
src/common/Iprops.interface.ts 0 → 100644
View file @ 2a52dd1b
import { ReactElement } from 'react';
export interface IProps{
className?: string;
children?:ReactElement
}
\ No newline at end of file
src/common/gradientFactory.ts 0 → 100644
View file @ 2a52dd1b
enum Gradient{
Linear = 1,
Radial
}
interface LinearGradientType{
color: string;
start:string;
end:string;
}
const gradientFactory = (type:Gradient,config:{colors:string[]})=>{
return ''
}
export default gradientFactory
\ No newline at end of file
src/common/hooks.tsx 0 → 100644
View file @ 2a52dd1b
import { useState } from "react";
export const useAsyncState =(initialValue:any) =>{
const [value, setValue] = useState(initialValue);
const setter = (x:any) =>
new Promise(resolve => {
setValue(x);
resolve(x);
});
return [value, setter];
}
src/components/Ball.tsx 0 → 100644
View file @ 2a52dd1b
import { IProps } from "@/common/Iprops.interface"
import { useMemo } from "react"
enum Gradient{
Linear = 1,
Radial
}
interface BallType extends IProps{
size:string,
color:'white'|'gray'|'blue'
}
export const Ball =(props:BallType)=>{
const {color} = props
const ballColor = useMemo(()=>{
if(!color) return
else{
switch(color){
case 'white':
return `#fffff`
case 'blue':
return `linear-gradient(210deg,#02FBD5 20%,#7538F3 65%),
linear-gradient(120deg,#02FBD5,#1C62EE)`
default:
return ''
}
}
},[props.color])
return(
<div className={`absolute rounded-full`}
style={{
width:props.size,
height:props.size,
background:ballColor,
}}
/>
)
}
src/components/Graphic/Ball.tsx 0 → 100644
View file @ 2a52dd1b
import whiteBall from './ball-white.png'
import blueBall from './ball-blue.png'
import { IProps } from '@/common/Iprops.interface';
interface BallType extends IProps{
color?: 'white'|'blue';
size?:'small'|'normal'|'large';
}
const getBallSize = (size:string) => {
console.log(size);
switch(size){
case 'small':
return 'w-[6%] h-[6%]'
case 'normal':
return 'w-[12%] h-[12%]'
case 'large':
return 'w-[24%] h-[24%]'
}
}
export const Ball =(props: BallType)=>{
const {color,size} = props;
const _color = color?color:'white'
const _size = size?size:'normal'
const ballSize = getBallSize(_size)
return(
_color==='white'?
<img src={whiteBall} className={ballSize} ></img>
:
<img src={blueBall} className={ballSize} ></img>
)
}
\ No newline at end of file
src/components/Graphic/Gradient.tsx 0 → 100644
View file @ 2a52dd1b
import { IProps } from "@/common/Iprops.interface"
import CyanGradient from './gradient_cyan.png';
import BlueGradient from './gradient_blue.png';
interface GradientType extends IProps{
color?: 'cyan'|'blue';
}
export const Gradient =(porps:GradientType)=>{
const {color} =porps;
const _color = color||'cyan'
return(
_color==='cyan'?
<img src={CyanGradient} className='absolute'></img>
:
<img src={BlueGradient} className='absolute'></img>
)
}
\ No newline at end of file
src/components/Graphic/HeroText.tsx 0 → 100644
View file @ 2a52dd1b
interface IProps{
children?:any
}
import heroImg from './hero.png'
export const HeroText =(porps:IProps)=>{
return(
<img src={heroImg} className=" w-screen"/>
)
}
\ No newline at end of file
src/components/Graphic/hero.png 0 → 100644
View file @ 2a52dd1b
This diff is collapsed.
src/components/Navbar/index.tsx 0 → 100644
View file @ 2a52dd1b
import { IProps } from "@/common/Iprops.interface";
import * as React from 'react';
import { useState } from 'react';
import { Link, useLocation } from 'react-router-dom';
export interface IAppProps extends IProps {
}
const HoverLink = () =>{
const [onHover,setOnHover] =useState(false);
return (
<div
className='relative'
onPointerEnter={()=>setOnHover(true)}
onPointerLeave={()=>setOnHover(false)}
>
<div className='cursor-pointer'
>合作生态</div>
{
onHover?
<div className='py-3'>
<div className='hover-toggle-box w-[180%]
absolute
animate-fadeIn
animate-alternate
animate-fill-both
bg-opacity-75
-translate-x-[18%] text-black rounded-lg flex-col
items-center justify-center text-center py-3 px-2 bg-[#EAF0F4]'>
<div className='my-[8px] cursor-pointer'>上链查</div>
<div className='my-[8px] cursor-pointer'>上链购</div>
<div className='my-[8px] cursor-pointer'>链证宝</div>
</div>
</div>
:''
}
</div>
)
}
export default function Navbar (props: IAppProps) {
const {pathname} = useLocation()
return (
<nav className='flex justify-between absolute px-28 w-full top-0 z-[99999] py-6 text-sm text-slate-400 '>
<div className='left '>
logo
</div>
<div className='right flex gap-x-12'>
<Link to='/' className={`hover:text-black ${pathname ==='/'?'text-black':'text-slate-400'}`}>Baas33</Link>
<Link to='chain33' className={`hover:text-black ${pathname ==='/chain33'?'text-black':'text-slate-400'}`}>Chain33</Link>
<Link to='news' className={`hover:text-black ${pathname ==='/news'?'text-black':'text-slate-400'}`}>新闻动态</Link>
<Link to='about' className={`hover:text-black ${pathname ==='/about'?'text-black':'text-slate-400'}`}>关于我们</Link>
<HoverLink />
</div>
{/* <div className='right flex-grow-0'>
toolbar
</div> */}
</nav>
);
}
src/components/NewsScrollView.tsx 0 → 100644
View file @ 2a52dd1b
import { useAsyncState } from "@/common/hooks";
import { IProps } from "@/common/Iprops.interface";
import BScroll from "@better-scroll/core";
import { BScrollConstructor } from "@better-scroll/core/dist/types/BScroll";
import MouseWheel from "@better-scroll/mouse-wheel";
import ScrollBar from "@better-scroll/scroll-bar";
import Pullup from '@better-scroll/pull-up'
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
interface ScrollViewType extends IProps {
wrapHeight?: string;
prop?: any;
}
const initBScroll = (el:HTMLElement) => {
const res = new BScroll(el, {
click: true,
mouseWheel: {
speed: 20,
invert: false,
easeTime: 300,
},
pullUpLoad: {
threshold: 200
},
probeType:2,
// 显示滚动条,
useTransition:true,
scrollX: false,
momentum: true,
scrollY: true,
bounce: true,
stopPropagation: true,
})
return res
};
export const NewsScrollView = (props: ScrollViewType) => {
BScroll.use(MouseWheel);
BScroll.use(Pullup)
const { wrapHeight, children } = props;
const wrapRef = useRef<HTMLDivElement>(null);
const [scrollObj, setScrollObj] = useState<BScrollConstructor<{}>>();
const [currentPage,setCurrentPage] = useState(0)
useEffect(()=>{
const scrollEl = initBScroll(wrapRef.current as HTMLDivElement)
setScrollObj(scrollEl)
return () => {
scrollObj?.destroy();
};
},[wrapRef])
return (
<div
className="slide-vertical h-full -translate-x-[220px]"
>
<div className="vertical-wrapper h-full overflow-hidden relative" ref={wrapRef}>
{children}
</div>
</div>
);
};
src/components/ScrollView.tsx 0 → 100644
View file @ 2a52dd1b
import { useAsyncState } from "@/common/hooks";
import { IProps } from "@/common/Iprops.interface";
import BScroll from "@better-scroll/core";
import { BScrollConstructor } from "@better-scroll/core/dist/types/BScroll";
import MouseWheel from "@better-scroll/mouse-wheel";
import ScrollBar from "@better-scroll/scroll-bar";
import Slide from "@better-scroll/slide";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
interface ScrollViewType extends IProps {
wrapHeight?: string;
prop?: any;
}
const initBScroll = (el:HTMLElement) => {
const res = new BScroll(el, {
click: true,
mouseWheel: {
speed: 20,
invert: false,
easeTime: 300,
},
slide: {
threshold: 100,
autoplay:false,
startPageYIndex:0,
loop:false,
},
probeType:2,
// 显示滚动条,
useTransition:true,
scrollX: false,
momentum: false,
scrollY: true,
scrollbar: true,
bounce: false,
stopPropagation: true,
})
return res
};
interface DotsType extends IProps {
dotNumber: number
currentPage: number
pageMove:(index:number) =>void
}
const Dots = (props:DotsType)=>{
const { dotNumber,currentPage,pageMove } = props
const dotArr = useMemo(()=> {
return Array(dotNumber).fill('pageAny')
},[dotNumber])
const isDotActived = useCallback((index:number)=> index === currentPage ? true:false ,[currentPage])
return(
<div className="dots-wrapper fixed flex-col top-[40%] z-[999999] right-5">
{
dotArr && dotArr.length>0&&
dotArr.map((i,index)=>
<div key={index}
onClick={()=>pageMove(index)}
className={` my-3 cursor-pointer
${isDotActived(index)?" bg-black w-[8px] h-[12px] rounded-full duration-75"
:
"bg-slate-300 w-[8px] h-[8px] rounded-lg duration-75"}`}>
</div>
)
}
</div>
)
}
export const ScrollView = (props: ScrollViewType) => {
BScroll.use(MouseWheel);
BScroll.use(ScrollBar);
BScroll.use(Slide);
const { wrapHeight, children } = props;
const wrapRef = useRef<HTMLDivElement>(null);
const [dots,setDots]= useState(0)
const [scrollObj, setScrollObj] = useState<BScrollConstructor<{}>>();
const [currentPage,setCurrentPage] = useState(0)
useEffect(()=>{
const scrollEl = initBScroll(wrapRef.current as HTMLDivElement)
setScrollObj(scrollEl)
return () => {
scrollObj?.destroy();
};
},[wrapRef])
useEffect(() => {
setDots(children&&children.props.children.length)
}, []);
useEffect(()=>{
const page = scrollObj?.plugins['slide'].pages.currentPage
page&&
setCurrentPage((prevState: number)=>{
if(prevState !== page.pageY){
return page.pageY
}
return prevState
})
scrollObj?.on('slideWillChange', (page:any) => {
setCurrentPage((prevState: number)=>{
if(prevState !== page.pageY){
return page.pageY
}
return prevState
})
})
},[scrollObj])
const pageMoving =(index:number)=>{
if(index !== currentPage){
scrollObj?.goToPage(0, index,600)
}
return
}
return (
<div
className="slide-vertical h-screen w-screen "
style={{ overflow: "hidden" }}
>
<div className="vertical-wrapper h-full relative" ref={wrapRef}>
{children}
</div>
<Dots dotNumber={dots} currentPage={currentPage} pageMove={pageMoving}/>
</div>
);
};
src/components/StyledButton.tsx 0 → 100644
View file @ 2a52dd1b
import { IProps } from "@/common/Iprops.interface";
import * as React from 'react';
import { useMemo } from 'react';
export interface StyledButtonType extends IProps {
text: string;
color?: string;
action?: ()=>any;
}
export default function StyledButton (props: StyledButtonType) {
const { text, color } = props;
const colorIs = color?color:'white'
const colorStyle = useMemo(()=>{
switch (colorIs) {
case 'white':
return {
text:'#000000',
bgColor:'#ffffff'
}
case 'black':
return {
text:'#ffffff',
bgColor:'#000000'
}
case 'red':
return {
text:'#ffffff',
bgColor:'#E60000'
}
default:
return {
text:'#000000',
bgColor:'#ffffff'
}
}
},[colorIs])
return (
<button
className={`text-sm py-2 rounded-full px-8`}
style={{
color:colorStyle.text,
backgroundColor:colorStyle.bgColor
}}
>
{text}
</button>
);
}
src/config/ballSetting.ts 0 → 100644
View file @ 2a52dd1b
export const baasPage = [
{
page:0,
setting: [
{
size: "10%",
position: ["-50px", "55%"],
rotation: "210",
zIndex: "9999",
color: "blue",
},
{
size: "25%",
align: "right",
position: ["-85px", "20%"],
zIndex: "-999",
color: "blue",
},
{
size: "10%",
align: "right",
position: ["8px", "15%"],
zIndex: "1001",
color: "white",
},
]
},
{
page: 1,
setting: [
{
size: "10%",
position: ["-50px", "55%"],
rotation: "210",
zIndex: "9999",
color: "white",
},
{
size: "25%",
align: "right",
position: ["-85px", "10%"],
zIndex: "-1",
color: "blue",
},
]
},
{
page:2,
setting:[
{
size: "10%",
position: ["-50px", "55%"],
rotation: "210",
zIndex: "9999",
color: "blue"
},
{
size: "25%",
align: "right",
position: ["-85px", "10%"],
zIndex: "999",
color: "white",
}
]
},
{
page:2,
setting:[
{
size: "10%",
position: ["-50px", "55%"],
rotation: "210",
zIndex: "9999",
color: "white"
},
{
size: "25%",
align: "right",
position: ["-85px", "10%"],
zIndex: "-999",
color: "blue",
}
]
}
]
\ No newline at end of file
src/config/bgSetting.ts 0 → 100644
View file @ 2a52dd1b
export const baasBg = [
{
page:0,
config:[]
},
{
page:1,
config:[]
},
{
page:2,
config:[]
},
{
page:3,
config:[]
}
]
\ No newline at end of file
src/favicon.svg 0 → 100644
View file @ 2a52dd1b
<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
<defs>
<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
<stop stop-color="#41D1FF"/>
<stop offset="1" stop-color="#BD34FE"/>
</linearGradient>
<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
<stop stop-color="#FFEA83"/>
<stop offset="0.0833333" stop-color="#FFDD35"/>
<stop offset="1" stop-color="#FFA800"/>
</linearGradient>
</defs>
</svg>
src/layouts/AppContianer.tsx 0 → 100644
View file @ 2a52dd1b
import { IProps } from "@/common/Iprops.interface"
interface AppContianerType extends IProps{
bgColor?: string
className?:string
}
export const AppContianer=(props:AppContianerType)=>{
const {children,bgColor,className} = props
return(
<div className={`px-28 relative w-full ${className}`}>
{children}
</div>
)
}
\ No newline at end of file
src/layouts/BallAnime.tsx 0 → 100644
View file @ 2a52dd1b
import { IProps } from "@/common/Iprops.interface";
import blue from "@/assets/img/blue.png";
import white from "@/assets/img/white.png";
import { useCallback, useId, useMemo } from "react";
interface Ball {
size: string;
align?: string;
position: string[];
rotation?: string;
zIndex: string;
color: string;
}
interface BallAnimeType extends IProps {
animation?: string;
config: Ball[];
}
interface BallElement extends IProps {
config: Ball;
}
// ${rotation?`rotate-[${rotation}deg]`:''}
const BallHolder = (props: BallElement) => {
const { zIndex, color, size, position,rotation } = props.config;
const align = props.config.align ? props.config.align : "left";
const getPosition = useMemo(() => {
if (align === "left") {
return {
width: size,
top: position[1],
left: position[0],
right: "",
zIndex: zIndex,
transform:rotation&&`rotate(${rotation}deg)`
};
} else {
return {
width: size,
top: position[1],
right: position[0],
left: "",
zIndex: zIndex,
transform:rotation&&`rotate(${rotation}deg)`
};
}
}, [align, position]);
return (
<div className="">
<img
src={color === "blue" ? blue : white}
className={`img-holder
object-cover
absolute
`}
style={getPosition}
/>
</div>
);
};
export const BallAnime = (props: BallAnimeType) => {
const { children } = props;
const animation = props.animation ? props.animation : "move-in";
return (
<div className="w-full h-full relative">
{props.config && props.config.length > 0
? props.config.map((i,index) => {
return <BallHolder key={index} config={i}></BallHolder>;
})
: ""}
<div className="content-holder w-full h-full">{children}</div>
</div>
);
};
src/layouts/GradientLay.tsx 0 → 100644
View file @ 2a52dd1b
import { IProps } from "@/common/Iprops.interface";
import blue from "@/assets/img/bluebg.png";
import cyan from "@/assets/img/cyanbg.png";
import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
import {gsap} from 'gsap'
interface BgLay {
size: [string,string];
align?: string;
position: string[];
rotation?: string;
zIndex: string;
color: string;
blur?: string;
opacity?: string;
}
interface BgAnimeType extends IProps {
animation?: string;
config: BgLay[];
}
interface BgElement extends IProps {
config: BgLay;
}
const BgImgHodler = (props:BgElement)=>{
const { zIndex, color, size, position,rotation,blur,opacity } = props.config;
const align = props.config.align ? props.config.align : "left";
const getPosition = useMemo(() => {
if (align === "left") {
return {
width: size[0],
height:size[1],
top: position[1],
left: position[0],
right: "",
zIndex: zIndex,
transform:rotation&&`rotate(${rotation}deg)`
};
} else {
return {
width: size[0],
height:size[1],
top: position[1],
right: position[0],
left: "",
zIndex: zIndex,
transform:rotation&&`rotate(${rotation}deg)`
};
}
}, [align, position]);
return(
<div>
<img
src={color === "blue" ? blue : cyan}
className={`img-holder
object-cover
absolute
`}
style={
Object.assign(getPosition,{
filter:`blur(${blur?blur:'0px'}) opacity(${opacity?opacity:"100%"})`
})
}
/>
</div>
)
}
export const GradientLay = (props: BgAnimeType) => {
const { children } = props;
const animation = props.animation ? props.animation : "move-in";
const view = useRef(null)
useEffect(()=>{
},[])
return (
<div className=" relative h-full w-full overflow-hidden">
<div className="w-full h-full min-w-[1200px] absolute top-0 left-0 z-[-1] ">
{props.config && props.config.length > 0
? props.config.map((i,index) => {
return <BgImgHodler key={index} config={i}></BgImgHodler>;
})
: ""}
</div>
<div className="content-holder w-full h-full">{children}</div>
</div>
);
};
src/layouts/PageLayout.tsx 0 → 100644
View file @ 2a52dd1b
import { IProps } from "@/common/Iprops.interface"
interface PageLayoutType extends IProps{
bgColor?: string
className?:string
}
export const PageLayout=(props:PageLayoutType)=>{
const {children,bgColor,className} = props
return(
<div className={`w-screen h-screen pt-16 min-w-[1200px] ${className}`}>
{children}
</div>
)
}
\ No newline at end of file
src/logo.svg 0 → 100644
View file @ 2a52dd1b
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
<g fill="#61DAFB">
<path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
<circle cx="420.9" cy="296.5" r="45.7"/>
<path d="M520.5 78.1z"/>
</g>
</svg>
src/main.tsx 0 → 100644
View file @ 2a52dd1b
import React from 'react'
import ReactDOM from 'react-dom/client'
import './style.css'
import { App } from './App'
const Root = ReactDOM.createRoot(document.getElementById('root')!)
Root.render(
<App />
)
src/router/MxmRoute.tsx 0 → 100644
View file @ 2a52dd1b
import * as React from 'react';
import { JSXElementConstructor, ReactElement, useEffect, useLayoutEffect } from 'react';
import { useLocation} from 'react-router-dom'
export interface IAppProps {
// MyElement:()=>JSX.Element
// path:string
meta?:{
[k:string]:any
}
children?:any
}
export default function MxmRoute (props: IAppProps) {
const {meta,children} = props;
const location = useLocation()
useEffect(()=>{
console.log(meta);
},[location])
return (
<>
{children}
</>
);
}
src/router/mainRoutes.ts 0 → 100644
View file @ 2a52dd1b
export default[
]
\ No newline at end of file
src/store/AppProvider.tsx 0 → 100644
View file @ 2a52dd1b
import { createContext } from "react"
export {}
const data ={
layouts:{
},
theme:{
}
}
const AppContext = createContext(data)
const AppProvider = (props: any)=>{
return(
<AppContext.Provider value={data}>
{props.children}
</AppContext.Provider>
)
}
\ No newline at end of file
src/store/index.tsx 0 → 100644
View file @ 2a52dd1b
export{
}
\ No newline at end of file
src/style.css 0 → 100644
View file @ 2a52dd1b
@tailwind base;
@tailwind components;
@tailwind utilities;
@font-face {
font-family: "Galano";
src: url('./assets/fonts/GalanoGrotesqueDEMO-Bold.otf');
}
@layer components{
.hero-title{
@apply text-7xl tracking-wide font-bold
}
.sub-title-cn{
@apply text-2xl tracking-wide font-mono font-bold py-3
}
.content-title-cn{
@apply text-lg tracking-wide font-mono font-bold py-3
}
.des-cn{
@apply font-mono font-light
}
}
.hero-baas{
background: linear-gradient(120deg,#0425F3 30%,#2711AC 40%,#00BBE8 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 1rem 1rem 10rem rgba(55, 107, 227, 0.6);
}
\ No newline at end of file
src/views/About/index.tsx 0 → 100644
View file @ 2a52dd1b
import { ScrollView } from "@/components/ScrollView";
import { AppContianer } from "@/layouts/AppContianer";
import { BallAnime } from "@/layouts/BallAnime";
import { PageLayout } from "@/layouts/PageLayout";
import AboutImg from "@/assets/img/about.png";
import * as React from "react";
const Description = () => {
return (
<div className="w-full">
<div className="text-3xl mb-16 ">链上复杂美 上链不复杂</div>
<div className="paragraph max-w-[860px] min-w-[650px] tracking-wide leading-7 flex-col gap-y-4">
<div>
公司成立于2008年，2013年启动区块链、智能合约的研发与创新，2014年申请区块链发明专利：钱包找回功能。已累计申请了400多项区块链技术的发明专利，2019年据德温特专利家族统计，复杂美区块链发明专利排名位于全球第三，仅次于阿里巴巴和IBM。
</div>
<div>
总公司总部位于杭州，并在南京、广州、海南、宁波、重庆设有分部。目前，公司员工100人，其中80%左右为技术人员，吸引了一批甲骨文、阿里、华为程序员。总公司与多家世界500强开展区块链项目合作，在票据、供应链金融、积分、仓单有区块链应用落地。
</div>
<div>
2018年11月，复杂美区块链Chain33在Github上开源，是较早落地运行的平行链架构系统，并基于模块设计可协作开发，大幅降低区块链的开发维护成本，实现快捷易用的跨链交易，有近100个平行链项目落地，有去中心化交易、去中心化社交、去中心化电商、去中心化溯源存证、等一系列应用。
</div>
</div>
<div className="flex py-10 text-xl font-bold gap-x-10 tracking-wider">
<div>
<span className=" text-[#084DFD] border-b-4 border-[#084DFD] py-3">
优质
</span>
的服务
</div>
<div>
<span className=" text-[#084DFD] border-b-4 border-[#084DFD] py-3">
领先
</span>
的技术
</div>
<div>
<span className=" text-[#084DFD] border-b-4 border-[#084DFD] py-3">
专业
</span>
的定位
</div>
</div>
</div>
);
};
export default function About(props: any) {
const demo = {
animation: "move",
config: [
{
size: "12rem",
position: ["7rem", "40%"],
rotation: "210",
zIndex: "9999",
color: "blue",
},
{
size: "14rem",
align: "right",
position: ["-80px", "8%"],
zIndex: "-1001",
color: "white",
},
],
config2:[
{
size: "15rem",
position: ["-5rem", "50%"],
rotation: "210",
zIndex: "9999",
color: "white",
},
{
size: "25rem",
align: "right",
position: ["-80px", "15%"],
zIndex: "1001",
color: "blue",
},
]
};
return (
<ScrollView>
<div className="vertival-content ">
<PageLayout>
<BallAnime config={demo.config}>
<AppContianer>
<div className="flex py-10 mt-16">
<div className="left w-[34%] min-w-[520px] max-w-[560px]">
<img src={AboutImg} />
</div>
<div className="right px-[10%] mt-8">
<Description></Description>
</div>
</div>
</AppContianer>
</BallAnime>
</PageLayout>
<PageLayout>
<BallAnime config={demo.config2}>
<AppContianer>
<div>memorabilia</div>
</AppContianer>
</BallAnime>
</PageLayout>
<PageLayout>
<BallAnime config={demo.config2}>
<AppContianer>
<div>patent</div>
</AppContianer>
</BallAnime>
</PageLayout>
<PageLayout>
<BallAnime config={demo.config2}>
<AppContianer>
<div>Honor</div>
</AppContianer>
</BallAnime>
</PageLayout>
<PageLayout>
<BallAnime config={demo.config2}>
<AppContianer>
<div>Join us</div>
</AppContianer>
</BallAnime>
</PageLayout>
<PageLayout>
<BallAnime config={demo.config2}>
<AppContianer>
<div>contract us</div>
</AppContianer>
</BallAnime>
</PageLayout>
<PageLayout>
<BallAnime config={demo.config2}>
<AppContianer>
<div>Partners</div>
</AppContianer>
</BallAnime>
</PageLayout>
</div>
</ScrollView>
);
}
src/views/Baas33/Advantages/index.tsx 0 → 100644
View file @ 2a52dd1b
import { IProps } from "@/common/Iprops.interface";
import { AppContianer } from "@/layouts/AppContianer";
interface AdvantagesType extends IProps{
}
const AdvantagesList = ()=>{
const data =[
{
title:'高效',
text:'平行侧链之间交易可以并行执行，交易效率大大提升。'
},
{
title:'稳定',
text:'支持“主链+平行链”分层区块链架构，主链上只允许基础核心的合约，稳定性强，进而保证整个区块链网络的稳定。'
},
{
title:'安全',
text:'采用代理重加密加秘钥分片的方案，实现数据可分享型存储，保障数据隐私。支持国标标准SM2、SM3、SM4。'
},
{
title:'低成本',
text:'提供便捷部署的BAAS服务，实现可视化安装，智能合约IDE工具，节约成本。'
}
]
return(
<div className='flex flex-col gap-y-[2.5rem] mt-[10vh]'>
{
data.map((i,index)=>(
<div key={index} className='relative max-w-[560px]'>
<span className='absolute hero-title -top-[1rem] -left-[2rem] opacity-10'>{index+1}</span>
<div className='sub-title-cn border-black border-b-[3px] w-[90px]'>{i.title}</div>
<div className='pt-2 des-cn'>{i.text}</div>
</div>
))
}
</div>
)
}
export const Advantages = (props: AdvantagesType)=>{
return(
<AppContianer>
<div className="flex">
<div className="left w-4/12 py-16">
<div className="sub-title-cn">
功能特点
</div>
<div className="hero-title py-5">
Platform
<div>
Advantages
</div>
</div>
<div className='des-cn pt-5'>一键部署多样化区块链网络</div>
<div className='flex relative justify-end pt-[8rem]'>
</div>
</div>
<div className="right py-16 w-7/12 px-[5%]">
<AdvantagesList />
</div>
</div>
</AppContianer>
)
}
\ No newline at end of file
src/views/Baas33/Features/index.tsx 0 → 100644
View file @ 2a52dd1b
import { IProps } from "@/common/Iprops.interface";
import { AppContianer } from "@/layouts/AppContianer";
interface FeaturesType extends IProps{
}
const FeaturesGrid = ()=>{
const data = [
{
title:'快速构建',
text:'支持一键快速构建联盟链、平行链等区块链网络'
},
{
title:'隐私保护',
text:'提供权限管理、身份关联、数据加密等方式保证数据安全'
},
{
title:'灵活部署',
text:'支持节点一键自动化部署省去手动部署等大量时间和精力'
},
{
title:'多组件支持',
text:'智能合约模块可插拔 支持智能合约语言的多样化包括Solidity,Java,C++和Golang等成熟开发语言'
}
]
return(
<div className=" grid grid-cols-2 w-10/12 gap-y-5 gap-x-[10rem]">
{
data.map((i,index)=>(
<div key={index} className='max-w-[320px] min-w-[280px]'>
<div className='content-title-cn'>{i.title}</div>
<div className='des-cn'>{i.text}</div>
</div>
))
}
</div>
)
}
export const Features = (props: FeaturesType)=>{
return(
<AppContianer>
<div className="flex">
<div className="left w-8/12 py-16">
<div className="hero-title">
Functional
<div>
Features
</div>
</div>
<div className="sub-title-cn">
功能特点
</div>
<div className='des-cn'>一键部署多样化区块链网络</div>
<div className='flex relative justify-end pt-[8rem]'>
<FeaturesGrid></FeaturesGrid>
</div>
</div>
<div className="right py-16 w-4/12 px-[10%]">
<div className="flex-col justify-center ">
<div className='max-w-[320px] min-w-[280px]'>
<div className='content-title-cn'>弹性扩展</div>
<div className='des-cn'>支持联盟节点动态增删</div>
</div>
<div className='max-w-[320px] min-w-[280px] mt-[3rem]'>
<div className='content-title-cn'>运维监控</div>
<div className='des-cn'>支持区块链节点及硬件资源的实时监控</div>
</div>
</div>
</div>
</div>
</AppContianer>
)
}
\ No newline at end of file
src/views/Baas33/HeroBaas.tsx 0 → 100644
View file @ 2a52dd1b
export const HeroBaas =()=>{
return(
<div className="w-screen h-full flex-col items-center justify-center translate-y-[15vh] table:translate-y-[1vh]">
<div className="hero-baas
w-full
table:w-[120%] table:text-[29vw] text-[22vw] text-center table:text-left font-galano table:-translate-x-[2%] p-0 font-[500] ">Baas33</div>
<div className="text-center table:-translate-y-[15vh] flex justify-center gap-x-20 sub-title-cn">
<div>高效</div>
<div>稳定</div>
<div>低成本</div>
<div>安装便捷</div>
</div>
</div>
)
}
\ No newline at end of file
src/views/Baas33/Service/index.tsx 0 → 100644
View file @ 2a52dd1b
import { IProps } from "@/common/Iprops.interface";
import { AppContianer } from "@/layouts/AppContianer";
import { CheckIcon } from '@heroicons/react/solid'
interface ServiceType extends IProps{
}
interface VerticalTextType extends IProps{
text: string;
containerStyle?: string;
itemStyle?: string;
}
const VerticalText = (props: VerticalTextType)=>{
const {text,containerStyle,itemStyle} = props;
const textArr = text.split('')
return(
<div className={`grid-cols-1 ${containerStyle}`}>
{
textArr&&textArr.map((i,index)=>(
<div className={itemStyle} key={index}>
{i}
</div>
))
}
</div>
)
}
const ServiceList = ()=>{
const data =[
{
title:'BaaS试用版',
text:'开通试用版后，您可以在一个月内免费试用开发版的产品功能。',
price:0,
features:['支持发布合约类，工具类，应用类等应用','支持自动部署智能合约','支持在线IDE，可以对EVM合约进行查看、编辑等','提供存证服务安装包']
},
{
title:'BaaS企业版',
text:'支持中小企业联盟成员权重的可视化配置，助力企业轻松上链。',
price:5998,
features:['支持一键快速构建联盟链、平行侧链等区块链网络','联盟链加平行链总数限制在3条','联盟链节点最多支持5个']
},
{
title:'BaaS开发版',
text:'为团队提供完备的服务可视化操作，实现业务快速上链。',
price:7998,
features:['支持一键快速构建联盟链、平行侧链等区块链网络','联盟链加平行链总数限制在6条','联盟链节点最多支持7个']
},
]
return(
<div className=' px-8 grid grid-cols-3 gap-x-[8rem]'>
{
data.map((i,index)=>(
<div key={index} className='relative py-3 px-5 backdrop-blur-sm shadow-lg min-w-[280px] max-w-[420px] h-[460px] rounded-lg '>
<div className='sub-title-cn border-black py-5'>{i.title}</div>
<div className='pt-2 des-cn'>{i.text}</div>
<ul className='py-5 des-cn font-bold'>
{
i.features.map((k,x)=>(
<li className='my-1 flex' key={'child'+x}>
<div>
<CheckIcon className='w-5 h-5 border-[1px] border-black border-dashed ' />
</div>
<div className='pl-3'>{k}</div>
</li>
))
}
</ul>
<div className=' w-full absolute bottom-5 px-5 left-0 flex justify-between align-bottom items-baseline'>
<div className='des-cn font-bold'>
介绍详情
</div>
<div className='des-cn font-bold'>
<span className=' text-4xl'>{i.price}</span>
/年
</div>
</div>
</div>
))
}
</div>
)
}
export const Service = (props: ServiceType)=>{
return(
<AppContianer className='h-full'>
<div className="flex py-16 h-full">
<div className='center w-10/12 flex items-center justify-center h-full'>
<ServiceList />
</div>
<div className="right w-2/12 z-[200000] pl-[3rem]">
<div className='flex'>
<VerticalText text='服务版本' containerStyle="sub-title-cn py-5 px-5"/>
<VerticalText text='service' containerStyle="hero-title mt-6" itemStyle=" rotate-90 -my-[1.6rem]"/>
</div>
</div>
</div>
</AppContianer>
)
}
\ No newline at end of file
src/views/Baas33/index.tsx 0 → 100644
View file @ 2a52dd1b
import { ScrollView } from '@/components/ScrollView';
import { BallAnime } from '@/layouts/BallAnime';
import { PageLayout } from '@/layouts/PageLayout';
import Baas from '@/assets/img/baas.png'
import StyledButton from '@/components/StyledButton';
import { AppContianer } from '@/layouts/AppContianer';
import { Features } from './Features';
import { Advantages } from './Advantages';
import { Service } from './Service';
import {baasPage} from '@/config/ballSetting'
import { GradientLay } from '@/layouts/GradientLay';
import { HeroBaas } from './HeroBaas';
import { Ball } from '@/components/Ball';
export interface IAppProps {
}
export default function Baas33 () {
const b =['#sdfiw2','#fud8fu','#sdif822']
console.log( b.toString());
return (
<ScrollView>
<div className="vertival-content">
{/* <PageLayout>
<BallAnime config={baasPage[0].setting}>
<>
<div className="z-[1020] flex-col h-[100vh-68px] items-center justify-center">
<AppContianer>
<div className=" translate-y-[8vh]">
<div className=" text-4xl font-mono tracking-widest font-medium">复杂美区块链开放服务平台</div>
<div className="flex gap-x-5 mt-5">
<StyledButton text='开发者实验室' color="black"></StyledButton>
<StyledButton text='开发者文档' color="black"></StyledButton>
<StyledButton text='一键搭建' color="red"></StyledButton>
</div>
</div>
</AppContianer>
<Ball size='8rem' gradient={1} colors={['#87df83','#772891','#421891']}></Ball>
<HeroBaas></HeroBaas>
</div>
</>
</BallAnime>
</PageLayout> */}
<div className='h-full w-full relative'>
<BallAnime config={baasPage[0].setting}>
<div className='h-[calc(100%-70px)] w-full py-20 flex-col items-center'>
<AppContianer>
<div className="translate-y-[8vh]">
<div className=" text-4xl font-mono tracking-widest font-medium">复杂美区块链开放服务平台</div>
<div className="flex gap-x-5 mt-5">
<StyledButton text='开发者实验室' color="black"></StyledButton>
<StyledButton text='开发者文档' color="black"></StyledButton>
<StyledButton text='一键搭建' color="red"></StyledButton>
</div>
</div>
</AppContianer>
<div className=" min-w-[1200px] w-full">
<HeroBaas></HeroBaas>
</div>
{/* <Ball size='12rem' color='blue'></Ball> */}
</div>
</BallAnime>
</div>
<GradientLay config={
[
{
size: ["80%","40%"],
position: ["-10%", "45%"],
align:'right',
zIndex: "-99",
rotation:'70',
color: "cyan",
blur:'30px'
},
{
size:[ "25%",'30%'],
align: "right",
position: ["-85px", "10%"],
zIndex: "-90",
color: "blue",
},
]
}>
<PageLayout>
<BallAnime config={baasPage[1].setting}>
<Features />
</BallAnime>
</PageLayout>
</GradientLay>
<PageLayout>
<BallAnime config={baasPage[2].setting}>
<Advantages/>
</BallAnime>
</PageLayout>
<PageLayout>
<BallAnime config={baasPage[3].setting}>
<Service></Service>
</BallAnime>
</PageLayout>
</div>
</ScrollView>
);
}
src/views/Chain33/index.tsx 0 → 100644
View file @ 2a52dd1b
import { ScrollView } from "@/components/ScrollView";
import { BallAnime } from "@/layouts/BallAnime";
import { PageLayout } from "@/layouts/PageLayout";
import chain33Bg from "@/assets/img/chain33.png";
import StyledButton from "@/components/StyledButton";
import { IProps } from "@/common/Iprops.interface";
import { useMemo } from "react";
import { AppContianer } from "@/layouts/AppContianer";
import { GradientLay } from "@/layouts/GradientLay";
interface HeroItemType extends IProps{
heroTitle: string;
subtitle:string;
content:string;
order?:number;
}
const HeroItem =(props: HeroItemType)=>{
const {heroTitle,subtitle,content,order} = props;
const itemPosition = useMemo(()=>{
if(order&&order%2===0){
return false;
}else{
return true
}
},[order])
return(
<div className={`flex min-h-[85vh] py-16 text-white justify-center
${itemPosition?' items-start':' items-end'}
`}>
<div>
<div className="hero font-sans font-extrabold text-9xl">
{heroTitle}
</div>
<div className="subtitle border-b-2 text-lg font-medium w-4/12 my-3">
{subtitle}
</div>
<div className='text-sm'>
{content}
</div>
</div>
</div>
)
}
export default function Chain33() {
return (
<ScrollView>
<div className="vertival-content">
<PageLayout>
<div className="w-full h-full flex justify-center items-baseline overflow-hidden">
<div className="img-holder w-10/12 xl:w-8/12 relative ">
<div
className="absolute w-full h-full flex items-center
-translate-x-[5%] -translate-y-[15%] justify-center text-white"
>
<div>
<div className="p-5 border-white border-[4px] rounded xl:border-[8px]">
<div className="text-7xl xl:text-9xl tracking-widest font-bold">
Chain33
</div>
<div className="text-white text-lg xl:text-2xl pt-5 tracking-wide text-center">
复杂美区块链开发者平台
</div>
</div>
<div className='pt-16 flex justify-center items-center gap-x-3'>
<StyledButton text='开源社区'></StyledButton>
<StyledButton text='资源下载'></StyledButton>
<StyledButton text='立即上手' color="black"></StyledButton>
</div>
</div>
</div>
<img
src={chain33Bg}
className="object-scale-down object-bottom"
/>
</div>
</div>
</PageLayout>
<PageLayout className=" bg-[#084DFF]">
<AppContianer>
<div className="flex justify-between gap-x-10">
<HeroItem heroTitle="高" order={1} subtitle="高效" content="Chain33区块链中，交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem>
<HeroItem heroTitle="高" order={2} subtitle="高效" content="Chain33区块链中，交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem>
<HeroItem heroTitle="高" order={3} subtitle="高效" content="Chain33区块链中，交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem>
<HeroItem heroTitle="高" order={4} subtitle="高效" content="Chain33区块链中，交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem>
<HeroItem heroTitle="高" order={5} subtitle="高效" content="Chain33区块链中，交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem>
</div>
</AppContianer>
</PageLayout>
</div>
</ScrollView>
);
}
src/views/Cooperation/index.tsx 0 → 100644
View file @ 2a52dd1b
import * as React from 'react';
import { useEffect } from 'react';
export interface IAppProps {
}
export default function Cooperation (props:any) {
useEffect(()=>{
console.log(props);
},[])
React.useLayoutEffect(()=>{
},[])
return (
<div>
Cooperation
</div>
);
}
src/views/ErrorPage/index.tsx 0 → 100644
View file @ 2a52dd1b
import * as React from 'react';
export default function ErrorPage () {
return (
<div>
you are lost ,404
</div>
);
}
src/views/Loading/index.tsx 0 → 100644
View file @ 2a52dd1b
import * as React from 'react';
export interface IAppProps {
}
export default function Loading (props: IAppProps) {
return (
<div>
pageLoading. .......
</div>
);
}
src/views/News/index.tsx 0 → 100644
View file @ 2a52dd1b
import { NewsScrollView } from "@/components/NewsScrollView";
import { PageLayout } from "@/layouts/PageLayout";
import { array } from "prop-types";
import * as React from "react";
export interface IAppProps {}
export default function News(props: IAppProps) {
return (
// <PageLayout> </PageLayout>
<div className="flex h-screen w-full ">
<div className="left bg-blue-600 pt-16 h-full w-5/12 min-w-[650px] text-white ">
<div className="pl-28 h-[75%] mt-16 relative ">
<div>
<div className=" text-8xl font-bold">News</div>
<div className=" text-lg tracking-wide">新闻动态</div>
<div className="absolute bottom-0 ">
<div className="w-12/12">
提供区块链融合技术和产业链接的精选内容
</div>
<div className="w-12/12">帮助您紧跟落地实况和未来发展趋势</div>
</div>
</div>
</div>
</div>
<div className="right h-full pt-28 w-7/12 relative">
<>
<NewsScrollView>
<div>
<div className="news-list overflow-y-hidden ">
{
Array(11).fill('any').map((i,index)=>(
<div className="news-item flex min-w-[650px] my-12 max-w-[90%] cursor-pointer
hover:shadow-lg hover:backdrop-blur-sm
hover:backdrop-brightness-105
px-8 py-7 rounded-lg transition-all duration-150 " key={index}>
<div className="news-date min-w-[200px] flex gap-x-2 text-white font-medium items-center ">
<div className="translate-y-3">
<div className="tracking-wide">2002/</div>
<div className="tracking-wide">02/</div>
</div>
<div className="text-8xl border-white border-b-4">19</div>
</div>
<div className="news-content text-black ">
<div className="title text-lg py-2 text-overflow: ellipsis line-clamp-2">
福建省高校区块链技术师资培训召开 | 华侨大学复杂美产教融合
</div>
<div className='text-sm opacity-75 indent-8 text-overflow: ellipsis line-clamp-3'>
“时光荏苒如白驹过隙，回首2021年，依然是曲折多变的一年，疫情反复，你我众志成城；格局动荡，依然坚守阵地。
2021年，在国家政策支持下，以区块链为代表的新兴技术力量势如破竹，回顾2021年，复杂美创造了哪些新成绩呢？”
</div>
</div>
</div>
))
}
</div>
<div className="pullup-tips">
<div className="before-trigger">
<span className="pullup-txt">Pull up and load more</span>
</div>
<div className="after-trigger">
<span className="pullup-txt">Loading...</span>
</div>
</div>
</div>
</NewsScrollView>
</>
{/* <div>312</div> */}</div>
</div>
);
}
src/vite-env.d.ts 0 → 100644
View file @ 2a52dd1b
/// <reference types="vite/client" />
tailwind.config.js 0 → 100644
View file @ 2a52dd1b
const withAnimations = require('animated-tailwindcss');
module.exports = withAnimations({
content: ["./src/**/*.{html,tsx,ts}"],
theme: {
extend: {
fontFamily:{
galano:['Galano','system-ui']
},
screens:{
'moblie':"640px",
'table':"961px",
"labtop":"1921px",
"sreen":"2881px",
}
},
},
plugins: [
require('@tailwindcss/line-clamp')
],
})
tsconfig.json 0 → 100644
View file @ 2a52dd1b
{
"compilerOptions": {
"baseUrl": "./",
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"experimentalDecorators": true,
"noEmit": true,
"jsx": "react-jsx",
"paths":{
"@/*":["src/*"]
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}
tsconfig.node.json 0 → 100644
View file @ 2a52dd1b
{
"compilerOptions": {
"composite": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"esModuleInterop": true,
},
"include": ["vite.config.ts","package.json"],
}
vite.config.ts 0 → 100644
View file @ 2a52dd1b
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import {resolve} from 'path'
import pkg from './package.json'
function renderChunks(deps: Record<string, string>) {
let chunks = {};
Object.keys(deps).forEach((key) => {
if (['react', 'react-router-dom', 'react-dom'].includes(key)) return;
chunks[key] = [key];
});
return chunks;
}
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": resolve(__dirname, "src"),
},
},
server:{
port:8008
},
build:{
sourcemap:false,
rollupOptions:{
output:{
manualChunks:{
vendor: ['react', 'react-router-dom', 'react-dom'],
...renderChunks(pkg.dependencies),
}
}
}
}
})
yarn.lock 0 → 100644
View file @ 2a52dd1b
This diff is collapsed.
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