From e11da789042da65d8a0cba429c8714c0a4c67cc2 Mon Sep 17 00:00:00 2001
From: wjh <wwwjh0710@163.com>
Date: Thu, 29 Aug 2024 16:33:43 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9B=B4=E6=96=B0=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E5=86=85=E5=AE=B9=20(#1495)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reviewed-on: https://git.daoyoucloud.com/daoyoucloud/tachybase/pulls/1495
Co-authored-by: wjh <wwwjh0710@163.com>
Co-committed-by: wjh <wwwjh0710@163.com>
---
 .../@hera/plugin-homepage/src/client/Home.tsx | 80 ++++++-----------
 .../@hera/plugin-homepage/src/client/style.ts | 90 ++++++-------------
 2 files changed, 58 insertions(+), 112 deletions(-)

diff --git a/packages/plugins/@hera/plugin-homepage/src/client/Home.tsx b/packages/plugins/@hera/plugin-homepage/src/client/Home.tsx
index f4af91139..1f87749c6 100644
--- a/packages/plugins/@hera/plugin-homepage/src/client/Home.tsx
+++ b/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 }>({
-    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>
   );
 };
diff --git a/packages/plugins/@hera/plugin-homepage/src/client/style.ts b/packages/plugins/@hera/plugin-homepage/src/client/style.ts
index 2088ea293..8de5bd930 100644
--- a/packages/plugins/@hera/plugin-homepage/src/client/style.ts
+++ b/packages/plugins/@hera/plugin-homepage/src/client/style.ts
@@ -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;
     }
   `,
 }));