feat

src/global.less

@@ -57,7 +57,7 @@ body {
   line-height: 75px;
 }
 
-.common-title2{
+.common-title2 {
   font-family: Source Han Sans SC;
   font-weight: bold;
   font-size: 38px;
@@ -73,13 +73,107 @@ body {
 }
 
 .fullImg {
-  width: 100vw;
+  width: 100%;
   height: auto;
   object-fit: cover;
 }
+.ant-pagination-prev,
+.ant-pagination-next,
+.ant-pagination-item {
+  font-size: 16px;
+  height: 40px;
+  line-height: 38px;
+  width: 40px;
+}
+.ant-pagination-prev:focus .ant-pagination-item-link,
+.ant-pagination-next:focus .ant-pagination-item-link,
+.ant-pagination-prev:hover .ant-pagination-item-link,
+.ant-pagination-next:hover .ant-pagination-item-link {
+  color: white !important;
+  border-color: #2bb2a8 !important;
+  background-color: #2bb2a8 !important;
+}
+.ant-pagination-item-active a,
+.ant-pagination-item:hover a,
+.ant-pagination-item:focus a {
+  color: white !important;
+}
+.ant-pagination-item-active a,
+.ant-pagination-item-active,
+.ant-pagination-item:hover,
+.ant-pagination-item:focus {
+  border-color: #2bb2a8 !important;
+  background-color: #2bb2a8 !important;
+}
+
 .ant-btn-background-ghost.ant-btn-primary,
 .ant-btn-background-ghost.ant-btn-primary:hover,
 .ant-btn-background-ghost.ant-btn-primary:focus {
   color: #2bb2a8 !important;
   border-color: #2bb2a8 !important;
 }
+
+.ant-tabs-ink-bar {
+  background-color: #2bb2a8;
+  height: 4px !important;
+}
+.ant-tabs-tab-btn {
+  font-family: Source Han Sans SC;
+  font-weight: 500;
+  font-size: 18px;
+  color: #131313;
+  line-height: 64px;
+}
+.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+  color: #2bb2a8;
+}
+.ant-tabs-nav {
+  margin-bottom: 0 !important;
+}
+.ant-empty {
+  .ant-empty-image {
+    height: 300px;
+  }
+  .ant-empty-description {
+    color: #595a61;
+    font-size: 16px;
+  }
+}
+
+.ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
+  background-color: white !important;
+  color: #2bb2a8 !important;
+}
+
+.ant-menu-sub {
+  padding: 26px 13px;
+}
+.ant-menu-dark .ant-menu-sub,
+.ant-menu.ant-menu-dark .ant-menu-sub {
+  background-color: white !important;
+  .ant-menu-item {
+    span {
+      font-size: 20px;
+      color: #1a272d !important;
+      line-height: 48px;
+      margin-bottom: 10px;
+      &:hover {
+        color: #2bb2a8 !important;
+      }
+    }
+  }
+}
+
+.ant-dropdown-menu-item,
+.ant-dropdown-menu-submenu-title {
+  span {
+    font-size: 20px;
+    margin-bottom: 10px;
+    color: #1a272d !important;
+    line-height: 48px;
+    margin-bottom: 10px;
+    &:hover {
+      color: #2bb2a8 !important;
+    }
+  }
+}

src/layouts/BaseLayout.js

@@ -44,6 +44,28 @@ class BaseLayout extends React.Component {
     {
       key: "/product-center",
       text: localeConfig.footerMenu2,
+      children: [
+        {
+          key: `/product-center?tabCode=1`,
+          text: localeConfig.cp1,
+        },
+        {
+          key: `/product-center?tabCode=2`,
+          text: localeConfig.cp2,
+        },
+        {
+          key: `/product-center?tabCode=3`,
+          text: localeConfig.cp3,
+        },
+        {
+          key: `/product-center?tabCode=4`,
+          text: localeConfig.cp4,
+        },
+        {
+          key: `/product-center?tabCode=5`,
+          text: localeConfig.cp5,
+        },
+      ],
     },
     {
       key: "/technical-support",
@@ -109,9 +131,12 @@ class BaseLayout extends React.Component {
     const isInherit = arr.includes(pathname);
     const { locale } = this.state;
     // const localeConfig = locale === "中文" ? zhCNConfig : enUSConfig;
-
+    const theme = {
+      primaryColor: "#2bb2a8", // 品牌色
+      // 你可以在这里添加更多的颜色配置
+    };
     return (
-      <ConfigProvider locale={locale === "中文" ? zhCN : enUS}>
+      <ConfigProvider locale={locale === "中文" ? zhCN : enUS} theme={theme}>
         <Layout className={`${styles.root} ${isInherit ? styles.root2 : ""}`}>
           {/* 顶栏 */}
           <Header className={styles.header}>

src/layouts/components/TopMenu/TopMenu.less

@@ -11,6 +11,22 @@
   }
 
   :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,
+    .ant-menu-dark .ant-menu-submenu-open,
+    .ant-menu-dark .ant-menu-submenu-selected,
+    .ant-menu-dark .ant-menu-submenu-title:hover,
     .ant-menu.ant-menu-dark .ant-menu-item-selected,
     .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected,
     .ant-menu-dark .ant-menu-item:hover {

src/locales/zh_CN.js

@@ -1,6 +1,6 @@
 export default {
   sy: "首页",
-  contactTel:"400-650-2386",
+  contactTel: "400-650-2386",
   headTitle: "欢迎浏览宝锐生物科技泰州有限公司官方网站",
   headTel: "客服热线：",
   cpzx: "产品中心",
@@ -60,32 +60,39 @@ export default {
     "售后跟踪服务：电话回访，及时了解客户对仪器的使用情况，根据客户反馈的情况制定回访记录。 ",
   shjjszc35: "客户电话咨询使用过程中出现的问题，及时查找原因给予解决。",
   bfzp: "部分照片",
-  jstdInfo1:"专业铸就医疗品质之基",
+  jstdInfo1: "专业铸就医疗品质之基",
-  jstdInfo2:"人均十年的行业经验组成一支顶尖的技术团队",
+  jstdInfo2: "人均十年的行业经验组成一支顶尖的技术团队",
-  fw:"服 务",
+  fw: "服 务",
-  fwInfo:'服务全球客户10年以上',
+  fwInfo: "服务全球客户10年以上",
-  xm:"项 目",
+  xm: "项 目",
-  xmInfo:"项目工程15年以上从业经验",
+  xmInfo: "项目工程15年以上从业经验",
-  js:"技 术",
+  js: "技 术",
-  jsInfo:"项目工程15年以上从业经验",
+  jsInfo: "项目工程15年以上从业经验",
-  gl:"管 理",
+  gl: "管 理",
-  glInfo:"11年以上项目管理经验",
+  glInfo: "11年以上项目管理经验",
-  lxwmInfo:"我们新生力量在成长、仍在继续",
+  lxwmInfo: "我们新生力量在成长、仍在继续",
-  gsmc:"宝锐生物科技泰州有限公司",
+  gsmc: "宝锐生物科技泰州有限公司",
-  gsdz:'江苏省泰州市国家医药高新技术产业园中国医药城口泰路东侧、新阳路北侧 G40幢厂区三至四层东半侧',
+  gsdz:
-  shzc:'售后支持',
+    "江苏省泰州市国家医药高新技术产业园中国医药城口泰路东侧、新阳路北侧 G40幢厂区三至四层东半侧",
-  shzcjs:'售后及技术支持',
+  shzc: "售后支持",
-  rczp:'人才招聘',
+  shzcjs: "售后及技术支持",
-  rczpdh:'400-650-2386',
+  rczp: "人才招聘",
-  rczpyx:"market@healtek.net",
+  rczpdh: "400-650-2386",
-  swhz:"商务合作",
+  rczpyx: "market@healtek.net",
-  swhzyx:'market@healtek.net',
+  swhz: "商务合作",
-  zxly:"在线留言",
+  swhzyx: "market@healtek.net",
-  zxlyInfo:"有任何问题，欢迎在此留言",
+  zxly: "在线留言",
-  name:"姓名",
+  zxlyInfo: "有任何问题，欢迎在此留言",
-  company:"公司名称",
+  name: "姓名",
-  phone:"联系电话",
+  company: "公司名称",
-  lynr:"留言内容",
+  phone: "联系电话",
-  submit:'提交',
+  lynr: "留言内容",
+  submit: "提交",
+  cp1: "血栓弹力图产品线",
+  cp2: "疑血和血小板功能分析仪产品线",
+  cp3: "全自动血小板功能分析仪产品线",
+  cp4: "POCT化学发光免疫分析仪产品线",
+  cp5: "全自动凝血免疫分析仪产品线",
+
   test: "",
 };

src/pages/about-us/full-certificate/index.less

@@ -9,6 +9,7 @@
       font-size: 38px;
       color: #000000;
       line-height: 64px;
+      word-break: break-all;
     }
     .info {
       font-family: Source Han Sans SC;
@@ -16,6 +17,7 @@
       font-size: 26px;
       color: #595a61;
       line-height: 40px;
+      word-break: break-all;
     }
   }
   .listBox {
@@ -37,6 +39,7 @@
         color: #131313;
         line-height: 34px;
         text-align: center;
+        word-break: break-all;
       }
     }
   }

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

@@ -0,0 +1,42 @@
+import React, { useState } from "react";
+import { Row, Col } 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";
+
+const FullCertificate = (props) => {
+  const { location = {} } = props; // activeTab
+  const { id, tabName, tabValue } = location?.query || {}; // activeTab
+  const locale = getLocale();
+
+  return (
+    <div className={styles.product_detail_root}>
+      <CusBreadcrumb
+        breadcrumbMenus={[
+          {
+            key: "/product-center",
+            text: locale.footerMenu2,
+          },
+          {
+            key: `/product-center?tabCode=${tabValue}`,
+            text: tabName,
+          },
+          {
+            key: "/product-center/detail",
+            text: "xxx产品名称",
+          },
+        ]}
+      />
+      <div className={styles.titleBox}>
+        <img src={img1} />
+        <div className={styles.title}>{locale.slrz}</div>
+        <div className={styles.info}>{locale.zszs}</div>
+      </div>
+    </div>
+  );
+};
+
+export default FullCertificate;

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

@@ -0,0 +1,3 @@
+.product_detail_root{
+
+}

src/pages/product-center/index.js

@@ -1,16 +1,124 @@
 import styles from "./index.less";
+import { Tabs, Empty, Pagination, Divider } from "antd";
 import { getLocale } from "../../utils";
 import PageHeaderInfo from "../../components/PageHeaderInfo";
 import CusBreadcrumb from "../../components/CusBreadcrumb";
 import CarouselPicture from "../../components/CarouselPicture";
 import img1 from "../../assets/img_chanpinzhongxin@3x.png";
+import img2 from "../../assets/img_chnapin@3x.png";
+import img3 from "../../assets/img_shangbiao@3x.png";
 
-import React, { useContext } from "react";
+import React, { useEffect, useState } from "react";
 
 const IndexPage = (props) => {
+  const { history, location = {} } = props; // activeTab
+  const { tabCode = "" } = location?.query || {}; // activeTab
   const locale = getLocale();
+  const [activeTab, setActiveTab] = useState({});
+  const [productList, setProductList] = useState([
+    {
+      id: 1,
+      title: "血栓弹力图试验（血小板 ADP&AA）试剂（凝固法）",
+      info:
+        "本产品与血栓弹力图仪配套使用，用于体外检测人体全血样本血小板聚集功能。",
+      url1: img3,
+      url2: img2,
+    },
+    {
+      id: 1,
+      title: "血栓弹力图试验（血小板 ADP&AA）试剂（凝固法）",
+      info:
+        "本产品与血栓弹力图仪配套使用，用于体外检测人体全血样本血小板聚集功能。",
+      url1: img3,
+      url2: img2,
+    },
+    {
+      id: 1,
+      title: "血栓弹力图试验（血小板 ADP&AA）试剂（凝固法）",
+      info:
+        "本产品与血栓弹力图仪配套使用，用于体外检测人体全血样本血小板聚集功能。",
+      url1: img3,
+      url2: img2,
+    },
+    {
+      id: 1,
+      title: "血栓弹力图试验（血小板 ADP&AA）试剂（凝固法）",
+      info:
+        "本产品与血栓弹力图仪配套使用，用于体外检测人体全血样本血小板聚集功能。",
+      url1: img3,
+      url2: img2,
+    },
+    {
+      id: 1,
+      title: "血栓弹力图试验（血小板 ADP&AA）试剂（凝固法）",
+      info:
+        "本产品与血栓弹力图仪配套使用，用于体外检测人体全血样本血小板聚集功能。",
+      url1: img3,
+      url2: img2,
+    },
+    {
+      id: 1,
+      title: "血栓弹力图试验（血小板 ADP&AA）试剂（凝固法）",
+      info:
+        "本产品与血栓弹力图仪配套使用，用于体外检测人体全血样本血小板聚集功能。",
+      url1: img3,
+      url2: img2,
+    },
+    {
+      id: 1,
+      title: "血栓弹力图试验（血小板 ADP&AA）试剂（凝固法）",
+      info:
+        "本产品与血栓弹力图仪配套使用，用于体外检测人体全血样本血小板聚集功能。",
+      url1: img3,
+      url2: img2,
+    },
+    {
+      id: 1,
+      title: "血栓弹力图试验（血小板 ADP&AA）试剂（凝固法）",
+      info:
+        "本产品与血栓弹力图仪配套使用，用于体外检测人体全血样本血小板聚集功能。",
+      url1: img3,
+      url2: img2,
+    },
+  ]);
+
+  const productTabs = [
+    {
+      name: locale.cp1,
+      value: "1",
+    },
+    {
+      name: locale.cp2,
+      value: "2",
+    },
+    {
+      name: locale.cp3,
+      value: "3",
+    },
+    {
+      name: locale.cp4,
+      value: "4",
+    },
+    {
+      name: locale.cp5,
+      value: "5",
+    },
+  ];
+
+  useEffect(() => {
+    if (tabCode) {
+      const arr = productTabs.filter((item) => item.value === tabCode);
+      if (arr && arr.length > 0) {
+        setActiveTab(arr[0]);
+        return;
+      }
+      setActiveTab(productTabs[0]);
+    } else {
+      setActiveTab(productTabs[0]);
+    }
+  }, [tabCode]);
   return (
-    <div className={styles.root}>
+    <div className={styles.product_root}>
       <div style={{ position: "relative" }}>
         <img className={"fullImg"} src={img1} />
         <PageHeaderInfo
@@ -22,12 +130,55 @@ const IndexPage = (props) => {
             breadcrumbMenus={[
               {
                 key: "/product-center",
-                text: "产品中心",
+                text: locale.footerMenu2,
               },
             ]}
           />
         </PageHeaderInfo>
       </div>
+      <Tabs
+        className={styles.tabsBox}
+        activeKey={activeTab.value}
+        onChange={(val) => {
+          console.log(val);
+          const arr = productTabs.filter((item) => item.value === val);
+          setActiveTab(arr[0]);
+        }}
+      >
+        {productTabs?.map((item, index) => (
+          <Tabs.TabPane
+            key={`product-tabs-item-${index}`}
+            tab={item.name}
+            key={item.value}
+          ></Tabs.TabPane>
+        ))}
+      </Tabs>
+      <div className={styles.content}>
+        {productList.length < 1 ? (
+          <Empty />
+        ) : (
+          <div className={styles.list}>
+            {productList?.map((item, index) => (
+              <div
+                className={styles.item}
+                key={`product-item-${index}`}
+                onClick={() => {
+                  history.push(
+                    `/product-center/detail?id=${item.id}&tabName=${activeTab.name}&tabValue=${activeTab.value}`
+                  );
+                }}
+              >
+                <img className={styles.img1} src={item.url1} />
+                <img className={styles.img2} src={item.url2} />
+                <div className={styles.title}>{item.title}</div>
+                <Divider />
+                <div className={styles.info}>{item.info}</div>
+              </div>
+            ))}
+          </div>
+        )}
+        {productList.length > 1 && <Pagination defaultCurrent={1} total={50} />}
+      </div>
     </div>
   );
 };

src/pages/product-center/index.less

@@ -1,3 +1,54 @@
-.title {
+.product_root {
-  background: rgb(121, 242, 157);
+  background-color: #f0f2f5;
+  // background: #ffffff;
+  // opacity: 0.96;
+  .tabsBox {
+    background: #f6f7fb;
+    padding: 20px 10% 0;
+    border-bottom: 2px solid #eaecef;
+  }
+  .content {
+    text-align: center;
+    :global {
+      .ant-pagination {
+        margin-bottom: 100px;
+      }
+    }
+    .list {
+      display: grid;
+      padding: 36px 10% 60px;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      grid-column-gap: 30px;
+      grid-row-gap: 30px;
+      text-align: left;
+      .item {
+        padding: 60px 40px;
+        background: white;
+        .title {
+          font-family: Source Han Sans SC;
+          font-weight: bold;
+          font-size: 24px;
+          color: #000000;
+          line-height: 34px;
+        }
+        .info {
+          font-family: Source Han Sans SC;
+          font-weight: 300;
+          font-size: 16px;
+          color: #595a61;
+          line-height: 32px;
+        }
+        .img1 {
+          height: 40px;
+          text-align: left;
+          object-fit: contain;
+        }
+        .img2 {
+          width: 100%;
+          text-align: left;
+          object-fit: contain;
+        }
+      }
+    }
+  }
 }

src/pages/technical-support/index.js

@@ -56,7 +56,7 @@ const IndexPage = (props) => {
     },
   ];
   return (
-    <div className={styles.root}>
+    <div className={styles.technical_support_root}>
       <div style={{ position: "relative" }}>
         <img className={"fullImg"} src={img1} />
         <PageHeaderInfo

src/pages/technical-support/index.less

@@ -1,4 +1,4 @@
-.root {
+.technical_support_root {
   .jszcBox {
     position: relative;
     background-image: url(../../assets/img_jiahu_shouhou@3x.png);