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 02f4466..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', '/gw', '/sb']
+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 41c2e80..cac3aad 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -51,6 +51,21 @@ export const constantRoutes = [
     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 4be91d7..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: {
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>