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.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%;
+  }
 }