diff --git a/jeecgboot-vue3/src/assets/images/image.png b/jeecgboot-vue3/src/assets/images/image.png
new file mode 100644
index 0000000..ea58ae3
Binary files /dev/null and b/jeecgboot-vue3/src/assets/images/image.png differ
diff --git a/jeecgboot-vue3/src/assets/images/image1.png b/jeecgboot-vue3/src/assets/images/image1.png
new file mode 100644
index 0000000..c8d7200
Binary files /dev/null and b/jeecgboot-vue3/src/assets/images/image1.png differ
diff --git a/jeecgboot-vue3/src/assets/images/image11.png b/jeecgboot-vue3/src/assets/images/image11.png
new file mode 100644
index 0000000..b53f3e9
Binary files /dev/null and b/jeecgboot-vue3/src/assets/images/image11.png differ
diff --git a/jeecgboot-vue3/src/router/helper/mainOut copy.ts b/jeecgboot-vue3/src/router/helper/mainOut copy.ts
new file mode 100644
index 0000000..27b62fc
--- /dev/null
+++ b/jeecgboot-vue3/src/router/helper/mainOut copy.ts	
@@ -0,0 +1,75 @@
+/**
+The routing of this file will not show the layout.
+It is an independent new page.
+the contents of the file still need to log in to access
+ */
+import type { AppRouteModule } from '/@/router/types';
+
+// test
+// http:ip:port/main-out
+export const mainOutRoutes: AppRouteModule[] = [
+  {
+    path: '/main-out',
+    name: 'MainOut',
+    component: () => import('/@/views/demo/main-out/index.vue'),
+    meta: {
+      title: 'MainOut',
+      ignoreAuth: true,
+    },
+  },
+  // ======
+  {
+    path: '/main-home',
+    name: 'MainOut',
+    component: () => import('/@/views/demo/main-home/index.vue'),
+    meta: {
+      title: 'MainHome',
+      ignoreAuth: true,
+    },
+    redirect: '/main-home/HomePage',
+    children: [
+      {
+        path: '/main-home/HomePage',
+        name: 'HomePage',
+        component: () => import('/@/views/demo/main-home/components/homePage/index.vue'),
+        meta: {
+          title: 'HomePage',
+          ignoreAuth: true,
+        },
+      },
+      {
+        path: '/main-home/MatchEvaluation',
+        name: 'MatchEvaluation',
+        component: () => import('/@/views/demo/main-home/components/matchEvaluation/index.vue'),
+        meta: {
+          title: 'MatchEvaluation',
+          ignoreAuth: true,
+        },
+        redirect: '/main-home/MatchEvaluation/MCh',
+        children: [
+          {
+            path: '/main-home/MatchEvaluation/MCh',
+            name: 'MCh',
+            component: () => import('/@/views/demo/main-home/components/matchEvaluation/components/MCh.vue'),
+            meta: {
+              title: 'MCh',
+              ignoreAuth: true,
+            },
+          },
+          {
+            path: '/main-home/MatchEvaluation/LesserCh/:id',
+            name: 'LesserCh',
+            component: () => import('/@/views/demo/main-home/components/matchEvaluation/components/LesserCh.vue'),
+            meta: {
+              title: 'LesserCh',
+              ignoreAuth: true,
+            },
+          },
+        ]
+      },
+
+    ],
+  }
+];
+
+export const mainOutRouteNames = mainOutRoutes.map((item) => item.name);
diff --git a/jeecgboot-vue3/src/router/helper/mainOut.ts b/jeecgboot-vue3/src/router/helper/mainOut.ts
index 27b62fc..c4e8005 100644
--- a/jeecgboot-vue3/src/router/helper/mainOut.ts
+++ b/jeecgboot-vue3/src/router/helper/mainOut.ts
@@ -33,43 +33,75 @@ export const mainOutRoutes: AppRouteModule[] = [
         name: 'HomePage',
         component: () => import('/@/views/demo/main-home/components/homePage/index.vue'),
         meta: {
-          title: 'HomePage',
+          title: '首页',
           ignoreAuth: true,
         },
       },
       {
-        path: '/main-home/MatchEvaluation',
-        name: 'MatchEvaluation',
-        component: () => import('/@/views/demo/main-home/components/matchEvaluation/index.vue'),
+        path: '/main-home/instrumentSharing',
+        name: 'InstrumentSharing',
+        component: () => import('/@/views/demo/main-home/components/instrumentSharing/index.vue'),
         meta: {
-          title: 'MatchEvaluation',
+          title: '仪器共享',
+          ignoreAuth: true,
+        },
+      },
+      {
+        path: '/main-home/projectDeclaration',
+        name: 'ProjectDeclaration',
+        component: () => import('/@/views/demo/main-home/components/projectDeclaration/index.vue'),
+        meta: {
+          title: '项目申报',
+          ignoreAuth: true,
+        },
+      },
+      {
+        path: '/main-home/expertManagement',
+        name: 'ExpertManagement',
+        component: () => import('/@/views/demo/main-home/components/expertManagement/index.vue'),
+        meta: {
+          title: '专家管理',
+          ignoreAuth: true,
+        },
+      },
+      {
+        path: '/main-home/newsList',
+        name: 'NewsList',
+        component: () => import('/@/views/demo/main-home/components/newsList/index.vue'),
+        meta: {
+          title: '新闻列表',
+          ignoreAuth: true,
+        },
+      },
+      {
+        path: '/main-home/newsInfo',
+        name: 'NewsIndo',
+        component: () => import('/@/views/demo/main-home/components/newsInFo/index.vue'),
+        meta: {
+          title: '新闻详情',
+          ignoreAuth: true,
+        },
+      },
+      {
+        path: '/main-home/columnManagement',
+        name: 'ColumnManagement',
+        component: () => import('/@/views/demo/main-home/components/columnManagement/index.vue'),
+        meta: {
+          title: '栏目管理',
+          ignoreAuth: true,
+        },
+      },
+      {
+        path: '/main-home/articleManagement',
+        name: 'ArticleManagement',
+        component: () => import('/@/views/demo/main-home/components/articleManagement/index.vue'),
+        meta: {
+          title: '文章管理',
           ignoreAuth: true,
         },
-        redirect: '/main-home/MatchEvaluation/MCh',
-        children: [
-          {
-            path: '/main-home/MatchEvaluation/MCh',
-            name: 'MCh',
-            component: () => import('/@/views/demo/main-home/components/matchEvaluation/components/MCh.vue'),
-            meta: {
-              title: 'MCh',
-              ignoreAuth: true,
-            },
-          },
-          {
-            path: '/main-home/MatchEvaluation/LesserCh/:id',
-            name: 'LesserCh',
-            component: () => import('/@/views/demo/main-home/components/matchEvaluation/components/LesserCh.vue'),
-            meta: {
-              title: 'LesserCh',
-              ignoreAuth: true,
-            },
-          },
-        ]
       },
-
     ],
-  }
+  },
 ];
 
 export const mainOutRouteNames = mainOutRoutes.map((item) => item.name);
diff --git a/jeecgboot-vue3/src/views/demo/main-home/components/NewsList/index.vue b/jeecgboot-vue3/src/views/demo/main-home/components/NewsList/index.vue
new file mode 100644
index 0000000..4ccf750
--- /dev/null
+++ b/jeecgboot-vue3/src/views/demo/main-home/components/NewsList/index.vue
@@ -0,0 +1,129 @@
+<template>
+  <div class="container">
+    <div class="news-list">
+      <div class="item" v-for="i in 10" :key="i">
+        <div class="left"><div class="year">2024-10</div><div class="day">10</div></div>
+        <div class="right">
+          <div class="title">新闻标题</div>
+          <div class="editor">编辑 | 无糖</div>
+          <div class="description"
+            >小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本</div
+          >
+          <div class="get-info">查看详情</div>
+        </div>
+      </div>
+    </div>
+    <!-- 栏目 -->
+    <div class="column-list">
+      <div class="title">栏目列表</div>
+      <div class="list">
+        <div class="item">全部</div>
+        <div class="item">项目申报</div>
+        <div class="item">新闻列表</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped lang="less">
+  .container {
+    position: relative;
+    width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    margin-top: 50px;
+    .news-list {
+     width: calc(1200px - 415px);
+     margin-right: 30px;
+
+      .item {
+        display: flex;
+        width: 100%;
+        border-bottom: 2px solid #CCC;
+        padding-bottom: 45px;
+        margin-top: 40px;
+        .left {
+          width: 100px;
+          height: 100px;
+          border: 1px solid #ccc;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          .year {
+            font-size: 16px;
+            color: #333;
+          }
+          .day {
+            font-size: 40px;
+            font-weight: 600;
+            color: #333;
+          }
+        }
+        .right {
+          margin-left: 30px;
+          .title {
+            font-size: 22px;
+            color: #000;
+            font-weight: 600;
+          }
+
+          .editor {
+            position: relative;
+            font-size: 14px;
+            color: #999;
+            font-size: 14px;
+            margin-top: 10px;
+          }
+          .editor::before {
+            content: '';
+            display: block;
+            position: absolute;
+            width: 53px;
+            bottom: -15px;
+            height: 4px;
+            background-color: #d9d9d9;
+          }
+          .description {
+            margin-top: 30px;
+            width: 660px;
+          }
+          .get-info {
+            color: #fff;
+            width: 132px;
+            height: 40px;
+            text-align: center;
+            line-height: 40px;
+            margin-top: 30px;
+            background-color: #002e97;
+          }
+        }
+      }
+    }
+    .column-list {
+      position: sticky;
+      top: 0;
+      width: 385px;
+      background-color: #fff;
+      height: 755px;
+      padding: 30px;
+      .title{
+        font-size: 20px;
+        font-weight: 600;
+        color: #555;
+      }
+      .list{
+        .item{
+          font-size: 16px;
+          color: #555;
+          height: 50px;
+          line-height: 50px;
+          border-bottom: 1px solid #D9D9D9;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+</style>
diff --git a/jeecgboot-vue3/src/views/demo/main-home/components/articleManagement/index.vue b/jeecgboot-vue3/src/views/demo/main-home/components/articleManagement/index.vue
new file mode 100644
index 0000000..1a607ba
--- /dev/null
+++ b/jeecgboot-vue3/src/views/demo/main-home/components/articleManagement/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="">
+    文章管理
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, nextTick, watch, onMounted } from "vue"
+import { useRouter, useRoute } from "vue-router"
+
+const router = useRouter()
+const route = useRoute()
+
+const total = ref(0)
+  
+</script>
+
+<style scoped lang="scss">
+  
+</style>
\ No newline at end of file
diff --git a/jeecgboot-vue3/src/views/demo/main-home/components/columnManagement/index.vue b/jeecgboot-vue3/src/views/demo/main-home/components/columnManagement/index.vue
new file mode 100644
index 0000000..90f879b
--- /dev/null
+++ b/jeecgboot-vue3/src/views/demo/main-home/components/columnManagement/index.vue
@@ -0,0 +1,20 @@
+<template>
+  <div class="">
+    栏目管理
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, nextTick, watch, onMounted } from "vue"
+import { useRouter, useRoute } from "vue-router"
+
+const router = useRouter()
+const route = useRoute()
+
+const total = ref(0)
+  
+</script>
+
+<style scoped lang="scss">
+  
+</style>
\ No newline at end of file
diff --git a/jeecgboot-vue3/src/views/demo/main-home/components/expertManagement/index.vue b/jeecgboot-vue3/src/views/demo/main-home/components/expertManagement/index.vue
new file mode 100644
index 0000000..5c03218
--- /dev/null
+++ b/jeecgboot-vue3/src/views/demo/main-home/components/expertManagement/index.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="container">
+    <div class="filter">
+      <div :class="activeIndex === index ? 'item avtive' : 'item'" @click="activeIndex = index" v-for="(i, index) in filterList" :key="i">{{
+        i
+      }}</div>
+    </div>
+    <div class="user-list">
+      <div class="item" v-for="i in 10" :key="i">
+        <div class="avater"></div>
+        <div class="name">张三</div>
+        <div class="description">专家介绍</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  const activeIndex = ref(0);
+  const filterList = ref(['全部', '科技学科领域', '高新技术', '化学精密', '其他筛选']);
+</script>
+
+<style scoped lang="less">
+  .container {
+    width: 1200px;
+    margin: 0 auto;
+    .filter {
+      display: flex;
+      justify-content: center;
+      margin: 40px 0;
+      .item {
+        width: 136px;
+        height: 40px;
+        text-align: center;
+        line-height: 40px;
+        border: 1px solid #ccc;
+        margin: 0 20px;
+        cursor: pointer;
+      }
+      .avtive {
+        background-color: #013ebc;
+        color: #fff;
+      }
+    }
+    .user-list {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(100px, 1fr));
+      grid-template-rows: repeat(auto - fill, minmax(50px, 100px));
+      gap: 15px;
+      .item {
+        position: relative;
+        width: 287px;
+        height: 430px;
+        border: 1px solid #013ebc;
+        display: flex;
+        align-items: center;
+        padding: 20px 0;
+        display: flex;
+        flex-direction: column;
+
+        align-items: center;
+        .avater {
+          width: 216px;
+          height: 246px;
+          background-color: #ccc;
+          margin-top: 10px;
+        }
+        .name {
+          font-size: 30px;
+          font-weight: 700;
+          color: #333;
+          margin-top: 30px;
+        }
+        .description {
+          font-size: 20px;
+          color: #555;
+        }
+      }
+      .item::before {
+        content: ' ';
+        position: absolute;
+        top:10px;
+        left: -5px;
+        display: block;
+        width: 25px;
+        height: 6px;
+        background-color: #013ebc;
+      }
+    }
+  }
+</style>
diff --git a/jeecgboot-vue3/src/views/demo/main-home/components/homePage/index.vue b/jeecgboot-vue3/src/views/demo/main-home/components/homePage/index.vue
index f831fa9..4c3b7de 100644
--- a/jeecgboot-vue3/src/views/demo/main-home/components/homePage/index.vue
+++ b/jeecgboot-vue3/src/views/demo/main-home/components/homePage/index.vue
@@ -1,418 +1,377 @@
 <template>
-    <div class="home-page">
-        <div class="main-img-box">
-            <img src="../../../../../assets/images/mainHome/div.png" alt="">
+  <div class="important">
+    <div class="box1">
+      <div class="paper">
+        <div class="fl">
+          <img style="width: 100%; height: 100%" src="../../../../../assets/images/image11.png" alt="" srcset="" />
         </div>
-        <div class="main-content">
-            <!-- 新闻资讯 -->
-            <div class="news-information">
-                <h1>新闻资讯</h1>
-                <div class="nav-news-box">
-                    <div class="nav-item" v-for="item in navNews" :class="{ active: activeNavNew.text === item.text }"
-                        @click="activeNavNew = item" :key="item.text">
-                        <div class="img-box">
-                            <img :src="item.img" alt="">
-                        </div>
-                        <span>{{ item.text }}</span>
-                    </div>
-                </div>
-                <div class="if-item" v-if="activeNavNew.text === navNews[0].text">
-                    <div class="all_">
-                        <div class="left_">
-                            <img src="../../../../../assets/images/mainHome/div.png" alt="">
-                        </div>
-                        <ul class="right_">
-                            <li class=""  v-for="o in data" :key="o.columnId"
-                                @click="$router.push(`/main-home/MatchEvaluation/LesserCh/${o.id}`)">
-                                <span  style="cursor: pointer"  class="le_">{{ o.title}}</span>
-                                <span class="re_">{{o.publishTime}}</span>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="look-more" @click="lookMore(1)">
-                    <span>查看更多>></span>
-                </div>
+        <div class="fr">
+          <ul>
+            <li> 向着航天强国目标勇毅前进————以习近平通知为核心的党中央关心引领探月工程纪实 </li>
+            <li> 在第七个“中国农民丰收节”到来之际，习近平向全国广大农民和工作在“三农”战线上的同志们致以节日... </li>
+            <li>李强会见马来西亚最高元首易卜拉欣</li>
+          </ul>
+        </div>
+      </div>
+      <div class="more">
+        <p>更多</p>
+      </div>
+    </div>
+    <div class="box2">
+      <div class="leftt">
+        <a-carousel arrows style="width: 100%; height: 100%">
+          <template #prevArrow>
+            <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
+              <left-circle-outlined />
             </div>
-
-            <!-- 竞赛导航 -->
-            <div class="race-navigation">
-                <div class="title_">比赛信息</div>
-                <div class="content_">
-                    <div class="card_"  v-for="o in data2" :key="o.columnId"
-                         @click="$router.push(`/main-home/MatchEvaluation/LesserCh/${o.id}`)">
-                        <div class="img-box">
-                            <img :src= "setImageUrl(o.comimg)" alt="">
-                        </div>
-                        <div class="text">
-                          {{ o.title}}
-                        </div>
-                    </div>
-                </div>
-                <div class="look-more" @click="lookMore(2)">查看更多>></div>
-
+          </template>
+          <template #nextArrow>
+            <div class="custom-slick-arrow" style="right: 10px">
+              <right-circle-outlined />
             </div>
-
-            <!-- 研究成果 -->
-            <div class="research-result">
-                <div class="re_title">比赛结果</div>
-                <div class="re_card_box">
-                    <div class="re_card">
-                        <div class="re_card_img_box"  v-for="o in data3" :key="o.columnId"
-                             @click="$router.push(`/main-home/MatchEvaluation/LesserCh/${o.id}`)">
-                            <img style="cursor: pointer"  :src="setImageUrl(o.comimg)" alt="">
-                          <div class="text">
-                            {{ o.title}}
-                          </div>
-                        </div>
-
-                    </div>
+          </template>
+          <div v-for="(item, index) in imageList" :key="index"
+            ><img style="width: 100%; height: 400px" :src="item" alt="" srcset=""
+          /></div> </a-carousel
+      ></div>
+      <div class="rightt">
+        <div class="tell">
+          <div class="fl">通知通告</div>
+        </div>
+        <div class="inner">
+          <ul>
+            <li>省科技厅召开党组会传达学习省管主要领导干部学习贯彻</li>
+            <li>王浩：建设高水平创新型省份 因地制宜大力发展新质生</li>
+            <li>省委第四巡视组省科学技术厅工作动员会议召开</li>
+            <li>省科技厅召开厅系统重点工作交流会</li>
+            <li>省科技厅召开党组(扩大)会总结党纪学习教育工作</li>
+            <li>省科技厅召开党组会传达学习贯彻省委十五届五次全会精神</li>
+            <li>建设高水平创新型省份</li>
+            <li>学习贯彻省委十五届五次全会精神</li>
+            <li>省科技厅召开党组会传达学习省管主要领导干部学习贯彻</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="box3">
+      <img src="../../../../../assets/images/image1.png" alt="" style="width: 100%" />
+    </div>
+    <div class="box4">
+      <div class="inner1">
+        <div class="tell">
+          <div class="fl">通知通告</div>
+        </div>
+        <div class="inner">
+          <ul>
+            <li>省科技厅召开党组会传达学习省管主要领导干部学习贯彻</li>
+            <li>王浩：建设高水平创新型省份 因地制宜大力发展新质生</li>
+            <li>省委第四巡视组省科学技术厅工作动员会议召开</li>
+            <li>省科技厅召开厅系统重点工作交流会</li>
+            <li>省科技厅召开党组(扩大)会总结党纪学习教育工作</li>
+            <li>省科技厅召开党组会传达学习贯彻省委十五届五次全会精</li>
+            <li>建设高水平创新型省份</li>
+            <li>学习贯彻省委十五届五次全会精神</li>
+            <li>省科技厅召开党组会传达学习省管主要领导干部学习贯彻</li>
+          </ul>
+        </div>
+      </div>
+      <div class="inner2">
+        <div class="tell">
+          <div class="fl">通知通告</div>
+        </div>
+        <div class="inner">
+          <ul>
+            <li>省科技厅召开党组会传达学习省管主要领导干部学习贯彻</li>
+            <li>王浩：建设高水平创新型省份 因地制宜大力发展新质生</li>
+            <li>省委第四巡视组省科学技术厅工作动员会议召开</li>
+            <li>省科技厅召开厅系统重点工作交流会</li>
+            <li>省科技厅召开党组(扩大)会总结党纪学习教育工作</li>
+            <li>省科技厅召开党组会传达学习贯彻省委十五届五次全会精神</li>
+            <li>建设高水平创新型省份</li>
+            <li>学习贯彻省委十五届五次全会精神</li>
+            <li>省科技厅召开党组会传达学习省管主要领导干部学习贯彻</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="box5">
+      <img src="../../../../../assets/images/image3.png" alt="" style="width: 100%" />
+    </div>
+    <div class="box6">
+      <div class="share1">
+        <div class="tell">
+          <div class="fl">仪器共享</div>
+        </div>
+        <div class="instrument">
+          <vue3ScrollSeamless class="scroll-wrap" :classOptions="classOptions" :dataList="list">
+            <ul class="ui-wrap">
+              <li class="li-item" v-for="(item, i) of list" :key="i">
+                <div class="instrumentImage">
+                  <img width="100%" src="../../../../../assets/images/image.png" alt="" />
+                  <div class="small">
+                    <h6>数字无线电综合测试仪</h6>
+                    <p>分类：电子测量仪器->通讯测量...</p>
+                    <p>服务次数：0</p>
+                    <p>鹤壁天海电子信息系统有限公司</p>
+                  </div>
                 </div>
-              <div class="look-more" @click="lookMore(3)">查看更多>></div>
-            </div>
+              </li>
+            </ul>
+          </vue3ScrollSeamless>
+        </div>
+      </div>
+      <div class="share2">
+        <div class="a">科研仪器入网</div>
+        <div class="a">仪器信息查询</div>
+        <div class="b">
+          <div class="bb1">技术交流</div>
+          <div class="bb2">数据上报</div>
         </div>
+        <div class="c">在线预约</div>
+      </div>
     </div>
+  </div>
 </template>
 
-<script lang="ts" setup>
-import * as n from './newsImgs'
-import {reactive, ref} from 'vue';
-import { getindexnews ,getindexcomp,getindexaward} from '/@/api/demo/mainHome';
-import  {useRouter} from 'vue-router'
-const router = useRouter()
-const props = defineProps(['navList'])
-const data3 = reactive<any[]>([])
-const data2 = reactive<any[]>([])
-const data = reactive<any[]>([])
-// 获取数据
-function getData() {
-  getindexnews({ }).then(res => {
-    data.length = 0
-    data.push(...res.records as any[])
-
-
-  })
-}
-const setImageUrl = (url:any) => {
-  return import.meta.env.VITE_GLOB_DOMAIN_URL + '/' + url
-}
-function getData2() {
-  getindexcomp({ }).then(res => {
-    data2.length = 0
-    data2.push(...res.records as any[])
-
-    // return this.data2.map(item => ({
-    //   ...item, // 复制原始对象
-    //   fullImageUrl: `${import.meta.env.VITE_GLOB_DOMAIN_URL}${item.comimg}` // 添加 URL 前缀
-    // }));
-  })
-}
-
-function getData3() {
-  getindexaward({ }).then(res => {
-    data3.length = 0
-    data3.push(...res.records as any[])
-  })
-}
-
-getData();
-
-getData2();
-getData3();
-
-
-
-const navNews = [
-    { img: n.Frame, text: '全部' },
-/*    { img: n.Frame1, text: '通知公告' },
-    { img: n.Frame2, text: '赛事咨讯' },
-    { img: n.Frame3, text: '活动速递' },
-    { img: n.Frame4, text: '政策文件' },*/
-]
-const activeNavNew = ref(navNews[0])
-
-function lookMore(i){
-  const item = props.navList[i]
-  router.push(item.path+'?id='+item.id)
-}
+<script setup>
+  import { ref, reactive } from 'vue';
+  import { vue3ScrollSeamless } from 'vue3-scroll-seamless';
+  let list = reactive([1, 2, 3, 4, 5, 6]);
+  const classOptions = {
+    limitMoveNum: 2,
+    direction: 2,
+  };
+  const imageList = ref([
+    'https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0',
+    'https://tse1-mm.cn.bing.net/th/id/OIP-C.DOOxGtkUiW8QevWtAxsRtAHaEK?rs=1&pid=ImgDetMain',
+  ]);
 </script>
 
-<style lang="less" scoped>
-.home-page {
-    .main-img-box {
-        width: 100%;
-        height: 350px;
-
-        img {
-            .img();
-        }
-    }
-
-    .main-content {
-        width: 1220px;
-        margin: auto;
-
-        &>* {
-            width: 100%;
-        }
-
-        .news-information {
-
-            h1 {
-                height: 45px;
-                font-weight: 600;
-                font-size: 34px;
-                color: #333333;
-                line-height: 45px;
-                text-align: center;
-            }
-
-            .nav-news-box {
-                @color: #ED1E26;
-                display: flex;
-                width: 100%;
-                justify-content: space-evenly;
-                align-items: center;
-
-                .nav-item {
-                    display: flex;
-                    align-items: center;
-                    font-weight: 400;
-                    font-size: 22px;
-                    color: #333;
-                    text-align: center;
-                    position: relative;
-                    cursor: pointer;
-
-                    .img-box {
-                      width: 20px;
-                        height: 20px;
-
-                        img {
-                            .img();
-                        }
-                    }
-
-                    &.active {
-                        color: @color;
-
-                        &::after {
-                            content: '';
-                            position: absolute;
-                            left: 0;
-                            bottom: -2px;
-                            width: 100%;
-                            height: 2px;
-                            background-color: @color;
-                        }
-                    }
-                }
-
-            }
-
-            .if-item {
-
-                .all_ {
-                    display: flex;
-                    justify-content: space-between;
-                    width: 100%;
-                    margin-top: 35px;
-
-                    .left_ {
-                        width: 479px;
-                        height: 270px;
-
-                        img {
-                            .img();
-                        }
-                    }
-
-                    .right_ {
-                        width: 740px;
-                        height: 270px;
-                        padding: 0 34px 23px;
-                        background: #F9FBFF;
-
-                        li {
-                            @height: 19px;
-                            display: flex;
-                            justify-content: space-between;
-                            height: @height;
-                            margin: 22px 0;
-
-                            span {
-                                height: @height;
-                                line-height: @height;
-                                font-size: 16px;
-                                .ove_ellipsis();
-                            }
-
-                            span.le_ {
-                                width: 480px;
-                                color: #131313;
-
-                            }
-
-                            span.re_ {
-                                color: rgba(19, 19, 19, 0.46);
-                            }
-                        }
-                    }
-
-                }
-
-            }
-        }
-
-        .race-navigation {
-            margin-top: 50px;
-            height: 603px;
-            padding-bottom: 15px;
-
-            .title_ {
-                width: 136px;
-                height: 45px;
-                font-weight: 600;
-                font-size: 34px;
-                color: #333333;
-                line-height: 45px;
-                text-align: center;
-                margin: auto;
-                margin-bottom: 30px;
-            }
-
-            .content_ {
-                width: 100%;
-                height: 433px;
-                margin-bottom: 40px;
-                display: flex;
-                flex-wrap: wrap;
-                justify-content: space-between;
-
-                .card_ {
-                    width: 290px;
-                    height: 189px;
-
-                    .img-box {
-                      cursor: pointer;
-                        width: 100%;
-                        height: 158px;
-                        margin-bottom: 10px;
-
-                        img {
-                            .img();
-                        }
-                    }
-
-                    .text {
-                        height: 21px;
-                        padding-left: 10px;
-                        font-size: 16px;
-                        color: #333333;
-                        line-height: 21px;
-                        .ove_ellipsis();
-                    }
-                }
-            }
-        }
-
-        .research-result {
-            height: 503px;
-            margin-bottom: 54px;
-
-            .re_title {
-                width: 136px;
-                height: 45px;
-                font-family: PingFang SC, PingFang SC;
-                font-weight: 600;
-                font-size: 34px;
-                color: #333333;
-                line-height: 45px;
-                text-align: center;
-                font-style: normal;
-                text-transform: none;
-                margin: auto;
-                margin-bottom: 31px;
-            }
-
-            .re_card_box {
-                display: flex;
-                justify-content: space-between;
-
-                .re_card {
-                    width: 387px;
-                    height: 428px;
-                    background: #F9FBFF;
-                    border-radius: 0px 0px 0px 0px;
-
-                    .re_card_img_box {
-                        height: 308px;
-                        margin-bottom: 29px;
-
-                        img {
-                            .img();
-                        }
-                    }
-
-                    .fot_text {
-                        width: 88px;
-                        height: 29px;
-                        font-family: Microsoft YaHei, Microsoft YaHei;
-                        font-weight: 400;
-                        font-size: 22px;
-                        color: #333333;
-                        line-height: 29px;
-                        text-align: center;
-                        font-style: normal;
-                        text-transform: none;
-                        margin: auto;
-                        position: relative;
-
-                        &::after {
-                            content: '';
-                            position: absolute;
-                            width: 90px;
-                            height: 2px;
-                            left: -1px;
-                            bottom: -2px;
-                            background-color: #E62129;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-
+<style scoped lang="less">
+  .important {
+    width: 1300px;
+    // height: 1800px;
+    background-color: #e6e6e6;
+    margin: 0px auto;
+    // display: flex;
+    // align-items: center;
+    // justify-content: center;
+  }
+
+  .box1 {
+    position: relative;
+    width: 100%;
+    height: 160px;
+    background-color: #f6f6f6;
+    border-bottom: 2px solid #1b4290;
+  }
 
-.img() {
+  .paper {
+    height: 100%;
+  }
+
+  .paper .fl {
+    width: 110px;
+    float: left;
+    margin-left: 30px;
+    padding-top: 28px;
+  }
+
+  .paper .fr {
+    float: right;
+    padding: 38px 170px 0 0;
+  }
+  .fr ul li {
+    list-style: disc;
+    font-size: 20px;
+    padding-bottom: 12px;
+  }
+  .fr ul li::marker {
+    color: #1b4290;
+  }
+
+  .box1 .more {
+    position: absolute;
+    right: 50px;
+    bottom: 5px;
+    color: #1b4290;
+  }
+
+  .box2 {
+    height: 450px;
+    background-color: #ffffff;
+    position: relative;
+  }
+  .leftt {
+    position: absolute;
+    width: 600px;
+    height: 400px;
+    margin-top: 20px;
+    background-color: #999999;
+  }
+  .rightt {
+    position: absolute;
+    width: 660px;
+    height: 400px;
+    right: 0px;
+    margin-top: 20px;
+  }
+  .tell {
     width: 100%;
+    height: 50px;
+    background-color: #e9f3fd;
+  }
+  .tell .fl {
+    width: 120px;
     height: 100%;
-}
-
-.ove_ellipsis() {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-
-.look-more {
-    width: 136px;
-    height: 40px;
-    margin: auto;
-    background-color: #333;
-    font-size: 16px;
+    line-height: 50px;
+    font-size: 22px;
     color: #fff;
+    background-color: #003cb9;
+    padding-left: 15px;
+  }
+  .inner {
+    height: calc(400px - 50px);
+    margin: 20px 30px;
+    overflow: auto;
+  }
+  .inner ul {
+    height: 100%;
+    padding-left: 23px;
+  }
+  .inner ul li {
+    font-size: 22px;
+    list-style-type: disc;
+    padding-bottom: 14px;
+    color: #404040;
+  }
+  .inner ul li::marker {
+    color: rgb(173, 89, 89);
+  }
+  .box3 {
+    padding-top: 30px;
+    height: 200px;
+    width: 100%;
+    background-color: #d3e8fe;
+  }
+  .box4 {
+    height: 450px;
+    background-color: #ffffff;
+    position: relative;
+    padding-top: 30px;
+  }
+  .inner1 {
+    width: 630px;
+    height: 400px;
+
+    position: absolute;
+    left: 0px;
+  }
+  .inner2 {
+    width: 670px;
+    height: 400px;
+
+    position: absolute;
+    right: 0px;
+  }
+
+  .box5 {
+    height: 134px;
+  }
+  .box6 {
+    padding: 20px 0;
+    position: relative;
+    width: 100%;
+    height: 405px;
+    background-color: #fff;
+  }
+  .share1 {
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    width: 900px;
+    height: 370px;
+    background-color: #fff;
+  }
+  .instrument {
+    display: flex;
+  }
+  .instrument li {
+    display: inline-block;
+    margin: 23px 1px;
+    width: 231px;
+    height: 283px;
+    border: 1px solid #ddd;
+    margin-right: 20px;
+  }
+  .small {
+    padding: 15px;
+  }
+  .small h6 {
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+  .small p {
+    font-size: 12px;
+    margin-bottom: 5px;
+    color: #666666;
+  }
+  .share2 {
+    position: absolute;
+    right: 0;
+    width: 400px;
+    height: 370px;
+  }
+  .a {
+    width: 100%;
+    height: 65px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 50px;
+    background-color: #dce4f7;
+    margin-bottom: 10px;
+  }
+  .b {
+    position: relative;
+    width: 100%;
+    height: 65px;
+  }
+  .bb1 {
+    position: absolute;
+    left: 0;
+    width: 196px;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #dce4f7;
+  }
+  .bb2 {
+    position: absolute;
+    right: 0;
+    width: 196px;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #dce4f7;
+  }
+  .c {
+    width: 100%;
+    height: 130px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    line-height: 50px;
+    background-color: #003cba;
+    margin-top: 10px;
+  }
+
+  :deep(.slick-slide) {
     text-align: center;
-    line-height: 40px;
-    cursor: pointer;
-    transition: all .3s;
-
-    &:hover {
-        transform: translate(0, -2px);
-        box-shadow: 1px 3px 5px 0px #ccc;
-    }
-}
+    height: 400px;
+    line-height: 160px;
+    overflow: hidden;
+  }
 </style>
diff --git a/jeecgboot-vue3/src/views/demo/main-home/components/instrumentSharing/index.vue b/jeecgboot-vue3/src/views/demo/main-home/components/instrumentSharing/index.vue
new file mode 100644
index 0000000..b3f05ad
--- /dev/null
+++ b/jeecgboot-vue3/src/views/demo/main-home/components/instrumentSharing/index.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="contianer">
+    <div class="classify">
+      <div class="item">
+        <div class="left">机构组织</div>
+        <div class="right">驻马店实验室(共407台)</div>
+      </div>
+      <div class="item">
+        <div class="left">机构组织</div>
+        <div class="right"><div v-for="i in 15" :key="i">黄淮创新中心</div></div>
+      </div>
+      <div class="item">
+        <div class="left">机构组织</div>
+        <div class="right">驻马店实验室(共407台)</div>
+      </div>
+    </div>
+    <div class="list">
+      <div class="top">
+        <div class="left">已筛选条件</div>
+        <div class="right">2</div>
+      </div>
+      <div class="content">
+        <div class="item" v-for="i in 10" :key="i">
+          <div class="left"></div>
+          <div class="right">
+            <div class="info">
+              <div class="title">组合型四极杆轨道离子阱质谱仪 Q Exactive Plus Hybrid Quadrupole-Orbitrap Mass Spectrometer</div>
+              <div class="info-list">
+                <ul>
+                  <li>
+                    <div class="label">状态</div>
+                    <div class="count">使用种</div>
+                  </li>
+                  <li>
+                    <div class="label">型号</div>
+                    <div class="count">Orbitrap Exploris 480</div>
+                  </li>
+                  <li>
+                    <div class="label">管理员</div>
+                    <div class="count">赵公正、郑婷、张美莹、孙正、李娥</div>
+                  </li>
+                  <li>
+                    <div class="label">所在地点</div>
+                    <div class="count">Emphasis → 高科创新中心B栋116</div>
+                  </li>
+                  <li>查看预约资源</li>
+                </ul>
+              </div>
+            </div>
+            <div class="btn">
+              <div class="booking">机时预约</div>
+              <div class="show-info">查看详情</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped lang="less">
+  .contianer {
+    width: 1200px;
+    margin: 0 auto;
+    .classify {
+      width: 100%;
+      background-color: #fff;
+      .item {
+        display: flex;
+        min-height: 48px;
+
+        .left {
+          width: 120px;
+          background-color: #f1f1f1;
+          line-height: 48px;
+          padding-left: 20px;
+        }
+        .right {
+          flex: 1;
+          line-height: 48px;
+          padding: 0 20px;
+          display: flex;
+          flex-wrap: wrap;
+          div {
+            margin-right: 20px;
+          }
+        }
+      }
+      .item:not(:last-child) {
+        border-bottom: 1px dashed #ccc;
+      }
+    }
+    .list {
+      margin-top: 30px;
+      background-color: #fff;
+      padding: 20px;
+      .top {
+        display: flex;
+        justify-content: space-between;
+      }
+      .content {
+        padding: 20px;
+        .item {
+          display: flex;
+          margin-bottom: 20px;
+          .left {
+            width: 180px;
+            height: 164px;
+            background-color: #aaa;
+          }
+          .right {
+            display: flex;
+            margin-left: 20px;
+            .info {
+              // display: flex;
+              .title {
+                width: 680px;
+                font-size: 18px;
+                color: #333333;
+              }
+              .info-list {
+                font-size: 12px;
+                // margin-top: 10px;
+                ul {
+                  li {
+                    line-height: 22px;
+                    display: flex;
+                    align-items: center;
+                    .label {
+                      width: 60px;
+                    }
+                  }
+                  li:last-child {
+                    color: #002e97;
+                    font-size: 14px;
+                  }
+                }
+              }
+            }
+            .btn {
+              display: flex;
+              flex-direction: column;
+              align-items: center;
+              justify-content: space-around;
+              div {
+                width: 120px;
+                height: 42px;
+                border-radius: 5px;
+                text-align: center;
+                line-height: 42px;
+                font-size: 14px;
+              }
+              .booking {
+                background-color: #002E97;
+                color: #fff
+              }
+              .show-info{
+                border: 1px solid #002E97;
+                color: #002E97;
+
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+</style>
diff --git a/jeecgboot-vue3/src/views/demo/main-home/components/newsInfo/index.vue b/jeecgboot-vue3/src/views/demo/main-home/components/newsInfo/index.vue
new file mode 100644
index 0000000..c0ae3b3
--- /dev/null
+++ b/jeecgboot-vue3/src/views/demo/main-home/components/newsInfo/index.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="container">
+    <div class="news-list">
+      <div class="item">
+      
+        <div class="right">
+          <div class="title">新闻标题</div>
+          <div class="editor"><div>2022-03-24 | 信息来源：国际教育学院</div><div>负责人 | 无糖</div></div>
+          <div class="description"
+            >小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本小小文本</div
+          >
+         
+        </div>
+      </div>
+    </div>
+    <!-- 栏目 -->
+    <div class="column-list">
+      <div class="title">栏目列表</div>
+      <div class="list">
+        <div class="item">全部</div>
+        <div class="item">项目申报</div>
+        <div class="item">新闻列表</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped lang="less">
+  .container {
+    position: relative;
+    width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    margin-top: 50px;
+    .news-list {
+     width: calc(1200px - 415px);
+     margin-right: 30px;
+
+      .item {
+        display: flex;
+        width: 100%;
+       
+        padding-bottom: 45px;
+        margin-top: 40px;
+       
+        .right {
+          margin-left: 30px;
+          .title {
+            font-size: 22px;
+            color: #000;
+            font-weight: 600;
+          }
+
+          .editor {
+            height: 53px;
+            position: relative;
+            font-size: 14px;
+            color: #999;
+            font-size: 14px;
+            margin-top: 30px;
+            margin-left: 40px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+          }
+          .editor::before {
+            content: '';
+            display: block;
+            position: absolute;
+            width:4px;
+           left: -40px;
+            height: 53px;
+            background-color: #d9d9d9;
+          }
+          .description {
+            margin-top: 30px;
+            width: 660px;
+            text-indent: 2em;
+            line-height: 28px;
+          }
+          .get-info {
+            color: #fff;
+            width: 132px;
+            height: 40px;
+            text-align: center;
+            line-height: 40px;
+            margin-top: 30px;
+            background-color: #002e97;
+          }
+        }
+      }
+    }
+    .column-list {
+      position: sticky;
+      top: 0;
+      width: 385px;
+      background-color: #fff;
+      height: 755px;
+      padding: 30px;
+      .title{
+        font-size: 20px;
+        font-weight: 600;
+        color: #555;
+      }
+      .list{
+        .item{
+          font-size: 16px;
+          color: #555;
+          height: 50px;
+          line-height: 50px;
+          border-bottom: 1px solid #D9D9D9;
+          cursor: pointer;
+        }
+      }
+    }
+  }
+</style>
diff --git a/jeecgboot-vue3/src/views/demo/main-home/components/projectDeclaration/index.vue b/jeecgboot-vue3/src/views/demo/main-home/components/projectDeclaration/index.vue
new file mode 100644
index 0000000..29bd06d
--- /dev/null
+++ b/jeecgboot-vue3/src/views/demo/main-home/components/projectDeclaration/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="container">
+    <div class="top-filter">
+      <div :class="activeIndex === index ? 'active item' : 'item'" @click="activeIndex = index" class="item " v-for="(item, index) in filterList" :key="index"
+        ><component :is="item.icon"></component><div style="margin-left: 10px">{{ item.label }}</div></div
+      >
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import { PartitionOutlined, DollarCircleOutlined } from '@ant-design/icons-vue';
+  const activeIndex = ref(0);
+  const filterList = ref([
+    { label: '科技省厅', icon: PartitionOutlined },
+    { label: '管理制度', icon: DollarCircleOutlined },
+    { label: '申报项目', icon: DollarCircleOutlined },
+    { label: '项目受理', icon: DollarCircleOutlined },
+    { label: '立项信息', icon: DollarCircleOutlined },
+    { label: '验收情况', icon: DollarCircleOutlined },
+    { label: '创新券', icon: DollarCircleOutlined },
+  ]);
+</script>
+
+<style scoped lang="less">
+  .container {
+    width: 1200px;
+    margin: 0 auto;
+    margin-top: 20px;
+    .top-filter {
+      display: flex;
+      justify-content: space-between;
+      .item {
+        display: flex;
+        justify-content: center;
+
+        width: 167px;
+        height: 70px;
+        text-align: center;
+        line-height: 70px;
+        cursor: pointer;
+        border-radius: 8px;
+        box-shadow: 1px 0px 9px 0px rgba(100, 100, 111, 0.1);
+      }
+      .active {
+        color: #fff;
+        background-color: #002e97;
+      }
+    }
+  }
+</style>
diff --git a/jeecgboot-vue3/src/views/demo/main-home/index copy.vue b/jeecgboot-vue3/src/views/demo/main-home/index copy.vue
new file mode 100644
index 0000000..ae22df6
--- /dev/null
+++ b/jeecgboot-vue3/src/views/demo/main-home/index copy.vue	
@@ -0,0 +1,445 @@
+<template>
+  <div class="main-home">
+    <!-- 头部 -->
+    <div class="header-box">
+      <div class="nav-center">
+        <div class="title"> 大数据双创应用竞赛管理系统 </div>
+        <div class="nav-content">
+          <div class="nav-box">
+            <div class="nav-item" v-for="(item, i) in navItems" :class="{ active: acI === i }" @click="hanRou(item, i)" :key="item.path">
+              {{ item.name }}
+            </div>
+          </div>
+          <!--                    <div class="login">
+                        登录
+                    </div>-->
+        </div>
+      </div>
+    </div>
+
+    <div class="fixed">
+      <!--            <div style="width: 100px;height: 100px;cursor: pointer;">
+                <img style="width: 100%;height: 100%;" src="../../../assets/images/mainHome/div(1).png" alt="">
+            </div>-->
+      <!--            <div class="bas"></div>-->
+      <div class="card bot">
+        <!--<div class="img-box"  onclick="window.location.href='http://10.20.15.171:3200/'"><img src="../../../assets/images/mainHome/Frame.png" alt=""></div>-->
+        <div class="img-box" onclick="window.location.href='http://127.0.0.1:3200/'"
+          ><img src="../../../assets/images/mainHome/Frame.png" alt=""
+        /></div>
+
+        <div class="text">后台管理</div>
+      </div>
+    </div>
+
+    <router-view v-slot="{ Component }">
+      <component :is="Component" :navList="navItems" />
+    </router-view>
+
+    <!-- 脚部 -->
+    <div class="footer-box">
+      <div class="foo_top">
+        <div class="top_con">
+          <div class="con_left">
+            <div class="img-box">
+              <img src="../../../assets/images/mainHome/2641675928551_3.png" alt="" />
+            </div>
+            <div class="text">
+              <!--                            <div class="item">主办单位：黄淮学院</div>-->
+              <div class="item">河南机电</div>
+            </div>
+          </div>
+          <div class="con_center">
+            <ul>
+              <li>
+                <div class="tit">友情链接</div>
+                <div class="box">
+                  <div class="item">河南机电</div>
+                  <div class="item">中国高等教育博览会</div>
+                </div>
+              </li>
+              <li>
+                <div class="tit">关于我们</div>
+                <div class="box">
+                  <div class="item">平台简介</div>
+                  <div class="item">服务支持</div>
+                </div>
+              </li>
+              <li>
+                <div class="tit">帮助中心</div>
+                <div class="box">
+                  <div class="item">平台疑问</div>
+                  <div class="item">登录疑问</div>
+                  <div class="item">竞赛疑问</div>
+                  <div class="item">账号疑问</div>
+                  <div class="item">密码疑问</div>
+                </div>
+              </li>
+              <li>
+                <div class="tit">申领账号</div>
+                <div class="box">
+                  <div class="item">高效管理账号申领</div>
+                  <div class="item">赛事主办方账号申领</div>
+                  <div class="item">管理员入口</div>
+                </div>
+              </li>
+            </ul>
+          </div>
+          <div class="con_right">
+            <div class="img-box"><img src="../../../assets/images/mainHome/image6@2x.png" alt="" /></div>
+            <div class="text">扫一扫关注微信公众号</div>
+          </div>
+        </div>
+      </div>
+      <div class="foo_bottom"> 竞赛内容版权归内容提供者（机构）所有技术支持：原点科技有限公司豫公网安备：41210678904724号豫1CP备15021338号 </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { reactive, ref } from 'vue';
+  import { demoNavListApi } from '/@/api/demo/mainHome';
+  import { useRouter } from 'vue-router';
+  const router = useRouter();
+  type item = {
+    id: string;
+    name: string;
+    path: string;
+  };
+
+  const navItems: item[] = reactive([
+    {
+      id: '1',
+      name: '首页',
+      path: '/main-home/HomePage',
+    },
+  ]);
+
+  demoNavListApi().then((res) => {
+    if (typeof res[Symbol.iterator] !== 'function') return;
+    navItems.length = 1;
+    res.forEach((o: any) => {
+      navItems.push({
+        id: o.id,
+        name: o.name,
+        path: '/main-home/MatchEvaluation',
+      });
+    });
+  });
+  // @ts-ignore
+  const acI = ref(+sessionStorage.getItem('MAIN_HOME_ACI'));
+
+  function hanRou(item: item, i: number) {
+    if (acI.value === i) return;
+    router.push(item.path + '?id=' + item.id);
+    acI.value = i;
+    sessionStorage.setItem('MAIN_HOME_ACI', JSON.stringify(acI.value));
+  }
+</script>
+
+<style lang="less" scoped>
+  .fixed {
+    position: fixed;
+    width: 100px;
+    height: 202px;
+    top: calc(80px + 20px);
+    right: 7px;
+    z-index: 9;
+
+    .card {
+      width: 100px;
+      height: 100px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+
+      .img-box {
+        width: 40px;
+        height: 40px;
+        margin-bottom: 4px;
+
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+
+      .text {
+        height: 18px;
+        font-family:
+          Microsoft YaHei,
+          Microsoft YaHei;
+        font-weight: 400;
+        font-size: 13px;
+        color: #ffffff;
+        line-height: 17px;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+      }
+    }
+
+    .bas {
+      height: 2px;
+      width: 100%;
+      background-color: #fff;
+    }
+
+    .bot {
+      background: #a7b2c6;
+      border-bottom-left-radius: 20px;
+    }
+  }
+
+  .main-home {
+    .header-box {
+      display: flex;
+      height: 80px;
+      background: #ffffff;
+      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
+
+      .nav-center {
+        @color: #e62129;
+        .fl_or_cen();
+        @nav_width: 1280px;
+        width: @nav_width;
+        margin: auto;
+
+        .title {
+          font-size: 20px;
+          font-weight: bolder;
+        }
+
+        .nav-content {
+          .fl_or_cen();
+          @width: @nav_width - 587px;
+          width: @width;
+
+          .nav-box {
+            .fl_or_cen();
+            width: calc(@width - 203px);
+
+            .nav-item {
+              color: #333;
+              font-size: 18px;
+              font-weight: 600;
+              position: relative;
+              cursor: pointer;
+
+              &.active {
+                color: @color;
+
+                &::after {
+                  content: '';
+                  position: absolute;
+                  left: 0;
+                  bottom: -2px;
+                  width: 100%;
+                  height: 2px;
+                  background-color: @color;
+                }
+              }
+            }
+          }
+        }
+
+        .login {
+          margin-right: 76px;
+          color: @color;
+          font-size: 16px;
+        }
+      }
+    }
+
+    .footer-box {
+      .foo_top {
+        height: 154px;
+        background: #333333;
+        border-radius: 0px 0px 0px 0px;
+
+        .top_con {
+          width: 1200px;
+          height: 100%;
+          border-radius: 0px 0px 0px 0px;
+          margin: auto;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .con_left {
+            height: 104px;
+            width: 175px;
+
+            .img-box {
+              width: 175px;
+              height: 60px;
+
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+
+            .text {
+              margin-top: 8px;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+
+              .item {
+                height: 18px;
+                font-family:
+                  Microsoft YaHei,
+                  Microsoft YaHei;
+                font-weight: 400;
+                font-size: 12px;
+                color: #ffffff;
+                line-height: 18px;
+                text-align: center;
+                font-style: normal;
+                text-transform: none;
+              }
+            }
+          }
+
+          .con_center {
+            height: 104px;
+            width: 550px;
+            border-left: 1px solid #ffffff;
+            position: relative;
+
+            ul {
+              width: 485px;
+              position: absolute;
+              top: 50%;
+              transform: translate(0, -50%);
+              right: 0;
+              display: flex;
+              flex-direction: column;
+              row-gap: 4px;
+
+              li {
+                height: 19px;
+                border-radius: 0px 0px 0px 0px;
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+
+                .tit {
+                  width: 48px;
+                  height: 17px;
+                  font-family:
+                    PingFang SC,
+                    PingFang SC;
+                  font-weight: 600;
+                  font-size: 12px;
+                  color: #fbfbfb;
+                  line-height: 17px;
+                  text-align: left;
+                  font-style: normal;
+                  text-transform: none;
+                }
+
+                .box {
+                  width: 382px;
+                  display: flex;
+
+                  .item {
+                    height: 17px;
+                    font-family:
+                      Microsoft YaHei,
+                      Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #c9c9c9;
+                    line-height: 17px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                    margin-left: 17px;
+                    margin-right: 17px;
+                    white-space: nowrap;
+                    position: relative;
+
+                    &:first-child {
+                      margin-left: 0;
+                    }
+
+                    &::before {
+                      content: '';
+                      display: flex;
+                      width: 2px;
+                      height: 11px;
+                      background: #c9c9c9;
+                      border-radius: 0px 0px 0px 0px;
+                      position: absolute;
+                      left: -18px;
+                      top: 50%;
+                      transform: translate(0, -50%);
+                    }
+
+                    &:first-child::before {
+                      display: none;
+                    }
+                  }
+                }
+              }
+            }
+          }
+
+          .con_right {
+            height: 100px;
+            width: 180px;
+            display: flex;
+            justify-content: space-between;
+
+            .img-box {
+              width: 100px;
+              height: 100px;
+              flex-shrink: 0;
+
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+
+            .text {
+              align-self: flex-end;
+              width: 60px;
+              font-family:
+                Microsoft YaHei,
+                Microsoft YaHei;
+              font-weight: 400;
+              font-size: 12px;
+              color: #c9c9c9;
+              line-height: 17px;
+              text-align: center;
+              font-style: normal;
+              text-transform: none;
+            }
+          }
+        }
+      }
+
+      .foo_bottom {
+        height: 34px;
+        background: #666666;
+        border-radius: 0px 0px 0px 0px;
+        line-height: 34px;
+        text-align: center;
+        font-size: 12px;
+        color: #c9c9c9;
+      }
+    }
+  }
+
+  .fl_or_cen() {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>
diff --git a/jeecgboot-vue3/src/views/demo/main-home/index.vue b/jeecgboot-vue3/src/views/demo/main-home/index.vue
index 595852f..d44baaa 100644
--- a/jeecgboot-vue3/src/views/demo/main-home/index.vue
+++ b/jeecgboot-vue3/src/views/demo/main-home/index.vue
@@ -1,151 +1,107 @@
 <template>
-    <div class="main-home">
-        <!-- 头部 -->
-        <div class="header-box">
-            <div class="nav-center">
-                <div class="title">
-                  大数据双创应用竞赛管理系统
-                </div>
-                <div class="nav-content">
-                    <div class="nav-box">
-                        <div class="nav-item" v-for="item, i in navItems" :class="{ active: acI === i }"
-                            @click="hanRou(item, i)" :key="item.path">
-                            {{ item.name }}
-                        </div>
-                    </div>
-<!--                    <div class="login">
-                        登录
-                    </div>-->
-                </div>
+  <div class="main-home">
+    <!-- 头部 -->
+    <div class="total">
+      <div class="w">
+        <div class="inner">
+          <div class="fl">
+            <ul>
+              <li><a href="#">中国政府网</a></li>
+              <li><a href="#">科学技术部</a></li>
+              <li><a href="#" style="border: none">河南省人民政府</a></li>
+            </ul>
+          </div>
+          <div class="fr">
+            <ul>
+              <li><a href="#">繁体</a></li>
+              <li><a href="#">简体</a></li>
+              <li><a href="#" style="border: none">微信公众号</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <div class="header">
+        <div class="inner">
+          <div class="fl">
+            <div class="box1"></div>
+          </div>
+          <div class="fr">
+            <div class="search">
+              <input type="search" name="" id="" placeholder="请输入关键词" />
+              <button>搜索</button>
             </div>
+          </div>
+        </div>
+      </div>
+      <div class="shortcut">
+        <div class="wrapper">
+          <ul>
+            <li :class="activeIndex === index ? 'active' : ''" @click="goTo(item,index)" v-for="(item, index) in mainOutRoutes[1].children" :key="index">{{ item.meta.title }}</li>
+            <!-- <li>仪器共享</li>
+            <li>项目申报</li>
+            <li>专家管理</li>
+            <li @click="goTo('/news')">新闻列表</li>
+            <li>新闻详情</li>
+            <li>栏目管理</li>
+            <li>文章管理</li> -->
+          </ul>
         </div>
+      </div>
+    </div>
 
-        <div class="fixed">
-<!--            <div style="width: 100px;height: 100px;cursor: pointer;">
-                <img style="width: 100%;height: 100%;" src="../../../assets/images/mainHome/div(1).png" alt="">
-            </div>-->
-<!--            <div class="bas"></div>-->
-            <div class="card bot">
-                <!--<div class="img-box"  onclick="window.location.href='http://10.20.15.171:3200/'"><img src="../../../assets/images/mainHome/Frame.png" alt=""></div>-->
-              <div class="img-box"  onclick="window.location.href='http://127.0.0.1:3200/'"><img src="../../../assets/images/mainHome/Frame.png" alt=""></div>
+    <div class="fixed">
+      <div class="card bot">
+        <!--<div class="img-box"  onclick="window.location.href='http://10.20.15.171:3200/'"><img src="../../../assets/images/mainHome/Frame.png" alt=""></div>-->
+        <div class="img-box" onclick="window.location.href='http://127.0.0.1:3200/'"
+          ><img src="../../../assets/images/mainHome/Frame.png" alt=""
+        /></div>
 
-              <div class="text">后台管理</div>
-            </div>
-        </div>
+        <div class="text">后台管理</div>
+      </div>
+    </div>
 
-      <router-view v-slot="{ Component }">
-        <component :is="Component" :navList="navItems" />
-      </router-view>
-
-
-
-        <!-- 脚部 -->
-        <div class="footer-box">
-            <div class="foo_top">
-                <div class="top_con">
-                    <div class="con_left">
-                        <div class="img-box">
-                            <img src="../../../assets/images/mainHome/2641675928551_3.png" alt="">
-                        </div>
-                        <div class="text">
-<!--                            <div class="item">主办单位：黄淮学院</div>-->
-                            <div class="item">河南机电</div>
-                        </div>
-                    </div>
-                    <div class="con_center">
-                        <ul>
-                            <li>
-                                <div class="tit">友情链接</div>
-                                <div class="box">
-                                    <div class="item">河南机电</div>
-                                    <div class="item">中国高等教育博览会</div>
-                                </div>
-                            </li>
-                            <li>
-                                <div class="tit">关于我们</div>
-                                <div class="box">
-                                    <div class="item">平台简介</div>
-                                    <div class="item">服务支持</div>
-                                </div>
-                            </li>
-                            <li>
-                                <div class="tit">帮助中心</div>
-                                <div class="box">
-                                    <div class="item">平台疑问</div>
-                                    <div class="item">登录疑问</div>
-                                    <div class="item">竞赛疑问</div>
-                                    <div class="item">账号疑问</div>
-                                    <div class="item">密码疑问</div>
-                                </div>
-                            </li>
-                            <li>
-                                <div class="tit">申领账号</div>
-                                <div class="box">
-                                    <div class="item">高效管理账号申领</div>
-                                    <div class="item">赛事主办方账号申领</div>
-                                    <div class="item">管理员入口</div>
-                                </div>
-                            </li>
-                        </ul>
-                    </div>
-                    <div class="con_right">
-                        <div class="img-box"><img src="../../../assets/images/mainHome/image6@2x.png" alt=""></div>
-                        <div class="text">扫一扫关注微信公众号</div>
-                    </div>
-                </div>
-            </div>
-            <div class="foo_bottom">
-                竞赛内容版权归内容提供者（机构）所有技术支持：原点科技有限公司豫公网安备：41210678904724号豫1CP备15021338号
-            </div>
+    <router-view v-slot="{ Component }">
+      <component :is="Component" :navList="navItems" />
+    </router-view>
+
+    <!-- 脚部 -->
+    <div class="footer">
+      <div class="fl">
+        <div class="box1"></div>
+        <div class="box2"></div>
+      </div>
+      <div class="fr">
+        <h2>
+          主办：河南省科学技术厅 承办:河南省科学器材供应中心
+          <br />
+          地址：河南省郑州市金水区政六街2号5楼 邮编：450003 电话：0371-65957129 邮箱：hnisscn@163.com
+        </h2>
+        <div class="aaa">
+          <a href="">Copyright@2016</a>
+          <a href="">www.hniss.cn All Rights Reserved</a>
+          <a href="">豫ICP备16019691-1</a>
+          <a href="">访问统计：5929773</a>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue';
-import { demoNavListApi } from '/@/api/demo/mainHome';
-import { useRouter } from 'vue-router';
-const router = useRouter()
-type item = {
-    id: string
-    name: string
-    path: string
-}
-
-const navItems: item[] = reactive([
-    {
-        id: '1',
-        name: '首页',
-        path: '/main-home/HomePage'
-    },
-])
-
-demoNavListApi().then(res => {
-    if (typeof res[Symbol.iterator] !== 'function') return
-    navItems.length = 1
-    res.forEach((o: any) => {
-        navItems.push({
-            id: o.id,
-            name: o.name,
-            path: '/main-home/MatchEvaluation'
-        })
-    });
-})
-// @ts-ignore
-const acI = ref(+sessionStorage.getItem('MAIN_HOME_ACI'))
-
-function hanRou(item: item, i: number) {
-    if (acI.value === i) return
-    router.push(item.path+'?id='+item.id)
-    acI.value = i
-    sessionStorage.setItem('MAIN_HOME_ACI',JSON.stringify(acI.value))
-}
-
+  import { reactive, ref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import {mainOutRoutes} from '@/router/helper/mainOut'
+  const router = useRouter();
+  const activeIndex = ref(0);
+
+  const goTo = (item: any, index: number) => {
+    activeIndex.value = index;
+    router.push(item.path);
+  };
 </script>
 
-
 <style lang="less" scoped>
-.fixed {
+  .fixed {
     position: fixed;
     width: 100px;
     height: 202px;
@@ -153,297 +109,460 @@ function hanRou(item: item, i: number) {
     right: 7px;
     z-index: 9;
 
-
     .card {
-        width: 100px;
-        height: 100px;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        cursor: pointer;
-
-        .img-box {
-            width: 40px;
-            height: 40px;
-            margin-bottom: 4px;
-
-            img {
-                width: 100%;
-                height: 100%;
-            }
+      width: 100px;
+      height: 100px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+
+      .img-box {
+        width: 40px;
+        height: 40px;
+        margin-bottom: 4px;
+
+        img {
+          width: 100%;
+          height: 100%;
         }
-
-        .text {
-            height: 18px;
-            font-family: Microsoft YaHei, Microsoft YaHei;
-            font-weight: 400;
-            font-size: 13px;
-            color: #FFFFFF;
-            line-height: 17px;
-            text-align: center;
-            font-style: normal;
-            text-transform: none;
-        }
-
+      }
+
+      .text {
+        height: 18px;
+        font-family:
+          Microsoft YaHei,
+          Microsoft YaHei;
+        font-weight: 400;
+        font-size: 13px;
+        color: #ffffff;
+        line-height: 17px;
+        text-align: center;
+        font-style: normal;
+        text-transform: none;
+      }
     }
 
     .bas {
-        height: 2px;
-        width: 100%;
-        background-color: #fff;
+      height: 2px;
+      width: 100%;
+      background-color: #fff;
     }
 
     .bot {
-        background: #A7B2C6;
-        border-bottom-left-radius: 20px;
+      background: #a7b2c6;
+      border-bottom-left-radius: 20px;
     }
-}
+  }
+
+  .main-home {
+    background: #f0f2f5;
 
-.main-home {
     .header-box {
-        display: flex;
-        height: 80px;
-        background: #FFFFFF;
-        box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
+      display: flex;
+      height: 80px;
+      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.1);
+
+      .nav-center {
+        @color: #e62129;
+        .fl_or_cen();
+        @nav_width: 1280px;
+        width: @nav_width;
+        margin: auto;
+
+        .title {
+          font-size: 20px;
+          font-weight: bolder;
+        }
+
+        .nav-content {
+          .fl_or_cen();
+          @width: @nav_width - 587px;
+          width: @width;
 
-        .nav-center {
-            @color: #E62129;
+          .nav-box {
             .fl_or_cen();
-            @nav_width: 1280px;
-            width: @nav_width;
-            margin: auto;
+            width: calc(@width - 203px);
 
-            .title {
-                font-size: 20px;
-                font-weight: bolder;
-            }
+            .nav-item {
+              color: #333;
+              font-size: 18px;
+              font-weight: 600;
+              position: relative;
+              cursor: pointer;
 
-            .nav-content {
-                .fl_or_cen();
-                @width: @nav_width - 587px;
-                width: @width;
-
-                .nav-box {
-                    .fl_or_cen();
-                    width: calc(@width - 203px);
-
-                    .nav-item {
-                        color: #333;
-                        font-size: 18px;
-                        font-weight: 600;
-                        position: relative;
-                        cursor: pointer;
-
-                        &.active {
-                            color: @color;
-
-                            &::after {
-                                content: '';
-                                position: absolute;
-                                left: 0;
-                                bottom: -2px;
-                                width: 100%;
-                                height: 2px;
-                                background-color: @color;
-                            }
-                        }
-                    }
+              &.active {
+                color: @color;
+
+                &::after {
+                  content: '';
+                  position: absolute;
+                  left: 0;
+                  bottom: -2px;
+                  width: 100%;
+                  height: 2px;
+                  background-color: @color;
                 }
+              }
             }
+          }
+        }
 
-            .login {
-                margin-right: 76px;
-                color: @color;
-                font-size: 16px;
-            }
+        .login {
+          margin-right: 76px;
+          color: @color;
+          font-size: 16px;
         }
+      }
     }
 
     .footer-box {
-        .foo_top {
-            height: 154px;
-            background: #333333;
-            border-radius: 0px 0px 0px 0px;
-
-            .top_con {
-                width: 1200px;
+      .foo_top {
+        height: 154px;
+        background: #333333;
+        border-radius: 0px 0px 0px 0px;
+
+        .top_con {
+          width: 1200px;
+          height: 100%;
+          border-radius: 0px 0px 0px 0px;
+          margin: auto;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+
+          .con_left {
+            height: 104px;
+            width: 175px;
+
+            .img-box {
+              width: 175px;
+              height: 60px;
+
+              img {
+                width: 100%;
                 height: 100%;
+              }
+            }
+
+            .text {
+              margin-top: 8px;
+              display: flex;
+              flex-direction: column;
+              justify-content: center;
+              align-items: center;
+
+              .item {
+                height: 18px;
+                font-family:
+                  Microsoft YaHei,
+                  Microsoft YaHei;
+                font-weight: 400;
+                font-size: 12px;
+                color: #ffffff;
+                line-height: 18px;
+                text-align: center;
+                font-style: normal;
+                text-transform: none;
+              }
+            }
+          }
+
+          .con_center {
+            height: 104px;
+            width: 550px;
+            border-left: 1px solid #ffffff;
+            position: relative;
+
+            ul {
+              width: 485px;
+              position: absolute;
+              top: 50%;
+              transform: translate(0, -50%);
+              right: 0;
+              display: flex;
+              flex-direction: column;
+              row-gap: 4px;
+
+              li {
+                height: 19px;
                 border-radius: 0px 0px 0px 0px;
-                margin: auto;
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
 
-
-                .con_left {
-                    height: 104px;
-                    width: 175px;
-
-                    .img-box {
-                        width: 175px;
-                        height: 60px;
-
-                        img {
-                            width: 100%;
-                            height: 100%;
-                        }
-
-                    }
-
-                    .text {
-                        margin-top: 8px;
-                        display: flex;
-                        flex-direction: column;
-                        justify-content: center;
-                        align-items: center;
-
-                        .item {
-                            height: 18px;
-                            font-family: Microsoft YaHei, Microsoft YaHei;
-                            font-weight: 400;
-                            font-size: 12px;
-                            color: #FFFFFF;
-                            line-height: 18px;
-                            text-align: center;
-                            font-style: normal;
-                            text-transform: none;
-                        }
-                    }
+                .tit {
+                  width: 48px;
+                  height: 17px;
+                  font-family:
+                    PingFang SC,
+                    PingFang SC;
+                  font-weight: 600;
+                  font-size: 12px;
+                  color: #fbfbfb;
+                  line-height: 17px;
+                  text-align: left;
+                  font-style: normal;
+                  text-transform: none;
                 }
 
-                .con_center {
-                    height: 104px;
-                    width: 550px;
-                    border-left: 1px solid #FFFFFF;
+                .box {
+                  width: 382px;
+                  display: flex;
+
+                  .item {
+                    height: 17px;
+                    font-family:
+                      Microsoft YaHei,
+                      Microsoft YaHei;
+                    font-weight: 400;
+                    font-size: 12px;
+                    color: #c9c9c9;
+                    line-height: 17px;
+                    text-align: left;
+                    font-style: normal;
+                    text-transform: none;
+                    margin-left: 17px;
+                    margin-right: 17px;
+                    white-space: nowrap;
                     position: relative;
 
-
-                    ul {
-                        width: 485px;
-                        position: absolute;
-                        top: 50%;
-                        transform: translate(0, -50%);
-                        right: 0;
-                        display: flex;
-                        flex-direction: column;
-                        row-gap: 4px;
-
-                        li {
-                            height: 19px;
-                            border-radius: 0px 0px 0px 0px;
-                            display: flex;
-                            justify-content: space-between;
-                            align-items: center;
-
-                            .tit {
-                                width: 48px;
-                                height: 17px;
-                                font-family: PingFang SC, PingFang SC;
-                                font-weight: 600;
-                                font-size: 12px;
-                                color: #FBFBFB;
-                                line-height: 17px;
-                                text-align: left;
-                                font-style: normal;
-                                text-transform: none;
-                            }
-
-                            .box {
-                                width: 382px;
-                                display: flex;
-
-                                .item {
-                                    height: 17px;
-                                    font-family: Microsoft YaHei, Microsoft YaHei;
-                                    font-weight: 400;
-                                    font-size: 12px;
-                                    color: #C9C9C9;
-                                    line-height: 17px;
-                                    text-align: left;
-                                    font-style: normal;
-                                    text-transform: none;
-                                    margin-left: 17px;
-                                    margin-right: 17px;
-                                    white-space: nowrap;
-                                    position: relative;
-
-                                    &:first-child {
-                                        margin-left: 0;
-                                    }
-
-                                    &::before {
-                                        content: '';
-                                        display: flex;
-                                        width: 2px;
-                                        height: 11px;
-                                        background: #C9C9C9;
-                                        border-radius: 0px 0px 0px 0px;
-                                        position: absolute;
-                                        left: -18px;
-                                        top: 50%;
-                                        transform: translate(0, -50%);
-                                    }
-
-                                    &:first-child::before {
-                                        display: none;
-                                    }
-                                }
-                            }
-                        }
+                    &:first-child {
+                      margin-left: 0;
                     }
-                }
 
-                .con_right {
-                    height: 100px;
-                    width: 180px;
-                    display: flex;
-                    justify-content: space-between;
-
-                    .img-box {
-                        width: 100px;
-                        height: 100px;
-                        flex-shrink: 0;
-
-                        img {
-                            width: 100%;
-                            height: 100%;
-                        }
+                    &::before {
+                      content: '';
+                      display: flex;
+                      width: 2px;
+                      height: 11px;
+                      background: #c9c9c9;
+                      border-radius: 0px 0px 0px 0px;
+                      position: absolute;
+                      left: -18px;
+                      top: 50%;
+                      transform: translate(0, -50%);
                     }
 
-                    .text {
-                        align-self: flex-end;
-                        width: 60px;
-                        font-family: Microsoft YaHei, Microsoft YaHei;
-                        font-weight: 400;
-                        font-size: 12px;
-                        color: #C9C9C9;
-                        line-height: 17px;
-                        text-align: center;
-                        font-style: normal;
-                        text-transform: none;
+                    &:first-child::before {
+                      display: none;
                     }
+                  }
                 }
+              }
             }
-        }
+          }
 
-        .foo_bottom {
-            height: 34px;
-            background: #666666;
-            border-radius: 0px 0px 0px 0px;
-            line-height: 34px;
-            text-align: center;
-            font-size: 12px;
-            color: #C9C9C9;
-        }
-    }
+          .con_right {
+            height: 100px;
+            width: 180px;
+            display: flex;
+            justify-content: space-between;
 
-}
+            .img-box {
+              width: 100px;
+              height: 100px;
+              flex-shrink: 0;
 
+              img {
+                width: 100%;
+                height: 100%;
+              }
+            }
+
+            .text {
+              align-self: flex-end;
+              width: 60px;
+              font-family:
+                Microsoft YaHei,
+                Microsoft YaHei;
+              font-weight: 400;
+              font-size: 12px;
+              color: #c9c9c9;
+              line-height: 17px;
+              text-align: center;
+              font-style: normal;
+              text-transform: none;
+            }
+          }
+        }
+      }
+
+      .foo_bottom {
+        height: 34px;
+        background: #666666;
+        border-radius: 0px 0px 0px 0px;
+        line-height: 34px;
+        text-align: center;
+        font-size: 12px;
+        color: #c9c9c9;
+      }
+    }
+  }
 
-.fl_or_cen() {
+  .fl_or_cen() {
     display: flex;
     justify-content: space-between;
     align-items: center;
-}
+  }
+  * {
+    text-decoration: none;
+  }
+  .w {
+    height: 35px;
+    line-height: 30px;
+    background-color: #e4e9f3;
+  }
+  .w ul li {
+    float: left;
+  }
+  .inner {
+    width: 1350px;
+    margin: 0 auto;
+  }
+  .inner a {
+    padding: 0 20px;
+    border-right: 1px solid #41474f;
+    color: #41474f;
+    font-size: 14px;
+    line-height: 14px;
+  }
+  .fl {
+    float: left;
+  }
+  .fr {
+    float: right;
+  }
+
+  .header {
+    height: 150px;
+    background-color: #f8f8f8;
+  }
+  .header .inner {
+    width: 1400px;
+    padding: 50px;
+  }
+  .header .box1 {
+    width: 350px;
+    height: 67px;
+    background-color: #999999;
+  }
+  .search {
+    width: 538px;
+    height: 45px;
+    border: 2px solid #e3e3e3;
+    margin-top: 9px;
+  }
+  .search input {
+    width: 430px;
+    height: 42px;
+    border: 0;
+    outline: none;
+    padding-left: 10px;
+    font-size: 18px;
+  }
+  .search button {
+    width: 103px;
+    height: 42px;
+    background-color: #013ebc;
+    border: 0;
+    color: rgb(217, 227, 236);
+    font-size: 18px;
+  }
+
+  .shortcut {
+    height: 52px;
+    line-height: 52px;
+    background-color: #013ebc;
+    font-size: 26px;
+  }
+
+  .shortcut .wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .shortcut ul {
+    display: flex;
+  }
+
+  .shortcut ul li {
+    position: relative;
+    width: 160px;
+    text-align: center;
+    padding: 0 24px;
+    color: #fff;
+    font-size: 17px;
+    line-height: 52px;
+    cursor: pointer;
+  }
+  .shortcut ul li:hover {
+    background-color: #4c78d2;
+  }
+  .shortcut ul li:not(:last-child)::after {
+    content: ' ';
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    display: block;
+    width: 1px;
+    height: 19px;
+    background-color: #fff;
+  }
+  .footer {
+    // position: fixed;
+    // bottom: 0;
+    height: 300px;
+    width: 100%;
+    background-color: #013ebc;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+  }
+  .footer .fl {
+    float: left;
+    width: 200px;
+    height: 100px;
+  }
+  .fl .box1 {
+    float: left;
+    width: 50px;
+    height: 50px;
+    background-color: #4a4a49;
+  }
+  .fl .box2 {
+    float: right;
+    width: 50px;
+    height: 50px;
+    background-color: #4a4a49;
+  }
+  .footer .fr {
+    float: right;
+    width: 1000px;
+    height: 200px;
+
+    margin-left: 100px;
+  }
+  .fr h2 {
+    text-align: center;
+    line-height: 40px;
+    font-size: 16px;
+    color: #d1e9fd;
+  }
+  .aaa {
+    margin: 50px 45px;
+  }
+  .aaa a {
+    margin: 0 26px;
+    text-decoration: none;
+    font-size: 16px;
+    color: #d1e9fd;
+  }
+
+  .active {
+    background-color: #4c78d2;
+  }
 </style>