fix: 更新首页内容 (#1495)
Reviewed-on: daoyoucloud/tachybase#1495 Co-authored-by: wjh <wwwjh0710@163.com> Co-committed-by: wjh <wwwjh0710@163.com>
This commit is contained in:
parent
b4ca48201b
commit
e11da78904
@ -1,69 +1,47 @@
|
||||
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">
|
||||
<span className="headerTitle">上海创兴建筑设备租赁有限公司</span>
|
||||
<ul>
|
||||
<li className="active">公司简介</li>
|
||||
<li>新闻中心</li>
|
||||
<li>产品展示</li>
|
||||
<li>工程案例</li>
|
||||
<li>联系我们</li>
|
||||
</ul>
|
||||
</div>
|
||||
<Row className="headerStyle">
|
||||
<Col span={4}>
|
||||
<span className="headerTitle">上海创兴建筑设备租赁有限公司</span>
|
||||
</Col>
|
||||
<Col span={15}>
|
||||
<ul>
|
||||
<li className="active">公司简介</li>
|
||||
<li>新闻中心</li>
|
||||
<li>产品展示</li>
|
||||
<li>工程案例</li>
|
||||
<li>联系我们</li>
|
||||
</ul>
|
||||
</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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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;
|
||||
img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
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;
|
||||
}
|
||||
`,
|
||||
}));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user