diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index fa947ab..946fa75 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -57,7 +57,7 @@
     "quill": "1.3.7",
     "screenfull": "5.0.2",
     "sortablejs": "1.10.2",
-    "swiper": "^11.1.5",
+    "swiper": "^5.4.5",
     "vue": "2.6.12",
     "vue-awesome-swiper": "^4.1.1",
     "vue-count-to": "1.0.13",
diff --git a/ruoyi-ui/src/assets/gw/Snipaste_2024-07-23_22-51-23.jpg b/ruoyi-ui/src/assets/gw/Snipaste_2024-07-23_22-51-23.jpg
new file mode 100644
index 0000000..3e07584
Binary files /dev/null and b/ruoyi-ui/src/assets/gw/Snipaste_2024-07-23_22-51-23.jpg differ
diff --git a/ruoyi-ui/src/assets/gw/home.png b/ruoyi-ui/src/assets/gw/home.png
new file mode 100644
index 0000000..f59774e
Binary files /dev/null and b/ruoyi-ui/src/assets/gw/home.png differ
diff --git a/ruoyi-ui/src/assets/gw/ny-banner.jpg b/ruoyi-ui/src/assets/gw/ny-banner.jpg
new file mode 100644
index 0000000..1bf285b
Binary files /dev/null and b/ruoyi-ui/src/assets/gw/ny-banner.jpg differ
diff --git a/ruoyi-ui/src/permission.js b/ruoyi-ui/src/permission.js
index c568979..7bd2545 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']
+const whiteList = ['/login', '/register', '/gw', '/sb','/about','/platform','/teaching']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()
diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js
index cd01413..cac3aad 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -46,6 +46,26 @@ export const constantRoutes = [
     component: () => import('@/views/home'),
     hidden: true
   },
+  {
+    path: '/sb',
+    component: () => import('@/views/sb'),
+    hidden: true
+  },
+  {
+    path: '/about',
+    component: () => import('@/views/officialWebsite/about'),
+    hidden: true
+  },
+  {
+    path: '/platform',
+    component: () => import('@/views/officialWebsite/platform'),
+    hidden: true
+  },
+  {
+    path: '/teaching',
+    component: () => import('@/views/officialWebsite/teaching'),
+    hidden: true
+  },
   {
     path: '/login',
     component: () => import('@/views/login'),
diff --git a/ruoyi-ui/src/views/home.vue b/ruoyi-ui/src/views/home.vue
index 3de9bf8..aa76a74 100644
--- a/ruoyi-ui/src/views/home.vue
+++ b/ruoyi-ui/src/views/home.vue
@@ -209,8 +209,8 @@
 </template>
 
 <script>
-import { Swiper, SwiperSlide, } from "vue-awesome-swiper";
-import "/src/components/swiper/css/swiper.min.css";
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import "swiper/css/swiper.min.css";
 import { getTab,getbanner } from "@/api/gw/home";
 export default {
   components: {
@@ -316,7 +316,7 @@ export default {
   },
  mounted() {
     // 页面加载完毕调用
-    this.tabLsit();
+    // this.tabLsit();
  },
   computed: {
     customswiper() {
diff --git a/ruoyi-ui/src/views/officialWebsite/about.vue b/ruoyi-ui/src/views/officialWebsite/about.vue
new file mode 100644
index 0000000..88fc6f6
--- /dev/null
+++ b/ruoyi-ui/src/views/officialWebsite/about.vue
@@ -0,0 +1,664 @@
+<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" v-bind:class="[currentActive == 0 ? 'bj' : '']">
+      <!-- 中心简介 -->
+      <div class="about-conts-item1" v-if="currentActive == 0">
+        <div class="neirong" v-html="content"></div>
+      </div>
+      <!-- 组织机构 -->
+      <div class="about-conts-item2" v-if="currentActive == 1">
+        <div class="div" v-for="(item, index) in 8">
+          教学中心办公室
+        </div>
+      </div>
+
+      <!-- 现任领导 -->
+      <div class="about-conts-item3" v-if="currentActive == 2">
+        <div class="about-conts-item3-div">
+          <div class="left">
+            主任
+          </div>
+          <div class="right">
+            <div class="divs" v-for="(item, index) in 2">
+              <div class="img">
+                <img src="https://www.guanwenw.com/uploads/images/20240618/7cf62814ae1ceaaffb6a60b1f0a7075a.jpg" alt="">
+              </div>
+              <div class="tt">钟离</div>
+            </div>
+          </div>
+        </div>
+        <div class="about-conts-item3-div">
+          <div class="left">
+            主任
+          </div>
+          <div class="right">
+            <div class="divs" v-for="(item, index) in 1">
+              <div class="img">
+                <img src="https://www.guanwenw.com/uploads/images/20240618/7cf62814ae1ceaaffb6a60b1f0a7075a.jpg" alt="">
+              </div>
+              <div class="tt">钟离</div>
+            </div>
+          </div>
+        </div>
+        <div class="about-conts-item3-div">
+          <div class="left">
+            主任
+          </div>
+          <div class="right">
+            <div class="divs" v-for="(item, index) in 4">
+              <div class="img">
+                <img src="https://www.guanwenw.com/uploads/images/20240618/7cf62814ae1ceaaffb6a60b1f0a7075a.jpg" alt="">
+              </div>
+              <div class="tt">钟离</div>
+            </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: '组织机构' },
+        { name: '现任领导' },
+      ],
+      currentActive: 2,
+      isMounted: false,
+      content: `<p style="box-sizing: inherit; text-align: justify; text-indent: 2em; margin-bottom: 5px; margin-top: 5px; line-height: 1.75em;">
+    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 18px;">淄博瑞安输变电工程有限公司成立于2006年，公司原属国网淄博供电公司下属施工企业，现为山东泉舜控股集团有限公司全资子公司，注册资本5000万元。公司设立于历史悠久的齐文化发祥地淄博市，并在济南、青岛、聊城、东营、潍坊、济宁、泰安、李庄、邯郸等各地设有分支机构。企业人才结构合理，大专以上学历及具有各种专业技术职称的近300余人，是一支经过国家电网公司多年锻造、专业技术强、电力工程施工经验丰富的的铁军队伍。<br/></span>
+</p>
+<p style="text-indent: 2em; margin-bottom: 5px; margin-top: 5px; line-height: 1.75em;">
+    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 18px;">公司主要经营范围包括:220千伏及以下电力工程总承包施工，电力输配电线路架设施工，变电站电气设备安装，建筑物土建施工，城市及道路照明工程施工；高低压电气设备修试:电力技术咨询；输配变电电力线路设备巡视、维护、维修及带电作业服务；电力销售；房屋、设备、车辆租赁及新能源技术开发、技术转让、技术服务。</span>
+</p>
+<p style="text-indent: 2em; margin-bottom: 5px; margin-top: 5px; line-height: 1.75em;">
+    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 18px;">公司秉承山东泉舜控股集团有限公司建设“泉心立业、舜势百年”的百年企业的美好愿景，坚持“专业、规范、服务、诚信、创新、实力”的经营宗旨，为广大客户提供“电保姆”式的电力全产业链服务！</span>
+</p>
+<p style="box-sizing: inherit; margin-top: 0px; text-align: justify; text-indent: 2em; margin-bottom: 5px; line-height: 1.75em;">
+    <span style="box-sizing: inherit; font-family: 微软雅黑, MicrosoftYaHei;"></span><br/>
+</p>`
+    }
+  },
+  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: 40px 0;
+}
+
+.about-conts .about-conts-item1 {
+  padding: 30px 2%;
+  width: 76%;
+  margin: 0 auto;
+  background-color: #fff;
+}
+
+.about-conts .about-conts-item2 {
+  /* padding: 30px; */
+  width: 80%;
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  /* background-color: #fff; */
+}
+
+.about-conts .about-conts-item2 .div {
+  width: 31%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 80px;
+  position: relative;
+  margin-right: 2%;
+  margin-bottom: 30px;
+  font-size: 20px;
+  font-weight: 500;
+}
+
+.about-conts .about-conts-item2 .div:nth-child(3n) {
+  margin-right: 0;
+}
+
+.about-conts .about-conts-item2 .div::after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  border: 1px solid #EEEEEE;
+}
+
+.about-conts .about-conts-item3 {
+  padding: 30px 2%;
+  width: 76%;
+  margin: 0 auto;
+
+  margin-top: -40px;
+  margin-bottom: -40px;
+  background: linear-gradient(180deg, #E8FCFF 0%, rgba(255, 255, 255, 0) 100%);
+  /* background-color: #fff; */
+}
+
+.about-conts .about-conts-item3 .about-conts-item3-div {
+  width: 100%;
+  padding: 30px;
+  border-bottom: 1px solid #EEEEEE;
+  margin-bottom: 30px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.about-conts .about-conts-item3 .about-conts-item3-div:last-child{
+  margin-bottom: 0;
+  border-bottom: 1px solid transparent;
+}
+.about-conts .about-conts-item3 .about-conts-item3-div .left {
+  width: 20%;
+  /* background-color: #f0f; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-weight: bold;
+  font-size: 20px;
+  color: #005375;
+}
+
+.about-conts .about-conts-item3 .about-conts-item3-div .right {
+  width: 80%;
+  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
+
+}
+
+.about-conts .about-conts-item3 .about-conts-item3-div .right .divs {
+  width: 120px;
+  margin: 30px;
+  border-radius: 0px 0px 0px 0px;
+}
+
+.about-conts .about-conts-item3 .about-conts-item3-div .right .divs .img {
+  width: 120px;
+  height: 150px;
+  background: #D9D9D9;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 0px 0px 0px 0px;
+}
+
+.about-conts .about-conts-item3 .about-conts-item3-div .right .divs .img img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.about-conts .about-conts-item3 .about-conts-item3-div .right .divs .tt {
+  text-align: center;
+  margin-top: 20px;
+  font-weight: 500;
+  font-size: 20px;
+  color: #333333;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.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/platform.vue b/ruoyi-ui/src/views/officialWebsite/platform.vue
new file mode 100644
index 0000000..4cea0ce
--- /dev/null
+++ b/ruoyi-ui/src/views/officialWebsite/platform.vue
@@ -0,0 +1,676 @@
+<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" v-bind:class="[currentActive == 1 ? 'bj' : '']">
+
+      <!-- 专业平台介绍 -->
+      <div class="ayptjs" v-if="currentActive == 0">
+        <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="about-conts-item1" v-if="currentActive == 1">
+        <div class="neirong" v-html="content"></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,
+      content: `<p style="box-sizing: inherit; text-align: justify; text-indent: 2em; margin-bottom: 5px; margin-top: 5px; line-height: 1.75em;">
+    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 18px;">淄博瑞安输变电工程有限公司成立于2006年，公司原属国网淄博供电公司下属施工企业，现为山东泉舜控股集团有限公司全资子公司，注册资本5000万元。公司设立于历史悠久的齐文化发祥地淄博市，并在济南、青岛、聊城、东营、潍坊、济宁、泰安、李庄、邯郸等各地设有分支机构。企业人才结构合理，大专以上学历及具有各种专业技术职称的近300余人，是一支经过国家电网公司多年锻造、专业技术强、电力工程施工经验丰富的的铁军队伍。<br/></span>
+</p>
+<p style="text-indent: 2em; margin-bottom: 5px; margin-top: 5px; line-height: 1.75em;">
+    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 18px;">公司主要经营范围包括:220千伏及以下电力工程总承包施工，电力输配电线路架设施工，变电站电气设备安装，建筑物土建施工，城市及道路照明工程施工；高低压电气设备修试:电力技术咨询；输配变电电力线路设备巡视、维护、维修及带电作业服务；电力销售；房屋、设备、车辆租赁及新能源技术开发、技术转让、技术服务。</span>
+</p>
+<p style="text-indent: 2em; margin-bottom: 5px; margin-top: 5px; line-height: 1.75em;">
+    <span style="font-family: 微软雅黑, &quot;Microsoft YaHei&quot;; font-size: 18px;">公司秉承山东泉舜控股集团有限公司建设“泉心立业、舜势百年”的百年企业的美好愿景，坚持“专业、规范、服务、诚信、创新、实力”的经营宗旨，为广大客户提供“电保姆”式的电力全产业链服务！</span>
+</p>
+<p style="box-sizing: inherit; margin-top: 0px; text-align: justify; text-indent: 2em; margin-bottom: 5px; line-height: 1.75em;">
+    <span style="box-sizing: inherit; font-family: 微软雅黑, MicrosoftYaHei;"></span><br/>
+</p>`
+    }
+  },
+  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: 40px 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
+}
+
+.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/teaching.vue b/ruoyi-ui/src/views/officialWebsite/teaching.vue
new file mode 100644
index 0000000..135c23f
--- /dev/null
+++ b/ruoyi-ui/src/views/officialWebsite/teaching.vue
@@ -0,0 +1,626 @@
+<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="teaching">
+      <div class="teaching-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="time">2024-07-20</div>
+          <div class="tt">《基础化学实验》实验教学大纲《基础化学实验》实验教学大纲基础化学实验》实验教学大纲《基础化学实验》实验教学大纲</div>
+          <div class="bottom">
+            <div class="btn">在线预览</div>
+            <p>资源下载</p>
+          </div>
+        </div>
+      </div>
+      <div class="page"><el-pagination background layout="prev, pager, next" :total="1000" class="">
+        </el-pagination></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: 2,
+
+    }
+  },
+  computed: {
+
+  },
+
+  methods: {
+    // 触发导航
+    getCurrentActive(value) {
+      if (this.currentActive == value) {
+        return
+      }
+      this.currentActive = value
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+/* .container {
+  background: #F5F5F5;
+} */
+/* 圆形分页按钮样式 */
+::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: #409EFF;
+  /* 背景颜色 */
+  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;
+  justify-content: center;
+  align-items: center;
+  height: 60px;
+
+  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;
+}
+
+.teaching {
+  padding: 40px 0;
+  background: #F5F5F5;
+}
+
+.teaching .teaching-list {
+  /* padding: 30px 2%; */
+  width: 80%;
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.teaching .teaching-list .item {
+  width: 31%;
+  height: 525px;
+  background-color: #fff;
+  margin-right: 3.2%;
+  margin-bottom: 30px;
+  position: relative;
+}
+
+.teaching .teaching-list .item:nth-child(3n) {
+  margin-right: 0;
+}
+
+.teaching .teaching-list .item .img {
+  width: 100%;
+  height: 288px;
+  overflow: hidden;
+
+  border-radius: 0px 0px 0px 0px;
+}
+
+.teaching .teaching-list .item .time {
+  width: 85%;
+  margin: 20px auto;
+  font-weight: 500;
+  font-size: 18px;
+  color: #005375;
+}
+
+.teaching .teaching-list .item .tt {
+  width: 85%;
+  margin: 20px auto;
+  font-weight: bold;
+  font-size: 20px;
+  color: #333333;
+  line-height: 30px;
+  overflow: hidden;
+  /** 隐藏超出的内容 **/
+  word-break: break-all;
+  text-overflow: ellipsis;
+  /** 多行 **/
+  display: -webkit-box;
+  /** 对象作为伸缩盒子模型显示 **/
+  -webkit-box-orient: vertical;
+  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+  -webkit-line-clamp: 2;
+  /** 显示的行数 **/
+}
+
+.teaching .teaching-list .item .bottom {
+  width: 85%;
+  margin: 0 auto;
+  position: absolute;
+  left: 7.5%;
+  bottom: 30px;
+  display: flex;
+  align-items: center;
+}
+
+.teaching .teaching-list .item .bottom .btn {
+  width: 132px;
+  height: 48px;
+  background: #005375;
+  border-radius: 4px 4px 4px 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: #FFFFFF;
+  font-weight: 500;
+  font-size: 18px;
+  margin-right: 50px;
+}
+
+.teaching .teaching-list .item .bottom p {
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 700;
+  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>
diff --git a/ruoyi-ui/src/views/sb.vue b/ruoyi-ui/src/views/sb.vue
new file mode 100644
index 0000000..3b68096
--- /dev/null
+++ b/ruoyi-ui/src/views/sb.vue
@@ -0,0 +1,1114 @@
+<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 style="overflow: hidden;position: relative;" class="mySwiper">
+        <swiper ref="mySwiper" :options="swiperOptions" style="width: 100%">
+          <swiper-slide>
+            <img ref="swiperImg" style="width: 100%; height: 100%" src="../assets/gw/banner.png" />
+          </swiper-slide>
+          <swiper-slide>
+            <img ref="swiperImg" style="width: 100%; height: 100%" src="../assets/gw/banner.png" />
+          </swiper-slide>
+        </swiper>
+      </div>
+      <!-- 滑动 -->
+      <div class="bottom-h">
+        <div class="d-s">
+          <img src="../assets/gw/sb.png" style="width: 26px; height: 26px; ">
+          <div class="fff-size">滑动了解更多</div>
+        </div>
+        <div class="xian"></div>
+        <div class="d-s banner-page">
+          <div class="swiper-button-prev"></div>
+          <div class="swiper-button-next"></div>
+        </div>
+      </div>
+    </div>
+    <!-- new -->
+    <div class="new-box">
+      <div class="new-title">
+        新闻资讯
+      </div>
+      <div class="new-gang"></div>
+      <div class="new-container">
+        <div class="new-list">
+          <div class="list-box" v-for="(item, index) in 4" :key="index">
+            <div class="list-bs">
+              <img src="../assets/gw/tp.png" style=" ">
+              <div class="new-wb">《虚拟仿真实验教学项目建设与应用规范》 团体标准专家论证会在京召开</div>
+            </div>
+            <div class="list-bs" style="margin-top: 15px;">
+              <div class="icon-title">新闻动态</div>
+              <div class="time-">2024-07-20</div>
+            </div>
+          </div>
+        </div>
+        <div class="new-banner">
+          <swiper ref="mySwiper" :options="swiperOptions2" style="width: 100%">
+            <swiper-slide class="banner-box">
+              <div>
+                <img src="../assets/gw/tp.png" style="">
+                <div class="list-bs">
+                  <div class="banner-title">《虚拟仿真实验教学项目建设与应用规范》 团体标准专家论证会在京召开</div>
+                  <div class="banner-size">
+                    <div style="font-weight: 600;font-size: 40px;">20</div>
+                    <div>2024-07</div>
+                  </div>
+                </div>
+              </div>
+
+            </swiper-slide>
+            <swiper-slide class="banner-box">
+              <div>
+                <img src="../assets/gw/tp.png" style="">
+                <div class="list-bs">
+                  <div class="banner-title">《虚拟仿真实验教学项目建设与应用规范》 团体标准专家论证会在京召开</div>
+                  <div class="banner-size">
+                    <div style="font-weight: 600;font-size: 40px;">20</div>
+                    <div>2024-07</div>
+                  </div>
+                </div>
+              </div>
+
+            </swiper-slide>
+            <swiper-slide class="banner-box">
+              <div>
+                <img src="../assets/gw/tp.png" style="">
+                <div class="list-bs">
+                  <div class="banner-title">《虚拟仿真实验教学项目建设与应用规范》 团体标准专家论证会在京召开</div>
+                  <div class="banner-size">
+                    <div style="font-weight: 600;font-size: 40px;">20</div>
+                    <div>2024-07</div>
+                  </div>
+                </div>
+              </div>
+
+            </swiper-slide>
+
+          </swiper>
+          <div class="swiper-pagination"></div>
+          <div style=" width: 156px;height: 42px;position: absolute;bottom: 30px;">
+            <img src="../assets/gw/anniu.png" style=" width: 156px;height: 42px">
+          </div>
+        </div>
+        <div class="new-list">
+          <div class="list-box" v-for="(item, index) in 4" :key="index">
+            <div class="list-bs">
+              <img src="../assets/gw/tp.png" style="width: 125px; height: 70px ">
+              <div class="new-wb">《虚拟仿真实验教学项目建设与应用规范》 团体标准专家论证会在京召开</div>
+            </div>
+            <div class="list-bs" style="margin-top: 15px;">
+              <div class="icon-title">新闻动态</div>
+              <div class="time-">2024-07-20</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="gongao">
+      <div class="new-title">
+        通知公告
+      </div>
+      <div class="new-gang"></div>
+      <div class="list">
+        <swiper ref="mySwiper" :options="swiperOptions1" style="width: 100%">
+          <swiper-slide class="gongao-item" v-for="item in 8">
+            <div class="bj">
+              <div class="tt">关于举办人工智能赋能实验教学研讨会的通知</div>
+              <div class="p">
+                <div class="tags">
+                  通知公告
+                </div>
+                <div class="time">
+                  2024-07-20
+                </div>
+              </div>
+              <div class="desc">
+                为深入贯彻落实国家关于开展“人工智能+”行动的战略部署，积极推动人工智能技术与高等教育融合发展，教务处、教师教学发展中心联合清华大学学堂在线举办人工智能赋能高等教育教学改革交流研讨会。现将有关事项通知如下：
+              </div>
+            </div>
+          </swiper-slide>
+
+        </swiper>
+        <div class="page">
+
+          <div class="swiper-button-prev"></div>
+          <div class="swiper-button-next"></div>
+        </div>
+      </div>
+    </div>
+    <div class="news11">
+      <div class="new-title">
+        新闻资讯
+      </div>
+      <div class="new-gang"></div>
+      <div class="news11-list">
+        <div class="news11-list-item" v-for="(item, index) in 8" :key="index">
+          <div class="img">
+            <img src="../assets/gw/Snipaste_2024-07-19_16-46-43.jpg" class="imgWO" alt="">
+          </div>
+          <div class="tt">
+            全球重大环境污染事件国际新闻报道虚拟仿真实验
+          </div>
+          <div class="tags">
+            <div class="p">数字新闻报道</div>
+            <div class="icon"> <i class="el-icon-user"></i>
+              3750
+            </div>
+
+          </div>
+        </div>
+      </div>
+      <div style=" width: 156px;height: 42px;margin: 50px auto;">
+        <img src="../assets/gw/anniu.png" style=" width: 156px;height: 42px">
+      </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: '联系我们' },
+      ],
+      isMounted: false,
+      swiperOptions: {
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+        // pagination: {
+        //   el: ".swiper-pagination",
+        // },
+        spaceBetween: 2,
+        notNextTick: true,
+        loop: false,
+        autoplay: true,//是否自动播放
+        speed: 500,//播放速度
+        slidesPerView: 'auto',
+        // centeredslides: true,
+        paginationclickable: true,
+        spaceBetween: 0,//模块之间的间隔
+        on: {
+          slidechangeTransitionEnd: function () {
+            //处理手动操作轮播图后后不再自动轮播
+            this.autoplay.start();
+          }
+        }
+      },
+      swiperOptions2: {
+        notNextTick: false,
+        pagination: {
+          el: ".swiper-pagination",
+        },
+        spaceBetween: 2,
+        touchRatio: 2,//触模滑动的顺畅度
+        loop: false,
+        autoplay: true,//是否自动播放
+
+        slidesPerView: 1,
+        centeredslides: true,
+        paginationclickable: true,
+        spaceBetween: 0,//模块之间的间隔
+        on: {
+          slidechangeTransitionEnd: function () {
+            //处理手动操作轮播图后后不再自动轮播
+            this.autoplay.start();
+          }
+        }
+      },
+      swiperOptions1: {
+        navigation: {
+          nextEl: ".gongao .page .swiper-button-next",
+          prevEl: ".gongao .page .swiper-button-prev",
+        },
+        // pagination: {
+        //   el: ".swiper-pagination",
+        // },
+        loop: false,
+        slidesPerView: 5,
+        centeredslides: true,
+        // paginationclickable: true,
+        spaceBetween: 20,//模块之间的间隔
+        on: {
+          slidechangeTransitionEnd: function () {
+            //处理手动操作轮播图后后不再自动轮播
+            this.autoplay.start();
+          }
+        }
+      },
+      slideList: [
+        "http://124.221.227.225:1255/assets/banner.png",
+        "http://124.221.227.225:1255/assets/banner.png"
+      ],
+    }
+  },
+  computed: {
+    customswiper() {
+      let swiper;
+      // @4.1.1 版本使用 .$swiper
+      // @3.1.3 版本直接 .swiper 即可
+      if (this.isMounted) swiper = this.$refs.mySwiper.$swiper;
+      return swiper;
+    },
+  },
+
+  methods: {
+
+  }
+
+}
+</script>
+
+<style scoped>
+.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 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  ;
+  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;
+}
+
+.bottom-h {
+  width: 80%;
+  position: absolute;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  bottom: 75px;
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.banner-page {
+  width: 130px;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+::v-deep .banner-page .swiper-button-next,
+::v-deep .banner-page .swiper-button-prev {
+
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #005375 !important;
+  width: 50px !important;
+  height: 50px !important;
+  padding: 0 !important;
+  /* margin: 0 30px; */
+  border-radius: 50%;
+  font-size: 30px;
+  opacity: 1;
+  border-radius: 50%;
+  border: 1px solid #fff;
+  background: transparent;
+  position: static;
+}
+
+
+::v-deep .banner-page .swiper-button-next {
+  /* transform: rotate(180deg); */
+}
+
+::v-deep .banner-page .swiper-button-prev {
+  /* transform: rotate(180deg); */
+}
+
+::v-deep .banner-page .swiper-button-next.swiper-button-disabled,
+::v-deep .banner-page .swiper-button-prev.swiper-button-disabled {
+
+  opacity: 0.8;
+  /*background-color: rgba(255, 255, 255, 0.8);*/
+}
+
+::v-deep .banner-page .swiper-button-next:after,
+::v-deep .banner-page .swiper-button-prev:after {
+
+  font-size: 20px;
+  color: #fff;
+}
+
+.fff-size {
+  font-weight: 500;
+  font-size: 16px;
+  color: #FFFFFF;
+  margin-left: 5px;
+}
+
+.xian {
+  background: rgba(255, 255, 255, 0.7);
+  width: 75%;
+  height: 1px;
+  margin: 0px 20px;
+}
+
+.new-box {
+  width: 100%;
+  background: #fff;
+  box-sizing: border-box;
+  padding: 50px;
+
+}
+
+.new-gang {
+  width: 50px;
+  height: 5px;
+  background: #005375;
+  margin: 15px auto;
+}
+
+.new-title {
+  width: 100%;
+  text-align: center;
+  font-weight: bold;
+  font-size: 28px;
+  color: #333333;
+  margin: 15px auto;
+}
+
+.new-container {
+  width: 80%;
+
+  margin: 20px auto;
+  display: flex;
+
+  justify-content: space-between;
+  margin-top: 60px;
+
+}
+
+.list-box {
+  width: 100%;
+  border-bottom: 1px solid #EEEEEE;
+  box-sizing: border-box;
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  position: relative;
+  cursor: pointer;
+}
+
+.list-box::after {
+  content: "";
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(to right, #005375, #005375) no-repeat left bottom;
+  background-size: 0% 1px;
+  transition: background-size 500ms;
+  transition: 0.5s ease;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.list-box:hover::after {
+  background-size: 100% 1px;
+}
+
+.list-bs {
+  width: 100%;
+  display: flex;
+
+  justify-content: space-between;
+}
+
+.new-list {
+  width: 25%;
+
+}
+
+.list-bs img {
+  width: 40%;
+}
+
+.new-wb {
+  width: 58%;
+  font-weight: 500;
+  font-size: 14px;
+  color: #333333;
+  -webkit-line-clamp: 3;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+}
+
+.icon-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 76px;
+  height: 26px;
+  background: #D8F4FF;
+  border-radius: 4px 4px 4px 4px;
+  font-weight: 500;
+  font-size: 14px;
+  color: #005375;
+}
+
+.time- {
+  font-weight: 500;
+  font-size: 14px;
+  color: #005375;
+}
+
+.new-banner {
+  /* overflow: hidden; */
+  width: 48%;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+
+.new-banner .swiper-pagination {
+  position: absolute;
+
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
+  bottom: 90px;
+}
+
+
+::v-deep .new-banner .swiper-pagination-bullet {
+
+
+  width: 10px !important;
+
+  height: 10px !important;
+
+  opacity: 1;
+  margin: 0 5px !important;
+
+  border-radius: 50%;
+  background: #EEEEEE;
+}
+
+
+::v-deep .new-banner .swiper-pagination-bullet-active {
+
+  background: #005375;
+
+}
+
+.new-banner .banner-box {
+  width: 100%;
+}
+
+.new-banner .banner-box img {
+  width: 100%;
+  margin-bottom: 15px;
+}
+
+.banner-title {
+  width: 75%;
+  font-weight: 500;
+  font-size: 20px;
+  color: #333333;
+  padding-right: 5%;
+  border-right: 1px solid #eee;
+}
+
+.banner-size {
+  color: #005375;
+  text-align: center;
+}
+
+.gongao {
+  width: 100%;
+  padding: 50px 0;
+  background: #005375;
+  border-radius: 0px 0px 0px 0px;
+
+  position: relative;
+
+}
+
+.gongao::after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  background: url('../assets/gw/wx20240719161013.png');
+  background-size: 100% 100%;
+  /* 背景图片铺满盒子 */
+  background-repeat: no-repeat;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+}
+
+.gongao .new-gang {
+  width: 50px;
+  height: 5px;
+  background: #fff;
+  margin: 15px auto;
+}
+
+.gongao .new-title {
+  width: 100%;
+  text-align: center;
+  font-weight: bold;
+  font-size: 28px;
+  color: #fff;
+  margin: 15px auto;
+}
+
+.gongao .list {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 50px;
+  position: relative;
+  padding-bottom: 100px;
+}
+
+.gongao .list .gongao-item {
+
+
+  background: #FFFFFF;
+}
+
+.gongao .list .gongao-item .bj {
+  padding: 20px;
+}
+
+.gongao .list .gongao-item .tt {
+  font-size: 20px;
+  line-height: 28px;
+  text-align: justified;
+  overflow: hidden;
+  /** 隐藏超出的内容 **/
+  word-break: break-all;
+  text-overflow: ellipsis;
+  /** 多行 **/
+  display: -webkit-box;
+  /** 对象作为伸缩盒子模型显示 **/
+  -webkit-box-orient: vertical;
+  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+  -webkit-line-clamp: 2;
+  /** 显示的行数 **/
+}
+
+.gongao .list .gongao-item .p {
+  display: flex;
+  margin: 20px 0;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.gongao .list .gongao-item .p .tags {
+  width: 76px;
+  height: 26px;
+  background: #D8F4FF;
+  border-radius: 4px 4px 4px 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 14px;
+  color: #005375;
+  font-weight: 700;
+}
+
+.gongao .list .gongao-item .p .time {
+  font-size: 14px;
+  color: #005375;
+  font-weight: 700;
+}
+
+.gongao .list .gongao-item .desc {
+
+  font-family: PingFang SC, PingFang SC;
+  font-weight: 500;
+  font-size: 16px;
+  color: #556578;
+  line-height: 24px;
+  text-align: justified;
+  overflow: hidden;
+  /** 隐藏超出的内容 **/
+  word-break: break-all;
+  text-overflow: ellipsis;
+  /** 多行 **/
+  display: -webkit-box;
+  /** 对象作为伸缩盒子模型显示 **/
+  -webkit-box-orient: vertical;
+  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+  -webkit-line-clamp: 3;
+  /** 显示的行数 **/
+}
+
+.gongao .list::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  right: 0;
+  /* right: -50px; */
+  background: linear-gradient(-90deg, #005375 1%, rgba(0, 83, 117, 0) 100%);
+  width: 220px;
+  height: 100%;
+  z-index: 3;
+}
+
+.gongao .list::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  /* right: -50px; */
+  background: linear-gradient(90deg, #005375 0%, rgba(0, 83, 117, 0) 100%);
+  width: 220px;
+  height: 100%;
+  z-index: 3;
+}
+
+.gongao .list .page {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  margin-top: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+}
+
+::v-deep .gongao .list .page .swiper-button-next,
+::v-deep .gongao .list .page .swiper-button-prev {
+
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #005375 !important;
+  width: 52px !important;
+  height: 52px !important;
+  padding: 0 !important;
+  margin: 0 30px;
+  border-radius: 50%;
+  font-size: 30px;
+  opacity: 1;
+  border-radius: 50%;
+  border: 1px solid #fff;
+  background: #fff;
+  position: static;
+}
+
+
+::v-deep .gongao .list .page .swiper-button-next {
+  /* transform: rotate(180deg); */
+}
+
+::v-deep .gongao .list .page .swiper-button-prev {
+  /* transform: rotate(180deg); */
+}
+
+::v-deep .gongao .list .page .swiper-button-next.swiper-button-disabled,
+::v-deep .gongao .list .page .swiper-button-prev.swiper-button-disabled {
+
+  opacity: 0.8;
+  /*background-color: rgba(255, 255, 255, 0.8);*/
+}
+
+::v-deep .gongao .list .page .swiper-button-next:after,
+::v-deep .gongao .list .page .swiper-button-prev:after {
+
+  font-size: 24px;
+  color: #005375;
+}
+
+.news11 {
+  width: 80%;
+  margin: 0 auto;
+  margin-top: 50px;
+  position: relative;
+}
+
+.news11 .news11-list {
+  margin-top: 50px;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.news11 .news11-list .news11-list-item {
+  width: 24%;
+  height: 324px;
+  border: 1px solid #eee;
+  margin-bottom: 20px;
+}
+
+.news11 .news11-list .news11-list-item .img {
+  width: 100%;
+  height: 194px;
+  overflow: hidden;
+}
+
+.news11 .news11-list .news11-list-item .img img {
+  aspect-ratio: 16/9;
+}
+
+.news11 .news11-list .news11-list-item .tt {
+  padding: 20px;
+  line-height: 28px;
+  font-size: 18px;
+  overflow: hidden;
+  /** 隐藏超出的内容 **/
+  word-break: break-all;
+  text-overflow: ellipsis;
+  /** 多行 **/
+  display: -webkit-box;
+  /** 对象作为伸缩盒子模型显示 **/
+  -webkit-box-orient: vertical;
+  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+  -webkit-line-clamp: 2;
+  /** 显示的行数 **/
+}
+
+.news11 .news11-list .news11-list-item .tags {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+}
+
+.news11 .news11-list .news11-list-item .tags .p {
+  font-size: 14px;
+  color: #005375;
+  font-weight: 700;
+}
+
+.news11 .news11-list .news11-list-item .tags i {
+  color: #999999;
+}
+
+.news11 .news11-list .news11-list-item .tags .icon {
+  color: #999999;
+  font-size: 14px;
+}
+
+.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>