zxcdf

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@ant-design/pro-layout": "^6.5.0",
     "ahooks": "^3.7.2",
+    "color-thief-react": "^2.1.0",
     "express": "^4.18.2",
     "express-http-proxy": "^1.6.3",
     "react": "17.x",

src/global.less

@@ -31,7 +31,11 @@ body,
   justify-content: center;
   align-items: center;
 }
-
+.spread {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 .bglight {
   background-image: linear-gradient(
     145deg,
@@ -44,16 +48,312 @@ body,
   background-size: 400% 400%;
   background-position: 0% 64%;
 }
+.bglights {
+  background-image: linear-gradient(
+    145deg,
+    #ffffff 0%,
+    #edf5ff 25%,
+    #edf5ff 50%,
+    #edf5ff 75%,
+    #ffffff 100%
+  );
+  background-size: 400% 400%;
+  animation: bgmove 20s linear 0s infinite alternate forwards;
+}
+
 @keyframes bgmove {
   0% {
     background-position: 0% 50%;
   }
 
   50% {
-    background-position: 200% 100%;
+    background-position: 100% 100%;
   }
 
   100% {
     background-position: 0% 50%;
   }
 }
+
+* {
+  margin: 0;
+  padding: 0;
+}
+#webFooter {
+  width: 100%;
+  /* height: 400px; */
+  background-color: black;
+}
+#webFooter > div:first-child {
+  height: calc(100% - 40px);
+  padding: 50px 50px 80px 80px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+.footer-copyright {
+  color: rgba(194, 194, 194, 1);
+  border-top: 1px solid rgba(194, 194, 194, 1);
+  font-size: 14px;
+  font-family: 'HarmonyOS Sans SC';
+  text-align: center;
+  padding: 16px 0;
+}
+.footer-content h3 {
+  margin-bottom: 24px;
+  color: rgba(255, 255, 255, 1);
+  font-family: '黑体';
+}
+
+.footer-content a {
+  text-decoration: none;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 1);
+}
+.footer-content a:hover {
+  color: rgb(97, 147, 255);
+}
+
+.footer-content li {
+  list-style-type: none;
+  margin-bottom: 16px;
+}
+.footer-content button {
+  width: 120px;
+  height: 36px;
+  margin-bottom: 24px;
+  color: rgba(255, 255, 255, 1);
+  background-color: black;
+  border: 0.5px solid rgba(194, 194, 194, 1);
+  border-radius: 4px;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  -ms-border-radius: 4px;
+  -o-border-radius: 4px;
+  cursor: pointer;
+}
+.footer-content button:hover {
+  color: rgb(97, 147, 255);
+  border-color: rgb(154, 186, 255);
+}
+.contact {
+  color: rgba(255, 255, 255, 1);
+}
+.contact li {
+  list-style-type: none;
+  margin-bottom: 16px;
+}
+.contact > div {
+  width: 100%;
+  height: 100px;
+  margin-top: 32px;
+  display: flex;
+  justify-content: space-between;
+}
+.contact span {
+  position: absolute;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 1);
+  bottom: -25px;
+  left: 20%;
+}
+.nangao {
+  position: relative;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: cover;
+  width: 100px;
+  height: 100%;
+}
+.lianmeng {
+  position: relative;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: cover;
+  width: 100px;
+  height: 100%;
+  margin-left: 16px;
+  margin-right: 16px;
+}
+.cujinhui {
+  position: relative;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  background-size: cover;
+  width: 100px;
+  height: 100%;
+}
+
+@media (min-width: 1024px) {
+  html {
+    font-size: 18px;
+  }
+}
+@media (min-width: 1100px) {
+  html {
+    font-size: 20px;
+  }
+}
+@media (min-width: 1280px) {
+  html {
+    font-size: 22px;
+  }
+}
+@media (min-width: 1366px) {
+  html {
+    font-size: 24px;
+  }
+}
+@media (min-width: 1680px) {
+  html {
+    font-size: 26px;
+  }
+}
+@media (min-width: 1920px) {
+  html {
+    font-size: 30px;
+  }
+}
+.ant-menu-title-content {
+  font-size: 16px !important;
+}
+.section {
+  padding: 24px;
+  position: relative;
+  .tabs {
+    text-align: center;
+    font-size: 0.6rem;
+  }
+  .iconleft {
+    cursor: pointer;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    height: 2.5vw;
+    width: 10vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img {
+      height: 100%;
+      min-height: 30px;
+    }
+  }
+  .iconright {
+    cursor: pointer;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    height: 2.5vw;
+    width: 10vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    img {
+      height: 100%;
+      min-height: 30px;
+    }
+  }
+}
+
+.slider {
+  width: 80vw;
+  margin: 34px auto;
+}
+
+.title {
+  text-align: center;
+  font-size: 1.5rem;
+}
+.proditem {
+  flex: 1;
+  margin: 0 12px;
+  position: relative;
+  img {
+    width: 100%;
+  }
+  .placecontainer {
+    padding: 16px;
+    height: 5vw;
+    min-height: 120px;
+    background-color: #ffffff;
+  }
+  .textcontainer {
+    background-color: #ffffff;
+    padding: 16px 16px 0 16px;
+    position: absolute;
+    bottom: 0px;
+    transition: all 0.4s;
+    h2 {
+      font-size: 0.8rem;
+      color: #000000;
+      transition: all 0.4s;
+    }
+    p {
+      font-size: 0.6rem;
+      color: #333333;
+      transition: all 0.4s;
+      margin: 0;
+    }
+    .btn {
+      zoom: 0;
+      transform: translateY(100px);
+      transition: all 0.6s;
+    }
+  }
+  &:hover {
+    .textcontainer {
+      background-color: @primary-color;
+      padding: 16px;
+      position: absolute;
+      bottom: 0px;
+      h2 {
+        font-size: 0.8rem;
+        color: #ffffff;
+      }
+      p {
+        font-size: 0.6rem;
+        color: #f0f0f0;
+        margin-bottom: 8px;
+      }
+      .btn {
+        zoom: 1;
+        height: 32px;
+        transform: translateY(0px);
+      }
+    }
+  }
+}
+.twoline {
+  text-overflow: -o-ellipsis-lastline;
+  overflow: hidden; //溢出内容隐藏
+  text-overflow: ellipsis; //文本溢出部分用省略号表示
+  display: -webkit-box; //特别显示模式
+  -webkit-line-clamp: 2; //行数
+  line-clamp: 2;
+  -webkit-box-orient: vertical; //盒子中内容竖直排列
+}
+.diydots {
+  bottom: -44px !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: @primary-color !important;
+      height: 6px !important;
+      width: 46px !important;
+      border-radius: 8px !important;
+    }
+  }
+}

src/layouts/footer.jsx

+import React, { useState } from 'react';
+
+const ContentList = (props) => {
+  const { title, listData } = props;
+  return (
+    <div className="footer-content">
+      <h3>{title}</h3>
+      <div>
+        {listData.map((item, index) => (
+          <li>
+            <a href={item.link}>{item.text}</a>
+          </li>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default () => {
+  const list1 = [
+    {
+      link: '#',
+      text: '走进南高',
+    },
+    {
+      link: '#',
+      text: '南高荣誉',
+    },
+    {
+      link: '#',
+      text: '南高资讯',
+    },
+    {
+      link: '#',
+      text: '加入南高',
+    },
+  ];
+
+  const list2 = [
+    {
+      link: '#',
+      text: 'MES智能制造管理系统',
+    },
+    {
+      link: '#',
+      text: 'WMS智能仓储管理系统',
+    },
+    {
+      link: '#',
+      text: 'EMS设备运维管理系统',
+    },
+    {
+      link: '#',
+      text: 'IOT数据采集系统',
+    },
+    {
+      link: '#',
+      text: 'PLM产品生命周期管理系统',
+    },
+    {
+      link: '#',
+      text: 'PDM产品数据管理系统',
+    },
+    {
+      link: '#',
+      text: '智能网关',
+    },
+  ];
+
+  const list3 = [
+    {
+      link: '#',
+      text: '硬件产品资料',
+    },
+    {
+      link: '#',
+      text: '软件产品资料',
+    },
+    {
+      link: '#',
+      text: '宣传画册及其他',
+    },
+  ];
+  return (
+    <div id="webFooter">
+      <div>
+        <ContentList title="关于南高" listData={list1} />
+        <ContentList title="智能工厂解决方案" listData={list2} />
+        <ContentList title="下载中心" listData={list3} />
+        <div className="footer-content">
+          <button>联系我们</button>
+          <div className="contact">
+            <li>电话&nbsp;&nbsp;&nbsp;&nbsp;025-86111901</li>
+            <li>邮箱&nbsp;&nbsp;&nbsp;&nbsp;center@jsnangao.com</li>
+            <li>地址&nbsp;&nbsp;&nbsp;&nbsp;南京市江宁开发区东南大学路33号</li>
+            <div>
+              <div
+                className="nangao"
+                style={{
+                  backgroundImage: `url(${require('@/assets/code1.jpg')})`,
+                }}
+              >
+                <span>南高公众号</span>
+              </div>
+              <div
+                className="lianmeng"
+                style={{
+                  backgroundImage: `url(${require('@/assets/code2.jpg')})`,
+                }}
+              >
+                <span>联盟公众号</span>
+              </div>
+              <div
+                className="cujinhui"
+                style={{
+                  backgroundImage: `url(${require('@/assets/code3.jpg')})`,
+                }}
+              >
+                <span>促进会公众号</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="footer-copyright">
+        Copyright © 2017
+        江苏南高智能装备创新中心有限公司&nbsp;&nbsp;&nbsp;版权所有&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;备案号:
+        苏ICP备18015471号
+      </div>
+    </div>
+  );
+};

src/layouts/index.jsx

@@ -4,7 +4,7 @@ import { Menu, Grid, Drawer, Tooltip } from 'antd';
 import { history } from 'umi';
 import routes from '../../routes';
 import { MenuOutlined, PlayCircleFilled } from '@ant-design/icons';
-
+import Footer from './footer';
 const { useBreakpoint } = Grid;
 const mapTree = (org) => {
   const haveChildren = Array.isArray(org.routes) && org.routes.length > 0;
@@ -118,7 +118,7 @@ function Layout({ children, location }) {
         </div>
       </header>
       <div className="content">{children}</div>
-      <footer></footer>
+      <Footer></Footer>
     </div>
   );
 }

src/pages/index.jsx

 import styles from './index.less';
 import { useModel } from 'umi';
-import React, { useState, useEffect } from 'react';
-import { Carousel } from 'antd';
+import React, { useState, useEffect, useRef } from 'react';
+import { Carousel, Button } from 'antd';
 import { useWindowSize } from '@/utils/windowsize';
 import { doFetch } from '@/utils/doFetch';
 import { useRequest } from 'ahooks';
+import { Palette } from 'color-thief-react';
+import { CaretRightOutlined } from '@ant-design/icons';
+
 // match： 与客户端页面 props 中的 match 保持一致，有当前路由的相关数据。
 // isServer：是否为服务端在执行该方法。
 // route：当前路由对象
 // history：history 对象
 
+function spArr(arr, num) {
+  let newArr = [];
+  for (let i = 0; i < arr.length; ) {
+    newArr.push(arr.slice(i, (i += num)));
+  }
+  return newArr;
+}
+
+const transitiongroup = (ifs) => {
+  return {
+    0: {
+      transform: ifs ? 'scale(1)' : 'scale(0.5)',
+      opacity: ifs ? 1 : 0.1,
+    },
+    1: {
+      transform: ifs ? 'translateX(0)' : 'translateX(-100px)',
+      opacity: ifs ? 1 : 0.1,
+    },
+  };
+};
+
+const production = {
+  r: [
+    {
+      title: 'MES智能制造管理系统',
+      desc: '南高智能制造管理系统(MES) 是应用于生产制造车间的生产信息化管理系统。',
+      detail: '',
+    },
+    {
+      title: 'WMS智能仓储管理系统',
+      desc: '南高智能仓储管理系统(WMS)是应用于仓储作业管理的仓储信息化管理系统。',
+      detail: '',
+    },
+    {
+      title: 'EMS设备运维管理系统',
+      desc: '设备管理系统提供公有云、私有云两种部署方式，可为企业提供定制化开发服务，投入少、见效快。 ',
+      detail: '',
+    },
+    {
+      title: 'IOT数据采集系统',
+      desc: '组合各种物联网硬件采集多种数据，通过南高工业互联网平台,可上实现数据监测和设备控制。',
+      detail: '',
+    },
+    {
+      title: 'PLM产品生命周期管理系统',
+      desc: '依托领先产品技术及解决方案，为企业提供了一整套全方位的数字化产品生命周期管理平台。',
+      detail: '',
+    },
+    {
+      title: 'PDM产品数据管理系统',
+      desc: '南高智能仓储管理系统(WMS)是应用于仓储作业管理的仓储信息化管理系统。',
+      detail: '',
+    },
+  ],
+  l: [
+    {
+      title: 'Z系列智能网关',
+      desc: '支持西门子（含有OPCUA配件) /FANUC全系列/DELEM65等系列(含有OPCUA配件）等CNC的采集。',
+      detail: '',
+    },
+    {
+      title: 'S系列智能网关',
+      desc: '包含Z系列基础版本的所有功能，还支持6组0-10v电压型输入传感器的采集。',
+      detail: '',
+    },
+    {
+      title: 'C系列智能网关',
+      desc: '包含Z系列基础版本的所有功能，以外还支持施耐德、汇川、产电、松下、安川等串口PLC的采集。',
+      detail: '',
+    },
+  ],
+};
+
 function IndexPage({ route }) {
   //   const { initialState, loading, error, refresh, setInitialState } =
   //   useModel('@@initialState');
 
+  const cauref = useRef();
   const { width, height } = useWindowSize(); //设备宽高
+  const [currindex, setcurrindex] = useState(0);
+  const [type, settype] = useState('r');
   const { data } = useRequest(async () => {
     let res = await doFetch({ url: '/indexPic/list' });
     return res?.data?.dataList ?? [];
   });
-  console.log(data);
-  useEffect(() => {}, []);
 
+  //autoplay
   return (
     <div>
-      <Carousel autoplay>
+      <Carousel
+        afterChange={(cur) => {
+          setcurrindex(cur);
+        }}
+      >
         {data?.map((it, i) => {
           return (
-            <div key={it.id}>
-              <div
-                className={styles.banner}
-                style={{
-                  width,
-                  height: (980 / 1920) * width,
-                  backgroundImage: `url(${it.picUrl})`,
-                }}
+            <div
+              key={it.picLinkUrl}
+              style={{ cursor: it?.picLinkUrl ? 'pointer' : 'default' }}
+              onClick={() => {
+                it?.picLinkUrl && window.open(it.picLinkUrl);
+              }}
+            >
+              <Palette
+                src={it.picUrl}
+                colorCount={6}
+                crossOrigin="anonymous"
+                format="rgbArray"
               >
-                1
-              </div>
+                {({ data, loading, error }) => {
+                  const arr = data ? data[0] : [255, 255, 255];
+                  const color = `rgba(${
+                    255 - arr[0] > 55 ? 255 : 255 - arr[0]
+                  },${255 - arr[1] > 55 ? 255 : 255 - arr[1]}, ${
+                    255 - arr[2] > 35 ? 255 : 255 - arr[2]
+                  }, 1)`;
+                  const shadowcolor = `rgba(${arr[0]},${arr[1]}, ${arr[2]}, 1)`;
+                  const curtransition = transitiongroup(currindex == i)[i];
+                  return (
+                    <div
+                      className={styles.banner}
+                      key={Math.random()}
+                      style={{
+                        width,
+                        height: (980 / 1920) * width,
+                        backgroundImage: `url(${it.picUrl})`,
+                      }}
+                    >
+                      <div className={styles.textcontent}>
+                        <h2
+                          style={{
+                            color: color,
+                            textShadow: `0 0 4px ${shadowcolor}`,
+                            fontSize: '3.5vw',
+                            '--color': color,
+                            '--shadowcolor': shadowcolor,
+                            transition: 'all 1s',
+                            ...curtransition,
+                          }}
+                        >
+                          {it.title}
+                        </h2>
+                        <p
+                          style={{
+                            color: color,
+                            fontSize: '1.5vw',
+                            transition: 'all 1.4s',
+                            ...curtransition,
+                          }}
+                        >
+                          {it.subTitle}
+                        </p>
+                        {it.enableBtn == 1 && (
+                          <Button
+                            ghost
+                            size={
+                              width < 780
+                                ? 'small'
+                                  ? width < 1366
+                                  : 'middle'
+                                : 'large'
+                            }
+                            style={{
+                              ...curtransition,
+                              transition: 'all 1.45s',
+                              color,
+                              borderColor: color,
+                            }}
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              window.open(it.btnLinkUrl);
+                            }}
+                          >
+                            {it.enableBtnName}
+                            <CaretRightOutlined />
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                  );
+                }}
+              </Palette>
             </div>
           );
         })}
       </Carousel>
+      <div className="section bglights">
+        <h2 className="title">核心产品</h2>
+        <p className="tabs">
+          <span
+            style={{
+              cursor: 'pointer',
+              color: type == 'r' ? '#1890ff' : '#000000',
+            }}
+            onClick={() => settype('r')}
+          >
+            工业软件
+          </span>
+          <span style={{ padding: '0 12px' }}>/</span>
+          <span
+            style={{
+              cursor: 'pointer',
+              color: type == 'l' ? '#1890ff' : '#000000',
+            }}
+            onClick={() => settype('l')}
+          >
+            智能硬件
+          </span>
+        </p>
+        {type == 'r' && (
+          <>
+            <div className="iconleft">
+              <img
+                src={require('@/assets/icon/left.png')}
+                alt=""
+                onClick={() => {
+                  cauref?.current?.prev();
+                }}
+              />
+            </div>
+            <div className="iconright">
+              <img
+                src={require('@/assets/icon/right.png')}
+                alt=""
+                onClick={() => {
+                  cauref?.current?.next();
+                }}
+              />
+            </div>
+          </>
+        )}
+
+        <div className="slider">
+          <Carousel
+            ref={cauref}
+            dots={{
+              className: 'diydots',
+            }}
+          >
+            {spArr(
+              production[type].map((it, i) => {
+                it.picUrl =
+                  type == 'r'
+                    ? require(`@/assets/pic${i + 1}.jpg`)
+                    : require(`@/assets/l${i + 1}.jpg`);
+                return it;
+              }),
+              width < 500 ? 1 : width < 798 ? 2 : 3,
+            ).map((it, i) => {
+              return (
+                <div key={it.picurl}>
+                  <div className="spread">
+                    {it.map((item, index) => {
+                      return (
+                        <div className="proditem" key={item.picUrl}>
+                          <img src={item.picUrl} alt="" />
+                          <div className="placecontainer"></div>
+                          <div className="textcontainer">
+                            <h2>{item.title}</h2>
+                            <p className="twoline">{item.desc}</p>
+                            <Button className="btn">查看详情</Button>
+                          </div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              );
+            })}
+          </Carousel>
+        </div>
+      </div>
+      <div
+        className="section"
+        style={{
+          background: `url(${require('@/assets/notice.jpg')}) no-repeat center`,
+          padding: '8vw',
+          backgroundSize: 'cover',
+        }}
+      >
+        <div style={{ backgroundColor: 'rgba(0,0,0,0.7)', padding: 36 }}>
+          <h2
+            className="title"
+            style={{ color: '#FFFFFF', marginBottom: '2rem' }}
+          >
+            公司简介
+          </h2>
+          <p
+            style={{
+              width: '66vw',
+              display: 'block',
+              margin: '0 auto',
+              color: '#ffffff',
+              fontSize: '0.6rem',
+              textAlign: 'center',
+              marginBottom: '2rem',
+            }}
+          >
+            江苏南高智能装备创新中心有限公司是由东南大学牵头，联合地方政府和省内高档数控机床及成套装备行业的数家龙头企业共同创立的专注于数控机床及成套装备领域的高新技术企业。汇集信息技术人才，结合数字孪生、机器视觉、AI、5G等新兴技术，帮助制造业企业打造数字化智慧工厂。
+          </p>
+          <Button
+            ghost
+            style={{ margin: '0 auto', display: 'block' }}
+            size="large"
+          >
+            查看详情
+          </Button>
+        </div>
+      </div>
+
+      <div
+        className="section"
+        style={{
+          padding: '24px',
+        }}
+      >
+        <h2 className="title">南高优势</h2>
+        <p
+          className="tabs"
+          style={{ display: 'block', width: '66vw', margin: '0 auto' }}
+        >
+          江苏南高自主申请知识产权逾100项，其中发明专利65个。技术研究团队人数占员工总数87%。公司建立了数据融合与质量科学、AI与智能装备创意设计机床结构动态优化创新设计及数字化、智能化设计与制造等共性技术研发平台.
+        </p>
+      </div>
     </div>
   );
 }

src/pages/index.less

 .banner {
   background: #364d79;
-  background-size: cover;
+  background-size: 100%;
   background-position: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  animation: lhl 5s ease-in-out infinite alternate;
+  .textcontent {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    h2 {
+      position: relative;
+      &::before {
+        content: '';
+        width: 2vw;
+        height: 2vw;
+        position: absolute;
+        top: -1vw;
+        left: -2vw;
+        border: 0.5vw solid var(--color);
+        box-shadow: -1px -1px 3px var(--shadowcolor);
+        border-right: none;
+        border-bottom: none;
+      }
+      &::after {
+        content: '';
+        width: 2vw;
+        height: 2vw;
+        position: absolute;
+        bottom: -1vw;
+        right: -2vw;
+        border: 0.5vw solid var(--color);
+        box-shadow: 1px 1px 3px var(--shadowcolor);
+        border-left: none;
+        border-top: none;
+      }
+    }
+  }
+}
+
+@keyframes lhl {
+  from {
+    background-size: 112%;
+  }
+  to {
+    background-size: 100%;
+  }
 }