aser

package.json

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

routes.ts

@@ -11,16 +11,17 @@ export default [
   {
     path: '/about',
     name: '关于南高',
+    component: '@/layouts/about',
     routes: [
       {
         path: '/about/insert',
         name: '走进南高',
-        component: '@/pages/index',
+        component: '@/pages/about/insert',
       },
       {
         path: '/about/honer',
         name: '南高荣誉',
-        component: '@/pages/index',
+        component: '@/pages/honer',
       },
       {
         path: '/about/join',

src/global.less

@@ -211,14 +211,14 @@ body,
 }
 @media (min-width: 1920px) {
   html {
-    font-size: 30px;
+    font-size: 28px;
   }
 }
 .ant-menu-title-content {
   font-size: 16px !important;
 }
 .section {
-  padding: 24px;
+  padding: 2rem;
   position: relative;
   .tabs {
     text-align: center;
@@ -258,6 +258,24 @@ body,
       min-height: 30px;
     }
   }
+  .ant-card-bordered {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+  .ant-card-cover {
+    flex: 1;
+  }
+  .ant-card-cover,
+  .ant-card-body {
+    width: 100%;
+    padding: 1rem !important;
+  }
+  .ant-card-body {
+    padding-top: 0 !important;
+  }
 }
 
 .slider {
@@ -328,6 +346,17 @@ body,
     }
   }
 }
+.oneline {
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.img {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
 .twoline {
   text-overflow: -o-ellipsis-lastline;
   overflow: hidden; //溢出内容隐藏
@@ -357,3 +386,41 @@ body,
     }
   }
 }
+.more {
+  height: 1px;
+  width: 100%;
+  background-color: #ccc;
+  position: relative;
+  margin: 1rem 0;
+  a {
+    position: absolute;
+    right: 0;
+    top: -1.2rem;
+  }
+}
+.secitem {
+  cursor: pointer;
+  .arrow {
+    width: 2rem;
+    height: 2rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 1rem;
+    flex-shrink: 0;
+    transition: all 0.4s;
+    cursor: pointer;
+    span {
+      color: #3d67ff;
+      font-size: 0.6rem;
+    }
+  }
+  &:hover {
+    .arrow {
+      background-color: #3d67ff;
+      span {
+        color: #ffffff;
+      }
+    }
+  }
+}

src/layouts/about.jsx

+import React, { useState, useEffect } from 'react';
+import styles from './index.less';
+import { history } from 'umi';
+const tabs = [
+  {
+    path: '/about/insert',
+    name: '走进南高',
+    component: '@/pages/index',
+  },
+  {
+    path: '/about/honer',
+    name: '南高荣誉',
+    component: '@/pages/index',
+  },
+  {
+    path: '/about/join',
+    name: '加入南高',
+    component: '@/pages/index',
+  },
+  {
+    path: '/about/news',
+    name: '南高资讯',
+    component: '@/pages/index',
+  },
+  {
+    path: '/about/contact',
+    name: '联系我们',
+    component: '@/pages/index',
+  },
+];
+
+function About({ location: { pathname }, children }) {
+  return (
+    <>
+      <div className={styles.aboutheader}>
+        <img
+          src={require('@/assets/back.jpg')}
+          alt=""
+          style={{ width: '100%' }}
+        />
+        <div className={styles.menucontent}>
+          {tabs.map((it, i) => {
+            return (
+              <div
+                key={it.path}
+                onClick={() => {
+                  history.push(it.path);
+                }}
+              >
+                <div
+                  className="img"
+                  style={{
+                    backgroundImage:
+                      pathname == it.path
+                        ? `url(${require(`@/assets/tabicon/${i + 1}s.png`)})`
+                        : `url(${require(`@/assets/tabicon/${i + 1}.png`)})`,
+                    transform: pathname == it.path ? `scale(1.3)` : `scale(1)`,
+                    backgroundSize:
+                      pathname == it.path ? '50% auto' : '40% auto',
+                    marginTop: pathname == it.path ? '-1rem' : 0,
+                    transformOrigin: 'center',
+                    transition: 'all 0.4s',
+                  }}
+                ></div>
+                <p
+                  style={{
+                    color: '#000000',
+                    fontWeight: pathname == it.path ? 'bold' : 'normal',
+                    marginTop: pathname == it.path ? '1rem' : 0,
+                    fontSize: pathname == it.path ? '0.8rem' : '0.6rem',
+                    transition: 'all 0.4s',
+                  }}
+                >
+                  {it.name}
+                </p>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+      {children}
+    </>
+  );
+}
+
+export default About;

src/layouts/index.less

@@ -40,3 +40,42 @@
     }
   }
 }
+
+.aboutheader {
+  position: relative;
+  margin-bottom: 60px;
+  .menucontent {
+    width: calc(100% - 4rem);
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: auto;
+    bottom: -48px;
+    background-color: #ffffff;
+    height: 5rem;
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+    > div {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex-direction: column;
+      cursor: pointer;
+      > div {
+        width: 3rem;
+        height: 3rem;
+        background-size: 40% auto;
+        padding: 1rem;
+        background-color: #ffffff;
+        border-radius: 50%;
+        transform: scale(1);
+      }
+      p {
+        font-size: 0.6rem;
+      }
+    }
+  }
+}

src/pages/about/honer.jsx

+import React, { useState, useEffect } from 'react';
+import styles from './index.less';
+import { Row, Col } from 'antd';
+
+const col = { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 };
+
+function Insert() {
+  return (
+    <div>
+      <div className="section">
+        <h2
+          style={{
+            textAlign: 'center',
+            marginBottom: '1.4rem',
+            fontSize: '1.2rem',
+          }}
+        >
+          江苏南高智能装备创新中心有限公司
+        </h2>
+        <p className={styles.intro}>
+          江苏南高智能装备创新中心有限公司是由东南大学牵头，联合地方政府和省内高档数控机床及成套装备行业的数家龙头企业共同创立的专注于数控机床及成套装备领域的高新技术企业。
+        </p>
+        <p className={styles.intro}>
+          江苏南高是<b>“江苏省智能装备产业联盟”</b>、
+          <b>“南京智能制造装备产业促进会”</b>的秘书长单位。
+        </p>
+        <p className={styles.intro}>
+          江苏南高是<b>“江苏省高档数控机床及成套装备创新中心”</b>的运营主体。
+        </p>
+        <p className={styles.intro}>
+          公司拥有自主知识产权的MOM制造运营管理系统，MES制造执行系统，WMS智能仓储系统，IOT工业互联网平台以及智能网关，结合数字孪生、机器视觉、AI、5G等新兴技术，帮助制造业企业打造数字化智慧工厂，累计服务合同到账收入超过5000万元。
+        </p>
+      </div>
+      <div className="section">
+        <Row>
+          <Col {...col}>
+            <div
+              className="img"
+              style={{
+                backgroundImage: `url(${require('@/assets/insert1.png')})`,
+                width: '100%',
+                height: '100%',
+                minHeight: 330,
+                paddingBottom: '1rem',
+              }}
+            ></div>
+          </Col>
+          <Col {...col} className={styles.format}>
+            <h2>江苏省数控机床及成套装备创新中心</h2>
+            <p>
+              江苏省高档数控机床及成套装备创新中心于2018年2月被批准成为省制造业创新中心试点单位。
+            </p>
+            <div>中心任务</div>
+            <p>
+              1、开展行业基础和共性技术研究，提高高档数控机床及成套装备行业的技术水平；
+              <br />
+              2、促进重大科技成果的转化，高端技术人才的培养；
+              <br />
+              3、整合行业资源，为行业企业提供技术服务；
+              <br />
+              4、形成具有全球影响力的制造业创新中心，引领产业发展。
+              <br />
+            </p>
+            <p>
+              创新中心围绕数控机床的五大研究领域（机床智能化设计；机床制造技术；机床整机技术；机床运维技术；机床关键部件技术），设立了19个研究室，拥有一支由院士领衔的200多人的一流研发团队。
+            </p>
+            <div>核心功能</div>
+            <p>
+              <span>数控机床共性技术研发中心</span>
+              <span>中试与成果孵化基地</span>
+              <span>数控机床行业智库</span>
+            </p>
+          </Col>
+        </Row>
+      </div>
+      <div className="section">
+        <h2 className="title" style={{ color: '#3064c9' }}>
+          管理团队
+        </h2>
+        <p className={styles.intro}>
+          创新中心实行企业化运作，由董事会行使重大决策权，管理团队负责中心的具体运营管理。公司董事长兼任公司法人，决定公司和创新中心的重大决策。公司总经理担任创新中心主任，负责创新中心的技术研究和公司的日常管理。
+        </p>
+        <img
+          className={styles.introimg}
+          src={require('@/assets/insert2.jpg')}
+          alt=""
+        />
+        <h2 className="title" style={{ color: '#3064c9' }}>
+          研究室主任
+        </h2>
+        <img
+          className={styles.introimg}
+          src={require('@/assets/insert3.jpg')}
+          alt=""
+        />
+      </div>
+      <div className="section">
+        <h2 className="title">研究领域</h2>
+        <img
+          className={styles.introimg}
+          src={require('@/assets/insert4.jpg')}
+          alt=""
+        />
+      </div>
+      <div className="section">
+        <h2 className="title">我们的投资人</h2>
+        <div className={styles?.ibo}>
+          {new Array(7).fill('').map((it, i) => {
+            return (
+              <img
+                src={require(`@/assets/ibo/tz${i + 1}.png`)}
+                alt=""
+                style={{ height: 68, width: 'auto', display: 'block' }}
+              />
+            );
+          })}
+        </div>
+      </div>
+      <img
+        src={require(`@/assets/inserts.jpg`)}
+        alt=""
+        style={{ width: '100%', display: 'block' }}
+      />
+    </div>
+  );
+}
+
+export default Insert;

src/pages/about/index.less

+.intro {
+  width: 66vw;
+  text-align: center;
+  margin: auto;
+  margin-bottom: 0.4rem;
+  min-width: 300px !important;
+}
+.introimg {
+  width: 66vw;
+  margin: 0 auto;
+  display: block;
+  min-width: 300px !important;
+  margin-bottom: 1rem;
+}
+.format {
+  background-color: #f9f9f9;
+  padding: 1.5rem 6vw;
+  h2 {
+    text-align: center;
+    font-size: 1.2rem;
+    margin-bottom: 1.2rem;
+  }
+  div {
+    background-color: @primary-color;
+    padding: 12px;
+    color: #fff;
+    width: 88px;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    margin-bottom: 0.4rem;
+  }
+}
+.ibo {
+  width: calc(100% - 4rem);
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  margin: 0 auto;
+}

src/pages/about/insert.jsx

+import React, { useState, useEffect } from 'react';
+import styles from './index.less';
+import { Row, Col } from 'antd';
+
+const col = { xs: 24, sm: 24, md: 12, lg: 12, xl: 12, xxl: 12 };
+
+function Insert() {
+  return (
+    <div>
+      <div className="section">
+        <h2
+          style={{
+            textAlign: 'center',
+            marginBottom: '1.4rem',
+            fontSize: '1.2rem',
+          }}
+        >
+          江苏南高智能装备创新中心有限公司
+        </h2>
+        <p className={styles.intro}>
+          江苏南高智能装备创新中心有限公司是由东南大学牵头，联合地方政府和省内高档数控机床及成套装备行业的数家龙头企业共同创立的专注于数控机床及成套装备领域的高新技术企业。
+        </p>
+        <p className={styles.intro}>
+          江苏南高是<b>“江苏省智能装备产业联盟”</b>、
+          <b>“南京智能制造装备产业促进会”</b>的秘书长单位。
+        </p>
+        <p className={styles.intro}>
+          江苏南高是<b>“江苏省高档数控机床及成套装备创新中心”</b>的运营主体。
+        </p>
+        <p className={styles.intro}>
+          公司拥有自主知识产权的MOM制造运营管理系统，MES制造执行系统，WMS智能仓储系统，IOT工业互联网平台以及智能网关，结合数字孪生、机器视觉、AI、5G等新兴技术，帮助制造业企业打造数字化智慧工厂，累计服务合同到账收入超过5000万元。
+        </p>
+      </div>
+      <div className="section">
+        <Row>
+          <Col {...col}>
+            <div
+              className="img"
+              style={{
+                backgroundImage: `url(${require('@/assets/insert1.png')})`,
+                width: '100%',
+                height: '100%',
+                minHeight: 330,
+                paddingBottom: '1rem',
+              }}
+            ></div>
+          </Col>
+          <Col {...col} className={styles.format}>
+            <h2>江苏省数控机床及成套装备创新中心</h2>
+            <p>
+              江苏省高档数控机床及成套装备创新中心于2018年2月被批准成为省制造业创新中心试点单位。
+            </p>
+            <div>中心任务</div>
+            <p>
+              1、开展行业基础和共性技术研究，提高高档数控机床及成套装备行业的技术水平；
+              <br />
+              2、促进重大科技成果的转化，高端技术人才的培养；
+              <br />
+              3、整合行业资源，为行业企业提供技术服务；
+              <br />
+              4、形成具有全球影响力的制造业创新中心，引领产业发展。
+              <br />
+            </p>
+            <p>
+              创新中心围绕数控机床的五大研究领域（机床智能化设计；机床制造技术；机床整机技术；机床运维技术；机床关键部件技术），设立了19个研究室，拥有一支由院士领衔的200多人的一流研发团队。
+            </p>
+            <div>核心功能</div>
+            <p>
+              <span>数控机床共性技术研发中心</span>
+              <span>中试与成果孵化基地</span>
+              <span>数控机床行业智库</span>
+            </p>
+          </Col>
+        </Row>
+      </div>
+      <div className="section">
+        <h2 className="title" style={{ color: '#3064c9' }}>
+          管理团队
+        </h2>
+        <p className={styles.intro}>
+          创新中心实行企业化运作，由董事会行使重大决策权，管理团队负责中心的具体运营管理。公司董事长兼任公司法人，决定公司和创新中心的重大决策。公司总经理担任创新中心主任，负责创新中心的技术研究和公司的日常管理。
+        </p>
+        <img
+          className={styles.introimg}
+          src={require('@/assets/insert2.jpg')}
+          alt=""
+        />
+        <h2 className="title" style={{ color: '#3064c9' }}>
+          研究室主任
+        </h2>
+        <img
+          className={styles.introimg}
+          src={require('@/assets/insert3.jpg')}
+          alt=""
+        />
+      </div>
+      <div className="section">
+        <h2 className="title">研究领域</h2>
+        <img
+          className={styles.introimg}
+          src={require('@/assets/insert4.jpg')}
+          alt=""
+        />
+      </div>
+      <div className="section">
+        <h2 className="title">我们的投资人</h2>
+        <div className={styles?.ibo}>
+          {new Array(7).fill('').map((it, i) => {
+            return (
+              <img
+                src={require(`@/assets/ibo/tz${i + 1}.png`)}
+                alt=""
+                style={{ height: 68, width: 'auto', display: 'block' }}
+              />
+            );
+          })}
+        </div>
+      </div>
+      <img
+        src={require(`@/assets/inserts.jpg`)}
+        alt=""
+        style={{ width: '100%', display: 'block' }}
+      />
+    </div>
+  );
+}
+
+export default Insert;

src/pages/index.jsx

 import styles from './index.less';
-import { useModel } from 'umi';
+import { Link, useModel } from 'umi';
 import React, { useState, useEffect, useRef } from 'react';
-import { Carousel, Button } from 'antd';
+import { Carousel, Button, Row, Col, Card, Tooltip } 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';
+import { CaretRightOutlined, ArrowRightOutlined } from '@ant-design/icons';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/zh-cn';
+dayjs.extend(relativeTime).locale('zh-cn');
 
 // 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 { Meta } = Card;
 
 const transitiongroup = (ifs) => {
   return {
@@ -86,6 +83,41 @@ const production = {
   ],
 };
 
+const advance = [
+  {
+    title: '行业领先技术',
+    desc: '具有行业领先的设备智能技术，为企业提供智能化改造与数字化转型服务。',
+  },
+  {
+    title: '卓越股东团队',
+    desc: '股东包括东南大学和埃斯顿、东山精密、江苏亚威等智能制造领域的龙头企业。',
+  },
+  {
+    title: '诚信至善服务',
+    desc: '根据客户需求为其提供量身定制的产品和服务，通过“政用产学研”与客户建立长期合作的战略伙伴关系。',
+  },
+  {
+    title: '顶尖研发力量',
+    desc: '建有19个研究室，拥有一支由院士领衔的200多人的一流研发团队。',
+  },
+];
+
+function spArr(arr, num) {
+  let newArr = [];
+  for (let i = 0; i < arr.length; ) {
+    newArr.push(arr.slice(i, (i += num)));
+  }
+  return newArr;
+}
+function getHtmlPlainText(html_str) {
+  //提取字符串中的文字
+  let re = new RegExp('<[^<>]+>', 'g');
+  let text = html_str.replace(re, '');
+  //或
+  //var text = html_str.replace(/<[^<>]+>/g, "");
+  return text;
+}
+
 function IndexPage({ route }) {
   //   const { initialState, loading, error, refresh, setInitialState } =
   //   useModel('@@initialState');
@@ -99,10 +131,16 @@ function IndexPage({ route }) {
     return res?.data?.dataList ?? [];
   });
 
+  const zixun = useRequest(async () => {
+    let res = await doFetch({ url: '/realTimeInfo/limitList', params: {} });
+    return res?.data?.dataList ?? [];
+  });
+  console.log(zixun?.data);
   //autoplay
   return (
     <div>
       <Carousel
+        autoplay
         afterChange={(cur) => {
           setcurrindex(cur);
         }}
@@ -110,7 +148,7 @@ function IndexPage({ route }) {
         {data?.map((it, i) => {
           return (
             <div
-              key={it.picLinkUrl}
+              key={it.id}
               style={{ cursor: it?.picLinkUrl ? 'pointer' : 'default' }}
               onClick={() => {
                 it?.picLinkUrl && window.open(it.picLinkUrl);
@@ -134,7 +172,6 @@ function IndexPage({ route }) {
                   return (
                     <div
                       className={styles.banner}
-                      key={Math.random()}
                       style={{
                         width,
                         height: (980 / 1920) * width,
@@ -322,20 +359,232 @@ function IndexPage({ route }) {
           </Button>
         </div>
       </div>
-
+      <div className="section" style={{ padding: 0 }}>
+        <h2 className="title" style={{ margin: '2rem 0px 12px 0px' }}>
+          南高优势
+        </h2>
+        <p
+          className="tabs"
+          style={{ display: 'block', width: '66vw', margin: '1.6rem auto' }}
+        >
+          江苏南高自主申请知识产权逾100项，其中发明专利65个。技术研究团队人数占员工总数87%。公司建立了数据融合与质量科学、AI与智能装备创意设计机床结构动态优化创新设计及数字化、智能化设计与制造等共性技术研发平台.
+        </p>
+        <div
+          className={styles.cards}
+          style={{ backgroundImage: `url(${require('@/assets/bgblue.jpg')})` }}
+        >
+          <Row gutter={16} className={styles.cardlist}>
+            {advance.map((it, i) => {
+              return (
+                <Col xs={24} sm={12} md={12} lg={6} key={i}>
+                  <div className={styles?.cardItem}>
+                    <h2>{it.title}</h2>
+                    <p>{it.desc}</p>
+                    <img src={require(`@/assets/icon/a${i + 1}.png`)} alt="" />
+                  </div>
+                </Col>
+              );
+            })}
+          </Row>
+        </div>
+      </div>
       <div
         className="section"
         style={{
-          padding: '24px',
+          background: `url(${require('@/assets/bg.jpg')}) no-repeat center`,
+          padding: '8vw',
+          backgroundSize: 'cover',
         }}
       >
-        <h2 className="title">南高优势</h2>
+        <div
+          style={{
+            backgroundColor: 'rgba(255,255,255,0.1)',
+            padding: '64px 36px',
+            backdropFilter: 'blur(10px)',
+            border: '1px solid #ffffff',
+          }}
+        >
+          <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',
+            }}
+          >
+            作为“江苏省智能装备产业联盟”和“南京市智能制造装备产业促进会”的秘书长单位，南高智能一直积极地推动并联合与产业相关的政府部门、科研院所、优秀企业代表等，致力于建立真正全连接的产业生态，将拥有智能制造共同理念的参与者联合起来，成为未来整个智能制造产业生态建设的驱动者和践行者。
+          </p>
+          <Button
+            ghost
+            style={{ margin: '0 auto', display: 'block' }}
+            size="large"
+          >
+            查看详情
+          </Button>
+        </div>
+      </div>
+      <div className="section" style={{ marginBottom: '1rem' }}>
+        <h2 className="title">南高资讯</h2>
         <p
-          className="tabs"
-          style={{ display: 'block', width: '66vw', margin: '0 auto' }}
+          style={{
+            width: '66vw',
+            display: 'block',
+            margin: '0 auto',
+            fontSize: '0.6rem',
+            textAlign: 'center',
+          }}
         >
-          江苏南高自主申请知识产权逾100项，其中发明专利65个。技术研究团队人数占员工总数87%。公司建立了数据融合与质量科学、AI与智能装备创意设计机床结构动态优化创新设计及数字化、智能化设计与制造等共性技术研发平台.
+          南高智能创新中心带您实时了解行业动态信息
         </p>
+        <Row
+          gutter={{ xs: 8, sm: 16, md: 32, lg: 64, xl: 88 }}
+          style={{ marginTop: '2rem', padding: '0 44px' }}
+        >
+          <Col
+            xs={24}
+            sm={24}
+            md={12}
+            lg={12}
+            style={{ marginBottom: '1.5rem' }}
+          >
+            <Card
+              style={{
+                width: '100%',
+                height: '110%',
+                borderColor: '#cccccc',
+              }}
+              cover={
+                <div
+                  className="img"
+                  style={{
+                    backgroundImage: `url(${
+                      zixun?.data && Array.isArray(zixun.data)
+                        ? zixun?.data[0]?.picList[0]?.url
+                        : 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png'
+                    })`,
+                    width: '100%',
+                    height: '100%',
+                    minHeight: 330,
+                  }}
+                ></div>
+              }
+              hoverable
+            >
+              <Meta
+                title={
+                  <div className="spread" style={{ alignItems: 'baseline' }}>
+                    <Tooltip
+                      title={
+                        zixun?.data && Array.isArray(zixun.data)
+                          ? zixun?.data[0]?.title
+                          : '-'
+                      }
+                      placement="bottomLeft"
+                    >
+                      <h2 className="oneline" style={{ fontSize: '0.8rem' }}>
+                        {zixun?.data && Array.isArray(zixun.data)
+                          ? zixun?.data[0]?.title
+                          : '-'}
+                      </h2>
+                    </Tooltip>
+                    <span
+                      style={{
+                        fontSize: '0.6rem',
+                        paddingLeft: 12,
+                        color: '#999999',
+                        display: 'block',
+                        width: 100,
+                        flexShrink: 0,
+                        textAlign: 'right',
+                      }}
+                    >
+                      {zixun?.data && Array.isArray(zixun.data)
+                        ? dayjs(zixun?.data[0]?.releaseTime)?.fromNow?.()
+                        : '-'}
+                    </span>
+                  </div>
+                }
+                description={
+                  <span
+                    style={{ fontSize: '0.6rem', color: '#999999' }}
+                    className="twoline"
+                  >
+                    {zixun?.data && Array.isArray(zixun.data)
+                      ? zixun?.data[0]?.articleOverview ??
+                        getHtmlPlainText(zixun?.data[0]?.informationContent)
+                      : '-'}
+                  </span>
+                }
+              />
+            </Card>
+          </Col>
+          <Col xs={24} sm={24} md={24} lg={12}>
+            <div className="more">
+              <Link to="/">查看更多</Link>
+            </div>
+            {zixun?.data
+              ?.filter((it, i) => i != 0)
+              ?.map((it, i) => {
+                return (
+                  <div
+                    className="secitem"
+                    key={it.id}
+                    style={{ marginBottom: '1rem' }}
+                  >
+                    <div
+                      className="spread"
+                      style={{ alignItems: 'flex-start' }}
+                    >
+                      <Tooltip title={it.title} placement="bottomLeft">
+                        <h2 className="twoline" style={{ fontSize: '0.8rem' }}>
+                          {it.title}
+                        </h2>
+                      </Tooltip>
+                      <span
+                        style={{
+                          fontSize: '0.6rem',
+                          paddingLeft: 12,
+                          color: '#999999',
+                          display: 'block',
+                          width: 100,
+                          flexShrink: 0,
+                          textAlign: 'right',
+                        }}
+                      >
+                        {dayjs(it?.releaseTime)?.fromNow?.()}
+                      </span>
+                    </div>
+
+                    <div className="spread">
+                      <span
+                        className="twoline"
+                        style={{ fontSize: '0.6rem', color: '#999999' }}
+                      >
+                        {it.articleOverview && it.articleOverview != ''
+                          ? it.articleOverview
+                          : getHtmlPlainText(it?.informationContent).replace(
+                              /\s*/g,
+                              '',
+                            )}
+                      </span>
+                      <div className="arrow">
+                        <ArrowRightOutlined />
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+          </Col>
+        </Row>
       </div>
     </div>
   );

src/pages/index.less

@@ -49,3 +49,47 @@
     background-size: 100%;
   }
 }
+
+.cards {
+  width: 100%;
+  background-repeat: no-repeat;
+  background-position: left top;
+  background-size: 100% 50%;
+  padding: 2rem;
+  margin-top: 1.2rem;
+  background-color: #f0f0f0;
+  .cardlist {
+    .cardItem {
+      cursor: default;
+      background-color: #f0f0f0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      height: 20rem;
+      max-height: 460px !important;
+      box-shadow: 0px 0px 4px #364d79;
+      transition: all 0.4s;
+      margin-bottom: 16px;
+      h2 {
+        font-size: 0.8rem;
+        margin-bottom: 2rem;
+      }
+      p {
+        font-size: 0.6rem;
+        width: 80%;
+      }
+      img {
+        width: 0px;
+        transition: all 0.4s;
+        margin-top: 2rem;
+      }
+      &:hover {
+        background-color: #ffffff;
+        img {
+          width: 25%;
+        }
+      }
+    }
+  }
+}