feat
This commit is contained in:
parent
17dbd498be
commit
ca58cda5c9
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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:"专业铸就医疗品质之基",
|
||||
jstdInfo2:"人均十年的行业经验组成一支顶尖的技术团队",
|
||||
fw:"服 务",
|
||||
fwInfo:'服务全球客户10年以上',
|
||||
xm:"项 目",
|
||||
xmInfo:"项目工程15年以上从业经验",
|
||||
js:"技 术",
|
||||
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:'提交',
|
||||
jstdInfo1: "专业铸就医疗品质之基",
|
||||
jstdInfo2: "人均十年的行业经验组成一支顶尖的技术团队",
|
||||
fw: "服 务",
|
||||
fwInfo: "服务全球客户10年以上",
|
||||
xm: "项 目",
|
||||
xmInfo: "项目工程15年以上从业经验",
|
||||
js: "技 术",
|
||||
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: "提交",
|
||||
cp1: "血栓弹力图产品线",
|
||||
cp2: "疑血和血小板功能分析仪产品线",
|
||||
cp3: "全自动血小板功能分析仪产品线",
|
||||
cp4: "POCT化学发光免疫分析仪产品线",
|
||||
cp5: "全自动凝血免疫分析仪产品线",
|
||||
|
||||
test: "",
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.product_detail_root{
|
||||
|
||||
}
|
||||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,54 @@
|
|||
.title {
|
||||
background: rgb(121, 242, 157);
|
||||
.product_root {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.root {
|
||||
.technical_support_root {
|
||||
.jszcBox {
|
||||
position: relative;
|
||||
background-image: url(../../assets/img_jiahu_shouhou@3x.png);
|
||||
|
|
|
|||
Loading…
Reference in New Issue