Skip to content

W
web2022
Commit 584eb0ae authored by louyuqi's avatar louyuqi
Browse files
Options

Merge remote-tracking branch 'origin/main'

# Conflicts: # src/components/NewsScrollView.tsx
parents 5d1919fb 78d498f5
Show whitespace changes
Inline Side-by-side
Showing with 116 additions and 168 deletions
src/assets/img/logo.png
View replaced file @ 5d1919fb View file @ 584eb0ae
src/assets/img/logo.png

4.76 KB | W: | H:

src/assets/img/logo.png

5.06 KB | W: | H:

src/assets/img/logo.png
src/assets/img/logo.png
src/assets/img/logo.png
src/assets/img/logo.png
  • 2-up
  • Swipe
  • Onion skin
src/components/Navbar/index.tsx
View file @ 584eb0ae
...@@ -104,14 +104,14 @@ export default function Navbar(props: IAppProps) { ...@@ -104,14 +104,14 @@ export default function Navbar(props: IAppProps) {
(theme: string, active: boolean) => { (theme: string, active: boolean) => {
if (theme === "light") { if (theme === "light") {
if (active) { if (active) {
return "text-theme-dark content-sub2-title-cn py-0"; return "text-theme-dark content-sub2-title-cn py-0 hover:text-theme-blue";
} }
return "text-[#061E3B] font-normal"; return "text-[#061E3B] font-normal hover:text-theme-blue";
} else { } else {
if (active) { if (active) {
return "content-sub2-title-cn py-0 text-white"; return "content-sub2-title-cn py-0 text-white hover:opacity-100";
} }
return "font-normal py-0 text-white opacity-70 "; return "font-normal py-0 text-white opacity-70 hover:opacity-100";
} }
}, },
[data] [data]
...@@ -120,12 +120,12 @@ export default function Navbar(props: IAppProps) { ...@@ -120,12 +120,12 @@ export default function Navbar(props: IAppProps) {
<> <>
<nav className="invisible moblie:visible flex min-w-[1440px] justify-between absolute px-[120px] w-full top-0 z-[99999] py-6 text-sm text-[#061E3B] font-normal "> <nav className="invisible moblie:visible flex min-w-[1440px] justify-between absolute px-[120px] w-full top-0 z-[99999] py-6 text-sm text-[#061E3B] font-normal ">
<div className="left "> <div className="left ">
<img src={data.theme === "light" ? Logo : LogoWhite} onClick={()=>navigate('/')} className=" cursor-pointer"/> <img src={data.theme === "dark" || pathname ==='/news'? LogoWhite:Logo } onClick={()=>navigate('/')} className=" cursor-pointer"/>
</div> </div>
<div className="right content-1-cn items-start flex gap-x-12"> <div className="right content-1-cn items-start flex gap-x-12">
<Link <Link
to="/" to="/"
className={`hover:text-theme-blue ${ className={`${
pathname === "/" pathname === "/"
? themeStyle(data.theme, true) ? themeStyle(data.theme, true)
: themeStyle(data.theme, false) : themeStyle(data.theme, false)
...@@ -135,7 +135,7 @@ export default function Navbar(props: IAppProps) { ...@@ -135,7 +135,7 @@ export default function Navbar(props: IAppProps) {
</Link> </Link>
<Link <Link
to="chain33" to="chain33"
className={`hover:text-theme-blue ${ className={`${
pathname === "/chain33" pathname === "/chain33"
? themeStyle(data.theme, true) ? themeStyle(data.theme, true)
: themeStyle(data.theme, false) : themeStyle(data.theme, false)
...@@ -146,7 +146,7 @@ export default function Navbar(props: IAppProps) { ...@@ -146,7 +146,7 @@ export default function Navbar(props: IAppProps) {
<HoverLink theme={data.theme} /> <HoverLink theme={data.theme} />
<Link <Link
to="news" to="news"
className={`hover:text-theme-blue ${ className={`${
pathname === "/news" pathname === "/news"
? themeStyle(data.theme, true) ? themeStyle(data.theme, true)
: themeStyle(data.theme, false) : themeStyle(data.theme, false)
...@@ -157,7 +157,7 @@ export default function Navbar(props: IAppProps) { ...@@ -157,7 +157,7 @@ export default function Navbar(props: IAppProps) {
{/* <Link to='classes' className={`hover: text-theme-dark ${pathname ==='/classes'?' text-theme-dark':'text-[#061E3B] font-normal'}`}>公开课</Link> */} {/* <Link to='classes' className={`hover: text-theme-dark ${pathname ==='/classes'?' text-theme-dark':'text-[#061E3B] font-normal'}`}>公开课</Link> */}
<Link <Link
to="about" to="about"
className={`hover:text-theme-blue ${ className={`${
pathname === "/about" pathname === "/about"
? themeStyle(data.theme, true) ? themeStyle(data.theme, true)
: themeStyle(data.theme, false) : themeStyle(data.theme, false)
......
src/components/NewsScrollView.tsx
View file @ 584eb0ae
import {useAsyncState} from "@/common/hooks"; import { useAsyncState } from "@/common/hooks";
import {IProps} from "@/common/Iprops.interface"; import { IProps } from "@/common/Iprops.interface";
import BScroll from "@better-scroll/core"; import BScroll from "@better-scroll/core";
import {BScrollConstructor} from "@better-scroll/core/dist/types/BScroll"; import { BScrollConstructor } from "@better-scroll/core/dist/types/BScroll";
import MouseWheel from "@better-scroll/mouse-wheel"; import MouseWheel from "@better-scroll/mouse-wheel";
import ScrollBar from "@better-scroll/scroll-bar"; import ScrollBar from "@better-scroll/scroll-bar";
import ObserveDOM from '@better-scroll/observe-dom' import ObserveDOM from '@better-scroll/observe-dom'
import Pullup from '@better-scroll/pull-up' import Pullup from '@better-scroll/pull-up'
import { import { ForwardedRef, forwardRef, ForwardRefRenderFunction, useCallback, useEffect, useMemo, useRef, useState } from "react";
ForwardedRef,
forwardRef,
ForwardRefRenderFunction,
useCallback,
useEffect,
useMemo,
useRef,
useState
} from "react";
interface ScrollViewType extends IProps { interface ScrollViewType extends IProps {
wrapHeight?: string; wrapHeight?: string;
prop?: any; prop?: any;
} }
const initBScroll = (el: HTMLElement) => { const initBScroll = (el:HTMLElement) => {
const res = new BScroll(el, { const res = new BScroll(el, {
click: true, click: true,
mouseWheel: { mouseWheel: {
...@@ -31,17 +21,16 @@ const initBScroll = (el: HTMLElement) => { ...@@ -31,17 +21,16 @@ const initBScroll = (el: HTMLElement) => {
easeTime: 300, easeTime: 300,
}, },
pullUpLoad: { pullUpLoad: {
threshold: 100 threshold: 0
}, },
observeDOM: true, observeDOM: true,
probeType: 2, probeType:2,
// 显示滚动条, // 显示滚动条,
useTransition: true, useTransition:true,
scrollX: false, scrollX: false,
momentum: true, momentum: true,
scrollY: true, scrollY: true,
bounce: true, bounce: false,
stopPropagation: true, stopPropagation: true,
}) })
return res return res
...@@ -52,26 +41,21 @@ export const NewsScrollView = (props: ScrollViewType) => { ...@@ -52,26 +41,21 @@ export const NewsScrollView = (props: ScrollViewType) => {
BScroll.use(MouseWheel); BScroll.use(MouseWheel);
BScroll.use(Pullup) BScroll.use(Pullup)
BScroll.use(ObserveDOM); BScroll.use(ObserveDOM);
const {wrapHeight, children} = props; const { wrapHeight, children } = props;
const wrapRef = useRef<HTMLDivElement>(null); const wrapRef = useRef<HTMLDivElement>(null);
const [scrollObj, setScrollObj] = useState<BScrollConstructor<{}>>(); const [scrollObj, setScrollObj] = useState<BScrollConstructor<{}>>();
useEffect(() => { useEffect(()=>{
const scrollEl = initBScroll(wrapRef.current as HTMLDivElement) const scrollEl = initBScroll(wrapRef.current as HTMLDivElement)
// scrollEl.minScrollY=0
setScrollObj(scrollEl) setScrollObj(scrollEl)
// scrollEl.on('scroll',()=>{
// scrollEl.minScrollY=0
// })
return () => { return () => {
scrollObj?.destroy(); scrollObj?.destroy();
}; };
}, [wrapRef]) },[wrapRef])
return ( return (
<div className=" h-full overflow-hidden pb-5 ml-[-200px]" ref={wrapRef}> <div className=" h-full overflow-hidden -translate-x-[200px]" ref={wrapRef}>
{children} {children}
......
src/store/AppProvider.tsx
View file @ 584eb0ae
...@@ -45,8 +45,11 @@ export const AppProvider = (props: any)=>{ ...@@ -45,8 +45,11 @@ export const AppProvider = (props: any)=>{
useEffect(()=>{ useEffect(()=>{
const ob = fromEvent(window,'resize') const ob = fromEvent(window,'resize')
ob.subscribe(v=>{ ob.subscribe(v=>{
console.log(v,1111); const target = v.currentTarget
if(target){
console.log(target);
}
}) })
}) })
return( return(
......
src/style.css
View file @ 584eb0ae
...@@ -64,9 +64,7 @@ ...@@ -64,9 +64,7 @@
.normal-text{ .normal-text{
@apply text-theme-dark text-[12px] tracking-wide font-cnnote font-normal @apply text-theme-dark text-[12px] tracking-wide font-cnnote font-normal
} }
.des-cn{
@apply font-galano font-light text-theme-dark text-[14px]
}
.table-header{ .table-header{
@apply text-white bg-black py-3 px-2 font-cnnote @apply text-white bg-black py-3 px-2 font-cnnote
} }
...@@ -81,7 +79,7 @@ ...@@ -81,7 +79,7 @@
@apply visible transition-all duration-150 @apply visible transition-all duration-150
} }
.featuresGrid{ .featuresGrid{
@apply grid grid-cols-2 w-full labtop:w-10/12 gap-y-[1rem] gap-x-[3.5rem] screen:gap-y-[5rem] screen:gap-x-[10rem] @apply grid grid-cols-2 w-full
} }
} }
boby{ boby{
......
src/views/About/Contact/index.tsx
View file @ 584eb0ae
...@@ -3,34 +3,7 @@ import { AppContianer } from "@/layouts/AppContianer"; ...@@ -3,34 +3,7 @@ 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",
},
];
return (
<div className=" grid grid-cols-2">
{telInfo.map((tel, index) => {
return (
<div key={index}>
<div>{tel.location}</div>
<div>{tel.tel}</div>
</div>
);
})}
</div>
);
};
const data = [ const data = [
{ {
...@@ -60,7 +33,7 @@ export const Contact = () => { ...@@ -60,7 +33,7 @@ export const Contact = () => {
<div className="subTitle-1-cn">联系我们</div> <div className="subTitle-1-cn">联系我们</div>
</div> </div>
<div className="grid grid-cols-2 gap-x-[100px] 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="content-1-cn">{i.location}</div>
...@@ -70,20 +43,20 @@ export const Contact = () => { ...@@ -70,20 +43,20 @@ export const Contact = () => {
</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> <a className="sub-title-cn">support@33.cn</a>
</div> </div>
<div className="locations flex items-start gap-x-[100px] 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 content-1-cn">
<div className='sub-title-cn'>杭州西湖区办公室</div> <div className='content-sub2-title-cn'>杭州西湖区办公室</div>
<div className='py-3 content-1-cn'> <div className='py-1 content-1-cn'>
<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 content-1-cn">
<div className='sub-title-cn'>杭州滨江办公室</div> <div className='content-sub2-title-cn'>杭州滨江办公室</div>
<div className='py-3'> <div className='py-1 content-1-cn'>
<div>浙江省杭州市滨江区</div> <div>浙江省杭州市滨江区</div>
<div>东方通信科技城</div> <div>东方通信科技城</div>
</div> </div>
......
src/views/About/JoinUs/index.tsx
View file @ 584eb0ae
...@@ -30,8 +30,8 @@ const DataGrid = (props: DataGridType) => { ...@@ -30,8 +30,8 @@ const DataGrid = (props: DataGridType) => {
<> <>
<div> <div>
<div className="content-title-cn h-[48px] 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-content'>{i.diploma}</div>
<div className='normal-text'>{i.location}</div> <div className='normal-content'>{i.location}</div>
</div> </div>
<span className='invisible'> <span className='invisible'>
<ChevronRightIcon className="w-5 h-5"></ChevronRightIcon> <ChevronRightIcon className="w-5 h-5"></ChevronRightIcon>
...@@ -48,11 +48,11 @@ const DtailContainer = (props: DtailContainerType) => { ...@@ -48,11 +48,11 @@ const DtailContainer = (props: DtailContainerType) => {
return ( return (
<div className={className+ " -translate-y-[8px]"}> <div className={className+ " -translate-y-[8px]"}>
<div className={`flex hover:text-theme-blue items-center `}> <div onClick={() => doCancelSelecteItem(undefined)} className={`flex normal-content 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)}
className=" cursor-pointer " className="cursor-pointer "
> >
返回 返回
</div> </div>
...@@ -61,11 +61,9 @@ const DtailContainer = (props: DtailContainerType) => { ...@@ -61,11 +61,9 @@ const DtailContainer = (props: DtailContainerType) => {
<div className='py-[5px]'> <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>
{/* <a href="mailto: hr@33.cn" className='normal-text block h-[40px] leading-[40px] tracking-widest cursor-pointer rounded-full px-8 bg-black text-white'> 我要应聘</a> */}
{/* <StyledButton text='我要应聘' color="black" onClick={() =>sendEmail}></StyledButton> */}
</div> </div>
<div className='normal-text'>{data.diploma}</div> <div className='normal-content'>{data.diploma}</div>
<div className='normal-text'>{data.location}</div> <div className='normal-content'>{data.location}</div>
</div> </div>
<div className='py-[5px]'> <div className='py-[5px]'>
<div className='content-sub-title-cn'>岗位描述</div> <div className='content-sub-title-cn'>岗位描述</div>
...@@ -83,7 +81,7 @@ const DtailContainer = (props: DtailContainerType) => { ...@@ -83,7 +81,7 @@ const DtailContainer = (props: DtailContainerType) => {
))} ))}
</div> </div>
</div> </div>
<div className='content-sub2-title-cn'>有意向者请投简历到该邮箱：<a href="mailto: hr@33.cn">hr@33.cn</a> </div> <div className='content-sub2-title-cn'>有意向者请投简历到该邮箱：hr@33.cn</div>
</div> </div>
); );
}; };
......
src/views/Baas33/Advantages/index.tsx
View file @ 584eb0ae
...@@ -5,35 +5,28 @@ interface AdvantagesType extends IProps{ ...@@ -5,35 +5,28 @@ interface AdvantagesType extends IProps{
} }
const AdvantagesList = ()=>{ const AdvantagesList = ()=>{
const data =[
{
title:'高效',
text:'平行侧链之间交易可以并行执行，交易效率大大提升。'
},
{
title:'稳定',
text:'支持“主链+平行链”分层区块链架构，主链上只允许基础核心的合约，稳定性强，进而保证整个区块链网络的稳定。'
},
{
title:'安全',
text:'采用代理重加密加秘钥分片的方案，实现数据可分享型存储，保障数据隐私。支持国标标准SM2、SM3、SM4。'
},
{
title:'低成本',
text:'提供便捷部署的BAAS服务，实现可视化安装，智能合约IDE工具，节约成本。'
}
]
return( return(
<div className='flex flex-col gap-y-[60px] mt-[48px]'> <div className='flex flex-col gap-y-[60px] mt-[48px]'>
{ <div className='relative '>
data.map((i,index)=>( <span className='absolute title-1-cn text-[90px] -top-[2rem] -left-[2rem] opacity-10'>1</span>
<div key={index} className='relative '> <div className='title-2-cn border-black border-b-[3px] w-[90px]'>高效</div>
<span className='absolute title-1-cn text-[90px] -top-[2rem] -left-[2rem] opacity-10'>{index+1}</span> <div className='pt-2 content-1-cn'>平行侧链之间交易可以并行执行，交易效率大大提升。</div>
<div className='title-2-cn border-black border-b-[3px] w-[90px]'>{i.title}</div> </div>
<div className='pt-2 content-1-cn'>{i.text}</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 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'>提供便捷部署的BAAS服务，实现可视化安装，<br/>智能合约IDE工具，节约成本。</div>
</div> </div>
))
}
</div> </div>
) )
} }
......
src/views/Baas33/Features/index.tsx
View file @ 584eb0ae
...@@ -5,34 +5,24 @@ interface FeaturesType extends IProps{ ...@@ -5,34 +5,24 @@ interface FeaturesType extends IProps{
} }
const FeaturesGrid = ()=>{ const FeaturesGrid = ()=>{
const data = [
{
title:'快速构建',
text:'支持一键快速构建联盟链、平行链等区块链网络'
},
{
title:'隐私保护',
text:'提供权限管理、身份关联、数据加密等方式保证数据安全'
},
{
title:'灵活部署',
text:'支持节点一键自动化部署省去手动部署等大量时间和精力'
},
{
title:'多组件支持',
text:'智能合约模块可插拔 支持智能合约语言的多样化包括Solidity,Java,C++和Golang等成熟开发语言'
}
]
return( return(
<div className="featuresGrid"> <div className="featuresGrid">
{ <div className='w-full pb-[48px] mr-[90px]'>
data.map((i,index)=>( <div className='title-2-cn'>快速构建</div>
<div key={index} className='max-w-[320px] min-w-[280px] pb-[48px] mr-[90px]'> <div className='content-1-cn pt-[14px]'>支持一键快速构建联盟链、平行链等区块链网络</div>
<div className='title-2-cn'>{i.title}</div> </div>
<div className='content-1-cn pt-[14px]'>{i.text}</div> <div className='w-full pb-[48px] mr-[90px]'>
<div className='title-2-cn'>隐私保护</div>
<div className='content-1-cn pt-[14px]'>提供权限管理、身份关联、数据加密等方式保证<br/>数据安全</div>
</div>
<div className='w-full pb-[48px] mr-[90px]'>
<div className='title-2-cn'>灵活部署</div>
<div className='content-1-cn pt-[14px]'>支持节点一键自动化部署省去手动部署等大量时<br/> 间和精力</div>
</div>
<div className='w-full pb-[48px] mr-[90px]'>
<div className='title-2-cn'>多组件支持</div>
<div className='content-1-cn pt-[14px]'>智能合约模块可插拔 支持智能合约语言的多样化<br/>包括Solidity,Java,C++和Golang等成熟开发语<br/>言</div>
</div> </div>
))
}
</div> </div>
) )
} }
...@@ -64,11 +54,11 @@ export const Features = (props: FeaturesType)=>{ ...@@ -64,11 +54,11 @@ export const Features = (props: FeaturesType)=>{
<div className="right 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 pb-[14px]'>弹性扩展</div>
<div className='content-1-cn'>支持联盟节点动态增删</div> <div className='content-1-cn'>支持联盟节点动态增删</div>
</div> </div>
<div className='max-w-[320px] min-w-[280px] mt-[46px]'> <div className='max-w-[320px] min-w-[280px] mt-[46px]'>
<div className='title-2-cn'>运维监控</div> <div className='title-2-cn pb-[14px]'>运维监控</div>
<div className='content-1-cn'>支持区块链节点及硬件资源的实时监控</div> <div className='content-1-cn'>支持区块链节点及硬件资源的实时监控</div>
</div> </div>
</div> </div>
......
src/views/Baas33/Service/index.tsx
View file @ 584eb0ae
...@@ -4,7 +4,7 @@ import { AppContianer } from "@/layouts/AppContianer"; ...@@ -4,7 +4,7 @@ import { AppContianer } from "@/layouts/AppContianer";
import { CheckIcon } from "@heroicons/react/solid"; import { CheckIcon } from "@heroicons/react/solid";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import trangle from "@/assets/svg/trangle.svg"; import trangle from "@/assets/svg/trangle.svg";
import selectImg from "@/assets/img/selected.png"
interface ServiceType extends IProps {} interface ServiceType extends IProps {}
const ServiceList = () => { const ServiceList = () => {
...@@ -56,21 +56,24 @@ const ServiceList = () => { ...@@ -56,21 +56,24 @@ const ServiceList = () => {
className="relative cursor-pointer w-[300px] py-[40px] px-[40px] bg-white/40 h-[460px] rounded-[2.5rem] " 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="sub-title-cn border-black py-5">{i.title}</div>
<div className="pt-2 des-cn">{i.text}</div> <div className="pt-2 content-sub-title-cn font-normal">{i.text}</div>
<ul className="py-5 des-cn font-bold"> <ul className="py-5 content-sub-title-cn ">
{i.features.map((k, x) => ( {i.features.map((k, x) => (
<li className="my-1 flex" key={"child" + x}> <div className="my-1 flex normal-content items-start" key={"child" + x}>
<CheckIcon className="w-5 h-5 " />
<div className="pl-3">{k}</div> <img src={selectImg} />
</li>
<div className="pl-3 -translate-y-[3px] font-bold">{k}</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-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 className="content-sub-title-cn cursor-pointer flex items-center gap-x-3">
<div>介绍详情</div> <div>介绍详情</div>
<img src={trangle} className="w-2" /> <img src={trangle} />
</div> </div>
<div className="des-cn font-bold 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>
<span>/年</span> <span>/年</span>
</div> </div>
......
src/views/News/NewsDetails.tsx
View file @ 584eb0ae
...@@ -47,9 +47,11 @@ export const NewsDetails = (props:NewsDetailsType)=>{ ...@@ -47,9 +47,11 @@ export const NewsDetails = (props:NewsDetailsType)=>{
return( return(
<PageLayout className=" overflow-y-scroll"> <PageLayout className=" overflow-y-scroll">
<AppContianer> <AppContianer>
<>
<div className="flex normal-text "> <div className="flex normal-text ">
<div className="w-2/12"> <div className="w-2/12 pt-[35px]">
<div className='flex-col pr-5 pt-12 text-center '> <div className='flex-col pr-5 text-center '>
<div className='py-5'> <div className='py-5'>
<div>- 来源 -</div> <div>- 来源 -</div>
<div className='content-sub-title-cn'>杭州复杂美科技</div> <div className='content-sub-title-cn'>杭州复杂美科技</div>
...@@ -57,7 +59,9 @@ export const NewsDetails = (props:NewsDetailsType)=>{ ...@@ -57,7 +59,9 @@ export const NewsDetails = (props:NewsDetailsType)=>{
<div className='py-5'> <div className='py-5'>
<div>- 日期 -</div> <div>- 日期 -</div>
<div className=' hero-title'>{useDate(data&&data.time_stamp).day}</div> <div className=' hero-title'>{useDate(data&&data.time_stamp).day}</div>
<div className='content-sub-title-cn'>{useDate(data&&data.time_stamp).year}/{useDate(data&&data.time_stamp).month}</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>
...@@ -65,25 +69,29 @@ export const NewsDetails = (props:NewsDetailsType)=>{ ...@@ -65,25 +69,29 @@ export const NewsDetails = (props:NewsDetailsType)=>{
</div> </div>
</div> </div>
</div> </div>
<div className="w-8/12"> <div >
<div className='richRender pt-5 px-20 pb-24'> <div className='richRender pt-5 px-20 pb-24'>
<div className='title-1-cn'>{data&&data.title}</div> <div className='title-1-cn py-[24px]'>{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>
</div> </div>
<div className='w-2/12 '> <div className='pt-[35px]'>
<div className='flex-col pt-12'> <div className='flex-col '>
<div className='content-sub-title-cn'>最新消息</div> <div className='content-sub-title-cn pb-[15px]'>最新消息</div>
<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="py-1 normal-text cursor-pointer hover:text-theme-blue">{k.title}</div> <div key={index} onClick={()=>navigate(`/news/${k.id}`)} className="pb-[21px] w-[370px] normal-content cursor-pointer hover:text-theme-blue">
<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>
)) ))
} }
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</>
</AppContianer> </AppContianer>
</PageLayout> </PageLayout>
) )
......
src/views/News/index.tsx
View file @ 584eb0ae
...@@ -62,7 +62,7 @@ export default function News(props: IAppProps) { ...@@ -62,7 +62,7 @@ export default function News(props: IAppProps) {
</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='mb-12 pb-[200px]'> <div className="pb-[235px]">
<ul className="news-list -translate-x-[25px]"> <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}>
...@@ -77,15 +77,16 @@ export default function News(props: IAppProps) { ...@@ -77,15 +77,16 @@ export default function News(props: IAppProps) {
{useDate(i.time_stamp).month}/ {useDate(i.time_stamp).month}/
</div> </div>
</div> </div>
<div className="int-font-hero border-white text-right border-b-2"> <div className="int-font-hero border-white text-right flex-cols">
{useDate(i.time_stamp).day} <div>{useDate(i.time_stamp).day}</div>
<div className='w-10/12 border-t-2 border-white translate-x-[5px]'></div>
</div> </div>
</div> </div>
<div className="news-content text-black "> <div className="news-content text-black ">
<div className="title text-lg py-2 text-overflow: ellipsis line-clamp-2"> <div className=" sub-title-cn">
{i.title} {i.title}
</div> </div>
<div className="text-sm opacity-75 indent-8 text-overflow: ellipsis line-clamp-3"> <div className=" normal-text text-overflow:ellipsis line-clamp-3">
{i.desc} {i.desc}
</div> </div>
</div> </div>
...@@ -98,9 +99,6 @@ export default function News(props: IAppProps) { ...@@ -98,9 +99,6 @@ export default function News(props: IAppProps) {
))} ))}
</ul> </ul>
<div className="pullup-tips"> <div className="pullup-tips">
{/* <div className="before-trigger">
<span className="pullup-txt">Pull up and load more</span>
</div> */}
{ {
loading? loading?
<div className="after-trigger"> <div className="after-trigger">
......
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