Skip to content

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

update css root

parent 1b8d9813
Hide whitespace changes
Inline Side-by-side
Showing with 391 additions and 359 deletions
src/components/Navbar/index.tsx
View file @ 7c74aabc
...@@ -31,7 +31,7 @@ const HoverLink = (props: HoverLinkType) => { ...@@ -31,7 +31,7 @@ const HoverLink = (props: HoverLinkType) => {
return ( return (
<div <div
className={`relative content-1-cn font-normal ${ className={`relative normal-content font-normal ${
props.theme === "light" ? "text-[#061E3B]" : "text-white opacity-70" props.theme === "light" ? "text-[#061E3B]" : "text-white opacity-70"
}`} }`}
onPointerEnter={() => setOnHover(true)} onPointerEnter={() => setOnHover(true)}
...@@ -39,9 +39,9 @@ const HoverLink = (props: HoverLinkType) => { ...@@ -39,9 +39,9 @@ const HoverLink = (props: HoverLinkType) => {
> >
<div className="cursor-pointer">合作生态</div> <div className="cursor-pointer">合作生态</div>
{onHover ? ( {onHover ? (
<div className="py-3"> <div>
<div <div
className={`hover-toggle-box w-[180%] className={`w-[180%]
flex-cols flex-cols
absolute absolute
animate-fadeIn animate-fadeIn
...@@ -52,9 +52,7 @@ const HoverLink = (props: HoverLinkType) => { ...@@ -52,9 +52,7 @@ const HoverLink = (props: HoverLinkType) => {
-translate-x-[18%] rounded-lg flex-col -translate-x-[18%] rounded-lg flex-col
text-[#061E3B] text-[#061E3B]
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 <div
className={`my-[8px] cursor-pointer ${ className={`my-[8px] cursor-pointer ${
...@@ -141,7 +139,7 @@ export default function Navbar(props: IAppProps) { ...@@ -141,7 +139,7 @@ export default function Navbar(props: IAppProps) {
className=" cursor-pointer" className=" cursor-pointer"
/> />
</div> </div>
<div className="right content-1-cn items-start flex gap-x-12"> <div className="right normal-content items-start flex gap-x-12">
<Link <Link
to="/" to="/"
className={`${ className={`${
......
src/components/NewsScrollView.tsx
View file @ 7c74aabc
...@@ -54,12 +54,8 @@ export const NewsScrollView = (props: ScrollViewType) => { ...@@ -54,12 +54,8 @@ export const NewsScrollView = (props: ScrollViewType) => {
},[wrapRef]) },[wrapRef])
return ( return (
<div className="h-full overflow-hidden -ml-[200px]" ref={wrapRef}>
<div className=" h-full overflow-hidden ml-[-200px]" ref={wrapRef}>
{children} {children}
</div> </div>
); );
} }
src/components/ScrollView.tsx
View file @ 7c74aabc
...@@ -140,7 +140,7 @@ export const ScrollView = (props: ScrollViewType) => { ...@@ -140,7 +140,7 @@ export const ScrollView = (props: ScrollViewType) => {
<LazyImg <LazyImg
img={data.theme==='light'?ContactImg:ContactImgWhite} img={data.theme==='light'?ContactImg:ContactImgWhite}
animate='contact' animate='contact'
className='absolute bottom-[20px] right-[100px] w-[234px]' className='absolute bottom-[20px] right-[0px] w-[234px]'
></LazyImg> ></LazyImg>
</div> </div>
); );
......
src/components/StyledButton.tsx
View file @ 7c74aabc
...@@ -37,7 +37,7 @@ export default function StyledButton (props: StyledButtonType) { ...@@ -37,7 +37,7 @@ export default function StyledButton (props: StyledButtonType) {
},[colorIs]) },[colorIs])
return ( return (
<button <button
className={`normal-text py-2 tracking-widest cursor-pointer rounded-full px-8 ${className?className:''}`} className={`normal-content py-2 tracking-widest cursor-pointer rounded-full px-8 ${className?className:''}`}
style={{ style={{
color:colorStyle.text, color:colorStyle.text,
backgroundColor:colorStyle.bgColor backgroundColor:colorStyle.bgColor
......
src/components/VerticalText.tsx deleted 100644 → 0
View file @ 1b8d9813
import { IProps } from "@/common/Iprops.interface";
interface VerticalTextType extends IProps{
text: string;
containerStyle?: string;
itemStyle?: string;
}
export const VerticalText = (props: VerticalTextType)=>{
const {text,containerStyle,itemStyle} = props;
const textArr = text.split('')
return(
<div className={`grid-cols-1 ${containerStyle}`}>
{
textArr&&textArr.map((i,index)=>(
<div className={itemStyle} key={index}>
{i}
</div>
))
}
</div>
)
}
\ No newline at end of file
src/config/ballSetting.ts
View file @ 7c74aabc
...@@ -49,7 +49,7 @@ export const baasBalls = [ ...@@ -49,7 +49,7 @@ export const baasBalls = [
setting:[ setting:[
{ {
size: "190px", size: "190px",
position: ["7.5%", "70%"], position: ["7.5%", "64%"],
rotation: "210", rotation: "210",
zIndex: "9999", zIndex: "9999",
color: "blue" color: "blue"
......
src/layouts/AppContianer.tsx
View file @ 7c74aabc
...@@ -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={`moblie:px-[120px] moblie:min-w-[1440px] labtop:px-[16rem] relative w-full ${className?className:''}`}> <div className={`px-[120px] moblie:min-w-[1440px] relative ${className?className:''}`}>
{children} {children}
</div> </div>
) )
......
src/layouts/BallAnime.tsx
View file @ 7c74aabc
...@@ -62,7 +62,7 @@ export const BallAnime = (props: BallAnimeType) => { ...@@ -62,7 +62,7 @@ export const BallAnime = (props: BallAnimeType) => {
const animation = props.animation ? props.animation : "move-in"; const animation = props.animation ? props.animation : "move-in";
return ( return (
<div className="w-full h-full moblie:min-w-[1440px] relative"> <div className="w-full h-full moblie:min-w-[1440px] min-h-[750px] relative">
{props.config && props.config.length > 0 {props.config && props.config.length > 0
? props.config.map((i,index) => { ? props.config.map((i,index) => {
return <BallHolder key={index} config={i}></BallHolder>; return <BallHolder key={index} config={i}></BallHolder>;
......
src/layouts/GradientLay.tsx
View file @ 7c74aabc
...@@ -69,8 +69,8 @@ const BgImgHodler = (props:BgElement)=>{ ...@@ -69,8 +69,8 @@ const BgImgHodler = (props:BgElement)=>{
export const GradientLay = (props: BgAnimeType) => { export const GradientLay = (props: BgAnimeType) => {
const { children } = props; const { children } = props;
return ( return (
<div className=" relative h-full w-full moblie:min-w-[1440px] overflow-hidden"> <div className=" relative h-full w-full moblie: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) => {
return <BgImgHodler key={index} config={i}></BgImgHodler>; return <BgImgHodler key={index} config={i}></BgImgHodler>;
......
src/layouts/PageLayout.tsx
View file @ 7c74aabc
...@@ -13,11 +13,11 @@ export const PageLayout=(props:PageLayoutType)=>{ ...@@ -13,11 +13,11 @@ export const PageLayout=(props:PageLayoutType)=>{
const {children,className,ballConfig,gradientConfig,fullscreen} = props const {children,className,ballConfig,gradientConfig,fullscreen} = props
return( return(
<GradientLay config={gradientConfig}> <GradientLay config={gradientConfig}>
<div className={`h-screen w-screen min-h-[750px] relative ${className}`}> <div className={`h-screen w-screen relative ${className}`}>
<BallAnime config={ballConfig}> <BallAnime config={ballConfig}>
<div className={`h-full w-full flex-col items-center ${fullscreen ?'pt-0':'pt-[70px]'}`}> <div className={`h-full w-full flex-col items-center ${fullscreen ?'pt-0':'pt-[70px]'}`}>
{children} {children}
</div> </div>
</BallAnime> </BallAnime>
</div> </div>
</GradientLay> </GradientLay>
......
src/style.css
View file @ 7c74aabc
...@@ -16,22 +16,18 @@ ...@@ -16,22 +16,18 @@
.title-1-cn{ .title-1-cn{
@apply text-theme-dark text-[40px] tracking-[2px] font-[900] font-cnnote leading-[56px] @apply text-theme-dark text-[40px] tracking-[2px] font-[900] font-cnnote leading-[40px]
} }
.title-2-cn{
@apply text-theme-dark text-[24px] tracking-[1px] font-[800] font-cnnote leading-[33px]
} .normal-content{
.subTitle-1-cn{
@apply text-theme-dark text-[30px] tracking-[1px] font-[800] font-cnnote leading-[42px]
}
.content-1-cn{
@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-theme-dark text-[75px] tracking-wider font-[400] font-galano leading-[90px] @apply text-theme-dark text-[75px] tracking-wider font-[400] font-galano leading-[65px]
} }
...@@ -46,8 +42,11 @@ ...@@ -46,8 +42,11 @@
} }
.subTitle-1-cn{
@apply text-theme-dark text-[30px] tracking-[1px] font-[400] font-cnnote leading-[30px]
}
.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 py-1
} }
.content-title-cn{ .content-title-cn{
@apply text-theme-dark text-[20px] tracking-wide font-cnnote font-bold py-3 @apply text-theme-dark text-[20px] tracking-wide font-cnnote font-bold py-3
...@@ -71,20 +70,20 @@ ...@@ -71,20 +70,20 @@
.hoverGlass{ .hoverGlass{
@apply flex cursor-pointer @apply flex cursor-pointer
hover:rounded-lg hover:rounded-lg
hover:bg-white/30 hover:shadow-sm hover:bg-white/30 hover:shadow-sm w-full h-full z-[1] pl-[25px]
px-8 py-7 rounded-lg transition-all duration-150 px-8 py-7 rounded-xl transition-all duration-150
relative relative
} }
.hoverGlass:hover span{ .hoverGlass:hover span{
@apply visible transition-all duration-150 @apply visible transition-all duration-150
} }
.featuresGrid{
@apply grid grid-cols-2 w-full
}
} }
boby{ boby{
@apply font-['arial'] @apply font-['arial']
} }
.hero-baas{ .hero-baas{
background: linear-gradient(120deg,#0425F3 30%,#2711AC 40%,#00BBE8 80%); background: linear-gradient(120deg,#0425F3 30%,#2711AC 40%,#00BBE8 80%);
-webkit-background-clip: text; -webkit-background-clip: text;
...@@ -97,6 +96,14 @@ boby{ ...@@ -97,6 +96,14 @@ boby{
-webkit-writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl;
-ms-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl;
} }
.centered{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.clip-title{ .clip-title{
/* /*
-webkit-background-clip: text; -webkit-background-clip: text;
......
src/views/About/Contact/index.tsx
View file @ 7c74aabc
...@@ -36,27 +36,27 @@ export const Contact = () => { ...@@ -36,27 +36,27 @@ export const Contact = () => {
<div className="grid grid-cols-2 gap-x-[100px] gap-y-[30px] pb-12"> <div className="grid grid-cols-2 gap-x-[100px] gap-y-[30px] pb-12">
{data.map((i, index) => ( {data.map((i, index) => (
<div className="item" key={index}> <div className="item" key={index}>
<div className="content-1-cn">{i.location}</div> <div className="normal-content">{i.location}</div>
<div className=" sub-title-cn">{i.tel}</div> <div className=" sub-title-cn">{i.tel}</div>
</div> </div>
))} ))}
</div> </div>
<div className="item"> <div className="item">
<div className="content-1-cn">邮箱</div> <div className="normal-content">邮箱</div>
<a className="sub-title-cn">support@33.cn</a> <a className="sub-title-cn">support@33.cn</a>
</div> </div>
<div className="locations flex items-start gap-x-[135px] pt-12"> <div className="locations flex items-start gap-x-[135px] pt-12">
<div className="item flex-col content-1-cn"> <div className="item flex-col normal-content">
<div className='content-sub2-title-cn'>杭州西湖区办公室</div> <div className='content-sub2-title-cn'>杭州西湖区办公室</div>
<div className='py-1 content-1-cn'> <div className='py-1 normal-content'>
<div>浙江省杭州市西湖区</div> <div>浙江省杭州市西湖区</div>
<div>文三路90号</div> <div>文三路90号</div>
<div>东部软件园科技大厦7楼</div> <div>东部软件园科技大厦7楼</div>
</div> </div>
</div> </div>
<div className="item flex-col content-1-cn"> <div className="item flex-col normal-content">
<div className='content-sub2-title-cn'>杭州滨江办公室</div> <div className='content-sub2-title-cn'>杭州滨江办公室</div>
<div className='py-1 content-1-cn'> <div className='py-1 normal-content'>
<div>浙江省杭州市滨江区</div> <div>浙江省杭州市滨江区</div>
<div>东方通信科技城</div> <div>东方通信科技城</div>
</div> </div>
......
src/views/About/JoinUs/index.tsx
View file @ 7c74aabc
...@@ -67,7 +67,7 @@ const DtailContainer = (props: DtailContainerType) => { ...@@ -67,7 +67,7 @@ const DtailContainer = (props: DtailContainerType) => {
</div> </div>
<div className='py-[5px]'> <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 normal-content">
{data.requirments.split("；").map((i: string, index: number) => ( {data.requirments.split("；").map((i: string, index: number) => (
<div key={index}> - {i}</div> <div key={index}> - {i}</div>
))} ))}
...@@ -75,7 +75,7 @@ const DtailContainer = (props: DtailContainerType) => { ...@@ -75,7 +75,7 @@ const DtailContainer = (props: DtailContainerType) => {
</div> </div>
<div className='py-[5px]'> <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 normal-content">
{data.demands.split("；").map((i: string, index: number) => ( {data.demands.split("；").map((i: string, index: number) => (
<div key={index}> - {i}</div> <div key={index}> - {i}</div>
))} ))}
......
src/views/About/Memorabilia/EventItem.tsx
View file @ 7c74aabc
...@@ -62,14 +62,14 @@ export const EventItem = (props: EventItemType) => { ...@@ -62,14 +62,14 @@ export const EventItem = (props: EventItemType) => {
{dates && dates[1]} {dates && dates[1]}
</div> </div>
</div> </div>
<div className="py-2 content-1-cn line-clamp-3 h-[70px] overflow-y-hidden "> <div className="py-2 normal-content line-clamp-3 h-[70px] overflow-y-hidden ">
{data ? data.title : ""} {data ? data.title : ""}
</div> </div>
</div> </div>
{open&&data && data.title.length > 37 && ( {open&&data && data.title.length > 37 && (
<div <div
ref={floating} ref={floating}
className="bg-theme-dark content-1-cn z-[9999] text-white py-5 px-3 w-[260px] rounded-md break-all" className="bg-theme-dark normal-content z-[9999] text-white py-5 px-3 w-[260px] rounded-md break-all"
style={{ style={{
position: strategy, position: strategy,
top: y ?? 0, top: y ?? 0,
......
src/views/About/Memorabilia/index.tsx
View file @ 7c74aabc
...@@ -78,7 +78,6 @@ export const Memorabilia = () => { ...@@ -78,7 +78,6 @@ export const Memorabilia = () => {
</div> </div>
} }
</div> </div>
</AppContianer > </AppContianer >
) )
} }
\ No newline at end of file
src/views/About/Partners/index.tsx
View file @ 7c74aabc
import { VerticalText } from "@/components/VerticalText"
import { AppContianer } from "@/layouts/AppContianer" import { AppContianer } from "@/layouts/AppContianer"
const imgList = [ const imgList = [
......
src/views/About/index.tsx
View file @ 7c74aabc
...@@ -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-[600px] max-w-[85%]"> <div className="paragraph normal-content flex-col gap-b-4 pl-[80px] min-w-[600px] max-w-[750px]">
<div className="pb-[14px]"> <div className="pb-[14px]">
公司成立于2008年，2013年启动区块链、智能合约的研发与创新，2014年申请区块链发明专利：钱包找回功能。已累计申请了400多项区块链技术的发明专利，2019年据德温特专利家族统计，复杂美区块链发明专利排名位于全球第三，仅次于阿里巴巴和IBM。 公司成立于2008年，2013年启动区块链、智能合约的研发与创新，2014年申请区块链发明专利：钱包找回功能。已累计申请了400多项区块链技术的发明专利，2019年据德温特专利家族统计，复杂美区块链发明专利排名位于全球第三，仅次于阿里巴巴和IBM。
</div> </div>
...@@ -26,7 +26,7 @@ const Description = () => { ...@@ -26,7 +26,7 @@ const Description = () => {
2018年11月，复杂美区块链Chain33在Github上开源，是较早落地运行的平行链架构系统，并基于模块设计可协作开发，大幅降低区块链的开发维护成本，实现快捷易用的跨链交易，有近100个平行链项目落地，有去中心化交易、去中心化社交、去中心化电商、去中心化溯源存证等一系列应用。 2018年11月，复杂美区块链Chain33在Github上开源，是较早落地运行的平行链架构系统，并基于模块设计可协作开发，大幅降低区块链的开发维护成本，实现快捷易用的跨链交易，有近100个平行链项目落地，有去中心化交易、去中心化社交、去中心化电商、去中心化溯源存证等一系列应用。
</div> </div>
</div> </div>
<div className="flex py-10 content-sub2-title-cn gap-x-[4.5rem] pl-[80px] "> <div className="flex content-sub2-title-cn labtop:pt-[168px] pt-[60px] gap-x-[100px] pl-[80px] ">
<div> <div>
<span className=" text-[#084DFD] border-b-4 border-[#084DFD] py-3"> <span className=" text-[#084DFD] border-b-4 border-[#084DFD] py-3">
优质 优质
...@@ -94,14 +94,21 @@ export default function About(props: any) { ...@@ -94,14 +94,21 @@ export default function About(props: any) {
<PageLayout <PageLayout
ballConfig={aboutBalls[0].setting} ballConfig={aboutBalls[0].setting}
gradientConfig={aboutBg[0].config} gradientConfig={aboutBg[0].config}
className="h-full w-full"
> >
<AppContianer className="h-full items-start labtop:px-[120px]"> <AppContianer className="flex items-center h-full w-full relative min-h-[750px] labtop:min-h-[960px]">
<div className="flex w-full h-full items-center">
<img src={AboutImg} /> <div className=" labtop:h-[650px] centred -translate-y-[30px]">
<div className=" "> <div className="flex w-full h-full items-start">
<div className='left w-[35vw] min-w-[480px]'>
<img src={AboutImg} />
</div>
<div className="right labtop:self-end ">
<Description></Description> <Description></Description>
</div> </div>
</div> </div>
</div>
</AppContianer> </AppContianer>
</PageLayout> </PageLayout>
......
src/views/Baas33/Advantages/index.tsx
View file @ 7c74aabc
import { IProps } from "@/common/Iprops.interface"; import { IProps } from "@/common/Iprops.interface";
import { AppContianer } from "@/layouts/AppContianer"; import { AppContianer } from "@/layouts/AppContianer";
import "./style.css";
interface AdvantagesType extends IProps {}
const AdvantagesList = () => {
return (
<div className="flex flex-col gap-y-[60px] mt-[48px]">
<div className="relative">
<span className="item-number">1</span>
<div className="item-title">高效</div>
<div className="item-content">
平行侧链之间交易可以并行执行，交易效率大大提升。
</div>
</div>
<div className="relative ">
<span className="item-number">2</span>
<div className="item-title">稳定</div>
<div className="item-content">
支持“主链+平行链”分层区块链架构，主链上只允许基础核心的合约，稳定性强，进而保证
<br /> 整个区块链网络的稳定。
</div>
</div>
<div className="relative ">
<span className="item-number">3</span>
<div className="item-title">安全</div>
<div className="item-content">
采用代理重加密加秘钥分片的方案，实现数据可分享型存储，保障数据隐私。
<br />
支持国标标准SM2、SM3、SM4。
</div>
</div>
<div className="relative ">
<span className="item-number">4</span>
<div className="item-title">低成本</div>
<div className="item-content">
提供便捷部署的BAAS服务，实现可视化安装，
<br />
智能合约IDE工具，节约成本。
</div>
</div>
</div>
);
};
interface AdvantagesType extends IProps{ export const Advantages = (props: AdvantagesType) => {
return (
} <AppContianer className="flex items-center h-full w-full relative min-h-[750px] labtop:min-h-[960px] ">
const AdvantagesList = ()=>{ <div className="centred -translate-y-[30px]">
return( <div className="flex w-full h-full items-start gap-x-[100px] labtop:h-[710px] ">
<div className='flex flex-col gap-y-[60px] mt-[48px]'> <div className="left w-[40vw] h-full relative ">
<div className='relative '> <div className="sub-title-cn pb-[30px]">
<span className='absolute title-1-cn text-[90px] -top-[2rem] -left-[2rem] opacity-10'>1</span> <div className="py-[10px] flex items-center gap-x-[24px]">
<div className='title-2-cn border-black border-b-[3px] w-[90px]'>高效</div> <div className="w-[80px] h-[2px] bg-theme-dark rounded"></div>
<div className='pt-2 content-1-cn'>平行侧链之间交易可以并行执行，交易效率大大提升。</div> <div>平台优势</div>
</div> </div>
<div className='relative '>
<span className='absolute title-1-cn text-[90px] -top-[2rem] -left-[2rem] opacity-10'>2</span>
<div className='title-2-cn border-black border-b-[3px] w-[90px]'>稳定</div>
<div className='pt-2 content-1-cn'>支持“主链+平行链”分层区块链架构，主链上只允许基础核心的合约，稳定性强，进而保证<br/> 整个区块链网络的稳定。</div>
</div>
<div className='relative '>
<span className='absolute title-1-cn text-[90px] -top-[2rem] -left-[2rem] opacity-10'>2</span>
<div className='title-2-cn border-black border-b-[3px] w-[90px]'>安全</div>
<div className='pt-2 content-1-cn'>采用代理重加密加秘钥分片的方案，实现数据可分享型存储，保障数据隐私。<br/>支持国标标准SM2、SM3、SM4。</div>
</div> </div>
<div className='relative '> <div className="title-1-en">
<span className='absolute title-1-cn text-[90px] -top-[2rem] -left-[2rem] opacity-10'>2</span> Platform
<div className='title-2-cn border-black border-b-[3px] w-[90px]'>低成本</div> <div>Advantages</div>
<div className='pt-2 content-1-cn'>提供便捷部署的BAAS服务，实现可视化安装，<br/>智能合约IDE工具，节约成本。</div>
</div> </div>
</div>
)
}
export const Advantages = (props: AdvantagesType)=>{
return( <div className="normal-content pt-5">
<AppContianer className='h-full'> 打造低成本、高性能、更可靠的区块链技术平台
<div className="flex h-full items-start pt-[48px] gap-x-[100px] ">
<div className="left">
<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>
<div className="title-1-en py-5">
Platform
<div>
Advantages
</div>
</div>
<div className='content-1-cn pt-5'>打造低成本、高性能、更可靠的区块链技术平台</div>
<div className='flex relative justify-end pt-[8rem]'>
</div>
</div>
<div className="right">
<AdvantagesList />
</div>
</div> </div>
</AppContianer> <div className="flex relative justify-end pt-[30px]"></div>
) </div>
<div className="right min-w-[820px] w-[55vw] labtop:self-end">
} <AdvantagesList />
\ No newline at end of file </div>
</div>
</div>
</AppContianer>
);
};
src/views/Baas33/Advantages/style.css 0 → 100644
View file @ 7c74aabc
.item-title{
@apply sub-title-cn border-black border-b-[3px] w-[90px] pb-[3px]
}
.item-content{
@apply pt-[9px] normal-content
}
.item-number{
@apply absolute int-font-1 text-[90px] -top-[60px] -left-[32px] opacity-10 font-[800]
}
\ No newline at end of file
src/views/Baas33/Dtails.tsx
View file @ 7c74aabc
...@@ -24,8 +24,8 @@ const TableHeader = (props:TableHeader)=>{ ...@@ -24,8 +24,8 @@ const TableHeader = (props:TableHeader)=>{
{ {
data.features.map((i:any,index:number)=>( data.features.map((i:any,index:number)=>(
<div className='item max-w-[284px]' key={index}> <div className='item max-w-[284px]' key={index}>
<div className='title-2-cn'>{i.title}</div> <div className='sub-title-cn'>{i.title}</div>
<div className='normal-text pt-[10px]'>{i.context}</div> <div className='normal-content pt-[10px]'>{i.context}</div>
</div> </div>
)) ))
} }
...@@ -60,7 +60,7 @@ export const Details = (props:DetailsType)=>{ ...@@ -60,7 +60,7 @@ export const Details = (props:DetailsType)=>{
<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-[120px] normal-content '>
<TableHeader data={TableHeaderData}></TableHeader> <TableHeader data={TableHeaderData}></TableHeader>
<DetailsExceTable data={products} /> <DetailsExceTable data={products} />
<div className='py-5 pb-20 normal-content'> <div className='py-5 pb-20 normal-content'>
......
src/views/Baas33/Features/index.tsx
View file @ 7c74aabc
import { IProps } from "@/common/Iprops.interface"; import { IProps } from "@/common/Iprops.interface";
import { AppContianer } from "@/layouts/AppContianer"; import { AppContianer } from "@/layouts/AppContianer";
interface FeaturesType extends IProps{ interface FeaturesType extends IProps {}
} export const Features = (props: FeaturesType) => {
const FeaturesGrid = ()=>{ return (
return( <AppContianer className="flex items-center h-full w-full relative min-h-[750px] labtop:min-h-[960px] ">
<div className="featuresGrid"> <>
<div className='w-full pb-[48px] mr-[90px]'> <div className="h-[100vh] -translate-y-[83px] absolute top-0 left-0 min-w-[920px] w-[60vw] bg-white/40 -z-[1]"></div>
<div className='title-2-cn'>快速构建</div> <div className="centred -translate-y-[30px]">
<div className='content-1-cn pt-[14px]'>支持一键快速构建联盟链、平行链等区块链网络</div> <div className="flex w-full h-full items-start ">
</div> <div className="left min-w-[820px] w-[55vw] h-full relative ">
<div className='w-full pb-[48px] mr-[90px]'> <div className="title-1-en ">
<div className='title-2-cn'>隐私保护</div> Functional
<div className='content-1-cn pt-[14px]'>提供权限管理、身份关联、数据加密等方式保证<br/>数据安全</div> <div className="title-1-en">Features</div>
</div> </div>
<div className='w-full pb-[48px] mr-[90px]'> <div className="py-[10px] flex items-center gap-x-[24px]">
<div className='title-2-cn'>灵活部署</div> <div className=" w-[80px] h-[2px] bg-theme-dark rounded"></div>
<div className='content-1-cn pt-[14px]'>支持节点一键自动化部署省去手动部署等大量时<br/> 间和精力</div> <div className="subTitle-1-cn">功能特点</div>
</div> </div>
<div className='w-full pb-[48px] mr-[90px]'> <div className="normal-content">一键部署多样化区块链网络</div>
<div className='title-2-cn'>多组件支持</div> <div className="flex justify-start labtop:justify-end w-full relative pt-[60px] ">
<div className='content-1-cn pt-[14px]'>智能合约模块可插拔 支持智能合约语言的多样化<br/>包括Solidity,Java,C++和Golang等成熟开发语<br/>言</div> <div className="grid grid-cols-2 labtop:w-9/12 ">
</div> <div className="w-full pb-[48px] mr-[90px]">
</div> <div className="sub-title-cn">快速构建</div>
) <div className="normal-content pt-[14px]">
} 支持一键快速构建联盟链、
<br />
export const Features = (props: FeaturesType)=>{ 平行链等区块链网络
</div>
</div>
return( <div className="w-full pb-[48px] mr-[90px]">
<AppContianer className='h-full'> <div className="sub-title-cn">隐私保护</div>
<> <div className="normal-content pt-[14px]">
<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 pt-[40px]"> <br />
<div className="left w-8/12 h-full "> 数据加密等方式保证数据安全
<div className="title-1-en"> </div>
Functional </div>
<div className='title-1-en'> <div className="w-full pb-[48px] mr-[90px]">
Features <div className="sub-title-cn">灵活部署</div>
</div> <div className="normal-content pt-[14px]">
</div> 支持节点一键自动化部署省去手动部署
<div className="subTitle-1-cn py-3 flex items-center gap-x-5"> <br />
<div className=" w-28 h-1 bg-theme-dark rounded"></div> 等大量时间和精力
<div>功能特点</div>
</div>
<div className='content-1-cn'>一键部署多样化区块链网络</div>
<div className='flex relative justify-start pt-[60px]'>
<FeaturesGrid></FeaturesGrid>
</div>
</div>
<div className="right h-full w-4/12 px-[10%]">
<div className="flex-col justify-center ">
<div className='max-w-[320px] min-w-[280px]'>
<div className='title-2-cn pb-[14px]'>弹性扩展</div>
<div className='content-1-cn'>支持联盟节点动态增删</div>
</div> </div>
<div className='max-w-[320px] min-w-[280px] mt-[46px]'> </div>
<div className='title-2-cn pb-[14px]'>运维监控</div> <div className="w-full pb-[48px] mr-[90px]">
<div className='content-1-cn'>支持区块链节点及硬件资源的实时监控</div> <div className="sub-title-cn">多组件支持</div>
<div className="normal-content pt-[14px]">
智能合约模块可插拔
<br /> 支持智能合约语言的多样化
<br />
包括Solidity,Java,C++和Golang等成熟开发语言
</div> </div>
</div>
</div> </div>
</div>
</div> </div>
<div className="right w-[43vw] h-full">
<div className="flex-col w-[320px] items-center mx-auto justify-center ">
<div className="max-w-[320px] min-w-[280px]">
<div className="sub-title-cn pb-[14px]">弹性扩展</div>
<div className="normal-content">支持联盟节点动态增删</div>
</div>
<div className="max-w-[320px] min-w-[280px] mt-[46px]">
<div className="sub-title-cn pb-[14px]">运维监控</div>
<div className="normal-content">
支持区块链节点及硬件资源的实时监控
</div>
</div>
</div>
</div>
</div>
</div> </div>
</> </>
</AppContianer> </AppContianer>
) );
};
}
\ No newline at end of file
src/views/Baas33/Service/index.tsx
View file @ 7c74aabc
...@@ -48,30 +48,31 @@ const ServiceList = () => { ...@@ -48,30 +48,31 @@ const ServiceList = () => {
}); });
}; };
return ( return (
<div className="grid grid-cols-3 w-full "> <div className="flex justify-around w-full ">
{data.map((i, index) => ( {data.map((i, index) => (
<div <div
key={index} key={index}
onPointerDown={() => goDetails(index)} onPointerDown={() => goDetails(index)}
className="relative cursor-pointer w-[300px] py-[40px] px-[40px] bg-white/40 h-[460px] rounded-[2.5rem] " className="relative cursor-pointer w-[320px] labtop:w-[370px] pt-[30px] px-[40px] bg-white/40 h-[460px] rounded-[2.5rem] "
> >
<div className="sub-title-cn border-black py-5">{i.title}</div> <div className="sub-title-cn border-black py-[20px]">{i.title}</div>
<div className="pt-2 content-sub-title-cn font-normal">{i.text}</div> <div className="pt-[10px] content-sub-title-cn font-normal">{i.text}</div>
<ul className="py-5 content-sub-title-cn "> <ul className="py-5 content-sub-title-cn ">
{i.features.map((k, x) => ( {i.features.map((k, x) => (
<div className="my-1 flex normal-content items-start" key={"child" + x}> <div className="mb-[10px] flex normal-content items-start" key={"child" + x}>
<img src={selectImg} /> <img src={selectImg} />
<div className="pl-3 -translate-y-[3px] font-bold">{k}</div> <div className="pl-3 -translate-y-[3px] font-bold">{k}</div>
</div> </div>
))} ))}
</ul> </ul>
<div className="w-full absolute bottom-10 px-10 left-0 flex justify-between align-bottom items-baseline"> <div className="w-full absolute bottom-[30px] px-10 left-0 flex justify-between align-bottom items-baseline">
<div className="content-sub-title-cn cursor-pointer flex items-center gap-x-3"> <div className="content-sub-title-cn cursor-pointer flex items-center gap-x-[10px]">
<div>介绍详情</div> <div>介绍详情</div>
<img src={trangle} /> <div>
<img src={trangle} className='translate-y-[1.2px]' />
</div>
</div> </div>
<div className="content-sub-title-cn text-theme-blue"> <div className="content-sub-title-cn text-theme-blue">
<span className=" int-font-1 ">{i.price}</span> <span className=" int-font-1 ">{i.price}</span>
......
src/views/Baas33/index.tsx
View file @ 7c74aabc
import { ScrollView } from '@/components/ScrollView'; import { ScrollView } from "@/components/ScrollView";
import { PageLayout } from '@/layouts/PageLayout'; import { PageLayout } from "@/layouts/PageLayout";
import StyledButton from '@/components/StyledButton'; import StyledButton from "@/components/StyledButton";
import { AppContianer } from '@/layouts/AppContianer'; import { AppContianer } from "@/layouts/AppContianer";
import { Features } from './Features'; import { Features } from "./Features";
import { Advantages } from './Advantages'; import { Advantages } from "./Advantages";
import Baas33img from '@/assets/img/baas33.png' import Baas33img from "@/assets/img/baas33.png";
import {baasBalls} from '@/config/ballSetting' import { baasBalls } from "@/config/ballSetting";
import { HeroBaas } from './HeroBaas'; import { HeroBaas } from "./HeroBaas";
import { baasBg } from '@/config/bgSetting'; import { baasBg } from "@/config/bgSetting";
import { Service } from './Service'; import { Service } from "./Service";
import { useContext, useEffect } from 'react'; import { useContext, useEffect } from "react";
import { AppContext } from '@/store/AppProvider'; import { AppContext } from "@/store/AppProvider";
import { useNavigate } from 'react-router'; import { useNavigate } from "react-router";
import { LazyImg } from '@/components/LazyImg'; import { LazyImg } from "@/components/LazyImg";
export interface IAppProps { export interface IAppProps {}
}
export default function Baas33 () { export default function Baas33() {
const navigate = useNavigate() const navigate = useNavigate();
const b =['#sdfiw2','#fud8fu','#sdif822'] const b = ["#sdfiw2", "#fud8fu", "#sdif822"];
const appstart = import.meta.env.VITE_BAAS_ONECLIKE const appstart = import.meta.env.VITE_BAAS_ONECLIKE;
return ( return (
<ScrollView> <ScrollView>
<div className="vertival-content"> <div className="vertival-content">
<PageLayout ballConfig={baasBalls[0].setting}> <PageLayout ballConfig={baasBalls[0].setting} className="flex items-center relative h-full w-full min-h-[750px] labtop:min-h-[960px] ">
<> <div className='h-full w-full relative min-h-[750px]'>
<div className="translate-y-[8vh] relative"> <div className="centered ">
<AppContianer className='z-[9999] labtop:px-[120px]'> <div className='px-[120px] pt-[70px]'>
<div>
<div className="title-1-cn">复杂美区块链开放服务平台</div> <div className="title-1-cn">复杂美区块链开放服务平台</div>
<div className="flex gap-x-5 mt-5 "> <div className="flex gap-x-[20px] mt-[20px] ">
<StyledButton text='开发者文档' color="black" onClick={()=>navigate('/docs/1')}></StyledButton> <StyledButton
<StyledButton text='一键搭建' color="red" onClick={()=> window.open(appstart,'_blank')}></StyledButton> text="开发者文档"
color="black"
onClick={() => navigate("/docs/1")}
></StyledButton>
<StyledButton
text="一键搭建"
color="red"
onClick={() => window.open(appstart, "_blank")}
></StyledButton>
</div> </div>
</div> </div>
</AppContianer>
<div> <LazyImg
<LazyImg
img={Baas33img} img={Baas33img}
animate='baas33' animate="baas33"
className="w-[110%]" className="w-[110%] mt-[65px]"
></LazyImg> ></LazyImg>
<div className=" -translate-y-[5rem] flex justify-center gap-x-20 title-2-cn"> <div className="flex -translate-y-[60px] justify-center gap-x-[111px] labtop:gap-x-[179px] sub-title-cn">
<div>高效</div> <div>高效</div>
<div>稳定</div> <div>稳定</div>
<div>低成本</div> <div>低成本</div>
<div>安装便捷</div> <div>安装便捷</div>
</div> </div>
</div>
</div> </div>
</div>
</PageLayout>
</> <PageLayout
</PageLayout> ballConfig={baasBalls[1].setting}
<PageLayout ballConfig={baasBalls[1].setting} gradientConfig={baasBg[1].config}> gradientConfig={baasBg[1].config}
<Features></Features> >
</PageLayout> <Features></Features>
</PageLayout>
<PageLayout ballConfig={baasBalls[2].setting} gradientConfig={baasBg[2].config}> <PageLayout
<Advantages/> ballConfig={baasBalls[2].setting}
</PageLayout> gradientConfig={baasBg[2].config}
>
<Advantages />
</PageLayout>
<PageLayout ballConfig={baasBalls[3].setting} gradientConfig={baasBg[3].config}> <PageLayout
<Service/> ballConfig={baasBalls[3].setting}
</PageLayout> gradientConfig={baasBg[3].config}
>
<Service />
</PageLayout>
</div> </div>
</ScrollView> </ScrollView>
); );
......
src/views/Chain33/index.tsx
View file @ 7c74aabc
...@@ -33,7 +33,7 @@ const HeroItem = (props: HeroItemType) => { ...@@ -33,7 +33,7 @@ const HeroItem = (props: HeroItemType) => {
}, [order]); }, [order]);
return ( return (
<div <div
className={`flex min-h-[750px] h-[85vh] w-[148px] py-16 text-white justify-center className={`flex min-h-[750px] h-[85vh] w-[148px] py-16 text-white justify-center
${itemPosition ? "items-start" : " items-end"} ${itemPosition ? "items-start" : " items-end"}
`} `}
> >
...@@ -41,10 +41,13 @@ const HeroItem = (props: HeroItemType) => { ...@@ -41,10 +41,13 @@ const HeroItem = (props: HeroItemType) => {
<div className="hero font-sans font-extrabold text-9xl"> <div className="hero font-sans font-extrabold text-9xl">
<img src={img} /> <img src={img} />
</div> </div>
<div className="content-title-cn border-b-2 text-white w-[130px] my-3"> <div className="py-[10px] flex-cols items-center gap-x-[24px]">
{subtitle} <div className='sub-title-cn text-white'>
{subtitle}
</div>
<div className=" w-[80px] h-[2px] bg-white rounded"></div>
</div> </div>
<div className=" normal-text text-white">{content}</div> <div className=" w-[165px] normal-content text-white">{content}</div>
</div> </div>
</div> </div>
); );
...@@ -72,10 +75,10 @@ export default function Chain33() { ...@@ -72,10 +75,10 @@ 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-[1440px] relative "> <div className=" mx-auto -translate-y-[5%] 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-[20%] justify-center text-white">
<div> <div>
<div className="p-[42px] border-white border-[4px] rounded "> <div className="p-[42px] border-white border-[4px] rounded">
<div className="super-hero-title py-5 tracking-widest"> <div className="super-hero-title py-5 tracking-widest">
Chain33 Chain33
</div> </div>
...@@ -85,7 +88,7 @@ export default function Chain33() { ...@@ -85,7 +88,7 @@ export default function Chain33() {
</div> </div>
<div className="pt-16 flex justify-center items-center gap-x-3"> <div className="pt-16 flex justify-center items-center gap-x-3">
<StyledButton text="开源社区" <StyledButton text="开源社区"
onClick={()=>goLink('github')} onClick={()=>goLink('github')}
></StyledButton> ></StyledButton>
<StyledButton text="资源下载" <StyledButton text="资源下载"
onClick={()=>goLink('resource')} onClick={()=>goLink('resource')}
...@@ -105,46 +108,48 @@ export default function Chain33() { ...@@ -105,46 +108,48 @@ export default function Chain33() {
</div> </div>
</div> </div>
</PageLayout> </PageLayout>
<PageLayout className=" bg-[#084DFF] flex items-center justify-center"> <PageLayout className=" bg-[#084DFF] relative items-center justify-center">
<AppContianer className=""> <AppContianer className="flex items-center h-full w-full relative min-h-[750px] labtop:min-h-[960px] ">
<div className="flex justify-between items-center gap-x-5 min-h-[750px]"> <div className='centred -translate-y-[30px] w-full labtop:w-10/12 mx-auto'>
<HeroItem <div className="flex justify-between items-center gap-x-5 min-h-[750px]">
heroTitle="高" <HeroItem
img={Gao} heroTitle="高"
order={1} img={Gao}
subtitle={getItemData("高效")!.title} order={1}
content={getItemData("高效")!.context} subtitle={getItemData("高效")!.title}
></HeroItem> content={getItemData("高效")!.context}
<HeroItem ></HeroItem>
heroTitle="安" <HeroItem
img={An} heroTitle="安"
order={2} img={An}
subtitle={getItemData("安全")!.title} order={2}
content={getItemData("安全")!.context} subtitle={getItemData("安全")!.title}
></HeroItem> content={getItemData("安全")!.context}
<HeroItem ></HeroItem>
heroTitle="简" <HeroItem
img={Jian} heroTitle="简"
order={3} img={Jian}
subtitle={getItemData("简单")!.title} order={3}
content={getItemData("简单")!.context} subtitle={getItemData("简单")!.title}
></HeroItem> content={getItemData("简单")!.context}
<HeroItem ></HeroItem>
heroTitle="稳" <HeroItem
img={Weng} heroTitle="稳"
order={4} img={Weng}
subtitle={getItemData("稳定")!.title} order={4}
content={getItemData("稳定")!.context} subtitle={getItemData("稳定")!.title}
></HeroItem> content={getItemData("稳定")!.context}
<HeroItem ></HeroItem>
heroTitle="扩" <HeroItem
img={Kuo} heroTitle="扩"
order={5} img={Kuo}
subtitle={getItemData("高扩展性")!.title} order={5}
content={getItemData("高扩展性")!.context} subtitle={getItemData("高扩展性")!.title}
></HeroItem> content={getItemData("高扩展性")!.context}
</div> ></HeroItem>
</AppContianer> </div>
</div>
</AppContianer>
</PageLayout> </PageLayout>
</div> </div>
</ScrollView> </ScrollView>
......
src/views/Classes/index.tsx
View file @ 7c74aabc
...@@ -17,14 +17,14 @@ export const Classes = (props:ClassesType)=>{ ...@@ -17,14 +17,14 @@ export const Classes = (props:ClassesType)=>{
<div className='content-title-cn '>区块链赋能班</div> <div className='content-title-cn '>区块链赋能班</div>
<div className='hero-title'>Blockchain</div> <div className='hero-title'>Blockchain</div>
<div className='hero-title'>Open Class</div> <div className='hero-title'>Open Class</div>
<div className="normal-text mt-8">比特学堂致力于成为区块链领域的哈弗商学院</div> <div className="normal-content mt-8">比特学堂致力于成为区块链领域的哈弗商学院</div>
<div className="normal-text">培养下一代“区块链巨子”</div> <div className="normal-content">培养下一代“区块链巨子”</div>
<StyledButton text='购买课程' color="black" className="mt-20"></StyledButton> <StyledButton text='购买课程' color="black" className="mt-20"></StyledButton>
</div> </div>
<div className="right"> <div className="right">
<div className='flex gap-x-5'> <div className='flex gap-x-5'>
<div className='min-w-[32vw] min-h-[380px] bg-gray-600 rounded-md'></div> <div className='min-w-[32vw] min-h-[380px] bg-gray-600 rounded-md'></div>
<div className='normal-text'> <div className='normal-content'>
<div className='content-title-cn'>第一章</div> <div className='content-title-cn'>第一章</div>
<div> <span className='hero-title text-blue-600 inline'>1</span> <span className='content-title-cn'>课</span></div> <div> <span className='hero-title text-blue-600 inline'>1</span> <span className='content-title-cn'>课</span></div>
</div> </div>
...@@ -32,15 +32,15 @@ export const Classes = (props:ClassesType)=>{ ...@@ -32,15 +32,15 @@ export const Classes = (props:ClassesType)=>{
<div className='flex text-center mt-14 gap-x-5 items-end'> <div className='flex text-center mt-14 gap-x-5 items-end'>
<div className={activedItem===0?'item bg-white w-36 h-[200px] px-3 py-5 rounded-t-lg':''}> <div className={activedItem===0?'item bg-white w-36 h-[200px] px-3 py-5 rounded-t-lg':''}>
<div className={activedItem===0?"content-sub-title-cn":"content-sub-title-cn opacity-80"}>欢迎进入区块链世界</div> <div className={activedItem===0?"content-sub-title-cn":"content-sub-title-cn opacity-80"}>欢迎进入区块链世界</div>
<div className={activedItem===0?"py-2 normal-text":" hidden"}>第一章</div> <div className={activedItem===0?"py-2 normal-content":" hidden"}>第一章</div>
<div className={activedItem===0?"text-4xl font-galano":"text-4xl font-galano"}> <div className={activedItem===0?"text-4xl font-galano":"text-4xl font-galano"}>
1 1
</div> </div>
</div> </div>
<div className={activedItem!==0?'item bg-white w-36 px-3 py-5 rounded-t-lg':' bg-white/20 w-32 px-3 py-5 rounded-t-lg'}> <div className={activedItem!==0?'item bg-white w-36 px-3 py-5 rounded-t-lg':' bg-white/20 w-32 px-3 py-5 rounded-t-lg'}>
<div className={activedItem!==0?"content-sub-title-cn":"content-sub-title-cn opacity-80"}>欢迎进入区块链世界</div> <div className={activedItem!==0?"content-sub-title-cn":"content-sub-title-cn opacity-80"}>欢迎进入区块链世界</div>
<div className={activedItem!==0?"py-2 normal-text":" hidden"}>第一章</div> <div className={activedItem!==0?"py-2 normal-content":" hidden"}>第一章</div>
<div className={activedItem!==0?"text-4xl font-galano":"normal-text font-galano"}> <div className={activedItem!==0?"text-4xl font-galano":"normal-content font-galano"}>
2 2
</div> </div>
</div> </div>
......
src/views/News/NewsDetails.tsx
View file @ 7c74aabc
...@@ -48,14 +48,14 @@ export const NewsDetails = (props:NewsDetailsType)=>{ ...@@ -48,14 +48,14 @@ export const NewsDetails = (props:NewsDetailsType)=>{
<PageLayout className=" overflow-y-scroll"> <PageLayout className=" overflow-y-scroll">
<AppContianer> <AppContianer>
<> <>
<div className="flex"> <div className="flex w-full pt-[30px]">
<div className="w-2/12"></div> <div className="w-[170px]"></div>
<div className='title-1-cn '>{data&&data.title}</div> <div className='title-1-cn '>{data&&data.title}</div>
<div className='w-[370px]'></div> <div className='w-[370px]'></div>
</div> </div>
<div className="flex normal-text "> <div className="flex normal-content ">
<div className="w-2/12 pt-[35px]"> <div className="w-[170px] pt-[35px]">
<div className='flex-col pr-5 text-center '> <div className='flex-col pr-5 text-center '>
<div className='py-5'> <div className='py-5'>
<div>- 来源 -</div> <div>- 来源 -</div>
...@@ -86,7 +86,7 @@ export const NewsDetails = (props:NewsDetailsType)=>{ ...@@ -86,7 +86,7 @@ export const NewsDetails = (props:NewsDetailsType)=>{
<div> <div>
{ {
latestNews&&latestNews.map((k:any,index:number)=>( latestNews&&latestNews.map((k:any,index:number)=>(
<div key={index} onClick={()=>navigate(`/news/${k.id}`)} className="pb-[21px] w-[30px] normal-content cursor-pointer hover:text-theme-blue"> <div key={index} onClick={()=>navigate(`/news/${k.id}`)} className="pb-[21px] w-[300px] normal-content cursor-pointer hover:text-theme-blue">
<div>{k.title}</div> <div>{k.title}</div>
<div>{useDate(data&&data.time_stamp).year}/{useDate(data&&data.time_stamp).month}/{useDate(data&&data.time_stamp).day}</div> <div>{useDate(data&&data.time_stamp).year}/{useDate(data&&data.time_stamp).month}/{useDate(data&&data.time_stamp).day}</div>
</div> </div>
......
src/views/News/index.tsx
View file @ 7c74aabc
...@@ -43,33 +43,33 @@ export default function News(props: IAppProps) { ...@@ -43,33 +43,33 @@ export default function News(props: IAppProps) {
const useDate = useCallback((time: number)=>getDate(time),[]) const useDate = useCallback((time: number)=>getDate(time),[])
return ( return (
<PageLayout fullscreen gradientConfig={newsBg[0].config}> <PageLayout fullscreen gradientConfig={newsBg[0].config}>
<div className="flex h-screen w-full normal-text"> <div className="flex h-screen w-full normal-content">
<div className="left bg-blue-600 pt-16 h-full w-5/12 min-w-[650px] text-white "> <div className="left bg-blue-600 pt-16 h-full w-5/12 min-w-[650px] text-white ">
<div className="pl-28 h-[75%] mt-16 relative"> <div className="pl-28 h-[75%] mt-16 relative">
<div> <div>
<div className=" hero-title text-white">News</div> <div className=" hero-title text-white">News</div>
<div className=" sub-title-cn text-white">新闻动态</div> <div className="subTitle-1-cn text-white">新闻动态</div>
<div className="absolute bottom-0 "> <div className="absolute bottom-0 ">
<div className="w-12/12 content-1-cn text-white"> <div className="w-12/12 normal-content text-white">
提供区块链融合技术和产业链接的精选内容 提供区块链融合技术和产业链接的精选内容
</div>
<div className="w-12/12 normal-content text-white">帮助您紧跟落地实况和未来发展趋势</div>
</div> </div>
<div className="w-12/12 content-1-cn text-white">帮助您紧跟落地实况和未来发展趋势</div>
</div> </div>
</div> </div>
</div> </div>
</div> <div className="right h-full pt-28 w-7/12 relative" style={{boxSizing:"border-box"}}>
<div className="right h-full pt-28 w-7/12 relative" style={{boxSizing:"border-box"}}> <NewsScrollView>
<NewsScrollView> <div className="pb-[235px] ">
<div className="pb-[235px]"> <div className="news-list ">
<ul className="news-list -translate-x-[25px]"> {news.map((i, index) => (
{news.map((i, index) => ( <div onClick={()=>navigate(`/news/${i.id}`)} key={index}
<div onClick={()=>navigate(`/news/${i.id}`)} key={index}> className="hoverGlass w-full rounded-3xl flex max-w-[920px] my-[15px] min-w-[650px] gap-x-[20px] items-start"
<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="news-date min-w-[200px] flex text-white font-medium items-center ">
<div className="translate-y-3"> <div className="translate-y-[10px]">
<div className="int-font-sub"> <div className="int-font-sub">
{useDate(i.time_stamp).year}/ {useDate(i.time_stamp).year}/
</div> </div>
...@@ -83,21 +83,22 @@ export default function News(props: IAppProps) { ...@@ -83,21 +83,22 @@ export default function News(props: IAppProps) {
</div> </div>
</div> </div>
<div className="news-content text-black "> <div className="news-content text-black ">
<div className=" sub-title-cn"> <div className="sub-title-cn leading-[35px]">
{i.title} {i.title}
</div> </div>
<div className=" normal-text text-overflow:ellipsis line-clamp-3"> <div className=" normal-content text-overflow:ellipsis line-clamp-3">
{i.desc} {i.desc}
</div> </div>
</div> </div>
<div className='hover-cover'></div>
<span className='invisible'> <span className='invisible'>
<ChevronRightIcon className="w-5 h-5"></ChevronRightIcon> <ChevronRightIcon className="w-5 h-5"></ChevronRightIcon>
</span> </span>
</>
</HoverBox>
</div> </div>
))} ))}
</ul> </div>
<div className="pullup-tips"> <div className="pullup-tips">
{ {
loading? loading?
......
tailwind.config.js
View file @ 7c74aabc
...@@ -16,10 +16,17 @@ module.exports = withAnimations({ ...@@ -16,10 +16,17 @@ module.exports = withAnimations({
}, },
screens:{ screens:{
'moblie':"640px", 'moblie':"640px",
'table':"961px",
"labtop":"1920px", "labtop":"1920px",
"screen":"2881px",
} },
width:{
"pc-width":"1440pxx"
},
container: {
center:true,
padding: '120px',
},
}, },
}, },
plugins: [ plugins: [
......
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