feat:首页开发未完成

.umirc.ts

@@ -1,10 +1,26 @@
-import { defineConfig } from 'umi';
+import { defineConfig } from "umi";
 
 export default defineConfig({
   hash: true,
+  publicPath: "/",
+  targets: { ie: 11 },
   nodeModulesTransform: {
-    type: 'none',
+    type: "none",
   },
   fastRefresh: {},
-  proxy: {},
+  ssr: {
+    // 更多配置
+    // forceInitial: false,
+    removeWindowInitialProps: true,
+    devServerRender: false,  // 默认为true
+    mode: "string",
+    staticMarkup: false,
+  },
+  proxy: {
+    "/api/": {
+      target: "http://127.0.0.1:8081", //转发接口地址
+      changeOrigin: true,
+      pathRewrite: { "^": "" },
+    },
+  },
 });

src/global.less

@@ -113,6 +113,10 @@ body {
   border-color: #2bb2a8 !important;
 }
 
+.ant-btn-primary {
+  background: #2bb2a8 !important;
+  border-color: #2bb2a8 !important;
+}
 .ant-tabs-ink-bar {
   background-color: #2bb2a8;
   height: 4px !important;

src/layouts/BaseLayout.less

@@ -6,6 +6,7 @@
     .ant-layout-content {
       min-height: calc(100vh - 602px);
       background: #ffffff;
+      // background-color: #f5f5f5;
       opacity: 0.96;
     }
   }

src/layouts/components/TopMenu/TopMenu.less

@@ -11,16 +11,7 @@
   }
 
   :global {
-    .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal)
+
-      .ant-menu-item-selected {
-      background-color: white !important;
-      color: #2bb2a8 !important;
-    }
-    .ant-menu.ant-menu-dark,
-    .ant-menu-dark .ant-menu-sub,
-    .ant-menu.ant-menu-dark .ant-menu-sub {
-      background-color: white !important;
-    }
     .ant-menu-dark .ant-menu-item:hover,
     .ant-menu-dark .ant-menu-item-active,
     .ant-menu-dark .ant-menu-submenu-active,

src/locales/zh_CN.js

@@ -93,6 +93,25 @@ export default {
   cp3: "全自动血小板功能分析仪产品线",
   cp4: "POCT化学发光免疫分析仪产品线",
   cp5: "全自动凝血免疫分析仪产品线",
-
+  ckcezs: "查看CE证书",
+  cpxq: "产品详情",
+  cptd: "产品特点",
+  lcyy: "临床应用",
+  wmdys: "我们的优势",
+  wmdysInfo:
+    "公司专注于血型检测领域，坚持提供最优秀的、适合中国市场的产品及技术服务 坚持以最真诚和负责的态度努力成为输血界可依赖的长期合作伙伴",
+  ys1: "丰富的行业经验",
+  ys1Info: "成立于 2016 年，是由资深的行业精英顺应时代和行业的发展应运 组建",
+  ys2: "一流的产品质量",
+  ys2Info:
+    "拥有强大的服务团队，为客户承载优秀产品的推广销售、售后服务、产品物流等环节工作",
+  ys3: "完美的技术支持",
+  ys3Info:
+    "公司专注于血型检测领域，坚持提供最优秀的、适合中国市场的产品及技术服务",
+  ys4: "真诚的服务态度",
+  ys4Info:
+    "为实现标准化、自动化、数字化而倾心付出，服务“输血安全事业是我们矢志不渝的追求",
+  qywh: "企业 文化",
+  ryzz: "荣誉 资质",
   test: "",
 };

src/pages/Home/index.js

@@ -1,10 +1,20 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Button, Carousel, Image } from "antd";
+import GreenLine from "../../components/GreenLine";
 import bg1 from "../../assets/img_guanyu@3x.png";
 import bg2 from "../../assets/img_guanyu_2@3x.png";
 import bg3 from "../../assets/img_qiye@3x.png";
 import bg4 from "../../assets/img_rongyu@3x.png";
 import bg5 from "../../assets/img_banner@3x.png";
+import bg6 from "../../assets/img_youshi@3x.png";
+
+import img1 from "../../assets/icon_gengduo@3x.png";
+import img3 from "../../assets/img_youshi_1@3x.png";
+import img4 from "../../assets/img_youshi_2@3x.png";
+import img5 from "../../assets/img_youshi_3@3x.png";
+import img6 from "../../assets/img_youshi_4@3x.png";
+
+import { testRequest } from "../../services/public";
 
 import { getLocale } from "../../utils";
 
@@ -14,6 +24,36 @@ const IndexPage = (props) => {
   console.log(props);
   const locale = getLocale();
 
+  // 测试接口
+  useEffect(() => {
+    getData();
+  }, []);
+
+  const getData = async () => {
+    const res = await testRequest({ id: 1 });
+  };
+  const ysImgList = [
+    {
+      imgUrl: img3,
+      title: locale.ys1,
+      info: locale.ys1Info,
+    },
+    {
+      imgUrl: img4,
+      title: locale.ys2,
+      info: locale.ys2Info,
+    },
+    {
+      imgUrl: img5,
+      title: locale.ys3,
+      info: locale.ys3Info,
+    },
+    {
+      imgUrl: img6,
+      title: locale.ys4,
+      info: locale.ys4Info,
+    },
+  ];
   return (
     <div className={styles.root}>
       <div className={styles.content}>
@@ -32,18 +72,36 @@ const IndexPage = (props) => {
         </div>
         <div className={styles.gywmBox}>
           <img src={bg1} width="100%" height="469" />
-          <span className={styles.whiteTitle}>{locale.gywm}</span>
+          {/* <span className={styles.whiteTitle}>{locale.gywm}</span> */}
-          <img src={bg2} width="100%" height="353" />
           <div className={styles.jjBox}>
             <div className={styles.jjTitle}>{locale.gywmjj}</div>
             <div className={styles.jjInfo}>{locale.jjInfo}</div>
-            <Button type="primary">{locale.jjBtn}</Button>
+            <Button className={styles.btn} type="primary">
+              {locale.jjBtn}
+              <img src={img1} width="33px" />
+            </Button>
           </div>
           <div className={styles.qywhBox}>
             <img src={bg3} width="368" height="311" />
+            {locale.qywh}
           </div>
           <div className={styles.zzryBox}>
             <img src={bg4} width="368" height="311" />
+            {locale.ryzz}
+          </div>
+        </div>
+        <div className={styles.ysBox}>
+          <div className={styles.ysTitle}>{locale.wmdys}</div>
+          <div className={styles.ysInfo}>{locale.wmdysInfo} </div>
+          <div className={styles.list}>
+            {ysImgList?.map((item, index) => (
+              <div className={styles.item} key={`jstd-item-${index}`}>
+                <img src={item.imgUrl} />
+                <div className={styles.title}>{item.title}</div>
+                <GreenLine width="114px" height="2px" />
+                <div className={styles.info}>{item.info}</div>
+              </div>
+            ))}
           </div>
         </div>
       </div>

src/pages/Home/index.less

@@ -60,10 +60,14 @@
         left: calc(50% - 25px);
       }
       .jjBox {
-        position: absolute;
+        position: relative;
-        bottom: 111px;
+        padding: 40px 10% 111px;
-        left: 10%;
+        // bottom: 111px;
-        width: 486px;
+        // left: 10%;
+        // width: 486px;
+        background-image: url(../../assets/img_guanyu_2@3x.png);
+        background-size: cover; /* 确保图片覆盖整个元素 */
+        background-position: center; /* 将图片居中显示 */
         .jjTitle {
           font-weight: bold;
           font-size: 24px;
@@ -75,6 +79,22 @@
           font-size: 16px;
           color: #595a61;
           line-height: 32px;
+          word-break: break-all;
+          max-width: 30%;
+        }
+        .btn {
+          width: 245px;
+          height: 48px;
+          margin-top: 57px;
+          font-family: Source Han Sans SC;
+          font-weight: 500;
+          font-size: 22px;
+          color: #ffffff;
+          line-height: 34px;
+          img {
+            margin-left: 10px;
+            margin-top: -6px;
+          }
         }
       }
       .qywhBox {
@@ -88,5 +108,61 @@
         bottom: 111px;
       }
     }
+    .ysBox {
+      padding: 130px 10%;
+      position: relative;
+      background-image: url(../../assets/img_youshi@3x.png);
+      background-size: cover; /* 确保图片覆盖整个元素 */
+      background-position: center; /* 将图片居中显示 */
+      .ysTitle {
+        font-family: Source Han Sans SC;
+        font-weight: bold;
+        font-size: 38px;
+        color: #000000;
+        line-height: 64px;
+        text-align: center;
+      }
+      .ysInfo {
+        font-family: Source Han Sans SC;
+        font-weight: 400;
+        font-size: 22px;
+        color: #595a61;
+        line-height: 40px;
+        margin: 30px auto 100px;
+        text-align: center;
+        max-width: 807px;
+        word-break: break-all;
+      }
+      .list {
+        margin-top: 60px;
+        display: grid;
+        grid-template-columns: 1fr 1fr 1fr 1fr;
+        grid-column-gap: 160px;
+        .item {
+          text-align: center;
+          img {
+            width: 118px;
+            height: 118px;
+            margin-bottom: 39px;
+          }
+          .title {
+            font-family: Source Han Sans SC;
+            font-weight: 400;
+            font-size: 28px;
+            color: #000000;
+            line-height: 34px;
+            margin-bottom: 12px;
+          }
+          .info {
+            font-family: Source Han Sans SC;
+            font-weight: 300;
+            font-size: 16px;
+            color: #595a61;
+            line-height: 32px;
+            word-break: break-all;
+          }
+        }
+      }
+    }
   }
 }

src/pages/agreement/index.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { Divider, Button } from "antd";
+import { getLocale } from "../../utils";
+import styles from "./index.less";
+import GreenLine from "../../components/GreenLine";
+import CusBreadcrumb from "../../components/CusBreadcrumb";
+import PageHeaderInfo from "../../components/PageHeaderInfo";
+
+import img1 from "../../assets/img_guanyuwomen@3x.png";
+
+const IndexPage = (props) => {
+  const locale = getLocale();
+  const { history } = props;
+
+  return (
+    <div className={styles.root}>
+      <CusBreadcrumb
+        breadcrumbMenus={[
+          {
+            key: "/argument",
+            text: "免责声明&隐私政策",
+          },
+        ]}
+      />
+      <div className={styles.content}>
+        <pre>{`<p>富文本内容测试</p><p>1，跟</p><p>2，跟</p><p>3，跟</p><p><b>飒飒的xxxxxxxxxxx</b></p><p style="text-align: right;">x</p><p><br></p>`}</pre>
+      </div>
+    </div>
+  );
+};
+
+export default IndexPage;

src/pages/agreement/index.less

@@ -0,0 +1,12 @@
+.root {
+  padding: 0 10%;
+  background-color: #f5f5f5;
+  min-height: calc(100vh - 602px);
+
+  .content {
+    padding: 20px 0 40px;
+    pre {
+      white-space: pre-wrap; /* 保留空白符，自动换行 */
+    }
+  }
+}

src/pages/product-center/detail/index.js

@@ -1,17 +1,20 @@
 import React, { useState } from "react";
-import { Row, Col } from "antd";
+import { Image } from "antd";
 
 import { getLocale } from "../../../utils";
 import styles from "./index.less";
 import CusBreadcrumb from "../../../components/CusBreadcrumb";
 
 import img1 from "../../../assets/img_chanpin_1@3x.png";
+import img2 from "../../../assets/img_chnapin_2@3x.png";
+import img3 from "../../../assets/img_chanpin_3@3x.png";
+import img4 from "../../../assets/img_chanpin_4@3x.png";
 
 const FullCertificate = (props) => {
   const { location = {} } = props; // activeTab
   const { id, tabName, tabValue } = location?.query || {}; // activeTab
   const locale = getLocale();
-
+  const [visible, setVisible] = useState(false);
   return (
     <div className={styles.product_detail_root}>
       <CusBreadcrumb
@@ -30,10 +33,68 @@ const FullCertificate = (props) => {
           },
         ]}
       />
-      <div className={styles.titleBox}>
+      <div className={styles.content}>
-        <img src={img1} />
+        <div className={styles.box1}>
-        <div className={styles.title}>{locale.slrz}</div>
+          <img src={img1} />
-        <div className={styles.info}>{locale.zszs}</div>
+          <div className={styles.infoBox}>
+            <div className={styles.title}>八通道血栓弹力图仪</div>
+            <div className={styles.info}>
+              宝锐生物血栓弹力图仪BVCA-VIII
+              八通道通量设计，我们赋予它一个有生命的代号“八爪鱼”。
+            </div>
+            <div className={styles.btn} onClick={() => setVisible(true)}>
+              {locale.ckcezs}
+            </div>
+            <Image
+              width={200}
+              style={{ display: "none" }}
+              src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200"
+              preview={{
+                visible,
+                src:
+                  "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
+                onVisibleChange: (value) => {
+                  setVisible(value);
+                },
+              }}
+            />
+          </div>
+        </div>
+        <div className={styles.box2}>
+          <div className={`${styles.infoBox} ${styles.mr35}`}>
+            <div className={styles.title}>{locale.cpxq}</div>
+            <div className={styles.info}>
+              宝锐生物血栓弹力图仪BVCA-VIII
+              八通道通量设计，我们赋予它一个有生命的代号“八爪鱼”。
+              现在市场上的产品大多采用传统的悬垂丝方案，由于传统悬垂丝方案金属性原因，存在工艺复杂、金属丝易疲劳、震动及仪器水平影响较大等缺陷。
+              为此，宝锐研发团队独创磁编码技术，摒弃传统悬垂丝方案，选用独特刚性转动轴，使用高精密线圈配合高密度可控电流，实现血块强度的精确采集。
+            </div>
+          </div>
+          <img src={img2} />
+        </div>
+        <div className={`${styles.box2} ${styles.bg1}`}>
+          <img src={img3} />
+          <div className={`${styles.infoBox} ${styles.ml35}`}>
+            <div className={styles.title}>{locale.cptd}</div>
+            <div className={styles.info}>
+              ✓ 八通道高度集成一体机，通量大，体积小/n ✓
+              自动上杯卸杯，避免上杯失误 /n ✓ 无需调平，超强防震 /n ✓
+              集成带预热功能样品架 /n ✓ 双向LIS/HIS传输，集成扫码录入功能 /n ✓
+              可选配高容量电池组，方便各种环境下 的移动检测需求 /n ✓
+              通道运行状态实时显示
+            </div>
+          </div>
+        </div>
+        <div className={styles.box2}>
+          <div className={`${styles.infoBox} ${styles.mr35}`}>
+            <div className={styles.title}>{locale.lcyy}</div>
+            <div className={styles.info}>
+              宝锐生物血栓弹力图仪BVCA-VIII
+              八通道通量设计，我们赋予它一个有生命的代号“八爪鱼”。
+            </div>
+          </div>
+          <img src={img4} />
+        </div>
       </div>
     </div>
   );

src/pages/product-center/detail/index.less

@@ -1,3 +1,96 @@
-.product_detail_root{
+.product_detail_root {
-
+  background: #f6f7fb;
-}
+  .bg1 {
+    background: #f6f7fb !important;
+  }
+  .mr35 {
+    margin-right: 35px;
+  }
+  .ml35 {
+    margin-left: 35px;
+  }
+  .content {
+    .commonBox {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 50px 10%;
+      img {
+        width: 50%;
+        object-fit: cover;
+      }
+    }
+    .box1 {
+      background: #f6f7fb;
+      margin-bottom: 40px;
+      .commonBox;
+      .infoBox {
+        width: 50%;
+        .ml35;
+        // width: 644px;
+        min-height: 354px;
+        background: #ffffff;
+        padding: 70px;
+        .title {
+          font-family: Source Han Sans SC;
+          font-weight: bold;
+          font-size: 48px;
+          color: #131313;
+          line-height: 64px;
+          margin-bottom: 26px;
+        }
+        .info {
+          font-family: Source Han Sans SC;
+          font-weight: 300;
+          font-size: 18px;
+          color: #595a61;
+          line-height: 32px;
+          word-break: break-all;
+          margin-bottom: 72px;
+        }
+        .btn {
+          font-family: Source Han Sans SC;
+          font-weight: 500;
+          font-size: 22px;
+          color: #2bb2a8;
+          line-height: 34px;
+          cursor: pointer;
+          img{
+              opacity: 0;
+              width: inherit;
+              height: inherit
+          }
+        }
+      }
+    }
+    .box2 {
+      .commonBox;
+      background-color: white;
+      margin-bottom: 40px;
+      .infoBox {
+        width: 50%;
+        margin-left: 32px;
+        // width: 644px;
+        min-height: 354px;
+        background: #ffffff;
+        padding: 70px;
+        .title {
+          font-family: Source Han Sans SC;
+          font-weight: 500;
+          font-size: 22px;
+          color: #131313;
+          line-height: 40px;
+          margin-bottom: 57px;
+        }
+        .info {
+          font-family: Source Han Sans SC;
+          font-weight: 300;
+          font-size: 16px;
+          color: #595a61;
+          line-height: 32px;
+          word-break: break-all;
+        }
+      }
+    }
+  }
+}

src/request.ts

@@ -0,0 +1,56 @@
+/**
+ * request 网络请求工具
+ * 更详细的 api 文档: https://github.com/umijs/umi-request
+ */
+import { extend } from 'umi-request';
+import { notification } from 'antd';
+
+const codeMessage = {
+  200: '服务器成功返回请求的数据。',
+  201: '新建或修改数据成功。',
+  202: '一个请求已经进入后台排队（异步任务）。',
+  204: '删除数据成功。',
+  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
+  401: '用户没有权限（令牌、用户名、密码错误）。',
+  403: '用户得到授权，但是访问是被禁止的。',
+  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
+  406: '请求的格式不可得。',
+  410: '请求的资源被永久删除，且不会再得到的。',
+  422: '当创建一个对象时，发生一个验证错误。',
+  500: '服务器发生错误，请检查服务器。',
+  502: '网关错误。',
+  503: '服务不可用，服务器暂时过载或维护。',
+  504: '网关超时。',
+};
+
+/**
+ * 异常处理程序
+ */
+const errorHandler = (error: { response: Response }): Response => {
+  const { response } = error;
+  if (response && response.status) {
+    const errorText = codeMessage[response.status] || response.statusText;
+    const { status, url } = response;
+
+    notification.error({
+      message: `请求错误 ${status}: ${url}`,
+      description: errorText,
+    });
+  } else if (!response) {
+    notification.error({
+      description: '您的网络发生异常，无法连接服务器',
+      message: '网络异常',
+    });
+  }
+  return response;
+};
+
+/**
+ * 配置request请求时的默认参数
+ */
+const request = extend({
+  errorHandler, // 默认错误处理
+  credentials: 'include', // 默认请求是否带上cookie
+});
+
+export default request;

src/services/public.js

@@ -0,0 +1,8 @@
+import request from "../request";
+
+export async function testRequest(params) {
+  return request("/api/login/account", {
+    method: "POST",
+    data: params,
+  });
+}

src/services/user.ts

@@ -0,0 +1,13 @@
+import request from '@/utils/request';
+
+export async function query(): Promise<any> {
+  return request('/api/users');
+}
+
+export async function queryCurrent(): Promise<any> {
+  return request('/api/currentUser');
+}
+
+export async function queryNotices(): Promise<any> {
+  return request('/api/notices');
+}