Commit 9ea567e7 authored by wuhao's avatar wuhao 🎯

asder

parent ca97005b
......@@ -19,7 +19,14 @@ export default defineConfig({
{
path: '/',
component: '@/layouts/index',
routes,
routes: [
...routes,
{
path: '/download',
name: '下载中心',
component: '@/pages/download',
},
],
},
],
fastRefresh: {},
......
......@@ -94,7 +94,7 @@ export default [
{
path: '/factory/typea/pdm',
name: 'PDM产品数据管理系统',
component: '@/pages/index',
component: '@/pages/factory/pdm',
},
],
},
......@@ -106,7 +106,7 @@ export default [
{
path: '/factory/typeb/datagate',
name: '智能网关',
component: '@/pages/index',
component: '@/pages/factory/datagate',
},
],
},
......@@ -115,7 +115,7 @@ export default [
{
path: '/internet',
name: '工业互联网平台',
component: '@/pages/index',
component: '@/pages/internet',
},
{
path: '/cgx',
......
......@@ -4,17 +4,27 @@ body,
width: 100%;
height: 100%;
}
.ant-menu-item-group-list {
.ant-menu-item {
padding: 0.4rem !important;
height: auto !important;
}
}
.ant-menu-item-group-title {
color: rgba(0, 0, 0, 1) !important;
position: relative;
font-weight: bold !important;
padding: 0.4rem !important;
font-size: 16px !important;
text-indent: 6px !important;
&::before {
content: '';
background-color: rgba(31, 108, 232, 0.8);
position: absolute;
left: 8px;
top: 12px;
top: 16px;
width: 2px;
height: 14px;
border-radius: 4px;
......@@ -30,6 +40,12 @@ body,
display: flex;
align-items: center;
}
.centerv {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
}
.center {
display: flex;
justify-content: center;
......@@ -283,6 +299,9 @@ body,
.section {
padding: 2rem;
position: relative;
.ant-tabs-tab-btn {
font-size: 0.8rem;
}
.tabs {
text-align: center;
font-size: 0.6rem;
......@@ -700,3 +719,200 @@ body,
}
}
}
.itemqs {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
overflow: hidden;
img {
display: block;
width: 75% !important;
min-width: auto !important;
margin: 1rem;
}
h2 {
font-size: 0.8rem !important;
margin: 0.2rem 0 0.8rem 0 !important;
padding: 0 !important;
}
p {
font-size: 0.6rem;
}
}
.newspaper {
overflow: hidden;
}
@media (min-width: 400px) {
.newspaper {
column-count: 1; // two columns on larger phones
column-gap: 32px;
}
}
@media (min-width: 768px) {
.newspaper {
column-count: 2; // two columns on larger phones
column-gap: 32px;
}
}
@media (min-width: 992px) {
.newspaper {
column-count: 3; // three columns on...you get it
column-gap: 32px;
}
}
@media (min-width: 1200px) {
.newspaper {
column-count: 3; // three columns on...you get it
column-gap: 32px;
}
}
@media (min-width: 1660px) {
.newspaper {
column-count: 3; // three columns on...you get it
column-gap: 32px;
}
}
.newspaper {
padding: 2rem;
> div {
break-inside: avoid !important;
margin-bottom: 2rem;
h2 {
color: #333333 !important;
text-align: left !important;
padding: 0 0 1rem 0 !important;
margin: 0 !important;
font-size: 0.8rem !important;
}
p {
font-size: 0.6rem !important;
}
}
}
.newspapers {
padding: 2rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
> div {
break-inside: avoid !important;
margin-bottom: 1rem;
h2 {
color: #333333 !important;
text-align: left !important;
padding: 0 0 0.4rem 0 !important;
margin: 0 !important;
font-size: 0.8rem !important;
}
p {
font-size: 0.6rem !important;
}
}
}
.animate {
display: block;
width: 1rem;
height: 1rem;
position: relative;
overflow: visible;
margin-right: 0.6rem;
&::before {
content: '';
position: absolute;
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
z-index: 999;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 0 4px rgba(20, 119, 246, 0.8);
}
&::after {
content: '';
position: absolute;
width: 1rem;
height: 1rem;
background-color: rgba(20, 119, 246, 0.4);
border-radius: 50%;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transform-origin: center center;
animation: lager 1s ease-in-out 0s infinite forwards;
}
}
@keyframes lager {
from {
transform: scale(1);
background-color: rgba(20, 119, 246, 0.4);
}
to {
transform: scale(1.4);
background-color: rgba(20, 119, 246, 0);
}
}
.fot {
h4 {
font-size: 0.8rem;
text-align: center;
width: 100%;
padding: 0.2rem;
}
p {
font-size: 0.6rem;
width: 100%;
padding: 0 0.8rem;
}
span {
display: block;
margin-bottom: 0.4rem;
position: relative;
color: #000000;
padding-bottom: 0.4rem;
&::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
bottom: 0px;
left: 0px;
height: 2px;
background-image: linear-gradient(
145deg,
#ffffff 0%,
#edf5ff 25%,
#edf5ff 50%,
#edf5ff 75%,
#ffffff 100%
);
background-size: 400% 400%;
animation: bgmove 4s linear 0s infinite alternate forwards;
}
}
}
.diyinput {
input {
background-color: rgba(255, 255, 255, 0.5) !important;
}
}
import React, { useState, useEffect } from 'react';
import { Input, Space, Tabs } from 'antd';
const { Search } = Input;
function Download() {
const onSearch = (value) => {
console.log(value);
};
const items = [
{ label: '宣传画册及其他', key: '1', children: 'Content 1' }, // remember to pass the key prop
{ label: '硬件产品资料', key: '2', children: 'Content 2' },
{ label: '软件产品资料', key: '3', children: 'Content 2' },
];
return (
<div id="mesContainer">
<div style={{ position: 'relative' }}>
<img
src={require('@/assets/fac9.jpg')}
alt=""
style={{ width: '100%' }}
/>
<div
className="diyinput"
style={{
position: 'absolute',
left: 0,
right: 0,
top: 0,
bottom: 0,
margin: 'auto',
width: '20vw',
height: 42,
minWidth: 320,
}}
>
<Search
placeholder="输入关键词搜索"
onSearch={onSearch}
enterButton
size="large"
style={{ borderRadius: 6, overflow: 'hidden' }}
/>
</div>
</div>
<div className="section">
<Tabs items={items} />
</div>
</div>
);
}
export default Download;
/* eslint-disable import/no-anonymous-default-export */
import React from 'react';
import { Row, Col, Carousel, Grid, Card } from 'antd';
const colc = { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 },
col = { xs: 24, sm: 24, md: 10, lg: 10, xl: 10, xxl: 10 },
cold = { xs: 24, sm: 24, md: 12, lg: 8, xl: 8, xxl: 8 },
colds = { xs: 24, sm: 24, md: 12, lg: 8, xl: 8, xxl: 8 },
cols = { xs: 24, sm: 24, md: 14, lg: 14, xl: 14, xxl: 14 };
export default () => {
return (
<div id="mesContainer">
<img
src={require('@/assets/fac7.jpg')}
alt=""
style={{ width: '100%' }}
/>
<div>
<h2 className="title">智能网关</h2>
</div>
<div className="cpjs bgjs">
<h3>产品介绍</h3>
<p>
南高智能系列网关产品可应用于成型、金切、特种数控机床和自动化设备,支持多传感器接入,安全、稳定,助力企业工业互联网升级。南高智能网关是一款具备挖掘工业设备数据并接入到自主开发的云平台的智能嵌入式网络设备。它具备数据采集、协议解析、边缘计算,支持以太网,移动2G/3G/4G/5G数据传输,可满足绝大部分工业应用场景及工业设备接入。
</p>
</div>
<div
className="cpjs"
style={{ backgroundColor: 'rgba(250, 249, 250, 1)' }}
>
<h3 className="center">
<i className="animate" /> Z系列
</h3>
<Row gutter={66} style={{ marginTop: '2rem' }}>
<Col {...cols}>
<Row
style={{
width: '100%',
borderRadius: '1rem',
backgroundColor: '#FFFFFF',
}}
>
<Col {...col} className="centerv">
<img
style={{ width: '100%', margin: 0 }}
src={require('@/assets/Z.png')}
alt=""
/>
</Col>
<Col {...cols} className="cpjs centerv">
<h3
style={{
fontSize: '0.8rem',
textAlign: 'left',
marginLeft: 0,
}}
>
对接能力
</h3>
<p style={{ fontSize: '0.6rem' }}>
支持西门子(含有OPCUA配件)/FANUC
全系列/DELEM65等系列(含有OPCUA配件)等CNC的采集。
<br />
支持三菱、西门子、施耐德、汇川、欧姆龙、产电、基恩士、松下、罗克韦尔、倍福、通用电气、安川、富士、信捷、横河、台达等网口PLC的采集。
<br />
支持定制开发TCP相关协议、支持4G传输,WIFI传输,以太传输、持内置OPCUA服务器功能、支持接入第三方IOT平台(限MQTT通道、TCP通道)、支持python脚本的边缘计算、支持看门狗程序、支持重连机制、支持断点续传功能。
</p>
</Col>
</Row>
</Col>
<Col {...col}>
<div
className="centerv"
style={{
borderRadius: '1rem',
backgroundColor: '#FFFFFF',
width: '100%',
height: '100%',
}}
>
<p style={{ fontSize: '0.6rem', padding: '0 2rem' }}>
<b
style={{
fontSize: '0.8rem',
display: 'block',
marginBottom: '1rem',
}}
>
硬件参数
</b>
<b>接入方式 :</b>以太网,移动2G/3G/4G/5G <br />
<b>CPU :</b>1GHz,ARM Cortex-A7 <br />
<b>存储器 :</b>8GB eMMC,512MB DDR3
<br />
<b>USB端口 :</b>1个USB host2.0接口
<br />
<b>传感器接口 :</b>1个DB15接口,可接南高传感器配件
<br />
<b>以太网:</b> 2路10M/100M自适应端口
<br />
<b>适用范围 :</b>满足数控机床和自动化设备的互联互通需求
<br />
</p>
</div>
</Col>
</Row>
</div>
<div
className="cpjs"
style={{ backgroundColor: 'rgba(250, 249, 250, 1)' }}
>
<h3 className="center">
<i className="animate" /> S系列
</h3>
<Row gutter={66} style={{ marginTop: '2rem' }}>
<Col {...colc}>
<Row
style={{
width: '100%',
borderRadius: '1rem',
backgroundColor: '#FFFFFF',
}}
>
<Col {...col} className="centerv">
<img
style={{ width: '100%', margin: 0 }}
src={require('@/assets/S.png')}
alt=""
/>
</Col>
<Col {...cols} className="cpjs centerv">
<h3
style={{
fontSize: '0.8rem',
textAlign: 'left',
marginLeft: 0,
}}
>
对接能力
</h3>
<p style={{ fontSize: '0.6rem' }}>
包含Z系列基础版本的所有功能,还支持6组0-10V电压型输入传感器的采集。
</p>
</Col>
</Row>
</Col>
<Col {...colc}>
<div
className="centerv"
style={{
borderRadius: '1rem',
backgroundColor: '#FFFFFF',
width: '100%',
height: '100%',
}}
>
<p style={{ fontSize: '0.6rem', padding: '0 2rem' }}>
<b
style={{
fontSize: '0.8rem',
display: 'block',
marginBottom: '1rem',
}}
>
硬件参数
</b>
<b>接入方式 :</b>以太网,移动2G/3G/4G/5G <br />
<b>CPU :</b>1GHz,ARM Cortex-A7 <br />
<b>存储器 :</b>8GB eMMC,512MB DDR3
<br />
<b>USB端口 :</b>1个USB host2.0接口
<br />
<b>传感器接口 :</b>6组端子、电压型(0-10V)
<br />
<b>以太网:</b> 2路10M/100M自适应端口
<br />
<b>适用范围 :</b>
满足连接数控机床、自动化设备,和外接传感器的需求
<br />
</p>
</div>
</Col>
</Row>
</div>
<div
className="cpjs"
style={{ backgroundColor: 'rgba(250, 249, 250, 1)' }}
>
<h3 className="center">
<i className="animate" /> C系列
</h3>
<Row gutter={66} style={{ marginTop: '2rem' }}>
<Col {...colc}>
<Row
style={{
width: '100%',
borderRadius: '1rem',
backgroundColor: '#FFFFFF',
}}
>
<Col {...col} className="centerv">
<img
style={{ width: '100%', margin: 0 }}
src={require('@/assets/C.png')}
alt=""
/>
</Col>
<Col {...cols} className="cpjs centerv">
<h3
style={{
fontSize: '0.8rem',
textAlign: 'left',
marginLeft: 0,
}}
>
对接能力
</h3>
<p style={{ fontSize: '0.6rem' }}>
包含Z系列基础版本的所有功能,以外还支持施耐德、汇川、产电、
松下、安川、山武、富士、信捷、台达等串口PLC的采集。
</p>
</Col>
</Row>
</Col>
<Col {...colc}>
<div
className="centerv"
style={{
borderRadius: '1rem',
backgroundColor: '#FFFFFF',
width: '100%',
height: '100%',
}}
>
<p style={{ fontSize: '0.6rem', padding: '0 2rem' }}>
<b
style={{
fontSize: '0.8rem',
display: 'block',
marginBottom: '1rem',
}}
>
硬件参数
</b>
<b>接入方式 :</b>以太网,移动2G/3G/4G/5G <br />
<b>CPU :</b>1GHz,ARM Cortex-A7 <br />
<b>存储器 :</b>8GB eMMC,512MB DDR3
<br />
<b>USB端口 :</b>1个USB host2.0接口
<br />
<b>串口接口 :</b> 1路 RS485 1路RS232
<br />
<b>以太网:</b> 2路10M/100M自适应端口
<br />
<b>适用范围 :</b>满足连接网口以及串口数控机床、自动化设备
<br />
</p>
</div>
</Col>
</Row>
</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);
}
This diff is collapsed.
......@@ -5,7 +5,7 @@ import './index.css';
const colc = { xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 },
col = { xs: 24, sm: 24, md: 24, lg: 8, xl: 7, xxl: 6 },
cold = { xs: 24, sm: 24, md: 12, lg: 8, xl: 8, xxl: 6 },
cold = { xs: 24, sm: 24, md: 12, lg: 8, xl: 8, xxl: 8 },
cols = { xs: 24, sm: 24, md: 24, lg: 16, xl: 17, xxl: 18 };
function spArr(arr, num) {
......
This diff is collapsed.
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