feat:关于我们开发

src/components/CarouselPicture/CarouselPicture.js

@@ -0,0 +1,61 @@
+import React, { Component, useState, memo, createRef } from "react";
+import styles from "./CarouselPicture.less";
+import leftIcon from "../../assets/icon_fanye_l@3x.png";
+import rightIcon from "../../assets/icon_fanye_r@3x.png";
+
+import { Icon } from "antd";
+
+const CarouselPicture = (props) => {
+  const ref = createRef();
+  const { imgData, style = {} } = props;
+  const [translateX, setTranslateX] = useState(0); //每次偏移数值
+
+  /**
+   * 点击右侧按钮
+   */
+  const clickRightIcon = () => {
+    if (
+      ref.current.scrollWidth <
+      Math.abs(translateX) + Math.abs(ref.current.offsetWidth)
+    ) {
+      //到最后一页时候需要停止点击按钮
+      return;
+    }
+    setTranslateX(translateX - ref.current.offsetWidth); //每次滚动可见区域宽度
+  };
+
+  /**
+   * 点击左侧按钮
+   */
+  const clickLeftIcon = () => {
+    if (translateX === 0) return;
+    setTranslateX(translateX + ref.current.offsetWidth);
+  };
+  console.log("translateX", translateX);
+  console.log("ref", ref);
+  return (
+    <div className={styles.wrap_scrollImg}>
+      <span className={styles.left_icon} onClick={clickLeftIcon}>
+        <img src={leftIcon} />
+      </span>
+      <span className={styles.right_icon} onClick={clickRightIcon}>
+        <img src={rightIcon} />
+      </span>
+      <ul style={{ transform: `translateX(${translateX}px)` }} ref={ref}>
+        {imgData?.map((item, index) => {
+          return (
+            <li style={style} key={`CarouselPicture-${index}`}>
+              {item.render ? (
+                item.render(item)
+              ) : (
+                <img src={item.imgUrl} alt={item.name} />
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};
+
+export default CarouselPicture;

src/components/CarouselPicture/CarouselPicture.less

@@ -0,0 +1,77 @@
+.wrap_scrollImg {
+  padding: 0 10%;
+  text-align: centerf;
+  width: 100%;
+  height: 220px;
+  //background-color: #2C9806;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  &:hover {
+    span {
+      display: inline-block;
+    }
+  }
+
+  span {
+    cursor: pointer;
+    z-index: 11;
+    position: absolute;
+    // display: none;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    transition: 0.2s;
+
+    &:hover {
+      font-size: 22px;
+    }
+  }
+  .left_icon,.right_icon{
+    img{
+      width: 24px;
+      height: auto;
+    }
+  }
+  .left_icon {
+    left: 0;
+  }
+
+  .right_icon {
+    right: 0;
+  }
+
+  ul {
+    z-index: 10;
+    margin: 0 180px;
+    height: inherit;
+    white-space: nowrap;
+    position: absolute;
+    transition: all 0.5s ease-in 0s; //偏移的过度效果
+    margin-right: -1%; //设置ul偏右-用来抵消li元素右边距1%导致的缺口
+
+    li {
+      height: 100%;
+      display: inline-block;
+      min-width: calc(24%);
+      width: calc(24%);
+      margin-right: 1%; //图片右边距
+      overflow: hidden;
+      border-radius: 6px;
+      cursor: pointer;
+
+      img {
+        transition: all 0.3s;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+
+        &:hover {
+          transform: scale(1.1);
+        }
+      }
+    }
+  }
+}

src/components/CarouselPicture/index.js

@@ -0,0 +1,3 @@
+import CarouselPicture from './CarouselPicture';
+
+export default CarouselPicture;

src/components/CusBreadcrumb/CusBreadcrumb.js

@@ -0,0 +1,24 @@
+import React from "react";
+import img1 from "../../assets/icon_home@3x.png";
+import { Breadcrumb } from "antd";
+import styles from "./CusBreadcrumb.less";
+
+const CusBreadcrumb = (props) => {
+  const { breadcrumbMenus = [] } = props;
+  return (
+    <div className={styles.root}>
+      <Breadcrumb separator=">">
+        <Breadcrumb.Item>
+          <img src={img1} />
+        </Breadcrumb.Item>
+        {breadcrumbMenus?.map((item, index) => (
+          <Breadcrumb.Item key={`Breadcrumb-Item-${index}`}>
+            <a href={item.key}>{item.text}</a>
+          </Breadcrumb.Item>
+        ))}
+      </Breadcrumb>
+    </div>
+  );
+};
+
+export default CusBreadcrumb;

src/components/CusBreadcrumb/CusBreadcrumb.less

@@ -0,0 +1,23 @@
+.root {
+  img {
+    width: 16px;
+    height: 16px;
+  }
+  :global {
+    .ant-breadcrumb > span:last-child a {
+      color: #2bb2a8;
+    }
+    .ant-breadcrumb-separator,
+    .ant-breadcrumb a,
+    .ant-breadcrumb-link {
+      font-family: Source Han Sans SC;
+      font-weight: 500;
+      font-size: 14px;
+      color: #8a8990;
+      line-height: 75px;
+      &:hover {
+        color: #2bb2a8;
+      }
+    }
+  }
+}

src/components/CusBreadcrumb/index.js

@@ -0,0 +1,3 @@
+import CusBreadcrumb from './CusBreadcrumb';
+
+export default CusBreadcrumb;

src/components/GreenLine/GreenLine.js

@@ -0,0 +1,13 @@
+import React from "react";
+import styles from "./GreenLine.less";
+
+const GreenLine = (props) => {
+  const { width = 10, height = 6 } = props;
+  return (
+    <div className={styles.root}>
+      <div style={{ width, height }} className={styles.line} />
+    </div>
+  );
+};
+
+export default GreenLine;

src/components/GreenLine/GreenLine.less

@@ -0,0 +1,8 @@
+.root {
+  margin: 40px 0;
+  .line {
+    // width: 10px;
+    // height: 6px;
+    background: #2bb2a8;
+  }
+}

src/components/GreenLine/index.js

@@ -0,0 +1,3 @@
+import GreenLine from './GreenLine';
+
+export default GreenLine;

src/components/Logo/Logo.js

@@ -1,10 +0,0 @@
-import React from 'react';
-import styles from './Logo.less';
-
-const Logo = () => (
-  <div className={styles.logo}>
-    <div className={styles.img} />
-  </div>
-);
-
-export default Logo;

src/components/Logo/Logo.less

@@ -1,17 +0,0 @@
-.logo {
-  height: 64px;
-  position: relative;
-  line-height: 64px;
-  padding-left: 24px;
-  -webkit-transition: all 0.3s;
-  transition: all 0.3s;
-  background: #002140;
-  overflow: hidden;
-  .img {
-    // width: 120px;
-    border-radius: 4px;
-    height: 31px;
-    background: rgba(255, 255, 255, 0.2);
-    margin: 16px 24px 16px 0;
-  }
-}

src/components/Logo/index.js

@@ -1,3 +0,0 @@
-import Logo from './Logo';
-
-export default Logo;

src/components/PageHeaderInfo/PageHeaderInfo.js

@@ -0,0 +1,20 @@
+import React from "react";
+import GreenLine from "../GreenLine";
+import styles from "./PageHeaderInfo.less";
+
+const PageHeaderInfo = (props) => {
+  const { title = "", info = "", imgText = "", children } = props;
+  return (
+    <div className={styles.root}>
+      {children}
+      <div className={styles.gywmBox}>
+        <div className={"common-title1"}>{title}</div>
+        <div className={"common-info"}>{info}</div>
+        <div className={styles.imgText}>{imgText}</div>
+        <GreenLine width="114px" height="2px" />
+      </div>
+    </div>
+  );
+};
+
+export default PageHeaderInfo;

src/components/PageHeaderInfo/PageHeaderInfo.less

@@ -0,0 +1,23 @@
+.root {
+  background: #ffffff;
+  opacity: 0.96;
+  padding: 0 10%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  .gywmBox {
+    padding: 40px 0;
+    position: relative;
+    .imgText {
+      position: absolute;
+      right: 10%;
+      bottom: -45px;
+      font-family: Source Han Sans SC;
+      font-weight: 500;
+      font-size: 117px;
+      color: #000000;
+      opacity: 0.1;
+    }
+  }
+}

src/components/PageHeaderInfo/index.js

@@ -0,0 +1,3 @@
+import PageHeaderInfo from './PageHeaderInfo';
+
+export default PageHeaderInfo;

src/global.less

@@ -49,4 +49,29 @@ body {
   text-align: center;
 }
 
+.common-title1 {
+  font-family: Source Han Sans SC;
+  font-weight: 500;
+  font-size: 50px;
+  color: #000000;
+  line-height: 75px;
+}
+.common-info {
+  font-family: Source Han Sans SC;
+  font-weight: 500;
+  font-size: 24px;
+  color: #8a8990;
+  line-height: 75px;
+}
 
+.fullImg {
+  width: 100vw;
+  height: auto;
+  object-fit: cover;
+}
+.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;
+}

src/layouts/BaseLayout.js

@@ -82,13 +82,13 @@ class BaseLayout extends React.Component {
     const { children, location = {} } = this.props;
     const { pathname = "" } = location;
     const arr = ["/home"];
-
+    const isInherit = arr.includes(pathname);
     const { locale } = this.state;
     // const localeConfig = locale === "中文" ? zhCNConfig : enUSConfig;
 
     return (
       <ConfigProvider locale={locale === "中文" ? zhCN : enUS}>
-        <Layout className={styles.root}>
+        <Layout className={`${styles.root} ${isInherit ? styles.root2 : ""}`}>
           {/* 顶栏 */}
           <Header className={styles.header}>
             <BaseHeader>
@@ -115,7 +115,7 @@ class BaseLayout extends React.Component {
                 ]}
                 data={headMenuData}
                 onClick={this.handleSideMenuClick}
-                isInherit={arr.includes(pathname)}
+                isInherit={isInherit}
               />
             </BaseHeader>
           </Header>

src/layouts/BaseLayout.less

@@ -4,11 +4,19 @@
   display: block;
   :global {
     .ant-layout-content {
-      background-color: white;
+      min-height: calc(100vh - 602px);
+      background: #ffffff;
+      opacity: 0.96;
+    }
+  }
+}
+.root2 {
+  :global {
+    .ant-layout-content {
+      min-height: calc(100vh - 442px) !important;
     }
   }
 }
-
 .header {
   height: 59px;
   height: auto;

src/layouts/components/Footer/Footer.js

@@ -21,7 +21,7 @@ const Footer = (props) => {
     <div className={styles.root}>
       <div className={styles.content}>
         <div>
-          <img src={img1} width={266} height={70} />
+          <img src={img1} />
         </div>
         <div className={styles.menuBox}>
           <div>

src/layouts/components/TopMenu/TopMenu.js

@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import logoImg from "../../../assets/logo.png";
+import logoImg from "../../../assets/logo@3x.png";
 import { Icon, Menu } from "antd";
 import styles from "./TopMenu.less";
 
@@ -37,7 +37,7 @@ const TopMenu = (props) => {
   const { className, data, isInherit, ...otherProps } = props;
   return (
     <div className={` ${isInherit ? styles.root2 : styles.root1} ${className}`}>
-      <img src={logoImg} height="40" />
+      <img src={logoImg} />
       <Menu
         theme="dark"
         defaultSelectedKeys={["1"]}

src/layouts/components/TopMenu/TopMenu.less

@@ -4,7 +4,6 @@
   justify-content: space-between;
   background-color: white !important;
   padding: 45px 10%;
-  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
 
   img {
     width: 266px;
@@ -12,6 +11,8 @@
   }
 
   :global {
+    .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 {
       color: #2bb2a8;
     }
@@ -51,4 +52,5 @@
 }
 .root1 {
   .root;
+  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
 }

src/layouts/menuData.js

@@ -1,22 +1,22 @@
 export default [
   {
-    key: '/home',
+    key: "/home",
-    text: '首页',
+    text: "首页",
   },
   {
-    key: '/about-us',
+    key: "/about-us",
-    text: '关于我们',
+    text: "关于我们",
   },
   {
-    key: '/product-center',
+    key: "/product-center",
-    text: '产品中心',
+    text: "产品中心",
   },
   {
-    key: '/technical-support',
+    key: "/technical-support",
-    text: '技术支持',
+    text: "技术支持",
   },
   {
-    key: '/contact-us',
+    key: "/contact-us",
-    text: '联系我们',
+    text: "联系我们",
   },
 ];

src/locales/zh_CN.js

@@ -26,4 +26,25 @@ export default {
     "公司自成立之日起，始终把研发作为公司的核心竞争力，已经在泰州、重庆和北京建立了三家大型研发中心。此外，公司还在研发领域与国内多家高等学府、境外学术机构建立了长期联合研发机制，并取得众多开创型成果。“以研发为安身之本”始终被视为企业的座右铭，公司近些年持续投入研发，在凝血、血小板、输血产品、原材料制备、制药、移植技术、信息自动化等诸多领域取得了成果，很多成果处于全球领先地位。 ",
   gsjj33:
     "前沿技术应用、多学科交叉，营造出宝锐旗下一系列明星产品。关键原材料研发成果、电磁技术及机械自动化应用，造就了宝锐新一代全自动血栓弹力图产品;血小板特异性抗体的分型及HPA、HLA筛查试剂盒，配套全自动工作站，打造出新一代面向临床用血单位的血小板抗体检测自动化系统; 输血配套试剂、设备，与信息化平台配合，打造新时代下的输血系列产品;抗原、抗体等生物关键原材料制备，为国内企业提供有效的进口材料替代品。 我公司始终立志将“专业产品，融入生命，融入社会责任”作为企业发展的根本宗旨，秉承前人创业之鉴，坚持“开拓进取，诚信为先，睿智创新，专业经营” 的公司理念。坚持提供最优秀的、适合中国市场的产品及技术服务，坚持以最真诚和负责的态度努力成为医疗行业可依赖的长期合作伙伴。",
+  qywh1: "企业文化",
+  qywh2: "专注于血型检测领域，坚持提供最优秀的、适合中国市场的产品及技术服务",
+  qywh3: "成立之处，我们的使命仍在继续，没有模糊",
+  qywh4:
+    "我们始终坚持“人才战略、品种战略、信息战略”的方针政策，秉承“创新、勤奋、严格”的管理风格",
+  qywh5: "以先进技术用于生产实践",
+  qywh6:
+    "将“专业产品，融入生命，融入社会责任”作为企业发展的根本宗旨，秉承前人创业之鉴，坚持“开拓进取，诚信为先，睿智创新，专业经营”",
+  gywmInfo:'以研发为基础，集 研、产、销为一体的高科技型企业',
+  nhyjy:"年行业经验",
+  hzqy:"家合作企业",
+  qqkh:"家全球客户",
+  scjd:"㎡生产基地",
+  cpzxInfo:"每件产品都是我们倾心研发",
+  yrzz:"荣誉资质 值得信赖",
+  yrzzInfo:'Qualifications',
+  qbzs:"全部证书",
+  ckqbzs:"查看全部证书",
+  slrz:'我们的实力认证',
+  zszs:"全部证书展示",
+  test: "",
 };

src/pages/Home/index.less

@@ -1,7 +1,7 @@
 .root {
   background-image: url(../../assets/img_chanpin_bg@3x.png);
-  background-size: 100% 100%;
+  background-size: cover; /* 确保图片覆盖整个元素 */
-  background-repeat: no-repeat;
+  background-position: center; /* 将图片居中显示 */
   min-height: 100%;
   .content {
     .lbBox {

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

@@ -0,0 +1,52 @@
+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_zhengshu@3x.png";
+
+const FullCertificate = (props) => {
+  const locale = getLocale();
+  const [certificateList, setCertificateList] = useState([
+    { url: img1, name: "xxxxxxxxxxxxxxxxxxx CE证书" },
+    { url: img1, name: "xxxxx CE证书" },
+    { url: img1, name: " CE证书" },
+    { url: img1, name: "xxxxxxxxxxxxxxxxxxx CE证书" },
+    { url: img1, name: "xxxxxxxxxxxxxxxxxxx CE证书" },
+    { url: img1, name: "xxxxxxxxxxxxxxxxxxx CE证书" },
+    { url: img1, name: "xxxxxxxxxxxxxxxxxxx CE证书" },
+    { url: img1, name: "xxxxxxxxxxxxxxxxxxx CE证书" },
+  ]);
+  return (
+    <div className={styles.root}>
+      <CusBreadcrumb
+        breadcrumbMenus={[
+          {
+            key: "/about-us",
+            text: locale.footerMenu1,
+          },
+          {
+            key: "/about-us/full-certificate",
+            text: locale.qbzs,
+          },
+        ]}
+      />
+      <div className={styles.titleBox}>
+        <div className={styles.title}>{locale.slrz}</div>
+        <div className={styles.info}>{locale.zszs}</div>
+      </div>
+      <div className={styles.listBox}>
+        {certificateList.map((item, index) => (
+          <div className={styles.item} key={`full-certificate-${index}`}>
+            <img src={item.url} />
+            <div className={styles.title}>{item.name}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default FullCertificate;

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

@@ -0,0 +1,43 @@
+.root {
+  padding: 0 10% 90px;
+  .titleBox {
+    text-align: center;
+    margin: 60px 0 60px;
+    .title {
+      font-family: Source Han Sans SC;
+      font-weight: bold;
+      font-size: 38px;
+      color: #000000;
+      line-height: 64px;
+    }
+    .info {
+      font-family: Source Han Sans SC;
+      font-weight: 400;
+      font-size: 26px;
+      color: #595a61;
+      line-height: 40px;
+    }
+  }
+  .listBox {
+    .item {
+      padding: 0px 36px 40px;
+      width: 20%;
+      display: inline-block;
+      vertical-align: top;
+      img {
+        width: 100%;
+        object-fit: cover;
+        height: auto;
+        margin-bottom: 30px;
+      }
+      .title {
+        font-family: Source Han Sans SC;
+        font-weight: bold;
+        font-size: 24px;
+        color: #131313;
+        line-height: 34px;
+        text-align: center;
+      }
+    }
+  }
+}

src/pages/about-us/index.js

@@ -1,24 +1,80 @@
 import React from "react";
+import { Divider, Button } from "antd";
+
 import { getLocale } from "../../utils";
 import styles from "./index.less";
-import img1 from "../../assets/img_guanyu@3x.png";
+import GreenLine from "../../components/GreenLine";
-import img2 from "../../assets/img_jianjie@3x.png";
+import CusBreadcrumb from "../../components/CusBreadcrumb";
+import PageHeaderInfo from "../../components/PageHeaderInfo";
+import CarouselPicture from "../../components/CarouselPicture";
+
+import img1 from "../../assets/img_guanyuwomen@3x.png";
+import img2 from "../../assets/img_zhengshu@3x.png";
 
 const IndexPage = (props) => {
-  console.log(props);
   const locale = getLocale();
+  const { history } = props;
 
+  const renderItem = ({ imgUrl, name, year, info }, index) => (
+    <div
+      className={styles.carouselPictureBox}
+      key={`cus-carousel-picture-item-${index}`}
+    >
+      <div className={styles.imgBox}>
+        <img src={imgUrl} alt={name} />
+      </div>
+      <div className={styles.imgInfo}>
+        <div className={styles.year}>{year}</div>
+        <div className={styles.title}>{name}</div>
+        <div className={styles.info}>{info}</div>
+      </div>
+    </div>
+  );
+  const imgList = [
+    {
+      imgUrl: img2,
+      name: "xxxxCE证书",
+      year: "2023",
+      info:
+        "CE认证是指产品符合欧洲经济区相关法规和标准的认证，使得产品可以在欧洲市场自由流通销售",
+      render: (val) => renderItem(val),
+    },
+    {
+      imgUrl: img2,
+      name: "xxxxCE证书",
+      render: (val) => renderItem(val),
+    },
+    {
+      imgUrl: img2,
+      name: "xxxxCE证书",
+      render: (val) => renderItem(val),
+    },
+  ];
   return (
     <div>
       <h1 className={styles.root}>
-        <div>
+        <div style={{ position: "relative" }}>
-          <img className={styles.fullImg} src={img1} />
+          <img className={"fullImg"} src={img1} />
+          <PageHeaderInfo
+            title={locale.footerMenu1}
+            info={locale.gywmInfo}
+            imgText={"About us"}
+          >
+            <CusBreadcrumb
+              breadcrumbMenus={[
+                {
+                  key: "/about-us",
+                  text: locale.footerMenu1,
+                },
+              ]}
+            />
+          </PageHeaderInfo>
         </div>
         <div className={styles.gsjjBox}>
-          <img className={styles.fullImg} src={img2} />
           <div className={styles.gsjjText}>
             <div className={styles.title}>{locale.gsjj1}</div>
             <div className={styles.secondTitle}>{locale.gsjj2}</div>
+            <GreenLine />
             <div className={styles.info}>
               <div>{locale.gsjj31}</div>
               <div>{locale.gsjj32}</div>
@@ -26,6 +82,58 @@ const IndexPage = (props) => {
             </div>
           </div>
         </div>
+        <div className={styles.gssjBox}>
+          <div>
+            <div className={styles.title}>10</div>
+            <div>{locale.nhyjy}</div>
+          </div>
+          <div>
+            <div className={styles.title}>16</div>
+            <div>{locale.hzqy}</div>
+          </div>
+          <div>
+            <div className={styles.title}>300</div>
+            <div>{locale.qqkh}</div>
+          </div>
+          <div>
+            <div className={styles.title}>3600</div>
+            <div>{locale.scjd}</div>
+          </div>
+        </div>
+        <div className={styles.qywhBox}>
+          <div className={styles.qywhText}>
+            <div className={styles.title}>{locale.qywh1}</div>
+            <div className={styles.secondTitle}>{locale.qywh2}</div>
+            <GreenLine />
+            <div className={styles.info}>
+              <div className={styles.item}>
+                <div>{locale.qywh3}</div>
+                <div className={styles.secondInfo}>{locale.qywh4}</div>
+              </div>
+              <Divider />
+              <div className={styles.item}>
+                <div>{locale.qywh5}</div>
+                <div className={styles.secondInfo}>{locale.qywh6}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={styles.ryzzBox}>
+          <div className={"common-title1"}>{locale.yrzz}</div>
+          <div className={"common-info"}>{locale.yrzzInfo}</div>
+          <GreenLine />
+          <CarouselPicture imgData={imgList} style={{ minWidth: "100%" }} />
+          <Button
+            onClick={() => {
+              history.push("/about-us/full-certificate");
+            }}
+            className={styles.btn}
+            type="primary"
+            ghost
+          >
+            {locale.ckqbzs}
+          </Button>
+        </div>
       </h1>
     </div>
   );

src/pages/about-us/index.less

@@ -1,15 +1,33 @@
 .root {
-  .fullImg {
+  .gssjBox {
-    width: 100vw;
+    padding: 57px;
-    height: auto;
+    display: grid;
-    object-fit: cover;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    font-family: Source Han Sans SC;
+    font-weight: 400;
+    font-size: 16px;
+    color: #595a61;
+    line-height: 40px;
+    > div {
+      text-align: center;
+    }
+    .title {
+      font-family: Source Han Sans SC;
+      font-weight: bold;
+      font-size: 60px;
+      color: #2bb2a8;
+      line-height: 81px;
+    }
   }
   .gsjjBox {
     position: relative;
+    background-image: url(../../assets/img_jianjie@3x.png);
+    background-size: cover; /* 确保图片覆盖整个元素 */
+    background-position: center; /* 将图片居中显示 */
+    padding-left: 10%;
+    padding-top: 94px;
+    padding-bottom: 71px;
     .gsjjText {
-      position: absolute;
-      bottom: 71px;
-      left: 10%;
       .title {
         font-family: Source Han Sans SC;
         font-weight: 500;
@@ -38,4 +56,98 @@
       }
     }
   }
+  .qywhBox {
+    position: relative;
+    background-image: url(../../assets/img_qiyewenhua@3x.png);
+    background-size: cover; /* 确保图片覆盖整个元素 */
+    background-position: center; /* 将图片居中显示 */
+    padding-left: 10%;
+    padding-top: 94px;
+    padding-bottom: 71px;
+    color: white;
+    .qywhText {
+      .title {
+        font-family: Source Han Sans SC;
+        font-weight: 500;
+        font-size: 48px;
+        line-height: 64px;
+        margin-bottom: 24px;
+      }
+      .secondTitle {
+        font-family: Source Han Sans SC;
+        font-weight: 400;
+        font-size: 22px;
+        line-height: 40px;
+      }
+      .info {
+        max-width: 40%;
+        font-family: Source Han Sans SC;
+        font-weight: 300;
+        font-size: 16px;
+        line-height: 30px;
+        :global {
+          .ant-divider-horizontal {
+            margin: 40px 0;
+          }
+          .ant-divider {
+            border: 1px solid rgba(255, 255, 255, 0.1);
+          }
+        }
+        // .item :not(:last-child) {
+        // }
+        .secondInfo {
+          opacity: 0.6;
+          font-size: 16px;
+          margin-top: 23px;
+        }
+      }
+    }
+  }
+  .ryzzBox {
+    background-image: url(../../assets/img_rongyuzizhi@3x.png);
+    background-size: cover; /* 确保图片覆盖整个元素 */
+    background-position: center; /* 将图片居中显示 */
+    padding: 120px 10% 50px;
+
+    .btn {
+      display: block;
+      width: 245px;
+      height: 50px;
+      margin: 50px auto;
+    }
+  }
+}
+.carouselPictureBox {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  .imgBox {
+    background: #f6f7fb;
+    border: 6px solid #ffffff;
+  }
+  .imgInfo {
+    background: white;
+    align-items: center;
+    padding: 40px 50px;
+    .title {
+      font-family: Source Han Sans SC;
+      font-weight: bold;
+      font-size: 24px;
+      color: #d80b2a;
+      line-height: 34px;
+    }
+    .year {
+      font-family: Source Han Sans SC;
+      font-weight: 300;
+      font-size: 16px;
+      color: #d80b2a;
+      line-height: 32px;
+    }
+    .info {
+      font-family: Source Han Sans SC;
+      font-weight: 300;
+      font-size: 16px;
+      color: #595a61;
+      line-height: 32px;
+    }
+  }
 }

src/pages/product-center/index.js

@@ -1,12 +1,33 @@
 import styles from "./index.less";
-import { LocalConsumer } from "../../layouts/MyContext";
+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 React, { useContext } from "react";
 
 const IndexPage = (props) => {
-  console.log(props);
+  const locale = getLocale();
   return (
-    <div>
+    <div className={styles.root}>
-      <h1 className={styles.title}>Page index</h1>
+      <div style={{ position: "relative" }}>
+        <img className={"fullImg"} src={img1} />
+        <PageHeaderInfo
+          title={locale.footerMenu2}
+          info={locale.cpzxInfo}
+          imgText={"Products"}
+        >
+          <CusBreadcrumb
+            breadcrumbMenus={[
+              {
+                key: "/product-center",
+                text: "产品中心",
+              },
+            ]}
+          />
+        </PageHeaderInfo>
+      </div>
     </div>
   );
 };