feat：联系我们界面开发

src/components/GreenLine/GreenLine.js

@@ -2,10 +2,15 @@ import React from "react";
 import styles from "./GreenLine.less";
 
 const GreenLine = (props) => {
-  const { width = 10, height = 6 } = props;
+  const {
+    width = 10,
+    height = 6,
+    background = "#2bb2a8",
+    className = "",
+  } = props;
   return (
-    <div className={styles.root}>
+    <div className={`${styles.root} ${className}`}>
-      <div style={{ width, height }} className={styles.line} />
+      <div style={{ width, height, background }} className={styles.line} />
     </div>
   );
 };

src/components/GreenLine/GreenLine.less

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

src/locales/zh_CN.js

@@ -1,5 +1,6 @@
 export default {
   sy: "首页",
+  contactTel:"400-650-2386",
   headTitle: "欢迎浏览宝锐生物科技泰州有限公司官方网站",
   headTel: "客服热线：",
   cpzx: "产品中心",
@@ -69,5 +70,22 @@ export default {
   jsInfo:"项目工程15年以上从业经验",
   gl:"管 理",
   glInfo:"11年以上项目管理经验",
+  lxwmInfo:"我们新生力量在成长、仍在继续",
+  gsmc:"宝锐生物科技泰州有限公司",
+  gsdz:'江苏省泰州市国家医药高新技术产业园中国医药城口泰路东侧、新阳路北侧 G40幢厂区三至四层东半侧',
+  shzc:'售后支持',
+  shzcjs:'售后及技术支持',
+  rczp:'人才招聘',
+  rczpdh:'400-650-2386',
+  rczpyx:"market@healtek.net",
+  swhz:"商务合作",
+  swhzyx:'market@healtek.net',
+  zxly:"在线留言",
+  zxlyInfo:"有任何问题，欢迎在此留言",
+  name:"姓名",
+  company:"公司名称",
+  phone:"联系电话",
+  lynr:"留言内容",
+  submit:'提交',
   test: "",
 };

src/pages/about-us/index.js

@@ -50,89 +50,89 @@ const IndexPage = (props) => {
     },
   ];
   return (
-      <div className={styles.root}>
+    <div className={styles.root}>
-        <div style={{ position: "relative" }}>
+      <div style={{ position: "relative" }}>
-          <img className={"fullImg"} src={img1} />
+        <img className={"fullImg"} src={img1} />
-          <PageHeaderInfo
+        <PageHeaderInfo
-            title={locale.footerMenu1}
+          title={locale.footerMenu1}
-            info={locale.gywmInfo}
+          info={locale.gywmInfo}
-            imgText={"About us"}
+          imgText={"About us"}
-          >
+        >
-            <CusBreadcrumb
+          <CusBreadcrumb
-              breadcrumbMenus={[
+            breadcrumbMenus={[
-                {
+              {
-                  key: "/about-us",
+                key: "/about-us",
-                  text: locale.footerMenu1,
+                text: locale.footerMenu1,
-                },
+              },
-              ]}
+            ]}
-            />
+          />
-          </PageHeaderInfo>
+        </PageHeaderInfo>
-        </div>
+      </div>
-        <div className={styles.gsjjBox}>
+      <div className={styles.gsjjBox}>
-          <div className={styles.gsjjText}>
+        <div className={styles.gsjjText}>
-            <div className={styles.title}>{locale.gsjj1}</div>
+          <div className={styles.title}>{locale.gsjj1}</div>
-            <div className={styles.secondTitle}>{locale.gsjj2}</div>
+          <div className={styles.secondTitle}>{locale.gsjj2}</div>
-            <GreenLine />
-            <div className={styles.info}>
-              <div>{locale.gsjj31}</div>
-              <div>{locale.gsjj32}</div>
-              <div>{locale.gsjj33}</div>
-            </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%" }} />
+          <div className={styles.info}>
-          <Button
+            <div>{locale.gsjj31}</div>
-            onClick={() => {
+            <div>{locale.gsjj32}</div>
-              history.push("/about-us/full-certificate");
+            <div>{locale.gsjj33}</div>
-            }}
+          </div>
-            className={styles.btn}
-            type="primary"
-            ghost
-          >
-            {locale.ckqbzs}
-          </Button>
         </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>
+    </div>
   );
 };
 

src/pages/contact-us/index.js

@@ -1,12 +1,137 @@
+import React from "react";
+import { Form, Button, Input } from "antd";
+import { getLocale } from "../../utils";
 import styles from "./index.less";
-import { LocalConsumer } from "../../layouts/MyContext";
+import GreenLine from "../../components/GreenLine";
-import React, { useContext } from "react";
+import CusBreadcrumb from "../../components/CusBreadcrumb";
+import PageHeaderInfo from "../../components/PageHeaderInfo";
+
+import img1 from "../../assets/img_lianxiwomen@3x.png";
+import img2 from "../../assets/img_erqeima@3x.png";
+import img3 from "../../assets/icon_dianhua@3x.png";
+import img4 from "../../assets/icon_youxiang@3x.png";
+import img5 from "../../assets/icon_dizhi@3x.png";
+import img6 from "../../assets/img_ditu@3x.png";
 
 const IndexPage = (props) => {
-  console.log(props);
+  const { history } = props;
+  const locale = getLocale();
+
+  const jstdImgList = [
+    {
+      imgUrl: img3,
+      title: locale.shzcjs,
+      info: locale.rczpdh,
+    },
+    {
+      imgUrl: img4,
+      title: locale.rczp,
+      info: locale.rczpyx,
+    },
+    {
+      imgUrl: img4,
+      title: locale.swhz,
+      info: locale.swhzyx,
+    },
+  ];
   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.footerMenu4}
+          info={locale.lxwmInfo}
+          imgText={"Contact us"}
+        >
+          <CusBreadcrumb
+            breadcrumbMenus={[
+              {
+                key: "/contact-us",
+                text: locale.footerMenu4,
+              },
+            ]}
+          />
+        </PageHeaderInfo>
+      </div>
+      <div className={styles.baseInfoBox}>
+        <div className={styles.content}>
+          <div className={styles.left}>
+            <div className={styles.title}>{locale.gsmc}</div>
+            <div className={styles.addressImgBox}>
+              <img className={styles.addressImg} src={img5} />
+              <span className={styles.info}>{locale.gsdz}</span>
+            </div>
+          </div>
+          <div className={styles.right}>
+            <div>
+              <div style={{ textAlign: "right" }} className={styles.info}>
+                {locale.shzc}
+              </div>
+              <div className={styles.tel}>{locale.contactTel}</div>
+              <GreenLine className={styles.cusGreenLine} />
+            </div>
+            <img className={styles.scanImg} src={img2} />
+          </div>
+        </div>
+        <div className={styles.baseInfoList}>
+          {jstdImgList?.map((item, index) => (
+            <div className={styles.item} key={`jstd-item-${index}`}>
+              <img src={item.imgUrl} />
+              <div>
+                <div className={styles.title}>{item.title}</div>
+                <div className={styles.info}>{item.info}</div>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.contactForm}>
+          <img className={"fullImg"} src={img6} />
+          <div className={styles.contactContent}>
+            <div className={styles.form}>
+              <div className={styles.title}>{locale.zxly}</div>
+              <div className={styles.info}>{locale.zxlyInfo}</div>
+              <GreenLine background="white" />
+              <Form
+                name="basic"
+                // labelCol={{
+                //   span: 8,
+                // }}
+                // wrapperCol={{
+                //   span: 16,
+                // }}
+                // initialValues={{}}
+                // onFinish={onFinish}
+                autoComplete="off"
+              >
+                <Form.Item label={locale.name} name="name">
+                  <Input />
+                </Form.Item>
+                <Form.Item label={locale.company} name="company">
+                  <Input />
+                </Form.Item>
+                <Form.Item label={locale.phone} name="phone">
+                  <Input />
+                </Form.Item>
+                <Form.Item label={locale.lynr} name="lynr">
+                  <Input />
+                </Form.Item>
+                <Form.Item>
+                  <Button htmlType="submit">{locale.submit}</Button>
+                </Form.Item>
+              </Form>
+            </div>
+            <div className={styles.addressInfo}>
+              <div style={{ padding: "44px 74px 74px 54px" }}>
+                <div className={styles.title}>{locale.gsmc}</div>
+                <div className={styles.addressImgBox}>
+                  <img className={styles.addressImg} src={img5} />
+                  <span className={styles.info}>{locale.gsdz}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };

src/pages/contact-us/index.less

@@ -1,3 +1,168 @@
-.title {
+.root {
-  background: rgb(121, 242, 157);
+  .addressImgBox {
+    display: flex;
+    align-items: start;
+    .addressImg {
+      width: 24px;
+      margin-right: 11px;
+      object-fit: contain;
+    }
+  }
+  .info {
+    font-family: Source Han Sans SC;
+    font-weight: 300;
+    font-size: 16px;
+    color: #595a61;
+  }
+  .baseInfoBox {
+    padding: 93px 10% 60px;
+    .content {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      grid-column-gap: 5px;
+      grid-row-gap: 5px;
+      .left {
+        width: 594px;
+      }
+      .right {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        grid-column-gap: 5px;
+        grid-row-gap: 5px;
+        align-items: center;
+      }
+      .title {
+        font-family: Source Han Sans SC;
+        font-weight: 500;
+        font-size: 48px;
+        color: #000000;
+        line-height: 64px;
+        margin-bottom: 30px;
+      }
+
+      .tel {
+        font-family: Source Han Sans SC;
+        font-weight: bold;
+        font-size: 34px;
+        color: #000000;
+        line-height: 64px;
+      }
+      .cusGreenLine{
+        text-align: right;
+        margin: 0;
+      }
+      .scanImg {
+        width: 131px;
+        height: 131px;
+        margin-left: 34px;
+      }
+    }
+  }
+  .baseInfoList {
+    margin-top: 150px;
+    background: #ffffff;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+    margin-bottom: 61px;
+    .item {
+      display: flex;
+      align-items: center;
+      img {
+        width: 80px;
+        height: 80px;
+        margin-right: 20px;
+      }
+      .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;
+      }
+    }
+  }
+  .contactForm {
+    position: relative;
+    margin-bottom: 378px;
+    .contactContent {
+      position: absolute;
+      top: 88px;
+      left: 0;
+      right: 0;
+      display: flex;
+      .form {
+        background: #2bb2a8;
+        padding: 66px 79px;
+        color: #ffffff;
+        font-family: Source Han Sans SC;
+        width: 510px;
+        margin-right: 186px;
+        .title {
+          font-weight: 500;
+          font-size: 48px;
+          line-height: 64px;
+          margin-bottom: 13px;
+        }
+        .info {
+          font-size: 22px;
+          line-height: 40px;
+          color: #ffffff;
+        }
+        :global {
+          .ant-form > .ant-form-item:not(:last-child) {
+            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+            margin-bottom: 43px;
+          }
+          .ant-form-item-label > label {
+            width: auto;
+            font-size: 16px;
+            color: #ffffff;
+            line-height: 40px;
+          }
+          .ant-input {
+            background: inherit;
+            border: none;
+          }
+          .ant-btn {
+            width: 147px;
+            height: 48px;
+            margin-top: 35px;
+            span {
+              color: #2bb2a8;
+              font-weight: 500;
+              font-size: 18px;
+            }
+          }
+        }
+      }
+      .addressInfo {
+        width: 653px;
+        margin-top: -15px;
+        height: fit-content;
+        background-image: url(../../assets/img_ditu_kuang@3x.png);
+        background-size: 100% 100%;
+        // background-size: cover; /* 确保图片覆盖整个元素 */
+        background-position: center; /* 将图片居中显示 */
+
+        .title {
+          font-family: Source Han Sans SC;
+          font-weight: 500;
+          font-size: 22px;
+          color: #2bb2a8;
+          line-height: 34px;
+          margin-bottom: 10px;
+        }
+      }
+    }
+  }
 }

src/pages/technical-support/index.js

@@ -98,7 +98,7 @@ const IndexPage = (props) => {
             <div>{locale.shjjszc31}</div>
             <div>
               <span>{locale.shjjszc32}</span>
-              <span className={styles.phone}>400 650 2386</span>
+              <span className={styles.phone}>{locale.contactTel}</span>
               <span>{locale.shjjszc33}</span>
             </div>
             <div>{locale.shjjszc34}</div>