Commit c8f258dd authored by mxm-web-develop's avatar mxm-web-develop

update

parent b8f04181
...@@ -2,4 +2,13 @@ NODE_ENV=dev ...@@ -2,4 +2,13 @@ NODE_ENV=dev
VITE_FETCH_URL = http://192.168.23.80:3333/ VITE_FETCH_URL = http://192.168.23.80:3333/
VITE_CHAIN33_DOC = "http://192.168.23.80:3335" VITE_CHAIN33_DOC = "http://192.168.23.80:3335"
VITE_BAAS33_DOC = "http://192.168.23.80:3336" VITE_BAAS33_DOC = "http://192.168.23.80:3336"
VITE_NEWS_API = "'https://33.cn/api/"
\ No newline at end of file
VITE_NEWS_API = "'https://33.cn/api/"
VITE_SLC = "https://zhpt.8n.cn"
VITE_SLG = "https://zhpt.8n.cn/mall"
VITE_LZB = "https://lianzb.cn/home/index"
VITE_CHAIN33_GIT = "https://github.com/33cn/chain33"
VITE_CHAIN33_DOWNLOAD = "https://chain.33.cn/resource"
\ No newline at end of file
NODE_ENV=prod NODE_ENV=prod
VITE_FETCH_URL = http://121.40.18.70:3333/ VITE_FETCH_URL = http://121.40.18.70:3333/
VITE_CHAIN33_DOC = "http://121.40.18.70:3335/guide" VITE_CHAIN33_DOC = "http://121.40.18.70:3335/guide"
VITE_BAAS33_DOC = "http://192.168.31.12:3336/guide/intro/Bass.html" VITE_BAAS33_DOC = "http://192.168.31.12:3336/guide/intro/Bass.html"
\ No newline at end of file
VITE_SLC = "https://www.8n.cn/home"
VITE_SLG = "https://www.8n.cn/mall"
VITE_LZB = "https://lianzb.cn/home/index"
VITE_CHAIN33_GIT = "https://github.com/33cn/chain33"
VITE_CHAIN33_DOWNLOAD = "https://chain.33.cn/resource"
\ No newline at end of file
...@@ -15,6 +15,8 @@ ...@@ -15,6 +15,8 @@
"@better-scroll/pull-up": "^2.4.2", "@better-scroll/pull-up": "^2.4.2",
"@better-scroll/scroll-bar": "^2.4.2", "@better-scroll/scroll-bar": "^2.4.2",
"@better-scroll/slide": "^2.4.2", "@better-scroll/slide": "^2.4.2",
"@floating-ui/react-dom": "^1.0.0",
"@floating-ui/react-dom-interactions": "^0.9.1",
"@heroicons/react": "^1.0.6", "@heroicons/react": "^1.0.6",
"ahooks": "^3.4.1", "ahooks": "^3.4.1",
"axios": "^0.27.2", "axios": "^0.27.2",
......
...@@ -31,7 +31,7 @@ export function App () { ...@@ -31,7 +31,7 @@ export function App () {
<Route element={<MxmRoute meta={{name:'Bass33'}}> <Baas33></Baas33> </MxmRoute>} path='/'></Route> <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:'Chain33'}}> <Chain33></Chain33> </MxmRoute>} path='/chain33'></Route>
<Route element={<MxmRoute meta={{name:'关于我们'}}><About /></MxmRoute>} path='/about'></Route> <Route element={<MxmRoute meta={{name:'关于我们'}}><About /></MxmRoute>} path='/about'></Route>
<Route element={<MxmRoute meta={{name:'产品详情'}}> <Details></Details></MxmRoute>} path='details/:id'></Route> <Route element={<MxmRoute meta={{name:'产品详情'}}> <Details /></MxmRoute>} path='details/:id'/>
<Route path='/news' element={ <Route path='/news' element={
<React.Suspense fallback={<Loading></Loading>}> <React.Suspense fallback={<Loading></Loading>}>
<MxmRoute meta={{name:'新闻动态'}}> <News></News> </MxmRoute> <MxmRoute meta={{name:'新闻动态'}}> <News></News> </MxmRoute>
...@@ -42,7 +42,6 @@ export function App () { ...@@ -42,7 +42,6 @@ export function App () {
<Route element={<MxmRoute meta={{name:'新闻详情'}}><NewsDetails /></MxmRoute>} path='/news/:id'></Route> <Route element={<MxmRoute meta={{name:'新闻详情'}}><NewsDetails /></MxmRoute>} path='/news/:id'></Route>
<Route element={<MxmRoute meta={{name:'公开课'}}><Classes /></MxmRoute>} path='/classes'></Route> <Route element={<MxmRoute meta={{name:'公开课'}}><Classes /></MxmRoute>} path='/classes'></Route>
</Routes> </Routes>
</> </>
); );
} }
src/assets/img/about.png

56.2 KB | W: | H:

src/assets/img/about.png

22.6 KB | W: | H:

src/assets/img/about.png
src/assets/img/about.png
src/assets/img/about.png
src/assets/img/about.png
  • 2-up
  • Swipe
  • Onion skin
<?xml version="1.0" encoding="UTF-8"?>
<svg width="6px" height="10px" viewBox="0 0 6 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>切片</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="BAAS33-4备份" transform="translate(-230.000000, -541.000000)" fill="#24374E">
<g id="三角形备份-2" transform="translate(230.000000, 541.000000)">
<polygon transform="translate(3.000000, 5.000000) rotate(-270.000000) translate(-3.000000, -5.000000) " points="3 2 8 8 -2 8"></polygon>
</g>
</g>
</g>
</svg>
\ No newline at end of file
...@@ -26,7 +26,7 @@ export const DetailsExceTable = (props: DetailsExceTableType) => { ...@@ -26,7 +26,7 @@ export const DetailsExceTable = (props: DetailsExceTableType) => {
return ( return (
<td <td
key={i + Math.random()} key={i + Math.random()}
className="border-l border-r border-b px-3 py-2" className="border-l border-r border-b border-black px-3 py-2"
> >
{v[1] ? ( {v[1] ? (
<CheckIcon className="w-5 h-5 text-green-600" /> <CheckIcon className="w-5 h-5 text-green-600" />
...@@ -37,7 +37,7 @@ export const DetailsExceTable = (props: DetailsExceTableType) => { ...@@ -37,7 +37,7 @@ export const DetailsExceTable = (props: DetailsExceTableType) => {
); );
} }
return ( return (
<td key={i + Math.random()} className="border-l border-r px-3 py-2"> <td key={i + Math.random()} className="border-l border-r border-black px-3 py-2">
{v[1]} {v[1]}
</td> </td>
); );
...@@ -46,7 +46,7 @@ export const DetailsExceTable = (props: DetailsExceTableType) => { ...@@ -46,7 +46,7 @@ export const DetailsExceTable = (props: DetailsExceTableType) => {
return ( return (
<td <td
key={i + Math.random()} key={i + Math.random()}
className="border-l border-r border-b px-3 py-2" className="border-l border-r border-b px-3 py-2 border-black"
> >
{v[1] ? ( {v[1] ? (
<CheckIcon className="w-5 h-5 text-green-600" /> <CheckIcon className="w-5 h-5 text-green-600" />
...@@ -61,14 +61,14 @@ export const DetailsExceTable = (props: DetailsExceTableType) => { ...@@ -61,14 +61,14 @@ export const DetailsExceTable = (props: DetailsExceTableType) => {
return ( return (
<td <td
key={i + Math.random()} key={i + Math.random()}
className="border-l border-r px-3 py-2" className="border-l border-r border-black px-3 py-2"
></td> ></td>
); );
} else { } else {
return ( return (
<td <td
key={i + Math.random()} key={i + Math.random()}
className="border-l border-r border-t border-b px-3 py-2" className="border-l border-r border-t border-b border-black px-3 py-2"
> >
{d[type]} {d[type]}
</td> </td>
...@@ -85,16 +85,16 @@ export const DetailsExceTable = (props: DetailsExceTableType) => { ...@@ -85,16 +85,16 @@ export const DetailsExceTable = (props: DetailsExceTableType) => {
[props.data] [props.data]
); );
return ( return (
<table className="table-auto w-full border bg-white/20 backdrop-blur-lg"> <table className="table-auto w-full bg-white/20 border-b border-black backdrop-blur-lg">
<thead className=" bg-black text-white"> <thead className=" bg-black text-white ">
<tr className="text-left "> <tr className="text-left ">
<th className="w-2/12 py-3 px-2 border-r border-white rounded-tl-lg"> <th className="w-2/12 py-3 px-2 rounded-tl-lg">
模块 模块
</th> </th>
<th className="w-3/12 py-3 px-2 border-r border-white">服务</th> <th className="w-3/12 py-3 px-2 ">服务</th>
<th className="w-5/12 py-3 px-2 border-r border-white">功能项</th> <th className="w-5/12 py-3 px-2 ">功能项</th>
<th className="w-1/12 py-3 px-2 border-r border-white">企业版本</th> <th className="w-1/12 py-3 px-2 ">企业版本</th>
<th className="w-1/12 py-3 px-2 border-r border-white rounded-tr-lg"> <th className="w-1/12 py-3 px-2 rounded-tr-lg">
开发版本 开发版本
</th> </th>
</tr> </tr>
......
...@@ -22,7 +22,7 @@ const initBScroll = (el:HTMLElement) => { ...@@ -22,7 +22,7 @@ const initBScroll = (el:HTMLElement) => {
}, },
slide: { slide: {
threshold: 100, threshold: 100,
autoplay:true, autoplay:false,
startPageYIndex:0, startPageYIndex:0,
loop:true, loop:true,
}, },
...@@ -34,7 +34,7 @@ const initBScroll = (el:HTMLElement) => { ...@@ -34,7 +34,7 @@ const initBScroll = (el:HTMLElement) => {
momentum: false, momentum: false,
scrollY: false, scrollY: false,
bounce: false, bounce: false,
stopPropagation: true, stopPropagation: false,
}) })
return res return res
}; };
...@@ -52,7 +52,6 @@ export const EventsScrollView = (props: ScrollViewType) => { ...@@ -52,7 +52,6 @@ export const EventsScrollView = (props: ScrollViewType) => {
const {data,dispatch} = useContext(AppContext) const {data,dispatch} = useContext(AppContext)
useEffect(()=>{ useEffect(()=>{
console.log(data);
dispatch({type:'doSome'}) dispatch({type:'doSome'})
},[]) },[])
useEffect(()=>{ useEffect(()=>{
......
import { IProps } from "@/common/Iprops.interface"; import { IProps } from "@/common/Iprops.interface";
import * as React from 'react'; import * as React from 'react';
import { useState } from 'react'; import { useState } from 'react';
import Logo from '@/assets/img/33logo.png'; import Logo from '@/assets/img/logo.png';
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import { AppContext } from "@/store/AppProvider";
export interface IAppProps extends IProps { export interface IAppProps extends IProps {
} }
const HoverLink = () =>{ const HoverLink = () =>{
const [onHover,setOnHover] =useState(false); const [onHover,setOnHover] =useState(false);
const slgurl = import.meta.env.VITE_SLG
const slcurl = import.meta.env.VITE_SLC
const lzburl = import.meta.env.VITE_LZB
const value = React.useContext(AppContext)
const goLink = (name:string)=>{
switch(name){
case 'slc':
window.open(slcurl,'_blank')
break;
case 'slg':
window.open(slgurl,'_blank')
break;
case 'lzb':
window.open(lzburl,'_blank')
break;
}
}
return ( return (
<div <div
className='relative content-1-cn text-slate-400' className='relative content-1-cn text-slate-400'
...@@ -21,6 +40,7 @@ const HoverLink = () =>{ ...@@ -21,6 +40,7 @@ const HoverLink = () =>{
onHover? onHover?
<div className='py-3'> <div className='py-3'>
<div className='hover-toggle-box w-[180%] <div className='hover-toggle-box w-[180%]
flex-cols
absolute absolute
animate-fadeIn animate-fadeIn
animate-alternate animate-alternate
...@@ -28,9 +48,14 @@ const HoverLink = () =>{ ...@@ -28,9 +48,14 @@ const HoverLink = () =>{
bg-opacity-25 bg-opacity-25
-translate-x-[18%] text-black rounded-lg flex-col -translate-x-[18%] text-black rounded-lg flex-col
items-center justify-center text-center py-3 px-2 bg-[#EAF0F4]'> items-center justify-center text-center py-3 px-2 bg-[#EAF0F4]'>
<div className='my-[8px] cursor-pointer hover:text-theme-blue'>上链查</div> <div className='my-[8px] cursor-pointer hover:text-theme-blue' onClick={()=>goLink('slc')}>上链查</div>
<div className='my-[8px] cursor-pointer hover:text-theme-blue'>上链购</div> <div className='my-[8px] cursor-pointer hover:text-theme-blue' onClick={()=>goLink('slg')}>
<div className='my-[8px] cursor-pointer hover:text-theme-blue'>链证宝</div> 上链购
</div>
<div className='my-[8px] cursor-pointer hover:text-theme-blue' onClick={()=>goLink('lzb')}>
链证宝
</div>
</div> </div>
</div> </div>
:'' :''
...@@ -44,9 +69,9 @@ export default function Navbar (props: IAppProps) { ...@@ -44,9 +69,9 @@ export default function Navbar (props: IAppProps) {
const {pathname} = useLocation() const {pathname} = useLocation()
return ( return (
<nav className='flex min-w-[1200px] justify-between absolute px-28 w-full top-0 z-[99999] py-6 text-sm text-slate-400 '> <nav className='flex min-w-[1440px] justify-between absolute px-[120px] w-full top-0 z-[99999] py-6 text-sm text-slate-400 '>
<div className='left '> <div className='left '>
<img src={Logo} alt="" /> <img src={Logo} />
</div> </div>
<div className='right content-1-cn flex gap-x-12'> <div className='right content-1-cn flex gap-x-12'>
<Link to='/' className={`hover:text-black ${pathname ==='/'?'text-black':'text-slate-400'}`}>Baas33</Link> <Link to='/' className={`hover:text-black ${pathname ==='/'?'text-black':'text-slate-400'}`}>Baas33</Link>
......
...@@ -3,8 +3,8 @@ export const baasBalls = [ ...@@ -3,8 +3,8 @@ export const baasBalls = [
page:0, page:0,
setting: [ setting: [
{ {
size: "11%", size: "188px",
position: ["-50px", "48%"], position: ["-50px", "60%"],
rotation: "210", rotation: "210",
zIndex: "9999", zIndex: "9999",
color: "blue", color: "blue",
...@@ -48,8 +48,8 @@ export const baasBalls = [ ...@@ -48,8 +48,8 @@ export const baasBalls = [
page:2, page:2,
setting:[ setting:[
{ {
size: "12%", size: "190px",
position: ["14%", "55%"], position: ["7.5%", "70%"],
rotation: "210", rotation: "210",
zIndex: "9999", zIndex: "9999",
color: "blue" color: "blue"
...@@ -112,8 +112,8 @@ export const aboutBalls=[ ...@@ -112,8 +112,8 @@ export const aboutBalls=[
page:0, page:0,
setting: [ setting: [
{ {
size: "8%", size: "150px",
position: ["7%", "54%"], position: ["7%", "65%"],
rotation: "210", rotation: "210",
zIndex: "9999", zIndex: "9999",
color: "blue", color: "blue",
......
export const contacts = [
{
text: "杭州总部",
tel: "0571-8167-1366",
},
{
text: "南京分部",
tel: "138-5811-2690",
},
{
text: "上海分部",
tel: "135-8800-1627",
},
{
text: "广州分部",
tel: "177-0642-5022",
},
];
export const detailInstances = [
{
title: "Baas33试用版",
features: [
{
title: "免费体验",
context: "免费体验一键构建联盟链,共有链,平行侧链等区块链网络",
},
{
title: "轻松上手",
context: "提供全生命周期完备的可视化操作能力,实现用户零门槛装配",
},
{ title: "快速上链", context: "支持用户快速构建区块链网络,实现业务快速上链"},
],
fee:'适用版本的联盟链加平行链总数限制在3跳,联盟链节点最多支持5个,免费试用一个月。如果要增加链的条数以及使用时间,可以联系我们获取license文件,对链条目进行扩容。'
},
{
title: "Baas33企业版",
features: [
{title:'快速构建',context:'支持一键快速构建联盟链、私链、公有链、平行侧链等区块链网络'},
{title:'灵活部署',context:'支持节点一键自动化部署,省去手动部署等大量时间和精力'},
{title:'存证服务',context:'支持区块链存证服务的在线部署'}
],
fee:'企业版本的联盟链加平行链总数限制在3条,联盟链节点最多支持5个,一年费用5998。如果要增加链的条数,可以联系我们获取license文件,对链条目进行扩容。'
},
{
title: "Baas33开发版",
features: [
{title:'快速构建',context:'支持一键快速构建联盟链、私链、公有链、平行侧链等区块链网络'},
{title:'灵活部署',context:'支持节点一键自动化部署,省去手动部署等大量时间和精力'},
{title:'存证服务',context:'支持区块链存证服务的在线部署'}
],
fee:'开发版本的联盟链加平行链总数限制在6条,联盟链节点最多支持7个,一年费用7998。如果要增加链的条数,可以联系我们获取license文件,对链条目进行扩容。'
},
];
...@@ -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-28 min-w-[1200px] labtop:px-[16rem] relative w-full ${className?className:''}`}> <div className={`px-[120px] min-w-[1440px] labtop:px-[16rem] relative w-full ${className?className:''}`}>
{children} {children}
</div> </div>
) )
......
...@@ -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 min-w-[1200px] relative"> <div className="w-full h-full min-w-[1440px] 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>;
......
...@@ -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 min-w-[1200px] overflow-hidden"> <div className=" relative h-full w-full min-w-[1440px] 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) => {
......
...@@ -12,10 +12,10 @@ export interface IAppProps { ...@@ -12,10 +12,10 @@ export interface IAppProps {
export default function MxmRoute (props: IAppProps) { export default function MxmRoute (props: IAppProps) {
const {meta,children} = props; const {meta,children} = props;
const location = useLocation() // const location = useLocation()
useEffect(()=>{ // useEffect(()=>{
console.log(meta); // console.log('changed',location);
},[location]) // },[location])
return ( return (
<> <>
{children} {children}
......
export default[
]
\ No newline at end of file
...@@ -8,12 +8,7 @@ const data ={ ...@@ -8,12 +8,7 @@ const data ={
pageIndex:1 pageIndex:1
}, },
theme:{ theme:{
color:'light'
},
links:{
shangliancha:'https://www.8n.cn/home',
shangliangou:'https://www.8n.cn/mall',
lianzhengbao:'https://lianzb.cn/home/index'
} }
} }
export const AppContext = createContext<{data:typeof data,dispatch:any}>({ export const AppContext = createContext<{data:typeof data,dispatch:any}>({
...@@ -36,7 +31,10 @@ const AppReducer = (state:typeof data,action:Actions)=>{ ...@@ -36,7 +31,10 @@ const AppReducer = (state:typeof data,action:Actions)=>{
export const AppProvider = (props: any)=>{ export const AppProvider = (props: any)=>{
const [state,dispatch] = useReducer(AppReducer,data) const [state,dispatch] = useReducer(AppReducer,data)
const location = useLocation() const location = useLocation()
useEffect(()=>{
console.log('changed,1111');
},[location])
return( return(
<AppContext.Provider value={{data:state,dispatch}}> <AppContext.Provider value={{data:state,dispatch}}>
{props.children} {props.children}
......
...@@ -6,12 +6,12 @@ ...@@ -6,12 +6,12 @@
src: url('./assets/fonts/GalanoGrotesqueDEMO-Bold.otf'); src: url('./assets/fonts/GalanoGrotesqueDEMO-Bold.otf');
} }
@layer components{ @layer components{
.super-hero-title{ .super-hero-title{
@apply text-white text-[135px] tracking-wider font-bold font-sans leading-[90px] @apply text-white text-[135px] tracking-wider font-[400] font-galano leading-[90px]
} }
.hero-title{ .hero-title{
@apply text-theme-dark text-[90px] tracking-wider font-[400] font-galano leading-[90px] @apply text-theme-dark text-[75px] tracking-wider font-[400] font-galano leading-[90px]
} }
...@@ -29,8 +29,9 @@ ...@@ -29,8 +29,9 @@
@apply text-theme-dark text-[14px] tracking-[1px] font-[400] font-cnnote leading-[20px] @apply text-theme-dark text-[14px] tracking-[1px] font-[400] font-cnnote leading-[20px]
} }
.title-1-en{ .title-1-en{
@apply text-[#061E3B] font-galano text-[90px] leading-[90px] font-[800] tracking-[6px] @apply text-theme-dark text-[75px] tracking-wider font-[400] font-galano leading-[90px]
} }
...@@ -45,7 +46,6 @@ ...@@ -45,7 +46,6 @@
} }
.sub-title-cn{ .sub-title-cn{
@apply text-theme-dark text-[24px] tracking-wide font-cnnote font-bold screen:py-3 py-1 @apply text-theme-dark text-[24px] tracking-wide font-cnnote font-bold screen:py-3 py-1
} }
...@@ -93,6 +93,12 @@ boby{ ...@@ -93,6 +93,12 @@ boby{
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
text-shadow: 56rem 61rem 5rem rgba(55, 107, 227, 0.6); text-shadow: 56rem 61rem 5rem rgba(55, 107, 227, 0.6);
} }
.verticalText{
writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl;
}
.clip-title{ .clip-title{
/* /*
-webkit-background-clip: text; -webkit-background-clip: text;
......
...@@ -56,11 +56,11 @@ export const Contact = () => { ...@@ -56,11 +56,11 @@ export const Contact = () => {
<AppContianer className="flex items-center justify-center"> <AppContianer className="flex items-center justify-center">
<div className="-translate-x-[5vw]"> <div className="-translate-x-[5vw]">
<div className="py-12"> <div className="py-12">
<div className="hero-title">Contact us</div> <div className="title-1-en">Contact us</div>
<div className="subTitle-1-cn">联系我们</div> <div className="subTitle-1-cn">联系我们</div>
</div> </div>
<div className="grid grid-cols-2 gap-[2rem] pb-12"> <div className="grid grid-cols-2 gap-x-[100px] pb-12">
{data.map((i, index) => ( {data.map((i, index) => (
<div className="item" key={index}> <div className="item" key={index}>
<div className="content-1-cn">{i.location}</div> <div className="content-1-cn">{i.location}</div>
...@@ -68,13 +68,12 @@ export const Contact = () => { ...@@ -68,13 +68,12 @@ export const Contact = () => {
</div> </div>
))} ))}
</div> </div>
<div className="item"> <div className="item">
<div className="content-1-cn">邮箱</div> <div className="content-1-cn">邮箱</div>
<div className="sub-title-cn">support@33.cn</div> <div className="sub-title-cn">support@33.cn</div>
</div> </div>
<div className="locations flex justify-between pt-12"> <div className="locations flex items-start gap-x-[100px] pt-12">
<div className="item flex-col"> <div className="item flex-col content-1-cn">
<div className='sub-title-cn'>杭州西湖区办公室</div> <div className='sub-title-cn'>杭州西湖区办公室</div>
<div className='py-3 content-1-cn'> <div className='py-3 content-1-cn'>
<div>浙江省杭州市西湖区</div> <div>浙江省杭州市西湖区</div>
...@@ -82,7 +81,7 @@ export const Contact = () => { ...@@ -82,7 +81,7 @@ export const Contact = () => {
<div>东部软件园科技大厦7楼</div> <div>东部软件园科技大厦7楼</div>
</div> </div>
</div> </div>
<div className="item flex-col content-1-cn"> <div className="item flex-col content-1-cn">
<div className='sub-title-cn'>杭州滨江办公室</div> <div className='sub-title-cn'>杭州滨江办公室</div>
<div className='py-3'> <div className='py-3'>
<div>浙江省杭州市滨江区</div> <div>浙江省杭州市滨江区</div>
......
...@@ -23,13 +23,13 @@ interface DtailContainerType extends IProps { ...@@ -23,13 +23,13 @@ interface DtailContainerType extends IProps {
const DataGrid = (props: DataGridType) => { const DataGrid = (props: DataGridType) => {
const { data, doSetSelecteItem,className } = props; const { data, doSetSelecteItem,className } = props;
return ( return (
<div className={`grid grid-cols-2 labtop:grid-cols-3 gap-11 ${className}`}> <div className={`grid grid-cols-2 labtop:grid-cols-3 gap-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='min-w-[280px] cursor-pointer flex items-center justify-between gap-x-3 px-5 py-2'> <HoverBox className='w-[270px] cursor-pointer flex items-center justify-between px-[20px] py-2'>
<> <>
<div> <div>
<div className="content-title-cn h-[50px] w-[100%] line-clamp-1 ">{i.title}</div> <div className="content-title-cn h-[48px] w-[100%] line-clamp-1 ">{i.title}</div>
<div className='normal-text'>{i.diploma}</div> <div className='normal-text'>{i.diploma}</div>
<div className='normal-text'>{i.location}</div> <div className='normal-text'>{i.location}</div>
</div> </div>
...@@ -46,8 +46,8 @@ const DataGrid = (props: DataGridType) => { ...@@ -46,8 +46,8 @@ 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}> <div className={className+ " -translate-y-[8px]"}>
<div className={`flex hover:text-theme-blue items-center`}> <div className={`flex hover:text-theme-blue items-center `}>
<ChevronLeftIcon className='w-5 h-5'></ChevronLeftIcon> <ChevronLeftIcon className='w-5 h-5'></ChevronLeftIcon>
<div <div
onClick={() => doCancelSelecteItem(undefined)} onClick={() => doCancelSelecteItem(undefined)}
...@@ -57,7 +57,7 @@ const DtailContainer = (props: DtailContainerType) => { ...@@ -57,7 +57,7 @@ const DtailContainer = (props: DtailContainerType) => {
</div> </div>
</div> </div>
<div className='py-3'> <div className='py-[5px]'>
<div className='flex justify-between'> <div className='flex justify-between'>
<div className='sub-title-cn'> {data.title}</div> <div className='sub-title-cn'> {data.title}</div>
<StyledButton text='我要应聘' color="black"></StyledButton> <StyledButton text='我要应聘' color="black"></StyledButton>
...@@ -65,7 +65,7 @@ const DtailContainer = (props: DtailContainerType) => { ...@@ -65,7 +65,7 @@ const DtailContainer = (props: DtailContainerType) => {
<div className='normal-text'>{data.diploma}</div> <div className='normal-text'>{data.diploma}</div>
<div className='normal-text'>{data.location}</div> <div className='normal-text'>{data.location}</div>
</div> </div>
<div className='py-3'> <div className='py-[5px]'>
<div className='content-sub-title-cn'>岗位描述</div> <div className='content-sub-title-cn'>岗位描述</div>
<div className="flex-col content-1-cn"> <div className="flex-col content-1-cn">
{data.requirments.split(";").map((i: string, index: number) => ( {data.requirments.split(";").map((i: string, index: number) => (
...@@ -73,7 +73,7 @@ const DtailContainer = (props: DtailContainerType) => { ...@@ -73,7 +73,7 @@ const DtailContainer = (props: DtailContainerType) => {
))} ))}
</div> </div>
</div> </div>
<div className='py-3'> <div className='py-[5px]'>
<div className='content-sub-title-cn'>岗位要求</div> <div className='content-sub-title-cn'>岗位要求</div>
<div className="flex-col content-1-cn"> <div className="flex-col content-1-cn">
{data.demands.split(";").map((i: string, index: number) => ( {data.demands.split(";").map((i: string, index: number) => (
...@@ -118,7 +118,7 @@ export const JoinUs = () => { ...@@ -118,7 +118,7 @@ export const JoinUs = () => {
}, [selecteItem]); }, [selecteItem]);
return ( return (
<> <>
<div className="pt-12 pb-5"> <div className=" pb-5 pl-[165px]">
<div className="hero-title">Join us</div> <div className="hero-title">Join us</div>
<div className="sub-title-cn">加入我们</div> <div className="sub-title-cn">加入我们</div>
</div> </div>
...@@ -151,7 +151,7 @@ export const JoinUs = () => { ...@@ -151,7 +151,7 @@ export const JoinUs = () => {
></DtailContainer> ></DtailContainer>
) : ( ) : (
<DataGrid <DataGrid
className='w-10/12 labtop:w-11/12 screen:w-5/12' className='w-10/12 labtop:w-11/12 screen:w-5/12 -translate-x-[19px]'
data={selecteData ? selecteData : []} data={selecteData ? selecteData : []}
doSetSelecteItem={setSelecteItem} doSetSelecteItem={setSelecteItem}
></DataGrid> ></DataGrid>
......
import { IProps } from "@/common/Iprops.interface"; import { IProps } from "@/common/Iprops.interface";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import {chunk as _chunk} from "lodash"; import { chunk as _chunk } from "lodash";
interface EventItemType extends IProps{ import { offset, flip, shift, arrow } from "@floating-ui/react-dom";
itmeIndex: number; import {
data:any useFloating,
useInteractions,
useHover,
} from "@floating-ui/react-dom-interactions";
interface EventItemType extends IProps {
itmeIndex: number;
data: any;
} }
interface EventsTableType extends IProps { interface EventsTableType extends IProps {
tableIndex: number; tableIndex: number;
data:any data: any;
} }
interface EventColsType extends IProps{ interface EventColsType extends IProps {
data:any data: any;
} }
export const EventItem = (props:EventItemType)=>{ export const EventItem = (props: EventItemType) => {
const{itmeIndex,data} = props; const { itmeIndex, data } = props;
const move = useMemo(() => { const [open, setOpen] = useState(false);
return itmeIndex*4.5+'rem' const { x, y, reference, floating, strategy,context } = useFloating({
},[itmeIndex]) open,
const dates = useMemo(() =>{ onOpenChange: setOpen,
let date; placement: itmeIndex>1?"left" :"right",
if(data.date){ strategy: "fixed",
date = data.date.split("-") });
}else{ const {getReferenceProps, getFloatingProps} = useInteractions([
date = undefined useHover(context, {
} // props
return date })
},[data]) ]);
const move = useMemo(() => {
return( return itmeIndex * 85 + "px";
<div }, [itmeIndex]);
className={`max-w-[12rem] h-fit`} const dates = useMemo(() => {
style={{ let date;
transform: `translateY(${move})` if (data.date) {
}} date = data.date.split("-");
> } else {
<div className="flex items-baseline"> date = undefined;
<div className='int-font-sub text-theme-dark'>{dates&&dates[0]}/</div> }
<div className=' int-font-hero border-b-[2px] border-theme-dark text-theme-dark'>{dates&&dates[1]}</div> return date;
}, [data]);
return (
<>
<div
className={`max-w-[12rem] h-fit cursor-pointer`}
ref={reference}
style={{
transform: `translateY(${move})`,
}}
>
<div className="flex items-baseline">
<div className="int-font-sub text-theme-dark">
{dates && dates[0]}/
</div> </div>
<div className='py-2 line-clamp-3 h-[70px] des-cn overflow-y-hidden font-cnnote'> <div className="int-font-hero border-b-[2px] border-theme-dark backdrop-opacity-30 text-theme-dark">
{data?data.title:''} {dates && dates[1]}
</div> </div>
</div> </div>
) <div className="py-2 content-1-cn line-clamp-3 h-[70px] overflow-y-hidden ">
} {data ? data.title : ""}
</div>
</div>
{open&&data && data.title.length > 42 && (
<div
ref={floating}
className="bg-theme-dark content-1-cn z-[999999] text-white py-5 px-3 w-[260px] rounded-md break-all"
style={{
position: strategy,
top: y ?? 0,
left: x ?? 0,
}}
>
{data.title}
</div>
)}
</>
);
};
export const EventCols = (props: EventColsType)=>{ export const EventCols = (props: EventColsType) => {
const {data}= props; const { data } = props;
return( return (
<div className='grid grid-cols-4 pb-[3rem]'> <div className="grid grid-cols-4 pb-[3rem]">
{ {data &&
data&&data.length>0&&data.map((i:any,index:number)=><EventItem data.length > 0 &&
itmeIndex={index} data.map((i: any, index: number) => (
data={i} <EventItem itmeIndex={index} data={i} key={index}></EventItem>
key={index} ))}
></EventItem>) </div>
} );
</div>
)
}
export const EventsTable = (props: EventsTableType)=>{ };
const {tableIndex,data} = props
const [colData,setColData]= useState<undefined|any[]>(undefined) export const EventsTable = (props: EventsTableType) => {
useEffect(() => { const { tableIndex, data } = props;
const half =4 const [colData, setColData] = useState<undefined | any[]>(undefined);
const c = _chunk(data,half) useEffect(() => {
console.log(c); const half = 4;
const c = _chunk(data, half);
setColData(c) setColData(c);
},[data]) }, [data]);
return( return (
<div> <div>
{colData&&colData.map((k,index)=>( {colData &&
<EventCols data={k} key={index}></EventCols> colData.map((k, index) => <EventCols data={k} key={index}></EventCols>)}
))} </div>
</div> );
) };
}
\ No newline at end of file
...@@ -24,7 +24,7 @@ export const Memorabilia = () => { ...@@ -24,7 +24,7 @@ export const Memorabilia = () => {
return ( return (
<AppContianer className="flex items-center justify-start h-full w-full relative labtop:px-28 "> <AppContianer className="flex items-center justify-start h-full w-full relative labtop:px-[120px] ">
<div className='w-[896px]'> <div className='w-[896px]'>
<div className='absolute top-12 labtop:right-[14rem] right-[7rem]'> <div className='absolute top-12 labtop:right-[14rem] right-[7rem]'>
......
...@@ -36,16 +36,18 @@ export const Partners = () => { ...@@ -36,16 +36,18 @@ export const Partners = () => {
<div className='center w-10/12 flex items-center justify-start h-full'> <div className='center w-10/12 flex items-center justify-start 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} src={`/imgs/${i}.png`}></img>)
} }
</div> </div>
</div> </div>
<div className="right w-2/12 z-[200000] pl-[3rem]">
<div className='flex pt-16'> <div className="flex w-2/12 pl-[50px] pt-[46px] z-[2000]">
<VerticalText text='合作伙伴' containerStyle="sub-title-cn py-5 px-5"/>
<VerticalText text='Partners' containerStyle="hero-title mt-6" itemStyle=" rotate-90 -my-[1.81rem]"/> <div className="sub-title-cn verticalText">合作伙伴</div>
</div> <div className="hero-title verticalText">Partners</div>
</div>
</div>
</div> </div>
</AppContianer> </AppContianer>
) )
......
...@@ -15,7 +15,7 @@ const Description = () => { ...@@ -15,7 +15,7 @@ const Description = () => {
return ( return (
<div className="w-full"> <div className="w-full">
<div className="sub-title-cn mb-[63px] pl-[80px]">链上复杂美 上链不复杂</div> <div className="sub-title-cn mb-[63px] pl-[80px]">链上复杂美 上链不复杂</div>
<div className="paragraph content-1-cn flex-col gap-y-4 pl-[80px] min-w-[720px] max-w-[85%]"> <div className="paragraph content-1-cn flex-col gap-y-4 pl-[80px] min-w-[600px] max-w-[85%]">
<div className="pb-[14px]"> <div className="pb-[14px]">
公司成立于2008年,2013年启动区块链、智能合约的研发与创新,2014年申请区块链发明专利:钱包找回功能。已累计申请了400多项区块链技术的发明专利,2019年据德温特专利家族统计,复杂美区块链发明专利排名位于全球第三,仅次于阿里巴巴和IBM。 公司成立于2008年,2013年启动区块链、智能合约的研发与创新,2014年申请区块链发明专利:钱包找回功能。已累计申请了400多项区块链技术的发明专利,2019年据德温特专利家族统计,复杂美区块链发明专利排名位于全球第三,仅次于阿里巴巴和IBM。
</div> </div>
...@@ -23,7 +23,7 @@ const Description = () => { ...@@ -23,7 +23,7 @@ const Description = () => {
总公司总部位于杭州,并在南京、广州、海南、宁波、重庆设有分部。目前,公司员工100人,其中80%左右为技术人员,吸引了一批甲骨文、阿里、华为程序员。总公司与多家世界500强开展区块链项目合作,在票据、供应链金融、积分、仓单有区块链应用落地。 总公司总部位于杭州,并在南京、广州、海南、宁波、重庆设有分部。目前,公司员工100人,其中80%左右为技术人员,吸引了一批甲骨文、阿里、华为程序员。总公司与多家世界500强开展区块链项目合作,在票据、供应链金融、积分、仓单有区块链应用落地。
</div> </div>
<div> <div>
2018年11月,复杂美区块链Chain33在Github上开源,是较早落地运行的平行链架构系统,并基于模块设计可协作开发,大幅降低区块链的开发维护成本,实现快捷易用的跨链交易,有近100个平行链项目落地,有去中心化交易、去中心化社交、去中心化电商、去中心化溯源存证等一系列应用。 2018年11月,复杂美区块链Chain33在Github上开源,是较早落地运行的平行链架构系统,并基于模块设计可协作开发,大幅降低区块链的开发维护成本,实现快捷易用的跨链交易,有近100个平行链项目落地,有去中心化交易、去中心化社交、去中心化电商、去中心化溯源存证等一系列应用。
</div> </div>
</div> </div>
<div className="flex py-10 content-sub2-title-cn gap-x-[4.5rem] pl-[80px] "> <div className="flex py-10 content-sub2-title-cn gap-x-[4.5rem] pl-[80px] ">
...@@ -95,10 +95,10 @@ export default function About(props: any) { ...@@ -95,10 +95,10 @@ export default function About(props: any) {
ballConfig={aboutBalls[0].setting} ballConfig={aboutBalls[0].setting}
gradientConfig={aboutBg[0].config} gradientConfig={aboutBg[0].config}
> >
<AppContianer className="h-full -translate-y-[5rem] labtop:px-28"> <AppContianer className="h-full items-start labtop:px-[120px]">
<div className="flex gap-x-[5rem] w-full h-full items-center"> <div className="flex w-full h-full items-center">
<img src={AboutImg} className="w-[420px]"/> <img src={AboutImg} />
<div className="flex-grow-0 mt-8"> <div className=" ">
<Description></Description> <Description></Description>
</div> </div>
</div> </div>
......
...@@ -24,11 +24,11 @@ const AdvantagesList = ()=>{ ...@@ -24,11 +24,11 @@ const AdvantagesList = ()=>{
} }
] ]
return( return(
<div className='flex flex-col gap-y-[2.5rem] mt-[10vh]'> <div className='flex flex-col gap-y-[60px] mt-[48px]'>
{ {
data.map((i,index)=>( data.map((i,index)=>(
<div key={index} className='relative my-[1.2vh]'> <div key={index} className='relative '>
<span className='absolute title-1-cn text-[90px] -top-[1.5rem] -left-[2rem] opacity-10'>{index+1}</span> <span className='absolute title-1-cn text-[90px] -top-[2rem] -left-[2rem] opacity-10'>{index+1}</span>
<div className='title-2-cn border-black border-b-[3px] w-[90px]'>{i.title}</div> <div className='title-2-cn border-black border-b-[3px] w-[90px]'>{i.title}</div>
<div className='pt-2 content-1-cn'>{i.text}</div> <div className='pt-2 content-1-cn'>{i.text}</div>
</div> </div>
...@@ -43,7 +43,7 @@ export const Advantages = (props: AdvantagesType)=>{ ...@@ -43,7 +43,7 @@ export const Advantages = (props: AdvantagesType)=>{
return( return(
<AppContianer className='h-full'> <AppContianer className='h-full'>
<div className="flex h-full items-center gap-x-[10vw] -translate-y-[15vh]"> <div className="flex h-full items-start pt-[48px] gap-x-[100px] ">
<div className="left"> <div className="left">
<div className="title-2-cn"> <div className="title-2-cn">
<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">
...@@ -65,10 +65,7 @@ export const Advantages = (props: AdvantagesType)=>{ ...@@ -65,10 +65,7 @@ export const Advantages = (props: AdvantagesType)=>{
</div> </div>
</div> </div>
<div className="right"> <div className="right">
<div className='translate-y-[6.5rem]'> <AdvantagesList />
<AdvantagesList />
</div>
</div> </div>
</div> </div>
</AppContianer> </AppContianer>
......
...@@ -3,6 +3,7 @@ import { DetailsExceTable, ItemType } from "@/components/DetailsExceTable" ...@@ -3,6 +3,7 @@ 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 { fetchProduct } from "@/fetch/dataFetch" import { fetchProduct } from "@/fetch/dataFetch"
import { AppContianer } from "@/layouts/AppContianer" import { AppContianer } from "@/layouts/AppContianer"
...@@ -45,36 +46,37 @@ export const Details = (props:DetailsType)=>{ ...@@ -45,36 +46,37 @@ export const Details = (props:DetailsType)=>{
} }
},[id]) },[id])
const TableHeaderData = useMemo(() => { const TableHeaderData = useMemo(() => {
let title ='Baas33试用版'; const data = detailInstances
let features =[
{
title:'快速构建',
context:'支持一键快速构建联盟链、私链、公有链、平行侧链等区块链网络'
},
{title:'灵活部署',context:'支持节点一键自动化部署,省去手动部署等大量时间和精力'},
{title:'存证服务',context:'支持区块链存证服务的在线部署'}
]
switch (id){ switch (id){
case "0":
return data[0]
case "1": case "1":
title = 'Baas33企业版'; return data[1]
break;
case "2": case "2":
title = 'Baas33开发版'; return data[2]
break;
}
return{
title,
features
} }
},[id]) },[id])
return( return(
<PageLayout ballConfig={detailsBalls[0].setting} gradientConfig={detailsBg[0].config}> <PageLayout ballConfig={detailsBalls[0].setting} gradientConfig={detailsBg[0].config}>
<DetailScrollView> <DetailScrollView>
<div className='px-[120px] normal-text '>
<div className='px-28 normal-text'>
<TableHeader data={TableHeaderData}></TableHeader> <TableHeader data={TableHeaderData}></TableHeader>
<DetailsExceTable data={products} /> <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> </div>
</DetailScrollView> </DetailScrollView>
......
...@@ -27,7 +27,7 @@ const FeaturesGrid = ()=>{ ...@@ -27,7 +27,7 @@ const FeaturesGrid = ()=>{
<div className="featuresGrid"> <div className="featuresGrid">
{ {
data.map((i,index)=>( data.map((i,index)=>(
<div key={index} className='max-w-[320px] min-w-[280px] pb-[80px] pr-[90px]'> <div key={index} className='max-w-[320px] min-w-[280px] pb-[48px] mr-[90px]'>
<div className='title-2-cn'>{i.title}</div> <div className='title-2-cn'>{i.title}</div>
<div className='content-1-cn pt-[14px]'>{i.text}</div> <div className='content-1-cn pt-[14px]'>{i.text}</div>
</div> </div>
...@@ -43,9 +43,9 @@ export const Features = (props: FeaturesType)=>{ ...@@ -43,9 +43,9 @@ export const Features = (props: FeaturesType)=>{
return( return(
<AppContianer className='h-full'> <AppContianer className='h-full'>
<> <>
<div className='h-[100vh] -translate-y-[83px] absolute top-0 left-0 w-[60vw] bg-white/40 -z-[1]'></div> <div className='h-[100vh] min-w-[900px] -translate-y-[83px] absolute top-0 left-0 w-[60vw] bg-white/40 -z-[1]'></div>
<div className="flex items-center h-full"> <div className="flex items-center h-full pt-[40px]">
<div className="left w-8/12 h-full py-16"> <div className="left w-8/12 h-full ">
<div className="title-1-en"> <div className="title-1-en">
Functional Functional
<div className='title-1-en'> <div className='title-1-en'>
...@@ -57,21 +57,20 @@ export const Features = (props: FeaturesType)=>{ ...@@ -57,21 +57,20 @@ export const Features = (props: FeaturesType)=>{
<div>功能特点</div> <div>功能特点</div>
</div> </div>
<div className='content-1-cn'>一键部署多样化区块链网络</div> <div className='content-1-cn'>一键部署多样化区块链网络</div>
<div className='flex relative justify-end pt-[5rem]'> <div className='flex relative justify-start pt-[60px]'>
<FeaturesGrid></FeaturesGrid> <FeaturesGrid></FeaturesGrid>
</div> </div>
</div> </div>
<div className="right py-16 h-full w-4/12 px-[10%]"> <div className="right h-full w-4/12 px-[10%]">
<div className="flex-col justify-center "> <div className="flex-col justify-center ">
<div className='max-w-[320px] min-w-[280px]'> <div className='max-w-[320px] min-w-[280px]'>
<div className='title-2-cn'>弹性扩展</div> <div className='title-2-cn'>弹性扩展</div>
<div className='content-1-cn'>支持联盟节点动态增删</div> <div className='content-1-cn'>支持联盟节点动态增删</div>
</div> </div>
<div className='max-w-[320px] min-w-[280px] mt-[3rem]'> <div className='max-w-[320px] min-w-[280px] mt-[46px]'>
<div className='title-2-cn'>运维监控</div> <div className='title-2-cn'>运维监控</div>
<div className='content-1-cn'>支持区块链节点及硬件资源的实时监控</div> <div className='content-1-cn'>支持区块链节点及硬件资源的实时监控</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -11,7 +11,7 @@ export const HeroBaas = () => { ...@@ -11,7 +11,7 @@ export const HeroBaas = () => {
> >
Baas33 Baas33
</div> */} </div> */}
<img src={Baas33} className='min-w-[1200px] w-screen' /> <img src={Baas33} className='min-w-[1440px] 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>
......
import { IProps } from "@/common/Iprops.interface"; import { IProps } from "@/common/Iprops.interface";
import { VerticalText } from "@/components/VerticalText";
import { AppContianer } from "@/layouts/AppContianer";
import { CheckIcon } from '@heroicons/react/solid'
import { useNavigate} from 'react-router-dom'
interface ServiceType extends IProps{
}
// const VerticalText = (props: VerticalTextType)=>{ import { AppContianer } from "@/layouts/AppContianer";
// const {text,containerStyle,itemStyle} = props; import { CheckIcon } from "@heroicons/react/solid";
// const textArr = text.split('') import { useNavigate } from "react-router-dom";
// return( import trangle from "@/assets/svg/trangle.svg";
// <div className={`grid-cols-1 ${containerStyle}`}>
// {
// textArr&&textArr.map((i,index)=>(
// <div className={itemStyle} key={index}>
// {i}
// </div>
// ))
// }
// </div>
// )
// }
const ServiceList = ()=>{
const navigate = useNavigate()
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个']
},
] interface ServiceType extends IProps {}
const goDetails = (index: number)=>{
navigate('/details/'+index,{
replace:true
})
}
return(
<div className=' grid grid-cols-3 w-full -translate-y-[5vh]'>
{
data.map((i,index)=>(
<div key={index} onPointerDown={()=>goDetails(index)} className='relative cursor-pointer w-[290px] labtop:w-[340px] py-[40px] px-[40px] bg-white/40 h-[460px] rounded-[2.5rem] '>
<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 ' />
</div>
<div className='pl-3'>{k}</div>
</li>
))
}
</ul>
<div className='w-full absolute bottom-10 px-10 left-0 flex justify-between align-bottom items-baseline'>
<div className='des-cn font-bold cursor-pointer'>
<div>介绍详情</div>
</div>
<div className='des-cn font-bold text-theme-blue'>
<span className=' int-font-1 '>{i.price}</span>
<span>/年</span>
</div>
</div>
</div>
))
}
</div>
)
}
export const Service = (props: ServiceType)=>{ const ServiceList = () => {
return( const navigate = useNavigate();
<AppContianer className='h-full w-full '> const data = [
<div className=" relative w-full h-full"> {
<div className='center flex items-center h-full'> title: "BaaS试用版",
<ServiceList /> text: "开通试用版后,您可以在一个月内免费试用开发版的产品功能。",
</div> price: 0,
<div className=" absolute top-0 right-0 z-[200] pl-[3rem]"> features: [
<div className='flex pt-16 translate-x-12'> "支持发布合约类,工具类,应用类等应用",
<VerticalText text='服务版本' containerStyle="sub-title-cn py-5 px-5"/> "支持自动部署智能合约",
<VerticalText text='service' containerStyle="hero-title mt-6" itemStyle=" rotate-90 -my-[1.97rem]"/> "支持在线IDE,可以对EVM合约进行查看、编辑等",
</div> "提供存证服务安装包",
</div> ],
},
{
title: "BaaS企业版",
text: "支持中小企业联盟成员权重的可视化配置,助力企业轻松上链。",
price: 5998,
features: [
"支持一键快速构建联盟链、平行侧链等区块链网络",
"联盟链加平行链总数限制在3条",
"联盟链节点最多支持5个",
],
},
{
title: "BaaS开发版",
text: "为团队提供完备的服务可视化操作,实现业务快速上链。",
price: 7998,
features: [
"支持一键快速构建联盟链、平行侧链等区块链网络",
"联盟链加平行链总数限制在6条",
"联盟链节点最多支持7个",
],
},
];
const goDetails = (index: number) => {
navigate("/details/" + index, {
replace: true,
});
};
return (
<div className="grid grid-cols-3 w-full ">
{data.map((i, index) => (
<div
key={index}
onPointerDown={() => goDetails(index)}
className="relative cursor-pointer w-[300px] py-[40px] px-[40px] bg-white/40 h-[460px] rounded-[2.5rem] "
>
<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}>
<CheckIcon className="w-5 h-5 " />
<div className="pl-3">{k}</div>
</li>
))}
</ul>
<div className="w-full absolute bottom-10 px-10 left-0 flex justify-between align-bottom items-baseline">
<div className="des-cn font-bold cursor-pointer flex items-center gap-x-3">
<div>介绍详情</div>
<img src={trangle} className="w-2" />
</div> </div>
</AppContianer> <div className="des-cn font-bold text-theme-blue">
) <span className=" int-font-1 ">{i.price}</span>
<span>/年</span>
</div>
</div>
</div>
))}
</div>
);
};
} export const Service = (props: ServiceType) => {
\ No newline at end of file return (
<AppContianer className="h-full w-full labtop:px-[120px] ">
<div className=" flex relative w-full h-full">
<div className=" w-10/12 flex items-center h-full">
<ServiceList />
</div>
<div className="flex w-2/12 pt-[46px] pl-[20px]">
<div className="sub-title-cn verticalText">服务版本</div>
<div className="hero-title verticalText">Service</div>
</div>
</div>
</AppContianer>
);
};
...@@ -28,7 +28,7 @@ export default function Baas33 () { ...@@ -28,7 +28,7 @@ export default function Baas33 () {
<PageLayout ballConfig={baasBalls[0].setting}> <PageLayout ballConfig={baasBalls[0].setting}>
<> <>
<div className="translate-y-[8vh] relative"> <div className="translate-y-[8vh] relative">
<AppContianer className='z-[9999] labtop:px-28'> <AppContianer className='z-[9999] labtop:px-[120px]'>
<div> <div>
<div className="title-1-cn">复杂美区块链开放服务平台</div> <div className="title-1-cn">复杂美区块链开放服务平台</div>
......
...@@ -31,8 +31,8 @@ const HeroItem =(props: HeroItemType)=>{ ...@@ -31,8 +31,8 @@ const HeroItem =(props: HeroItemType)=>{
} }
},[order]) },[order])
return( return(
<div className={`flex min-h-[65vh] py-16 text-white justify-center <div className={`flex min-h-[750px] h-[85vh] w-[148px] py-16 text-white justify-center
${itemPosition?' items-start':' items-end'} ${itemPosition?'items-start':' items-end'}
`}> `}>
<div> <div>
<div className="hero font-sans font-extrabold text-9xl"> <div className="hero font-sans font-extrabold text-9xl">
...@@ -41,11 +41,11 @@ const HeroItem =(props: HeroItemType)=>{ ...@@ -41,11 +41,11 @@ const HeroItem =(props: HeroItemType)=>{
<div className="content-title-cn border-b-2 text-white w-[130px] my-3"> <div className="content-title-cn border-b-2 text-white w-[130px] my-3">
{subtitle} {subtitle}
</div> </div>
<div className=' w-[230px] normal-text text-white'> <div className=' normal-text text-white'>
{content} {content}
</div> </div>
</div> </div>
</div> </div>
) )
} }
...@@ -60,16 +60,15 @@ export default function Chain33() { ...@@ -60,16 +60,15 @@ export default function Chain33() {
<div className="vertival-content"> <div className="vertival-content">
<PageLayout> <PageLayout>
<div className="w-full h-full flex justify-center items-baseline overflow-hidden"> <div className="w-full h-full flex justify-center items-baseline overflow-hidden">
<div className="img-holder mx-auto w-[1200px] relative "> <div className="img-holder mx-auto w-[1440px] relative ">
<div className="absolute z-[999] w-full h-full flex items-center -translate-x-[5%] -translate-y-[15%] justify-center text-white"> <div className="absolute z-[999] w-full h-full flex items-center -translate-x-[5%] -translate-y-[15%] justify-center text-white">
<div> <div>
<div className="p-5 border-white border-[6px] rounded "> <div className="p-[42px] border-white border-[4px] rounded ">
<div className="super-hero-title py-5 tracking-widest font-bold"> <div className="super-hero-title py-5 tracking-widest">
Chain33 Chain33
</div> </div>
<div className="content-title-cn text-white pt-5 tracking-wide text-center"> <div className="title-1-cn text-white font-normal pt-5 tracking-wide text-center">
复杂美区块链开发者平台 复杂美区块链开发者平台
</div> </div>
</div> </div>
...@@ -89,16 +88,14 @@ export default function Chain33() { ...@@ -89,16 +88,14 @@ export default function Chain33() {
</div> </div>
</PageLayout> </PageLayout>
<PageLayout className=" bg-[#084DFF] flex items-center justify-center"> <PageLayout className=" bg-[#084DFF] flex items-center justify-center">
<AppContianer> <AppContianer className=''>
<div className="flex justify-between items-center gap-x-5 min-h-[750px]">
<div className="flex justify-between items-center pt-20 gap-x-5">
<HeroItem heroTitle="高" img={Gao} order={1} subtitle="高效" content="Chain33区块链中,交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem> <HeroItem heroTitle="高" img={Gao} order={1} subtitle="高效" content="Chain33区块链中,交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem>
<HeroItem heroTitle="安" img={An} order={2} subtitle="安全" content="Chain33区块链中,交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem> <HeroItem heroTitle="安" img={An} order={2} subtitle="安全" content="Chain33区块链中,交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem>
<HeroItem heroTitle="简" img={Jian} order={3} subtitle="简单" content="Chain33区块链中,交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem> <HeroItem heroTitle="简" img={Jian} order={3} subtitle="简单" content="Chain33区块链中,交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem>
<HeroItem heroTitle="稳" img={Weng} order={4} subtitle="稳定" content="Chain33区块链中,交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem> <HeroItem heroTitle="稳" img={Weng} order={4} subtitle="稳定" content="Chain33区块链中,交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem>
<HeroItem heroTitle="扩" img={Kuo} order={5} subtitle="高扩展性" content="Chain33区块链中,交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem> <HeroItem heroTitle="扩" img={Kuo} order={5} subtitle="高扩展性" content="Chain33区块链中,交易在主链上共识并存储。多条平行链同时处理交易效率大大提升。"></HeroItem>
</div> </div>
</AppContianer> </AppContianer>
</PageLayout> </PageLayout>
......
...@@ -34,10 +34,11 @@ export const DocViewer = (props:DocViewerType)=>{ ...@@ -34,10 +34,11 @@ export const DocViewer = (props:DocViewerType)=>{
return( return(
<PageLayout className='h-auto'> <PageLayout className='h-auto'>
<div> <div>
<div className={show?'visible px-28 pt-8 h-auto relative':' invisible'}> <div className={show?'visible px-[120px] pt-8 h-auto relative':' invisible'}>
<iframe <iframe
src={url} src={url}
id='iframe' id='iframe'
scrolling="no"
className='w-full overflow-y-hidden h-full' className='w-full overflow-y-hidden h-full'
style={{height:height}} style={{height:height}}
onLoad={(e)=>test(e)} onLoad={(e)=>test(e)}
......
...@@ -2,7 +2,8 @@ import { IProps } from "@/common/Iprops.interface"; ...@@ -2,7 +2,8 @@ import { IProps } from "@/common/Iprops.interface";
import { AppContianer } from "@/layouts/AppContianer"; import { AppContianer } from "@/layouts/AppContianer";
import { PageLayout } from "@/layouts/PageLayout"; import { PageLayout } from "@/layouts/PageLayout";
import { getNews, getNewsDetail } from "@/service/api"; import { getNews, getNewsDetail } from "@/service/api";
import { useEffect, useState } from "react"; import dayjs from "dayjs";
import { useCallback, useEffect, useState } from "react";
import { useParams } from "react-router"; 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";
...@@ -31,6 +32,18 @@ export const NewsDetails = (props:NewsDetailsType)=>{ ...@@ -31,6 +32,18 @@ export const NewsDetails = (props:NewsDetailsType)=>{
setLatestNews(output) setLatestNews(output)
}) })
},[]) },[])
const getDate = (time: number) => {
const d = dayjs.unix(Math.floor(time/1000) )
return {
year: d.year().toString(),
day: d.date(),
month: d.month()+1>10?d.month()+1:"0"+(d.month()+1)
};
};
const useDate = useCallback((time: number)=>getDate(time),[params])
return( return(
<PageLayout className=" overflow-y-scroll"> <PageLayout className=" overflow-y-scroll">
<AppContianer> <AppContianer>
...@@ -43,8 +56,8 @@ export const NewsDetails = (props:NewsDetailsType)=>{ ...@@ -43,8 +56,8 @@ export const NewsDetails = (props:NewsDetailsType)=>{
</div> </div>
<div className='py-5'> <div className='py-5'>
<div>- 日期 -</div> <div>- 日期 -</div>
<div className=' hero-title'>18</div> <div className=' hero-title'>{useDate(data&&data.time_stamp).day}</div>
<div className='content-sub-title-cn'>2021/08</div> <div className='content-sub-title-cn'>{useDate(data&&data.time_stamp).year}/{useDate(data&&data.time_stamp).month}</div>
</div> </div>
<div className='py-5'> <div className='py-5'>
<div>- 作者 -</div> <div>- 作者 -</div>
...@@ -53,7 +66,7 @@ export const NewsDetails = (props:NewsDetailsType)=>{ ...@@ -53,7 +66,7 @@ export const NewsDetails = (props:NewsDetailsType)=>{
</div> </div>
</div> </div>
<div className="w-8/12"> <div className="w-8/12">
<div className='richRender pt-5 px-20'> <div className='richRender pt-5 px-20 pb-24'>
<div className='title-1-cn'>{data&&data.title}</div> <div className='title-1-cn'>{data&&data.title}</div>
<div dangerouslySetInnerHTML={{__html:data&&data.content}} className="py-5"></div> <div dangerouslySetInnerHTML={{__html:data&&data.content}} className="py-5"></div>
</div> </div>
......
...@@ -36,7 +36,7 @@ export default function News(props: IAppProps) { ...@@ -36,7 +36,7 @@ export default function News(props: IAppProps) {
return { return {
year: d.year().toString(), year: d.year().toString(),
day: d.date(), day: d.date(),
month: d.month()+1>10?d.month():"0"+d.month() month: d.month()+1>10?d.month()+1:"0"+(d.month()+1)
}; };
}; };
......
...@@ -4,6 +4,13 @@ interface ImportMetaEnv { ...@@ -4,6 +4,13 @@ interface ImportMetaEnv {
readonly VITE_CHAIN33_DOC: string readonly VITE_CHAIN33_DOC: string
readonly VITE_BAAS33_DOC: string readonly VITE_BAAS33_DOC: string
// more env variables... // more env variables...
readonly VITE_SLC:string
readonly VITE_SLG:string
readonly VITE_LZB:string
readonly VITE_CHAIN33_GIT:string
readonly VITE_CHAIN33_DOWNLOAD:string
} }
interface ImportMeta { interface ImportMeta {
......
...@@ -17,7 +17,7 @@ module.exports = withAnimations({ ...@@ -17,7 +17,7 @@ module.exports = withAnimations({
screens:{ screens:{
'moblie':"640px", 'moblie':"640px",
'table':"961px", 'table':"961px",
"labtop":"1520px", "labtop":"1920px",
"screen":"2881px", "screen":"2881px",
} }
}, },
......
...@@ -297,6 +297,33 @@ ...@@ -297,6 +297,33 @@
dependencies: dependencies:
"@better-scroll/core" "^2.4.2" "@better-scroll/core" "^2.4.2"
"@floating-ui/core@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.0.0.tgz#ec1d31f54c72dd0460276e2149e59bd13c0f01f6"
integrity sha512-sm3nW0hHAxTv3gRDdCH8rNVQxijF+qPFo5gAeXCErRjKC7Qc28lIQ3R9Vd7Gw+KgwfA7RhRydDFuGeI0peGq7A==
"@floating-ui/dom@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@floating-ui/dom/-/dom-1.0.0.tgz#66923a56755b6cb7a5958ecf25fe293912672d65"
integrity sha512-PMqJvY5Fae8HVQgUqM+lidprS6p9LSvB0AUhCdYKqr3YCaV+WaWCeVNBtXPRY2YIdrgcsL2+vd5F07FxgihHUw==
dependencies:
"@floating-ui/core" "^1.0.0"
"@floating-ui/react-dom-interactions@^0.9.1":
version "0.9.1"
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom-interactions/-/react-dom-interactions-0.9.1.tgz#93f17ed89b664795251ce5a2f228c50fc8ada059"
integrity sha512-LNWB7FvGn/mI4Gw4DKbt/VblEhQOe3LUljBwp6BayFC2hEe+vhUMq2ExPFwMkgpKpoZVQPRYU8ejCKffBY5UMQ==
dependencies:
"@floating-ui/react-dom" "^1.0.0"
aria-hidden "^1.1.3"
"@floating-ui/react-dom@^1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@floating-ui/react-dom/-/react-dom-1.0.0.tgz#e0975966694433f1f0abffeee5d8e6bb69b7d16e"
integrity sha512-uiOalFKPG937UCLm42RxjESTWUVpbbatvlphQAU6bsv+ence6IoVG8JOUZcy8eW81NkU+Idiwvx10WFLmR4MIg==
dependencies:
"@floating-ui/dom" "^1.0.0"
"@heroicons/react@^1.0.6": "@heroicons/react@^1.0.6":
version "1.0.6" version "1.0.6"
resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.6.tgz#35dd26987228b39ef2316db3b1245c42eb19e324" resolved "https://registry.yarnpkg.com/@heroicons/react/-/react-1.0.6.tgz#35dd26987228b39ef2316db3b1245c42eb19e324"
...@@ -499,6 +526,13 @@ arg@^5.0.1: ...@@ -499,6 +526,13 @@ arg@^5.0.1:
resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.1.tgz#eb0c9a8f77786cad2af8ff2b862899842d7b6adb" resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.1.tgz#eb0c9a8f77786cad2af8ff2b862899842d7b6adb"
integrity sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA== integrity sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==
aria-hidden@^1.1.3:
version "1.1.3"
resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.1.3.tgz#bb48de18dc84787a3c6eee113709c473c64ec254"
integrity sha512-RhVWFtKH5BiGMycI72q2RAFMLQi8JP9bLuQXgR5a8Znp7P5KOIADSJeyfI8PCVxLEp067B2HbP5JIiI/PXIZeA==
dependencies:
tslib "^1.0.0"
asynckit@^0.4.0: asynckit@^0.4.0:
version "0.4.0" version "0.4.0"
resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
...@@ -1332,6 +1366,11 @@ to-regex-range@^5.0.1: ...@@ -1332,6 +1366,11 @@ to-regex-range@^5.0.1:
dependencies: dependencies:
is-number "^7.0.0" is-number "^7.0.0"
tslib@^1.0.0:
version "1.14.1"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
tslib@^2.1.0: tslib@^2.1.0:
version "2.4.0" version "2.4.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
......
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