Skip to content

W
web2022
Commit 40ea0dbf authored by mxm-web-develop's avatar mxm-web-develop
Browse files
Options

321

parent 9dd76b23
Hide whitespace changes
Inline Side-by-side
Showing with 130 additions and 81 deletions
.env.development
View file @ 40ea0dbf
NODE_ENV=dev
VITE_FETCH_URL = http://localhost:3333/
VITE_CHAIN33_DOC = "http://localhost:3335"
VITE_BAAS33_DOC = "http://localhost:3336"
VITE_FETCH_URL = http://192.168.23.80:3333/
VITE_CHAIN33_DOC = "http://192.168.23.80:3335"
VITE_BAAS33_DOC = "http://192.168.23.80:3336"
VITE_NEWS_API = "'https://33.cn/api/"
\ No newline at end of file
package.json
View file @ 40ea0dbf
......@@ -18,6 +18,7 @@
"@heroicons/react": "^1.0.6",
"ahooks": "^3.4.1",
"axios": "^0.27.2",
"dayjs": "^1.11.4",
"gsap": "^3.10.4",
"jquery": "^3.6.0",
"lodash": "^4.17.21",
......
src/components/Animations.tsx 0 → 100644
View file @ 40ea0dbf
export const ListStaggering = ()=>{
}
\ No newline at end of file
src/components/EventsScrollView.tsx
View file @ 40ea0dbf
......@@ -24,11 +24,10 @@ const initBScroll = (el:HTMLElement) => {
threshold: 100,
autoplay:true,
startPageYIndex:0,
loop:false,
loop:true,
},
probeType:2,
nestedScroll: true,
// 显示滚动条,
useTransition:true,
scrollX: true,
......
src/components/HoverBox.tsx
View file @ 40ea0dbf
......@@ -10,11 +10,11 @@ export default function HoverBox (props: HoverBoxType) {
const item = useRef(null)
const {children, className} = props;
return (
<li
<div
ref={item}
className={" hoverGlass " + " " +className }
className={`hoverGlass ${className&&className} `}
>
{children}
</li>
</div>
);
}
src/components/LazyImg.tsx
View file @ 40ea0dbf
......@@ -3,10 +3,11 @@ import { useEffect, useRef, useState } from "react"
import {gsap} from 'gsap'
interface LazyImgType extends IProps{
img:any
animate?:string
}
export const LazyImg =(props:LazyImgType)=>{
const {img,className}=props
const {img,className,animate}=props
const [show,setShow] = useState(false)
const imgbox = useRef(null)
const loaded = (e:any)=>{
......@@ -15,9 +16,20 @@ export const LazyImg =(props:LazyImgType)=>{
}
}
useEffect(()=>{
gsap.from(imgbox.current,{opacity:0,y:300,duration:0.8})
switch(animate){
case 'contact':
gsap.from(imgbox.current,{opacity:0,x:-300,duration:0.6})
break;
case 'baas33':
gsap.from(imgbox.current,{opacity:0.1,duration:0.6})
break;
default:
gsap.from(imgbox.current,{opacity:0,y:300,duration:0.8})
break
}
},[])
return(
<img src={img} ref={imgbox} className={`${show?" visible":" invisible"} ${className}`} onLoad={loaded}/>
<img src={img} ref={imgbox} className={`${show?" visible opacity-100":" invisible"} ${className}`} onLoad={loaded}/>
)
}
\ No newline at end of file
src/components/Navbar/index.tsx
View file @ 40ea0dbf
......@@ -10,7 +10,7 @@ const HoverLink = () =>{
const [onHover,setOnHover] =useState(false);
return (
<div
className='relative'
className='relative content-1-cn text-slate-400'
onPointerEnter={()=>setOnHover(true)}
onPointerLeave={()=>setOnHover(false)}
>
......@@ -25,12 +25,12 @@ const HoverLink = () =>{
animate-fadeIn
animate-alternate
animate-fill-both
bg-opacity-75
bg-opacity-25
-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 className='my-[8px] cursor-pointer hover:text-theme-blue'>上链查</div>
<div className='my-[8px] cursor-pointer hover:text-theme-blue'>上链购</div>
<div className='my-[8px] cursor-pointer hover:text-theme-blue'>链证宝</div>
</div>
</div>
:''
......@@ -48,7 +48,7 @@ export default function Navbar (props: IAppProps) {
<div className='left '>
<img src={Logo} alt="" />
</div>
<div className='right 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='chain33' className={`hover:text-black ${pathname ==='/chain33'?'text-black':'text-slate-400'}`}>Chain33</Link>
<HoverLink />
......
src/components/ScrollView.tsx
View file @ 40ea0dbf
......@@ -7,9 +7,10 @@ import MouseWheel from "@better-scroll/mouse-wheel";
import ScrollBar from "@better-scroll/scroll-bar";
import Slide from "@better-scroll/slide";
import NestedScroll from '@better-scroll/nested-scroll'
import ContactImg from '@/assets/img/contact.png'
import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
import { LazyImg } from "./LazyImg";
interface ScrollViewType extends IProps {
wrapHeight?: string;
prop?: any;
......@@ -131,6 +132,11 @@ export const ScrollView = (props: ScrollViewType) => {
{children}
</div>
<Dots dotNumber={dots} currentPage={currentPage} pageMove={pageMoving}/>
<LazyImg
img={ContactImg}
animate='contact'
className='absolute bottom-[20px] right-[100px] w-[234px]'
></LazyImg>
</div>
);
};
src/components/StyledButton.tsx
View file @ 40ea0dbf
......@@ -37,7 +37,7 @@ export default function StyledButton (props: StyledButtonType) {
},[colorIs])
return (
<button
className={`text-sm py-2 tracking-widest cursor-pointer rounded-full px-8 ${className?className:''}`}
className={`normal-text py-2 tracking-widest cursor-pointer rounded-full px-8 ${className?className:''}`}
style={{
color:colorStyle.text,
backgroundColor:colorStyle.bgColor
......
src/style.css
View file @ 40ea0dbf
......@@ -7,6 +7,9 @@
}
@layer components{
.super-hero-title{
@apply text-white text-[135px] tracking-wider font-bold font-sans leading-[90px]
}
.hero-title{
@apply text-theme-dark text-[90px] tracking-wider font-[400] font-galano leading-[90px]
}
......@@ -35,7 +38,7 @@
@apply font-bebas text-[40px] font-[400]
}
.int-font-hero{
@apply font-bebas font-[700] text-[90px] ml-[25px] tracking-widest leading-[91px]
@apply font-bebas font-[700] text-[90px] ml-[5px] text-right tracking-widest leading-[91px]
}
.int-font-sub{
@apply font-bebas font-[700] text-[20px] ml-[25px] tracking-widest leading-[20px]
......@@ -55,6 +58,9 @@
.content-sub2-title-cn{
@apply text-theme-dark text-[16px] tracking-wide font-cnnote font-bold py-3
}
.normal-content{
@apply text-theme-dark text-[14px] tracking-wide font-cnnote font-normal
}
.normal-text{
@apply text-theme-dark text-[12px] tracking-wide font-cnnote font-normal
}
......@@ -66,6 +72,7 @@
}
.hoverGlass{
@apply flex cursor-pointer
hover:rounded-lg
hover:bg-white/30 hover:shadow-sm
px-8 py-7 rounded-lg transition-all duration-150
relative
......
src/views/About/JoinUs/index.tsx
View file @ 40ea0dbf
......@@ -22,7 +22,6 @@ interface DtailContainerType extends IProps {
const DataGrid = (props: DataGridType) => {
const { data, doSetSelecteItem,className } = props;
return (
<div className={`grid grid-cols-2 labtop:grid-cols-3 gap-11 ${className}`}>
{data?.map((i, index) => (
......@@ -63,12 +62,12 @@ const DtailContainer = (props: DtailContainerType) => {
<div className='sub-title-cn'> {data.title}</div>
<StyledButton text='我要应聘' color="black"></StyledButton>
</div>
<div>{data.diploma}</div>
<div>{data.location}</div>
<div className='normal-text'>{data.diploma}</div>
<div className='normal-text'>{data.location}</div>
</div>
<div className='py-3'>
<div className='content-sub-title-cn'>岗位描述</div>
<div className="flex-col normal-text">
<div className="flex-col content-1-cn">
{data.requirments.split("；").map((i: string, index: number) => (
<div key={index}> - {i}</div>
))}
......@@ -76,7 +75,7 @@ const DtailContainer = (props: DtailContainerType) => {
</div>
<div className='py-3'>
<div className='content-sub-title-cn'>岗位要求</div>
<div className="flex-col normal-text">
<div className="flex-col content-1-cn">
{data.demands.split("；").map((i: string, index: number) => (
<div key={index}> - {i}</div>
))}
......@@ -110,13 +109,16 @@ export const JoinUs = () => {
setSelecteData(res);
})();
}, [activedDepartment]);
const cancelAndSelect =(id:string)=>{
setSelecteItem(undefined);
setActivedDepartment(id)
}
const selectedItem = useMemo(() => {
return data?.filter((i) => i.id === selecteItem)[0];
}, [selecteItem]);
return (
<>
<div className="py-12">
<div className="pt-12 pb-5">
<div className="hero-title">Join us</div>
<div className="sub-title-cn">加入我们</div>
</div>
......@@ -128,9 +130,9 @@ export const JoinUs = () => {
<div
key={i}
onClick={() => {
selecteItem ? "" : setActivedDepartment(i);
selecteItem ? cancelAndSelect(i): setActivedDepartment(i);
}}
className={`item cursor-pointer my-5 ${
className={`item cursor-pointer content-sub2-title-cn my-5 ${
activedDepartment !== i ? "text-gray-500" : "text-black"
}`}
>
......
src/views/About/Memorabilia/EventItem.tsx
View file @ 40ea0dbf
......@@ -36,8 +36,8 @@ export const EventItem = (props:EventItemType)=>{
}}
>
<div className="flex items-baseline">
<div className='int-font-sub'>{dates&&dates[0]}/</div>
<div className=' int-font-hero border-b-[2px] border-theme-dark'>{dates&&dates[1]}</div>
<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>
</div>
<div className='py-2 line-clamp-3 h-[70px] des-cn overflow-y-hidden font-cnnote'>
{data?data.title:''}
......
src/views/About/Partners/index.tsx
View file @ 40ea0dbf
......@@ -43,7 +43,7 @@ export const Partners = () => {
<div className="right w-2/12 z-[200000] pl-[3rem]">
<div className='flex pt-16'>
<VerticalText text='合作伙伴' containerStyle="sub-title-cn py-5 px-5"/>
<VerticalText text='Partners' containerStyle="hero-title mt-6" itemStyle=" rotate-90 -my-[2.7rem]"/>
<VerticalText text='Partners' containerStyle="hero-title mt-6" itemStyle=" rotate-90 -my-[1.81rem]"/>
</div>
</div>
</div>
......
src/views/About/index.tsx
View file @ 40ea0dbf
......@@ -14,8 +14,8 @@ import { aboutBg, baasBg } from "@/config/bgSetting";
const Description = () => {
return (
<div className="w-full">
<div className="sub-title-cn mb-[63px] ">链上复杂美 上链不复杂</div>
<div className="paragraph content-1-cn flex-col gap-y-4">
<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="pb-[14px]">
公司成立于2008年，2013年启动区块链、智能合约的研发与创新，2014年申请区块链发明专利：钱包找回功能。已累计申请了400多项区块链技术的发明专利，2019年据德温特专利家族统计，复杂美区块链发明专利排名位于全球第三，仅次于阿里巴巴和IBM。
</div>
......@@ -26,7 +26,7 @@ const Description = () => {
2018年11月，复杂美区块链Chain33在Github上开源，是较早落地运行的平行链架构系统，并基于模块设计可协作开发，大幅降低区块链的开发维护成本，实现快捷易用的跨链交易，有近100个平行链项目落地，有去中心化交易、去中心化社交、去中心化电商、去中心化溯源存证、等一系列应用。
</div>
</div>
<div className="flex py-10 content-sub2-title-cn gap-x-[100px] ">
<div className="flex py-10 content-sub2-title-cn gap-x-[4.5rem] pl-[80px] ">
<div>
<span className=" text-[#084DFD] border-b-4 border-[#084DFD] py-3">
优质
......
src/views/Baas33/Dtails.tsx
View file @ 40ea0dbf
......@@ -72,7 +72,7 @@ export const Details = (props:DetailsType)=>{
<DetailScrollView>
<div className='px-28'>
<div className='px-28 normal-text'>
<TableHeader data={TableHeaderData}></TableHeader>
<DetailsExceTable data={products} />
</div>
......
src/views/Baas33/index.tsx
View file @ 40ea0dbf
......@@ -14,6 +14,7 @@ import { Service } from './Service';
import { useContext, useEffect } from 'react';
import { AppContext } from '@/store/AppProvider';
import { useNavigate } from 'react-router';
import { LazyImg } from '@/components/LazyImg';
export interface IAppProps {
}
......@@ -26,9 +27,8 @@ export default function Baas33 () {
<div className="vertival-content">
<PageLayout ballConfig={baasBalls[0].setting}>
<>
<div className="translate-y-[8vh] relative">
<AppContianer className='z-[999999]'>
<AppContianer className='z-[9999] labtop:px-28'>
<div>
<div className="title-1-cn">复杂美区块链开放服务平台</div>
......@@ -40,7 +40,11 @@ export default function Baas33 () {
</div>
</AppContianer>
<div>
<img src={Baas33img} className="w-[110%]" />
<LazyImg
img={Baas33img}
animate='baas33'
className="w-[110%]"
></LazyImg>
<div className=" -translate-y-[5rem] flex justify-center gap-x-20 title-2-cn">
<div>高效</div>
<div>稳定</div>
......@@ -49,9 +53,6 @@ export default function Baas33 () {
</div>
</div>
</div>
{/*
<HeroBaas></HeroBaas> */}
</>
......
src/views/Chain33/index.tsx
View file @ 40ea0dbf
......@@ -38,10 +38,10 @@ const HeroItem =(props: HeroItemType)=>{
<div className="hero font-sans font-extrabold text-9xl">
<img src={img} />
</div>
<div className="subtitle border-b-2 text-lg font-medium w-4/12 my-3">
<div className="content-title-cn border-b-2 text-white w-[130px] my-3">
{subtitle}
</div>
<div className='labtop:text-sm w-[230px] text-xs'>
<div className=' w-[230px] normal-text text-white'>
{content}
</div>
</div>
......@@ -60,16 +60,16 @@ export default function Chain33() {
<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="img-holder mx-auto w-[1200px] relative ">
<div className="absolute z-[999] 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">
<div className="p-5 border-white border-[6px] rounded ">
<div className="super-hero-title py-5 tracking-widest font-bold">
Chain33
</div>
<div className="text-white text-lg xl:text-2xl pt-5 tracking-wide text-center">
<div className="content-title-cn text-white pt-5 tracking-wide text-center">
复杂美区块链开发者平台
</div>
</div>
......@@ -80,7 +80,6 @@ export default function Chain33() {
</div>
</div>
</div>
<LazyImg
img={chain33Bg}
className='object-scale-down object-bottom z-[9]'
......
src/views/News/NewsDetails.tsx
View file @ 40ea0dbf
......@@ -4,6 +4,7 @@ import { PageLayout } from "@/layouts/PageLayout";
import { getNews, getNewsDetail } from "@/service/api";
import { useEffect, useState } from "react";
import { useParams } from "react-router";
import { useNavigate } from "react-router-dom";
import { map } from "rxjs";
interface NewsDetailsType extends IProps{}
......@@ -11,6 +12,7 @@ export const NewsDetails = (props:NewsDetailsType)=>{
const params = useParams()
const [data,setData] = useState<any>()
const [latestNews,setLatestNews] = useState<any>()
const navigate =useNavigate()
useEffect(() => {
if(params['id']){
getNewsDetail(params['id']).subscribe(v=>{
......@@ -62,7 +64,7 @@ export const NewsDetails = (props:NewsDetailsType)=>{
<div>
{
latestNews&&latestNews.map((k:any,index:number)=>(
<div key={index} className="py-1 normal-text cursor-pointer hover:text-theme-blue">{k.title}</div>
<div key={index} onClick={()=>navigate(`/news/${k.id}`)} className="py-1 normal-text cursor-pointer hover:text-theme-blue">{k.title}</div>
))
}
</div>
......
src/views/News/index.tsx
View file @ 40ea0dbf
......@@ -9,7 +9,8 @@ import { count, filter, map, reduce } from "rxjs";
import { useNavigate } from 'react-router-dom';
import { baasBalls } from "@/config/ballSetting";
import { newsBg } from "@/config/bgSetting";
import { ChevronRightIcon } from "@heroicons/react/solid";
import * as dayjs from 'dayjs'
export interface IAppProps {}
export default function News(props: IAppProps) {
......@@ -31,21 +32,24 @@ export default function News(props: IAppProps) {
}, []);
const getDate = (time: number) => {
const date = new Date(time);
const d = dayjs.unix(Math.floor(time/1000) )
return {
year: date.getFullYear(),
day: date.getDay(),
month: date.getMonth(),
year: d.year().toString(),
day: d.date(),
month: d.month()+1>10?d.month():"0"+d.month()
};
};
const useDate = useCallback((time: number)=>getDate(time),[])
return (
<PageLayout fullscreen gradientConfig={newsBg[0].config}>
<div className="flex h-screen w-full ">
<div className="flex h-screen w-full normal-text">
<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=" hero-title text-white">News</div>
<div className=" sub-title-cn text-white">新闻动态</div>
<div className="absolute bottom-0 ">
<div className="w-12/12 content-1-cn text-white">
......@@ -59,34 +63,37 @@ export default function News(props: IAppProps) {
<div className="right h-full pt-28 w-7/12 relative">
<NewsScrollView>
<div className='mb-12 pb-[200px]'>
<ul className="news-list ">
<ul className="news-list -translate-x-[25px]">
{news.map((i, index) => (
<div onClick={()=>navigate(`/news/${i.id}`)} key={index}>
<HoverBox className="min-w-[650px] my-12 max-w-[90%]">
<>
<div className="news-date min-w-[200px] flex gap-x-2 text-white font-medium items-center ">
<div className="translate-y-3">
<div className="int-font-sub">
{getDate(i.time_stamp).year}/
<HoverBox className="max-w-[90%] my-[15px] flex gap-x-[20px] items-center min-w-[650px] ">
<>
<div className="news-date min-w-[200px] flex text-white font-medium items-center ">
<div className="translate-y-3">
<div className="int-font-sub">
{useDate(i.time_stamp).year}/
</div>
<div className="int-font-sub text-right">
{useDate(i.time_stamp).month}/
</div>
</div>
<div className="int-font-hero border-white text-right border-b-2">
{useDate(i.time_stamp).day}
</div>
</div>
<div className="int-font-sub text-right">
{getDate(i.time_stamp).month}/
<div className="news-content text-black ">
<div className="title text-lg py-2 text-overflow: ellipsis line-clamp-2">
{i.title}
</div>
<div className="text-sm opacity-75 indent-8 text-overflow: ellipsis line-clamp-3">
{i.desc}
</div>
</div>
</div>
<div className="int-font-hero border-white border-b-2">
{getDate(i.time_stamp).day}
</div>
</div>
<div className="news-content text-black ">
<div className="title text-lg py-2 text-overflow: ellipsis line-clamp-2">
{i.title}
</div>
<div className="text-sm opacity-75 indent-8 text-overflow: ellipsis line-clamp-3">
{i.desc}
</div>
</div>
</>
</HoverBox>
<span className='invisible'>
<ChevronRightIcon className="w-5 h-5"></ChevronRightIcon>
</span>
</>
</HoverBox>
</div>
))}
</ul>
......
yarn.lock
View file @ 40ea0dbf
......@@ -627,6 +627,11 @@ csstype@^3.0.2:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
dayjs@^1.11.4:
version "1.11.4"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.4.tgz#3b3c10ca378140d8917e06ebc13a4922af4f433e"
integrity sha512-Zj/lPM5hOvQ1Bf7uAvewDaUcsJoI6JmNqmHhHl3nyumwe0XHwt8sWdOVAPACJzCebL8gQCi+K49w7iKWnGwX9g==
dayjs@^1.9.1:
version "1.11.2"
resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.2.tgz#fa0f5223ef0d6724b3d8327134890cfe3d72fbe5"
......
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