From 4d203b67f4b119a27371f90c71f70e4ca13b846b Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Mon, 8 Jul 2024 10:38:35 +0800
Subject: [PATCH] =?UTF-8?q?=E7=99=BB=E5=BD=95=E5=89=8D=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=9A=84=E8=87=AA=E9=80=82=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index-occupationlab.html       |    4 +-
 public/index-zxy.html                 |    4 +-
 public/index.html                     |    4 +-
 src/pages/course/list/index.vue       |   27 +
 src/pages/index/zxy/index.vue         | 1838 ++++++++++++-------------
 src/pages/info/list/index.vue         |  368 ++---
 src/pages/log/list/index.vue          |  222 +--
 src/pages/touristMatch/list/index.vue |  807 +++++------
 src/setting.js                        |    2 +-
 src/styles/common.scss                |   25 +-
 10 files changed, 1724 insertions(+), 1577 deletions(-)

diff --git a/public/index-occupationlab.html b/public/index-occupationlab.html
index 6ba6390..2df6477 100644
--- a/public/index-occupationlab.html
+++ b/public/index-occupationlab.html
@@ -9,8 +9,8 @@
             content="职站是一款辅助院校教师开展虚拟仿真实验教学的智能云实践平台。平台采用了大数据，云计算等技术，为学校搭建信息化平台提供了基础，可助力院校实现教学智能化升级。职站平台设计遵循着极简、高效的理念，可帮助老师轻松开展实验教学，并支持自定义发布考核和练习，智能统计和检验学生的日常实训练习效果；老师还可以通过可视化图表报告直观查看学生实训成绩，评估教学成果。"
         />
         <meta name="baidu-site-verification" content="code-TRfXe8xIkJ" />
-        <!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> -->
-        <meta name="viewport" content="width=device-width, user-scalable=yes, shrink-to-fit=no" />
+        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+        <!-- <meta name="viewport" content="width=device-width, user-scalable=yes, shrink-to-fit=no" /> -->
         <link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css" />
         <title>职站——为院校打造一站式虚拟仿真实训教学数智云平台</title>
         <script>
diff --git a/public/index-zxy.html b/public/index-zxy.html
index 57fbfa9..b3173ad 100644
--- a/public/index-zxy.html
+++ b/public/index-zxy.html
@@ -9,8 +9,8 @@
             content="智信云是一家为高等院校提供实验课程数字化服务的国家级高新技术企业。以区块链、大数据、人工智能等前沿技术在行业领域的运用为支撑，将新技术与经济与管理人才培养深度融合，面向全国高等院校的经济、金融、大数据应用等相关专业提供科研创新、金课建设、实验实训教学软件、实践教学以及学生就业培训为一体的专业建设咨询与技术支持服务。"
         />
         <meta name="baidu-site-verification" content="code-TRfXe8xIkJ" />
-        <!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> -->
-        <meta name="viewport" content="width=device-width, user-scalable=yes, shrink-to-fit=no" />
+        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+        <!-- <meta name="viewport" content="width=device-width, user-scalable=yes, shrink-to-fit=no" /> -->
         <link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css" />
         <title>智信云</title>
         <script>
diff --git a/public/index.html b/public/index.html
index 6ba6390..2df6477 100644
--- a/public/index.html
+++ b/public/index.html
@@ -9,8 +9,8 @@
             content="职站是一款辅助院校教师开展虚拟仿真实验教学的智能云实践平台。平台采用了大数据，云计算等技术，为学校搭建信息化平台提供了基础，可助力院校实现教学智能化升级。职站平台设计遵循着极简、高效的理念，可帮助老师轻松开展实验教学，并支持自定义发布考核和练习，智能统计和检验学生的日常实训练习效果；老师还可以通过可视化图表报告直观查看学生实训成绩，评估教学成果。"
         />
         <meta name="baidu-site-verification" content="code-TRfXe8xIkJ" />
-        <!-- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> -->
-        <meta name="viewport" content="width=device-width, user-scalable=yes, shrink-to-fit=no" />
+        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
+        <!-- <meta name="viewport" content="width=device-width, user-scalable=yes, shrink-to-fit=no" /> -->
         <link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css" />
         <title>职站——为院校打造一站式虚拟仿真实训教学数智云平台</title>
         <script>
diff --git a/src/pages/course/list/index.vue b/src/pages/course/list/index.vue
index 633c261..34a4e97 100644
--- a/src/pages/course/list/index.vue
+++ b/src/pages/course/list/index.vue
@@ -356,6 +356,7 @@ export default {
       img {
         width: 100%;
         height: 165px;
+        object-fit: cover;
         transition: 0.3s;
       }
 
@@ -432,4 +433,30 @@ export default {
     }
   }
 }
+
+@media (max-width: 1280px) {
+  .main {
+    .wrap-inner {
+      min-width: 0;
+      padding: 0 20px;
+    }
+  }
+}
+
+@media (max-width: 640px) {
+  .search {
+    .input {
+      width: 90%;
+    }
+  }
+
+  .wrap {
+    .courses {
+      li {
+        width: 100%;
+      }
+    }
+  }
+
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/index/zxy/index.vue b/src/pages/index/zxy/index.vue
index ffe4645..5047186 100644
--- a/src/pages/index/zxy/index.vue
+++ b/src/pages/index/zxy/index.vue
@@ -1,66 +1,45 @@
 <template>
   <div class="wrap index">
-    <img class="screen"
-         src="@/assets/img/index/index0.png"
-         alt="首页">
+    <img class="screen" src="@/assets/img/index/index0.png" alt="首页">
     <div class="banner">
-      <el-carousel height="420px"
-                   :autoplay="false">
+      <el-carousel height="420px" :autoplay="false">
         <el-carousel-item>
           <div class="slide slide1">
             <div class="texts">
-              <img class="name"
-                   src="@/assets/img/zxy/name.png"
-                   alt="">
+              <img class="name" src="@/assets/img/zxy/name.png" alt="">
               <p class="des">致力于帮助高校大商科类专业实现课程信息化、数字化和共建共享</p>
               <div class="btns">
-                <a class="btn1"
-                   @click="toTrial">预约演示</a>
-                <a class="btn2"
-                   @click="toTrial">免费试用</a>
+                <a class="btn1" @click="toTrial">预约演示</a>
+                <a class="btn2" @click="toTrial">免费试用</a>
               </div>
             </div>
-            <img class="bg"
-                 src="@/assets/img/zxy/banner1.png"
-                 alt="">
+            <img class="bg" src="@/assets/img/zxy/banner1.png" alt="">
           </div>
         </el-carousel-item>
         <el-carousel-item>
           <div class="slide slide2">
             <div class="texts">
-              <img class="name"
-                   src="@/assets/img/zxy/name.png"
-                   alt="">
+              <img class="name" src="@/assets/img/zxy/name.png" alt="">
               <p class="des">集实践教学、课程学习、项目练习、考核管理、线上赛事为一体的教学辅助云平台 </p>
               <div class="btns">
-                <a class="btn1"
-                   @click="toTrial">预约演示</a>
-                <a class="btn2"
-                   @click="toTrial">免费试用</a>
+                <a class="btn1" @click="toTrial">预约演示</a>
+                <a class="btn2" @click="toTrial">免费试用</a>
               </div>
             </div>
-            <img class="bg"
-                 src="@/assets/img/zxy/banner2.png"
-                 alt="">
+            <img class="bg" src="@/assets/img/zxy/banner2.png" alt="">
           </div>
         </el-carousel-item>
         <el-carousel-item>
           <div class="slide slide3">
             <div class="texts">
-              <img class="name"
-                   src="@/assets/img/zxy/name.png"
-                   alt="">
+              <img class="name" src="@/assets/img/zxy/name.png" alt="">
               <p class="des">覆盖金融科技、大数据管理与应用、数字经济、金融工程、电子商务、财务管理等大商科相关专业，助力高校复合型人才培养 </p>
               <div class="btns">
-                <a class="btn1"
-                   @click="toTrial">预约演示</a>
-                <a class="btn2"
-                   @click="toTrial">免费试用</a>
+                <a class="btn1" @click="toTrial">预约演示</a>
+                <a class="btn2" @click="toTrial">免费试用</a>
               </div>
             </div>
-            <img class="bg"
-                 src="@/assets/img/zxy/banner3.png"
-                 alt="">
+            <img class="bg" src="@/assets/img/zxy/banner3.png" alt="">
           </div>
         </el-carousel-item>
       </el-carousel>
@@ -68,115 +47,60 @@
     <!-- 关于智信云 -->
     <div class="about bg-white">
       <div class="inner">
-        <h6 class="i-title wow fadeInUp"
-            data-wow-delay="0.5s">关于智信云</h6>
-        <div class="des wow fadeInUp"
-             data-wow-delay="0.7s">为院校客户提供真正有价值的产品与服务</div>
-        <img class="bg wow fadeInUp"
-             data-wow-delay="1s"
-             src="@/assets/img/zxy/about1.png"
-             alt="">
+        <h6 class="i-title wow fadeInUp" data-wow-delay="0.5s">关于智信云</h6>
+        <div class="des wow fadeInUp" data-wow-delay="0.7s">为院校客户提供真正有价值的产品与服务</div>
+        <img class="bg wow fadeInUp" data-wow-delay="1s" src="@/assets/img/zxy/about1.png" alt="">
       </div>
     </div>
     <!-- 关于智信云平台 -->
     <div class="intro">
-      <img class="bg"
-           src="@/assets/img/zxy/about4.png"
-           alt="">
+      <img class="bg" src="@/assets/img/zxy/about4.png" alt="">
       <div class="inner">
         <div class="intro-pic">
           <div class="text">
-            <h6 class="wow fadeInUp"
-                data-wow-delay="0.5s">关于智信云平台</h6>
-            <p class="des wow fadeInUp"
-               data-wow-delay="0.5s">依托智信云平台，推出“1+X+N”综合解决方案，即“一平台・跨专业・多学科”新商科综合解决方案，协同创新，助力卓越商科人才培养。</p>
-            <ul class="des-list wow fadeInUp"
-                data-wow-delay="1s">
+            <h6 class="wow fadeInUp" data-wow-delay="0.5s">关于智信云平台</h6>
+            <p class="des wow fadeInUp" data-wow-delay="0.5s">
+              依托智信云平台，推出“1+X+N”综合解决方案，即“一平台・跨专业・多学科”新商科综合解决方案，协同创新，助力卓越商科人才培养。</p>
+            <ul class="des-list wow fadeInUp" data-wow-delay="1s">
               <li>一平台：集教学练考赛于一体的辅助教学云平台</li>
               <li>跨专业：金融学专业、金融工程专业、大数据管理与应用、统计学等专业</li>
               <li>多学科：数学、计算机科学、管理学、经济学等多学科融合</li>
             </ul>
           </div>
-          <img src="@/assets/img/zxy/about2.png"
-               alt=""
-               class="pic wow fadeInDown"
-               data-wow-delay="0.6s">
+          <img src="@/assets/img/zxy/about2.png" alt="" class="pic wow fadeInDown" data-wow-delay="0.6s">
         </div>
         <div class="text-center">
-          <img src="@/assets/img/zxy/about3.png"
-               alt=""
-               class="wow fadeInDown"
-               style="max-width: 100%;"
-               data-wow-delay="0.9s">
+          <img src="@/assets/img/zxy/about3.png" alt="" class="wow fadeInDown" style="max-width: 100%;"
+            data-wow-delay="0.9s">
         </div>
       </div>
     </div>
     <!-- 产品展示 -->
-    <div class="product bg-white"
-         id="part3">
+    <div class="product bg-white" id="part3">
       <div class="inner">
         <h6 class="i-title wow fadeInUp">平台功能介绍</h6>
         <p class="en">PRODUCT DISPLAY</p>
         <div class="pics">
           <div class="text">
-            <img src="@/assets/img/index/index11.png"
-                 alt=""
-                 class="icon wow flipInX"
-                 data-wow-delay="0.2s">
-            <h6 class="wow fadeInDown"
-                data-wow-delay="0.3s">人工智能/大数据+“专业课程”</h6>
-            <p class="desc wow fadeInDown"
-               data-wow-delay="0.7s">平台已集成有Python基础、数据采集、数据清洗、大数据分析、数据可视化、经济金融建模、量化投资策略建模、金融随机过程、商科大数据综合、金融大数据综合、财务大数据综合、商业银行综合等十几款产品；可满足金融科技专业、大数据管理与应用专业、财务管理专业、电子商务专业等经济大类、管理大类相关专业开设实验课程。</p>
+            <img src="@/assets/img/index/index11.png" alt="" class="icon wow flipInX" data-wow-delay="0.2s">
+            <h6 class="wow fadeInDown" data-wow-delay="0.3s">人工智能/大数据+“专业课程”</h6>
+            <p class="desc wow fadeInDown" data-wow-delay="0.7s">
+              平台已集成有Python基础、数据采集、数据清洗、大数据分析、数据可视化、经济金融建模、量化投资策略建模、金融随机过程、商科大数据综合、金融大数据综合、财务大数据综合、商业银行综合等十几款产品；可满足金融科技专业、大数据管理与应用专业、财务管理专业、电子商务专业等经济大类、管理大类相关专业开设实验课程。
+            </p>
           </div>
           <div class="pro-bg1">
-            <img src="@/assets/img/index/pro-bg1-2.png"
-                 alt=""
-                 class="bg1 wow fadeInDown"
-                 data-wow-delay="0.6s">
-            <img src="@/assets/img/index/pro-bg1-3.png"
-                 alt=""
-                 class="bg2 wow fadeInDown"
-                 data-wow-delay="0.7s">
-            <img src="@/assets/img/index/pro-bg1-1.png"
-                 alt=""
-                 class="bg3 wow fadeInDown"
-                 data-wow-delay="0.5s">
-            <img src="@/assets/img/index/pro-bg1-4.png"
-                 alt=""
-                 class="bg4 wow fadeInDown"
-                 data-wow-delay="0.7s">
-            <img src="@/assets/img/index/pro-bg1-5.png"
-                 alt=""
-                 class="bg5 wow fadeInDown"
-                 data-wow-delay="0.9s">
-            <img src="@/assets/img/index/pro-bg1-6.png"
-                 alt=""
-                 class="bg6 wow fadeInDown"
-                 data-wow-delay="1.1s">
-            <img src="@/assets/img/index/pro-bg1-7.png"
-                 alt=""
-                 class="bg7 wow fadeInDown"
-                 data-wow-delay="1.3s">
-            <img src="@/assets/img/index/pro-bg1-8.png"
-                 alt=""
-                 class="bg8 wow fadeInDown"
-                 data-wow-delay="1.5s">
-            <img src="@/assets/img/index/pro-bg1-9.png"
-                 alt=""
-                 class="bg9 wow fadeInDown"
-                 data-wow-delay="1.7s">
-            <img src="@/assets/img/index/pro-bg1-10.png"
-                 alt=""
-                 class="bg10 wow fadeInDown"
-                 data-wow-delay="2s">
-            <img src="@/assets/img/index/pro-bg1-11.png"
-                 alt=""
-                 class="bg11 wow fadeInDown"
-                 data-wow-delay="2.3s">
-            <img src="@/assets/img/index/pro-bg1-12.png"
-                 alt=""
-                 class="bg12 wow fadeInDown"
-                 data-wow-delay="2.6s">
+            <img src="@/assets/img/index/pro-bg1-2.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s">
+            <img src="@/assets/img/index/pro-bg1-3.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s">
+            <img src="@/assets/img/index/pro-bg1-1.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.5s">
+            <img src="@/assets/img/index/pro-bg1-4.png" alt="" class="bg4 wow fadeInDown" data-wow-delay="0.7s">
+            <img src="@/assets/img/index/pro-bg1-5.png" alt="" class="bg5 wow fadeInDown" data-wow-delay="0.9s">
+            <img src="@/assets/img/index/pro-bg1-6.png" alt="" class="bg6 wow fadeInDown" data-wow-delay="1.1s">
+            <img src="@/assets/img/index/pro-bg1-7.png" alt="" class="bg7 wow fadeInDown" data-wow-delay="1.3s">
+            <img src="@/assets/img/index/pro-bg1-8.png" alt="" class="bg8 wow fadeInDown" data-wow-delay="1.5s">
+            <img src="@/assets/img/index/pro-bg1-9.png" alt="" class="bg9 wow fadeInDown" data-wow-delay="1.7s">
+            <img src="@/assets/img/index/pro-bg1-10.png" alt="" class="bg10 wow fadeInDown" data-wow-delay="2s">
+            <img src="@/assets/img/index/pro-bg1-11.png" alt="" class="bg11 wow fadeInDown" data-wow-delay="2.3s">
+            <img src="@/assets/img/index/pro-bg1-12.png" alt="" class="bg12 wow fadeInDown" data-wow-delay="2.6s">
           </div>
         </div>
       </div>
@@ -185,36 +109,17 @@
       <div class="inner">
         <div class="pics">
           <div class="pro-bg2">
-            <img src="@/assets/img/index/pro-bg2-5.png"
-                 alt=""
-                 class="bg1 wow fadeInDown"
-                 data-wow-delay="0.6s">
-            <img src="@/assets/img/index/pro-bg2-1.png"
-                 alt=""
-                 class="bg2 wow fadeInDown"
-                 data-wow-delay="0.7s">
-            <img src="@/assets/img/index/pro-bg2-4.png"
-                 alt=""
-                 class="bg3 wow fadeInDown"
-                 data-wow-delay="0.2s">
-            <img src="@/assets/img/index/pro-bg2-2.png"
-                 alt=""
-                 class="bg4 wow fadeInDown"
-                 data-wow-delay="0.5s">
-            <img src="@/assets/img/index/pro-bg2-3.png"
-                 alt=""
-                 class="bg5 wow fadeInDown"
-                 data-wow-delay="0.5s">
+            <img src="@/assets/img/index/pro-bg2-5.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s">
+            <img src="@/assets/img/index/pro-bg2-1.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s">
+            <img src="@/assets/img/index/pro-bg2-4.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s">
+            <img src="@/assets/img/index/pro-bg2-2.png" alt="" class="bg4 wow fadeInDown" data-wow-delay="0.5s">
+            <img src="@/assets/img/index/pro-bg2-3.png" alt="" class="bg5 wow fadeInDown" data-wow-delay="0.5s">
           </div>
           <div class="text">
-            <img src="@/assets/img/index/index13.png"
-                 alt=""
-                 class="icon wow fadeInRight"
-                 data-wow-delay="0.2s">
-            <h6 class="wow fadeInLeft"
-                data-wow-delay="0.3s">沉浸式岗位模拟与实操</h6>
-            <p class="desc wow fadeInLeft"
-               data-wow-delay="0.7s">项目化教学，通过经典案例让学生亲身体验理论在实践中的应用，学会灵活运用所学知识解决实际问题，提升自身的职业实操能力。</p>
+            <img src="@/assets/img/index/index13.png" alt="" class="icon wow fadeInRight" data-wow-delay="0.2s">
+            <h6 class="wow fadeInLeft" data-wow-delay="0.3s">沉浸式岗位模拟与实操</h6>
+            <p class="desc wow fadeInLeft" data-wow-delay="0.7s">
+              项目化教学，通过经典案例让学生亲身体验理论在实践中的应用，学会灵活运用所学知识解决实际问题，提升自身的职业实操能力。</p>
           </div>
         </div>
       </div>
@@ -223,36 +128,17 @@
       <div class="inner">
         <div class="pics">
           <div class="text">
-            <img src="@/assets/img/index/index15.png"
-                 alt=""
-                 class="icon wow fadeInLeft"
-                 data-wow-delay="0.5s">
-            <h6 class="wow fadeInUp"
-                data-wow-delay="0.5s">数据追踪与统计</h6>
-            <p class="desc wow fadeInUp"
-               data-wow-delay="0.5s">老师和学生可查看每一次的练习、考试的相关情况，随时了解自己的教学和学习的进展和效果，动态调整自己的教学和学习计划。</p>
+            <img src="@/assets/img/index/index15.png" alt="" class="icon wow fadeInLeft" data-wow-delay="0.5s">
+            <h6 class="wow fadeInUp" data-wow-delay="0.5s">数据追踪与统计</h6>
+            <p class="desc wow fadeInUp" data-wow-delay="0.5s">老师和学生可查看每一次的练习、考试的相关情况，随时了解自己的教学和学习的进展和效果，动态调整自己的教学和学习计划。
+            </p>
           </div>
           <div class="pro-bg3">
-            <img src="@/assets/img/index/pro-bg3-4.png"
-                 alt=""
-                 class="bg1 wow fadeInDown"
-                 data-wow-delay="0.6s">
-            <img src="@/assets/img/index/pro-bg3-5.png"
-                 alt=""
-                 class="bg2 wow fadeInDown"
-                 data-wow-delay="0.7s">
-            <img src="@/assets/img/index/pro-bg3-1.png"
-                 alt=""
-                 class="bg3 wow fadeInDown"
-                 data-wow-delay="0.2s">
-            <img src="@/assets/img/index/pro-bg3-2.png"
-                 alt=""
-                 class="bg4 wow fadeInDown"
-                 data-wow-delay="0.5s">
-            <img src="@/assets/img/index/pro-bg3-3.png"
-                 alt=""
-                 class="bg5 wow fadeInDown"
-                 data-wow-delay="0.5s">
+            <img src="@/assets/img/index/pro-bg3-4.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s">
+            <img src="@/assets/img/index/pro-bg3-5.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s">
+            <img src="@/assets/img/index/pro-bg3-1.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s">
+            <img src="@/assets/img/index/pro-bg3-2.png" alt="" class="bg4 wow fadeInDown" data-wow-delay="0.5s">
+            <img src="@/assets/img/index/pro-bg3-3.png" alt="" class="bg5 wow fadeInDown" data-wow-delay="0.5s">
           </div>
         </div>
       </div>
@@ -261,32 +147,16 @@
       <div class="inner">
         <div class="pics">
           <div class="pro-bg4">
-            <img src="@/assets/img/index/pro-bg3-4.png"
-                 alt=""
-                 class="bg1 wow fadeInDown"
-                 data-wow-delay="0.6s">
-            <img src="@/assets/img/index/pro-bg3-5.png"
-                 alt=""
-                 class="bg2 wow fadeInDown"
-                 data-wow-delay="0.7s">
-            <img src="@/assets/img/index/pro-bg4-1.png"
-                 alt=""
-                 class="bg3 wow fadeInDown"
-                 data-wow-delay="0.2s">
-            <img src="@/assets/img/index/pro-bg4-2.png"
-                 alt=""
-                 class="bg4 wow fadeInDown"
-                 data-wow-delay="0.2s">
+            <img src="@/assets/img/index/pro-bg3-4.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s">
+            <img src="@/assets/img/index/pro-bg3-5.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s">
+            <img src="@/assets/img/index/pro-bg4-1.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s">
+            <img src="@/assets/img/index/pro-bg4-2.png" alt="" class="bg4 wow fadeInDown" data-wow-delay="0.2s">
           </div>
           <div class="text">
-            <img src="@/assets/img/index/index21.png"
-                 alt=""
-                 class="icon wow fadeInLeft"
-                 data-wow-delay="0.5s">
-            <h6 class="wow fadeInUp"
-                data-wow-delay="0.5s">共享精品课程资源</h6>
-            <p class="desc wow fadeInUp"
-               data-wow-delay="0.5s">学校可自主打造自己的精品课程中心，老师可以在这里创建优质的课程，支持视频，课件，教案等不同格式的教学资源上传，让全校师生共同学习一起分享。</p>
+            <img src="@/assets/img/index/index21.png" alt="" class="icon wow fadeInLeft" data-wow-delay="0.5s">
+            <h6 class="wow fadeInUp" data-wow-delay="0.5s">共享精品课程资源</h6>
+            <p class="desc wow fadeInUp" data-wow-delay="0.5s">
+              学校可自主打造自己的精品课程中心，老师可以在这里创建优质的课程，支持视频，课件，教案等不同格式的教学资源上传，让全校师生共同学习一起分享。</p>
           </div>
         </div>
       </div>
@@ -295,77 +165,46 @@
       <div class="inner">
         <div class="pics">
           <div class="text">
-            <img src="@/assets/img/index/index22.png"
-                 alt=""
-                 class="icon wow fadeInLeft"
-                 data-wow-delay="0.5s">
-            <h6 class="wow fadeInUp"
-                data-wow-delay="0.5s">自定义赛事活动</h6>
-            <p class="desc wow fadeInUp"
-               data-wow-delay="0.5s">学校可自行发布各种比赛活动的信息和活动进展，供全校学生参加报名，给学生提供一个展示自我，挑战自我的舞台，丰富学生的校园生活。</p>
+            <img src="@/assets/img/index/index22.png" alt="" class="icon wow fadeInLeft" data-wow-delay="0.5s">
+            <h6 class="wow fadeInUp" data-wow-delay="0.5s">自定义赛事活动</h6>
+            <p class="desc wow fadeInUp" data-wow-delay="0.5s">
+              学校可自行发布各种比赛活动的信息和活动进展，供全校学生参加报名，给学生提供一个展示自我，挑战自我的舞台，丰富学生的校园生活。</p>
           </div>
           <div class="pro-bg5">
-            <img src="@/assets/img/index/pro-bg3-4.png"
-                 alt=""
-                 class="bg1 wow fadeInDown"
-                 data-wow-delay="0.6s">
-            <img src="@/assets/img/index/pro-bg3-5.png"
-                 alt=""
-                 class="bg2 wow fadeInDown"
-                 data-wow-delay="0.7s">
-            <img src="@/assets/img/index/pro-bg5-1.png"
-                 alt=""
-                 class="bg3 wow fadeInDown"
-                 data-wow-delay="0.2s">
-            <img src="@/assets/img/index/pro-bg5-2.png"
-                 alt=""
-                 class="bg4 wow fadeInDown"
-                 data-wow-delay="0.2s">
+            <img src="@/assets/img/index/pro-bg3-4.png" alt="" class="bg1 wow fadeInDown" data-wow-delay="0.6s">
+            <img src="@/assets/img/index/pro-bg3-5.png" alt="" class="bg2 wow fadeInDown" data-wow-delay="0.7s">
+            <img src="@/assets/img/index/pro-bg5-1.png" alt="" class="bg3 wow fadeInDown" data-wow-delay="0.2s">
+            <img src="@/assets/img/index/pro-bg5-2.png" alt="" class="bg4 wow fadeInDown" data-wow-delay="0.2s">
           </div>
         </div>
       </div>
     </div>
     <!-- 特色与优势 -->
-    <div class="adv"
-         id="part2">
-      <img src="@/assets/img/index/index8.png"
-           alt=""
-           class="shape shape1">
-      <img src="@/assets/img/index/index9.png"
-           alt=""
-           class="shape shape2">
-      <img src="@/assets/img/index/index10.png"
-           alt=""
-           class="shape shape3">
+    <div class="adv" id="part2">
+      <img src="@/assets/img/index/index8.png" alt="" class="shape shape1">
+      <img src="@/assets/img/index/index9.png" alt="" class="shape shape2">
+      <img src="@/assets/img/index/index10.png" alt="" class="shape shape3">
       <div class="inner">
         <h6 class="i-title wow fadeInDown">特色与优势</h6>
         <p class="en">FEATURES AND ADVANTAGES</p>
         <ul class="list">
-          <li class="wow fadeInDown"
-              data-wow-delay="0.5s">
-            <img src="@/assets/img/zxy/adv1.png"
-                 alt="">
+          <li class="wow fadeInDown" data-wow-delay="0.5s">
+            <img src="@/assets/img/zxy/adv1.png" alt="">
             <h6>教学创新<br>引用各类案例采用项目化教学</h6>
             <p class="text">实验教学系统采用案例教学方法与项目化教学方法相结合，帮助学生更好的掌握知识点，融会贯通。</p>
           </li>
-          <li class="wow fadeInRight"
-              data-wow-delay="0.8s">
-            <img src="@/assets/img/zxy/adv2.png"
-                 alt="">
+          <li class="wow fadeInRight" data-wow-delay="0.8s">
+            <img src="@/assets/img/zxy/adv2.png" alt="">
             <h6>云端部署<br>实验教学资源“云”共享</h6>
             <p class="text">随时随地，智信云平台无需安装部署，即可享受云上“实验室”和云上“课堂”，可满足不同学科，不同场景下的教学需求。</p>
           </li>
-          <li class="wow fadeInUp"
-              data-wow-delay="1.1s">
-            <img src="@/assets/img/zxy/adv3.png"
-                 alt="">
+          <li class="wow fadeInUp" data-wow-delay="1.1s">
+            <img src="@/assets/img/zxy/adv3.png" alt="">
             <h6>大数据分析统计<br>教学效果有“据”可依</h6>
             <p class="text">实验教学系统采用案例教学方法与项目化教学方法相结合，帮助学生更好的掌握知识点，融会贯通。</p>
           </li>
-          <li class="wow fadeInUp"
-              data-wow-delay="1.4s">
-            <img src="@/assets/img/zxy/adv4.png"
-                 alt="">
+          <li class="wow fadeInUp" data-wow-delay="1.4s">
+            <img src="@/assets/img/zxy/adv4.png" alt="">
             <h6>功能全面<br>打造“智”能化教学全场景</h6>
             <p class="text">教、学、练、考以及大赛、资讯等功能模块，操作方便、智能快捷，将教学活动从课堂内拓展到课堂外，为师生打造智能化、多样化、个性化的“教”“学”全场景。</p>
           </li>
@@ -378,42 +217,33 @@
       <div class="popup wechat-popup">
         <p class="tips">微信扫码添加售前咨询</p>
         <p class="des">提供付费咨询及解决方案</p>
-        <img width="150"
-             src="@/assets/img/index/customer.jpg"
-             alt="">
+        <img width="150" src="@/assets/img/index/customer.jpg" alt="">
       </div>
       <div class="item tel"></div>
       <div class="popup tel-popup">
         <div class="tel-inner">
           <div class="line">
             <div>
-              <img class="icon"
-                   src="@/assets/img/index/tel-2.png"
-                   alt="">
+              <img class="icon" src="@/assets/img/index/tel-2.png" alt="">
             </div>
             <div class="text">
               <p class="title">售前咨询</p>
-              <p class="tel-num"
-                 style="margin-bottom: 5px">刘老师</p>
+              <p class="tel-num" style="margin-bottom: 5px">刘老师</p>
               <p class="tel-num">18019930142</p>
             </div>
           </div>
           <div class="line">
             <div>
-              <img class="icon"
-                   src="@/assets/img/index/sug.png"
-                   alt="">
+              <img class="icon" src="@/assets/img/index/sug.png" alt="">
             </div>
             <div class="text">
-              <p class="title"
-                 @click="toQues">咨询，建议与反馈</p>
+              <p class="title" @click="toQues">咨询，建议与反馈</p>
               <p class="des">您的每一条建议声音，我们都认真对待</p>
             </div>
           </div>
         </div>
       </div>
-      <div class="item topping"
-           @click="topping"></div>
+      <div class="item topping" @click="topping"></div>
     </div>
   </div>
 </template>
@@ -459,715 +289,883 @@ export default {
 
 <style lang="scss" scoped>
 @import url(../../../plugins/wow/animate.css);
+
 .wrap {
-    position: relative;
-    background-color: #f3f6fa;
-    .screen {
-        position: absolute;
-        top: -10000px;
-        left: -10000px;
+  position: relative;
+  background-color: #f3f6fa;
+
+  .screen {
+    position: absolute;
+    top: -10000px;
+    left: -10000px;
+  }
+
+  .banner {
+    background: linear-gradient(143deg, #376ff7 0%, #479df8 100%);
+
+    .slide {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
     }
-    .banner {
-        background: linear-gradient(143deg, #376ff7 0%, #479df8 100%);
-        .slide {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100%;
-        }
-        .slide1 {
-            background: url(../../../assets/img/zxy/banner-bg1-1.png) no-repeat,
-                url(../../../assets/img/zxy/banner-bg1-2.png) bottom right/auto no-repeat;
-        }
-        .slide2 {
-            background: url(../../../assets/img/zxy/banner-bg2-1.png) no-repeat,
-                url(../../../assets/img/zxy/banner-bg2-2.png) bottom right/auto no-repeat;
-        }
-        .slide3 {
-            background: url(../../../assets/img/zxy/banner-bg3-1.png) no-repeat;
-        }
-        .texts {
-            max-width: 540px;
-            margin-right: 230px;
-        }
-        .name {
-            margin-bottom: 30px;
-        }
-        .des {
-            margin-bottom: 35px;
-            font-size: 18px;
-            line-height: 25px;
-            color: #fff;
-        }
-        .btns {
-            display: flex;
-            a {
-                width: 96px;
-                text-align: center;
-                font-size: 14px;
-                line-height: 36px;
-                border-radius: 6px;
-                cursor: pointer;
-                &:hover {
-                    opacity: 0.9;
-                }
-            }
-        }
-        .btn1 {
-            color: #fff;
-            border: 1px solid;
-        }
-        .btn2 {
-            margin-left: 16px;
-            color: #3b79f7;
-            background-color: #fff;
-        }
+
+    .slide1 {
+      background: url(../../../assets/img/zxy/banner-bg1-1.png) no-repeat,
+        url(../../../assets/img/zxy/banner-bg1-2.png) bottom right/auto no-repeat;
     }
-    .i-title {
-        z-index: 1;
-        position: relative;
-        margin-bottom: 37px;
-        font-size: 30px;
+
+    .slide2 {
+      background: url(../../../assets/img/zxy/banner-bg2-1.png) no-repeat,
+        url(../../../assets/img/zxy/banner-bg2-2.png) bottom right/auto no-repeat;
+    }
+
+    .slide3 {
+      background: url(../../../assets/img/zxy/banner-bg3-1.png) no-repeat;
+    }
+
+    .texts {
+      max-width: 540px;
+      margin-right: 230px;
+    }
+
+    .name {
+      margin-bottom: 30px;
+    }
+
+    .des {
+      margin-bottom: 35px;
+      font-size: 18px;
+      line-height: 25px;
+      color: #fff;
+    }
+
+    .btns {
+      display: flex;
+
+      a {
+        width: 96px;
         text-align: center;
-        color: #0b1d30;
-        &:after {
-            content: '';
-            position: absolute;
-            bottom: -10px;
-            left: 50%;
-            width: 30px;
-            height: 4px;
-            transform: translate(-50%);
-            background-color: #006eff;
+        font-size: 14px;
+        line-height: 36px;
+        border-radius: 6px;
+        cursor: pointer;
+
+        &:hover {
+          opacity: 0.9;
         }
+      }
     }
-    .intro {
-        position: relative;
-        background: linear-gradient(179deg, rgba(255, 255, 255, 0) 0%, #ffffff 36%, rgba(255, 255, 255, 0) 100%);
-        .bg {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 724px;
-        }
-        .inner {
-            width: 1020px;
-            padding-bottom: 146px;
-        }
-        .intro-pic {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 36px;
-        }
-        h6 {
-            font-size: 40px;
-            color: #0b1d30;
-        }
-        .des {
-            margin: 20px 0;
-            font-size: 16px;
-            color: #666;
-            line-height: 27px;
-        }
-        .text {
-            width: 518px;
-        }
-        .des-list {
-            li {
-                display: flex;
-                align-items: center;
-                margin: 5px 0;
-                font-size: 14px;
-                color: #031d32;
-                &:before {
-                    content: '';
-                    width: 8px;
-                    height: 8px;
-                    margin-right: 7px;
-                    background-color: #007eff;
-                    border-radius: 50%;
-                }
-            }
-        }
-        .pic {
-            max-width: 100%;
+
+    .btn1 {
+      color: #fff;
+      border: 1px solid;
+    }
+
+    .btn2 {
+      margin-left: 16px;
+      color: #3b79f7;
+      background-color: #fff;
+    }
+  }
+
+  .i-title {
+    z-index: 1;
+    position: relative;
+    margin-bottom: 37px;
+    font-size: 30px;
+    text-align: center;
+    color: #0b1d30;
+
+    &:after {
+      content: '';
+      position: absolute;
+      bottom: -10px;
+      left: 50%;
+      width: 30px;
+      height: 4px;
+      transform: translate(-50%);
+      background-color: #006eff;
+    }
+  }
+
+  .intro {
+    position: relative;
+    background: linear-gradient(179deg, rgba(255, 255, 255, 0) 0%, #ffffff 36%, rgba(255, 255, 255, 0) 100%);
+
+    .bg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 724px;
+    }
+
+    .inner {
+      width: 1020px;
+      padding-bottom: 146px;
+    }
+
+    .intro-pic {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 36px;
+    }
+
+    h6 {
+      font-size: 40px;
+      color: #0b1d30;
+    }
+
+    .des {
+      margin: 20px 0;
+      font-size: 16px;
+      color: #666;
+      line-height: 27px;
+    }
+
+    .text {
+      width: 518px;
+    }
+
+    .des-list {
+      li {
+        display: flex;
+        align-items: center;
+        margin: 5px 0;
+        font-size: 14px;
+        color: #031d32;
+
+        &:before {
+          content: '';
+          width: 8px;
+          height: 8px;
+          margin-right: 7px;
+          background-color: #007eff;
+          border-radius: 50%;
         }
+      }
     }
+
+    .pic {
+      max-width: 100%;
+    }
+  }
+
+  .inner {
+    position: relative;
+    width: 1200px;
+    padding: 67px 0;
+    margin: 0 auto;
+  }
+
+  .en {
+    position: absolute;
+    top: 77px;
+    left: 50%;
+    width: 100%;
+    text-align: center;
+    font-size: 28px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    color: #e5ebf1;
+    transform: translate(-50%);
+  }
+
+  .about {
+    text-align: center;
+
+    .des {
+      margin-bottom: 40px;
+      font-size: 22px;
+      color: #666;
+    }
+
+    .bg {
+      max-width: 100%;
+    }
+  }
+
+  .adv {
+    position: relative;
+    background: #f3f6fa;
+
     .inner {
-        position: relative;
-        width: 1200px;
-        padding: 67px 0;
-        margin: 0 auto;
+      padding: 108px 0 130px;
     }
+
     .en {
-        position: absolute;
-        top: 77px;
-        left: 50%;
-        width: 100%;
-        text-align: center;
-        font-size: 28px;
-        font-family: PingFangSC-Semibold, PingFang SC;
-        color: #e5ebf1;
-        transform: translate(-50%);
+      top: 120px;
+    }
+
+    .shape {
+      position: absolute;
+    }
+
+    .shape1 {
+      top: 25px;
+      right: 10px;
+    }
+
+    .shape2 {
+      bottom: 30px;
+      left: 50px;
     }
-    .about {
+
+    .shape3 {
+      bottom: 25px;
+      right: 50px;
+    }
+
+    .list {
+      display: flex;
+
+      li {
+        width: 25%;
+        padding: 38px 20px 62px;
+        margin-right: 20px;
         text-align: center;
-        .des {
-            margin-bottom: 40px;
-            font-size: 22px;
-            color: #666;
+        background-color: #fff;
+        box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
+        border-radius: 10px;
+
+        &:last-child {
+          margin-right: 0;
         }
-        .bg {
-            max-width: 100%;
+
+        &:hover {
+          img {
+            transform: rotateY(180deg);
+          }
+
+          h6 {
+            margin-top: 40px;
+          }
         }
+      }
+
+      img {
+        width: 64px;
+        transition: 0.6s;
+      }
+
+      h6 {
+        margin: 45px 0 16px;
+        font-size: 18px;
+        line-height: 28px;
+        color: #0b1d30;
+        transition: 0.3s;
+      }
+
+      .text {
+        font-size: 14px;
+        color: #757f92;
+      }
     }
-    .adv {
-        position: relative;
-        background: #f3f6fa;
-        .inner {
-            padding: 108px 0 130px;
-        }
-        .en {
-            top: 120px;
-        }
-        .shape {
-            position: absolute;
-        }
-        .shape1 {
-            top: 25px;
-            right: 10px;
-        }
-        .shape2 {
-            bottom: 30px;
-            left: 50px;
-        }
-        .shape3 {
-            bottom: 25px;
-            right: 50px;
-        }
-        .list {
-            display: flex;
-            li {
-                width: 25%;
-                padding: 38px 20px 62px;
-                margin-right: 20px;
-                text-align: center;
-                background-color: #fff;
-                box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
-                border-radius: 10px;
-                &:last-child {
-                    margin-right: 0;
-                }
-                &:hover {
-                    img {
-                        transform: rotateY(180deg);
-                    }
-                    h6 {
-                        margin-top: 40px;
-                    }
-                }
-            }
-            img {
-                width: 64px;
-                transition: 0.6s;
-            }
-            h6 {
-                margin: 45px 0 16px;
-                font-size: 18px;
-                line-height: 28px;
-                color: #0b1d30;
-                transition: 0.3s;
-            }
-            .text {
-                font-size: 14px;
-                color: #757f92;
-            }
-        }
+  }
+
+  .pics {
+    display: flex;
+    justify-content: space-between;
+
+    .icon {
+      width: 60px;
     }
-    .pics {
-        display: flex;
-        justify-content: space-between;
-        .icon {
-            width: 60px;
+
+    .text {
+      width: 360px;
+    }
+
+    h6 {
+      margin: 30px 0 10px;
+      font-size: 28px;
+      color: #0b1d30;
+      white-space: nowrap;
+    }
+
+    .desc {
+      font-size: 15px;
+      color: #757f92;
+    }
+
+    .pro-bg1 {
+      position: relative;
+      width: 578px;
+      height: 410px;
+
+      img {
+        position: absolute;
+        transition: 0.5s;
+      }
+
+      .bg1 {
+        top: 0;
+        left: 0;
+      }
+
+      .bg2 {
+        top: 24px;
+        right: 0;
+        animation: rotate 15s linear infinite;
+      }
+
+      .bg3 {
+        top: 15px;
+        left: 27px;
+      }
+
+      .bg4 {
+        top: 102px;
+        left: 72px;
+      }
+
+      .bg5 {
+        top: 102px;
+        left: 180px;
+      }
+
+      .bg6 {
+        top: 102px;
+        left: 288px;
+      }
+
+      .bg7 {
+        top: 55px;
+        right: 9px;
+      }
+
+      .bg8 {
+        top: 181px;
+        left: 14px;
+      }
+
+      .bg9 {
+        top: 195px;
+        left: 180px;
+      }
+
+      .bg10 {
+        top: 181px;
+        right: 142px;
+      }
+
+      .bg11 {
+        top: 189px;
+        right: 34px;
+      }
+
+      .bg12 {
+        bottom: 45px;
+        left: 180px;
+      }
+
+      &:hover {
+        .bg3 {
+          transform: scale(1.1);
         }
-        .text {
-            width: 360px;
+
+        .bg4,
+        .bg5,
+        .bg6,
+        .bg7,
+        .bg8,
+        .bg9,
+        .bg10,
+        .bg11,
+        .bg12 {
+          transform: translateY(-10px);
         }
-        h6 {
-            margin: 30px 0 10px;
-            font-size: 28px;
-            color: #0b1d30;
-            white-space: nowrap;
+      }
+    }
+
+    .pro-bg2 {
+      position: relative;
+      width: 674px;
+      height: 360px;
+
+      img {
+        position: absolute;
+        transition: 0.5s;
+      }
+
+      .bg1 {
+        top: 0;
+        left: 68px;
+      }
+
+      .bg2 {
+        top: 24px;
+        left: 97px;
+      }
+
+      .bg3 {
+        top: 94px;
+        left: 139px;
+      }
+
+      .bg4 {
+        top: 58px;
+        left: 0;
+      }
+
+      .bg5 {
+        top: 64px;
+        right: 0;
+      }
+
+      &:hover {
+        .bg2 {
+          transform: scale(1.1);
         }
-        .desc {
-            font-size: 15px;
-            color: #757f92;
+
+        .bg3 {
+          transform: scale(1.3);
         }
-        .pro-bg1 {
-            position: relative;
-            width: 578px;
-            height: 410px;
-            img {
-                position: absolute;
-                transition: 0.5s;
-            }
-            .bg1 {
-                top: 0;
-                left: 0;
-            }
-            .bg2 {
-                top: 24px;
-                right: 0;
-                animation: rotate 15s linear infinite;
-            }
-            .bg3 {
-                top: 15px;
-                left: 27px;
-            }
-            .bg4 {
-                top: 102px;
-                left: 72px;
-            }
-            .bg5 {
-                top: 102px;
-                left: 180px;
-            }
-            .bg6 {
-                top: 102px;
-                left: 288px;
-            }
-            .bg7 {
-                top: 55px;
-                right: 9px;
-            }
-            .bg8 {
-                top: 181px;
-                left: 14px;
-            }
-            .bg9 {
-                top: 195px;
-                left: 180px;
-            }
-            .bg10 {
-                top: 181px;
-                right: 142px;
-            }
-            .bg11 {
-                top: 189px;
-                right: 34px;
-            }
-            .bg12 {
-                bottom: 45px;
-                left: 180px;
-            }
-            &:hover {
-                .bg3 {
-                    transform: scale(1.1);
-                }
-                .bg4,
-                .bg5,
-                .bg6,
-                .bg7,
-                .bg8,
-                .bg9,
-                .bg10,
-                .bg11,
-                .bg12 {
-                    transform: translateY(-10px);
-                }
-            }
+
+        .bg4 {
+          transform: translate(-135px, -10px);
         }
-        .pro-bg2 {
-            position: relative;
-            width: 674px;
-            height: 360px;
-            img {
-                position: absolute;
-                transition: 0.5s;
-            }
-            .bg1 {
-                top: 0;
-                left: 68px;
-            }
-            .bg2 {
-                top: 24px;
-                left: 97px;
-            }
-            .bg3 {
-                top: 94px;
-                left: 139px;
-            }
-            .bg4 {
-                top: 58px;
-                left: 0;
-            }
-            .bg5 {
-                top: 64px;
-                right: 0;
-            }
-            &:hover {
-                .bg2 {
-                    transform: scale(1.1);
-                }
-                .bg3 {
-                    transform: scale(1.3);
-                }
-                .bg4 {
-                    transform: translate(-135px, -10px);
-                }
-                .bg5 {
-                    transform: translate(50px, -20px);
-                }
-            }
+
+        .bg5 {
+          transform: translate(50px, -20px);
         }
-        .pro-bg3 {
-            position: relative;
-            width: 584px;
-            height: 360px;
-            img {
-                position: absolute;
-                transition: 0.5s;
-            }
-            .bg1 {
-                top: 0;
-                left: 0;
-            }
-            .bg2 {
-                bottom: 0;
-                right: 0;
-                animation: rotate 10s linear infinite;
-            }
-            .bg3 {
-                top: 15px;
-                left: 13px;
-            }
-            .bg4 {
-                bottom: 0;
-                left: 0;
-            }
-            .bg5 {
-                top: 0;
-                right: 0;
-            }
-            &:hover {
-                .bg3 {
-                    transform: scale(1.1);
-                }
-                .bg4 {
-                    transform: translate(-20px, 20px);
-                }
-                .bg5 {
-                    transform: translateY(-20px);
-                }
-            }
+      }
+    }
+
+    .pro-bg3 {
+      position: relative;
+      width: 584px;
+      height: 360px;
+
+      img {
+        position: absolute;
+        transition: 0.5s;
+      }
+
+      .bg1 {
+        top: 0;
+        left: 0;
+      }
+
+      .bg2 {
+        bottom: 0;
+        right: 0;
+        animation: rotate 10s linear infinite;
+      }
+
+      .bg3 {
+        top: 15px;
+        left: 13px;
+      }
+
+      .bg4 {
+        bottom: 0;
+        left: 0;
+      }
+
+      .bg5 {
+        top: 0;
+        right: 0;
+      }
+
+      &:hover {
+        .bg3 {
+          transform: scale(1.1);
         }
-        .pro-bg4 {
-            position: relative;
-            width: 580px;
-            height: 360px;
-            img {
-                position: absolute;
-                transition: 0.5s;
-            }
-            .bg1 {
-                top: 0;
-                left: 0;
-            }
-            .bg2 {
-                bottom: -40px;
-                right: -20px;
-                animation: rotate 10s linear infinite;
-            }
-            .bg3 {
-                top: 40px;
-                left: 30px;
-                width: 530px;
-                box-shadow: 2px 2px 3px #f1f1f1, -2px -2px 4px #f1f1f1;
-            }
-            .bg4 {
-                top: 140px;
-                left: -20px;
-                width: 120px;
-                height: 100px;
-            }
-            &:hover {
-                .bg3 {
-                    transform: scale(1.1);
-                }
-                .bg4 {
-                    transform: translate(135px, 70px);
-                }
-            }
+
+        .bg4 {
+          transform: translate(-20px, 20px);
         }
-        .pro-bg5 {
-            position: relative;
-            width: 580px;
-            height: 360px;
-            img {
-                position: absolute;
-                transition: 0.5s;
-            }
-            .bg1 {
-                top: 0;
-                left: 0;
-            }
-            .bg2 {
-                bottom: -40px;
-                right: -20px;
-                animation: rotate 10s linear infinite;
-            }
-            .bg3 {
-                top: 40px;
-                left: 30px;
-                width: 530px;
-                box-shadow: 2px 2px 3px #f1f1f1, -2px -2px 4px #f1f1f1;
-            }
-            .bg4 {
-                top: 150px;
-                right: 40px;
-                width: 295px;
-            }
-            &:hover {
-                .bg3 {
-                    transform: scale(1.1);
-                }
-                .bg4 {
-                    transform: translate(-80px, 25px) scale(1.1);
-                }
-            }
+
+        .bg5 {
+          transform: translateY(-20px);
         }
+      }
     }
-    .none {
-        padding: 50px 0;
-        text-align: center;
-        img {
-            width: 324px;
-            margin-bottom: 42px;
+
+    .pro-bg4 {
+      position: relative;
+      width: 580px;
+      height: 360px;
+
+      img {
+        position: absolute;
+        transition: 0.5s;
+      }
+
+      .bg1 {
+        top: 0;
+        left: 0;
+      }
+
+      .bg2 {
+        bottom: -40px;
+        right: -20px;
+        animation: rotate 10s linear infinite;
+      }
+
+      .bg3 {
+        top: 40px;
+        left: 30px;
+        width: 530px;
+        box-shadow: 2px 2px 3px #f1f1f1, -2px -2px 4px #f1f1f1;
+      }
+
+      .bg4 {
+        top: 140px;
+        left: -20px;
+        width: 120px;
+        height: 100px;
+      }
+
+      &:hover {
+        .bg3 {
+          transform: scale(1.1);
         }
-        .text {
-            font-size: 12px;
-            color: #333;
+
+        .bg4 {
+          transform: translate(135px, 70px);
         }
+      }
     }
-    @keyframes rotate {
-        0% {
-            transform: rotate(0);
-        }
-        50% {
-            transform: rotate(180deg);
+
+    .pro-bg5 {
+      position: relative;
+      width: 580px;
+      height: 360px;
+
+      img {
+        position: absolute;
+        transition: 0.5s;
+      }
+
+      .bg1 {
+        top: 0;
+        left: 0;
+      }
+
+      .bg2 {
+        bottom: -40px;
+        right: -20px;
+        animation: rotate 10s linear infinite;
+      }
+
+      .bg3 {
+        top: 40px;
+        left: 30px;
+        width: 530px;
+        box-shadow: 2px 2px 3px #f1f1f1, -2px -2px 4px #f1f1f1;
+      }
+
+      .bg4 {
+        top: 150px;
+        right: 40px;
+        width: 295px;
+      }
+
+      &:hover {
+        .bg3 {
+          transform: scale(1.1);
         }
-        100% {
-            transform: rotate(360deg);
+
+        .bg4 {
+          transform: translate(-80px, 25px) scale(1.1);
         }
+      }
     }
+  }
+
+  .none {
+    padding: 50px 0;
+    text-align: center;
+
+    img {
+      width: 324px;
+      margin-bottom: 42px;
+    }
+
+    .text {
+      font-size: 12px;
+      color: #333;
+    }
+  }
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0);
+    }
+
+    50% {
+      transform: rotate(180deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 }
+
 .tool {
-    z-index: 10;
-    position: fixed;
-    bottom: 100px;
-    right: 30px;
-    .item {
-        width: 45px;
-        height: 45px;
-        margin-bottom: 10px;
-        border: 1px solid #e5e5e5;
-        cursor: pointer;
+  z-index: 10;
+  position: fixed;
+  bottom: 100px;
+  right: 30px;
+
+  .item {
+    width: 45px;
+    height: 45px;
+    margin-bottom: 10px;
+    border: 1px solid #e5e5e5;
+    cursor: pointer;
+  }
+
+  .wechat {
+    background: #fff url(../../../assets/img/index/wechat.png) center center/auto no-repeat;
+
+    &:hover {
+      background-image: url(../../../assets/img/index/wechat-1.png);
+      background-color: #006eff;
+
+      &+.popup {
+        display: block;
+      }
     }
-    .wechat {
-        background: #fff url(../../../assets/img/index/wechat.png) center center/auto no-repeat;
-        &:hover {
-            background-image: url(../../../assets/img/index/wechat-1.png);
-            background-color: #006eff;
-            & + .popup {
-                display: block;
-            }
-        }
+  }
+
+  .tel {
+    background: #fff url(../../../assets/img/index/tel.png) center center/auto no-repeat;
+
+    &:hover {
+      background-image: url(../../../assets/img/index/tel-1.png);
+      background-color: #006eff;
+
+      &+.popup {
+        display: block;
+      }
     }
-    .tel {
-        background: #fff url(../../../assets/img/index/tel.png) center center/auto no-repeat;
-        &:hover {
-            background-image: url(../../../assets/img/index/tel-1.png);
-            background-color: #006eff;
-            & + .popup {
-                display: block;
-            }
-        }
+  }
+
+  .topping {
+    background: #fff url(../../../assets/img/index/top.png) center center/auto no-repeat;
+
+    &:hover {
+      background-image: url(../../../assets/img/index/top-1.png);
+      background-color: #006eff;
     }
-    .topping {
-        background: #fff url(../../../assets/img/index/top.png) center center/auto no-repeat;
-        &:hover {
-            background-image: url(../../../assets/img/index/top-1.png);
-            background-color: #006eff;
-        }
+  }
+
+  .popup {
+    position: absolute;
+    display: none;
+  }
+
+  .wechat-popup {
+    top: -100px;
+    left: -230px;
+    padding: 20px;
+    text-align: center;
+    background-color: #fff;
+    box-shadow: 0px 0px 7px 0px rgba(203, 203, 203, 0.55);
+
+    .tips {
+      font-size: 14px;
     }
-    .popup {
-        position: absolute;
-        display: none;
+
+    .des {
+      margin: 5px 0 15px;
+      font-size: 12px;
+      color: #333;
     }
-    .wechat-popup {
-        top: -100px;
-        left: -230px;
-        padding: 20px;
-        text-align: center;
-        background-color: #fff;
-        box-shadow: 0px 0px 7px 0px rgba(203, 203, 203, 0.55);
-        .tips {
-            font-size: 14px;
-        }
-        .des {
-            margin: 5px 0 15px;
-            font-size: 12px;
-            color: #333;
-        }
+  }
+
+  .tel-popup {
+    top: -10px;
+    left: -250px;
+    width: 250px;
+    border-right: 20px solid transparent;
+
+    &:hover {
+      display: block;
     }
-    .tel-popup {
-        top: -10px;
-        left: -250px;
-        width: 250px;
-        border-right: 20px solid transparent;
-        &:hover {
-            display: block;
-        }
-        .tel-inner {
-            padding: 20px;
-            background-color: #fff;
-            box-shadow: 0px 0px 7px 0px rgba(203, 203, 203, 0.55);
+
+    .tel-inner {
+      padding: 20px;
+      background-color: #fff;
+      box-shadow: 0px 0px 7px 0px rgba(203, 203, 203, 0.55);
+    }
+
+    .line {
+      display: flex;
+
+      &:first-child {
+        margin-bottom: 20px;
+      }
+    }
+
+    .text {
+      margin-left: 15px;
+    }
+
+    .title {
+      margin-bottom: 5px;
+      font-size: 14px;
+      cursor: pointer;
+
+      &:hover {
+        color: #006eff;
+      }
+    }
+
+    .tel-num {
+      font-size: 12px;
+      color: #006eff;
+    }
+
+    .des {
+      font-size: 12px;
+      color: #686868;
+    }
+  }
+}
+
+@media (max-width: 1200px) {
+  .wrap {
+    .inner {
+      width: 90% !important;
+    }
+
+    .banner {
+      .slide {
+        padding: 0 60px;
+        justify-content: space-between;
+      }
+
+      .texts {
+        margin-right: 0;
+      }
+    }
+
+    .intro {
+      .intro-pic {
+        flex-direction: column;
+      }
+
+      .text {
+        width: auto;
+        margin-bottom: 20px;
+      }
+    }
+
+    .pics {
+      flex-direction: column;
+
+      .text {
+        width: 100%;
+        margin-bottom: 20px;
+      }
+
+      .pro-bg2 {
+        max-width: 100%;
+      }
+
+      .pro-bg1 {
+        max-width: 100%;
+
+        .bg3 {
+          top: 0;
+          left: 0;
+          max-width: 100%;
         }
-        .line {
-            display: flex;
-            &:first-child {
-                margin-bottom: 20px;
-            }
+      }
+    }
+
+    .adv {
+      .en {
+        top: 70px;
+      }
+
+      .list {
+        flex-direction: column;
+
+        li {
+          width: 100%;
+          margin: 0 0 20px 0;
         }
-        .text {
-            margin-left: 15px;
+      }
+    }
+  }
+}
+
+@media (max-width: 640px) {
+  .wrap {
+    .pics {
+      .pro-bg1 {
+        .bg2 {
+          right: 50px;
         }
-        .title {
-            margin-bottom: 5px;
-            font-size: 14px;
-            cursor: pointer;
-            &:hover {
-                color: #006eff;
-            }
+
+        .bg6 {
+          display: none;
         }
-        .tel-num {
-            font-size: 12px;
-            color: #006eff;
+      }
+
+      .pro-bg2 {
+
+        .bg2,
+        .bg3 {
+          left: 0;
+          max-width: 100%;
         }
-        .des {
-            font-size: 12px;
-            color: #686868;
+      }
+
+      .pro-bg3 {
+        max-width: 100%;
+
+        .bg2 {
+          right: 50px;
         }
-    }
-}
 
-@media (max-width: 1200px) {
-    .wrap {
-        .inner {
-            width: 90% !important;
+        .bg3 {
+          left: 0;
+          max-width: 100%;
         }
-        .banner {
-            .slide {
-                padding: 0 60px;
-                justify-content: space-between;
-            }
-            .texts {
-                margin-right: 0;
-            }
+      }
+
+      .pro-bg4 {
+        max-width: 100%;
+        height: 300px;
+
+        .bg2 {
+          right: 50px;
+          bottom: 0;
         }
-        .intro {
-            .intro-pic {
-                flex-direction: column;
-            }
-            .text {
-                width: auto;
-                margin-bottom: 20px;
-            }
+
+        .bg3 {
+          top: 0;
+          left: 0;
+          max-width: 100%;
         }
-        .pics {
-            flex-direction: column;
-            .text {
-                width: 100%;
-                margin-bottom: 20px;
-            }
-            .pro-bg2 {
-                max-width: 100%;
-            }
-            .pro-bg1 {
-                max-width: 100%;
-                .bg3 {
-                    top: 0;
-                    left: 0;
-                    max-width: 100%;
-                }
-            }
+
+        .bg4 {
+          top: 110px;
+          left: 20px;
         }
-        .adv {
-            .en {
-                top: 70px;
-            }
-            .list {
-                flex-direction: column;
-                li {
-                    width: 100%;
-                    margin: 0 0 20px 0;
-                }
-            }
+      }
+
+      .pro-bg5 {
+        max-width: 100%;
+
+        .bg2 {
+          right: 50px;
+          bottom: 0;
         }
-    }
-}
-@media (max-width: 640px) {
-    .wrap {
-        .pics {
-            .pro-bg1 {
-                .bg6 {
-                    display: none;
-                }
-            }
-            .pro-bg2 {
-                .bg2,
-                .bg3 {
-                    left: 0;
-                    max-width: 100%;
-                }
-            }
-            .pro-bg3 {
-                max-width: 100%;
-                .bg3 {
-                    left: 0;
-                    max-width: 100%;
-                }
-            }
-            .pro-bg4 {
-                max-width: 100%;
-                height: 300px;
-                .bg2 {
-                    bottom: 0;
-                }
-                .bg3 {
-                    top: 0;
-                    left: 0;
-                    max-width: 100%;
-                }
-                .bg4 {
-                    top: 110px;
-                    left: 20px;
-                }
-            }
-            .pro-bg5 {
-                max-width: 100%;
-                .bg2 {
-                    right: 0;
-                    bottom: 0;
-                }
-                .bg3 {
-                    left: 0;
-                    max-width: 100%;
-                }
-            }
+
+        .bg3 {
+          left: 0;
+          max-width: 100%;
         }
+      }
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/info/list/index.vue b/src/pages/info/list/index.vue
index bf02b94..81bddbb 100644
--- a/src/pages/info/list/index.vue
+++ b/src/pages/info/list/index.vue
@@ -5,53 +5,42 @@
       <div class="center-wrap">
         <div class="nav">
           <p class="column-name">{{ $route.query.name }}</p>
-          <el-menu v-if="menuList.length"
-                   unique-opened
-                   :default-active="defaultIndex"
-                   @select="initData">
-            <menuTree v-if="menuRefresh"
-                      :menuList="menuList"></menuTree>
+          <el-menu v-if="menuList.length" unique-opened :default-active="defaultIndex" @select="initData">
+            <menuTree v-if="menuRefresh" :menuList="menuList"></menuTree>
           </el-menu>
         </div>
         <div class="list-wrap">
           <div class="list">
             <template v-if="listData.length">
               <ul>
-                <li v-for="(item,index) in listData"
-                    :key="index"
-                    @click="toArticle(item.id)">
-                  <img :src="item.coverUrl"
-                       alt="">
+                <li v-for="(item, index) in listData" :key="index" @click="toArticle(item.id)">
+                  <img :src="item.coverUrl" alt="">
                   <div class="text">
-                    <div class="title">{{item.title}}</div>
+                    <div class="title">{{ item.title }}</div>
                     <div class="metas">
-                      <span>作者：{{item.author}}</span>
+                      <span>作者：{{ item.author }}</span>
                       <i class="spe">|</i>
-                      <span>{{item.date.replace(' 00:00:00','')}}</span>
+                      <span>{{ item.date.replace(' 00:00:00', '') }}</span>
                       <i class="spe">|</i>
-                      <span>浏览量：{{item.viewCount}}</span>
+                      <span>浏览量：{{ item.viewCount }}</span>
                     </div>
                     <div class="desc"
-                         :class="{ie: core.isIE() || core.isEdge(),firefox: core.isFirefox() || core.isEdge()}"
-                         v-html="item.content"></div>
+                      :class="{ ie: core.isIE() || core.isEdge(), firefox: core.isFirefox() || core.isEdge() }"
+                      v-html="item.content"></div>
                     <a class="detail">查看详情 ></a>
                   </div>
                 </li>
               </ul>
               <div class="pagination">
-                <el-pagination background
-                               layout="total, prev, pager, next"
-                               :total="totals"
-                               @current-change="handleCurrentChange"
-                               :current-page="page">
+                <el-pagination background layout="total, prev, pager, next" :total="totals"
+                  @current-change="handleCurrentChange" :current-page="page">
                 </el-pagination>
               </div>
             </template>
             <template v-else>
               <div class="empty">
                 <div>
-                  <img src="@/assets/img/none.png"
-                       alt="">
+                  <img src="@/assets/img/none.png" alt="">
                   <p>暂无资讯</p>
                 </div>
               </div>
@@ -214,148 +203,209 @@ export default {
 
 <style lang="scss" scoped>
 .wrap {
-    .banner {
-        height: 350px;
-        padding: 100px 0 0 180px;
-        background: url(../../../assets/img/info-bg6.png) (0 0) / auto no-repeat,
-            url(../../../assets/img/info-bg7.png) (25% 110px)/400px auto no-repeat,
-            url(../../../assets/img/info-bg4.png) (top right) / auto no-repeat,
-            url(../../../assets/img/info-bg5.png) (80% 20px) / auto no-repeat, url(../../../assets/img/info-bg3.png) 0 0/100% 100% no-repeat;
-    }
+  .banner {
+    height: 350px;
+    padding: 100px 0 0 180px;
+    background: url(../../../assets/img/info-bg6.png) (0 0) / auto no-repeat,
+      url(../../../assets/img/info-bg7.png) (25% 110px)/400px auto no-repeat,
+      url(../../../assets/img/info-bg4.png) (top right) / auto no-repeat,
+      url(../../../assets/img/info-bg5.png) (80% 20px) / auto no-repeat, url(../../../assets/img/info-bg3.png) 0 0/100% 100% no-repeat;
+  }
 }
+
 .main {
-    min-height: calc(100vh - 524px);
-    background: url(../../../assets/img/info-bg1.png) (0px 179px)/ (190px 171px) no-repeat,
-        url(../../../assets/img/info-bg2.png) (bottom right)/ (407px 273px) no-repeat;
-    .center-wrap {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start;
-    }
-    .column-name {
-        padding: 14px 0;
-        margin-bottom: 10px;
+  min-height: calc(100vh - 524px);
+  background: url(../../../assets/img/info-bg1.png) (0px 179px)/ (190px 171px) no-repeat,
+    url(../../../assets/img/info-bg2.png) (bottom right)/ (407px 273px) no-repeat;
+
+  .center-wrap {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  .column-name {
+    padding: 14px 0;
+    margin-bottom: 10px;
+    font-size: 16px;
+    text-align: center;
+    color: #fff;
+    background-color: #007eff;
+    border-radius: 8px;
+  }
+
+  .nav {
+    width: 156px;
+    overflow: hidden;
+
+    .el-menu {
+      border-right: 0;
+
+      .el-submenu__icon-arrow {
+        display: none;
+      }
+
+      .el-submenu__title {
+        padding-right: 40px;
+        color: #1182f5;
+        background-color: #c6e7ff;
+
+        .el-submenu__title {
+          padding-right: 60px;
+        }
+      }
+
+      .el-menu-item {
+        min-width: auto;
+        padding: 0 24px !important;
         font-size: 16px;
-        text-align: center;
-        color: #fff;
-        background-color: #007eff;
-        border-radius: 8px;
+        color: #666;
+        border-bottom: 2px solid #f3f6fa;
+        border-right: 2px solid transparent;
+
+        &:before {
+          content: '';
+          display: inline-block;
+          width: 3px;
+          height: 3px;
+          margin-right: 10px;
+          vertical-align: middle;
+          border-radius: 50%;
+          background-color: #666;
+        }
+
+        &.is-active {
+          color: $main-color;
+          border-right-color: $main-color;
+
+          &:before {
+            background-color: $main-color;
+          }
+        }
+      }
+    }
+  }
+
+  .list-wrap {
+    width: calc(100% - 180px);
+    margin-left: 24px;
+
+  }
+
+  .list {
+    li {
+      display: flex;
+      margin-bottom: 12px;
+      cursor: pointer;
+      transition: all 0.3s;
+      background-color: #fff;
+      border-radius: 6px;
+      overflow: hidden;
     }
+
+    img {
+      width: 260px;
+      height: 195px;
+      border: 0;
+    }
+
+    .text {
+      position: relative;
+      width: calc(100% - 260px);
+      padding: 20px 24px;
+    }
+
+    .title {
+      font-size: 20px;
+      color: #0b1d30;
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .metas {
+      display: inline-flex;
+      align-items: center;
+      width: 100%;
+      margin: 10px 0;
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.45);
+
+      .spe {
+        margin: 0 10px;
+      }
+    }
+
+    .desc {
+      font-size: 14px;
+      color: #333;
+      line-height: 24px;
+      display: -webkit-box;
+      display: -moz-box;
+      -webkit-box-orient: vertical;
+      -moz-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      -moz-line-clamp: 2;
+      overflow: hidden;
+      text-overflow: ellipsis;
+
+      &.ie {
+        height: 80px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      &.firefox {
+        height: 76px;
+      }
+    }
+
+    .detail {
+      position: absolute;
+      bottom: 24px;
+      font-size: 14px;
+      color: $main-color;
+    }
+  }
+}
+
+
+@media (max-width: 1000px) {
+  .main {
+    .center-wrap {
+      flex-direction: column;
+      width: 95%;
+    }
+
     .nav {
-        width: 156px;
-        overflow: hidden;
-        .el-menu {
-            border-right: 0;
-            .el-submenu__icon-arrow {
-                display: none;
-            }
-            .el-submenu__title {
-                padding-right: 40px;
-                color: #1182f5;
-                background-color: #c6e7ff;
-                .el-submenu__title {
-                    padding-right: 60px;
-                }
-            }
-            .el-menu-item {
-                min-width: auto;
-                padding: 0 24px !important;
-                font-size: 16px;
-                color: #666;
-                border-bottom: 2px solid #f3f6fa;
-                border-right: 2px solid transparent;
-                &:before {
-                    content: '';
-                    display: inline-block;
-                    width: 3px;
-                    height: 3px;
-                    margin-right: 10px;
-                    vertical-align: middle;
-                    border-radius: 50%;
-                    background-color: #666;
-                }
-                &.is-active {
-                    color: $main-color;
-                    border-right-color: $main-color;
-                    &:before {
-                        background-color: $main-color;
-                    }
-                }
-            }
-        }
+      width: 100%;
     }
+
     .list-wrap {
-        width: calc(100% - 180px);
-        margin-left: 24px;
-        .list {
-            li {
-                display: flex;
-                margin-bottom: 12px;
-                cursor: pointer;
-                transition: all 0.3s;
-                background-color: #fff;
-                border-radius: 6px;
-                overflow: hidden;
-
-                img {
-                    width: 260px;
-                    height: 195px;
-                    border: 0;
-                }
-                .text {
-                    position: relative;
-                    width: calc(100% - 260px);
-                    padding: 20px 24px;
-                    .title {
-                        font-size: 20px;
-                        color: #0b1d30;
-                        font-weight: 500;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        white-space: nowrap;
-                    }
-                    .metas {
-                        display: inline-flex;
-                        align-items: center;
-                        width: 100%;
-                        margin: 10px 0;
-                        font-size: 12px;
-                        color: rgba(0, 0, 0, 0.45);
-                        .spe {
-                            margin: 0 10px;
-                        }
-                    }
-                    .desc {
-                        font-size: 14px;
-                        color: #333;
-                        line-height: 24px;
-                        display: -webkit-box;
-                        display: -moz-box;
-                        -webkit-box-orient: vertical;
-                        -moz-box-orient: vertical;
-                        -webkit-line-clamp: 2;
-                        -moz-line-clamp: 2;
-                        overflow: hidden;
-                        text-overflow: ellipsis;
-                        &.ie {
-                            height: 80px;
-                            text-overflow: ellipsis;
-                            white-space: nowrap;
-                        }
-                        &.firefox {
-                            height: 76px;
-                        }
-                    }
-                    .detail {
-                        position: absolute;
-                        bottom: 24px;
-                        font-size: 14px;
-                        color: $main-color;
-                    }
-                }
-            }
-        }
+      width: 100%;
+      margin: 20px 0 0;
     }
+  }
 }
-</style>
 
+@media (max-width: 640px) {
+
+  .main {
+    .list {
+      li {
+        flex-direction: column;
+        align-items: center;
+      }
+
+      .text {
+        width: 100%;
+      }
+
+      .detail {
+        right: 24px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/log/list/index.vue b/src/pages/log/list/index.vue
index 91502a4..36b8841 100644
--- a/src/pages/log/list/index.vue
+++ b/src/pages/log/list/index.vue
@@ -1,114 +1,160 @@
 <template>
-    <div class="wrap">
-        <div class="top">
-            <img width="450" src="@/assets/img/update.png" alt="">
-            <p>给用户带来更好的服务与体验是我们不断优化和迭代产品的动力。</p>
-        </div>
-        <log-list></log-list>
+  <div class="wrap">
+    <div class="top">
+      <img src="@/assets/img/update.png" alt="">
+      <p>给用户带来更好的服务与体验是我们不断优化和迭代产品的动力。</p>
     </div>
+    <log-list></log-list>
+  </div>
 </template>
 
 <script>
 import logList from '@/components/log'
 export default {
-    name: 'log',
-    data() {
-        return {
-            
-        }
-    },
-    components: {
-        logList
-    },
-    mounted() {
-      
-    },
-    methods: {
-        
+  name: 'log',
+  data () {
+    return {
+
     }
+  },
+  components: {
+    logList
+  },
+  mounted () {
+
+  },
+  methods: {
+
+  }
 };
 </script>
 
 <style lang="scss" scoped>
 .wrap {
-    padding: 50px 0 20px;
-    background-color: #000;
-    .top {
-        margin-bottom: 100px;
-        text-align: center;
-        img {
-          margin: 30px 0;
-        }
-        p {
-          color: #e9e9e9;
-        }
+  padding: 50px 0 20px;
+  background-color: #000;
+
+  .top {
+    margin-bottom: 100px;
+    text-align: center;
+
+    img {
+      width: 450px;
+      margin: 30px 0;
+    }
+
+    p {
+      color: #e9e9e9;
     }
+  }
 }
-    
+
 /deep/.timeline {
+  display: flex;
+  flex-direction: column;
+  width: 1000px;
+  margin: 0 auto;
+
+  .item {
     display: flex;
-    flex-direction: column;
-    width: 1000px;
-    margin: 0 auto;
-    .item {
-        display: flex;
-        justify-content: center;
-        margin-bottom: 30px;
+    justify-content: center;
+    margin-bottom: 30px;
+  }
+
+  .date {
+    width: 300px;
+    margin-right: 100px;
+    text-align: right;
+    color: #cbcbcb;
+    font-size: 14px;
+  }
+
+  .right {
+    flex: 1;
+    color: #fff;
+  }
+
+  h6 {
+    margin-bottom: 15px;
+    font-size: 18px;
+    line-height: 1;
+  }
+
+  .cover {
+    max-width: 400px;
+    margin: 10px 0 20px;
+  }
+
+  .detail {
+    li {
+      margin-bottom: 20px;
     }
+
+    .name {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+      font-size: 14px;
+      color: #fff;
+
+      img {
+        width: 20px;
+        margin-right: 8px;
+      }
+    }
+
+    .val {
+      font-size: 15px;
+      line-height: 1.8;
+      white-space: pre-wrap;
+
+      p {
+        position: relative;
+        color: #a3a3a3;
+
+        &:before {
+          content: '';
+          display: inline-block;
+          width: 5px;
+          height: 5px;
+          margin: 0 15px 0 8px;
+          vertical-align: middle;
+          border-radius: 20px;
+          background-color: $main-color;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1000px) {
+  /deep/.timeline {
+    width: 95%;
+
     .date {
-        width: 300px;
-        margin-right: 100px;
-        text-align: right;
-        color: #cbcbcb;
-        font-size: 14px;
+      width: 100px;
+      margin-right: 30px;
     }
-    .right {
-        flex: 1;
-        color: #fff;
+  }
+}
+
+@media (max-width: 480px) {
+  .wrap {
+    .top {
+      img {
+        width: 100%;
+      }
     }
-    h6 {
-        margin-bottom: 15px;
-        font-size: 18px;
-        line-height: 1;
+  }
+
+  /deep/.timeline {
+    .date {
+      margin-right: 20px;
     }
+
     .cover {
-        max-width: 400px;
-        margin: 10px 0 20px;
-    }
-    .detail {
-        li {
-            margin-bottom: 20px;
-        }
-        .name {
-            display: flex;
-            align-items: center;
-            margin-bottom: 5px;
-            font-size: 14px;
-            color: #fff;
-            img {
-                width: 20px;
-                margin-right: 8px;
-            }
-        }
-        .val {
-            font-size: 15px;
-            line-height: 1.8;
-            white-space: pre-wrap;
-            p {
-              position: relative;
-              color: #a3a3a3;
-              &:before {
-                content: '';
-                display: inline-block;
-                width: 5px;
-                height: 5px;
-                margin: 0 15px 0 8px;
-                vertical-align: middle;
-                border-radius: 20px;
-                background-color: $main-color;
-              }
-            }
-        }
+      max-width: 100%;
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/touristMatch/list/index.vue b/src/pages/touristMatch/list/index.vue
index 9f1db25..2677aaf 100644
--- a/src/pages/touristMatch/list/index.vue
+++ b/src/pages/touristMatch/list/index.vue
@@ -3,61 +3,42 @@
     <div class="search">
       <h6>赛事竞技，精彩纷呈</h6>
       <div class="input">
-        <img src="@/assets/img/search.png"
-             alt="">
-        <input type="text"
-               placeholder="请输入关键词"
-               v-model="keyword">
+        <img src="@/assets/img/search.png" alt="">
+        <input type="text" placeholder="请输入关键词" v-model="keyword">
       </div>
     </div>
 
     <!-- 课程筛选 -->
     <div class="filter">
-      <div class="center-wrap"
-           style="padding: 0;margin: 0 auto;">
+      <div class="center-wrap" style="padding: 0;margin: 0 auto;">
         <dl>
           <dt>比赛范围：</dt>
-          <dd v-for="(item, i) in scopes"
-              :key="i"
-              :class="{active: form.competitionScope == item.id}"
-              @click="changeScope(item.id)">{{ item.name }}</dd>
+          <dd v-for="(item, i) in scopes" :key="i" :class="{ active: form.competitionScope == item.id }"
+            @click="changeScope(item.id)">{{ item.name }}</dd>
           <template v-if="form.competitionScope === 2">
             <div class="select-wrap">
               <span class="label">省份</span>
-              <el-select size="small"
-                         v-model="form.provinceId"
-                         clearable
-                         @change="getCity">
-                <el-option label="请选择"
-                           value=""></el-option>
-                <el-option v-for="(item,index) in provinces"
-                           :key="index"
-                           :label="item.provinceName"
-                           :value="item.provinceId"></el-option>
+              <el-select size="small" v-model="form.provinceId" clearable @change="getCity">
+                <el-option label="请选择" value=""></el-option>
+                <el-option v-for="(item, index) in provinces" :key="index" :label="item.provinceName"
+                  :value="item.provinceId"></el-option>
               </el-select>
             </div>
             <div class="select-wrap">
               <span class="label">城市</span>
-              <el-select size="small"
-                         v-model="form.cityId"
-                         clearable
-                         @change="initData">
-                <el-option label="请选择"
-                           value=""></el-option>
-                <el-option v-for="(item,index) in cities"
-                           :key="index"
-                           :label="item.cityName"
-                           :value="item.cityId"></el-option>
+              <el-select size="small" v-model="form.cityId" clearable @change="initData">
+                <el-option label="请选择" value=""></el-option>
+                <el-option v-for="(item, index) in cities" :key="index" :label="item.cityName"
+                  :value="item.cityId"></el-option>
               </el-select>
             </div>
           </template>
         </dl>
         <dl>
           <dt>筛选排序：</dt>
-          <dd v-for="(item, i) in sorts"
-              :key="i"
-              :class="{active: form.sequence == item.id}"
-              @click="changeSort(item.id)">{{ item.name }}</dd>
+          <dd v-for="(item, i) in sorts" :key="i" :class="{ active: form.sequence == item.id }"
+            @click="changeSort(item.id)">{{
+              item.name }}</dd>
         </dl>
       </div>
     </div>
@@ -68,64 +49,60 @@
           <div class="list">
             <template v-if="listData.length">
               <ul>
-                <li v-for="(item,index) in listData"
-                    :key="index"
-                    :id="item.id"
-                    @click="toDetail(item)">
+                <li v-for="(item, index) in listData" :key="index" :id="item.id" @click="toDetail(item)">
                   <div class="left">
                     <el-button v-if="item.status === 2 || item.curStage"
-                               :class="['stage-label', {playing: item.curStage}]"
-                               type="primary">{{ item.status === 2 ? '报名中' : item.curStage ? '竞赛中' : '' }}</el-button>
+                      :class="['stage-label', { playing: item.curStage }]" type="primary">{{ item.status === 2 ? '报名中' :
+                        item.curStage ? '竞赛中' : '' }}</el-button>
                     <div class="cover">
-                      <img :src="item.coverUrl || 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220623/png/1539857403162943488.png'"
-                           alt="">
+                      <img
+                        :src="item.coverUrl || 'https://huoran.oss-cn-shenzhen.aliyuncs.com/20220623/png/1539857403162943488.png'"
+                        alt="">
                     </div>
                     <div class="info">
                       <div class="title">{{ item.competitionName }}</div>
                       <div class="metas">
-                        <div :class="{'flex-top': item.sponsor.split(',').length > 1}">
+                        <div class="meta" :class="{ 'flex-top': item.sponsor.split(',').length > 1 }">
                           <span class="label">主办方：&emsp;</span>
                           <span class="val">{{ item.sponsor }}</span>
                         </div>
-                        <div>
-                          <span class="label">报名时间：</span><span class="val">{{ item.signUpStartTime}} ~ {{ item.signUpEndTime }}</span>
+                        <div class="meta">
+                          <span class="label">报名时间：</span><span class="val">{{ item.signUpStartTime }} ~ {{
+                            item.signUpEndTime }}</span>
                         </div>
-                        <div>
-                          <span class="label">比赛时间：</span><span class="val">{{ item.playStartTime}} ~ {{ item.playEndTime }}</span>
+                        <div class="meta">
+                          <span class="label">比赛时间：</span><span class="val">{{ item.playStartTime }} ~ {{
+                            item.playEndTime }}</span>
                         </div>
-                        <div :title="item.locations || item.range">
+                        <div class="meta" :title="item.locations || item.range">
                           <span class="label">比赛范围：</span><span class="val">{{ item.locations || item.range }}</span>
                         </div>
-                        <div>
-                          <span class="label">比赛类型：</span><span class="val">{{ item.competitionType ? '团体赛' : '个人赛' }}</span>
+                        <div class="meta">
+                          <span class="label">比赛类型：</span><span class="val">{{ item.competitionType ? '团体赛' : '个人赛'
+                            }}</span>
                         </div>
-                        <div v-if="item.curStage">
+                        <div v-if="item.curStage" class="meta">
                           <span class="label">当前阶段：</span><span class="val">{{ item.curStage.stageName }}</span>
                         </div>
                       </div>
                     </div>
                   </div>
                   <div class="right">
-                    <el-dropdown v-if="item.playingStages && item.playingStages.length > 1"
-                                 class="m-l-10"
-                                 @command="e => chooseStage(e, item)">
-                      <el-button type="primary"
-                                 style="background-color: #f96d6d;border: 0;">
+                    <el-dropdown v-if="item.playingStages && item.playingStages.length > 1" class="m-l-10"
+                      @command="e => chooseStage(e, item)">
+                      <el-button type="primary" style="background-color: #f96d6d;border: 0;">
                         选择竞赛<i class="el-icon-arrow-down el-icon--right"></i>
                       </el-button>
                       <el-dropdown-menu slot="dropdown">
-                        <el-dropdown-item v-for="(stage, i) in item.playingStages"
-                                          :key="i"
-                                          :command="stage">进入{{ stage.stageName }}</el-dropdown-item>
+                        <el-dropdown-item v-for="(stage, i) in item.playingStages" :key="i" :command="stage">进入{{
+                          stage.stageName }}</el-dropdown-item>
                       </el-dropdown-menu>
                     </el-dropdown>
-                    <p class="status"
-                       v-else-if="item.status != 4 || (item.status == 4 && item.curStage)"
-                       :class="{wait: item.status == 0,signing: item.status == 2,signed: item.status == 1,playing: item.status == 4 && item.curStage,finish: item.status == 3 || item.status == 5}"
-                       :title="item.status == 4 ? item.stageName : statusList[item.status]"
-                       @click.stop="signup(item)">{{ item.status == 4 ? item.stageName : statusList[item.status] }}</p>
-                    <p class="end-text"
-                       v-if="item.end">
+                    <p class="status" v-else-if="item.status != 4 || (item.status == 4 && item.curStage)"
+                      :class="{ wait: item.status == 0, signing: item.status == 2, signed: item.status == 1, playing: item.status == 4 && item.curStage, finish: item.status == 3 || item.status == 5 }"
+                      :title="item.status == 4 ? item.stageName : statusList[item.status]" @click.stop="signup(item)">{{
+                        item.status == 4 ? item.stageName : statusList[item.status] }}</p>
+                    <p class="end-text" v-if="item.end">
                       距离{{ item.status == 4 ? item.endText : endList[item.status] }}还有
                       <em>{{ item.end }}</em>
                     </p>
@@ -133,19 +110,16 @@
                 </li>
               </ul>
               <div class="pagination">
-                <el-pagination background
-                               layout="total, prev, pager, next"
-                               :total="totals"
-                               @current-change="handleCurrentChange"
-                               :current-page="page">
+                <el-pagination background layout="total, prev, pager, next"
+                  :pager-count="$store.state.layout.isMobile ? 3 : 7" :total="totals"
+                  @current-change="handleCurrentChange" :current-page="page">
                 </el-pagination>
               </div>
             </template>
             <template v-else>
               <div class="empty">
                 <div>
-                  <img src="@/assets/img/none.png"
-                       alt="">
+                  <img src="@/assets/img/none.png" alt="">
                   <p>暂无赛事</p>
                 </div>
               </div>
@@ -155,95 +129,56 @@
       </div>
     </div>
 
-    <el-dialog title="报名"
-               :visible.sync="peopleSignupVisible"
-               :close-on-click-modal="false"
-               width="300px">
+    <el-dialog title="报名" :visible.sync="peopleSignupVisible" :close-on-click-modal="false" width="300px">
       <el-form class="dia-form">
         <el-form-item>
-          <el-input placeholder="请输入4位数大赛邀请码"
-                    maxlength="4"
-                    v-model="peopleSignupForm.registrationInvitationCode"></el-input>
+          <el-input placeholder="请输入4位数大赛邀请码" maxlength="4"
+            v-model="peopleSignupForm.registrationInvitationCode"></el-input>
         </el-form-item>
       </el-form>
-      <span slot="footer"
-            class="dialog-footer">
-        <el-button size="small"
-                   type="primary"
-                   @click="peopleSignupSubmit">报名</el-button>
-        <el-button size="small"
-                   @click="peopleSignupVisible = false">取消</el-button>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" type="primary" @click="peopleSignupSubmit">报名</el-button>
+        <el-button size="small" @click="peopleSignupVisible = false">取消</el-button>
       </span>
     </el-dialog>
-    <el-dialog title="报名"
-               :visible.sync="enterVisible"
-               :close-on-click-modal="false"
-               width="300px">
+    <el-dialog title="报名" :visible.sync="enterVisible" :close-on-click-modal="false" width="300px">
       <el-form class="dia-form">
         <p style="margin-bottom: 5px">请选择要加入的团队</p>
         <el-form-item>
-          <el-select class="w-100"
-                     v-model="enterForm.teamId"
-                     filterable>
-            <el-option v-for="(item, i) in teams"
-                       :key="i"
-                       :label="item.teamName"
-                       :value="item.teamId"></el-option>
+          <el-select class="w-100" v-model="enterForm.teamId" filterable>
+            <el-option v-for="(item, i) in teams" :key="i" :label="item.teamName" :value="item.teamId"></el-option>
           </el-select>
         </el-form-item>
         <el-form-item>
-          <el-input placeholder="请输入6位数团队邀请码"
-                    maxlength="6"
-                    v-model="enterForm.invitationCode"></el-input>
+          <el-input placeholder="请输入6位数团队邀请码" maxlength="6" v-model="enterForm.invitationCode"></el-input>
         </el-form-item>
         <el-form-item v-if="curItem.isNeedCode">
-          <el-input placeholder="请输入4位数大赛邀请码"
-                    maxlength="4"
-                    v-model="enterForm.registrationInvitationCode"></el-input>
+          <el-input placeholder="请输入4位数大赛邀请码" maxlength="4" v-model="enterForm.registrationInvitationCode"></el-input>
         </el-form-item>
         <p class="tips">
-          查找不到团队？点击 <el-link :underline="false"
-                   type="primary"
-                   @click="toTeam">创建团队</el-link>
+          查找不到团队？点击 <el-link :underline="false" type="primary" @click="toTeam">创建团队</el-link>
         </p>
       </el-form>
-      <span slot="footer"
-            class="dialog-footer">
-        <el-button size="small"
-                   type="primary"
-                   @click="enterSubmit">报名</el-button>
-        <el-button size="small"
-                   @click="enterVisible = false">取消</el-button>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" type="primary" @click="enterSubmit">报名</el-button>
+        <el-button size="small" @click="enterVisible = false">取消</el-button>
       </span>
     </el-dialog>
-    <el-dialog title="创建团队"
-               :visible.sync="teamVisible"
-               :close-on-click-modal="false"
-               width="300px">
+    <el-dialog title="创建团队" :visible.sync="teamVisible" :close-on-click-modal="false" width="300px">
       <el-form class="dia-form">
         <el-form-item>
-          <el-input placeholder="请输入团队名称"
-                    maxlength="10"
-                    v-model="teamForm.teamName"></el-input>
+          <el-input placeholder="请输入团队名称" maxlength="10" v-model="teamForm.teamName"></el-input>
         </el-form-item>
         <el-form-item>
-          <el-input placeholder="请输入6位数团队邀请码"
-                    maxlength="6"
-                    v-model="teamForm.invitationCode"></el-input>
+          <el-input placeholder="请输入6位数团队邀请码" maxlength="6" v-model="teamForm.invitationCode"></el-input>
         </el-form-item>
         <el-form-item v-if="curItem.isNeedCode">
-          <el-input placeholder="请输入4位数大赛邀请码"
-                    maxlength="4"
-                    v-model="teamForm.registrationInvitationCode"></el-input>
+          <el-input placeholder="请输入4位数大赛邀请码" maxlength="4" v-model="teamForm.registrationInvitationCode"></el-input>
         </el-form-item>
       </el-form>
-      <span slot="footer"
-            class="dialog-footer">
-        <el-button size="small"
-                   type="primary"
-                   @click="teamSubmit">创建并报名</el-button>
-        <el-button size="small"
-                   @click="teamVisible = false">取消</el-button>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" type="primary" @click="teamSubmit">创建并报名</el-button>
+        <el-button size="small" @click="teamVisible = false">取消</el-button>
       </span>
     </el-dialog>
   </div>
@@ -748,282 +683,364 @@ export default {
 
 <style lang="scss" scoped>
 .search {
+  position: relative;
+  padding: 100px 0 130px;
+  text-align: center;
+  background: url(../../../assets/img/match-bg4.png) (27px 10px) / auto no-repeat,
+    url(../../../assets/img/match-bg5.png) (98% 20px) / auto no-repeat, url(../../../assets/img/match-bg3.png) 0 0/100% 100% no-repeat;
+
+  h6 {
+    margin-bottom: 25px;
+    font-size: 26px;
+    color: #fff;
+  }
+
+  .input {
     position: relative;
-    padding: 100px 0 130px;
-    text-align: center;
-    background: url(../../../assets/img/match-bg4.png) (27px 10px) / auto no-repeat,
-        url(../../../assets/img/match-bg5.png) (98% 20px) / auto no-repeat, url(../../../assets/img/match-bg3.png) 0 0/100% 100% no-repeat;
-    h6 {
-        margin-bottom: 25px;
-        font-size: 26px;
-        color: #fff;
-    }
-    .input {
-        position: relative;
-        width: 700px;
-        margin: 0 auto;
-    }
-    img {
-        position: absolute;
-        top: 19px;
-        left: 14px;
-    }
-    input {
-        width: 100%;
-        height: 62px;
-        line-height: 62px;
-        padding: 0 50px;
-        font-size: 18px;
-        color: #333;
-        border: 0;
-        outline: none;
-        border-radius: 4px;
-    }
+    width: 700px;
+    margin: 0 auto;
+  }
+
+  img {
+    position: absolute;
+    top: 19px;
+    left: 14px;
+  }
+
+  input {
+    width: 100%;
+    height: 62px;
+    line-height: 62px;
+    padding: 0 50px;
+    font-size: 18px;
+    color: #333;
+    border: 0;
+    outline: none;
+    border-radius: 4px;
+  }
 }
+
 .main {
-    background: url(../../../assets/img/match-bg1.png) (0px 95px) / auto auto no-repeat,
-        url(../../../assets/img/match-bg2.png) (98% bottom) / auto auto no-repeat;
-    .filter {
-        width: 100%;
-        background-color: #fff;
-        dl {
-            display: flex;
-            align-items: center;
-            margin: 20px 0;
-            dt {
-                color: #333;
-                font-size: 16px;
-                font-weight: 600;
-            }
-            dd {
-                padding: 5px 20px;
-                margin: 0 10px;
-                color: #4c4c4c;
-                font-size: 16px;
-                cursor: pointer;
-                border-radius: 4px;
-                &.active {
-                    color: $main-color;
-                    background-color: #e6f0ff;
-                }
-            }
+  background: url(../../../assets/img/match-bg1.png) (0px 95px) / auto auto no-repeat,
+    url(../../../assets/img/match-bg2.png) (98% bottom) / auto auto no-repeat;
+
+  .filter {
+    width: 100%;
+    background-color: #fff;
+
+    dl {
+      display: flex;
+      align-items: center;
+      margin: 20px 0;
+
+      dt {
+        color: #333;
+        font-size: 16px;
+        font-weight: 600;
+        white-space: nowrap;
+      }
+
+      dd {
+        padding: 5px 20px;
+        margin: 0 10px;
+        color: #4c4c4c;
+        font-size: 16px;
+        cursor: pointer;
+        border-radius: 4px;
+        white-space: nowrap;
+
+        &.active {
+          color: $main-color;
+          background-color: #e6f0ff;
         }
+      }
     }
-    .select-wrap {
-        display: inline-flex;
-        align-items: center;
-        margin: 0 20px;
-        .label {
-            margin-right: 10px;
+  }
+
+  .select-wrap {
+    display: inline-flex;
+    align-items: center;
+    margin: 0 20px;
+
+    .label {
+      margin-right: 10px;
+    }
+
+    .el-select {
+      width: 130px;
+    }
+  }
+
+  .list-inner {
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  .nav {
+    width: 156px;
+    text-align: right;
+    overflow: hidden;
+    background-color: #fff;
+
+    li {
+      padding: 0 24px;
+      font-size: 16px;
+      color: #666;
+      line-height: 48px;
+      border-bottom: 2px solid #f3f6fa;
+      border-right: 2px solid transparent;
+      cursor: pointer;
+
+      &:before {
+        content: '';
+        display: inline-block;
+        width: 3px;
+        height: 3px;
+        margin-right: 10px;
+        vertical-align: middle;
+        border-radius: 50%;
+        background-color: #666;
+      }
+
+      &.active {
+        color: $main-color;
+        border-right-color: $main-color;
+
+        &:before {
+          background-color: $main-color;
         }
-        .el-select {
-            width: 130px;
+      }
+    }
+  }
+
+  .list-wrap {
+    flex: 1;
+    margin-left: 24px;
+
+  }
+
+  .list {
+    li {
+      display: flex;
+      justify-content: space-between;
+      padding: 16px;
+      margin-bottom: 12px;
+      transition: all 0.3s;
+      cursor: pointer;
+      border-radius: 6px;
+      background-color: #fff;
+
+      &:hover {
+        .title {
+          color: $main-color;
         }
+      }
     }
-    .list-inner {
-        display: flex;
-        justify-content: center;
-        align-items: flex-start;
+
+    .right {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-end;
+      flex: 1;
     }
-    .nav {
-        width: 156px;
-        text-align: right;
-        overflow: hidden;
-        background-color: #fff;
-        li {
-            padding: 0 24px;
-            font-size: 16px;
-            color: #666;
-            line-height: 48px;
-            border-bottom: 2px solid #f3f6fa;
-            border-right: 2px solid transparent;
-            cursor: pointer;
-            &:before {
-                content: '';
-                display: inline-block;
-                width: 3px;
-                height: 3px;
-                margin-right: 10px;
-                vertical-align: middle;
-                border-radius: 50%;
-                background-color: #666;
-            }
-            &.active {
-                color: $main-color;
-                border-right-color: $main-color;
-                &:before {
-                    background-color: $main-color;
-                }
-            }
-        }
+
+    .status {
+      max-width: 120px;
+      padding: 0 23px;
+      line-height: 34px;
+      font-size: 14px;
+      color: #fff;
+      white-space: nowrap;
+      background-color: #52c41a;
+      border-radius: 4px;
+      @include ellipsis();
+
+      &.wait {
+        background-color: #faad14;
+      }
+
+      &.signing {
+        background-color: $main-color;
+      }
+
+      &.signed {
+        background-color: #52c41a;
+      }
+
+      &.playing {
+        background-color: #f96d6d;
+      }
+
+      &.finish {
+        background-color: #ccc;
+      }
     }
-    .list-wrap {
-        flex: 1;
-        margin-left: 24px;
-        .list {
-            li {
-                display: flex;
-                justify-content: space-between;
-                padding: 16px;
-                margin-bottom: 12px;
-                transition: all 0.3s;
-                cursor: pointer;
-                border-radius: 6px;
-                background-color: #fff;
-                .right {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                    align-items: flex-end;
-                    flex: 1;
-
-                    .status {
-                        max-width: 120px;
-                        padding: 0 23px;
-                        line-height: 34px;
-                        font-size: 14px;
-                        color: #fff;
-                        white-space: nowrap;
-                        background-color: #52c41a;
-                        border-radius: 4px;
-                        @include ellipsis();
-                        &.wait {
-                            background-color: #faad14;
-                        }
-
-                        &.signing {
-                            background-color: $main-color;
-                        }
-
-                        &.signed {
-                            background-color: #52c41a;
-                        }
-                        &.playing {
-                            background-color: #f96d6d;
-                        }
-
-                        &.finish {
-                            background-color: #ccc;
-                        }
-                    }
-
-                    .btn {
-                        padding: 12px 20px;
-                        color: #fff;
-                        background-color: #cb221c;
-                        border-radius: 4px;
-                        cursor: pointer;
-
-                        &:hover {
-                            opacity: 0.9;
-                        }
-
-                        &.disabled {
-                            cursor: not-allowed;
-                            background-color: #969696;
-                        }
-                    }
-
-                    .end-text {
-                        margin-top: 10px;
-                        color: rgba(0, 0, 0, 0.65);
-                        font-size: 12px;
-                        white-space: nowrap;
-
-                        em {
-                            font-style: normal;
-                            color: #f00;
-                        }
-                    }
-                }
-
-                &:hover {
-                    .left {
-                        .info {
-                            .title {
-                                color: $main-color;
-                            }
-                        }
-                    }
-                }
-            }
-            .left {
-                position: relative;
-                display: inline-flex;
-                .stage-label {
-                    position: absolute;
-                    top: -16px;
-                    left: -16px;
-                    border: 0;
-                    background-color: rgb(101, 227, 181);
-                    &.playing {
-                        background-color: rgb(251, 174, 41);
-                    }
-                }
-                .cover {
-                    img {
-                        width: 275px;
-                        height: 175px;
-                        border-radius: 6px;
-                    }
-                }
-
-                .info {
-                    margin-left: 16px;
-                    .title {
-                        margin-bottom: 10px;
-                        font-size: 20px;
-                        font-weight: 500;
-                        color: #0b1d30;
-                        line-height: 1;
-                    }
-                    .metas {
-                        font-size: 14px;
-                        color: #666;
-                        div {
-                            display: flex;
-                            align-items: center;
-                            margin-bottom: 5px;
-
-                            &.flex-top {
-                                align-items: flex-start;
-                            }
-                        }
-
-                        .label,
-                        .val {
-                            font-size: 14px;
-                            color: #666;
-                            white-space: nowrap;
-                        }
-
-                        .val {
-                            max-width: 450px;
-                            text-overflow: ellipsis;
-                            overflow: hidden;
-                        }
-
-                        .a-line {
-                            display: block;
-                        }
-                    }
-
-                    .desc {
-                        font-size: 14px;
-                    }
-                }
-            }
+
+    .btn {
+      padding: 12px 20px;
+      color: #fff;
+      background-color: #cb221c;
+      border-radius: 4px;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0.9;
+      }
+
+      &.disabled {
+        cursor: not-allowed;
+        background-color: #969696;
+      }
+    }
+
+    .end-text {
+      margin-top: 10px;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      white-space: nowrap;
+
+      em {
+        font-style: normal;
+        color: #f00;
+      }
+    }
+
+    .left {
+      position: relative;
+      display: inline-flex;
+    }
+
+    .stage-label {
+      position: absolute;
+      top: -16px;
+      left: -16px;
+      border: 0;
+      background-color: rgb(101, 227, 181);
+
+      &.playing {
+        background-color: rgb(251, 174, 41);
+      }
+    }
+
+    .cover {
+      img {
+        width: 275px;
+        height: 175px;
+        border-radius: 6px;
+      }
+    }
+
+    .info {
+      margin-left: 16px;
+    }
+
+    .title {
+      margin-bottom: 10px;
+      font-size: 20px;
+      font-weight: 500;
+      color: #0b1d30;
+      line-height: 1;
+    }
+
+    .metas {
+      font-size: 14px;
+      color: #666;
+
+      .meta {
+        display: flex;
+        align-items: center;
+        margin-bottom: 5px;
+
+        &.flex-top {
+          align-items: flex-start;
         }
+      }
+
+      .label,
+      .val {
+        font-size: 14px;
+        color: #666;
+        white-space: nowrap;
+      }
+
+      .val {
+        max-width: 450px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      .a-line {
+        display: block;
+      }
+    }
+
+    .desc {
+      font-size: 14px;
     }
+  }
 }
+
 /deep/.dia-form {
-    .w-100 {
-        width: 100%;
+  .w-100 {
+    width: 100%;
+  }
+
+  .tips {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+@media (max-width: 1000px) {
+  .main {
+    .center-wrap {
+      width: 90%;
     }
-    .tips {
-        display: flex;
-        justify-content: center;
+  }
+}
+
+@media (max-width: 640px) {
+  .search {
+    .input {
+      width: 90%;
+    }
+  }
+
+  .main {
+    .list-wrap {
+      padding: 0 20px;
+      margin-left: 0;
+    }
+
+    .list {
+
+      li,
+      .left {
+        flex-direction: column;
+        justify-content: flex-start;
+      }
+
+      .cover {
+        text-align: center;
+      }
+
+      .info {
+        margin: 15px 0;
+      }
+
+      .metas {
+        .val {
+          white-space: normal;
+        }
+      }
+
+      .right {
         align-items: center;
+      }
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/setting.js b/src/setting.js
index e0545aa..299c164 100644
--- a/src/setting.js
+++ b/src/setting.js
@@ -30,7 +30,7 @@ if (isDev) {
   host = "http://121.37.12.51/"; // 测试服
   // host = 'https://www.occupationlab.com/' // 正式服
   const ip = localStorage.getItem('localIp')
-  const ips = ['http://192.168.31.217:9000/', 'http://192.168.31.51:9000/', 'http://121.37.12.51/']
+  const ips = ['http://192.168.31.217:9000/', 'http://192.168.31.51:9000/', 'https://www.occupationlab.com/']
   host = ips[+ip]
   // host = 'http://192.168.31.51:9000/'
 } else if (isSq) {
diff --git a/src/styles/common.scss b/src/styles/common.scss
index fae7a0b..ef24906 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -364,14 +364,6 @@
     }
 }
 
-@media (max-width: 1600px) {
-    .el-table {
-        .el-switch__label--right.is-active {
-            left: 8px;
-        }
-    }
-}
-
 .empty {
     display: flex;
     justify-content: center;
@@ -387,3 +379,20 @@
         color: rgba(0, 0, 0, 0.25);
     }
 }
+
+
+@media (max-width: 1600px) {
+  .el-table {
+      .el-switch__label--right.is-active {
+          left: 8px;
+      }
+  }
+}
+@media (max-width: 640px) {
+  .empty {
+    img {
+        width: auto;
+        max-width: 100%;
+    }
+}
+}
\ No newline at end of file