From 648669f85955a4a0efeb75a47962d3be418dbade Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=99=93=E8=8C=B9?= <1019216585@qq.com> Date: Tue, 5 Nov 2024 00:54:32 +0800 Subject: [PATCH] =?UTF-8?q?feat:=E9=A6=96=E9=A1=B5=E5=BC=80=E5=8F=91?= =?UTF-8?q?=E6=9C=AA=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .umirc.ts | 22 ++++- src/global.less | 4 + src/layouts/BaseLayout.less | 1 + src/layouts/components/TopMenu/TopMenu.less | 11 +-- src/locales/zh_CN.js | 21 ++++- src/pages/Home/index.js | 66 +++++++++++++- src/pages/Home/index.less | 84 ++++++++++++++++- src/pages/agreement/index.js | 32 +++++++ src/pages/agreement/index.less | 12 +++ src/pages/product-center/detail/index.js | 73 +++++++++++++-- src/pages/product-center/detail/index.less | 99 ++++++++++++++++++++- src/request.ts | 56 ++++++++++++ src/services/public.js | 8 ++ src/services/user.ts | 13 +++ 14 files changed, 471 insertions(+), 31 deletions(-) create mode 100644 src/pages/agreement/index.js create mode 100644 src/pages/agreement/index.less create mode 100644 src/request.ts create mode 100644 src/services/public.js create mode 100644 src/services/user.ts diff --git a/.umirc.ts b/.umirc.ts index b1fcb55..5f3880c 100644 --- a/.umirc.ts +++ b/.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: { "^": "" }, + }, + }, }); diff --git a/src/global.less b/src/global.less index 0862a00..dea7600 100644 --- a/src/global.less +++ b/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; diff --git a/src/layouts/BaseLayout.less b/src/layouts/BaseLayout.less index 29fc641..716bf9b 100644 --- a/src/layouts/BaseLayout.less +++ b/src/layouts/BaseLayout.less @@ -6,6 +6,7 @@ .ant-layout-content { min-height: calc(100vh - 602px); background: #ffffff; + // background-color: #f5f5f5; opacity: 0.96; } } diff --git a/src/layouts/components/TopMenu/TopMenu.less b/src/layouts/components/TopMenu/TopMenu.less index 3262bcb..ab22bd8 100644 --- a/src/layouts/components/TopMenu/TopMenu.less +++ b/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, diff --git a/src/locales/zh_CN.js b/src/locales/zh_CN.js index 62a64c7..76658e4 100644 --- a/src/locales/zh_CN.js +++ b/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: "", }; diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js index 2cc69c9..2e212ce 100644 --- a/src/pages/Home/index.js +++ b/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 (
@@ -32,18 +72,36 @@ const IndexPage = (props) => {
- {locale.gywm} - + {/* {locale.gywm} */}
{locale.gywmjj}
{locale.jjInfo}
- +
+ {locale.qywh}
+ {locale.ryzz} +
+
+
+
{locale.wmdys}
+
{locale.wmdysInfo}
+
+ {ysImgList?.map((item, index) => ( +
+ +
{item.title}
+ +
{item.info}
+
+ ))}
diff --git a/src/pages/Home/index.less b/src/pages/Home/index.less index 204f5c6..eaa995c 100644 --- a/src/pages/Home/index.less +++ b/src/pages/Home/index.less @@ -60,10 +60,14 @@ left: calc(50% - 25px); } .jjBox { - position: absolute; - bottom: 111px; - left: 10%; - width: 486px; + position: relative; + padding: 40px 10% 111px; + // bottom: 111px; + // 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; + } + } + } + } } } diff --git a/src/pages/agreement/index.js b/src/pages/agreement/index.js new file mode 100644 index 0000000..ea27636 --- /dev/null +++ b/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 ( +
+ +
+ 
{`
富文本内容测试
1，跟
2，跟
3，跟
飒飒的xxxxxxxxxxx
x

`}
+
+
+ ); +}; + +export default IndexPage; diff --git a/src/pages/agreement/index.less b/src/pages/agreement/index.less new file mode 100644 index 0000000..db23266 --- /dev/null +++ b/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; /* 保留空白符，自动换行 */ + } + } +} diff --git a/src/pages/product-center/detail/index.js b/src/pages/product-center/detail/index.js index 71d8540..10c88e2 100644 --- a/src/pages/product-center/detail/index.js +++ b/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 (
{ }, ]} /> -
- -
{locale.slrz}
-
{locale.zszs}
+
+
+ +
+
八通道血栓弹力图仪
+
+ 宝锐生物血栓弹力图仪BVCA-VIII + 八通道通量设计，我们赋予它一个有生命的代号“八爪鱼”。 +
+
setVisible(true)}> + {locale.ckcezs} +
+ { + setVisible(value); + }, + }} + /> +
+
+
+
+
{locale.cpxq}
+
+ 宝锐生物血栓弹力图仪BVCA-VIII + 八通道通量设计，我们赋予它一个有生命的代号“八爪鱼”。 + 现在市场上的产品大多采用传统的悬垂丝方案，由于传统悬垂丝方案金属性原因，存在工艺复杂、金属丝易疲劳、震动及仪器水平影响较大等缺陷。 + 为此，宝锐研发团队独创磁编码技术，摒弃传统悬垂丝方案，选用独特刚性转动轴，使用高精密线圈配合高密度可控电流，实现血块强度的精确采集。 +
+
+ +
+
+ +
+
{locale.cptd}
+
+ ✓ 八通道高度集成一体机，通量大，体积小/n ✓ + 自动上杯卸杯，避免上杯失误 /n ✓ 无需调平，超强防震 /n ✓ + 集成带预热功能样品架 /n ✓ 双向LIS/HIS传输，集成扫码录入功能 /n ✓ + 可选配高容量电池组，方便各种环境下 的移动检测需求 /n ✓ + 通道运行状态实时显示 +
+
+
+
+
+
{locale.lcyy}
+
+ 宝锐生物血栓弹力图仪BVCA-VIII + 八通道通量设计，我们赋予它一个有生命的代号“八爪鱼”。 +
+
+ +
); diff --git a/src/pages/product-center/detail/index.less b/src/pages/product-center/detail/index.less index 26957f2..ca49155 100644 --- a/src/pages/product-center/detail/index.less +++ b/src/pages/product-center/detail/index.less @@ -1,3 +1,96 @@ -.product_detail_root{ - -} \ No newline at end of file +.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; + } + } + } + } +} diff --git a/src/request.ts b/src/request.ts new file mode 100644 index 0000000..270dfad --- /dev/null +++ b/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; diff --git a/src/services/public.js b/src/services/public.js new file mode 100644 index 0000000..7dec202 --- /dev/null +++ b/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, + }); +} diff --git a/src/services/user.ts b/src/services/user.ts new file mode 100644 index 0000000..1988721 --- /dev/null +++ b/src/services/user.ts @@ -0,0 +1,13 @@ +import request from '@/utils/request'; + +export async function query(): Promise { + return request('/api/users'); +} + +export async function queryCurrent(): Promise { + return request('/api/currentUser'); +} + +export async function queryNotices(): Promise { + return request('/api/notices'); +}