前端补正

ruoyi-ui/src/App.vue

@@ -22,7 +22,31 @@ export default {
 };
 </script>
 <style scoped>
-#app .theme-picker {
-  display: none;
+* {
+  padding: 0px;
+  margin: 0px;
+}
+
+.imgWO {
+  width: 100%;
+  object-fit: cover;
+  transition: 0.5s ease;
+}
+
+.imgWO:hover {
+  transform: scale(1.2);
+}
+.page{
+  margin: 30px auto;
+  display: flex;
+  justify-content: center;
+}
+/* 选中的页码按钮样式 */
+.el-pagination .el-pager .active {
+  background-color: #005375 !important;
+;
+  /* 背景颜色 */
+  color: #fff;
+  /* 文字颜色 */
 }
 </style>

ruoyi-ui/src/permission.js

@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register', '/gw', '/sb','/about','/platform','/teaching','/team','/committee','/committee',  ]
+const whiteList = ['/login', '/register', '/gw', '/sb','/about','/platform','/teaching','/team','/committee','/competition',  ]
 
 router.beforeEach((to, from, next) => {
   NProgress.start()

ruoyi-ui/src/router/index.js

@@ -47,7 +47,7 @@ export const constantRoutes = [
     hidden: true
   },
   {
-    path: '/sb',
+    path: '/sb',//测试
     component: () => import('@/views/sb'),
     hidden: true
   },
@@ -101,6 +101,12 @@ export const constantRoutes = [
     component: () => import('@/views/officialWebsite/contact'),
     hidden: true
   },
+
+  {
+    path: '/practice', // 实践平台
+    component: () => import('@/views/officialWebsite/practice'),
+    hidden: true
+  },
   {
     path: '/login',
     component: () => import('@/views/login'),

ruoyi-ui/src/views/home.vue

@@ -16,9 +16,15 @@
           </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 class="d-s" style="font-size: 20px; color: #fff;cursor: pointer;width: 170px;">
+          <i class="el-icon-search" v-if="show_search"></i>
+          <div style="font-size: 18px;  margin-left: 15px; " v-if="show_search" @click="show_search = !show_search">搜索
+          </div>
+          <el-input placeholder="输入关键词" v-model="input4" style="width: 150px;height: 35px" v-if="!show_search">
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+          </el-input>
+          <i class="el-icon-circle-close" v-if="!show_search" style="margin-left: 10px;"
+             @click="show_search = true"></i>
         </div>
       </div>
       <div style="overflow: hidden;position: relative;" class="mySwiper">
@@ -223,10 +229,12 @@ export default {
   },
   data() {
     return {
+      input4:'',
       indexList:[],
       newList:[[], []],
       noticeList: [],
       nationalVirtualLass:[],
+      show_search: true,
       tablist: [
         { name: '首页' },
         { name: '中心概括' },

ruoyi-ui/src/views/officialWebsite/practice.vue

@@ -0,0 +1,914 @@
+<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;cursor: pointer;width: 170px;">
+          <i class="el-icon-search" v-if="show_search"></i>
+          <div style="font-size: 18px;  margin-left: 15px; " v-if="show_search" @click="show_search = !show_search">搜索
+          </div>
+          <el-input placeholder="输入关键词" v-model="input4" style="width: 150px;height: 35px" v-if="!show_search">
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+          </el-input>
+          <i class="el-icon-circle-close" v-if="!show_search" style="margin-left: 10px;"
+            @click="show_search = true"></i>
+        </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 || currentActive == 3 ? 'bj' : '']">
+      <!-- 实践教学资源 -->
+      <div class="about-conts-item1" v-if="currentActive == 0">
+        <div class="neirong" v-html="content"></div>
+      </div>
+
+      <!-- 专业平台介绍 -->
+      <div class="ayptjs" v-if="currentActive == 1">
+
+        <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="xjxm" v-if="currentActive == 2">
+        <div class="list">
+          <div class="item" v-for="(item, index) in 6 " :key="index">
+            <div class="img">
+              <img src="../../assets/gw/Snipaste_2024-07-23_22-51-23.jpg" alt="" class="imgWO">
+            </div>
+            <div class="tt">船舶轮机实训虚拟仿真项目</div>
+            <div class="desc">
+              项目以培养高素质轮机工程专业技术人才为目标，围绕国际海事组织公约和国家海事局相关评估考核规范进行设计与开发。项目运用虚拟现实、增强现实、智能移动端、网络通讯等软硬件技术，搭建了基于云服务的虚拟仿真实训教学平台,为学生提供从虚拟认知、虚拟操作、虚拟拆装到应急处置的综合性船舶轮机虚拟仿真实训环境。本虚拟仿真实训教学软件的使用,极大地提升了学生实际动手能力,为其今后走向工作岗位打下更坚实的基础。
+            </div>
+            <div class="time">2024-07-20</div>
+          </div>
+        </div>
+
+        <div class="page">
+          <el-pagination background layout="prev, pager, next" :total="1000" class="">
+          </el-pagination>
+        </div>
+      </div>
+      <!--  -->
+      <div class="teaching" v-if="currentActive == 3">
+        <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="tt">《基础化学实验》实验教学大纲《基础化学实验》实验教学大纲基础化学实验》实验教学大纲《基础化学实验》实验教学大纲</div>
+          </div>
+        </div>
+        <div class="page"><el-pagination background layout="prev, pager, next" :total="1000" class="">
+          </el-pagination></div>
+
+      </div>
+    </div>
+    <div class="index-footer">
+      <div class="footer">
+        <div class="logo">
+          <div class="d-s">
+            <div class="logo-box"></div>
+            <div class="logo-size">
+              虚拟仿真实验教学中心
+            </div>
+          </div>
+          <div class="footer-contact">
+            <div class="p">
+
+              <img src="../../assets/gw/tel.png" alt="">
+              <div class="pp">电话：0000-00000000</div>
+
+            </div>
+
+            <div class="p">
+
+              <img src="../../assets/gw/email.png" alt="">
+              <div class="pp">邮箱：XXXXXXXXXXX@163.com</div>
+
+            </div>
+            <div class="p">
+
+              <img src="../../assets/gw/address.png" alt="">
+              <div class="pp">地址：黑龙江省哈尔滨市南岗区西大直街92号</div>
+
+            </div>
+
+
+          </div>
+        </div>
+        <div class="footer-nav">
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">虚仿专业频道</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">教学团队</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">中心概况</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+          <div class="footer-nav-item">
+            <div class="tt">教学研讨活动</div>
+            <a href="">中心简介</a>
+            <a href="">中心简介</a>
+            <a href="">优秀项目共享</a>
+          </div>
+        </div>
+        <div class="web_icp">
+          <div class="left">
+            <a href="">版权所有：XXXXXX</a>
+            <a href="">版权所有：XXXXXX</a>
+          </div>
+          <div class="right">
+            <div class="">返回顶部</div>
+            <img src="../../assets/gw/top.png" alt="">
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import { Swiper, SwiperSlide } from "vue-awesome-swiper";
+import "swiper/css/swiper.min.css";
+export default {
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  },
+  data() {
+    return {
+      tablist: [
+        { name: '首页' },
+        { name: '中心概括' },
+        { name: '教学资源' },
+        { name: '教学平台' },
+        { name: '教学团队' },
+        { name: '专业委员会' },
+        { name: '教学研讨活动' },
+        { name: '虚仿专业频道' },
+        { name: '大赛风采' },
+        { name: '实践平台' },
+        { name: '合作企业' },
+        { name: '联系我们' },
+      ],
+      input4: "",
+      show_search: true,
+      nav: [
+        { name: '实践教学资源' },
+        { name: '实践平台 ' },
+        { name: '实践项目' },
+        { name: '自制仪器设备' },
+      ],
+      currentActive: 3,
+      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;
+}
+
+/* 圆形分页按钮样式 */
+::v-deep .el-pagination .el-pager li:not(.disabled) {
+  border-radius: 100%;
+  /* 圆形 */
+  width: 50px;
+  height: 50px;
+  /* 按钮高度 */
+  line-height: 50px;
+  /* 文字垂直居中 */
+  text-align: center;
+  /* 文字水平居中 */
+  margin: 0 15px;
+  /* 按钮间距 */
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  background: #FFFFFF;
+
+  border: 1px solid #DDDDDD;
+}
+
+/* 选中的页码按钮样式 */
+::v-deep .el-pagination .el-pager .active {
+  background-color: #005375 !important;
+  ;
+  /* 背景颜色 */
+  color: #fff;
+  /* 文字颜色 */
+}
+
+::v-deep .el-pagination.is-background .btn-next,
+::v-deep .el-pagination.is-background .btn-prev {
+
+  background-color: #f4f4f5;
+  color: #333;
+  margin: 0 15px;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  background: #FFFFFF;
+
+  border: 1px solid #DDDDDD;
+}
+
+::v-deep .el-pagination .btn-next .el-icon,
+::v-deep .el-pagination .btn-prev .el-icon {
+  font-size: 18px;
+}
+
+.top-box {
+  width: 100%;
+  /* height: 1000px; */
+  /* background: url(''); */
+  /* background-size: cover; */
+  /* 背景图片铺满盒子 */
+  /* background-repeat: no-repeat; */
+  /* 禁止背景图片重复 */
+  position: relative;
+}
+
+.tab-box {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20px 2%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  background-color: #005375;
+  font-weight: bold;
+  font-size: 18px;
+  color: #FFFFFF;
+  /* position: absolute; */
+  z-index: 3;
+
+}
+
+.d-s {
+  display: flex;
+  align-items: center;
+}
+
+.logo-box {
+  width: 50px;
+  height: 50px;
+  background: #fff;
+}
+
+.logo-size {
+  font-weight: 800;
+  font-size: 24px;
+  color: #FFFFFF;
+  margin-left: 20px;
+
+}
+
+.x-x {
+  margin-right: 20px;
+  cursor: pointer;
+}
+
+.ny-banner {
+  width: 100%;
+}
+
+.ny-banner img {
+  width: 100%;
+}
+
+.navigation {
+  width: 100%;
+  height: 60px;
+  background: #FFFFFF;
+  border-radius: 0px 0px 0px 0px;
+  border-bottom: 1px solid #EEEEEE;
+}
+
+.navigation .content {
+  width: 80%;
+  margin: 0 auto;
+  height: 60px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center
+}
+
+.navigation .content .left {
+  width: 30%;
+  display: flex;
+
+  align-items: center
+}
+
+.navigation img {
+
+  width: 15px;
+  margin-right: 10px;
+}
+
+.navigation p {
+
+  /* margin-top: 5px; */
+  color: #999;
+}
+
+.navigation span {
+
+  color: #999;
+}
+
+.navigation span:last-child {
+  font-weight: 700;
+  color: #005375;
+}
+
+.navigation .content .right {
+  width: 70%;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center
+}
+
+.navigation .content .right .nav-item {
+  width: 200px;
+  display: flex;
+  height: 60px;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  cursor: pointer;
+  font-weight: 500;
+  border-bottom: 3px solid transparent;
+}
+
+.navigation .content .right .active {
+  border-bottom: 3px solid #005375;
+  color: #005375;
+  font-weight: bold;
+}
+
+.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: 0px 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: 30px;
+  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 .more .xian {
+
+  width: 70%;
+  height: 1px;
+  /* left: 0; */
+  background-color: #005375;
+}
+
+.about-conts .ayptjs-list .item .more p {
+  width: 30%;
+  text-align: right
+}
+
+.list {
+  width: 80%;
+  margin: 30px auto;
+  display: flex;
+  flex-wrap: wrap;
+
+  justify-content: space-between;
+  margin-top: 0px;
+}
+
+.list .item {
+  width: 31%;
+  height: 432px;
+  margin-bottom: 30px;
+  position: relative;
+  ;
+}
+
+.list .item .img {
+  width: 100%;
+  height: 287px;
+  border-radius: 0px 0px 0px 0px;
+  overflow: hidden;
+}
+
+.list .item .img img {
+  height: 100%;
+}
+
+.list .item .tt {
+  font-weight: bold;
+  font-size: 20px;
+  color: #005375;
+  margin: 15px 0;
+}
+
+.list .item .desc {
+  overflow: hidden;
+  /** 隐藏超出的内容 **/
+  word-break: break-all;
+  text-overflow: ellipsis;
+  /** 多行 **/
+  display: -webkit-box;
+  /** 对象作为伸缩盒子模型显示 **/
+  -webkit-box-orient: vertical;
+  /** 设置或检索伸缩盒对象的子元素的排列方式 **/
+  -webkit-line-clamp: 2;
+  /** 显示的行数 **/
+  font-size: 18px;
+  color: #999999;
+  line-height: 24px;
+}
+
+.list .item .time {
+  position: absolute;
+  bottom: 0;
+  font-weight: 500;
+  font-size: 18px;
+  color: #005375;
+}
+
+.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: 365px;
+  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 .img img {
+  height: 100%;
+}
+
+.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: 1;
+  /** 显示的行数 **/
+}
+
+.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>