ruiling/tachybase_todo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 更新首页内容 (#1495)

Browse Source 
Reviewed-on: daoyoucloud/tachybase#1495
Co-authored-by: wjh <wwwjh0710@163.com>
Co-committed-by: wjh <wwwjh0710@163.com>
This commit is contained in:
wjh 2024-08-29 16:33:43 +08:00 committed by bai.zixv
parent b4ca48201b
commit e11da78904
2 changed files with 58 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
packages/plugins/@hera/plugin-homepage/src/client/Home.tsx
View File

@ -1,29 +1,24 @@
import React from 'react';
import { useRequest } from '@tachybase/client';
import { Carousel, Image } from 'antd';
import { Button, Col, Image, Row } from 'antd';
import { useStyles } from './style';
export const HomePage: React.FC<{}> = () => {
const { styles } = useStyles();
const { data, loading } = useRequest<{ data: any }>({
url: 'home_page_presentations:list',
params: {
'appends[]': 'pictures',
},
});
if (loading) {
return;
}
const onClick = () => {
window.location.href = '/admin';
};
const date = new Date();
const year = date.getFullYear();
return (
<div className={styles.home}>
<header>
<div className="headerStyle">
<Row className="headerStyle">
<Col span={4}>
<span className="headerTitle">上海创兴建筑设备租赁有限公司</span>
</Col>
<Col span={15}>
<ul>
<li className="active">公司简介</li>
<li>新闻中心</li>
@ -31,39 +26,22 @@ export const HomePage: React.FC<{}> = () => {
<li>工程案例</li>
<li>联系我们</li>
</ul>
</div>
</Col>
<Col span={5}>
<Button type="primary" onClick={onClick}>
管理系统入口
</Button>
</Col>
</Row>
</header>
<main>
<Carousel autoplay>
{data?.data?.map((item) => (
<div key={item.id}>
<Image preview={false} src={item.pictures[0].url} />
</div>
))}
</Carousel>
<Image
preview={false}
src="https://tachybase-1321007335.cos.ap-shanghai.myqcloud.com/de1b13e4e7f31e4b6c012f9290aff6dc.jpg"
/>
<Button onClick={onClick}>管理系统入口</Button>
</main>
<footer>
<ul>
<li>
<a>公司简介</a>
</li>
<li>
<a>真实合同</a>
</li>
<li>
<a>企业文化</a>
</li>
<li>
<a>联系我们</a>
</li>
<li>
<a href="/admin">管理系统入口</a>
</li>
</ul>
<div>
<span>©2023-{year} 上海道有云网络科技有限公司 版权所有 沪ICP备2023024678号</span>
</div>
</footer>
<footer>©2023-{year} 上海道有云网络科技有限公司 版权所有 沪ICP备2023024678号</footer>
</div>
);
};

84
packages/plugins/@hera/plugin-homepage/src/client/style.ts
View File

@ -9,28 +9,27 @@ export const useStyles = createStyles(({ css }) => ({
header {
.headerStyle {
width: 100%;
height: 60px;
background-color: #f7f7f7;
height: 80px;
display: flex;
align-items: center;
border-radius: 8px;
box-shadow: 0 0 1px 1px #e3e3e3;
padding: 0px 10px 0px 15px;
padding: 0px 20px 0px 20px;
.headerTitle {
height: 60px;
color: #6c6c6c;
font-size: 20px;
font-weight: 400;
line-height: 60px;
text-align: right;
}
ul {
color: #6c6c6c;
display: flex;
justify-content: space-evenly;
align-items: center;
height: 100%;
margin-top: 0;
margin-bottom: 0;
padding: 0 0 0 25px;
padding: 0 20px 0 20px;
li {
list-style: none;
padding-left: 5px;
@ -38,76 +37,45 @@ export const useStyles = createStyles(({ css }) => ({
text-align: center;
height: 100%;
line-height: 60px;
cursor: pointer;
&:hover {
background-color: #e3e3e3;
color: #3578e2;
}
}
.active {
background-color: #e3e3e3;
color: #3578e2;
}
}
.ant-btn {
width: 70%;
height: 50px;
&:hover {
color: white;
}
}
}
}
main {
padding: 20px 10px;
height: 500px;
div {
height: 500px;
position: relative;
img {
width: 100%;
height: auto;
}
}
.ant-carousel .slick-dots-bottom {
bottom: 50px;
}
.ant-carousel .slick-dots li {
width: 10px;
height: 10px;
border-radius: 50px;
border: 1px solid #ffffff;
}
.ant-carousel .slick-dots li button {
width: 10px;
height: 10px;
border-radius: 50px;
opacity: 0;
}
.ant-carousel .slick-dots li.slick-active button {
opacity: 1;
.ant-btn {
width: 10%;
height: 50px;
position: absolute;
top: 48%;
left: 56%;
border-radius: 20px;
}
}
footer {
position: absolute;
bottom: -30px;
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 22px;
a {
color: #3372af;
}
ul {
display: flex;
margin: 0;
bottom: 0;
li {
list-style: none;
a {
border-right: 1.5px solid black;
padding: 0 5px;
}
&:nth-last-child(1) a {
border-right: 0;
}
}
}
div {
a {
margin-left: 5px;
}
}
text-align: center;
}
`,
}));