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

Reviewed-on: daoyoucloud/tachybase#1495
Co-authored-by: wjh <wwwjh0710@163.com>
Co-committed-by: wjh <wwwjh0710@163.com>

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

@@ -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 }>({
+  const onClick = () => {
-    url: 'home_page_presentations:list',
+    window.location.href = '/admin';
-    params: {
+  };
-      'appends[]': 'pictures',
-    },
-  });
-
-  if (loading) {
-    return;
-  }
   const date = new Date();
   const year = date.getFullYear();
   return (
     <div className={styles.home}>
       <header>
-        <div className="headerStyle">
+        <Row className="headerStyle">
-          <span className="headerTitle">上海创兴建筑设备租赁有限公司</span>
+          <Col span={4}>
-          <ul>
+            <span className="headerTitle">上海创兴建筑设备租赁有限公司</span>
-            <li className="active">公司简介</li>
+          </Col>
-            <li>新闻中心</li>
+          <Col span={15}>
-            <li>产品展示</li>
+            <ul>
-            <li>工程案例</li>
+              <li className="active">公司简介</li>
-            <li>联系我们</li>
+              <li>新闻中心</li>
-          </ul>
+              <li>产品展示</li>
-        </div>
+              <li>工程案例</li>
+              <li>联系我们</li>
+            </ul>
+          </Col>
+          <Col span={5}>
+            <Button type="primary" onClick={onClick}>
+              管理系统入口
+            </Button>
+          </Col>
+        </Row>
       </header>
       <main>
-        <Carousel autoplay>
+        <Image
-          {data?.data?.map((item) => (
+          preview={false}
-            <div key={item.id}>
+          src="https://tachybase-1321007335.cos.ap-shanghai.myqcloud.com/de1b13e4e7f31e4b6c012f9290aff6dc.jpg"
-              <Image preview={false} src={item.pictures[0].url} />
+        />
-            </div>
+        <Button onClick={onClick}>管理系统入口</Button>
-          ))}
-        </Carousel>
       </main>
-      <footer>
+      <footer>©2023-{year} 上海道有云网络科技有限公司 版权所有 沪ICP备2023024678号</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>
     </div>
   );
 };

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

@@ -9,28 +9,27 @@ export const useStyles = createStyles(({ css }) => ({
     header {
       .headerStyle {
         width: 100%;
-        height: 60px;
+        height: 80px;
-        background-color: #f7f7f7;
         display: flex;
         align-items: center;
         border-radius: 8px;
-        box-shadow: 0 0 1px 1px #e3e3e3;
+        padding: 0px 20px 0px 20px;
-        padding: 0px 10px 0px 15px;
         .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 {
+      position: relative;
-        height: 500px;
+      img {
-        img {
+        width: 100%;
-          width: 100%;
+        height: auto;
-          height: auto;
-        }
       }
-      .ant-carousel .slick-dots-bottom {
+      .ant-btn {
-        bottom: 50px;
+        width: 10%;
-      }
+        height: 50px;
-      .ant-carousel .slick-dots li {
+        position: absolute;
-        width: 10px;
+        top: 48%;
-        height: 10px;
+        left: 56%;
-        border-radius: 50px;
+        border-radius: 20px;
-        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;
       }
     }
     footer {
+      position: absolute;
+      bottom: -30px;
       width: 100%;
-      display: flex;
+      text-align: center;
-      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;
-        }
-      }
     }
   `,
 }));