diff --git a/src/App.vue b/src/App.vue
index d31088e..1f09e8f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,9 +1,11 @@
 <template>
-  <router-view></router-view>
+  <router-view>
+
+  </router-view>
 </template>
 
 <script lang="ts" setup>
-import {} from 'vue'
+import { } from 'vue'
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/Layout/footer/index.vue b/src/Layout/footer/index.vue
index 8a6eabb..2adf1db 100644
--- a/src/Layout/footer/index.vue
+++ b/src/Layout/footer/index.vue
@@ -1,6 +1,23 @@
 <template>
   <div class="footer">
-    <h1>FOOTER</h1>
+    <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>
 </template>
 
@@ -14,10 +31,49 @@ import {} from 'vue'
   // bottom: 0;
   height: 300px;
   width: 100%;
-  background-color: #252527;
+  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;
+}
 </style>
diff --git a/src/Layout/index.vue b/src/Layout/index.vue
index ec26e05..4263ac5 100644
--- a/src/Layout/index.vue
+++ b/src/Layout/index.vue
@@ -21,7 +21,6 @@ import {} from 'vue'
   width: 100%;
   min-height: 100vh;
   background-color: #eef1fb;
-  padding-top: 140px;
   // background-color: skyblue;
   // .container {
   //   width: $base-container-width;
diff --git a/src/Layout/tabbar/index.vue b/src/Layout/tabbar/index.vue
index 0759e98..e8d91dc 100644
--- a/src/Layout/tabbar/index.vue
+++ b/src/Layout/tabbar/index.vue
@@ -1,17 +1,54 @@
 <template>
-  <div :class="!flog ? 'tabbar' : 'tabbar-active'">
-    <div class="container">
-      <div class="logo">LOGO</div>
-      <div class="menu">
+  <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="active"
-            v-for="(item, index) in constRouter[0].children"
-            :key="item.path"
-            @click="goToRouter(item)"
-          >
-            {{ item.meta.title }}
-          </li>
+          <li @click="goTo('/home')">首页</li>
+          <li>|</li>
+          <li>仪器共享</li>
+          <li>|</li>
+          <li>项目申报</li>
+          <li>|</li>
+          <li>专家管理</li>
+          <li>|</li>
+          <li @click="goTo('/news')">新闻列表</li>
+          <li>|</li>
+          <li>新闻详情</li>
+          <li>|</li>
+          <li>栏目管理</li>
+          <li>|</li>
+          <li>文章管理</li>
         </ul>
       </div>
     </div>
@@ -19,137 +56,118 @@
 </template>
 
 <script lang="ts" setup>
-import { constRouter } from '@/router/module/constRouter'
+// import { constRouter } from '@/router/module/constRouter'
 import { useRouter } from 'vue-router'
-import { onMounted, ref } from 'vue'
+// import { onMounted, ref } from 'vue'
 
-const $router = useRouter()
+// const $router = useRouter()
 
-const goToRouter = (item: any) => {
-  $router.push({ path: `${item.path}` })
-}
-const flog = ref(false)
-onMounted(() => {
-  window.addEventListener('scroll', () => {
-    if (window.scrollY >= 50) {
-      flog.value = true
-    } else if (flog.value && window.scrollY <= 50) {
-      flog.value = false
-    }
-  })
-})
+// const goToRouter = (item: any) => {
+//   $router.push({ path: `${item.path}` })
+// }
+// const flog = ref(false)
+// onMounted(() => {
+//   window.addEventListener('scroll', () => {
+//     if (window.scrollY >= 50) {
+//       flog.value = true
+//     } else if (flog.value && window.scrollY <= 50) {
+//       flog.value = false
+//     }
+//   })
+// })
+const router = useRouter()
+
+const goTo = (path: any) => {
+  router.push(path)
+}
 </script>
 
 <style lang="scss" scoped>
-.tabbar {
-  position: fixed;
-  top: 0;
-  height: 120px;
-  width: 100%;
-  // background-color: transparent;
-  background-color: #6da0ff;
-  animation-duration: 0.3s;
-  animation-name: tabber-to;
-}
-.tabbar-active {
-  position: fixed;
-  top: 0;
-  height: 120px;
-  width: 100%;
-  background-color: #6da0ff;
-  animation-duration: 0.3s;
-  animation-name: tabber;
-  z-index: 999;
-  box-shadow: 0px 0px 43px rgba(0, 0, 0, 0.2);
-}
-@keyframes tabber {
-  0% {
-    // transform: translateY(-120px);
-    // background-color: transparent;
-    background-color: #6da0ff;
-  }
-  100% {
-    // transform: translateY(0);
-    background-color: #6da0ff;
-  }
-}
-@keyframes tabber-to {
-  0% {
-    // transform: translateY(-120px);
-    background-color: #6da0ff;
-  }
-  100% {
-    // transform: translateY(0);
-    // background-color: transparent;
-    background-color: #6da0ff;
-  }
-}
-.container {
-  height: 100%;
+* {
+  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;
-  justify-content: space-between;
-  margin: 0 auto;
-  width: $base-container-width;
-  .menu {
-    position: relative;
-    padding: 0 20px;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    ul {
-      display: flex;
-      align-items: center;
-      li {
-        padding: 20px;
-        color: #ffffff;
-        font-size: 14px;
-        cursor: pointer;
-        transition: all 0.2s;
-        position: relative;
-      }
-      li:hover {
-        color: #7aa4ff;
-        transform: translateY(-5px);
-      }
-      .active::before {
-        content: ' ';
-        display: block;
-        position: absolute;
-        top: 0px;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 5px;
-        height: 5px;
-        border-radius: 50%;
-        background-color: #fff;
-      }
-    }
-    .entry {
-      position: absolute;
-      top: 5px;
-      right: 30px;
-      display: flex;
-      align-content: center;
-      div {
-        // padding: 5px;
-        margin: 5px;
-        margin-right: 0;
-        padding: 0 10px;
-        border-right: 1px solid #fff;
-        color: #fff;
-        font-size: 14px;
-        cursor: pointer;
-      }
-      div:last-child {
-        border-right: none;
-      }
-    }
-  }
-  .logo {
-    height: 100%;
-    display: flex;
-    align-items: center;
-  }
+}
+.shortcut ul {
+  display: flex;
+}
+
+.shortcut ul li {
+  padding: 0 24px;
+  color: #fff;
+  font-size: 17px;
+  line-height: 52px;
 }
 </style>
diff --git a/src/assets/images/image.png b/src/assets/images/image.png
new file mode 100644
index 0000000..ea58ae3
Binary files /dev/null and b/src/assets/images/image.png differ
diff --git a/src/assets/images/image1.png b/src/assets/images/image1.png
new file mode 100644
index 0000000..c8d7200
Binary files /dev/null and b/src/assets/images/image1.png differ
diff --git a/src/assets/images/image11.png b/src/assets/images/image11.png
new file mode 100644
index 0000000..b53f3e9
Binary files /dev/null and b/src/assets/images/image11.png differ
diff --git a/src/assets/images/image3.png b/src/assets/images/image3.png
new file mode 100644
index 0000000..1411219
Binary files /dev/null and b/src/assets/images/image3.png differ
diff --git a/src/router/module/constRouter/index.ts b/src/router/module/constRouter/index.ts
index fac0f3e..fb535d4 100644
--- a/src/router/module/constRouter/index.ts
+++ b/src/router/module/constRouter/index.ts
@@ -20,6 +20,16 @@ export const constRouter: any = [
           hidden: false,
         },
       },
+      {
+        path: '/news',
+        component: () => import('@/views/news/index.vue'),
+        name: 'News',
+        meta: {
+          icon: '',
+          title: '新闻',
+          hidden: false,
+        },
+      },
     ],
   },
 ]
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 2829856..1d47374 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,7 +1,370 @@
 <template>
-  <div>111</div>
+  <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="fr">
+          <ul>
+            <li>
+              向着航天强国目标勇毅前进————以习近平通知为核心的党中央关心引领探月工程纪实
+            </li>
+            <li>
+              在第七个“中国农民丰收节”到来之际，习近平向全国广大农民和工作在“三农”战线上的同志们致以节日...
+            </li>
+            <li>李强会见马来西亚最高元首易卜拉欣</li>
+          </ul>
+        </div>
+      </div>
+      <div class="more">
+        <p>更多</p>
+      </div>
+    </div>
+    <div class="box2">
+      <div class="leftt"></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">
+          <ul>
+            <li>
+              <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>
+            </li>
+            <li>
+              <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>
+            </li>
+            <li>
+              <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>
+            </li>
+            <li>
+              <div class="instrumentImage">
+                <img src="../../assets/images/image.png" alt="" />
+              </div>
+            </li>
+          </ul>
+        </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 setup></script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.important {
+  height: 1800px;
+  background-color: #e6e6e6;
+  margin: 0px 300px;
+  // display: flex;
+  // align-items: center;
+  // justify-content: center;
+}
+
+.box1 {
+  position: relative;
+  width: 100%;
+  height: 160px;
+  background-color: #f6f6f6;
+  border-bottom: 2px solid #1b4290;
+}
+
+.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%;
+  line-height: 50px;
+  font-size: 22px;
+  color: #fff;
+  background-color: #003cb9;
+  padding-left: 15px;
+}
+.inner {
+  margin: 20px 30px;
+}
+.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;
+}
+</style>
diff --git a/src/views/news/index.vue b/src/views/news/index.vue
new file mode 100644
index 0000000..7b6e2f5
--- /dev/null
+++ b/src/views/news/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <div>新闻</div>
+</template>
+<script setup lang="ts"></script>
+<style scoped lang="scss"></style>