feat:技术支持开发

2024-11-03 17:31:53 +08:00 · 2024-11-03 17:31:53 +08:00 · df1b1a24dc
parent 9f3b12dda3
commit df1b1a24dc
7 changed files with 282 additions and 29 deletions
--- a/src/components/PageHeaderInfo/PageHeaderInfo.less
+++ b/src/components/PageHeaderInfo/PageHeaderInfo.less
@ -7,11 +7,11 @@
  left: 0;
  right: 0;
  .gywmBox {
-    padding: 40px 0;
+    padding: 40px 0 20px;
    position: relative;
    .imgText {
      position: absolute;
-      right: 10%;
+      right: 0;
      bottom: -45px;
      font-family: Source Han Sans SC;
      font-weight: 500;
--- a/src/global.less
+++ b/src/global.less
@ -56,6 +56,14 @@ body {
  color: #000000;
  line-height: 75px;
 }
+
+.common-title2{
+  font-family: Source Han Sans SC;
+  font-weight: bold;
+  font-size: 38px;
+  color: #000000;
+  line-height: 64px;
+}
 .common-info {
  font-family: Source Han Sans SC;
  font-weight: 500;
--- a/src/layouts/BaseLayout.js
+++ b/src/layouts/BaseLayout.js
@ -6,10 +6,11 @@ import enUS from "antd/es/locale/en_US";
 import BaseHeader from "./components/BaseHeader";
 import TopMenu from "./components/TopMenu";
 import Footer from "./components/Footer";
-import headMenuData from "./menuData";
+// import headMenuData from "./menuData";
 import yuyanImg from "../assets/icon_yuyan@3x.png";
 import { getLocale } from "../utils";
 import styles from "./BaseLayout.less";
+import locale from "antd/lib/date-picker/locale/en_US";
 // import zhCNConfig from "../locales/zh_CN";
 // import enUSConfig from "../locales/en_US ";

@ -31,6 +32,29 @@ class BaseLayout extends React.Component {
    locale: localStorage.getItem("language") || "中文",
  };

+  headMenuData = [
+    {
+      key: "/home",
+      text: localeConfig.sy,
+    },
+    {
+      key: "/about-us",
+      text: localeConfig.footerMenu1,
+    },
+    {
+      key: "/product-center",
+      text: localeConfig.footerMenu2,
+    },
+    {
+      key: "/technical-support",
+      text: localeConfig.footerMenu3,
+    },
+    {
+      key: "/contact-us",
+      text: localeConfig.footerMenu4,
+    },
+  ];
+
  handleLocaleChange = (val) => {
    if (val !== this.state.locale) {
      this.setState({ locale: val });
@ -111,9 +135,9 @@ class BaseLayout extends React.Component {
              </div>
              <TopMenu
                selectedKeys={[
-                  findPrefixSelectedKey(headMenuData, location.pathname),
+                  findPrefixSelectedKey(this.headMenuData, location.pathname),
                ]}
-                data={headMenuData}
+                data={this.headMenuData}
                onClick={this.handleSideMenuClick}
                isInherit={isInherit}
              />
--- a/src/locales/zh_CN.js
+++ b/src/locales/zh_CN.js
@ -1,4 +1,5 @@
 export default {
+  sy: "首页",
  headTitle: "欢迎浏览宝锐生物科技泰州有限公司官方网站",
  headTel: "客服热线：",
  cpzx: "产品中心",
@ -34,17 +35,39 @@ export default {
  qywh5: "以先进技术用于生产实践",
  qywh6:
    "将“专业产品，融入生命，融入社会责任”作为企业发展的根本宗旨，秉承前人创业之鉴，坚持“开拓进取，诚信为先，睿智创新，专业经营”",
-  gywmInfo:'以研发为基础，集 研、产、销为一体的高科技型企业',
-  nhyjy:"年行业经验",
-  hzqy:"家合作企业",
-  qqkh:"家全球客户",
-  scjd:"㎡生产基地",
-  cpzxInfo:"每件产品都是我们倾心研发",
-  yrzz:"荣誉资质 值得信赖",
-  yrzzInfo:'Qualifications',
-  qbzs:"全部证书",
-  ckqbzs:"查看全部证书",
-  slrz:'我们的实力认证',
-  zszs:"全部证书展示",
+  gywmInfo: "以研发为基础，集 研、产、销为一体的高科技型企业",
+  nhyjy: "年行业经验",
+  hzqy: "家合作企业",
+  qqkh: "家全球客户",
+  scjd: "㎡生产基地",
+  cpzxInfo: "每件产品都是我们倾心研发",
+  yrzz: "荣誉资质 值得信赖",
+  yrzzInfo: "Qualifications",
+  qbzs: "全部证书",
+  ckqbzs: "查看全部证书",
+  slrz: "我们的实力认证",
+  zszs: "全部证书展示",
+  jszcInfo: "不断推出代表国际、代表行业一流技术水平的精华产品",
+  shjjszc1: "售后及技术支持",
+  shjjszc2: "After sales and technical support",
+  shjjszc31:
+    "公司目前有40余员工的服务团队，主要以我们多年专业的行业经验，为客户承载优秀产品的推广销售、售后服务、产品物流等环节工作。我们的市场经营服务总部位于北京，共有10余名维修维护工程师及产品技术人员接受了海外工厂的培训，并且通过严格考核。目前已分别在国内各大省级城市均设有分支服务机构，奠定强大的市场及售后服务网络。",
+  shjjszc32:
+    " 为提高我公司的服务效率，方便用户的使用，同时合理分担设备故障的费用消耗，我公司推出免费服务电话",
+  shjjszc33: "或直接通知工程师远程解决。 ",
+  shjjszc34:
+    "售后跟踪服务：电话回访，及时了解客户对仪器的使用情况，根据客户反馈的情况制定回访记录。 ",
+  shjjszc35: "客户电话咨询使用过程中出现的问题，及时查找原因给予解决。",
+  bfzp: "部分照片",
+  jstdInfo1:"专业铸就医疗品质之基",
+  jstdInfo2:"人均十年的行业经验组成一支顶尖的技术团队",
+  fw:"服 务",
+  fwInfo:'服务全球客户10年以上',
+  xm:"项 目",
+  xmInfo:"项目工程15年以上从业经验",
+  js:"技 术",
+  jsInfo:"项目工程15年以上从业经验",
+  gl:"管 理",
+  glInfo:"11年以上项目管理经验",
  test: "",
 };
--- a/src/pages/about-us/index.js
+++ b/src/pages/about-us/index.js
@ -1,6 +1,5 @@
 import React from "react";
 import { Divider, Button } from "antd";
-
 import { getLocale } from "../../utils";
 import styles from "./index.less";
 import GreenLine from "../../components/GreenLine";
@ -51,8 +50,7 @@ const IndexPage = (props) => {
    },
  ];
  return (
-    <div>
-      <h1 className={styles.root}>
+      <div className={styles.root}>
        <div style={{ position: "relative" }}>
          <img className={"fullImg"} src={img1} />
          <PageHeaderInfo
@ -134,8 +132,7 @@ const IndexPage = (props) => {
            {locale.ckqbzs}
          </Button>
        </div>
-      </h1>
-    </div>
+      </div>
  );
 };

--- a/src/pages/technical-support/index.js
+++ b/src/pages/technical-support/index.js
@ -1,12 +1,119 @@
+import React from "react";
+import { Divider, Button } from "antd";
+import { getLocale } from "../../utils";
 import styles from "./index.less";
-import { LocalConsumer } from "../../layouts/MyContext";
-import React, { useContext } from "react";
+import GreenLine from "../../components/GreenLine";
+import CusBreadcrumb from "../../components/CusBreadcrumb";
+import PageHeaderInfo from "../../components/PageHeaderInfo";
+import CarouselPicture from "../../components/CarouselPicture";
+
+import img1 from "../../assets/img_jishuzhichi@3x.png";
+import img2 from "../../assets/img_jishu_zhaopian1@3x.png";
+import img3 from "../../assets/img_jishu_fuwu@3x.png";
+import img4 from "../../assets/img_jishu_xiangmu@3x.png";
+import img5 from "../../assets/img_jishu_jishu@3x.png";
+import img6 from "../../assets/img_jishu_guanli@3x.png";

 const IndexPage = (props) => {
-  console.log(props);
+  const { history } = props;
+  const locale = getLocale();
+
+  const jstdImgList = [
+    {
+      imgUrl: img3,
+      title: locale.fw,
+      info: locale.fwInfo,
+    },
+    {
+      imgUrl: img4,
+      title: locale.xm,
+      info: locale.xmInfo,
+    },
+    {
+      imgUrl: img5,
+      title: locale.js,
+      info: locale.jsInfo,
+    },
+    {
+      imgUrl: img6,
+      title: locale.gl,
+      info: locale.glInfo,
+    },
+  ];
+  const imgList = [
+    {
+      imgUrl: img2,
+      name: "xxxxCE证书",
+      year: "2023",
+    },
+    {
+      imgUrl: img2,
+      name: "xxxxCE证书",
+    },
+    {
+      imgUrl: img2,
+      name: "xxxxCE证书",
+    },
+  ];
  return (
-    <div>
-      <h1 className={styles.title}>Page index</h1>
+    <div className={styles.root}>
+      <div style={{ position: "relative" }}>
+        <img className={"fullImg"} src={img1} />
+        <PageHeaderInfo
+          title={locale.footerMenu3}
+          info={locale.jszcInfo}
+          imgText={"Technical support"}
+        >
+          <CusBreadcrumb
+            breadcrumbMenus={[
+              {
+                key: "/technical-support",
+                text: locale.footerMenu3,
+              },
+            ]}
+          />
+        </PageHeaderInfo>
+      </div>
+      <div className={styles.jstdBox}>
+        <div className={"text-center"}>
+          <div className={"common-title2"}>{locale.jstdInfo1}</div>
+          <div className={"common-info"}>{locale.jstdInfo2}</div>
+        </div>
+        <div className={styles.list}>
+          {jstdImgList?.map((item, index) => (
+            <div className={styles.item} key={`jstd-item-${index}`}>
+              <img src={item.imgUrl} />
+              <div className={styles.title}>{item.title}</div>
+              <div className={styles.info}>{item.info}</div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className={styles.jszcBox}>
+        <div className={styles.jszcText}>
+          <div className={styles.title}>{locale.shjjszc1}</div>
+          <div className={styles.secondTitle}>{locale.shjjszc2}</div>
+          <GreenLine />
+          <div className={styles.info}>
+            <div>{locale.shjjszc31}</div>
+            <div>
+              <span>{locale.shjjszc32}</span>
+              <span className={styles.phone}>400 650 2386</span>
+              <span>{locale.shjjszc33}</span>
+            </div>
+            <div>{locale.shjjszc34}</div>
+            <div>{locale.shjjszc35}</div>
+          </div>
+        </div>
+      </div>
+      <div className={styles.imgBox}>
+        <div className={"common-title2"}>{locale.bfzp}</div>
+        <div className={styles.list}>
+          {imgList?.map((item, index) => (
+            <img key={`bfjszc-picture-item-${index}`} src={item.imgUrl} />
+          ))}
+        </div>
+      </div>
    </div>
  );
 };
--- a/src/pages/technical-support/index.less
+++ b/src/pages/technical-support/index.less
@ -1,3 +1,97 @@
-.title {
-  background: rgb(121, 242, 157);
+.root {
+  .jszcBox {
+    position: relative;
+    background-image: url(../../assets/img_jiahu_shouhou@3x.png);
+    background-size: cover; /* 确保图片覆盖整个元素 */
+    background-position: center; /* 将图片居中显示 */
+    padding-left: 10%;
+    padding-top: 94px;
+    padding-bottom: 71px;
+    .phone {
+      color: #2bb2a8;
+      font-size: 16px;
+      font-weight: bold;
+      padding: 0 10px;
+    }
+    .jszcText {
+      .title {
+        font-family: Source Han Sans SC;
+        font-weight: 500;
+        font-size: 48px;
+        color: #000000;
+        line-height: 64px;
+        margin-bottom: 24px;
+      }
+      .secondTitle {
+        font-family: Source Han Sans SC;
+        font-weight: 400;
+        font-size: 22px;
+        color: #595a61;
+        line-height: 40px;
+      }
+      .info {
+        max-width: 35%;
+        font-family: Source Han Sans SC;
+        font-weight: 300;
+        font-size: 16px;
+        color: #595a61;
+        line-height: 30px;
+        > div :not(:last-child) {
+          margin-bottom: 30px;
+        }
+      }
+    }
+  }
+  .jstdBox {
+    padding: 99px 0;
+    background: #ffffff;
+    .list {
+      margin-top: 60px;
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr 1fr;
+      .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;
+        }
+      }
+    }
+  }
+  .imgBox {
+    background: white;
+    padding: 99px 10% 78px;
+    .list {
+      margin-top: 40px;
+      display: grid;
+      text-align: center;
+      grid-template-columns: 1fr 1fr 1fr;
+      grid-column-gap: 5px;
+      grid-row-gap: 5px;
+      img {
+        height: auto;
+        width: 100%;
+        object-fit: cover;
+      }
+    }
+  }
+  // .title {
+  //   background: rgb(121, 242, 157);
+  // }
 }