diff --git a/ruoyi-ui/src/assets/gw/Group780.png b/ruoyi-ui/src/assets/gw/Group780.png
new file mode 100644
index 0000000..eaee3d2
Binary files /dev/null and b/ruoyi-ui/src/assets/gw/Group780.png differ
diff --git a/ruoyi-ui/src/assets/gw/Group781.png b/ruoyi-ui/src/assets/gw/Group781.png
new file mode 100644
index 0000000..02823c9
Binary files /dev/null and b/ruoyi-ui/src/assets/gw/Group781.png differ
diff --git a/ruoyi-ui/src/assets/gw/Group782.png b/ruoyi-ui/src/assets/gw/Group782.png
new file mode 100644
index 0000000..259856c
Binary files /dev/null and b/ruoyi-ui/src/assets/gw/Group782.png differ
diff --git a/ruoyi-ui/src/assets/gw/Group783.png b/ruoyi-ui/src/assets/gw/Group783.png
new file mode 100644
index 0000000..533a58b
Binary files /dev/null and b/ruoyi-ui/src/assets/gw/Group783.png differ
diff --git a/ruoyi-ui/src/assets/gw/Snipaste_2024-07-24_21-58-16.jpg b/ruoyi-ui/src/assets/gw/Snipaste_2024-07-24_21-58-16.jpg
new file mode 100644
index 0000000..488c01f
Binary files /dev/null and b/ruoyi-ui/src/assets/gw/Snipaste_2024-07-24_21-58-16.jpg differ
diff --git a/ruoyi-ui/src/assets/gw/Snipaste_2024-07-24_22-28-43.jpg b/ruoyi-ui/src/assets/gw/Snipaste_2024-07-24_22-28-43.jpg
new file mode 100644
index 0000000..03f6c6e
Binary files /dev/null and b/ruoyi-ui/src/assets/gw/Snipaste_2024-07-24_22-28-43.jpg differ
diff --git a/ruoyi-ui/src/permission.js b/ruoyi-ui/src/permission.js
index 7bd2545..65d7541 100644
--- a/ruoyi-ui/src/permission.js
+++ b/ruoyi-ui/src/permission.js
@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register', '/gw', '/sb','/about','/platform','/teaching']
+const whiteList = ['/login', '/register', '/gw', '/sb','/about','/platform','/teaching','/team','/committee','/committee',  ]
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js
index cac3aad..7f3fbea 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -52,20 +52,55 @@ export const constantRoutes = [
     hidden: true
   },
   {
-    path: '/about',
+    path: '/about',// 中心概括
     component: () => import('@/views/officialWebsite/about'),
     hidden: true
   },
   {
-    path: '/platform',
+    path: '/platform', // 教学平台
     component: () => import('@/views/officialWebsite/platform'),
     hidden: true
   },
   {
-    path: '/teaching',
+    path: '/teaching', // 教学资源
     component: () => import('@/views/officialWebsite/teaching'),
     hidden: true
   },
+  {
+    path: '/team', // 教学团队
+    component: () => import('@/views/officialWebsite/team'),
+    hidden: true
+  },
+  {
+    path: '/committee', // 专业委员会
+    component: () => import('@/views/officialWebsite/committee'),
+    hidden: true
+  },
+  {
+    path: '/news', // 教学研讨活动
+    component: () => import('@/views/officialWebsite/news'),
+    hidden: true
+  },
+  {
+    path: '/xufang', // 虚仿专业频道
+    component: () => import('@/views/officialWebsite/xufang'),
+    hidden: true
+  },
+  {
+    path: '/competition', // 大赛风采
+    component: () => import('@/views/officialWebsite/competition'),
+    hidden: true
+  },
+  {
+    path: '/cases', // 合作企业
+    component: () => import('@/views/officialWebsite/cases'),
+    hidden: true
+  },
+  {
+    path: '/contact', // 联系我们
+    component: () => import('@/views/officialWebsite/contact'),
+    hidden: true
+  },
   {
     path: '/login',
     component: () => import('@/views/login'),
diff --git a/ruoyi-ui/src/views/officialWebsite/cases.vue b/ruoyi-ui/src/views/officialWebsite/cases.vue
new file mode 100644
index 0000000..7d2e6dc
--- /dev/null
+++ b/ruoyi-ui/src/views/officialWebsite/cases.vue
@@ -0,0 +1,599 @@
+<template>
+  <div class="container">
+    <div class="top-box">
+      <div class="tab-box">
+        <!-- left -->
+        <div class="d-s">
+          <div class="logo-box"></div>
+          <div class="logo-size">
+            虚拟仿真实验教学中心
+          </div>
+        </div>
+        <!-- tab -->
+        <div class="d-s">
+          <div class="x-x" v-for="(item, index) in tablist " :key="index">
+            {{ item.name }}
+          </div>
+        </div>
+        <!-- right -->
+        <div class="d-s" style="font-size: 20px; color: #fff;">
+          <i class="el-icon-search"></i>
+          <div style="font-size: 18px;  margin-left: 15px; ">搜索</div>
+        </div>
+      </div>
+
+      <div class="ny-banner">
+        <img src="../../assets/gw/ny-banner.jpg" alt="">
+      </div>
+    </div>
+
+    <div class="navigation">
+      <div class="content">
+        <div class="left"> <img src="../../assets/gw/home.png" alt="">
+          <p><span href="/">首页</span><i class="el-icon-arrow-right"></i> <span href="">中心简介</span></p>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="list">
+      <div class="item" v-for="(item, index) in 8" :key="index">
+        <div class="img">
+          <img src="../../assets/gw/Snipaste_2024-07-24_21-58-16.jpg" alt="" class="">
+        </div>
+        <div class="tt">船舶轮机实训虚拟仿真项目</div>
+
+      </div>
+    </div>
+
+    <div class="page">
+      <el-pagination background layout="prev, pager, next" :total="1000" class="">
+      </el-pagination>
+    </div>
+
+    <div class="index-footer">
+      <div class="footer">
+        <div class="logo">
+          <div class="d-s">
+            <div class="logo-box"></div>
+            <div class="logo-size">
+              虚拟仿真实验教学中心
+            </div>
+          </div>
+          <div class="footer-contact">
+            <div class="p">
+
+              <img src="../../assets/gw/tel.png" alt="">
+              <div class="pp">电话：0000-00000000</div>
+
+            </div>
+
+            <div class="p">
+
+              <img src="../../assets/gw/email.png" alt="">
+              <div class="pp">邮箱：XXXXXXXXXXX@163.com</div>
+
+            </div>
+            <div class="p">
+
+              <img src="../../assets/gw/address.png" alt="">
+              <div class="pp">地址：黑龙江省哈尔滨市南岗区西大直街92号</div>
+
+            </div>
+
+
+          </div>
+        </div>
+        <div class="footer-nav">
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">虚仿专业频道</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">教学团队</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">教学研讨活动</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+        </div>
+        <div class="web_icp">
+          <div class="left">
+            <a href="">版权所有：XXXXXX</a>
+            <a href="">版权所有：XXXXXX</a>
+          </div>
+          <div class="right">
+            <div class="">返回顶部</div>
+            <img src="../../assets/gw/top.png" alt="">
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import "swiper/css/swiper.min.css";
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  },
+  data() {
+    return {
+      tablist: [
+        { name: '首页' },
+        { name: '中心概括' },
+        { name: '教学资源' },
+        { name: '教学平台' },
+        { name: '教学团队' },
+        { name: '专业委员会' },
+        { name: '教学研讨活动' },
+        { name: '虚仿专业频道' },
+        { name: '大赛风采' },
+        { name: '实践平台' },
+        { name: '合作企业' },
+        { name: '联系我们' },
+      ],
+
+      nav: [
+        { name: '教学团队' },
+        { name: '教学成果' },
+      ],
+      currentActive: 0,
+      isMounted: false,
+
+    }
+  },
+  computed: {
+
+  },
+
+  methods: {
+    // 触发导航
+    getCurrentActive(value) {
+      if (this.currentActive == value) {
+        return
+      }
+      this.currentActive = value
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+.container {
+  background: #F5F5F5;
+}
+
+.bj {
+  background: #F5F5F5;
+}
+
+::v-deep .team .el-input__inner {
+  width: 240px;
+  border-radius: 50px;
+}
+
+/* 圆形分页按钮样式 */
+::v-deep .el-pagination .el-pager li:not(.disabled) {
+  border-radius: 100%;
+  /* 圆形 */
+  width: 50px;
+  height: 50px;
+  /* 按钮高度 */
+  line-height: 50px;
+  /* 文字垂直居中 */
+  text-align: center;
+  /* 文字水平居中 */
+  margin: 0 15px;
+  /* 按钮间距 */
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  background: #FFFFFF;
+
+  border: 1px solid #DDDDDD;
+}
+
+/* 选中的页码按钮样式 */
+::v-deep .el-pagination .el-pager .active {
+  background-color: #005375;
+  ;
+  /* 背景颜色 */
+  color: #fff;
+  /* 文字颜色 */
+}
+
+::v-deep .el-pagination.is-background .btn-next,
+::v-deep .el-pagination.is-background .btn-prev {
+
+  background-color: #f4f4f5;
+  color: #333;
+  margin: 0 15px;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  background: #FFFFFF;
+
+  border: 1px solid #DDDDDD;
+}
+
+::v-deep .el-pagination .btn-next .el-icon,
+::v-deep .el-pagination .btn-prev .el-icon {
+  font-size: 18px;
+}
+
+.top-box {
+  width: 100%;
+  /* height: 1000px; */
+  /* background: url(''); */
+  /* background-size: cover; */
+  /* 背景图片铺满盒子 */
+  /* background-repeat: no-repeat; */
+  /* 禁止背景图片重复 */
+  position: relative;
+}
+
+.tab-box {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20px 2%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  background-color: #005375;
+  font-weight: bold;
+  font-size: 18px;
+  color: #FFFFFF;
+  /* position: absolute; */
+  z-index: 3;
+
+}
+
+.d-s {
+  display: flex;
+  align-items: center;
+}
+
+.logo-box {
+  width: 50px;
+  height: 50px;
+  background: #fff;
+}
+
+.logo-size {
+  font-weight: 800;
+  font-size: 24px;
+  color: #FFFFFF;
+  margin-left: 20px;
+
+}
+
+.x-x {
+  margin-right: 20px;
+  cursor: pointer;
+}
+
+.ny-banner {
+  width: 100%;
+}
+
+.ny-banner img {
+  width: 100%;
+}
+
+.navigation {
+  width: 100%;
+  height: 60px;
+  background: #FFFFFF;
+  border-radius: 0px 0px 0px 0px;
+  border-bottom: 1px solid #EEEEEE;
+}
+
+.navigation .content {
+  width: 80%;
+  margin: 0 auto;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center
+}
+
+.navigation .content .left {
+  width: 30%;
+  display: flex;
+
+  align-items: center
+}
+
+.navigation img {
+
+  width: 15px;
+  margin-right: 10px;
+}
+
+.navigation p {
+
+  /* margin-top: 5px; */
+  color: #999;
+}
+
+.navigation span {
+
+  color: #999;
+}
+
+.navigation span:last-child {
+  font-weight: 700;
+  color: #005375;
+}
+
+.navigation .content .right {
+  width: 70%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center
+}
+
+.navigation .content .right .nav-item {
+  width: 200px;
+  display: flex;
+  height: 60px;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  cursor: pointer;
+  font-weight: 500;
+  border-bottom: 3px solid transparent;
+}
+
+.navigation .content .right .active {
+  border-bottom: 3px solid #005375;
+  color: #005375;
+  font-weight: bold;
+}
+
+
+
+.list {
+  width: 80%;
+  margin: 30px auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-top: 50px;
+
+}
+
+.list .item {
+  width: 23%;
+  height: 220px;
+  margin-bottom: 30px;
+  position: relative;
+  background-color: #fff;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.list .item .img {
+  width: 100%;
+  height: 220px;
+  border-radius: 0px 0px 0px 0px;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.list .item .img img {
+  width: 75%;
+}
+
+.list .item .tt {
+  font-size: 20px;
+
+  position: absolute;
+  width: 94%;
+  height: 94%;
+  font-weight: 500;
+  font-size: 20px;
+  color: #FFFFFF;
+  line-height: 35px;
+  padding: 3%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgba(0, 83, 117, 0.9);
+  top: 100%;
+  left: 0;
+  transition: 0.5s ease;
+}
+.list .item:hover .tt{
+  top: 0%;
+}
+
+.index-footer {
+  background: #383838;
+  padding-top: 30px;
+}
+
+.index-footer .footer {
+  width: 80%;
+  margin: 0 auto;
+}
+
+.index-footer .footer .logo {
+  display: flex;
+  justify-content: space-between;
+  /* align-items: center; */
+}
+
+.index-footer .footer .logo .footer-contact {}
+
+.index-footer .footer .logo .footer-contact .p {
+  display: inline-block;
+  display: flex;
+  float: left;
+  margin-left: 50px;
+  align-items: center;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 16px;
+  /* justify-content: flex-end; */
+}
+
+.index-footer .footer .logo .footer-contact .p img {
+  margin-right: 10px;
+}
+
+.index-footer .footer .logo .footer-contact .p:nth-child(3) {
+  width: 100%;
+  clear: both;
+  margin-top: 20px;
+}
+
+.index-footer .footer .footer-nav {
+  display: flex;
+  margin-top: 20px;
+  padding-top: 30px;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.index-footer .footer .footer-nav .footer-nav-item {
+  width: 9%;
+  margin-right: 1%;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item:last-child {
+  margin-right: 0;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item .tt {
+
+  font-weight: 500;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 18px;
+  position: relative;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item .tt::after {
+  content: "";
+  width: 20px;
+  height: 2px;
+  background: #005375;
+  border-radius: 0px 0px 0px 0px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item a {
+  text-decoration: none;
+
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 16px;
+  display: block;
+  margin-bottom: 15px;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item a:last-child {
+  margin-bottom: 0;
+}
+
+.index-footer .footer .web_icp {
+  display: flex;
+  margin-top: 50px;
+  height: 80px;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.index-footer .footer .web_icp a {
+  text-decoration: none;
+
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 16px;
+  margin-right: 30px;
+}
+
+.index-footer .footer .web_icp .right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end
+}
+
+.index-footer .footer .web_icp .right div {
+  margin-right: 25px;
+
+  font-weight: 500;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 18px;
+
+}
+</style>
diff --git a/ruoyi-ui/src/views/officialWebsite/committee.vue b/ruoyi-ui/src/views/officialWebsite/committee.vue
new file mode 100644
index 0000000..8e5ceb2
--- /dev/null
+++ b/ruoyi-ui/src/views/officialWebsite/committee.vue
@@ -0,0 +1,692 @@
+<template>
+  <div class="container">
+    <div class="top-box">
+      <div class="tab-box">
+        <!-- left -->
+        <div class="d-s">
+          <div class="logo-box"></div>
+          <div class="logo-size">
+            虚拟仿真实验教学中心
+          </div>
+        </div>
+        <!-- tab -->
+        <div class="d-s">
+          <div class="x-x" v-for="(item, index) in tablist " :key="index">
+            {{ item.name }}
+          </div>
+        </div>
+        <!-- right -->
+        <div class="d-s" style="font-size: 20px; color: #fff;">
+          <i class="el-icon-search"></i>
+          <div style="font-size: 18px;  margin-left: 15px; ">搜索</div>
+        </div>
+      </div>
+
+      <div class="ny-banner">
+        <img src="../../assets/gw/ny-banner.jpg" alt="">
+      </div>
+    </div>
+    <!-- new -->
+    <div class="navigation">
+      <div class="content">
+        <div class="left"> <img src="../../assets/gw/home.png" alt="">
+          <p><span href="/">首页</span><i class="el-icon-arrow-right"></i> <span href="">中心简介</span></p>
+        </div>
+        <div class="right">
+          <div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"
+            @click="getCurrentActive(index)">
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="committee-cont">
+      <div class="news" v-if="currentActive == 0">
+        <div class="news-list">
+          <div class="item" v-for="(item, index) in 8">
+            <div class="tts">
+              关于开展第二届跨专业虚拟仿真综合实习的通知关于开展第二届跨专业虚拟仿真综合实习的通知关于开展第二届跨专业虚拟仿真综合实习的通知关于开展第二届跨专业虚拟仿真综合实习的通知关于开展第二届跨专业虚拟仿真综合实习的通知
+            </div>
+            <div class="time">2024-05-20</div>
+          </div>
+        </div>
+        <div class="page">
+          <el-pagination background layout="prev, pager, next" :total="1000" class="">
+          </el-pagination>
+        </div>
+
+      </div>
+      <div class="team" v-if="currentActive == 1 || currentActive == 2">
+        <el-input placeholder="输入姓名或手机号查询" v-model="input4">
+          <i slot="prefix" class="el-input__icon el-icon-search"></i>
+        </el-input>
+        <div class="team-list">
+          <div class="team-list-header">
+            <div class="div">
+              职位
+            </div>
+            <div class="div">
+              姓名
+            </div>
+            <div class="div">
+              职称
+            </div>
+            <div class="div">
+              联系方式
+            </div>
+            <div class="div">
+              职务
+            </div>
+            <div class="div">
+              工作单位
+            </div>
+            <div class="div">
+              详情
+            </div>
+          </div>
+          <div class="item" v-for="(item, index) in 8">
+            <div class="div">
+              主任
+            </div>
+            <div class="div">
+              钟离
+            </div>
+            <div class="div">
+              教授
+            </div>
+            <div class="div">
+              18865889666
+            </div>
+            <div class="div">
+              常务副校长
+            </div>
+            <div class="div">
+              齐鲁工业大学
+            </div>
+            <div class="div">
+              查看
+            </div>
+          </div>
+        </div>
+        <div class="page">
+          <el-pagination background layout="prev, pager, next" :total="1000" class="">
+          </el-pagination>
+        </div>
+      </div>
+    </div>
+
+    <div class="index-footer">
+      <div class="footer">
+        <div class="logo">
+          <div class="d-s">
+            <div class="logo-box"></div>
+            <div class="logo-size">
+              虚拟仿真实验教学中心
+            </div>
+          </div>
+          <div class="footer-contact">
+            <div class="p">
+
+              <img src="../../assets/gw/tel.png" alt="">
+              <div class="pp">电话：0000-00000000</div>
+
+            </div>
+
+            <div class="p">
+
+              <img src="../../assets/gw/email.png" alt="">
+              <div class="pp">邮箱：XXXXXXXXXXX@163.com</div>
+
+            </div>
+            <div class="p">
+
+              <img src="../../assets/gw/address.png" alt="">
+              <div class="pp">地址：黑龙江省哈尔滨市南岗区西大直街92号</div>
+
+            </div>
+
+
+          </div>
+        </div>
+        <div class="footer-nav">
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">虚仿专业频道</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">教学团队</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">教学研讨活动</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+        </div>
+        <div class="web_icp">
+          <div class="left">
+            <a href="">版权所有：XXXXXX</a>
+            <a href="">版权所有：XXXXXX</a>
+          </div>
+          <div class="right">
+            <div class="">返回顶部</div>
+            <img src="../../assets/gw/top.png" alt="">
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import "swiper/css/swiper.min.css";
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  },
+  data() {
+    return {
+      tablist: [
+        { name: '首页' },
+        { name: '中心概括' },
+        { name: '教学资源' },
+        { name: '教学平台' },
+        { name: '教学团队' },
+        { name: '专业委员会' },
+        { name: '教学研讨活动' },
+        { name: '虚仿专业频道' },
+        { name: '大赛风采' },
+        { name: '实践平台' },
+        { name: '合作企业' },
+        { name: '联系我们' },
+      ],
+      nav: [
+        { name: '工作动态' },
+        { name: '组织架构' },
+        { name: '成员信息' },
+      ],
+      currentActive: 1,
+      isMounted: false,
+      input4: ""
+    }
+  },
+  computed: {
+
+  },
+
+  methods: {
+    // 触发导航
+    getCurrentActive(value) {
+      if (this.currentActive == value) {
+        return
+      }
+      this.currentActive = value
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+/* .container {
+  background: #F5F5F5;
+} */
+.bj {
+  background: #F5F5F5;
+}
+
+::v-deep .team .el-input__inner {
+  width: 240px;
+  border-radius: 50px;
+}
+
+/* 圆形分页按钮样式 */
+::v-deep .el-pagination .el-pager li:not(.disabled) {
+  border-radius: 100%;
+  /* 圆形 */
+  width: 50px;
+  height: 50px;
+  /* 按钮高度 */
+  line-height: 50px;
+  /* 文字垂直居中 */
+  text-align: center;
+  /* 文字水平居中 */
+  margin: 0 15px;
+  /* 按钮间距 */
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  background: #FFFFFF;
+
+  border: 1px solid #DDDDDD;
+}
+
+/* 选中的页码按钮样式 */
+::v-deep .el-pagination .el-pager .active {
+  background-color: #005375;
+  ;
+  /* 背景颜色 */
+  color: #fff;
+  /* 文字颜色 */
+}
+
+::v-deep .el-pagination.is-background .btn-next,
+::v-deep .el-pagination.is-background .btn-prev {
+
+  background-color: #f4f4f5;
+  color: #333;
+  margin: 0 15px;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  background: #FFFFFF;
+
+  border: 1px solid #DDDDDD;
+}
+
+::v-deep .el-pagination .btn-next .el-icon,
+::v-deep .el-pagination .btn-prev .el-icon {
+  font-size: 18px;
+}
+
+.top-box {
+  width: 100%;
+  /* height: 1000px; */
+  /* background: url(''); */
+  /* background-size: cover; */
+  /* 背景图片铺满盒子 */
+  /* background-repeat: no-repeat; */
+  /* 禁止背景图片重复 */
+  position: relative;
+}
+
+.tab-box {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20px 2%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  background-color: #005375;
+  font-weight: bold;
+  font-size: 18px;
+  color: #FFFFFF;
+  /* position: absolute; */
+  z-index: 3;
+
+}
+
+.d-s {
+  display: flex;
+  align-items: center;
+}
+
+.logo-box {
+  width: 50px;
+  height: 50px;
+  background: #fff;
+}
+
+.logo-size {
+  font-weight: 800;
+  font-size: 24px;
+  color: #FFFFFF;
+  margin-left: 20px;
+
+}
+
+.x-x {
+  margin-right: 20px;
+  cursor: pointer;
+}
+
+.ny-banner {
+  width: 100%;
+}
+
+.ny-banner img {
+  width: 100%;
+}
+
+.navigation {
+  width: 100%;
+  height: 60px;
+  background: #FFFFFF;
+  border-radius: 0px 0px 0px 0px;
+  border-bottom: 1px solid #EEEEEE;
+}
+
+.navigation .content {
+  width: 80%;
+  margin: 0 auto;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center
+}
+
+.navigation .content .left {
+  width: 30%;
+  display: flex;
+
+  align-items: center
+}
+
+.navigation img {
+
+  width: 15px;
+  margin-right: 10px;
+}
+
+.navigation p {
+
+  /* margin-top: 5px; */
+  color: #999;
+}
+
+.navigation span {
+
+  color: #999;
+}
+
+.navigation span:last-child {
+  font-weight: 700;
+  color: #005375;
+}
+
+.navigation .content .right {
+  width: 70%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center
+}
+
+.navigation .content .right .nav-item {
+  width: 200px;
+  display: flex;
+  height: 60px;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  cursor: pointer;
+  font-weight: 500;
+  border-bottom: 3px solid transparent;
+}
+
+.navigation .content .right .active {
+  border-bottom: 3px solid #005375;
+  color: #005375;
+  font-weight: bold;
+}
+
+.committee-cont {
+  padding: 30px 0;
+}
+
+.committee-cont .news {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 30px;
+}
+
+.committee-cont .news .news-list .item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 30px;
+  margin-bottom: 30px;
+  cursor: pointer;
+  border-bottom: 1px solid #EEEEEE;
+}
+
+.committee-cont .news .news-list .item .tts {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 80%;
+  font-size: 20px;
+  color: #333333;
+  font-weight: 500;
+}
+
+.committee-cont .news .news-list .item .time {
+  color: #999999;
+  font-size: 14px;
+}
+
+.committee-cont .team {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 30px;
+}
+
+.committee-cont .team .team-list {
+  border: 1px solid #EEEEEE;
+  margin-top: 30px;
+}
+
+.committee-cont .team .team-list .team-list-header {
+  display: flex;
+  height: 50px;
+  align-items: center;
+  background: #F2F3F5;
+}
+
+.committee-cont .team .team-list .team-list-header .div {
+  width: 20%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  padding-left: 2%;
+  border-right: 1px solid #EEEEEE;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.committee-cont .team .team-list .team-list-header .div:last-child {
+  width: 8%;
+}
+
+.committee-cont .team .team-list .item {
+  display: flex;
+  height: 50px;
+  align-items: center;
+}
+
+.committee-cont .team .team-list .item .div {
+  width: 20%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  padding-left: 2%;
+  border-right: 1px solid #EEEEEE;
+  font-size: 16px;
+}
+
+.committee-cont .team .team-list .item .div:last-child {
+  width: 8%;
+  color: #005375;
+}
+
+.index-footer {
+  background: #383838;
+  padding-top: 30px;
+}
+
+.index-footer .footer {
+  width: 80%;
+  margin: 0 auto;
+}
+
+.index-footer .footer .logo {
+  display: flex;
+  justify-content: space-between;
+  /* align-items: center; */
+}
+
+.index-footer .footer .logo .footer-contact {}
+
+.index-footer .footer .logo .footer-contact .p {
+  display: inline-block;
+  display: flex;
+  float: left;
+  margin-left: 50px;
+  align-items: center;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 16px;
+  /* justify-content: flex-end; */
+}
+
+.index-footer .footer .logo .footer-contact .p img {
+  margin-right: 10px;
+}
+
+.index-footer .footer .logo .footer-contact .p:nth-child(3) {
+  width: 100%;
+  clear: both;
+  margin-top: 20px;
+}
+
+.index-footer .footer .footer-nav {
+  display: flex;
+  margin-top: 20px;
+  padding-top: 30px;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.index-footer .footer .footer-nav .footer-nav-item {
+  width: 9%;
+  margin-right: 1%;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item:last-child {
+  margin-right: 0;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item .tt {
+
+  font-weight: 500;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 18px;
+  position: relative;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item .tt::after {
+  content: "";
+  width: 20px;
+  height: 2px;
+  background: #005375;
+  border-radius: 0px 0px 0px 0px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item a {
+  text-decoration: none;
+
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 16px;
+  display: block;
+  margin-bottom: 15px;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item a:last-child {
+  margin-bottom: 0;
+}
+
+.index-footer .footer .web_icp {
+  display: flex;
+  margin-top: 50px;
+  height: 80px;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.index-footer .footer .web_icp a {
+  text-decoration: none;
+
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 16px;
+  margin-right: 30px;
+}
+
+.index-footer .footer .web_icp .right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end
+}
+
+.index-footer .footer .web_icp .right div {
+  margin-right: 25px;
+
+  font-weight: 500;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 18px;
+
+}
+</style>
diff --git a/ruoyi-ui/src/views/officialWebsite/competition.vue b/ruoyi-ui/src/views/officialWebsite/competition.vue
new file mode 100644
index 0000000..1c488b1
--- /dev/null
+++ b/ruoyi-ui/src/views/officialWebsite/competition.vue
@@ -0,0 +1,638 @@
+<template>
+  <div class="container">
+    <div class="top-box">
+      <div class="tab-box">
+        <!-- left -->
+        <div class="d-s">
+          <div class="logo-box"></div>
+          <div class="logo-size">
+            虚拟仿真实验教学中心
+          </div>
+        </div>
+        <!-- tab -->
+        <div class="d-s">
+          <div class="x-x" v-for="(item, index) in tablist " :key="index">
+            {{ item.name }}
+          </div>
+        </div>
+        <!-- right -->
+        <div class="d-s" style="font-size: 20px; color: #fff;">
+          <i class="el-icon-search"></i>
+          <div style="font-size: 18px;  margin-left: 15px; ">搜索</div>
+        </div>
+      </div>
+
+      <div class="ny-banner">
+        <img src="../../assets/gw/ny-banner.jpg" alt="">
+      </div>
+    </div>
+    <!-- new -->
+    <div class="navigation">
+      <div class="content">
+        <div class="left"> <img src="../../assets/gw/home.png" alt="">
+          <p><span href="/">首页</span><i class="el-icon-arrow-right"></i> <span href="">中心简介</span></p>
+        </div>
+        <div class="right">
+          <div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"
+            @click="getCurrentActive(index)">
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="committee-cont">
+      <div class="news">
+        <div class="news-list">
+          <div class="item" v-for="(item, index) in 8">
+            <div class="tts">
+              关于开展第二届跨专业虚拟仿真综合实习的通知关于开展第二届跨专业虚拟仿真综合实习的通知关于开展第二届跨专业虚拟仿真综合实习的通知关于开展第二届跨专业虚拟仿真综合实习的通知关于开展第二届跨专业虚拟仿真综合实习的通知
+            </div>
+            <div class="time">2024-05-20</div>
+          </div>
+        </div>
+        <div class="page">
+          <el-pagination background layout="prev, pager, next" :total="1000" class="">
+          </el-pagination>
+        </div>
+
+      </div>
+
+    </div>
+
+    <div class="index-footer">
+      <div class="footer">
+        <div class="logo">
+          <div class="d-s">
+            <div class="logo-box"></div>
+            <div class="logo-size">
+              虚拟仿真实验教学中心
+            </div>
+          </div>
+          <div class="footer-contact">
+            <div class="p">
+
+              <img src="../../assets/gw/tel.png" alt="">
+              <div class="pp">电话：0000-00000000</div>
+
+            </div>
+
+            <div class="p">
+
+              <img src="../../assets/gw/email.png" alt="">
+              <div class="pp">邮箱：XXXXXXXXXXX@163.com</div>
+
+            </div>
+            <div class="p">
+
+              <img src="../../assets/gw/address.png" alt="">
+              <div class="pp">地址：黑龙江省哈尔滨市南岗区西大直街92号</div>
+
+            </div>
+
+
+          </div>
+        </div>
+        <div class="footer-nav">
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">虚仿专业频道</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">教学团队</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">教学研讨活动</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+        </div>
+        <div class="web_icp">
+          <div class="left">
+            <a href="">版权所有：XXXXXX</a>
+            <a href="">版权所有：XXXXXX</a>
+          </div>
+          <div class="right">
+            <div class="">返回顶部</div>
+            <img src="../../assets/gw/top.png" alt="">
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import "swiper/css/swiper.min.css";
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  },
+  data() {
+    return {
+      tablist: [
+        { name: '首页' },
+        { name: '中心概括' },
+        { name: '教学资源' },
+        { name: '教学平台' },
+        { name: '教学团队' },
+        { name: '专业委员会' },
+        { name: '教学研讨活动' },
+        { name: '虚仿专业频道' },
+        { name: '大赛风采' },
+        { name: '实践平台' },
+        { name: '合作企业' },
+        { name: '联系我们' },
+      ],
+      nav: [
+        { name: '大赛信息' },
+        { name: '比赛通知' },
+        { name: '报名信息' },
+        { name: '获奖信息' },
+        { name: '赛事风采' },
+      ],
+      currentActive: 1,
+      isMounted: false,
+      input4: ""
+    }
+  },
+  computed: {
+
+  },
+
+  methods: {
+    // 触发导航
+    getCurrentActive(value) {
+      if (this.currentActive == value) {
+        return
+      }
+      this.currentActive = value
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+/* .container {
+  background: #F5F5F5;
+} */
+.bj {
+  background: #F5F5F5;
+}
+
+::v-deep .team .el-input__inner {
+  width: 240px;
+  border-radius: 50px;
+}
+
+/* 圆形分页按钮样式 */
+::v-deep .el-pagination .el-pager li:not(.disabled) {
+  border-radius: 100%;
+  /* 圆形 */
+  width: 50px;
+  height: 50px;
+  /* 按钮高度 */
+  line-height: 50px;
+  /* 文字垂直居中 */
+  text-align: center;
+  /* 文字水平居中 */
+  margin: 0 15px;
+  /* 按钮间距 */
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  background: #FFFFFF;
+
+  border: 1px solid #DDDDDD;
+}
+
+/* 选中的页码按钮样式 */
+::v-deep .el-pagination .el-pager .active {
+  background-color: #005375;
+  ;
+  /* 背景颜色 */
+  color: #fff;
+  /* 文字颜色 */
+}
+
+::v-deep .el-pagination.is-background .btn-next,
+::v-deep .el-pagination.is-background .btn-prev {
+
+  background-color: #f4f4f5;
+  color: #333;
+  margin: 0 15px;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  background: #FFFFFF;
+
+  border: 1px solid #DDDDDD;
+}
+
+::v-deep .el-pagination .btn-next .el-icon,
+::v-deep .el-pagination .btn-prev .el-icon {
+  font-size: 18px;
+}
+
+.top-box {
+  width: 100%;
+  /* height: 1000px; */
+  /* background: url(''); */
+  /* background-size: cover; */
+  /* 背景图片铺满盒子 */
+  /* background-repeat: no-repeat; */
+  /* 禁止背景图片重复 */
+  position: relative;
+}
+
+.tab-box {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20px 2%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  background-color: #005375;
+  font-weight: bold;
+  font-size: 18px;
+  color: #FFFFFF;
+  /* position: absolute; */
+  z-index: 3;
+
+}
+
+.d-s {
+  display: flex;
+  align-items: center;
+}
+
+.logo-box {
+  width: 50px;
+  height: 50px;
+  background: #fff;
+}
+
+.logo-size {
+  font-weight: 800;
+  font-size: 24px;
+  color: #FFFFFF;
+  margin-left: 20px;
+
+}
+
+.x-x {
+  margin-right: 20px;
+  cursor: pointer;
+}
+
+.ny-banner {
+  width: 100%;
+}
+
+.ny-banner img {
+  width: 100%;
+}
+
+.navigation {
+  width: 100%;
+  height: 60px;
+  background: #FFFFFF;
+  border-radius: 0px 0px 0px 0px;
+  border-bottom: 1px solid #EEEEEE;
+}
+
+.navigation .content {
+  width: 80%;
+  margin: 0 auto;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center
+}
+
+.navigation .content .left {
+  width: 30%;
+  display: flex;
+
+  align-items: center
+}
+
+.navigation img {
+
+  width: 15px;
+  margin-right: 10px;
+}
+
+.navigation p {
+
+  /* margin-top: 5px; */
+  color: #999;
+}
+
+.navigation span {
+
+  color: #999;
+}
+
+.navigation span:last-child {
+  font-weight: 700;
+  color: #005375;
+}
+
+.navigation .content .right {
+  width: 70%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center
+}
+
+.navigation .content .right .nav-item {
+  width: 200px;
+  display: flex;
+  height: 60px;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  cursor: pointer;
+  font-weight: 500;
+  border-bottom: 3px solid transparent;
+}
+
+.navigation .content .right .active {
+  border-bottom: 3px solid #005375;
+  color: #005375;
+  font-weight: bold;
+}
+
+.committee-cont {
+  padding: 30px 0;
+}
+
+.committee-cont .news {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 30px;
+}
+
+.committee-cont .news .news-list .item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 30px;
+  margin-bottom: 30px;
+  cursor: pointer;
+  border-bottom: 1px solid #EEEEEE;
+}
+
+.committee-cont .news .news-list .item .tts {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  width: 80%;
+  font-size: 20px;
+  color: #333333;
+  font-weight: 500;
+}
+
+.committee-cont .news .news-list .item .time {
+  color: #999999;
+  font-size: 14px;
+}
+
+.committee-cont .team {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 30px;
+}
+
+.committee-cont .team .team-list {
+  border: 1px solid #EEEEEE;
+  margin-top: 30px;
+}
+
+.committee-cont .team .team-list .team-list-header {
+  display: flex;
+  height: 50px;
+  align-items: center;
+  background: #F2F3F5;
+}
+
+.committee-cont .team .team-list .team-list-header .div {
+  width: 20%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  padding-left: 2%;
+  border-right: 1px solid #EEEEEE;
+  font-size: 16px;
+  font-weight: bold;
+}
+
+.committee-cont .team .team-list .team-list-header .div:last-child {
+  width: 8%;
+}
+
+.committee-cont .team .team-list .item {
+  display: flex;
+  height: 50px;
+  align-items: center;
+}
+
+.committee-cont .team .team-list .item .div {
+  width: 20%;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  padding-left: 2%;
+  border-right: 1px solid #EEEEEE;
+  font-size: 16px;
+}
+
+.committee-cont .team .team-list .item .div:last-child {
+  width: 8%;
+  color: #005375;
+}
+
+.index-footer {
+  background: #383838;
+  padding-top: 30px;
+}
+
+.index-footer .footer {
+  width: 80%;
+  margin: 0 auto;
+}
+
+.index-footer .footer .logo {
+  display: flex;
+  justify-content: space-between;
+  /* align-items: center; */
+}
+
+.index-footer .footer .logo .footer-contact {}
+
+.index-footer .footer .logo .footer-contact .p {
+  display: inline-block;
+  display: flex;
+  float: left;
+  margin-left: 50px;
+  align-items: center;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 16px;
+  /* justify-content: flex-end; */
+}
+
+.index-footer .footer .logo .footer-contact .p img {
+  margin-right: 10px;
+}
+
+.index-footer .footer .logo .footer-contact .p:nth-child(3) {
+  width: 100%;
+  clear: both;
+  margin-top: 20px;
+}
+
+.index-footer .footer .footer-nav {
+  display: flex;
+  margin-top: 20px;
+  padding-top: 30px;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.index-footer .footer .footer-nav .footer-nav-item {
+  width: 9%;
+  margin-right: 1%;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item:last-child {
+  margin-right: 0;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item .tt {
+
+  font-weight: 500;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 18px;
+  position: relative;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item .tt::after {
+  content: "";
+  width: 20px;
+  height: 2px;
+  background: #005375;
+  border-radius: 0px 0px 0px 0px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item a {
+  text-decoration: none;
+
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 16px;
+  display: block;
+  margin-bottom: 15px;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item a:last-child {
+  margin-bottom: 0;
+}
+
+.index-footer .footer .web_icp {
+  display: flex;
+  margin-top: 50px;
+  height: 80px;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.index-footer .footer .web_icp a {
+  text-decoration: none;
+
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 16px;
+  margin-right: 30px;
+}
+
+.index-footer .footer .web_icp .right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end
+}
+
+.index-footer .footer .web_icp .right div {
+  margin-right: 25px;
+
+  font-weight: 500;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 18px;
+
+}
+</style>
diff --git a/ruoyi-ui/src/views/officialWebsite/contact.vue b/ruoyi-ui/src/views/officialWebsite/contact.vue
new file mode 100644
index 0000000..e0f5be1
--- /dev/null
+++ b/ruoyi-ui/src/views/officialWebsite/contact.vue
@@ -0,0 +1,652 @@
+<template>
+  <div class="container">
+    <div class="top-box">
+      <div class="tab-box">
+        <!-- left -->
+        <div class="d-s">
+          <div class="logo-box"></div>
+          <div class="logo-size">
+            虚拟仿真实验教学中心
+          </div>
+        </div>
+        <!-- tab -->
+        <div class="d-s">
+          <div class="x-x" v-for="(item, index) in tablist " :key="index">
+            {{ item.name }}
+          </div>
+        </div>
+        <!-- right -->
+        <div class="d-s" style="font-size: 20px; color: #fff;">
+          <i class="el-icon-search"></i>
+          <div style="font-size: 18px;  margin-left: 15px; ">搜索</div>
+        </div>
+      </div>
+
+      <div class="ny-banner">
+        <img src="../../assets/gw/ny-banner.jpg" alt="">
+      </div>
+    </div>
+
+    <div class="navigation">
+      <div class="content">
+        <div class="left"> <img src="../../assets/gw/home.png" alt="">
+          <p><span href="/">首页</span><i class="el-icon-arrow-right"></i> <span href="">中心简介</span></p>
+        </div>
+
+      </div>
+    </div>
+    <div class="contact">
+      <div class="info">
+        <div class="info-item">
+          <img src="../../assets/gw/Group780.png" alt="">
+          <div class="p">中心地址</div>
+          <div class="desc">黑龙江省哈尔滨市南岗区西大直街92号</div>
+        </div>
+        <div class="info-item">
+          <img src="../../assets/gw/Group783.png" alt="">
+          <div class="p">电话</div>
+          <div class="desc">0451-86686666</div>
+        </div>
+        <div class="info-item">
+          <img src="../../assets/gw/Group781.png" alt="">
+          <div class="p">邮箱</div>
+          <div class="desc">186841613@QQ.COM</div>
+        </div>
+        <div class="info-item">
+          <img src="../../assets/gw/Group782.png" alt="">
+          <div class="p">传真</div>
+          <div class="desc">0451-86686666</div>
+        </div>
+      </div>
+      <div class="map">
+        <img src="../../assets/gw/Snipaste_2024-07-24_22-28-43.jpg" alt="">
+      </div>
+    </div>
+    <div class="index-footer">
+      <div class="footer">
+        <div class="logo">
+          <div class="d-s">
+            <div class="logo-box"></div>
+            <div class="logo-size">
+              虚拟仿真实验教学中心
+            </div>
+          </div>
+          <div class="footer-contact">
+            <div class="p">
+
+              <img src="../../assets/gw/tel.png" alt="">
+              <div class="pp">电话：0000-00000000</div>
+
+            </div>
+
+            <div class="p">
+
+              <img src="../../assets/gw/email.png" alt="">
+              <div class="pp">邮箱：XXXXXXXXXXX@163.com</div>
+
+            </div>
+            <div class="p">
+
+              <img src="../../assets/gw/address.png" alt="">
+              <div class="pp">地址：黑龙江省哈尔滨市南岗区西大直街92号</div>
+
+            </div>
+
+
+          </div>
+        </div>
+        <div class="footer-nav">
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">虚仿专业频道</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">教学团队</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">教学研讨活动</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+        </div>
+        <div class="web_icp">
+          <div class="left">
+            <a href="">版权所有：XXXXXX</a>
+            <a href="">版权所有：XXXXXX</a>
+          </div>
+          <div class="right">
+            <div class="">返回顶部</div>
+            <img src="../../assets/gw/top.png" alt="">
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import "swiper/css/swiper.min.css";
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  },
+  data() {
+    return {
+      tablist: [
+        { name: '首页' },
+        { name: '中心概括' },
+        { name: '教学资源' },
+        { name: '教学平台' },
+        { name: '教学团队' },
+        { name: '专业委员会' },
+        { name: '教学研讨活动' },
+        { name: '虚仿专业频道' },
+        { name: '大赛风采' },
+        { name: '实践平台' },
+        { name: '合作企业' },
+        { name: '联系我们' },
+      ],
+
+      nav: [
+        { name: '教学团队' },
+        { name: '教学成果' },
+      ],
+      currentActive: 0,
+      isMounted: false,
+
+    }
+  },
+  computed: {
+
+  },
+
+  methods: {
+    // 触发导航
+    getCurrentActive(value) {
+      if (this.currentActive == value) {
+        return
+      }
+      this.currentActive = value
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+.container {
+  background: #F5F5F5;
+}
+
+.bj {
+  background: #F5F5F5;
+}
+
+::v-deep .team .el-input__inner {
+  width: 240px;
+  border-radius: 50px;
+}
+
+/* 圆形分页按钮样式 */
+::v-deep .el-pagination .el-pager li:not(.disabled) {
+  border-radius: 100%;
+  /* 圆形 */
+  width: 50px;
+  height: 50px;
+  /* 按钮高度 */
+  line-height: 50px;
+  /* 文字垂直居中 */
+  text-align: center;
+  /* 文字水平居中 */
+  margin: 0 15px;
+  /* 按钮间距 */
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  background: #FFFFFF;
+
+  border: 1px solid #DDDDDD;
+}
+
+/* 选中的页码按钮样式 */
+::v-deep .el-pagination .el-pager .active {
+  background-color: #005375;
+  ;
+  /* 背景颜色 */
+  color: #fff;
+  /* 文字颜色 */
+}
+
+::v-deep .el-pagination.is-background .btn-next,
+::v-deep .el-pagination.is-background .btn-prev {
+
+  background-color: #f4f4f5;
+  color: #333;
+  margin: 0 15px;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  background: #FFFFFF;
+
+  border: 1px solid #DDDDDD;
+}
+
+::v-deep .el-pagination .btn-next .el-icon,
+::v-deep .el-pagination .btn-prev .el-icon {
+  font-size: 18px;
+}
+
+.top-box {
+  width: 100%;
+  /* height: 1000px; */
+  /* background: url(''); */
+  /* background-size: cover; */
+  /* 背景图片铺满盒子 */
+  /* background-repeat: no-repeat; */
+  /* 禁止背景图片重复 */
+  position: relative;
+}
+
+.tab-box {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20px 2%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  background-color: #005375;
+  font-weight: bold;
+  font-size: 18px;
+  color: #FFFFFF;
+  /* position: absolute; */
+  z-index: 3;
+
+}
+
+.d-s {
+  display: flex;
+  align-items: center;
+}
+
+.logo-box {
+  width: 50px;
+  height: 50px;
+  background: #fff;
+}
+
+.logo-size {
+  font-weight: 800;
+  font-size: 24px;
+  color: #FFFFFF;
+  margin-left: 20px;
+
+}
+
+.x-x {
+  margin-right: 20px;
+  cursor: pointer;
+}
+
+.ny-banner {
+  width: 100%;
+}
+
+.ny-banner img {
+  width: 100%;
+}
+
+.navigation {
+  width: 100%;
+  height: 60px;
+  background: #FFFFFF;
+  border-radius: 0px 0px 0px 0px;
+  border-bottom: 1px solid #EEEEEE;
+}
+
+.navigation .content {
+  width: 80%;
+  margin: 0 auto;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center
+}
+
+.navigation .content .left {
+  width: 30%;
+  display: flex;
+
+  align-items: center
+}
+
+.navigation img {
+
+  width: 15px;
+  margin-right: 10px;
+}
+
+.navigation p {
+
+  /* margin-top: 5px; */
+  color: #999;
+}
+
+.navigation span {
+
+  color: #999;
+}
+
+.navigation span:last-child {
+  font-weight: 700;
+  color: #005375;
+}
+
+.navigation .content .right {
+  width: 70%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center
+}
+
+.navigation .content .right .nav-item {
+  width: 200px;
+  display: flex;
+  height: 60px;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  cursor: pointer;
+  font-weight: 500;
+  border-bottom: 3px solid transparent;
+}
+
+.navigation .content .right .active {
+  border-bottom: 3px solid #005375;
+  color: #005375;
+  font-weight: bold;
+}
+
+
+
+.contact {
+  width: 80%;
+  margin: 50px auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+
+}
+
+.contact .info {
+  width: 48%;
+  height: 468px;
+  background-color: #fff;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  border-radius: 20px 20px 0px 0px;
+  padding: 50px 0;
+  padding-bottom: 20px;
+}
+
+.contact .info::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 30px;
+  background: #005375;
+  border-radius: 20px 20px 0px 0px;
+}
+
+.contact .info .info-item {
+  width: 50%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  /* background-color: #f0f */
+}
+
+.contact .info .info-item .p {
+  font-size: 14px;
+  color: #999999;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.contact .info .info-item .desc {
+  width: 70%;
+  font-size: 18px;
+  color: #333333;
+  line-height: 30px;
+  text-align: center
+}
+
+.contact .info .info-item:nth-child(2n-1):after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 1px;
+  height: 100%;
+  background-color: #eee;
+}
+
+.contact .info .info-item:nth-child(1)::before {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #eee;
+}
+
+.contact .info .info-item:nth-child(2)::before {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #eee;
+}
+.contact .map {
+  width: 46%;
+  /* height: 468px; */
+  background: #F9F9F9;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  padding: 1%;
+}
+.contact .map img{
+  width: 100%;
+  height: 100%;
+}
+.index-footer {
+  background: #383838;
+  padding-top: 30px;
+}
+
+.index-footer .footer {
+  width: 80%;
+  margin: 0 auto;
+}
+
+.index-footer .footer .logo {
+  display: flex;
+  justify-content: space-between;
+  /* align-items: center; */
+}
+
+.index-footer .footer .logo .footer-contact {}
+
+.index-footer .footer .logo .footer-contact .p {
+  display: inline-block;
+  display: flex;
+  float: left;
+  margin-left: 50px;
+  align-items: center;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 16px;
+  /* justify-content: flex-end; */
+}
+
+.index-footer .footer .logo .footer-contact .p img {
+  margin-right: 10px;
+}
+
+.index-footer .footer .logo .footer-contact .p:nth-child(3) {
+  width: 100%;
+  clear: both;
+  margin-top: 20px;
+}
+
+.index-footer .footer .footer-nav {
+  display: flex;
+  margin-top: 20px;
+  padding-top: 30px;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.index-footer .footer .footer-nav .footer-nav-item {
+  width: 9%;
+  margin-right: 1%;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item:last-child {
+  margin-right: 0;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item .tt {
+
+  font-weight: 500;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 18px;
+  position: relative;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item .tt::after {
+  content: "";
+  width: 20px;
+  height: 2px;
+  background: #005375;
+  border-radius: 0px 0px 0px 0px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item a {
+  text-decoration: none;
+
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 16px;
+  display: block;
+  margin-bottom: 15px;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item a:last-child {
+  margin-bottom: 0;
+}
+
+.index-footer .footer .web_icp {
+  display: flex;
+  margin-top: 50px;
+  height: 80px;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.index-footer .footer .web_icp a {
+  text-decoration: none;
+
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 16px;
+  margin-right: 30px;
+}
+
+.index-footer .footer .web_icp .right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end
+}
+
+.index-footer .footer .web_icp .right div {
+  margin-right: 25px;
+
+  font-weight: 500;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 18px;
+
+}
+</style>
diff --git a/ruoyi-ui/src/views/officialWebsite/news.vue b/ruoyi-ui/src/views/officialWebsite/news.vue
new file mode 100644
index 0000000..78fd6a3
--- /dev/null
+++ b/ruoyi-ui/src/views/officialWebsite/news.vue
@@ -0,0 +1,624 @@
+<template>
+  <div class="container">
+    <div class="top-box">
+      <div class="tab-box">
+        <!-- left -->
+        <div class="d-s">
+          <div class="logo-box"></div>
+          <div class="logo-size">
+            虚拟仿真实验教学中心
+          </div>
+        </div>
+        <!-- tab -->
+        <div class="d-s">
+          <div class="x-x" v-for="(item, index) in tablist " :key="index">
+            {{ item.name }}
+          </div>
+        </div>
+        <!-- right -->
+        <div class="d-s" style="font-size: 20px; color: #fff;">
+          <i class="el-icon-search"></i>
+          <div style="font-size: 18px;  margin-left: 15px; ">搜索</div>
+        </div>
+      </div>
+
+      <div class="ny-banner">
+        <img src="../../assets/gw/ny-banner.jpg" alt="">
+      </div>
+    </div>
+    <!-- new -->
+    <div class="navigation">
+      <div class="content">
+        <div class="left"> <img src="../../assets/gw/home.png" alt="">
+          <p><span href="/">首页</span><i class="el-icon-arrow-right"></i> <span href="">中心简介</span></p>
+        </div>
+        <div class="right">
+          <div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"
+            @click="getCurrentActive(index)">
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="news">
+      <div class="news-item" v-for="(item, index) in 8">
+        <div class="text">
+          <div class="time">2024-07-20</div>
+          <div class="tt">关于2024年秋季学期虚拟仿真实验类课程教学安排的通知</div>
+          <div class="desc">
+            学校虚拟仿真实验教学中心（以下简称虚仿中心）已于2024年1月建成并投入使用，能够满足学校各类虚拟仿真实验课程的教学需要。
+          </div>
+          <div class="more">
+            <i class="el-icon-right"></i>
+          </div>
+        </div>
+        <div class="img">
+          <img src="../../assets/gw/Snipaste_2024-07-23_22-51-23.jpg" alt="" class="imgWO">
+        </div>
+      </div>
+    </div>
+    <div class="page">
+      <el-pagination background layout="prev, pager, next" :total="1000" class="">
+      </el-pagination>
+    </div>
+    <div class="index-footer">
+      <div class="footer">
+        <div class="logo">
+          <div class="d-s">
+            <div class="logo-box"></div>
+            <div class="logo-size">
+              虚拟仿真实验教学中心
+            </div>
+          </div>
+          <div class="footer-contact">
+            <div class="p">
+
+              <img src="../../assets/gw/tel.png" alt="">
+              <div class="pp">电话：0000-00000000</div>
+
+            </div>
+
+            <div class="p">
+
+              <img src="../../assets/gw/email.png" alt="">
+              <div class="pp">邮箱：XXXXXXXXXXX@163.com</div>
+
+            </div>
+            <div class="p">
+
+              <img src="../../assets/gw/address.png" alt="">
+              <div class="pp">地址：黑龙江省哈尔滨市南岗区西大直街92号</div>
+
+            </div>
+
+
+          </div>
+        </div>
+        <div class="footer-nav">
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">虚仿专业频道</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">教学团队</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">教学研讨活动</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+        </div>
+        <div class="web_icp">
+          <div class="left">
+            <a href="">版权所有：XXXXXX</a>
+            <a href="">版权所有：XXXXXX</a>
+          </div>
+          <div class="right">
+            <div class="">返回顶部</div>
+            <img src="../../assets/gw/top.png" alt="">
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import "swiper/css/swiper.min.css";
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  },
+  data() {
+    return {
+      tablist: [
+        { name: '首页' },
+        { name: '中心概括' },
+        { name: '教学资源' },
+        { name: '教学平台' },
+        { name: '教学团队' },
+        { name: '专业委员会' },
+        { name: '教学研讨活动' },
+        { name: '虚仿专业频道' },
+        { name: '大赛风采' },
+        { name: '实践平台' },
+        { name: '合作企业' },
+        { name: '联系我们' },
+      ],
+      nav: [
+        { name: '活动通知' },
+        { name: '研讨内容' },
+      ],
+      currentActive: 0,
+      isMounted: false,
+
+    }
+  },
+  computed: {
+
+  },
+
+  methods: {
+    // 触发导航
+    getCurrentActive(value) {
+      if (this.currentActive == value) {
+        return
+      }
+      this.currentActive = value
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+/* .container {
+  background: #F5F5F5;
+} */
+.bj {
+  background: #F5F5F5;
+}
+
+::v-deep .team .el-input__inner {
+  width: 240px;
+  border-radius: 50px;
+}
+
+/* 圆形分页按钮样式 */
+::v-deep .el-pagination .el-pager li:not(.disabled) {
+  border-radius: 100%;
+  /* 圆形 */
+  width: 50px;
+  height: 50px;
+  /* 按钮高度 */
+  line-height: 50px;
+  /* 文字垂直居中 */
+  text-align: center;
+  /* 文字水平居中 */
+  margin: 0 15px;
+  /* 按钮间距 */
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  background: #FFFFFF;
+
+  border: 1px solid #DDDDDD;
+}
+
+/* 选中的页码按钮样式 */
+::v-deep .el-pagination .el-pager .active {
+  background-color: #005375;
+  ;
+  /* 背景颜色 */
+  color: #fff;
+  /* 文字颜色 */
+}
+
+::v-deep .el-pagination.is-background .btn-next,
+::v-deep .el-pagination.is-background .btn-prev {
+
+  background-color: #f4f4f5;
+  color: #333;
+  margin: 0 15px;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  background: #FFFFFF;
+
+  border: 1px solid #DDDDDD;
+}
+
+::v-deep .el-pagination .btn-next .el-icon,
+::v-deep .el-pagination .btn-prev .el-icon {
+  font-size: 18px;
+}
+
+.top-box {
+  width: 100%;
+  /* height: 1000px; */
+  /* background: url(''); */
+  /* background-size: cover; */
+  /* 背景图片铺满盒子 */
+  /* background-repeat: no-repeat; */
+  /* 禁止背景图片重复 */
+  position: relative;
+}
+
+.tab-box {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20px 2%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  background-color: #005375;
+  font-weight: bold;
+  font-size: 18px;
+  color: #FFFFFF;
+  /* position: absolute; */
+  z-index: 3;
+
+}
+
+.d-s {
+  display: flex;
+  align-items: center;
+}
+
+.logo-box {
+  width: 50px;
+  height: 50px;
+  background: #fff;
+}
+
+.logo-size {
+  font-weight: 800;
+  font-size: 24px;
+  color: #FFFFFF;
+  margin-left: 20px;
+
+}
+
+.x-x {
+  margin-right: 20px;
+  cursor: pointer;
+}
+
+.ny-banner {
+  width: 100%;
+}
+
+.ny-banner img {
+  width: 100%;
+}
+
+.navigation {
+  width: 100%;
+  height: 60px;
+  background: #FFFFFF;
+  border-radius: 0px 0px 0px 0px;
+  border-bottom: 1px solid #EEEEEE;
+}
+
+.navigation .content {
+  width: 80%;
+  margin: 0 auto;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center
+}
+
+.navigation .content .left {
+  width: 30%;
+  display: flex;
+
+  align-items: center
+}
+
+.navigation img {
+
+  width: 15px;
+  margin-right: 10px;
+}
+
+.navigation p {
+
+  /* margin-top: 5px; */
+  color: #999;
+}
+
+.navigation span {
+
+  color: #999;
+}
+
+.navigation span:last-child {
+  font-weight: 700;
+  color: #005375;
+}
+
+.navigation .content .right {
+  width: 70%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center
+}
+
+.navigation .content .right .nav-item {
+  width: 200px;
+  display: flex;
+  height: 60px;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  cursor: pointer;
+  font-weight: 500;
+  border-bottom: 3px solid transparent;
+}
+
+.navigation .content .right .active {
+  border-bottom: 3px solid #005375;
+  color: #005375;
+  font-weight: bold;
+}
+
+
+.news {
+  padding: 30px 0;
+  width: 80%;
+  margin: 0 auto;
+}
+
+.news .news-item {
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: 50px;
+  margin-bottom: 50px;
+  border-bottom: 1px solid #DDDDDD;
+}
+
+.news .news-item .text {
+  width: 70%;
+}
+
+.news .news-item .text .time {
+  font-size: 18px;
+  color: #005375;
+  margin-bottom: 20px;
+}
+
+.news .news-item .text .tt {
+  font-weight: bold;
+  font-size: 24px;
+  color: #005375;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.news .news-item .text .desc {
+  width: 70%;
+  margin-top: 40px;
+  font-size: 18px;
+  color: #999999;
+  line-height: 24px;
+  overflow: hidden;
+  /** 隐藏超出的内容 **/
+  word-break: break-all;
+  text-overflow: ellipsis;
+  /** 多行 **/
+  display: -webkit-box;
+  /** 对象作为伸缩盒子模型显示 **/
+  -webkit-box-orient: vertical;
+  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+  -webkit-line-clamp: 2;
+  /** 显示的行数 **/
+  margin-bottom: 40px;
+}
+
+.news .news-item .text .more {
+  width: 36px;
+  height: 36px;
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid #005375;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #005375;
+}
+
+.news .news-item .img {
+  width: 28%;
+  overflow: hidden;
+  height: 263px;
+}
+
+.news .news-item .img img {
+  height: 263px;
+}
+
+.index-footer {
+  background: #383838;
+  padding-top: 30px;
+}
+
+.index-footer .footer {
+  width: 80%;
+  margin: 0 auto;
+}
+
+.index-footer .footer .logo {
+  display: flex;
+  justify-content: space-between;
+  /* align-items: center; */
+}
+
+.index-footer .footer .logo .footer-contact {}
+
+.index-footer .footer .logo .footer-contact .p {
+  display: inline-block;
+  display: flex;
+  float: left;
+  margin-left: 50px;
+  align-items: center;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 16px;
+  /* justify-content: flex-end; */
+}
+
+.index-footer .footer .logo .footer-contact .p img {
+  margin-right: 10px;
+}
+
+.index-footer .footer .logo .footer-contact .p:nth-child(3) {
+  width: 100%;
+  clear: both;
+  margin-top: 20px;
+}
+
+.index-footer .footer .footer-nav {
+  display: flex;
+  margin-top: 20px;
+  padding-top: 30px;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.index-footer .footer .footer-nav .footer-nav-item {
+  width: 9%;
+  margin-right: 1%;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item:last-child {
+  margin-right: 0;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item .tt {
+
+  font-weight: 500;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 18px;
+  position: relative;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item .tt::after {
+  content: "";
+  width: 20px;
+  height: 2px;
+  background: #005375;
+  border-radius: 0px 0px 0px 0px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item a {
+  text-decoration: none;
+
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 16px;
+  display: block;
+  margin-bottom: 15px;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item a:last-child {
+  margin-bottom: 0;
+}
+
+.index-footer .footer .web_icp {
+  display: flex;
+  margin-top: 50px;
+  height: 80px;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.index-footer .footer .web_icp a {
+  text-decoration: none;
+
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 16px;
+  margin-right: 30px;
+}
+
+.index-footer .footer .web_icp .right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end
+}
+
+.index-footer .footer .web_icp .right div {
+  margin-right: 25px;
+
+  font-weight: 500;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 18px;
+
+}
+</style>
diff --git a/ruoyi-ui/src/views/officialWebsite/team.vue b/ruoyi-ui/src/views/officialWebsite/team.vue
new file mode 100644
index 0000000..e1e2f95
--- /dev/null
+++ b/ruoyi-ui/src/views/officialWebsite/team.vue
@@ -0,0 +1,720 @@
+<template>
+  <div class="container">
+    <div class="top-box">
+      <div class="tab-box">
+        <!-- left -->
+        <div class="d-s">
+          <div class="logo-box"></div>
+          <div class="logo-size">
+            虚拟仿真实验教学中心
+          </div>
+        </div>
+        <!-- tab -->
+        <div class="d-s">
+          <div class="x-x" v-for="(item, index) in tablist " :key="index">
+            {{ item.name }}
+          </div>
+        </div>
+        <!-- right -->
+        <div class="d-s" style="font-size: 20px; color: #fff;">
+          <i class="el-icon-search"></i>
+          <div style="font-size: 18px;  margin-left: 15px; ">搜索</div>
+        </div>
+      </div>
+
+      <div class="ny-banner">
+        <img src="../../assets/gw/ny-banner.jpg" alt="">
+      </div>
+    </div>
+    <!-- new -->
+    <div class="navigation">
+      <div class="content">
+        <div class="left"> <img src="../../assets/gw/home.png" alt="">
+          <p><span href="/">首页</span><i class="el-icon-arrow-right"></i> <span href="">中心简介</span></p>
+        </div>
+        <div class="right">
+          <div class="nav-item" v-for="(item, index) in nav" v-bind:class="[index === currentActive ? 'active' : '']"
+            @click="getCurrentActive(index)">
+            {{ item.name }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="about-conts">
+
+      <!-- 教学成果 -->
+      <div class="ayptjs" v-if="currentActive == 1">
+        <div class="tt">教学成果</div>
+        <div class="ayptjs-list">
+          <div class="item" v-for="(item, index) in 8">
+            <div class="img">
+              <img src="../../assets/gw/Snipaste_2024-07-23_22-51-23.jpg" alt="">
+            </div>
+            <div class="text">
+              <div class="tts">人机工程仿真分析平台</div>
+              <div class="desc">
+                人机工程学是一门涉及人体测量学、工业设计、工业工程、心理学、美学等多个领域的交叉学科，其研究目的是实现不同的作业中人、机器、环境三者间的协调。即运用上述学科的知识、研究方法、评价手段，对工作器具、工作方式和工作环境的设计进行分析，并提出改造建议，使得作业在效率、安全、健康、舒适等方面的性能得以有效提高。
+              </div>
+            </div>
+            <div class="more">
+              <div class="xian"></div>
+              <p>查看详情</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 教学团队 -->
+      <div class="team" v-if="currentActive == 0">
+        <div class="tt">教学团队</div>
+        <div class="team-list">
+          <div class="item" v-for="(item, index) in 8">
+            <div class="img">
+              <img src="../../assets/gw/Snipaste_2024-07-23_22-51-23.jpg" alt="" class="imgWO">
+            </div>
+            <div class="tts">王尔特</div>
+          </div>
+        </div>
+      </div>
+
+
+    </div>
+    <div class="index-footer">
+      <div class="footer">
+        <div class="logo">
+          <div class="d-s">
+            <div class="logo-box"></div>
+            <div class="logo-size">
+              虚拟仿真实验教学中心
+            </div>
+          </div>
+          <div class="footer-contact">
+            <div class="p">
+
+              <img src="../../assets/gw/tel.png" alt="">
+              <div class="pp">电话：0000-00000000</div>
+
+            </div>
+
+            <div class="p">
+
+              <img src="../../assets/gw/email.png" alt="">
+              <div class="pp">邮箱：XXXXXXXXXXX@163.com</div>
+
+            </div>
+            <div class="p">
+
+              <img src="../../assets/gw/address.png" alt="">
+              <div class="pp">地址：黑龙江省哈尔滨市南岗区西大直街92号</div>
+
+            </div>
+
+
+          </div>
+        </div>
+        <div class="footer-nav">
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">虚仿专业频道</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">教学团队</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">教学研讨活动</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+        </div>
+        <div class="web_icp">
+          <div class="left">
+            <a href="">版权所有：XXXXXX</a>
+            <a href="">版权所有：XXXXXX</a>
+          </div>
+          <div class="right">
+            <div class="">返回顶部</div>
+            <img src="../../assets/gw/top.png" alt="">
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import "swiper/css/swiper.min.css";
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  },
+  data() {
+    return {
+      tablist: [
+        { name: '首页' },
+        { name: '中心概括' },
+        { name: '教学资源' },
+        { name: '教学平台' },
+        { name: '教学团队' },
+        { name: '专业委员会' },
+        { name: '教学研讨活动' },
+        { name: '虚仿专业频道' },
+        { name: '大赛风采' },
+        { name: '实践平台' },
+        { name: '合作企业' },
+        { name: '联系我们' },
+      ],
+      nav: [
+        { name: '教学团队' },
+        { name: '教学成果' },
+      ],
+      currentActive: 0,
+      isMounted: false,
+
+    }
+  },
+  computed: {
+
+  },
+
+  methods: {
+    // 触发导航
+    getCurrentActive(value) {
+      if (this.currentActive == value) {
+        return
+      }
+      this.currentActive = value
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+/* .container {
+  background: #F5F5F5;
+} */
+.bj {
+  background: #F5F5F5;
+}
+
+.top-box {
+  width: 100%;
+  /* height: 1000px; */
+  /* background: url(''); */
+  /* background-size: cover; */
+  /* 背景图片铺满盒子 */
+  /* background-repeat: no-repeat; */
+  /* 禁止背景图片重复 */
+  position: relative;
+}
+
+.tab-box {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20px 2%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  background-color: #005375;
+  font-weight: bold;
+  font-size: 18px;
+  color: #FFFFFF;
+  /* position: absolute; */
+  z-index: 3;
+
+}
+
+.d-s {
+  display: flex;
+  align-items: center;
+}
+
+.logo-box {
+  width: 50px;
+  height: 50px;
+  background: #fff;
+}
+
+.logo-size {
+  font-weight: 800;
+  font-size: 24px;
+  color: #FFFFFF;
+  margin-left: 20px;
+
+}
+
+.x-x {
+  margin-right: 20px;
+  cursor: pointer;
+}
+
+.ny-banner {
+  width: 100%;
+}
+
+.ny-banner img {
+  width: 100%;
+}
+
+.navigation {
+  width: 100%;
+  height: 60px;
+  background: #FFFFFF;
+  border-radius: 0px 0px 0px 0px;
+  border-bottom: 1px solid #EEEEEE;
+}
+
+.navigation .content {
+  width: 80%;
+  margin: 0 auto;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center
+}
+
+.navigation .content .left {
+  width: 30%;
+  display: flex;
+
+  align-items: center
+}
+
+.navigation img {
+
+  width: 15px;
+  margin-right: 10px;
+}
+
+.navigation p {
+
+  /* margin-top: 5px; */
+  color: #999;
+}
+
+.navigation span {
+
+  color: #999;
+}
+
+.navigation span:last-child {
+  font-weight: 700;
+  color: #005375;
+}
+
+.navigation .content .right {
+  width: 70%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center
+}
+
+.navigation .content .right .nav-item {
+  width: 200px;
+  display: flex;
+  height: 60px;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  cursor: pointer;
+  font-weight: 500;
+  border-bottom: 3px solid transparent;
+}
+
+.navigation .content .right .active {
+  border-bottom: 3px solid #005375;
+  color: #005375;
+  font-weight: bold;
+}
+
+.about-conts {
+  padding: 30px 0;
+}
+
+.about-conts .about-conts-item1 {
+  padding: 30px 2%;
+  width: 76%;
+  margin: 0 auto;
+  background-color: #fff;
+}
+
+.about-conts .ayptjs {
+  padding: 30px 0;
+  width: 80%;
+  margin: 0 auto;
+}
+
+.about-conts .ayptjs .tt {
+  display: flex;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 28px;
+  color: #333333;
+  margin-bottom: 60px;
+}
+
+.about-conts .ayptjs-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.about-conts .ayptjs-list .item {
+  width: 23%;
+  height: 211px;
+  /* overflow: hidden; */
+  margin-right: 2%;
+  position: relative;
+  margin-bottom: 60px;
+  cursor: pointer;
+}
+
+.about-conts .ayptjs-list .item .img {
+  position: absolute;
+  width: 100%;
+  height: 211px;
+  z-index: 2;
+  top: 0;
+  transition: 0.5s ease;
+}
+
+.about-conts .ayptjs-list .item .img img {
+  width: 100%;
+  height: 211px;
+  position: absolute;
+  z-index: 2;
+}
+
+.about-conts .ayptjs-list .item .text {
+  position: absolute;
+  width: 94%;
+  height: 191px;
+  z-index: 3;
+  background: linear-gradient(180deg, rgba(0, 83, 117, 0) 0%, #005375 100%);
+  display: flex;
+  padding: 0 3%;
+  flex-direction: column;
+  justify-content: flex-end;
+  color: #fff;
+  overflow: hidden;
+  top: 0;
+  transition: 0.5s ease;
+  padding-bottom: 20px;
+  ;
+}
+
+.about-conts .ayptjs-list .item .text .tts {
+  font-weight: bold;
+  font-size: 20px;
+  color: #FFFFFF;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  transition: 0.5s ease;
+}
+
+.about-conts .ayptjs-list .item .text .desc {
+  overflow: hidden;
+  /** 隐藏超出的内容 **/
+  word-break: break-all;
+  text-overflow: ellipsis;
+  /** 多行 **/
+  display: -webkit-box;
+  /** 对象作为伸缩盒子模型显示 **/
+  -webkit-box-orient: vertical;
+  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+  -webkit-line-clamp: 2;
+  /** 显示的行数 **/
+  line-height: 28px;
+  font-size: 16px;
+  /* display: none; */
+  transition: 0.5s ease;
+  margin-bottom: -85px;
+  /* padding-bottom: 20px; */
+}
+
+.about-conts .ayptjs-list .item:hover .img::after {
+  content: "";
+  position: absolute;
+  right: -10px;
+  top: 10px;
+  width: 100%;
+  height: 211px;
+  z-index: 1;
+  /* background-color: #f0f; */
+  filter: blur(10px);
+  background: rgba(0, 83, 117, 0.7);
+}
+
+.about-conts .ayptjs-list .item:hover .text .desc {
+  margin-bottom: 0;
+}
+
+.about-conts .ayptjs-list .item:hover .text {
+  top: -30px
+}
+
+.about-conts .ayptjs-list .item:hover .img {
+  top: -30px
+}
+
+.about-conts .ayptjs-list .item .more {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #005375;
+  font-size: 18px;
+  position: absolute;
+  bottom: -10px;
+  display: none;
+}
+
+.about-conts .ayptjs-list .item:hover .more {
+  display: flex;
+}
+
+.about-conts .ayptjs-list .item .more .xian {
+
+  width: 70%;
+  height: 1px;
+  /* left: 0; */
+  background-color: #005375;
+}
+
+.about-conts .ayptjs-list .item .more p {
+  width: 30%;
+  text-align: right
+}
+
+
+.about-conts .team {
+  padding: 30px 0;
+  width: 80%;
+  margin: 0 auto;
+}
+
+.about-conts .team .tt {
+  display: flex;
+  justify-content: center;
+  font-weight: bold;
+  font-size: 28px;
+  color: #333333;
+  margin-bottom: 60px;
+}
+
+.about-conts .team .team-list {
+  display: flex;
+  flex-wrap: wrap;
+  width: 80%;
+  margin: 0 auto;
+  justify-content: center;
+}
+
+.about-conts .team .team-list .item {
+  width: 16%;
+  margin: 20px 2%;
+  text-align: center
+}
+
+.about-conts .team .team-list .item .img {
+  width: 100%;
+  height: 150px;
+  margin-bottom: 20px;
+  overflow: hidden
+}
+
+.about-conts .team .team-list .item .img img {
+  width: 100%;
+  height: 150px;
+}
+
+.about-conts .team .team-list .item .tts {
+  font-size: 20px;
+  color: #333333;
+}
+
+.index-footer {
+  background: #383838;
+  padding-top: 30px;
+}
+
+.index-footer .footer {
+  width: 80%;
+  margin: 0 auto;
+}
+
+.index-footer .footer .logo {
+  display: flex;
+  justify-content: space-between;
+  /* align-items: center; */
+}
+
+.index-footer .footer .logo .footer-contact {}
+
+.index-footer .footer .logo .footer-contact .p {
+  display: inline-block;
+  display: flex;
+  float: left;
+  margin-left: 50px;
+  align-items: center;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 16px;
+  /* justify-content: flex-end; */
+}
+
+.index-footer .footer .logo .footer-contact .p img {
+  margin-right: 10px;
+}
+
+.index-footer .footer .logo .footer-contact .p:nth-child(3) {
+  width: 100%;
+  clear: both;
+  margin-top: 20px;
+}
+
+.index-footer .footer .footer-nav {
+  display: flex;
+  margin-top: 20px;
+  padding-top: 30px;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.index-footer .footer .footer-nav .footer-nav-item {
+  width: 9%;
+  margin-right: 1%;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item:last-child {
+  margin-right: 0;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item .tt {
+
+  font-weight: 500;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 18px;
+  position: relative;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item .tt::after {
+  content: "";
+  width: 20px;
+  height: 2px;
+  background: #005375;
+  border-radius: 0px 0px 0px 0px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item a {
+  text-decoration: none;
+
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 16px;
+  display: block;
+  margin-bottom: 15px;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item a:last-child {
+  margin-bottom: 0;
+}
+
+.index-footer .footer .web_icp {
+  display: flex;
+  margin-top: 50px;
+  height: 80px;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.index-footer .footer .web_icp a {
+  text-decoration: none;
+
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 16px;
+  margin-right: 30px;
+}
+
+.index-footer .footer .web_icp .right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end
+}
+
+.index-footer .footer .web_icp .right div {
+  margin-right: 25px;
+
+  font-weight: 500;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 18px;
+
+}
+</style>
diff --git a/ruoyi-ui/src/views/officialWebsite/xufang.vue b/ruoyi-ui/src/views/officialWebsite/xufang.vue
new file mode 100644
index 0000000..7e81d72
--- /dev/null
+++ b/ruoyi-ui/src/views/officialWebsite/xufang.vue
@@ -0,0 +1,752 @@
+<template>
+  <div class="container">
+    <div class="top-box">
+      <div class="tab-box">
+        <!-- left -->
+        <div class="d-s">
+          <div class="logo-box"></div>
+          <div class="logo-size">
+            虚拟仿真实验教学中心
+          </div>
+        </div>
+        <!-- tab -->
+        <div class="d-s">
+          <div class="x-x" v-for="(item, index) in tablist " :key="index">
+            {{ item.name }}
+          </div>
+        </div>
+        <!-- right -->
+        <div class="d-s" style="font-size: 20px; color: #fff;">
+          <i class="el-icon-search"></i>
+          <div style="font-size: 18px;  margin-left: 15px; ">搜索</div>
+        </div>
+      </div>
+
+      <div class="ny-banner">
+        <img src="../../assets/gw/ny-banner.jpg" alt="">
+      </div>
+    </div>
+
+    <div class="navigation">
+      <div class="content">
+        <div class="left"> <img src="../../assets/gw/home.png" alt="">
+          <p><span href="/">首页</span><i class="el-icon-arrow-right"></i> <span href="">中心简介</span></p>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="top-swiper">
+
+      <swiper ref="mySwiper" :options="swiperOptions" style="width: 100%">
+        <swiper-slide class="banner-box" v-for="(item, index) in 8">
+          <div class="left">
+            <img src="../../assets/gw/Snipaste_2024-07-23_22-51-23.jpg" alt="" class="imgWO">
+          </div>
+          <div class="right">
+            <div class="time">2024-07-20</div>
+            <div class="tt">船舶轮机实训虚拟仿真项目</div>
+            <div class="desc">
+              项目以培养高素质轮机工程专业技术人才为目标，围绕国际海事组织公约和国家海事局相关评估考核规范进行设计与开发。项目运用虚拟现实、增强现实、智能移动端、网络通讯等软硬件技术，搭建了基于云服务的虚拟仿真实训教学平台,为学生提供从虚拟认知、虚拟操作、虚拟拆装到应急处置的综合性船舶轮机虚拟仿真实训环境。本虚拟仿真实训教学软件的使用,极大地提升了学生实际动手能力,为其今后走向工作岗位打下更坚实的基础。
+            </div>
+            <div class="more">
+              <i class="el-icon-right"></i>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+      <div class="swiper-pagination"></div>
+    </div>
+
+    <div class="list">
+      <div class="item" v-for="(item, index) in 6 " :key="index">
+        <div class="img">
+          <img src="../../assets/gw/Snipaste_2024-07-23_22-51-23.jpg" alt="" class="imgWO">
+        </div>
+        <div class="tt">船舶轮机实训虚拟仿真项目</div>
+        <div class="desc">
+          项目以培养高素质轮机工程专业技术人才为目标，围绕国际海事组织公约和国家海事局相关评估考核规范进行设计与开发。项目运用虚拟现实、增强现实、智能移动端、网络通讯等软硬件技术，搭建了基于云服务的虚拟仿真实训教学平台,为学生提供从虚拟认知、虚拟操作、虚拟拆装到应急处置的综合性船舶轮机虚拟仿真实训环境。本虚拟仿真实训教学软件的使用,极大地提升了学生实际动手能力,为其今后走向工作岗位打下更坚实的基础。
+        </div>
+        <div class="time">2024-07-20</div>
+      </div>
+    </div>
+
+    <div class="page">
+      <el-pagination background layout="prev, pager, next" :total="1000" class="">
+      </el-pagination>
+    </div>
+
+    <div class="index-footer">
+      <div class="footer">
+        <div class="logo">
+          <div class="d-s">
+            <div class="logo-box"></div>
+            <div class="logo-size">
+              虚拟仿真实验教学中心
+            </div>
+          </div>
+          <div class="footer-contact">
+            <div class="p">
+
+              <img src="../../assets/gw/tel.png" alt="">
+              <div class="pp">电话：0000-00000000</div>
+
+            </div>
+
+            <div class="p">
+
+              <img src="../../assets/gw/email.png" alt="">
+              <div class="pp">邮箱：XXXXXXXXXXX@163.com</div>
+
+            </div>
+            <div class="p">
+
+              <img src="../../assets/gw/address.png" alt="">
+              <div class="pp">地址：黑龙江省哈尔滨市南岗区西大直街92号</div>
+
+            </div>
+
+
+          </div>
+        </div>
+        <div class="footer-nav">
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">虚仿专业频道</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">教学团队</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">教学研讨活动</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+        </div>
+        <div class="web_icp">
+          <div class="left">
+            <a href="">版权所有：XXXXXX</a>
+            <a href="">版权所有：XXXXXX</a>
+          </div>
+          <div class="right">
+            <div class="">返回顶部</div>
+            <img src="../../assets/gw/top.png" alt="">
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import "swiper/css/swiper.min.css";
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  },
+  data() {
+    return {
+      tablist: [
+        { name: '首页' },
+        { name: '中心概括' },
+        { name: '教学资源' },
+        { name: '教学平台' },
+        { name: '教学团队' },
+        { name: '专业委员会' },
+        { name: '教学研讨活动' },
+        { name: '虚仿专业频道' },
+        { name: '大赛风采' },
+        { name: '实践平台' },
+        { name: '合作企业' },
+        { name: '联系我们' },
+      ],
+      swiperOptions: {
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+        pagination: {
+          el: ".swiper-pagination",
+          clickable: true,
+          type: "fraction",
+        },
+        spaceBetween: 2,
+        notNextTick: true,
+        loop: false,
+        autoplay: false,//是否自动播放
+        speed: 500,//播放速度
+        slidesPerView: 'auto',
+        // centeredslides: true,
+        paginationclickable: true,
+        spaceBetween: 0,//模块之间的间隔
+        on: {
+          slidechangeTransitionEnd: function () {
+            //处理手动操作轮播图后后不再自动轮播
+            this.autoplay.start();
+          }
+        }
+      },
+      nav: [
+        { name: '教学团队' },
+        { name: '教学成果' },
+      ],
+      currentActive: 0,
+      isMounted: false,
+
+    }
+  },
+  computed: {
+
+  },
+
+  methods: {
+    // 触发导航
+    getCurrentActive(value) {
+      if (this.currentActive == value) {
+        return
+      }
+      this.currentActive = value
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+/* .container {
+  background: #F5F5F5;
+} */
+.bj {
+  background: #F5F5F5;
+}
+
+::v-deep .team .el-input__inner {
+  width: 240px;
+  border-radius: 50px;
+}
+
+/* 圆形分页按钮样式 */
+::v-deep .el-pagination .el-pager li:not(.disabled) {
+  border-radius: 100%;
+  /* 圆形 */
+  width: 50px;
+  height: 50px;
+  /* 按钮高度 */
+  line-height: 50px;
+  /* 文字垂直居中 */
+  text-align: center;
+  /* 文字水平居中 */
+  margin: 0 15px;
+  /* 按钮间距 */
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  background: #FFFFFF;
+
+  border: 1px solid #DDDDDD;
+}
+
+/* 选中的页码按钮样式 */
+::v-deep .el-pagination .el-pager .active {
+  background-color: #005375;
+  ;
+  /* 背景颜色 */
+  color: #fff;
+  /* 文字颜色 */
+}
+
+::v-deep .el-pagination.is-background .btn-next,
+::v-deep .el-pagination.is-background .btn-prev {
+
+  background-color: #f4f4f5;
+  color: #333;
+  margin: 0 15px;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  background: #FFFFFF;
+
+  border: 1px solid #DDDDDD;
+}
+
+::v-deep .el-pagination .btn-next .el-icon,
+::v-deep .el-pagination .btn-prev .el-icon {
+  font-size: 18px;
+}
+
+.top-box {
+  width: 100%;
+  /* height: 1000px; */
+  /* background: url(''); */
+  /* background-size: cover; */
+  /* 背景图片铺满盒子 */
+  /* background-repeat: no-repeat; */
+  /* 禁止背景图片重复 */
+  position: relative;
+}
+
+.tab-box {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20px 2%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  background-color: #005375;
+  font-weight: bold;
+  font-size: 18px;
+  color: #FFFFFF;
+  /* position: absolute; */
+  z-index: 3;
+
+}
+
+.d-s {
+  display: flex;
+  align-items: center;
+}
+
+.logo-box {
+  width: 50px;
+  height: 50px;
+  background: #fff;
+}
+
+.logo-size {
+  font-weight: 800;
+  font-size: 24px;
+  color: #FFFFFF;
+  margin-left: 20px;
+
+}
+
+.x-x {
+  margin-right: 20px;
+  cursor: pointer;
+}
+
+.ny-banner {
+  width: 100%;
+}
+
+.ny-banner img {
+  width: 100%;
+}
+
+.navigation {
+  width: 100%;
+  height: 60px;
+  background: #FFFFFF;
+  border-radius: 0px 0px 0px 0px;
+  border-bottom: 1px solid #EEEEEE;
+}
+
+.navigation .content {
+  width: 80%;
+  margin: 0 auto;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center
+}
+
+.navigation .content .left {
+  width: 30%;
+  display: flex;
+
+  align-items: center
+}
+
+.navigation img {
+
+  width: 15px;
+  margin-right: 10px;
+}
+
+.navigation p {
+
+  /* margin-top: 5px; */
+  color: #999;
+}
+
+.navigation span {
+
+  color: #999;
+}
+
+.navigation span:last-child {
+  font-weight: 700;
+  color: #005375;
+}
+
+.navigation .content .right {
+  width: 70%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center
+}
+
+.navigation .content .right .nav-item {
+  width: 200px;
+  display: flex;
+  height: 60px;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  cursor: pointer;
+  font-weight: 500;
+  border-bottom: 3px solid transparent;
+}
+
+.navigation .content .right .active {
+  border-bottom: 3px solid #005375;
+  color: #005375;
+  font-weight: bold;
+}
+
+
+.top-swiper {
+  padding: 0;
+  width: 80%;
+  margin: 30px auto;
+  background-color: #f6f7f9;
+  height: 450px;
+  position: relative;
+  cursor: pointer;
+}
+
+::v-deep .top-swiper .swiper-pagination {
+  position: absolute;
+
+  display: flex;
+  justify-content: flex-end;
+  width: 97%;
+  /* background-color: #f0f; */
+  right: 30px;
+  bottom: 90px;
+  font-weight: bold;
+  font-size: 30px;
+  color: #00A0E8;
+}
+
+::v-deep .top-swiper .swiper-pagination-current {
+  font-size: 30px;
+}
+
+::v-deep .swiper-pagination-total {
+  font-size: 24px;
+  margin-top: 8px;
+}
+
+.top-swiper .banner-box {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 450px;
+}
+
+.top-swiper .banner-box .left {
+  width: 50%;
+  overflow: hidden;
+  height: 450px;
+}
+
+.top-swiper .banner-box .left img {
+  width: 100%;
+  height: 100%;
+}
+
+.top-swiper .banner-box .right {
+  width: 50%;
+  padding: 30px;
+}
+
+.top-swiper .banner-box .right .time {
+  font-size: 18px;
+  color: #005375;
+  margin-bottom: 20px;
+}
+
+.top-swiper .banner-box .right .tt {
+  color: #005375;
+  font-weight: bold;
+  font-size: 24px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  margin-bottom: 40px;
+}
+
+.top-swiper .banner-box .right .desc {
+  font-size: 18px;
+  color: #999999;
+  line-height: 24px;
+  overflow: hidden;
+  /** 隐藏超出的内容 **/
+  word-break: break-all;
+  text-overflow: ellipsis;
+  /** 多行 **/
+  display: -webkit-box;
+  /** 对象作为伸缩盒子模型显示 **/
+  -webkit-box-orient: vertical;
+  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+  -webkit-line-clamp: 3;
+  /** 显示的行数 **/
+}
+
+.top-swiper .banner-box .right .more {
+  width: 36px;
+  height: 36px;
+  border-radius: 0px 0px 0px 0px;
+  border: 1px solid #005375;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #005375;
+  margin-top: 40px;
+}
+
+.list {
+  width: 80%;
+  margin: 30px auto;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-top: 50px;
+}
+
+.list .item {
+  width: 31%;
+  height: 432px;
+  margin-bottom: 30px;
+  position: relative;
+  ;
+}
+
+.list .item .img {
+  width: 100%;
+  height: 287px;
+  border-radius: 0px 0px 0px 0px;
+  overflow: hidden;
+}
+
+.list .item .img img {
+  height: 100%;
+}
+
+.list .item .tt {
+  font-weight: bold;
+  font-size: 20px;
+  color: #005375;
+  margin: 15px 0;
+}
+
+.list .item .desc {
+  overflow: hidden;
+  /** 隐藏超出的内容 **/
+  word-break: break-all;
+  text-overflow: ellipsis;
+  /** 多行 **/
+  display: -webkit-box;
+  /** 对象作为伸缩盒子模型显示 **/
+  -webkit-box-orient: vertical;
+  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+  -webkit-line-clamp: 2;
+  /** 显示的行数 **/
+  font-size: 18px;
+  color: #999999;
+  line-height: 24px;
+}
+
+.list .item .time {
+  position: absolute;
+  bottom: 0;
+  font-weight: 500;
+  font-size: 18px;
+  color: #005375;
+}
+
+.index-footer {
+  background: #383838;
+  padding-top: 30px;
+}
+
+.index-footer .footer {
+  width: 80%;
+  margin: 0 auto;
+}
+
+.index-footer .footer .logo {
+  display: flex;
+  justify-content: space-between;
+  /* align-items: center; */
+}
+
+.index-footer .footer .logo .footer-contact {}
+
+.index-footer .footer .logo .footer-contact .p {
+  display: inline-block;
+  display: flex;
+  float: left;
+  margin-left: 50px;
+  align-items: center;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 16px;
+  /* justify-content: flex-end; */
+}
+
+.index-footer .footer .logo .footer-contact .p img {
+  margin-right: 10px;
+}
+
+.index-footer .footer .logo .footer-contact .p:nth-child(3) {
+  width: 100%;
+  clear: both;
+  margin-top: 20px;
+}
+
+.index-footer .footer .footer-nav {
+  display: flex;
+  margin-top: 20px;
+  padding-top: 30px;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.index-footer .footer .footer-nav .footer-nav-item {
+  width: 9%;
+  margin-right: 1%;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item:last-child {
+  margin-right: 0;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item .tt {
+
+  font-weight: 500;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 18px;
+  position: relative;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item .tt::after {
+  content: "";
+  width: 20px;
+  height: 2px;
+  background: #005375;
+  border-radius: 0px 0px 0px 0px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item a {
+  text-decoration: none;
+
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 16px;
+  display: block;
+  margin-bottom: 15px;
+}
+
+.index-footer .footer .footer-nav .footer-nav-item a:last-child {
+  margin-bottom: 0;
+}
+
+.index-footer .footer .web_icp {
+  display: flex;
+  margin-top: 50px;
+  height: 80px;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.index-footer .footer .web_icp a {
+  text-decoration: none;
+
+  font-weight: 500;
+  font-size: 16px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 16px;
+  margin-right: 30px;
+}
+
+.index-footer .footer .web_icp .right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end
+}
+
+.index-footer .footer .web_icp .right div {
+  margin-right: 25px;
+
+  font-weight: 500;
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.7);
+  line-height: 18px;
+
+}
+</style>