Skip to content

W
web2022
Commit 7e0799c3 authored by mxm-web-develop's avatar mxm-web-develop
Browse files
Options

321

parent f91add5e
Hide whitespace changes
Inline Side-by-side
Showing with 326 additions and 130 deletions
.env.development
View file @ 7e0799c3
NODE_ENV=dev
VITE_FETCH_URL = http://121.40.18.70:3333/
\ No newline at end of file
VITE_FETCH_URL = http://121.40.18.70:3333/
VITE_CHAIN33_DOC = "http://121.40.18.70:3335/guide/"
VITE_BAAS33_DOC = "http://192.168.31.12:3336"
\ No newline at end of file
env.production
View file @ 7e0799c3
NODE_ENV=prod
VITE_FETCH_URL = http://localhost:3333
\ No newline at end of file
VITE_FETCH_URL = http://121.40.18.70:3333/
VITE_CHAIN33_DOC = "http://121.40.18.70:3335/guide"
VITE_BAAS33_DOC = "http://192.168.31.12:3336/guide/intro/Bass.html"
\ No newline at end of file
src/App.tsx
View file @ 7e0799c3
......@@ -11,6 +11,7 @@ import Cooperation from './views/Cooperation'
import { Details } from './views/Baas33/Dtails';
import {NewsDetails} from './views/News/NewsDetails'
import {Classes} from './views/Classes'
import {DocViewer} from './views/DocViewer'
// import News from './views/News';
const News = React.lazy(()=>import('./views/News'))
const Loading=()=>{
......@@ -37,8 +38,9 @@ export function App () {
</React.Suspense>
}
/>
<Route element={<MxmRoute meta={{name:'文档'}}><DocViewer /></MxmRoute>} path='/docs/: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>
</>
......
src/components/StyledButton.tsx
View file @ 7e0799c3
......@@ -5,11 +5,11 @@ import { useMemo } from 'react';
export interface StyledButtonType extends IProps {
text: string;
color?: string;
action?: ()=>any;
onClick?: ()=>any;
}
export default function StyledButton (props: StyledButtonType) {
const { text, color,className } = props;
const { text, color,className,onClick } = props;
const colorIs = color?color:'white'
const colorStyle = useMemo(()=>{
switch (colorIs) {
......@@ -42,6 +42,7 @@ export default function StyledButton (props: StyledButtonType) {
color:colorStyle.text,
backgroundColor:colorStyle.bgColor
}}
onClick={onClick}
>
{text}
</button>
......
src/config/ballSetting.ts
View file @ 7e0799c3
......@@ -3,8 +3,8 @@ export const baasBalls = [
page:0,
setting: [
{
size: "10%",
position: ["-50px", "55%"],
size: "11%",
position: ["-50px", "48%"],
rotation: "210",
zIndex: "9999",
color: "blue",
......@@ -12,7 +12,7 @@ export const baasBalls = [
{
size: "25%",
align: "right",
position: ["-85px", "20%"],
position: ["-3%", "20%"],
zIndex: "-999",
color: "blue",
},
......@@ -48,8 +48,8 @@ export const baasBalls = [
page:2,
setting:[
{
size: "15%",
position: ["5%", "55%"],
size: "12%",
position: ["14%", "55%"],
rotation: "210",
zIndex: "9999",
color: "blue"
......@@ -57,7 +57,7 @@ export const baasBalls = [
{
size: "20%",
align: "right",
position: ["-5%", "10%"],
position: ["-10%", "10%"],
zIndex: "999",
color: "white",
}
......@@ -84,6 +84,7 @@ export const baasBalls = [
}
]
export const detailsBalls=[
{
page: 0,
......@@ -92,6 +93,47 @@ export const detailsBalls=[
size: "10%",
position: ["-50px", "75%"],
rotation: "210",
zIndex: "-999",
color: "blue",
},
{
size: "14%",
align: "right",
position: ["-4%", "5%"],
zIndex: "-1",
color: "white",
},
]
}
]
export const aboutBalls=[
{
page:0,
setting: [
{
size: "8%",
position: ["12%", "54%"],
rotation: "210",
zIndex: "9999",
color: "blue",
},
{
size: "15%",
align: "right",
position: ["-85px", "12%"],
zIndex: "-999",
color: "white",
},
]
},
{
page: 1,
setting: [
{
size: "10%",
position: ["-50px", "75%"],
rotation: "210",
zIndex: "9999",
color: "white",
},
......@@ -103,5 +145,43 @@ export const detailsBalls=[
color: "blue",
},
]
},
{
page:2,
setting:[
{
size: "12%",
position: ["-3%", "55%"],
rotation: "210",
zIndex: "-19",
color: "white"
},
{
size: "18%",
align: "right",
position: ["-5%", "25%"],
zIndex: "-999",
color: "blue",
}
]
},
{
page:3,
setting:[
{
size: "10%",
position: ["-1%", "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
View file @ 7e0799c3
......@@ -7,22 +7,22 @@ export const baasBg = [
page:1,
config:[
{
size: ["60%","45%"],
size: ["30%","55%"],
position: ["10%", "35%"],
align:'left',
zIndex: "-99",
rotation:'180',
rotation:'90',
color: "cyan",
blur:'100px'
blur:'30px'
},
{
size:[ "80%",'45%'],
align: "left",
position: ["85px", "13%"],
size:[ "70%",'550px'],
align: "right",
position: ["28%", "8%"],
rotation:'-0',
zIndex: "-180",
color: "blue",
blur:'150px'
blur:'50px'
}
]
},
......
src/layouts/AppContianer.tsx
View file @ 7e0799c3
......@@ -10,7 +10,7 @@ interface AppContianerType extends IProps{
export const AppContianer=(props:AppContianerType)=>{
const {children,bgColor,className} = props
return(
<div className={` px-28 min-w-[1200px] labtop:px-[16rem] relative w-full ${className?className:''}`}>
<div className={`px-28 min-w-[1200px] labtop:px-[16rem] relative w-full ${className?className:''}`}>
{children}
</div>
)
......
src/style.css
View file @ 7e0799c3
......@@ -7,6 +7,30 @@
}
@layer components{
.title-1-cn{
@apply text-theme-dark text-[40px] tracking-[2px] font-[900] font-['arial'] leading-[56px]
}
.title-2-cn{
@apply text-theme-dark text-[24px] tracking-[1px] font-[800] font-['arial'] leading-[33px]
}
.subTitle-1-cn{
@apply text-theme-dark text-[30px] tracking-[1px] font-[800] font-['arial'] leading-[42px]
}
.content-1-cn{
@apply text-theme-dark text-[14px] tracking-[1px] font-[400] font-['arial'] leading-[20px]
}
.title-1-en{
@apply text-[#061E3B] font-galano text-[90px] leading-[90px] font-[800] tracking-[6px]
}
.hero-title{
@apply text-theme-dark text-[78px] labtop:text-[68px] screen:text-[90px] tracking-wider font-bold font-galano leading-[90px]
}
......
src/views/About/Contact/index.tsx
View file @ 7e0799c3
import { IProps } from "@/common/Iprops.interface";
import { AppContianer } from "@/layouts/AppContianer";
interface ContactType extends IProps {
}
interface ContactType extends IProps {}
const Tels = () => {
const telInfo = [
{
location: '成都总部',
tel: '0571-8167-1366'
location: "成都总部",
tel: "0571-8167-1366",
},
{
location: '成都总部',
tel: '0571-8167-1366'
location: "成都总部",
tel: "0571-8167-1366",
},
{
location: '成都总部',
tel: '0571-8167-1366'
}
]
location: "成都总部",
tel: "0571-8167-1366",
},
];
return (
<div className=" grid grid-cols-2">
{telInfo.map((tel, index) => {
......@@ -29,57 +26,71 @@ const Tels = () => {
<div>{tel.location}</div>
<div>{tel.tel}</div>
</div>
)
);
})}
</div>
)
}
);
};
const data = [
{
location: '杭州总部',
tel: '0571-8167-1366'
location: "杭州总部",
tel: "0571-8167-1366",
},
{
location: '广州分部',
tel: '17706425022'
location: "广州分部",
tel: "17706425022",
},
{
location: '上海分部',
tel: '135-8800-1627'
location: "上海分部",
tel: "135-8800-1627",
},
{
location: '南京分部',
tel: '135-5811-2690'
}
]
location: "南京分部",
tel: "135-5811-2690",
},
];
export const Contact = () => {
return (
<AppContianer className='flex items-center justify-center'>
<div className='-translate-x-[5vw]'>
<div className="py-12">
<div className="hero-title">Contact us</div>
<div className="sub-title-cn">联系我们</div>
</div>
<AppContianer className="flex items-center justify-center">
<div className="-translate-x-[5vw]">
<div className="py-12">
<div className="hero-title">Contact us</div>
<div className="sub-title-cn">联系我们</div>
</div>
<div className="grid grid-cols-2 gap-[2rem] pb-12">
{data.map((i, index) => (
<div className="item" key={index}>
<div>{i.location}</div>
<div className=" text-2xl font-extrabold">{i.tel}</div>
</div>
))}
</div>
<div className='grid grid-cols-2 gap-[2rem] pb-12'>
{
data.map((i,index)=>(
<div className='item' key={index}>
<div>{i.location}</div>
<div className=' text-2xl font-extrabold'>{i.tel}</div>
<div className="item">
<div>邮箱</div>
<div className=" text-2xl font-extrabold">support@33.cn</div>
</div>
<div className="locations flex justify-between pt-12">
<div className="item flex-col">
<div className='sub-title-cn'>杭州西湖区办公室</div>
<div className='py-3'>
<div>浙江省杭州市西湖区</div>
<div>文三路90号</div>
<div>东部软件园科技大厦7楼</div>
</div>
</div>
))
}
</div>
<div>
<div className='item'>
<div>邮箱</div>
<div className=' text-2xl font-extrabold'>support@33.cn</div>
<div className="item flex-col">
<div className='sub-title-cn'>杭州滨江办公室</div>
<div className='py-3'>
<div>浙江省杭州市滨江区</div>
<div>东方通信科技城</div>
</div>
</div>
</div>
</div>
</div>
</AppContianer>
)
}
\ No newline at end of file
);
};
src/views/About/JoinUs/index.tsx
View file @ 7e0799c3
......@@ -85,6 +85,13 @@ const DtailContainer = (props: DtailContainerType) => {
</div>
);
};
const departments = [
'技术部门',
'运营部门',
'人事部门',
'商务部门',
'设计部门'
]
export const JoinUs = () => {
const [data, setData] = useState<any[]>();
......@@ -103,20 +110,7 @@ export const JoinUs = () => {
setSelecteData(res);
})();
}, [activedDepartment]);
const departments = useMemo(() => {
if (data) {
return data.reduce((list, item) => {
if (list.includes(item["department"])) {
return list;
} else {
list.push(item["department"]);
return list;
}
}, []);
} else {
return [];
}
}, [data]);
const selectedItem = useMemo(() => {
return data?.filter((i) => i.id === selecteItem)[0];
}, [selecteItem]);
......
src/views/About/index.tsx
View file @ 7e0799c3
......@@ -8,7 +8,7 @@ import { Contact } from "./Contact";
import { Partners } from "./Partners";
import { Memorabilia } from "./Memorabilia";
import { JoinUs } from "./JoinUs";
import { baasBalls } from "@/config/ballSetting";
import { aboutBalls } from "@/config/ballSetting";
import { baasBg } from "@/config/bgSetting";
const Description = () => {
......@@ -92,7 +92,7 @@ export default function About(props: any) {
<ScrollView>
<div className="vertival-content ">
<PageLayout
ballConfig={baasBalls[1].setting}
ballConfig={aboutBalls[0].setting}
gradientConfig={baasBg[1].config}
>
<AppContianer className="h-full -translate-y-[5rem]">
......@@ -107,24 +107,24 @@ export default function About(props: any) {
</AppContianer>
</PageLayout>
{/* <PageLayout ballConfig={baasBalls[1].setting}
{/* <PageLayout ballConfig={aboutBalls[1].setting}
gradientConfig={baasBg[1].config}>
<Memorabilia />
</PageLayout> */}
<PageLayout ballConfig={baasBalls[1].setting}
<PageLayout ballConfig={aboutBalls[2].setting}
gradientConfig={baasBg[1].config}>
<AppContianer>
<JoinUs />
</AppContianer>
</PageLayout>
<PageLayout ballConfig={baasBalls[1].setting}
<PageLayout ballConfig={aboutBalls[3].setting}
gradientConfig={baasBg[1].config}>
<Contact />
</PageLayout>
<PageLayout ballConfig={baasBalls[1].setting}
<PageLayout ballConfig={aboutBalls[3].setting}
gradientConfig={baasBg[1].config}>
<Partners />
</PageLayout>
......
src/views/Baas33/Advantages/index.tsx
View file @ 7e0799c3
......@@ -27,10 +27,10 @@ const AdvantagesList = ()=>{
<div className='flex flex-col gap-y-[2.5rem] mt-[10vh]'>
{
data.map((i,index)=>(
<div key={index} className='relative '>
<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 key={index} className='relative my-5'>
<span className='absolute title-1-cn text-[90px] -top-[1.5rem] -left-[2rem] opacity-10'>{index+1}</span>
<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>
))
}
......@@ -45,23 +45,30 @@ export const Advantages = (props: AdvantagesType)=>{
<AppContianer className='h-full'>
<div className="flex h-full items-center gap-x-[10vw] -translate-y-[15vh]">
<div className="left">
<div className="sub-title-cn">
功能特点
<div className="title-2-cn">
<div className="subTitle-1-cn py-3 flex items-center gap-x-5">
<div className=" w-28 h-1 bg-theme-dark rounded"></div>
<div>平台优势</div>
</div>
<div className="hero-title py-5">
</div>
<div className="title-1-en py-5">
Platform
<div>
Advantages
</div>
</div>
<div className='normal-text pt-5'>打造低成本、高性能、更可靠的区块链技术平台</div>
<div className='content-1-cn pt-5'>打造低成本、高性能、更可靠的区块链技术平台</div>
<div className='flex relative justify-end pt-[8rem]'>
</div>
</div>
<div className="right">
<div className='translate-y-[6.5rem]'>
<AdvantagesList />
</div>
</div>
</div>
</AppContianer>
......
src/views/Baas33/Dtails.tsx
View file @ 7e0799c3
......@@ -18,13 +18,13 @@ const TableHeader = (props:TableHeader)=>{
const {data} = props
return(
<div className='pt-5 pb-10'>
<div className='sub-title-cn '>{data.title}</div>
<div className='subTitle-1-cn mb-[30px]'>{data.title}</div>
<div className='flex justify-between'>
{
data.features.map((i:any,index:number)=>(
<div className='item' key={index}>
<div className='content-title-cn'>{i.title}</div>
<div className='normal-text'>{i.context}</div>
<div className='item max-w-[284px]' key={index}>
<div className='title-2-cn'>{i.title}</div>
<div className='normal-text pt-[10px]'>{i.context}</div>
</div>
))
}
......@@ -45,7 +45,7 @@ export const Details = (props:DetailsType)=>{
}
},[id])
const TableHeaderData = useMemo(() => {
let title ='试用版';
let title ='Baas33试用版';
let features =[
{
title:'快速构建',
......@@ -56,10 +56,10 @@ export const Details = (props:DetailsType)=>{
]
switch (id){
case "1":
title = '企业版';
title = 'Baas33企业版';
break;
case "2":
title = '开发版';
title = 'Baas33开发版';
break;
}
return{
......
src/views/Baas33/Features/index.tsx
View file @ 7e0799c3
......@@ -27,9 +27,9 @@ const FeaturesGrid = ()=>{
<div className="featuresGrid">
{
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 key={index} className='max-w-[320px] min-w-[280px] pb-[80px] pr-[90px]'>
<div className='title-2-cn'>{i.title}</div>
<div className='content-1-cn pt-[14px]'>{i.text}</div>
</div>
))
}
......@@ -44,16 +44,17 @@ export const Features = (props: FeaturesType)=>{
<AppContianer className='h-full'>
<div className="flex items-center h-full">
<div className="left w-8/12 h-full py-16">
<div className="hero-title">
<div className="title-1-en">
Functional
<div className='clip-title'>
<div className='title-1-en'>
Features
</div>
</div>
<div className="sub-title-cn">
功能特点
<div className="subTitle-1-cn py-3 flex items-center gap-x-5">
<div className=" w-28 h-1 bg-theme-dark rounded"></div>
<div>功能特点</div>
</div>
<div className='des-cn'>一键部署多样化区块链网络</div>
<div className='content-1-cn'>一键部署多样化区块链网络</div>
<div className='flex relative justify-end pt-[5rem]'>
<FeaturesGrid></FeaturesGrid>
</div>
......@@ -61,12 +62,12 @@ export const Features = (props: FeaturesType)=>{
<div className="right py-16 h-full 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 className='title-2-cn'>弹性扩展</div>
<div className='content-1-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 className='title-2-cn'>运维监控</div>
<div className='content-1-cn'>支持区块链节点及硬件资源的实时监控</div>
</div>
</div>
......
src/views/Baas33/HeroBaas.tsx
View file @ 7e0799c3
import Baas33 from '@/assets/img/baas33.png'
export const HeroBaas = () => {
return (
<div className="
w-screen
h-full flex-col items-center justify-center translate-y-[20vh] table:-translate-y-[2vh]
labtop:-translate-y-[3vh]">
<div
<div className=" h-full flex-col items-center justify-center ">
{/* <div
className="hero-baas
-translate-x-[18rem]
text-[32rem]
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] "
font-galano p-0 font-[500] "
>
Baas33
</div>
<div className="text-center table:-translate-y-[10vh] flex justify-center gap-x-20 sub-title-cn">
</div> */}
<img src={Baas33} className='min-w-[1200px] w-screen' />
<div className=" flex justify-center gap-x-20 sub-title-cn">
<div>高效</div>
<div>稳定</div>
<div>低成本</div>
......
src/views/Baas33/Service/index.tsx
View file @ 7e0799c3
......@@ -54,10 +54,7 @@ const ServiceList = ()=>{
<div className=' px-8 grid grid-cols-3 gap-x-[3rem] -translate-y-[5vh]'>
{
data.map((i,index)=>(
<div key={index} className='relative py-8 px-10
ring-4 ring-white/40 ring-inset
backdrop-blur-lg shadow-lg bg-white/50
min-w-[340px] max-w-[420px] h-[460px] rounded-[3.5rem] '>
<div key={index} className='relative py-8 px-10 bg-white/40 min-w-[340px] max-w-[420px] h-[460px] rounded-[3.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'>
......
src/views/Chain33/index.tsx
View file @ 7e0799c3
......@@ -12,6 +12,7 @@ import Jian from '@/assets/img/jian.png'
import Kuo from '@/assets/img/kuo.png'
import Weng from '@/assets/img/weng.png'
import An from '@/assets/img/an.png'
import { useNavigate } from "react-router";
interface HeroItemType extends IProps{
heroTitle: string;
subtitle:string;
......@@ -48,6 +49,7 @@ const HeroItem =(props: HeroItemType)=>{
}
export default function Chain33() {
const navigate = useNavigate()
return (
<ScrollView>
<div className="vertival-content">
......@@ -67,7 +69,7 @@ export default function Chain33() {
<div className='pt-16 flex justify-center items-center gap-x-3'>
<StyledButton text='开源社区'></StyledButton>
<StyledButton text='资源下载'></StyledButton>
<StyledButton text='立即上手' color="black"></StyledButton>
<StyledButton text='立即上手' color="black" onClick={()=>navigate('/docs/2')}></StyledButton>
</div>
</div>
</div>
......
src/views/DocViewer/index.tsx 0 → 100644
View file @ 7e0799c3
import { IProps } from "@/common/Iprops.interface"
import { AppContianer } from "@/layouts/AppContianer"
import { PageLayout } from "@/layouts/PageLayout"
import { useEffect, useRef, useState } from "react"
import { useParams } from "react-router"
import {of,fromEvent,filter, map} from 'rxjs'
interface DocViewerType extends IProps{}
export const DocViewer = (props:DocViewerType)=>{
const params = useParams()
const url =params['id']=== "1"? import.meta.env.VITE_BAAS33_DOC: import.meta.env.VITE_CHAIN33_DOC
const viewer = useRef<HTMLIFrameElement>(null)
const [show,setShow] = useState(false)
const [height,setHeight] = useState(0)
useEffect(()=>{
const target = viewer.current as HTMLIFrameElement
const Ob = fromEvent<MessageEvent>(window,'message')
.pipe(filter((messageEvent: MessageEvent) => messageEvent.origin === url),map((msg:MessageEvent)=>msg.data))
const sub = Ob.subscribe((v)=>{
setHeight(v.height+200)
})
return(()=>{
sub.remove(sub)
})
},[])
const test =(e:any)=>{
const target = document.querySelector('#iframe') as HTMLIFrameElement
if(target){
setShow(true)
// window.addEventListener('message',(e)=>{
// console.log(e);
// },false)
if(target.contentWindow&&target.contentWindow.top&&target.contentWindow.top.innerHeight){
const ob = of(target.contentWindow.top.innerHeight)
ob.subscribe((v)=>{
setHeight(v+200)
})
}
}
}
return(
<PageLayout className='h-auto'>
<div>
<div className={show?'visible px-28 pt-8 h-auto relative':' invisible'}>
<iframe
src={url}
id='iframe'
className='w-full overflow-y-hidden h-full'
style={{height:height}}
onLoad={(e)=>test(e)}
ref={viewer}></iframe>
</div>
{
show?'':<div className='text-center'>Loading...</div>
}
</div>
</PageLayout>
)
}
\ No newline at end of file
src/vite-env.d.ts
View file @ 7e0799c3
/// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_FETCH_URL: string
readonly VITE_CHAIN33_DOC: string
readonly VITE_BAAS33_DOC: string
// more env variables...
}
......
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