Commit ca97005b authored by wuhao's avatar wuhao 🎯

asder

parent ad5bf8ab
......@@ -43,6 +43,7 @@ export default [
path: '/about/joindetail',
name: '加入南高',
component: '@/pages/about/joindetail',
hideInMenu: true,
},
{
path: '/about/contact',
......@@ -68,27 +69,27 @@ export default [
{
path: '/factory/typea/mes',
name: 'MES智能制造管理系统',
component: '@/pages/index',
component: '@/pages/factory/mes',
},
{
path: '/factory/typea/wms',
name: 'WMS智能仓储管理系统',
component: '@/pages/index',
component: '@/pages/factory/wms',
},
{
path: '/factory/typea/ems',
name: 'EMS设备运维管理系统',
component: '@/pages/index',
component: '@/pages/factory/ems',
},
{
path: '/factory/typea/iot',
name: 'IOT数据采集系统',
component: '@/pages/index',
component: '@/pages/factory/iot',
},
{
path: '/factory/typea/plm',
name: 'PLM产品生命周期管理系统',
component: '@/pages/index',
component: '@/pages/factory/plm',
},
{
path: '/factory/typea/pdm',
......
This diff is collapsed.
......@@ -262,12 +262,12 @@ body,
}
@media (min-width: 1680px) {
html {
font-size: 26px;
font-size: 25px;
}
}
@media (min-width: 1920px) {
html {
font-size: 28px;
font-size: 26px;
}
}
.ant-menu-title-content {
......@@ -363,13 +363,77 @@ body,
min-height: 120px;
background-color: #ffffff;
}
.textareacontainer {
background-color: #f0f0f0;
padding: 16px 16px 0 16px;
position: absolute;
bottom: 0px;
height: 50%;
transition: all 0.4s;
h3 {
font-size: 0.8rem;
color: #000000;
transition: all 0.4s;
}
p {
font-size: 0.6rem;
color: #333333;
transition: all 0.4s;
margin: 0;
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box; //特别显示模式
-webkit-line-clamp: 2; //行数
line-clamp: 2;
-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.btn {
zoom: 0;
transform: translateY(100px);
transition: all 0.6s;
}
}
&:hover {
.textareacontainer {
background-color: #1890ff;
padding: 16px;
position: absolute;
bottom: 0px;
height: 80%;
border-radius: 8px;
h3 {
font-size: 0.8rem;
color: #ffffff;
}
p {
font-size: 0.6rem;
color: #f0f0f0;
margin-bottom: 8px;
text-overflow: -o-ellipsis-lastline;
overflow: hidden; //溢出内容隐藏
text-overflow: ellipsis; //文本溢出部分用省略号表示
display: -webkit-box; //特别显示模式
-webkit-line-clamp: 20; //行数
line-clamp: 20;
-webkit-box-orient: vertical; //盒子中内容竖直排列
}
.btn {
zoom: 1;
height: 32px;
transform: translateY(0px);
}
}
}
.textcontainer {
background-color: #ffffff;
padding: 16px 16px 0 16px;
position: absolute;
bottom: 0px;
transition: all 0.4s;
h2 {
h3 {
font-size: 0.8rem;
color: #000000;
transition: all 0.4s;
......@@ -449,6 +513,30 @@ body,
}
}
}
.diydotc {
bottom: -0px !important;
left: -2.6rem !important;
width: 100% !important;
justify-content: flex-start !important;
li {
width: auto !important;
button {
background-color: #333333 !important;
height: 6px !important;
width: 6px !important;
border-radius: 8px !important;
}
}
li.slick-active {
button {
background-color: #1890ff !important;
height: 6px !important;
width: 46px !important;
border-radius: 8px !important;
}
}
}
.more {
height: 1px;
width: 100%;
......@@ -527,3 +615,88 @@ body,
margin-bottom: 2rem;
}
}
#mesContainer h2 {
padding: 16px;
text-align: center;
color: rgba(1, 92, 172, 1);
margin: 1rem 0;
}
.bgjs {
background-color: rgba(247, 250, 252, 1);
}
.cpjs {
padding: 2rem;
}
.cpjs h3 {
font-size: 1.2rem;
margin: 0.4rem;
text-align: center;
color: #000000;
}
.cpjs p {
font-size: 0.8rem;
color: #333333;
}
.cpjs img {
display: block;
margin: 2rem auto;
width: 60vw;
min-width: 320px;
}
.imglimit {
img {
width: 50%;
min-width: auto !important;
}
}
.anli-text-left {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 2rem;
padding-right: 0;
* {
text-align: right;
}
h4 {
font-size: 1rem;
}
p {
font-size: 0.8rem;
}
}
.anli-text-right {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 2rem;
padding-left: 0;
h4 {
font-size: 1rem;
}
p {
font-size: 0.8rem;
}
}
.cpys-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
height: 100%;
div {
margin-bottom: 0.4rem;
h4 {
font-size: 0.8rem;
margin-bottom: 6px;
}
p {
font-size: 0.6rem;
}
}
}
......@@ -8,7 +8,7 @@ import Footer from './footer';
const { useBreakpoint } = Grid;
const mapTree = (org) => {
const haveChildren = Array.isArray(org.routes) && org.routes.length > 0;
if (!org.name) return;
if (!org.name || org.hideInMenu) return;
const children = haveChildren
? {
children: org.routes.map((i) => mapTree(i)),
......
.khjz-text{
height: 100%;
background-color: aliceblue;
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
padding: 0 1.6rem;
}
.khjz-text p{
font-size: 0.8rem;
}
.khjz-text p:nth-child(1){
margin: 16px;
padding-left: 16px;
border-left: 4px solid rgba(51, 142, 245, 1);
}
.khjz-text p:nth-child(2){
margin: 16px;
padding-left: 16px;
border-left: 4px solid rgba(255, 195, 0, 1);
}
.khjz-text p:nth-child(3){
margin: 16px;
padding-left: 16px;
border-left: 4px solid rgba(0, 186, 173, 1);
}
.khjz-text p:nth-child(4){
margin: 16px;
padding-left: 16px;
border-left: 4px solid rgba(18, 208, 255, 1);
}
.khjz-text p:nth-child(5){
margin: 16px;
padding-left: 16px;
border-left: 4px solid rgba(7, 108, 224, 1);
}
/* eslint-disable import/no-anonymous-default-export */
import React from 'react';
import { Row, Col } from 'antd';
import './index.css';
const col = { xs: 24, sm: 24, md: 24, lg: 11, xl: 11, xxl: 11 },
colc = { xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 },
cols = { xs: 0, sm: 0, md: 0, lg: 2, xl: 2, xxl: 2 };
export default () => {
return (
<div id="mesContainer">
<img
src={require('@/assets/fac3.jpg')}
alt=""
style={{ width: '100%' }}
/>
<div className="content">
<h2 className="title">EMS设备运维管理系统</h2>
</div>
<div className="cpjs bgjs">
<h3>系统介绍</h3>
<p>
南高设备管理系统(EMS)
围绕资产管理、运行管理、维修管理、维保管理、点检管理、备件管理、统计报表等各个环节,提供针对设备的台账盘点、现场点检、巡检、维修、保养、转移、报废等设备全生命周期跟踪管理。设备管理系统提供了移动端的设备故障报修,实施简单快捷,可以提高现场维修效率,降低故障维修时间。设备管理系统以设备维护及远程移动端报修为核心,帮助企业实现设备的信息化管理,提升设备综合效率。设备管理系统提供公有云、私有云两种部署方式,可以为企业提供定制化开发服务。投入少、见效快,可适用于各类企业。{' '}
</p>
</div>
<div className="cpjs">
<h3>业务框架</h3>
<img src={require('@/assets/kj.jpg')} alt="" />
</div>
<div className="cpjs">
<h3>应用案例</h3>
<Row>
<Col {...col} className="spread imglimit">
<img src={require('@/assets/case1.png')} alt="" />
<div className="anli-text-left">
<h4>家电行业</h4>
<p>为多家彩电、冰箱、空调、洗衣机制造企业提供了设备管理系统。</p>
</div>
</Col>
<Col {...cols}>
<div
style={{
height: '100%',
width: '100%',
background: `url(${require('@/assets/group.png')}) no-repeat`,
backgroundSize: '20% auto',
backgroundPosition: 'center 120px ',
}}
></div>
</Col>
<Col {...col} className="spread imglimit">
<div className="anli-text-right">
<h4>半导体行业</h4>
<p>为多家晶圆制造、芯片封装企业提供了设备管理系统。</p>
</div>
<img src={require('@/assets/case2.png')} alt="" />
</Col>
<Col {...col} className="spread imglimit">
<img src={require('@/assets/case3.png')} alt="" />
<div className="anli-text-left">
<h4>食品行业</h4>
<p>为多家食品、饮料、食品耗材加工企业提供了设备管理系统。</p>
</div>
</Col>
<Col {...cols}>
<div
style={{
height: '100%',
width: '100%',
background: `url(${require('@/assets/group.png')}) no-repeat`,
backgroundSize: '20% auto',
backgroundPosition: 'center -120px ',
}}
></div>
</Col>
<Col {...col} className="spread imglimit">
<div className="anli-text-right">
<h4>机械制造行业</h4>
<p>
为多家交通设备、机器人、数控机床、包装设备制造企业提供了设备管理系统。
</p>
</div>
<img src={require('@/assets/case4.png')} alt="" />
</Col>
</Row>
</div>
<div className="content" style={{ padding: '2rem' }}>
<h2 className="title">应用效益</h2>
<Row>
<Col {...colc}>
<img
style={{ width: '100%', display: 'block', margin: '0 auto' }}
src={require('@/assets/worth.jpg')}
alt=""
/>
</Col>
<Col {...colc}>
<div className="khjz-text">
<p>
根据备品备件领用及使用记录信息,优化备品备件库存、降低备件库存资金积压。
</p>
<p>
通过设备维保智能分析,为企业提供管理决策依据,减少故障发生率,缩短停机时间。
</p>
<p>
以精益TPM理念为指导,实现管理决策、资产管理、设备运维、知识库等四大维度的管理。
</p>
<p>
快速定位故障设备及故障类型,缩短维修派单时间与维修工准备时间,实现维修过程透明化、数字化,提升维修管理效率,减少非计划停机时间。
</p>
<p>
通过一机一码,在PC、移动端多种应用上实现收集、记录、上报信息,自动生成各种分析报表,实现设备运维管理、人员绩效考核及产线效能分析等的无纸化办公、高效化管理。
</p>
</div>
</Col>
</Row>
</div>
<div className="content">
<h2 className="title">功能模块</h2>
<img
style={{ display: 'block', width: '66vw', margin: '0 auto' }}
src={require('@/assets/module.jpg')}
alt=""
/>
</div>
</div>
);
};
.ywkj,
.yyxy {
display: flex;
flex-direction: column;
align-items: center;
}
.syfw-leftcontent {
background-image: url('./img/sf.png');
width: 30vw;
min-height: 80px;
margin-right: 16px;
background-position: 0 0;
background-repeat: no-repeat;
background-size: cover;
font-family: '黑体';
padding: 1rem;
font-size: 0.6rem;
}
.syfw-rightcontent {
position: relative;
width: 30vw;
min-height: 80px;
padding: 1rem;
font-family: '黑体';
font-size: 0.6rem;
}
.syfw-rightcontent::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: -1;
background: url('./img/sf.png') no-repeat top center;
background-position: 0 0;
background-repeat: no-repeat;
background-size: cover;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
}
.yyxy {
background-color: rgba(247, 250, 252, 1);
}
.ywkj>div {
display: flex;
flex-direction: column;
}
.ywkj>div>div {
display: flex;
flex-direction: row;
margin: 8px;
}
.sjl {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.sjl > div {
height: 200px;
padding: 32px;
margin-right: 32px;
background-color: rgba(247, 250, 252, 1);
}
/* eslint-disable import/no-anonymous-default-export */
import React from 'react';
import { Row, Col, Carousel } from 'antd';
import './index.css';
const col = { xs: 24, sm: 24, md: 24, lg: 11, xl: 11, xxl: 11 },
colc = { xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 },
cols = { xs: 0, sm: 0, md: 0, lg: 2, xl: 2, xxl: 2 };
export default () => {
return (
<div id="mesContainer">
<img
src={require('@/assets/fac4.jpg')}
alt=""
style={{ width: '100%' }}
/>
<div className="content">
<h2 className="title">IOT数据采集系统</h2>
</div>
<div className="cpjs bgjs">
<h3>系统介绍</h3>
<p>
南高IOT数据采集系统通过组合各种物联网硬件,可以对设备开关、模拟量数据进行采集,通过配置传感器,还可以实现对设备温度、震动及环境湿度等多种数据进行采集;通过配套平台—南高工业互联网平台,用户既可以在工控机上实现数据监测和设备控制,也可以通过手机、平板等联网终端进行远程监控。{' '}
</p>
</div>
<div className="ywkj cpjs">
<h3>适用范围</h3>
<span
style={{ textAlign: 'center', marginBottom: 16, fontSize: '0.8rem' }}
>
南高IOT数据采集系统多种数据采集及设备控制功能适用于工业制造业的各个环节。
</span>
<div>
<div>
<div className="syfw-leftcontent">
通过直接连接设备或部署传感器,实现工业制造业检测环节的环境信息、设备信息的检测;
</div>
<div className="syfw-rightcontent">
通过直接连接或通过PLC设备,在工业制造业的控制环节中实现各种设备的操控;
</div>
</div>
<div>
<div className="syfw-leftcontent">
通过连接RFID或其他硬件,实现工业制造业中各种产品、步骤的辨识;
</div>
<div className="syfw-rightcontent">
通过监测信息的分析,实现工业制造业中的产品、设备诊断等。
</div>
</div>
</div>
</div>
<div className="cpjs bgjs">
<h3>软件平台—南高工业互联网平台</h3>
<p style={{ textAlign: 'center' }}>
南高工业互联网平台是集工业数据采集、安全接入、计算、存储、服务、开发于一体,为工业企业数字化转型、生产管控、流程优化、智能制造提供服务。我们的目标是提供成熟的公有云或私有云服务,实现物联网设备的快速接入联网,新产品的快速开发、管理和扩展。
</p>
</div>
<Row style={{ margin: '2rem 0' }}>
<Col {...colc} className="center">
<div className="cpjs bgjs">
<h3>平台数据流</h3>
<p>以数据为核心构造面向数字化工厂的物联网平台。</p>
</div>
</Col>
<Col {...colc}>
<img
style={{ width: '100%' }}
src={require('@/assets/dataliu.png')}
alt=""
/>
</Col>
</Row>
<Row style={{ margin: '2rem 0' }}>
<Col {...colc}>
<img
style={{ width: '100%' }}
src={require('@/assets/qudongdata.png')}
alt=""
/>
</Col>
<Col {...colc} className="center bgjs">
<div
style={{
width: '100%',
height: '100%',
overflow: 'hidden',
paddingTop: '2rem',
}}
>
<Carousel
autoplay
dots={{
className: 'diydotc',
}}
>
<div>
<div className="cpjs" style={{ width: '100%' }}>
<h3>打造数据驱动的智能企业</h3>
<p>
OneData:所有数据只加工一次,目标是构建统一的数据规范标准,让数据成为一种资产,而不是成本。资产和成本的差别在于资产是可以沉淀的,是可以被复用的。
</p>
</div>
</div>
<div>
<div className="cpjs" style={{ width: '100%' }}>
<h3>打造数据驱动的智能企业</h3>
<p>
OneService:数据即服务,强调数据中台中的数据通过 API
接口的方式被访问。{' '}
</p>
</div>
</div>
</Carousel>
</div>
</Col>
</Row>
</div>
);
};
/* eslint-disable import/no-anonymous-default-export */
import React from 'react';
export default () => {
return (
<div id="mesContainer">
<img
src={require('@/assets/fac1.jpg')}
alt=""
style={{ width: '100%' }}
/>
<div className="content">
<h2 className="title">MES智能制造管理系统</h2>
</div>
<div className="cpjs bgjs">
<h3>产品介绍</h3>
<p>
南高智能制造管理系统(MES)
是应用于生产制造车间的生产信息化管理系统。系统覆盖从生产订单下达到产品完成的整个生产过程,提供生产订单管理、生产计划管理、生产调度管理、线边库管理、质量管理等业务管理模块。帮助企业实时监控并分析生产制造中的生产数据,随时了解订单进度、产品质量、物料库存等生产状态信息。帮助企业缩短生产周期、减少在制品、增强订单交付能力、改善产品质量,达到降本、保质、增效的目的。
</p>
</div>
<div className="cpjs">
<h3>业务框架</h3>
<img src={require('@/assets/kjs.jpg')} alt="" />
</div>
<div className="cpjs">
<h3>应用效益</h3>
<img src={require('@/assets/xy.jpg')} alt="" />
</div>
<div className="cpjs">
<img src={require('@/assets/xy2.png')} alt="" />
</div>
</div>
);
};
* {
margin: 0;
padding: 0;
}
#mesContainer {
padding-bottom: 24px;
}
#mesContainer h3,
h4 {
padding-bottom: 24px;
text-align: center;
}
#mesContainer h2 {
padding: 16px;
text-align: center;
color: rgba(1, 92, 172, 1)
}
#mesContainer>div:nth-child(2) {
background-color: rgba(247, 250, 252, 1);
}
.ywkj,
.khjz,
.yyal,.gnmk {
display: flex;
flex-direction: column;
align-items: center;
}
.yyal {
width: 75%;
margin: auto;
}
.yingyonganli {
display: flex;
flex-direction: row;
}
.anli-text-left {
display: flex;
flex-direction: column;
align-items: flex-end;
padding: 32px;
}
.anli-text-right {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 32px;
}
.yingyonganli>div:nth-child(1) {
display: flex;
flex-direction: column;
}
.anli-content {
display: flex;
flex-direction: row;
padding-bottom: 32px;
}
.khjz>div {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.khjz img,
.khjz>div {
width:75%;
margin-right: 16px;
}
.khjz-text p:nth-child(1){
margin: 16px;
padding-left: 16px;
border-left: 4px solid rgba(51, 142, 245, 1);
}
.khjz-text p:nth-child(2){
margin: 16px;
padding-left: 16px;
border-left: 4px solid rgba(255, 195, 0, 1);
}
.khjz-text p:nth-child(3){
margin: 16px;
padding-left: 16px;
border-left: 4px solid rgba(0, 186, 173, 1);
}
.khjz-text p:nth-child(4){
margin: 16px;
padding-left: 16px;
border-left: 4px solid rgba(18, 208, 255, 1);
}
.khjz-text p:nth-child(5){
margin: 16px;
padding-left: 16px;
border-left: 4px solid rgba(7, 108, 224, 1);
}
/* eslint-disable import/no-anonymous-default-export */
import React from 'react';
import './index.css';
export default () => {
return (
<div id="mesContainer">
<div>
<h2>PDM产品数据管理</h2>
</div>
<div className="cpjs content">
<h3>系统介绍</h3>
<p>
PDM依托中国领先的产品技术及解决方案,有机的把产品生命周期相关的数据和业务整合起来,为企业提供了一整套全方位的数字化产品生命周期管理平台。通过图文档管理、物料管理、产品管理、流程管理、协同办公等系统功能,支持从概念创意、设计、工艺、样机制作、生产制造、销售、维护到报废产品全生命周期各个阶段的信息创建、协同、应用和管理。{' '}
</p>
</div>
<div className="ywkj content">
<h3>业务框架</h3>
<img src={require('./img/框架.JPG')} alt="" />
</div>
<div className="yyal content">
<h3>应用案例</h3>
<div className="yingyonganli">
<div>
<div className="anli-content">
<img src={require('./img/案例1.png')} alt="" />
<div className="anli-text-left">
<h4>家电行业</h4>
<p>
为多家彩电、冰箱、空调、洗衣机制造企业提供了设备管理系统。
</p>
</div>
</div>
<div className="anli-content">
<img src={require('./img/案例3.png')} alt="" />
<div className="anli-text-left">
<h4>食品行业</h4>
<p>为多家食品、饮料、食品耗材加工企业提供了设备管理系统。</p>
</div>
</div>
<div></div>
</div>
<div></div>
<div>
<div className="anli-content">
<div className="anli-text-right">
<h4>半导体行业</h4>
<p>为多家晶圆制造、芯片封装企业提供了设备管理系统。</p>
</div>
<img src={require('./img/案例1.png')} alt="" />
</div>
<div className="anli-content">
<div className="anli-text-right">
<h4>机械制造行业</h4>
<p>
为多家交通设备、机器人、数控机床、包装设备制造企业提供了设备管理系统。
</p>
</div>
<img src={require('./img/案例3.png')} alt="" />
</div>
<div></div>
</div>
</div>
</div>
<div className="khjz content">
<h3>应用效益</h3>
<div>
<img src={require('./img/价值.JPG')} alt="" />
<div className="khjz-text">
<p>
根据备品备件领用及使用记录信息,优化备品备件库存、降低备件库存资金积压。
</p>
<p>
通过设备维保智能分析,为企业提供管理决策依据,减少故障发生率,缩短停机时间。
</p>
<p>
以精益TPM理念为指导,实现管理决策、资产管理、设备运维、知识库等四大维度的管理。
</p>
<p>
快速定位故障设备及故障类型,缩短维修派单时间与维修工准备时间,实现维修过程透明化、数字化,提升维修管理效率,减少非计划停机时间。
</p>
<p>
通过一机一码,在PC、移动端多种应用上实现收集、记录、上报信息,自动生成各种分析报表,实现设备运维管理、人员绩效考核及产线效能分析等的无纸化办公、高效化管理。
</p>
</div>
</div>
</div>
<div className="gnmk content">
<h3>功能模块</h3>
<img src={require('./img/功能模块.jpg')} alt="" />
</div>
</div>
);
};
.yyal {
width: 88%;
margin: auto;
margin-bottom: 66px;
}
.yyal h3{
font-size: 1.2rem;
margin: 0.4rem;
margin-bottom: 1rem;
text-align: center;
color: #000000;
}
This diff is collapsed.
/* eslint-disable import/no-anonymous-default-export */
import React from 'react';
export default () => {
return (
<div id="mesContainer">
<img
src={require('@/assets/fac2.jpg')}
alt=""
style={{ width: '100%' }}
/>
<div className="content">
<h2 className="title">WMS智能仓储管理系统</h2>
</div>
<div className="cpjs bgjs">
<h3>产品介绍</h3>
<p>
南高智能仓储管理系统(WMS)是应用于仓储作业管理的仓储信息化管理系统。系统主要负责入库业务、出库业务、库存调拨、库存移库等业务,并具有充分的可扩展性,能够与现有系统的接口集成,和企业内其它系统协同运作。实时掌控仓储库存、物料批次管控、库位库容监控、精确上下架,帮助现场作业人员提高作业准确率、作业效率,降低仓库损耗。企业实现精确的数字分析、实时管理,加速资金周转,提升供应链响应速度,增强公司整体竞争能力。{' '}
</p>
</div>
<div className="cpjs">
<h3>业务框架</h3>
<img src={require('@/assets/kjc.jpg')} alt="" />
</div>
<div className="cpjs">
<h3>应用模块</h3>
<img src={require('@/assets/mds.png')} alt="" />
</div>
<div className="cpjs">
<h3>应用效益</h3>
<img src={require('@/assets/xys.jpg')} alt="" />
</div>
</div>
);
};
......@@ -93,3 +93,46 @@
}
}
}
.compare {
padding: 0 4rem;
display: flex;
flex-direction: column;
justify-content: center;
margin: 3rem 0;
h2 {
font-size: 1rem;
}
p {
font-size: 0.6rem;
}
div {
div {
background-color: rgba(242, 250, 255, 1);
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
img {
height: 66px;
}
h2 {
font-size: 0.6rem;
color: rgba(12, 100, 201, 1);
margin-top: 0.8rem;
}
p {
margin: 0.2rem 0;
span {
margin-right: 12px;
}
span + span {
margin: 0;
}
}
}
div + div {
margin-left: 1rem;
}
}
}
import React, { useState, useEffect } from 'react';
import { Row, Col, Image, Pagination, Card, Tag, Grid } from 'antd';
import styles from './index.less';
const col = { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 };
......@@ -12,43 +13,88 @@ function Together() {
style={{ width: '100%' }}
/>
<Row className="center">
<Col {...col}>
<Col
{...col}
style={{
backgroundImage: `url(${require('@/assets/lefts.jpg')})`,
height: '100%',
}}
className="img"
>
<img
style={{ width: '100%' }}
style={{ height: '100%', opacity: 0 }}
src={require('@/assets/lefts.jpg')}
alt=""
/>
</Col>
<Col {...col}>
<Col {...col} className={styles.compare}>
<h2>生态合作</h2>
<p>
根据客户需求为其提供量身定制的产品和服务,通过“政、用、产、学、研”与客户建立长期合作的战略伙伴关系。
</p>
<div>
<img src={require('@/assets/zl.png')} alt="" />
<h2>战略伙伴权益</h2>
<p>
<span>市场营销</span>
<span>技术赋能</span>
</p>
<p>
<span>政策分析</span>
<span>融合生态</span>
</p>
<div className="centerl">
<div>
<img src={require('@/assets/zl.png')} alt="" />
<h2>战略伙伴权益</h2>
<p>
<span>市场营销</span>
<span>技术赋能</span>
</p>
<p>
<span>政策分析</span>
<span>融合生态</span>
</p>
</div>
<div>
<img src={require('@/assets/zl2.png')} alt="" />
<h2>战略合作类型</h2>
<p>
<span>系统集成类</span>
<span>技术攻关类</span>
</p>
<p>
<span>联合申报类</span>
<span>人才培养类</span>
</p>
</div>
</div>
<div>
<img src={require('@/assets/zl2.png')} alt="" />
<h2>战略合作类型</h2>
<p>
<span>系统集成类</span>
<span>技术攻关类</span>
</p>
<p>
<span>联合申报类</span>
<span>人才培养类</span>
</p>
</Col>
</Row>
<Row className="center">
<Col {...col} className={styles.compare}>
<h2>行业组织</h2>
<p>
作为“江苏省智能装备产业联盟”和“南京市智能制造装备产业促进会”的秘书长单位,南高智能一直积极地推动并联合与产业相关的政府部门、科研院所、优秀企业代表等,致力于建立真正全连接的产业生态,将拥有智能制造共同理念的参与者联合起来,成为未来整个智能制造产业生态建设的驱动者和践行者。
</p>
<div className="centerl">
<Card hoverable>
<img src={require(`@/assets/icon1.png`)} alt="" />
<span style={{ fontSize: '0.6rem', marginTop: 12 }}>
江苏省智能装备产业联盟
</span>
</Card>
<Card hoverable>
<img src={require(`@/assets/icon2.png`)} alt="" />
<span style={{ fontSize: '0.6rem', marginTop: 12 }}>
南京市智能制造装备产业促进会
</span>
</Card>
</div>
</Col>
<Col
{...col}
style={{
backgroundImage: `url(${require('@/assets/org.jpg')})`,
height: '100%',
}}
className="img"
>
<img
style={{ height: '100%', opacity: 0 }}
src={require('@/assets/lefts.jpg')}
alt=""
/>
</Col>
</Row>
</div>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment