2024版开源大会-初始

2024-08-16 14:15:06 +08:00 · 2024-08-16 14:15:06 +08:00 · c9838db137
parent 8fe7bfb207
commit c9838db137
57 changed files with 2118 additions and 170 deletions
--- a/.umirc.js
+++ b/.umirc.js
@ -2,13 +2,18 @@ import { defineConfig } from "umi";

 export default defineConfig({
  routes: [
-    { path: '/', component: 'homePage' },
    { path: "/organization", component: "organization" },
-    { path: "/information", component: "information" },
-    { path: "/information/detail/:id", component: "information/detail" },
+    // { path: "/2023/information", component: "information" },
+    // { path: "/2023/information/detail/:id", component: "information/detail" },
    { path: "/contact", component: "information/detail" },
    { path: "/register", component: "information/detail" },
-    { path: "/docs", component: "docs" },
+    // { path: "/2023/docs", component: "docs" },
+    // { path: '/2023', component: 'homePage' },
+    { path: "/information", component: "meetingInfos" },
+    { path: "/exhibition", component: "exhibition" },
+    { path: "/forum", component: "home/specialForum" },
+    { path: "/information/detail/:id", component: "meetingInfos/detail" },
+    { path: '/', component: 'home' },
  ],
  npmClient: 'pnpm',
  alias: {
--- a/package-lock.json
+++ b/package-lock.json
@ -14,6 +14,8 @@
        "js-base64": "^3.7.5",
        "katex": "^0.16.8",
        "marked": "1.2.9",
+        "react-slick": "^0.30.2",
+        "slick-carousel": "^1.8.1",
        "swiper": "^9.4.1",
        "umi": "^4.0.71"
      },
@ -7632,6 +7634,11 @@
        "node": ">=10.13.0"
      }
    },
+    "node_modules/enquire.js": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmmirror.com/enquire.js/-/enquire.js-2.1.6.tgz",
+      "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw=="
+    },
    "node_modules/entities": {
      "version": "4.5.0",
      "resolved": "https://registry.npmmirror.com/entities/-/entities-4.5.0.tgz",
@ -10155,6 +10162,12 @@
        "node": ">=10"
      }
    },
+    "node_modules/jquery": {
+      "version": "3.7.1",
+      "resolved": "https://registry.npmmirror.com/jquery/-/jquery-3.7.1.tgz",
+      "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
+      "peer": true
+    },
    "node_modules/js-base64": {
      "version": "3.7.5",
      "resolved": "https://registry.npmmirror.com/js-base64/-/js-base64-3.7.5.tgz",
@ -13005,6 +13018,22 @@
        "react": ">=15"
      }
    },
+    "node_modules/react-slick": {
+      "version": "0.30.2",
+      "resolved": "https://registry.npmmirror.com/react-slick/-/react-slick-0.30.2.tgz",
+      "integrity": "sha512-XvQJi7mRHuiU3b9irsqS9SGIgftIfdV5/tNcURTb5LdIokRA5kIIx3l4rlq2XYHfxcSntXapoRg/GxaVOM1yfg==",
+      "dependencies": {
+        "classnames": "^2.2.5",
+        "enquire.js": "^2.1.6",
+        "json2mq": "^0.2.0",
+        "lodash.debounce": "^4.0.8",
+        "resize-observer-polyfill": "^1.5.0"
+      },
+      "peerDependencies": {
+        "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/reactcss": {
      "version": "1.2.3",
      "resolved": "https://registry.npmmirror.com/reactcss/-/reactcss-1.2.3.tgz",
@ -13688,6 +13717,14 @@
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
      "peer": true
    },
+    "node_modules/slick-carousel": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmmirror.com/slick-carousel/-/slick-carousel-1.8.1.tgz",
+      "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==",
+      "peerDependencies": {
+        "jquery": ">=1.8.0"
+      }
+    },
    "node_modules/sonic-boom": {
      "version": "2.8.0",
      "resolved": "https://registry.npmmirror.com/sonic-boom/-/sonic-boom-2.8.0.tgz",
--- a/package.json
+++ b/package.json
@ -17,6 +17,8 @@
    "js-base64": "^3.7.5",
    "katex": "^0.16.8",
    "marked": "1.2.9",
+    "react-slick": "^0.30.2",
+    "slick-carousel": "^1.8.1",
    "swiper": "^9.4.1",
    "umi": "^4.0.71"
  },
--- a/public/css/font.css
+++ b/public/css/font.css
@ -1,4 +1,13 @@
@font-face {
  font-family: Alimama ShuHeiTi;
  src: url(../font/AlimamaShuHeiTi-Bold.ttf);
+}
+
+@font-face {
+  font-family: Alibaba PuHuiTi;
+  src: url(../font/ALIBABA-PUHUITI-MEDIUM.TTF);
+}
+@font-face {
+  font-family: YouSheBiaoTiHei;
+  src: url(../font/YouSheBiaoTiHei-2.ttf);
 }
--- a/public/css/index.css
+++ b/public/css/index.css
@ -30,6 +30,7 @@
  box-sizing: border-box;
  min-width: 200px;
  margin: 0 auto;
+  background-color: #F8F9FF;
 }

@media (max-width: 767px) {
--- a/public/font/ALIBABA-PUHUITI-HEAVY.TTF
+++ b/public/font/ALIBABA-PUHUITI-HEAVY.TTF
--- a/public/font/ALIBABA-PUHUITI-MEDIUM.TTF
+++ b/public/font/ALIBABA-PUHUITI-MEDIUM.TTF
--- a/public/font/YouSheBiaoTiHei-2.ttf
+++ b/public/font/YouSheBiaoTiHei-2.ttf
--- a/src/assets/img2024/arrow.png
+++ b/src/assets/img2024/arrow.png
--- a/src/assets/img2024/blueArrow.png
+++ b/src/assets/img2024/blueArrow.png
--- a/src/assets/img2024/box.png
+++ b/src/assets/img2024/box.png
--- a/src/assets/img2024/cdTitle.png
+++ b/src/assets/img2024/cdTitle.png
--- a/src/assets/img2024/cdback.png
+++ b/src/assets/img2024/cdback.png
--- a/src/assets/img2024/colorleft.png
+++ b/src/assets/img2024/colorleft.png
--- a/src/assets/img2024/countdown.png
+++ b/src/assets/img2024/countdown.png
--- a/src/assets/img2024/equity.png
+++ b/src/assets/img2024/equity.png
--- a/src/assets/img2024/footer.png
+++ b/src/assets/img2024/footer.png
--- a/src/assets/img2024/item-dot.png
+++ b/src/assets/img2024/item-dot.png
--- a/src/assets/img2024/left.png
+++ b/src/assets/img2024/left.png
--- a/src/assets/img2024/photo.png
+++ b/src/assets/img2024/photo.png
--- a/src/assets/img2024/right.png
+++ b/src/assets/img2024/right.png
--- a/src/assets/img2024/topbanner.png
+++ b/src/assets/img2024/topbanner.png
--- a/src/assets/img2024/track1.png
+++ b/src/assets/img2024/track1.png
--- a/src/assets/img2024/track2.png
+++ b/src/assets/img2024/track2.png
--- a/src/assets/img2024/track3.png
+++ b/src/assets/img2024/track3.png
--- a/src/assets/img2024/track4.png
+++ b/src/assets/img2024/track4.png
--- a/src/assets/img2024/tracklogo.png
+++ b/src/assets/img2024/tracklogo.png
--- a/src/assets/img2024/trends.png
+++ b/src/assets/img2024/trends.png
--- a/src/assets/img2024/底部footer.png
+++ b/src/assets/img2024/底部footer.png
--- a/src/components/memberitem/index.jsx
+++ b/src/components/memberitem/index.jsx
@ -8,7 +8,7 @@ function MemberItem(props) {
    {
      data.name && <>
        <img src={ data.imageUrl } alt="" className="head-img"/>
-        <span className="task-hide">{ data.name }</span>
+        <span className="task-hide guestName"><span>{ data.name }</span></span>
        <Tooltip title={ data.introduction }>
          <p className="task-hide-2">{ data.introduction }</p>
        </Tooltip>
--- a/src/components/memberitem/index.less
+++ b/src/components/memberitem/index.less
@ -7,6 +7,7 @@
  align-items: center;
  border-bottom: 1.5px solid linear-gradient(90deg,#08428e 0%,#019765 100%);
  margin-bottom: 35px;
+  margin: 0px 50px 32px 50px!important;
  .head-img {
    width: 200px;
    height: 250px;
@ -14,18 +15,24 @@
    object-fit: cover;
    background-color: #B6B6BB;
  }
-  span {
+  &>span {
+    height: 29px;
+    line-height: 29px;
+    min-width: 84px;
    position: absolute;
-    bottom: 66px;
-    left: 2px;
-    width: 196px;
+    bottom: 78px;
+    left: -42px;
+    background: linear-gradient(#2AAC62 0%, #3B80BD 48%, #5E33C4 100%);
    font-weight: 700;
    color: #ffffff;
    font-size: 18px;
-    line-height: 40px;
-    background-image:linear-gradient(180deg,rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, 0.47) 100%);
    text-align: center;
    padding: 0 10px;
+    transform: skew(-18deg);
+    span{
+      transform: skew(20deg);
+      display: block;
+    }
  }
  p {
    margin-top: 15px;
@ -39,6 +46,6 @@
    bottom: -5px;
    width: 100%;
    height: 1.5px;
-    background-image: linear-gradient(90deg,#08428e 0%,#019765 100%);
+    background: linear-gradient( 225deg, #2AAC62 0%, #3B80BD 48%, #5E33C4 100%);
  }
 }
--- a/src/constants/equity.js
+++ b/src/constants/equity.js
@ -0,0 +1,95 @@
+
+const str = "<li>以钻石赞助单位身份参与大会的组织活动</li><li>副总裁或以上层级领导担任开幕式主论坛Keynote speaker ，演讲时长15分钟</li>"
+"<li>可在主论坛上进行重要发布</li>"
+"<li>大会所有对外宣传提及钻石赞助单位名称</li>"
+"<li>享有晚宴独家冠名</li>"
+"<li>晚宴开始前及间隙播放钻石赞助单位宣传片</li>"
+"<li>在本次会议当日晚宴中邀请一位钻石赞助单位代表入座主桌，并在本次会议晚宴上提供给钻石赞助单位10分钟演讲机会（主要介绍本单位技术、成果、产品、解决方案等内容），演讲顺序优先</li>"
+"<li>获得在本次大会举办两场专题技术研讨会（分论坛/专场）的机会，可按需求定内容，主办方负责该会场常规费用包括：场租、投影设备以及配套服务</li>"
+"<li>主办方为钻石赞助单位专题技术研讨会（分论坛/专场）演讲专家提供免费注册资格（差旅自理），并按照大会嘉宾同等待遇安排接送机</li>"
+"<li>钻石赞助单位可冠名该专题技术研讨会（分论坛/专场）</li>"
+"<li>会议开场前或中场休息时循环播放铂金赞助单位提供的企业宣传视频，视频内容需主办方确认（限3分钟内，内容会务组提前审核）</li>"
+"<li>该分论坛的直播画面右下方，即会议背景板上出现钻石赞助单位LOGO</li>"
+"<li>主论坛主KV出现钻石赞助单位名字或LOGO，放在赞助单位第一位</li>"
+"<li>大会会议纸袋印制钻石赞助单位名字或LOGO</li>"
+"<li>会议资料袋中装入宣传资料（需赞助单位自行准备资料）</li>"
+"<li>8位嘉宾大会期间享受VIP待遇（贵宾接送机、免食宿，跨城差旅费用自理），优先安排</li>"
+"<li>大会报名系统进行特别设置，甄别参加分论坛代表信息</li>"
+"<li>会议网页和启智社区微信公众号对钻石赞助单位相关信息进行发布</li>"
+"<li>会议网页及启智社区官网设置钻石赞助单位网站链接</li>"
+"<li>会议网页放置钻石赞助单位banner广告</li>";
+
+const str1 = "<li>以铂金赞助单位身份参与大会的组织活动</li><li>副总裁或以上层级领导担任第二场主论坛Keynote speaker ，演讲时长15分钟</li>"
+"<li>在本次会议当日晚宴中邀请一位铂金赞助单位代表入座2号桌，并在本次会议晚宴上提供给铂金赞助单位10分钟演讲机会（主要介绍本单位技术、成果、产品、解决方案等内容）</li>"
+"<li>获得在本次大会举办一场专题技术研讨会（分论坛/专场）的机会，可按需求定内容，主办方负责该会场常规费用包括：场租、投影设备以及配套服务</li>"
+"<li>主办方为铂金单位专题技术研讨会（分论坛/专场）专家提供免费注册资格（差旅自理），并按照大会嘉宾同等待遇安排接送机</li>"
+"<li>铂金赞助单位可冠名该专题技术研讨会（分论坛/专场）</li>"
+"<li>铂金赞助单位专题技术研讨会（分论坛/专场）开始前及间隙播放视频影像宣传资料</li>"
+"<li>该专题技术研讨会（分论坛/专场）的直播画面右下方，即会议背景板上出现铂金赞助单位LOGO</li>"
+"<li>在会议手册上放置铂金赞助单位宣传信息（限于文字及图片）的机会，由主办方进行统一排版</li>"
+"<li>会议开场前或中场休息时循环播放铂金单位提供的企业宣传视频，视频内容需主办方确认（限3分钟内，内容会务组提前审核）</li>"
+"<li>主论坛主KV出现铂金赞助单位名字或LOGO</li>"
+"<li>大会会议纸袋印制铂金赞助单位名字或LOGO</li>"
+"<li>会议资料袋中装入宣传资料（需赞助单位自行准备资料）</li>"
+"<li>主论坛开始前及间隙（茶歇及午间）播放铂金赞助单位视频影像宣传资料</li>"
+"<li>5位嘉宾大会期间享受VIP待遇（贵宾接送机、免食宿，跨城差旅费用自理），优先安排贵宾座次</li>"
+"<li>铂金赞助单位可获得20个本次会议免注册费参会名额（差旅费用自理）</li>"
+"<li>铂金赞助单位可获得2个标准展位</li>"
+"<li>通过专业媒体渠道/开发者社群宣传专场相关信息，为铂金赞助单位分论坛吸引专业听众或开发者造势</li>"
+"<li>大会会刊插页广告</li>"
+"<li>会议网页及启智社区官网设置铂金赞助单位网站链接</li>";
+"<li>会议网页和启智社区微信公众号对钻石赞助单位相关信息进行发布</li>"
+"<li>大会报名系统进行特别设置，甄别参加分论坛代表信息</li>"
+"<li>优先得到启智社区培训资源/启智集结号资源支持，推动协办单位相关项目进高校，与高校课堂结合</li>";
+
+
+const str2 = "<li>以黄金赞助单位身份参与大会的组织活动</li><li>在本次会议当日晚宴中邀请一位黄金赞助单位代表入座2号桌，并在本次会议晚宴上提供给铂金赞助单位10分钟演讲机会（主要介绍本单位技术、成果、产品、解决方案等内容）</li>"
+"<li>获得在本次大会举办一场专题技术研讨会（分论坛/专场）的机会，可按需求定内容，主办方负责该会场常规费用包括：场租、投影设备以及配套服务</li>"
+"<li>主办方为黄金单位专题技术研讨会（分论坛/专场）专家提供免费注册资格（差旅自理）</li>"
+"<li>在会议手册上放置黄金赞助单位宣传信息（限于文字及图片）的机会，由主办方进行统一排版</li>"
+"<li>主论坛主KV出现黄金赞助单位名字或LOGO</li>"
+"<li>大会会议纸袋印制黄金赞助单位名字或LOGO</li>"
+"<li>会议资料袋中装入宣传资料（需赞助单位自行准备资料）</li>"
+"<li>2位嘉宾大会期间享受VIP待遇（贵宾接送机、免食宿，跨城差旅费用自理），优先安排贵宾座次</li>"
+"<li>黄金赞助单位可获得10个本次会议免注册费参会名额（差旅费用自理）</li>"
+"<li>黄金赞助单位可获得1个标准展位</li>"
+"<li>大会会刊插页广告</li>"
+"<li>会议网页及启智社区官网设置钻石赞助单位网站链接</li>"
+"<li>优先得到启智社区培训资源/启智集结号资源支持，推动协办单位相关项目进高校，与高校课堂结合</li>";
+
+
+const str3 = "<li>享有晚宴独家冠名权</li><li>晚宴开始前及间隙播放钻石赞助单位宣传片</li>"
+"<li>在本次会议当日晚宴中邀请一位钻石赞助单位代表入座主桌，并在本次会议晚宴上提供给钻石赞助单位10分钟演讲机会（主要介绍本单位技术、成果、产品、解决方案等内容），演讲顺序优先</li>"
+"<li>获得在会议手册上放置晚宴赞助单位宣传信息（限于文字及图片）的机会，由主办方进行统一排版</li>"
+"<li>主论坛主KV赞助单位名单上出现晚宴赞助单位名字或LOGO</li>"
+"<li>大会会议纸袋印制钻石赞助单位名字或LOGO</li>"
+"<li>2位嘉宾大会期间享受VIP待遇（贵宾接送机、免食宿，跨城差旅费用自理），优先安排贵宾座次</li>"
+"<li>可获得5个本次会议免注册费参会名额（差旅费用自理）</li>"
+"<li>可获得1个大会标准展位</li>";
+
+
+const str4 = "<li>以白银赞助单位身份参与大会的组织活动</li><li>在本次会议当日晚宴中邀请一位白银赞助单位代表出席晚宴</li>"
+"<li>获得在本次大会举办一场专题技术研讨会（分论坛/专场）的机会，可按需求定内容，主办方负责该会场常规费用包括：场租、投影设备以及配套服务</li>"
+"<li>主办方为白银赞助单位专题技术研讨会（分论坛/专场）专家提供免费注册资格（差旅自理）</li>"
+"<li>获得在会议手册上放置白银赞助单位宣传信息（限于文字及图片）的机会，由主办方进行统一排版</li>"
+"<li>主论坛主KV出现白银赞助单位名字或LOGO</li>"
+"<li>赞助单位可获得5个本次会议免注册费参会名额（差旅费用自理）</li>"
+"<li>可获得5个本次会议免注册费参会名额（差旅费用自理）</li>"
+"<li>大会会刊插页广告</li>";
+export const cate =[
+    {
+        name:"钻石赞助单位",money:"150",str:str
+    },
+    {
+        name:"铂金赞助单位",money:"100",str:str1
+    },
+    {
+        name:"黄金赞助单位",money:"50",str:str2
+    },
+    {
+        name:"晚宴独家赞助单位",money:"50",str:str3
+    },
+    {
+        name:"白银独家赞助单位",money:"25",str:str4
+    }
+]
--- a/src/constants/info.js
+++ b/src/constants/info.js
@ -10,23 +10,31 @@ export const menu = [
    link: 'organization'
  },
  {
-    name: '大会资讯',
-    link: 'information'
+    name: '专题论坛',
+    link: 'forum'
  },
  {
    name: '参会注册',
    link: 'register'
  },
+  {
+    name: '赞助展览',
+    link: 'exhibition'
+  },
+  {
+    name: '会议资讯',
+    link: 'information'
+  },
  {
    name: '往届回顾',
    link: '/',
    showSubMenu: true,
-    history: [{ year: 2022, link: 'https://chinaosc.ccf.org.cn/2022/'}]
+    history: [{ year: 2022, link: 'https://chinaosc.ccf.org.cn/2022/'},{ year: 2023, link: 'https://chinaosc2023.ccf.org.cn/'}]
  },
-  {
-    name: '联系我们',
-    link: 'contact'
-  }
+  // {
+  //   name: '联系我们',
+  //   link: 'contact'
+  // }
 ]

 export const defaultPage = {
@ -60,7 +68,59 @@ export const information = {
    }
  ]
 }
+export const information2024 = {
+  title: '会议资讯',
+  desc: '',
+  category: [
+    {
+      title: '最新动态',
+      eng: 'news',
+      anchor: 'forum',
+    },
+    {
+      title: '会议指南',
+      eng: 'Conference Guide',
+      anchor: 'guide',
+    },
+    {
+      title: '会议通知',
+      eng: 'Meeting Notice',
+      anchor: 'notice',
+    },
+    {
+      title: '新闻宣传',
+      eng: 'Publicity',
+      anchor: 'news',
+    }
+  ]
+}

+export const exhibition = {
+  title: '赞助展览',
+  desc: '',
+  category: [
+    {
+      title: '条件要求',
+      eng: 'Condition requirements',
+      anchor: 'comdition',
+    },
+    {
+      title: '赞助等级与权益',
+      eng: 'Sponsorship level benefits',
+      anchor: 'grade',
+    },
+    {
+      title: '展览信息',
+      eng: 'exhibition information',
+      anchor: 'notice',
+    },
+    {
+      title: '组委会联系方式',
+      eng: 'contact information',
+      anchor: 'info',
+    }
+  ]
+}
 export const homePage = [
  {
    title: '会议议程',
@ -81,6 +141,9 @@ export const homePage = [
 ]

 export const agendaDateList = ['10月21日', '10月22日']
+export const fourBeginTime = '2024-11-9 09:00'
+export const fourDate = ['11月9日', '11月10日', '11月11日']
+export const fourDateId = [754, 755, 756]

 export const meetingAgenda = {
  tencentMeeting: {
@ -104,7 +167,7 @@ export const config = {
  },
  '2024': {
    zoneKey: 'china2024osc',
-    zoneId: 29,
+    zoneId: 29
  }
 }

--- a/src/layouts/footer.jsx
+++ b/src/layouts/footer.jsx
@ -6,34 +6,46 @@ function Footer(){
  return (
    <div className={style.footer}>
      <div className={style.footerContent}>
+        <div className={style.host}>
+            <span>主办单位：</span>
+            <span>中国计算机学会</span>
+            <span>开放原子开源基金会</span>
+            <span>鹏城实验室</span>
+            <span>AITISA联盟</span>
+          </div>
+          <div className={style.host}>
+            <span>承办单位：</span>
+            <span>国防科技大学计算机学院</span>
+            <span>湖南先进技术研究院</span>
+            <span>CCF开源发展委员会</span>
+          </div>
+          <div className={style.host}>
+            <span>协办单位：</span>
+            <span>OpenI启智社区</span>
+            <span>中国电子信息产业集团有限公司</span>
+            <span>百度飞桨开源社区</span>
+            <span>华为昇腾开源社区</span>
+          </div>
+          <div className={style.host}>
+            <span></span>
+            <span>昇思MindSpore开源社区</span>
+            <span>Datawhale开源社区</span>
+            <span>燧原科技</span>
+            <span>天数智芯</span>
+          </div>
        <div className={style.qrCode}>
          <div>
            <img src={QRCode} alt="" />
          </div>
-          <span>CCF官方公众号</span>
+          <span>报名参会</span>
        </div>
-        {/* <div className={ style.qrCode }>
+        <div className={ style.qrCode }>
        <div>
-          <img src="http://fpoimg.com/200x200" alt=""  />
-        </div>
-        <span>CCF官方公众号</span>
-      </div> */}
-        <div className={style.host}>
-          <span>主办单位：</span>
-          <span>中国计算机学会</span>
-          <span>开放原子开源基金会</span>
-        </div>
-        <div className={style.host}>
-          <span>承办单位：</span>
-          <span>国防科技大学计算机学院</span>
-          <span>湖南先进技术研究院</span>
-          <span>CCF开源发展委员会</span>
-        </div>
-        <div className={style.host}>
-          <span>协办单位：</span>
-          <span>中国电子信息产业集团有限公司</span>
-          <span>长沙市国链安全可靠计算机产业促进中心</span>
+          <img src={QRCode} alt=""  />
        </div>
+        <span>官方公众号</span>
+      </div>
+        
      </div>
      <div className={style.copyright}>
        <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备13000930号-4</a>
@ -42,7 +54,7 @@ function Footer(){
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802032778"
        >
-          京公网安备11010802032778号
+          京公网安备 11010802032778号
        </a>
      </div>
    </div>
--- a/src/layouts/header.jsx
+++ b/src/layouts/header.jsx
@ -52,9 +52,9 @@ function Header(){
                onMouseOver={ () => { item.showSubMenu && setShowSubMenu( true ) } }
                onMouseOut={ () => { item.showSubMenu && setShowSubMenu( false ) } }
              >
-                <Link to={`/${ isCurrent ? '' : item.link}`}>{ item.name }</Link>
+                <Link to={`/${ !isCurrent ? `/2023/${item.link}` : item.link}`}>{ item.name }</Link>
                {
-                  item.history && !isCurrent && <ul className={ `${ style.dropDown } ${ showSubMenu ? style.dropDownShow : '' }` } style={{ height : showSubMenu ? `${ item.history.length * 46}px` : 0 }}>
+                  item.history && <ul className={ `${ style.dropDown } ${ showSubMenu ? style.dropDownShow : '' }` } style={{ height : showSubMenu ? `${ item.history.length * 46}px` : 0 }}>
                    {
                      item.history.map((e => {
                        return <li className={ style.dropDownItem } key={ e.year }><a href={ e.link } target="_blank">{e.year}</a></li>
--- a/src/layouts/index.jsx
+++ b/src/layouts/index.jsx
@ -22,7 +22,7 @@ const App = () => {
          <Outlet/> 
        </div>
      </Content>
-      { !isCurrent && <Footer></Footer> }
+      <Footer></Footer>
    </Layout>
  );
 };
--- a/src/layouts/index.module.less
+++ b/src/layouts/index.module.less
@ -87,7 +87,7 @@ html body {
  }
  .siteLayoutContent {
    // padding-bottom: 60px;
-    background: #ffffff;
+    background: #F2F5FF;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
@ -96,7 +96,7 @@ html body {
    padding: 0;
    height: 383px;
    width: 100%;
-    background: #1f2534 url('img/footer-bg.png') no-repeat;
+    background: #1f2534 url('../assets/img2024/footer.png') no-repeat;
    background-size: 100% 100%;
    color: #ffffff;
    display: flex;
@ -107,30 +107,29 @@ html body {
      width: 1200px;
      display: flex;
      flex: 1;
-      margin-top: 50px;
+      margin-top: 70px;
      .qrCode {
        display: flex;
        flex-direction: column;
-        margin-right: 80px;
+        margin-right: 50px;
        align-items: center;
        &:last-child {
-          margin-right: 70px;
+          margin-right: 0px;
        }
        div {
-          width: 200px;
-          height: 200px;
-          background: url('img/qr-bg.png') no-repeat;
-          background-size: 100% 100%;
+          width: 150px;
+          height: 150px;
          display: flex;
          align-items: center;
          justify-self: center;
+          border-radius: 4px 4px 4px 4px;
+          border: 1px dashed rgba(255,255,255,0.42);
+          background: rgba(202,218,239,0.17);
          img {
            margin: auto;
-            width: 176px;
-            height: 176px;
            background-image: linear-gradient(180deg,#bfd0ec 0%,#ffffff 100%);
            border-radius: 4px;
-            padding: 10px;
+            width: 94%;
          }
        }
        span {
@ -142,7 +141,7 @@ html body {
      .host {
        display: flex;
        flex-direction: column;
-        margin-right: 125px;
+        margin-right: auto;
        span {
          opacity: 77%;
          color: #ffffff;
@ -154,6 +153,7 @@ html body {
          font-weight: 700;
          color: #ffffff;
          font-size: 16px;
+          height: 16px;
        }
      }

--- a/src/models/defaultConfig.js
+++ b/src/models/defaultConfig.js
@ -5,7 +5,7 @@ import { extractYear } from '../utils/util'
 export default function Page() {
  const [dirList, setDirList] = useState({});
  const [isCurrent, setIsCurrent] = useState(false);
-  const urlYear = extractYear(window.location.hostname)
+  const urlYear = extractYear(window.location.pathname)

  useEffect(() => {
    getDirList().then((res) => {
--- a/src/pages/exhibition/index.jsx
+++ b/src/pages/exhibition/index.jsx
@ -0,0 +1,101 @@
+import './index.less'
+import '../home/index.less'
+import { useState , useEffect } from 'react';
+import { exhibition } from '../../constants/info';
+import { cate } from '../../constants/equity';
+
+function Index() {
+
+    const [ anchorName , setAnchorName ] = useState("comdition");
+    const [ active , setActive ]  = useState(0);
+    const [ str , setStr ]  = useState("");
+
+    useEffect(()=>{
+        if(cate && cate.length > 0){
+            setStr(cate[0].str);
+        }
+    },[cate])
+
+
+    const scrollToAnchor = (anchorName) => {
+        if (anchorName) {
+            setAnchorName(anchorName)
+            let anchorElement = document.getElementById(anchorName);
+            if(anchorElement) { anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'}); }
+        }
+    }
+  return <div className="content meetingTwentyFour">
+    <div className="anchorHeader">
+      {
+        exhibition.category && 
+        exhibition.category.map((e, k) => {
+          return <>
+          <div key={ k } onClick={() => { scrollToAnchor(e.anchor) }} className={`tab-item ${anchorName === e.anchor ?"active":""}`}>{ e.title }</div>
+          {k < exhibition.category.length-1 && <span>/</span>}
+          </>
+        })
+      }
+    </div>
+    <div className='exhibitionBox'>
+        <div>
+            <div className="anchor" id={ exhibition.category[0].anchor }></div>
+            <div className='titles left'>
+                <span className='name'>{ exhibition.category[0].title }</span>
+                <span className='subName'>{exhibition.category[0].eng.toUpperCase()}</span>
+            </div>
+            <ul className='liInfo'>
+                <li>赞助及展览单位应有良好的社会声誉，企业、高校、研究院所均可。</li>
+                <li>如企业赞助，其产品（或服务）应是所在行业知名品牌或新兴品牌。</li>
+                <li>赞助单位及其产品（或服务）应与人工智能、芯片或算力、智能科学与技术有关。</li>
+            </ul>
+        </div>
+        <div>
+            <div className="anchor"  id={ exhibition.category[1].anchor }></div>
+            <div className='titles left'>
+                <span className='name'>{ exhibition.category[1].title }</span>
+                <span className='subName'>{exhibition.category[1].eng.toUpperCase()}</span>
+            </div>
+            <div className='equities'>
+                <ul className='equityUl'>
+                    {
+                        cate && cate.map((i,k)=>{
+                            return(
+                                <li className={active ===k ?"active":""} onClick={()=>{setActive(k);setStr(i.str)}}>{i.name}<span>{i.money}万</span></li>
+                            )
+                        })
+                    }
+                </ul>
+                <div className='equityBox'>
+                    <div style={{textAlign:"center",marginBottom:27}}><span className='equityTitle'>权益回归</span></div>
+                    <div dangerouslySetInnerHTML={{__html:str}}></div>
+                </div>
+            </div>
+        </div>
+        <div>
+            <div className="anchor"  id={ exhibition.category[2].anchor }></div>
+            <div className='titles left'>
+                <span className='name'>{ exhibition.category[2].title }</span>
+                <span className='subName'>{exhibition.category[2].eng.toUpperCase()}</span>
+            </div>
+            <ul className='liInfo dot'>
+                <div>标准展位（费用：5万/个）</div>
+                <li>在会议手册上体现参加标展的单位名称或logo</li>
+                <li>获得大会标准展位一个，可自行对展位进行进一步装饰</li>
+                <li>可获得5个本次会议免注册费参会名额（差旅费用自理）</li>
+            </ul>
+        </div>
+        <div>
+            <div className="anchor"  id={ exhibition.category[3].anchor }></div>
+            <div className='titles left'>
+                <span className='name'>{ exhibition.category[3].title }</span>
+                <span className='subName'>{exhibition.category[3].eng.toUpperCase()}</span>
+            </div>
+            <div className='connectPerson'>
+                <p>联系人：赵海英老师 </p><p>电 话：0755-85902473</p><p> 邮 箱：secretariat@openi.org.cn</p>
+            </div>
+        </div>
+    </div>
+  </div>
+}
+
+export default Index
--- a/src/pages/exhibition/index.less
+++ b/src/pages/exhibition/index.less
@ -0,0 +1,142 @@
+.exhibitionBox{
+    width: 1200px;
+    background: #F8F9FF;
+    border-radius: 18px 18px 18px 18px;
+    border: 3px solid #FFFFFF;
+    margin:0px auto 50px;
+    padding:30px;
+    .liInfo{
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 16px;
+        color: #191919;
+        line-height: 34px;
+        padding-left: 20px;
+        li{list-style-type: decimal;}
+        &>div{
+            font-family: PingFang SC, PingFang SC;
+            font-weight: bold;
+            font-size: 18px;
+            color: #191919;
+            margin-bottom: 30px;
+            margin-left: -20px;
+        }
+        &.dot{
+            li{
+                position: relative;
+                margin-bottom: 12px;
+                list-style-type: none;
+                &::before{
+                    position: absolute;
+                    left: -20px;
+                    content: "";
+                    width: 8px;
+                    height: 8px;
+                    background: #0116D4;
+                    border-radius: 50%;
+                    top: 13px;
+                }
+            }
+        }
+    }
+    .connectPerson{
+        font-family: PingFang SC, PingFang SC;
+        font-weight: 400;
+        font-size: 16px;
+        color: #191919;
+        line-height: 34px;
+    }
+    .equities{
+        display: flex;
+        justify-content: flex-start;
+        .equityUl{
+            width: 378px;
+            li{
+                height: 70px;
+                line-height: 70px;
+                padding:0px 25px;
+                background: #FFFFFF;
+                box-shadow: 0px 0px 10px 1px rgba(50,57,124,0.05);
+                border-radius: 8px 8px 8px 8px;
+                font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
+                font-weight: 400;
+                font-size: 18px;
+                color: #191919;
+                margin-bottom: 35px;
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                width: 282px;
+                position: relative;
+                cursor: pointer;
+                span{
+                    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+                    font-weight: 400;
+                    font-size: 28px;
+                    color: #0116D4;
+                }
+                &.active::after{
+                    position: absolute;
+                    left: 0px;
+                    top: 0px;
+                    height: 100%;
+                    content: "";
+                    background-image: url(../../assets/img2024/box.png);
+                    width: 378px;
+                    background-size: 100%;
+                }
+                &.active::before{
+                    position: absolute;
+                    left: 0px;
+                    top: 15px;
+                    content: "";
+                    width: 9px;
+                    height: 38px;
+                    background: linear-gradient(#2AAC62 0%, #3B80BD 48%, #5E33C4 100%);
+                    border-radius: 0px 4px 4px 0px;
+                }
+            }
+        }
+        .equityBox{
+            flex: 1;
+            background: rgba(9,52,218,0.02);
+            border-radius: 22px 22px 22px 22px;
+            border: 2px solid rgba(53,66,186,0.37);
+            padding:28px;
+            .equityTitle{
+                width: 136px;
+                height: 36px;
+                line-height: 36px;
+                background-image: url(../../assets/img2024/equity.png);
+                background-size: 100%;
+                text-align: center;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: bold;
+                font-size: 18px;
+                color: #FFFFFF;
+                display: inline-block;
+            }
+            li,p{
+                position: relative;
+                list-style-type: none;
+                padding-left: 18px;
+                font-family: PingFang SC, PingFang SC;
+                font-weight: 400;
+                font-size: 15px;
+                color: #3F3E46;
+                line-height: 22px;
+                margin-bottom: 18px;
+                &::before{
+                    position: absolute;
+                    left: 0px;
+                    content: "";
+                    width: 8px;
+                    height: 8px;
+                    background: #0116D4;
+                    border-radius: 50%;
+                    top: 7px;
+                }
+            }
+        }
+    }
+}
--- a/src/pages/home/index.jsx
+++ b/src/pages/home/index.jsx
@ -0,0 +1,134 @@
+import './index.less';
+import { fourBeginTime } from '../../constants/info';
+import { getBaseInfo , getPartnerList } from '../../utils/request/api';
+import { useState, useEffect } from 'react';
+import Guest from './sub/guest';
+import MeetingLine from './sub/meetingLine';
+import FastTrack from './sub/fastTrack';
+import Trends from './sub/trends';
+
+
+  
+function HomePage(){
+    const [ mainInfo, setMainInfo ] = useState({})
+    const [ countDownTime , setCountDownTime ] = useState("");
+    const [ partner, setPartner ] = useState([])
+
+    useEffect(()=>{
+        getMainInfo();
+        getPartner();
+        setTimeout(function() {
+            getTime();
+        }, 1000);
+    },[])
+
+    const getMainInfo = () => {
+      getBaseInfo().then(result => {
+        setMainInfo(result.data);
+      }).catch(console.error())
+    }
+  
+
+    // 获取还剩多少时间开始
+    function getTime(){
+        // 设定deadline的日期和时间
+        const deadline = new Date(fourBeginTime);
+        // 获取当前时间
+        const now = new Date();
+        // 计算时间差（毫秒）
+        const timeLeft = deadline - now;
+        countdown(timeLeft);
+    }
+
+    function countdown(timeLeft) {
+        let time;
+        if(timeLeft <= 0) {
+            time = {day:"00",hour:"00",minute:"00",second:"00"}
+            return;
+        }
+        const daysLeft = Math.floor(timeLeft / ( 1000 * 60 * 60 * 24));
+        const hoursLeft = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        const minutesLeft = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60));
+        const secondsLeft = Math.floor((timeLeft % (1000 * 60)) / 1000);
+        time = {day:daysLeft,hour:hoursLeft,minute:minutesLeft,second:secondsLeft}
+        setCountDownTime(time);
+
+        setTimeout(function() {
+          countdown(timeLeft - 1000);
+        }, 1000);
+    }
+
+    const getPartner = () => {
+      getPartnerList().then(res => {
+        setPartner(res.rows);
+      }).catch(console.error())
+    }
+
+    return(
+        <div className="page">
+            <div className="banner">
+                <img src={ mainInfo && mainInfo.bannerList && mainInfo.bannerList.split(',')[0]} alt=""/>
+            </div>
+            <div className='meetingTwentyFour'>
+                {/* 2024年开源大会首页内容 */}
+                <div className='contents'>
+                    <div className='titles'>
+                        <span className='name'>大会简介</span>
+                        <span className='subName'>{'Conference Introduction'.toUpperCase()}</span>
+                    </div>
+                    <div className="intro-content" dangerouslySetInnerHTML={{__html: mainInfo.introductionContent}} />
+                    <div className='countdown'>
+                        <div className='countdownTitle'>距大会开始还剩</div>
+                        <div className='countdownTime'>
+                            <span>{countDownTime?.day || "00"}</span>
+                            <font>天</font>
+                            <span>{countDownTime?.hour || "00"}</span>
+                            <font>时</font>
+                            <span>{countDownTime?.minute || "00"}</span>
+                            <font>分</font>
+                            <span>{countDownTime?.second || "00"}</span>
+                            <font>秒</font>
+                        </div>
+                    </div>
+                </div>
+                <MeetingLine/>
+                <Guest/>
+                <FastTrack/>
+                <Trends />
+                <div className="contents fourPart">
+                    <div className='titles'>
+                        <span className='name'>合作伙伴</span>
+                        <span className='subName'>{'cooperative partner'.toUpperCase()}</span>
+                    </div>
+                    <div className="partner-content">
+                    {
+                        partner.map((e, k) => {
+                        return (
+                            e.zonePartnersList.length > 0 ?
+                            <div className="partner-type" key={ k }>
+                                <div className="type-title">
+                                    <span>{ e.typeName }</span>
+                                </div>
+                                <div className="type-content">
+                                    {
+                                        e.zonePartnersList.map((i, subK) => {
+                                            return <a key={ subK } href={ i.link } target="_blank">
+                                                <div>
+                                                    <img src={ i.logo } alt=""/>
+                                                </div>
+                                            </a>
+                                        })
+                                    }
+                                </div>
+                            </div>
+                            :''
+                        )
+                        })
+                    }
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+export default HomePage;
--- a/src/pages/home/index.less
+++ b/src/pages/home/index.less
@ -0,0 +1,615 @@
+
+
+// ----------------------------------2024
+
+.banner {
+    height: 100vh;
+    width: 100%;
+    position: relative;
+    img {
+      width: 100%;
+      height: 100%;
+    }
+}
+.meetingTwentyFour{
+    width: 100%;
+    background: #F2F5FF;
+    .titles{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      font-family: Alibaba PuHuiTi;
+      padding:38px 0px 20px 0px;
+      &.left{
+        align-items: flex-start;
+        padding-top: 20px;
+        .subName{
+          font-weight: 400;
+          font-size: 23px;
+          color: #0E1015;
+          letter-spacing: 2px;
+        }
+        .name{
+          font-weight: 500;
+          font-size: 24px;
+          color: #0E1015; 
+          &::after{
+            width: 45px;
+            top: 20px;
+            height: 45px;
+          }
+          &::before{
+            left: 0px;
+          }
+        }
+      }
+      .name{
+        position: relative;
+        font-weight: 500;
+        font-size: 32px;
+        color: #0E1015;
+        letter-spacing: 3px;
+        padding:15px 30px 15px 40px;
+        &::before{
+          position: absolute;
+          content: "";
+          width: 15px;
+          height: 15px;
+          background-image: url(../../assets/img2024/left.png);
+          left: -5px;
+          top:10px
+        }
+        &::after{
+          position: absolute;
+          content: "";
+          width: 67px;
+          height: 67px;
+          background-image: url(../../assets/img2024/right.png);
+          left: 100%;
+          top:0px;
+          background-size: 100%;
+        }
+      }
+      .subName{
+        font-weight: 400;
+        font-size: 34px;
+        color: #0E1015;
+        letter-spacing: 8px;
+        opacity: 0.1;
+      }
+    }
+    .contents{
+      width: 1200px;
+      margin:0px auto;
+      padding-bottom: 32px;
+      .intro-content{
+        font-family: PingFang SC;
+        font-weight: 400;
+        font-size: 15px;
+        color: #0D1346;
+        line-height: 34px;
+        text-align: left;
+        white-space: break-spaces;
+        margin-bottom: 28px;
+        text-indent: 2em;
+      }
+      .countdown{
+        background-image: url(../../assets/img2024/countdown.png);
+        height: 200px;
+        background-size: 100% 100%;
+        display: flex;
+        padding-top: 28px;
+        box-sizing: border-box;
+        justify-content: flex-start;
+        flex-direction: column;
+        align-items: center;
+        .countdownTitle{
+          background-image: url(../../assets/img2024/cdTitle.png);
+          background-size: 100% 100%;
+          width: 179px;
+          height: 30px;
+          line-height: 20px;
+          font-weight: bold;
+          font-size: 16px;
+          color: #FFFFFF;
+          letter-spacing: 4px;
+          text-align: right;
+        }
+        .countdownTime{
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 100%;
+          margin-top: 38px;
+          span{
+            display: block;
+            background-image: url(../../assets/img2024/cdback.png);
+            background-size: 100% 100%;
+            width: 117px;
+            height: 69px;
+            line-height: 69px;
+            font-weight: 400;
+            font-size: 52px;
+            color: #FFD532;
+            letter-spacing: 5px;
+            text-align: center;
+            font-family: Alibaba PuHuiTi;
+          }
+          font{
+            margin:0px 28px;
+            font-size: 18px;
+            color: #FFFFFF;
+          }
+        }
+      }
+    }
+  }
+
+.schedule-content{
+  display: flex;
+  align-items: flex-start;
+  .schedule-date{
+    width: 80px;
+    height: 80px;
+    border-radius: 50%;
+    background: linear-gradient( 125deg, #7012B7 0%, #3368C4 100%);
+    color: #fff;
+    font-size: 25px;
+    line-height: 28px;
+    padding: 15px 10px;
+    text-align: center;
+    font-family: YouSheBiaoTiHei;
+  }
+  .agenda-detail {
+    border-top: 1px solid rgba(49, 91, 205, 0.41);
+    position: relative;
+    width: 100%;
+    margin:40px 0px;
+    .top-dot {
+      position: absolute;
+      width:12px;
+      height:12px;
+      background: #0116D4;
+      border-radius: 50%;
+      right: 0;
+      top: 0;
+      transform: translate(50%, -50%);
+    }
+    .dashed-line {
+      width: 85px;
+      border-bottom: 1px dashed rgba(13, 65, 197, 1);
+      position: absolute;
+      top: 22px;
+      left: -8px;
+      transform: rotate(34deg);
+    }
+    .agenda-list {
+      margin-left: 71px;
+      padding-left: 33px;
+      margin-top: 46px;
+      position: relative;
+      &::before{
+          content: "";
+          left: -1px;
+          height: calc(100% - 26px);
+          border-left: 1px dashed rgba(13, 65, 197, 1);
+          top: 0px;
+          position: absolute;
+      }
+      .agenda-item {
+        position: relative;
+        height: 43px;
+        border-bottom: 1px solid #aaafbe3a;
+        margin-bottom: 24px;
+        line-height: 18px;
+        font-size: 15px;
+        span {
+          white-space: pre;
+        }
+        &::before {
+          left: -43px;
+          position: absolute;
+          content: '';
+          width: 18.4px;
+          height: 18.4px;
+          background: url('../../assets/img2024/item-dot.png') no-repeat;
+          background-size: 100% 100%;
+        }
+      }
+    }
+    .agenda-list2 {
+      margin-left: 71px;
+      margin-top: 46px;
+      border-left: 1px dashed #0d41c5;
+      display: flex;
+      flex-wrap: wrap;
+      .agenda-item2 {
+        position: relative;
+        width: 330px;
+        padding: 26px 14px;
+        background: url('img/homePage/item-bg.png') no-repeat;
+        background-size: 100% 100%;
+        margin-left: 18px;
+        margin-top: 26px;
+        p {
+          margin-bottom: 12px;
+          color:#4c5876;
+          font-size:14px;
+          line-height:24px;
+          a {
+            margin-right: 35px;
+          }
+        }
+        .item-title {
+          width: 300px;
+          margin-bottom: 19px;
+          color:#1f2329;
+          font-size:16px;
+          display: flex;
+          align-items: center;
+          img {
+            width: 20px;
+            height: 20px;
+            margin-right: 8px;
+          }
+        }
+        &:nth-child(3n + 1)::before {
+          left: -27px;
+          position: absolute;
+          top: 50%;
+          transform: translate(0, -50%);
+          content: '';
+          width: 18.4px;
+          height: 18.4px;
+          background: url('img/homePage/item-dot.png') no-repeat;
+          background-size: 100% 100%;
+        }
+        .meeting-card {
+          background: unset;
+          max-height: 300px;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+}
+.guestContent{
+  div[class~="slick-track"]{
+    display: flex;
+    div[class~="slick-slide"]{
+      width: 1200px!important;
+    }
+  }
+  ul[class~="slick-dots"] > li{
+    width: 33px;
+    height: 6px;
+    background: rgba(0,0,0,0.11);
+    border-radius: 4px 4px 4px 4px;
+    &>button::before{
+      content: "";
+      width: 100%;
+      padding:0px;
+      height: 100%;
+    }
+    &.slick-active{
+      width: 70px;
+      background: linear-gradient( 90deg, #12B759 0%, #533BBD 48%, #3368C4 100%);
+    }
+  }
+  .guestlist{
+    display: flex!important;
+    width: 1200px!important;
+    flex-wrap: wrap;
+    justify-content: center;
+    .guestInfo{
+      width: 200px;
+      margin:22px 32px 22px 0px;
+      text-align: center;
+      .guestName{
+        font-weight: bold;
+        font-size: 17px;
+        color: #191919;
+        margin:20px 0px 10px;
+      }
+      .guestDesc{
+        font-weight: 400;
+        font-size: 15px;
+        color: #191919;
+        line-height: 24px;
+        word-break: break-all;
+      }
+    }
+    li{
+      background-image: url(../../assets/img2024/photo.png);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      height: 220px;
+      position: relative;
+      .trans{
+        transform: skew(-8deg);
+        height: 220px;
+        width: 170px;
+        position: absolute;
+        left: 25px;
+        bottom: 10px;
+        overflow: hidden;
+        border-radius: 20px 0px 20px 0px;
+      }
+      img{
+        object-fit: cover;
+        transform: skew(8deg);
+        width: 202px;
+        height: 220px;
+        margin-left: -16px;
+      }
+    }
+  }
+}
+.trackImgs{
+  display: flex;
+  padding-top: 37px;
+  li{
+    position: relative;
+    width: 159px;
+    margin-right: 37px;
+    height: 282px;
+    transition: 0.5s;
+    .trackInfos{
+      position: absolute;
+      z-index: 2;
+      padding:74px 35px 26px 35px;
+      background-color: #fff;
+      box-shadow: 0px 0px 12px 1px rgba(63,49,205,0.07);
+      border-radius: 18px;
+      right: 0px;
+      width: 340px;
+      top: 0px;
+      opacity: 0;
+      height: 100%;
+      transition: 0.5s;
+      display: none;
+      background-image: url(../../assets/img2024/tracklogo.png);
+      &>p{
+        margin-bottom: 18px;
+        font-weight: 400;
+        font-size: 15px;
+        color: #3D3D3D;
+        line-height: 28px;
+        font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
+        word-break: break-all;
+        white-space: pre-wrap;
+      }
+      button{
+        background: linear-gradient(#2AAC62 0%, #3B80BD 48%, #5E33C4 100%);
+        color: #fff!important;
+        font-weight: 400;
+        font-size: 15px;
+        height: 36px;
+        img{
+          width: 28px;
+          height: 8px;
+          margin-left: 5px;
+        }
+      }
+    }
+    .trackTitle{
+      position: absolute;
+      left: 20px;
+      top: 74px;
+      writing-mode: vertical-rl;
+      letter-spacing: 4px;
+      font-weight: 600;
+      font-size: 18px;
+      color: #191919;
+      line-height: 26px;
+      z-index: 3;
+    }
+    &::before{
+      position: absolute;
+      z-index: 3;
+      left: 1px;
+      top: 80px;
+      width: 11px;
+      height: 39px;
+      content: '';
+      background-image:url(../../assets/img2024/colorleft.png) ;
+    }
+    &:last-child{
+      margin-right: 0px;
+    }
+    &.active{
+      width: 610px;
+      .trackTitle{top: 25px;left: 307px;writing-mode:unset}
+      &::before{left: 270px;top: 21px;}
+      .trackInfos{opacity: 1;display: block;}
+    }
+    img{
+      width: 100%;
+      height: 100%;
+      max-width: 307px;
+    }
+  }
+}
+
+.trendsContent{
+  display: flex;
+  align-items: flex-start;
+  &>img{
+    border-radius: 27px;
+    margin-left: 14px;
+  }
+}
+.trendsList{
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1;
+  li{
+    width: calc(50% - 30px);
+    display: flex;
+    padding-bottom: 16px;
+    border-bottom: 1px solid rgba(101,99,120,0.21);
+    margin:16px 30px 16px 0px;
+    position: relative;
+    &:last-child,&:nth-child(5){
+      border-bottom: none;
+    }
+    .leftDate{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-right: 12px;
+      font-weight: 400;
+      font-size: 14px;
+      color: #696874;
+      padding:0px 18px;
+      border-right: 1px solid rgba(101,99,120,0.21);
+      span{
+        &:first-child{
+          font-weight: 800;
+          font-size: 22px;
+          color: #0116D4;
+          margin-bottom: 8px;
+        }
+      }
+    }
+    .rightInfos{
+      flex:1;
+      .rightTitle{
+        font-weight: bold;
+        font-size: 16px;
+        color: #191919;
+        margin-bottom: 14px;
+        cursor: pointer;
+        max-width: 270px;
+      }
+      .rightSubTitle{
+        font-weight: 400;
+        font-size: 14px;
+        color: #696874;
+        max-width: 270px;
+        &.hide{
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+        }
+        &.hide-2{
+          line-height: 26px;
+          height: 52px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+        }
+      }
+    }
+    &:hover .rightInfos .rightTitle{
+      color: #0116D4;
+    }
+    &::after{
+      content: "";
+      position: absolute;
+      left: 0px;
+      bottom: -1px;
+      width: 0px;
+      background-color: #0116D4;
+      height: 1px;
+      transition: 0.6s;
+    }
+    &:hover::after{
+      width: 100%;
+    }
+  }
+}
+.fourPart{  
+  .type-title{
+    position: relative;
+    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
+    font-weight: 400;
+    font-size: 24px;
+    color: #151313;
+    margin: 35px 0px;
+    &::after{
+      content: "";
+      position: absolute;
+      width: 32px;
+      left: 0px;
+      bottom: -12px;
+      height: 2px;
+      background: linear-gradient( 90deg, #5374B4 0%, #853CB8 100%);
+      border-radius: 0px 0px 0px 0px;
+      border: 1px solid rgba(0,0,0,0);
+    }
+  }
+  .type-content {
+    display: flex;
+    flex-wrap: wrap;
+    div {
+      margin-right: 25px;
+      padding: 6px;
+      background-color:#ffffff;
+      border-radius:4px;
+      box-shadow:0px 0px 6px rgba(28, 48, 175, 0.03);
+      height: 60px;
+      width: 170px;
+      line-height: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 20px;
+    }
+    img {
+      max-height: 45px;
+      max-width: 148px;
+    }
+  }
+}
+
+// 头部定位----会议资讯、赞助展览可用
+.anchorHeader{
+  padding:45px 0px;
+  margin:0px auto;
+  display: flex;
+  justify-content: center;
+  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
+  font-weight: 400;
+  font-size: 22px;
+  color: #0E1015;
+  letter-spacing: 3px;
+  .tab-item{
+    padding:0px 40px;
+    cursor: pointer;
+    &.active{
+      color: rgba(1, 22, 212, 1);
+    }
+  }
+  span{
+    color: rgba(1, 22, 212, 0.37);
+  }
+}
+
+// 顶部banner----会议资讯详情、专题论坛可用
+.pubBox{
+  .topBanner{
+    width: 100%;
+    height: 360px;
+    background: url('../../assets/img2024/topbanner.png') center;
+  }
+  .contentBox{
+    width: 1200px;
+    margin:-110px auto 50px;
+    background: #F8F9FF;
+    border-radius: 18px 18px 18px 18px;
+    border: 3px solid #FFFFFF;
+  }
+}
+
+
+@media screen and (max-width: 1920px) {
+  .banner{
+    img{
+      object-fit: cover;
+    }
+  }
+}
--- a/src/pages/home/specialForum/index.jsx
+++ b/src/pages/home/specialForum/index.jsx
@ -0,0 +1,98 @@
+import './index.less'
+import '../index.less'
+import { useEffect , useState } from 'react';
+import { getFroumItem , getHomeDocList } from '../../../utils/request/api';
+import { fourDate } from '../../../constants/info';
+import { Base64 } from 'js-base64';
+import { Spin } from 'antd';
+import empty from 'img/empty.png'
+
+function Index() {
+    const [ datas, setDatas ] = useState([]);
+    const [ articles, setArticles ] = useState([]);
+    const [ isSpin, setIsSpin ] = useState(true);
+
+    useEffect(()=>{
+        getDirList();
+    },[])
+
+    useEffect(()=>{
+        if(articles && articles.length>0){ 
+            getDetails();
+        }
+    },[articles])
+
+    async function getDetails(){
+        let list = datas;
+        for(let i=0;i<articles.length;i++){
+            let id = articles[i];
+            let result = await getFroumItem(id);
+            list.push(result.data);
+        }
+        list = list.sort(function (a, b) {
+            return a.id - b.id;
+        })
+        const groupedItems = groupBy(list, 'keywords');
+        setIsSpin(false);
+        setDatas(groupedItems);
+    }
+    
+    const getDirList = () => {
+        getHomeDocList(745,{pageNum:1,pageSize:6}).then(result => {
+            setArticles(result.rows && result.rows.map(i=>{return i.id}));
+        }).catch(console.error())
+    }
+
+    const groupBy = (array, key) => {
+        return array.reduce((result, currentItem) => {
+          // 使用 key 函数提取分组键，如果没有提供 key，则直接使用属性
+          const groupKey = typeof key === 'function' ? key(currentItem) : currentItem[key];
+          
+          // 确保 result 对象中有对应分组的数组
+          if (!result[groupKey]) {
+            result[groupKey] = [];
+          }
+          
+          // 将当前项添加到对应分组的数组中
+          result[groupKey].push(currentItem);
+          
+          return result;
+        }, {});
+    };
+       
+      
+
+  return  <div className="meetingTwentyFour pubBox">
+    <div className='topBanner'></div>
+    <div className='contentBox meetingTwentyFour'>
+        <div className='titles'>
+            <span className='name'>专题议程</span>
+            <span className='subName'>{'Special Agenda'.toUpperCase()}</span>
+        </div>
+        {
+            datas ? fourDate && fourDate.map((i,k)=>{
+                let lineItem = datas[`2024年${i}`]; 
+                return(
+                    lineItem && <div className='forumLists' key={k}>
+                        <p className='date'>2024年{i}</p>
+                        {
+                            lineItem && lineItem.length > 0 && lineItem.map((item,key)=>{
+                                let content = Base64.decode(item.content);
+                                return(
+                                    <div className='date-line'key={key}>
+                                        <span className='time-line box-item'>{item.name}</span>
+                                        <div className='dataList box-item' dangerouslySetInnerHTML={{__html:content}}></div>
+                                    </div>
+                                )
+                            })
+                        }
+                    </div>
+                )
+            }):
+            <img className="empty" src={ empty } alt="" />
+        }
+        {isSpin &&<div style={{minHeight:400,display:"flex",alignItems:'center',justifyContent:"center"}}><Spin spinning={true} /></div>}
+    </div>
+  </div>
+}
+export default Index
--- a/src/pages/home/specialForum/index.less
+++ b/src/pages/home/specialForum/index.less
@ -0,0 +1,54 @@
+.forumLists{
+    padding:14px 40px;
+    .date{
+        margin-bottom: 10px;
+        background: rgba(9,52,218,0.1);
+        border-radius: 4px 4px 4px 4px;
+        border: 1px solid rgba(53,66,186,0.05);
+        height: 54px;
+        line-height: 54px;
+        text-align: center;
+        font-weight: bold;
+        font-size: 18px;
+        color: #2433BB;
+    }
+    .date-line{
+        display: flex;
+        .box-item{
+            background: rgba(9,52,218,0.02);
+            border-radius: 4px 4px 4px 4px;
+            border: 1px solid rgba(53,66,186,0.05);
+            margin-bottom: 10px;
+            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
+            font-weight: 400;
+            font-size: 15px;
+            color: #191919;
+        }
+        .time-line{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            min-width: 200px;
+        }
+        .dataList{
+            margin-left: 10px;
+            flex: 1;
+            li{
+                height: 54px;
+                line-height: 54px;
+                padding:0px 25px;
+                display: flex;
+                justify-content: space-between;
+                &>a{
+                    color: #0116D4;
+                }
+                span:first-child{
+                    cursor: pointer;
+                }
+                &:hover span > a, &:hover span:first-child{
+                    color: #0116D4;
+                }
+            }
+        }
+    }
+}
--- a/src/pages/home/sub/fastTrack.jsx
+++ b/src/pages/home/sub/fastTrack.jsx
@ -0,0 +1,53 @@
+import '../index.less'
+import { useState, useEffect } from 'react';
+import track1 from '../../../assets/img2024/track1.png';
+import track2 from '../../../assets/img2024/track2.png';
+import track3 from '../../../assets/img2024/track3.png';
+import track4 from '../../../assets/img2024/track4.png';
+import arrow from '../../../assets/img2024/arrow.png';
+import { Button } from 'antd';
+
+
+function FastTrack(){
+    const [ activeIndex , setActiveIndex ] = useState(1);
+
+    return(
+        <div className='contents guestContent'>
+            <div className='titles'>
+                <span className='name'>快速通道</span>
+                <span className='subName'>{'fast track'.toUpperCase()}</span>
+            </div>
+            <ul className='trackImgs'>
+                <li className={activeIndex === 1 ? "active" :""} onMouseOver={()=>setActiveIndex(1)}>
+                    <span className='trackTitle'>参会注册</span><img src={track1} />
+                    <div className='trackInfos'>
+                        <p>CCF中国开源大会需付费注册参加，启智开发者大会免费注册参加。报名2024CCF中国开源大会的参会者，可免费参加第五届OpenI/O启智开发者嘉年华系列论坛。</p>
+                        <Button>了解详情<img src={arrow}/></Button>
+                    </div>
+                </li>
+                <li className={activeIndex === 2 ? "active" :""} onMouseOver={()=>setActiveIndex(2)}>
+                    <span className='trackTitle'>住宿预订</span><img src={track2} />
+                    <div className='trackInfos'>
+                        <p>一站式解决您的参会需求。获取会议地址、票务信息、交通指南以及我们为您精心挑选的酒店列表。确保每位参会者都能享受到便捷的交通和舒适的住宿体验，让您的会议旅程无忧。</p>
+                        <Button>了解详情<img src={arrow}/></Button>
+                    </div>
+                </li>
+                <li className={activeIndex === 3 ? "active" :""} onMouseOver={()=>setActiveIndex(3)}>
+                    <span className='trackTitle'>赞助展览</span><img src={track3} />
+                    <div className='trackInfos'>
+                        <p>探索创新前沿，我们的赞助展览区汇集了开源先锋和新兴企业。这里不仅是展示尖端技术和产品的平台，也是建立商业联系、发现合作机会的理想场所。加入我们，共同见证并塑造行业未来。</p>
+                        <Button>了解详情<img src={arrow}/></Button>
+                    </div>
+                </li>
+                <li className={activeIndex === 4 ? "active" :""} onMouseOver={()=>setActiveIndex(4)}>
+                    <span className='trackTitle'>专题论坛</span><img src={track4} />
+                    <div className='trackInfos'>
+                        <p>深入探讨行业热点，专题论坛汇集开源领域专家和思想领袖。加入我们，参与深度对话，拓展视野，共同推动开源发展。</p>
+                        <Button>了解详情<img src={arrow}/></Button>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    )
+}
+export default FastTrack;
--- a/src/pages/home/sub/guest.jsx
+++ b/src/pages/home/sub/guest.jsx
@ -0,0 +1,67 @@
+import '../index.less'
+import Slider from 'react-slick';
+import { useState, useEffect } from 'react';
+import { getMemberList } from '../../../utils/request/api';
+import 'slick-carousel/slick/slick.css';
+import 'slick-carousel/slick/slick-theme.css';
+
+const settings = {
+    infinite: true,
+    speed: 500,
+    arrows: false,
+    adaptiveHeight: false,
+    autoplay:true,
+    dots:true
+};
+function guest(){
+    const [ topics ,setTopics ] = useState([]);
+    
+    useEffect(()=>{
+        getList();
+    },[])
+
+    const getList = () => {
+        getMemberList().then(res => {
+            getUnit(res.rows)
+        })
+    }
+    function getUnit(array){
+        const newArray = [];
+        for(let i = 0; i< array.length;) {
+            newArray.push({list:array.slice(i, i += 9)});
+        }
+        setTopics(newArray)
+    }
+    return(
+        <div className='contents guestContent'>
+            <div className='titles'>
+                <span className='name'>大会嘉宾</span>
+                <span className='subName'>{'Conference guests'.toUpperCase()}</span>
+            </div>
+            <Slider {...settings}>
+                {
+                    topics && topics.map((i,k)=>{
+                        return(
+                            <ul className='guestlist' key={k}>
+                                {
+                                    i.list.map((item,key)=>{
+                                        return(
+                                            <div className='guestInfo' key={key}>
+                                                <li>
+                                                    <div className='trans'><img src={item.imageUrl} /></div>
+                                                </li>
+                                                <p className='guestName'>{item.name}</p>
+                                                <p className='guestDesc'>{item.introduction}</p>
+                                            </div>
+                                        )
+                                    })
+                                }
+                            </ul>
+                        )
+                    })
+                }
+            </Slider>
+        </div>
+    )
+}
+export default guest;
--- a/src/pages/home/sub/meetingLine.jsx
+++ b/src/pages/home/sub/meetingLine.jsx
@ -0,0 +1,71 @@
+import '../index.less'
+import { fourDate , fourDateId } from '../../../constants/info'
+import { getDocList  } from '../../../utils/request/api'
+import { useState, useEffect } from 'react';
+import empty from 'img/empty.png'
+
+function MeetingLine(){
+    const [ mainList, setMainList ] = useState([]);
+    
+  useEffect(()=>{
+    getMeetingAgendas();
+  },[])
+
+    //   获取大会日程列表
+    async function getMeetingAgendas(){
+        const requestList = [];
+        fourDateId.map(e => {
+            requestList.push(getList(e, e.anchor)) 
+        })
+        Promise.all(requestList).then(res => {
+            setMainList(res);
+        })
+    }
+
+    
+
+  const getList = (id) => {
+    return new Promise((resolve, reject) => {
+      getDocList(id).then(res => {
+        const list = res.rows;
+        resolve({ id, list: list });
+      })
+    })
+  }
+
+    return(
+        <div className='contents'>
+            <div className='titles'>
+                <span className='name'>大会日程</span>
+                <span className='subName'>{'Conference schedule'.toUpperCase()}</span>
+            </div>
+            {
+                mainList && mainList.map((i,k)=>{
+                    return(
+                        <div key={k} className='schedule-content'>
+                            <span className='schedule-date'>{fourDate[k]}</span>
+                            <div className="agenda-detail">
+                                <div className="top-dot"></div>
+                                <div className="bottom-dot"></div>
+                                <div className="dashed-line"></div>
+                                <div className="agenda-list">
+                                {
+                                    i.list.length > 0 ? i.list.map((item,key) => {
+                                    return <p className="agenda-item" key={key}>
+                                        <span dangerouslySetInnerHTML={{
+                                        __html: item.name
+                                    }}></span>
+                                        </p>
+                                    }):
+                                    <img className="empty" src={ empty } alt="" />
+                                }
+                                </div>
+                            </div>
+                        </div>
+                    )
+                })
+            }
+        </div>
+    )
+}
+export default MeetingLine;
--- a/src/pages/home/sub/trends.jsx
+++ b/src/pages/home/sub/trends.jsx
@ -0,0 +1,58 @@
+import '../index.less';
+import { useState, useEffect } from 'react';
+import TrendsBanner from '../../../assets/img2024/trends.png';
+import { Button } from 'antd';
+import blueArrow from '../../../assets/img2024/blueArrow.png';
+import { getHomeDocList } from '../../../utils/request/api';
+import empty from 'img/empty.png'
+
+function Trends(){
+    const [ lists, setLists ] = useState([]);
+
+    useEffect(()=>{
+        getTrends();
+    },[])
+
+    
+    const getTrends = () => {
+        getHomeDocList(750,{pageNum:1,pageSize:6}).then(result => {
+          setLists(result.rows);
+        }).catch(console.error())
+      }
+    
+
+    return(
+        <div className='contents'>
+            <div className='titles'>
+                <span className='name'>大会动态</span>
+                <span className='subName'>{'Conference News'.toUpperCase()}</span>
+            </div>
+            <div className='trendsContent'>
+                <ul className='trendsList'>
+                    {
+                        lists && lists.length>0 ? lists.map((i,k)=>{
+                            return(
+                                <li key={k}>
+                                    <div className='leftDate'>
+                                        <span>{new Date(i.publishTime).getDate()}</span>
+                                        <span>{new Date(i.publishTime).getFullYear()}-{new Date(i.publishTime).getMonth()}</span>
+                                    </div>
+                                    <div className='rightInfos'>
+                                        <p className='rightTitle task-hide'><a>{i.name}</a></p>
+                                  
+                                        <p className='rightSubTitle task-hide'>{i.summary}</p>
+                                    </div>
+                                </li>
+                            )
+                        })
+                        :
+                        <img className="empty" src={ empty } alt="" />
+                    }
+                </ul>
+                <img src={TrendsBanner} alt="" width={400} />
+            </div>
+            <div style={{textAlign:"center",marginTop:18}}><Button type='primary' href="/information" ghost>更多资讯<img src={blueArrow} alt="" style={{marginLeft:5}}/></Button></div>
+        </div>
+    )
+}
+export default Trends;
--- a/src/pages/homePage/index.jsx
+++ b/src/pages/homePage/index.jsx
@ -4,12 +4,13 @@ import ConferenceGuide from './conferenceGuide';
 import Member from './member';
 import greenRight from 'img/homePage/green-right.png'
 import titleIcon from 'img/homePage/title-icon.png'
-import { homePage } from '../../constants/info'
+import { homePage , fourBeginTime } from '../../constants/info'
 import { getBaseInfo, getPartnerList } from '../../utils/request/api'
 import { useRef, useState, useEffect } from 'react';
 import { throttle } from '../../utils/util'
 import empty from 'img/empty.png'
-import { useModel } from 'umi';
+import { useModel , useParams } from 'umi';
+import Home from '../home/index';


 function HomePage(){
@ -20,7 +21,8 @@ function HomePage(){
  const [ show, setShow ] = useState(false)
  const [ mainInfo, setMainInfo ] = useState({})
  const [ partner, setPartner ] = useState([])
-  const { isCurrent } = useModel('defaultConfig')
+  const { isCurrent } = useModel('defaultConfig');
+  const { year } = useParams();

  useEffect(()=>{
    if (document.documentElement.scrollTop > 200) {
@ -102,114 +104,113 @@ function HomePage(){
        <img src={ mainInfo && mainInfo.bannerList && mainInfo.bannerList.split(',')[0]} alt=""/>
        {/* <div className='mainTitle'>{mainInfo && mainInfo.mainTitle}</div> */}
      </div>
-
-      <div className="fixed-menu" style={{ opacity: fixedMenuOpacity }}>
-        <div className="guide-line" style={{ marginTop: `${ active * 56 + 9}px` }}><div></div><div></div></div>
-        <div>
+      { year && year === "2023" && <>
+        <div className="fixed-menu" style={{ opacity: fixedMenuOpacity }}>
+          <div className="guide-line" style={{ marginTop: `${ active * 56 + 9}px` }}><div></div><div></div></div>
+          <div>
+            {
+              homePage && homePage.length > 0 && homePage.map((item, key) => {
+                return (
+                  <div key={key} 
+                    className={`${matchItem( key ) ? 'menu-item menu-item-active' : 'menu-item'}`}
+                  >
+                    <a onClick={() => { scrollToAnchor(item.id) }}>{ item.title }</a>
+                  </div>
+                )
+              })
+            }
+          </div>
+        </div>
+        <div className="introduction" style={{ opacity: introductionOpacity }}>
+          <div className="module-header">
+            <img src={ titleIcon } alt="" />
+            <div className="title">
+              <span>大会介绍</span>
+              <span>INTRODUCTION TO THE CONFERENCE</span>
+            </div>
+          </div>
+          <div className="intro-content task-hide-6" dangerouslySetInnerHTML={{
+            __html: mainInfo.introductionContent
+          }}>
+            {/* { mainInfo.introductionContent } */}
+          </div>
+          <ul className="menu">
          {
            homePage && homePage.length > 0 && homePage.map((item, key) => {
              return (
-                <div key={key} 
-                  className={`${matchItem( key ) ? 'menu-item menu-item-active' : 'menu-item'}`}
+                <li key={key} 
+                  className={`${matchItem(item.id) ? 'menu-item menu-item-active' : 'menu-item'}`}
+                  // onMouseOver={ () => { this.setState( {showSubMenu: key }) } }
+                  // onMouseOut={ () => { this.setState( {showSubMenu: -1 }) } }
                >
                  <a onClick={() => { scrollToAnchor(item.id) }}>{ item.title }</a>
-                </div>
+                </li>
              )
            })
          }
+          </ul>
        </div>
-      </div>
-      { !isCurrent && <>
-      <div className="introduction" style={{ opacity: introductionOpacity }}>
-        <div className="module-header">
-          <img src={ titleIcon } alt="" />
-          <div className="title">
-            <span>大会介绍</span>
-            <span>INTRODUCTION TO THE CONFERENCE</span>
+        <MeetingAgenda></MeetingAgenda>
+        <ConferenceGuide></ConferenceGuide>
+        <div className="back-img-4">
+          <Member></Member>
+          <div className="partner wrapper" id="partner">
+            <div className="module-header">
+              <img src={ titleIcon } alt="" />
+              <div className="title">
+                <span>合作伙伴</span>
+                <span>PARTNERS</span>
+              </div>
+            </div>
+              {
+                show ?
+                <div className="partner-content">
+                  {
+                    partner.map((e, k) => {
+                      return (
+                        e.zonePartnersList.length > 0 ?
+                        <div className="partner-type" key={ k }>
+                          <div className="type-title">
+                            <img src={ greenRight } alt="" className="title-icon"/>
+                            <span>{ e.typeName }</span>
+                            {/* <div className="device"></div> */}
+                          </div>
+                          <div className="type-content">
+                            {
+                              e.zonePartnersList.map((i, subK) => {
+                                return <a key={ subK } href={ i.link } target="_blank">
+                                  <div>
+                                    <img src={ i.logo } alt=""/>
+                                  </div>
+                                </a>
+                              })
+                            }
+                          </div>
+                        </div>
+                        :''
+                      )
+                    })
+                  }
+                </div>:
+                <img className="empty" src={ empty } alt="" />
+              }
+              {/* <div className="partner-type">
+                <div className="type-title">
+                  <img src={ greenRight } alt="" className="title-icon"/>
+                  <span>主办单位</span>
+                  <div className="device"></div>
+                </div>
+                <div className="type-content">
+                  {
+                    [1,2,3].map((i, k) => {
+                      return <img src="http://fpoimg.com/160x40" alt="" key={ k }/>
+                    })
+                  }
+                </div>
+              </div> */}
+              <div></div>
          </div>
        </div>
-        <div className="intro-content task-hide-6" dangerouslySetInnerHTML={{
-          __html: mainInfo.introductionContent
-        }}>
-          {/* { mainInfo.introductionContent } */}
-        </div>
-        <ul className="menu">
-        {
-          homePage && homePage.length > 0 && homePage.map((item, key) => {
-            return (
-              <li key={key} 
-                className={`${matchItem(item.id) ? 'menu-item menu-item-active' : 'menu-item'}`}
-                // onMouseOver={ () => { this.setState( {showSubMenu: key }) } }
-                // onMouseOut={ () => { this.setState( {showSubMenu: -1 }) } }
-              >
-                <a onClick={() => { scrollToAnchor(item.id) }}>{ item.title }</a>
-              </li>
-            )
-          })
-        }
-        </ul>
-      </div>
-      <MeetingAgenda></MeetingAgenda>
-      <ConferenceGuide></ConferenceGuide>
-      <div className="back-img-4">
-      <Member></Member>
-      <div className="partner wrapper" id="partner">
-        <div className="module-header">
-          <img src={ titleIcon } alt="" />
-          <div className="title">
-            <span>合作伙伴</span>
-            <span>PARTNERS</span>
-          </div>
-        </div>
-          {
-            show ?
-            <div className="partner-content">
-              {
-                partner.map((e, k) => {
-                  return (
-                    e.zonePartnersList.length > 0 ?
-                    <div className="partner-type" key={ k }>
-                      <div className="type-title">
-                        <img src={ greenRight } alt="" className="title-icon"/>
-                        <span>{ e.typeName }</span>
-                        {/* <div className="device"></div> */}
-                      </div>
-                      <div className="type-content">
-                        {
-                          e.zonePartnersList.map((i, subK) => {
-                            return <a key={ subK } href={ i.link } target="_blank">
-                              <div>
-                                <img src={ i.logo } alt=""/>
-                              </div>
-                            </a>
-                          })
-                        }
-                      </div>
-                    </div>
-                    :''
-                  )
-                })
-              }
-            </div>:
-            <img className="empty" src={ empty } alt="" />
-          }
-          {/* <div className="partner-type">
-            <div className="type-title">
-              <img src={ greenRight } alt="" className="title-icon"/>
-              <span>主办单位</span>
-              <div className="device"></div>
-            </div>
-            <div className="type-content">
-              {
-                [1,2,3].map((i, k) => {
-                  return <img src="http://fpoimg.com/160x40" alt="" key={ k }/>
-                })
-              }
-            </div>
-          </div> */}
-          <div></div>
-      </div>
-      </div>
      </>
      }
    </div>
--- a/src/pages/homePage/index.less
+++ b/src/pages/homePage/index.less
@ -535,4 +535,4 @@
 }
 .ant-carousel .slick-dots-bottom {
  bottom: -10px;
-}
+}
--- a/src/pages/information/index.less
+++ b/src/pages/information/index.less
@ -134,7 +134,7 @@
    }
  }
  .detail-info{
-    background-color:#fefefe;
+    background-color:#f8f9ff;
    border-radius:4px;
    box-shadow:0px 0px 15px rgba(30, 47, 162, 0.06);
    padding:30px 35px 50px;
--- a/src/pages/meetingInfos/detail.jsx
+++ b/src/pages/meetingInfos/detail.jsx
@ -0,0 +1,70 @@
+import './index.less'
+import '../home/index.less'
+import RenderHtml from '../../components/renderHtml'
+import { useLocation, useParams } from 'umi';
+import { Base64 } from 'js-base64';
+import { Breadcrumb , Divider } from 'antd';
+import views from 'img/views.png'
+import { useEffect } from 'react';
+import { getDocDetail } from '../../utils/request/api'
+import { useState } from 'react';
+import { defaultPage } from '../../constants/info'
+
+
+function Detail() {
+  const location = useLocation();
+  const { id } = location.pathname.includes('information') ? useParams() : { id: defaultPage[location.pathname] };
+  const [ detail, setDetail ] = useState({});
+  const [ cmsDir , setCmsDir ] = useState(undefined);
+  const [ content , setContent]=useState(undefined);
+
+  useEffect(()=>{
+    getDetail();
+  },[id])
+
+  const getDetail = () => {
+    getDocDetail(id).then(res => {
+      setDetail(res.data);
+      setCmsDir(res.data.cmsDir);
+      setContent(Base64.decode(res.data.content));
+    })
+  }
+
+
+
+  return  <div className="meetingTwentyFour pubBox">
+    <div className='topBanner'></div>
+    {
+      detail && 
+      <div className="detail-content contentBox">
+        {
+          location.pathname.includes('information') && <Breadcrumb separator=">">
+            { cmsDir && <Breadcrumb.Item href="/information">{ cmsDir.name }</Breadcrumb.Item> }
+            <Breadcrumb.Item>正文</Breadcrumb.Item>
+          </Breadcrumb>
+        }
+        <div className="detail-info">
+          {
+            location.pathname.includes('information') && <>
+              <div className="info-text-main">
+                <p className="info-name">{ detail.name }</p>
+                <ul className="info-ul-value">
+                  { cmsDir && <li>发布于{ cmsDir.createdAt }</li> }
+                  { detail.visits && <li><img src={ views } alt="" /><span>浏览数</span>{ detail.visits }</li> }
+                </ul>
+              </div>
+              <Divider dashed={true}	/>
+            </>
+          }
+          {
+            content ?
+            <RenderHtml className="informations_detail imageLayerParent" value={ content } url={ location } />
+            :
+            <span>暂无详情~</span>
+          }
+        </div>
+      </div>
+    }
+  </div>
+}
+export default Detail
--- a/src/pages/meetingInfos/index.jsx
+++ b/src/pages/meetingInfos/index.jsx
@ -0,0 +1,113 @@
+import './index.less'
+import '../home/index.less'
+import { Spin, Divider } from 'antd';
+import { useState , useEffect } from 'react';
+import { information2024 } from '../../constants/info';
+import { getDocList } from '../../utils/request/api'
+import empty from 'img/empty.png'
+import { useModel } from 'umi';
+import { Link } from 'umi';
+
+function Information() {
+  const [ isSpin , setIsSpin ] = useState(false);
+  const [ anchorName , setAnchorName ] = useState("forum");
+  const [ informationList , setInformationList ] = useState([]);
+  const { dirList } = useModel('defaultConfig')
+
+  useEffect(()=>{
+    if ( JSON.stringify(dirList) !== '{}' ) {
+      getAllLists();
+    }
+  },[dirList])
+
+  const getAllLists = () => {
+    setIsSpin(true);
+    const requestList = [];
+    information2024.category.map(e => {
+      let title = e.title==="最新动态" ? "大会论坛" : e.title;
+      dirList[title] && requestList.push(getList(dirList[title], e.anchor)) 
+    })
+    Promise.all(requestList).then(res => {
+      let totalList = {}
+      res.map(e => {
+        totalList[e.name] = e.list
+      })
+      setInformationList(totalList)
+      setIsSpin(false)
+    })
+  }
+
+  const getList = (id, name) => {
+    return new Promise((resolve, reject) => {
+      getDocList(id).then(res => {
+        const list = res.rows
+        list.forEach(e => {
+          if (e.publishTime) {
+            let time = e.publishTime.split('/');
+            e.date1 = `${time[0]}年${time[1]}月`;
+            e.date2 = `${time[2]}日`;
+          } else {
+            e.date1 = e.date2 = '-'
+          }
+        })
+        resolve({ name, list: list });
+      })
+    })
+  }
+
+  const scrollToAnchor = (anchorName) => {
+    if (anchorName) {
+      setAnchorName(anchorName)
+      let anchorElement = document.getElementById(anchorName);
+      if(anchorElement) { anchorElement.scrollIntoView({block: 'start', behavior: 'smooth'}); }
+    }
+  }
+
+  return <div className="content meetingTwentyFour">
+    <div className="anchorHeader">
+      {
+        information2024.category && 
+        information2024.category.map((e, k) => {
+          return <>
+            <div key={ k } onClick={() => { scrollToAnchor(e.anchor) }} className={`tab-item ${anchorName === e.anchor ?"active":""}`}>{ e.title }</div>
+            { k<information2024.category.length-1 && <span>/</span>}
+          </>
+        })
+      }
+    </div>
+    <Spin spinning={isSpin}>
+      <div className='meetingInfos'>
+      {
+        information2024.category.map((e) => {
+          return <div key={ e.anchor }>
+            <div className="anchor"  id={ e.anchor }></div>
+            <div className='titles'>
+                <span className='name'>{ e.title }</span>
+                <span className='subName'>{e.eng.toUpperCase()}</span>
+            </div>
+            <div className="content-wrapper">
+              {
+                informationList[e.anchor] && informationList[e.anchor].length > 0 ? informationList[e.anchor].map(( e, k ) => {
+                  return <div className="content-item" key={ k }>
+                    <div className='leftDate'>
+                      <span>{ e.date2 }</span>
+                      <span>{ e.date1 }</span>
+                    </div>
+                    <div className="rightInfos">
+                      <p  className="rightTitle task-hide"><Link to={ `/information/detail/${ e.id }` }>{ e.name }</Link></p>
+                      <p className="rightSubTitle task-hide-2">{ e.summary }</p>
+                    </div>
+                  </div>
+                }):
+                <img className="empty" src={ empty } alt="" />
+              }
+            </div>
+          </div>
+        })
+      }
+      </div>
+    </Spin>
+  </div>
+}
+
+export default Information
--- a/src/pages/meetingInfos/index.less
+++ b/src/pages/meetingInfos/index.less
@ -0,0 +1,118 @@
+.meetingInfos{
+  background: #F8F9FF;
+  border-radius: 18px 18px 18px 18px;
+  border: 3px solid #FFFFFF;
+  width: 1200px;
+  margin:0px auto;
+  .content-wrapper{
+    padding:0px 30px;
+    .content-item{
+      display: flex;
+      padding:20px 0px;
+      border-bottom: 1px solid rgba(101,99,120,0.21);
+      margin:16px 30px 16px 0px;
+      position: relative;
+      &:hover .rightInfos .rightTitle,a:hover{
+        color: #0116D4;
+      }
+      &::after{
+        content: "";
+        position: absolute;
+        left: 0px;
+        bottom: -1px;
+        width: 0px;
+        background-color: #0116D4;
+        height: 1px;
+        transition: 0.6s;
+      }
+      &:hover::after{
+        width: 100%;
+      }
+      .leftDate{
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-right: 12px;
+        font-weight: 400;
+        font-size: 14px;
+        color: #696874;
+        width: 95px;
+        border-right: 1px solid rgba(101,99,120,0.21);
+        span{
+          &:first-child{
+            font-weight: 800;
+            font-size: 22px;
+            color: #0116D4;
+            margin-bottom: 16px;
+          }
+        }
+      }
+      .rightInfos{
+        flex:1;
+        .rightTitle{
+          font-weight: bold;
+          font-size: 17px;
+          color: #191919;
+          margin-bottom: 14px;
+          cursor: pointer;
+        }
+        .rightSubTitle{
+          font-weight: 400;
+          font-size: 15px;
+          color: #696874;
+          line-height: 26px;
+        }
+      }
+    }
+  }
+}
+
+//------------详情
+.detail-content{
+  padding:30px;
+  .markdown-body{
+    background-color: #F8F9FF;
+  }
+  nav[class~="ant-breadcrumb"]{
+    margin-bottom: 30px;
+  }
+  a[class~="ant-breadcrumb-link"]:hover{
+    background-color: unset;
+  }
+  a[class~="ant-breadcrumb-link"]{
+    color: rgba(1, 22, 212, 1);
+  }
+  .info-text-main{
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    .info-name{
+      font-family: PingFang SC, PingFang SC;
+      font-weight: bold;
+      font-size: 20px;
+      color: #191919;
+      letter-spacing: 2px;
+    }
+    .info-ul-value{
+      display: flex;
+      margin:20px 0px 0px;
+      align-items: center;
+      li{
+        padding:0px 25px;
+        font-weight: 400;
+        font-size: 14px;
+        color: #4C5876;
+        display: flex;
+        align-items: center;
+        span{
+          margin:0px 3px;
+        }
+        img{
+          margin-top: 3px;
+        }
+      }
+    }
+  }
+}
--- a/src/pages/organization/index.jsx
+++ b/src/pages/organization/index.jsx
@ -1,4 +1,5 @@
-import './index.less'
+import './index.less';
+import '../home/index.less';
 import { Spin } from 'antd';
 import { useState , useEffect } from 'react';
 import MemberItem from '../../components/memberitem'
@ -23,17 +24,16 @@ function Organization() {
  }


-  return <div className="organization">
-    <div className="back-img"></div>
+  return <div className="organization meetingTwentyFour">
+    {/* <div className="back-img"></div> */}
    <Spin spinning={isSpin}>
      {
        organization && organization.length > 0 && organization.map((i, k) => {
          if (!hidenMemberType.includes(i.typeName)) {
            return <div className="module" key={ k }>
-              <div className="module-title">
-                <img src={ arraw } alt="" />
-                <span>{ i.typeName }</span>
-                <img src={ arraw } alt="" />
+              <div className='titles'>
+                <span className='name'>{ i.typeName }</span>
+                <span className='subName'>{'Special Agenda'.toUpperCase()}</span>
              </div>
              <p className="module-desc">{ i.typeIntroduction }</p>
              {
--- a/src/utils/request/api.js
+++ b/src/utils/request/api.js
@ -109,4 +109,26 @@ export function getDirList(){
    url:`/api/cms/doc/open/zone/${getConfig().zoneId}/dirList`,
    method: 'get',
  })
-}
+}
+
+/**
+ * 获取大会动态(专区的新闻动态)
+ * @returns 
+ */
+export function getHomeDocList(id,params){
+  return http({
+    url:`/api/cms/doc/open/dir/${id}/docList`,
+    method: 'get',
+    params
+  })
+}
+/**
+ * 获取专区论坛
+ * @returns 
+ */
+export function getFroumItem(id){
+  return http({
+    url:`/api/cms/doc/open/${id}`,
+    method: 'get',
+  })
+}
--- a/src/utils/util.js
+++ b/src/utils/util.js
@ -21,6 +21,6 @@ export function extractYear(url) {
 }

 export function getConfig() {
-    const year = extractYear(window.location.hostname)
+    const year = extractYear(window.location.pathname)
    return config[year]
 }