From 0a9fcf47f3f26e5b67162b8c14bfc19c0addbf12 Mon Sep 17 00:00:00 2001
From: yujialong <479214531@qq.com>
Date: Fri, 19 Apr 2024 14:55:08 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=8C=E7=AB=99=E9=A6=96=E9=A1=B5=E3=80=81?=
 =?UTF-8?q?=E6=99=BA=E4=BF=A1=E4=BA=91=E9=A6=96=E9=A1=B5=E8=87=AA=E9=80=82?=
 =?UTF-8?q?=E5=BA=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                  |   4 +-
 src/components/menuTree/index.vue  |  55 +--
 src/layouts/footer/index.vue       |   1 -
 src/layouts/header/index.vue       | 110 +++++-
 src/layouts/navbar/index.vue       | 190 ++++++---
 src/libs/resize/index.js           |  29 +-
 src/pages/course/details/index.vue |  58 ++-
 src/pages/index/list/index.vue     |  65 ++++
 src/pages/index/zxy/index.vue      | 117 +++++-
 src/pages/match/details/index.vue  |  34 +-
 src/pages/record/show/index.vue    |  10 +-
 src/setting.js                     |   2 +-
 src/store/modules/layout.js        |  11 +-
 src/styles/common.scss             | 605 +++++++++++++++--------------
 14 files changed, 844 insertions(+), 447 deletions(-)

diff --git a/public/index.html b/public/index.html
index 57fbfa9..b3173ad 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/components/menuTree/index.vue b/src/components/menuTree/index.vue
index 648e2f8..26fd297 100644
--- a/src/components/menuTree/index.vue
+++ b/src/components/menuTree/index.vue
@@ -1,35 +1,38 @@
 <template>
-    <div>
-        <template v-for="item in this.menuList">
-            <el-submenu :key="item.id" :index="item.id" v-if="item.children && item.children.length">
-                <template slot="title">
-                    <span slot="title">{{item.name}}</span>
-                </template>
-                <menuTree :menuList="item.children"></menuTree>
-            </el-submenu>
-            <el-menu-item :key="item.id" :index="item.id" v-else>
-                <span slot="title">{{item.name}}</span>
-            </el-menu-item>
+  <div>
+    <template v-for="(item, i) in this.menuList">
+      <el-submenu :key="item.id"
+                  :index="item.id"
+                  v-if="item.children && item.children.length">
+        <template slot="title">
+          <span slot="title">{{item.name}}</span>
         </template>
-    </div>
+        <menuTree :menuList="item.children"></menuTree>
+      </el-submenu>
+      <el-menu-item :key="i"
+                    :index="item.id"
+                    v-else>
+        <span slot="title">{{item.name}}</span>
+      </el-menu-item>
+    </template>
+  </div>
 </template>
 
 <script>
-    export default {
-        name: 'menuTree',
-        props: {
-            menuList: {
-                type: Array,
-                default: []
-            }
-        },
-        data () {
-            return {}
-        },
-        mounted () {},
-        methods: {}
+export default {
+  name: 'menuTree',
+  props: {
+    menuList: {
+      type: Array,
+      default: []
     }
+  },
+  data () {
+    return {}
+  },
+  mounted () { },
+  methods: {}
+}
 </script>
 <style lang="scss" scoped>
-    
 </style>
diff --git a/src/layouts/footer/index.vue b/src/layouts/footer/index.vue
index ffed562..d825730 100644
--- a/src/layouts/footer/index.vue
+++ b/src/layouts/footer/index.vue
@@ -96,7 +96,6 @@ export default {
 </script>
 <style lang="scss" scoped>
 .footer {
-    min-width: 1280px;
     padding: 17px 0 9px;
     text-align: center;
     background-color: #0f1d2e;
diff --git a/src/layouts/header/index.vue b/src/layouts/header/index.vue
index ac644de..39523fa 100644
--- a/src/layouts/header/index.vue
+++ b/src/layouts/header/index.vue
@@ -32,7 +32,16 @@
         <span class="title">{{title}}</span>
       </template>
     </a>
-    <div class="inner">
+    <el-radio-group v-if="isDev && !$store.state.layout.isMobile"
+                    class="ip"
+                    v-model="ip"
+                    @change="ipChange">
+      <el-radio :label="0">刘榕ip</el-radio>
+      <el-radio :label="1">陈赓ip</el-radio>
+    </el-radio-group>
+    <!-- pc端 -->
+    <div v-if="!$store.state.layout.isMobile"
+         class="inner">
       <navbar class="nav-wrap"
               ref="nav"></navbar>
 
@@ -88,6 +97,20 @@
                    @click="toTrial">免费试用</el-button>
       </div>
     </div>
+
+    <!-- 移动端 -->
+    <div v-else
+         class="mobile-inner">
+      <i class="login el-icon-user-solid"
+         @click="toLogin"></i>
+      <i class="menu-icon"
+         :class="mobileMenuStatus ? 'el-icon-s-fold': 'el-icon-s-unfold' "
+         @click.stop="toggleMobileMenu"></i>
+      <navbar v-show="mobileMenuStatus"
+              class="mobile-menu"
+              :isHome.sync="isHome"
+              @toggleMobileMenu="toggleMobileMenu" />
+    </div>
   </div>
 </template>
 <script>
@@ -100,6 +123,7 @@ import Bus from '@/libs/bus'
 export default {
   data () {
     return {
+      isDev: Setting.isDev,
       isZj: location.host === '10.60.32.76', // 浙江万里
       isSq: Setting.isSq,
       token: util.local.get(Setting.tokenKey), // 学生端token
@@ -108,7 +132,9 @@ export default {
       isIndex: Setting.whiteList.find(e => e === this.$route.path), // 是否是在白名单页面
       isZxy: Setting.isZxy,
       notices: [],
-      noticeTimer: null
+      noticeTimer: null,
+      ip: localStorage.getItem('localIp') ? +localStorage.getItem('localIp') : 0,
+      mobileMenuStatus: false
     };
   },
   components: {
@@ -129,6 +155,10 @@ export default {
     this.$once('hook:beforeDestroy', function () {
       clearInterval(this.noticeTimer)
     })
+    document.body.addEventListener('click', e => {
+      e.stopPropagation()
+      this.mobileMenuStatus = false
+    })
   },
   methods: {
     ...mapMutations("user", [
@@ -268,6 +298,19 @@ export default {
     toTrial () {
       window.open('https://www.wjx.top/vm/wFCPCFp.aspx')
     },
+    // 登录
+    toLogin () {
+      this.$router.push(`/login`)
+    },
+    // 更改右侧盒子样式
+    toggleMobileMenu () {
+      this.mobileMenuStatus = !this.mobileMenuStatus
+    },
+
+    ipChange (val) {
+      localStorage.setItem('localIp', val)
+      location.reload()
+    },
   }
 };
 </script>
@@ -279,7 +322,6 @@ $height: 64px;
     top: 0;
     left: 0;
     width: 100%;
-    min-width: $min-width;
     height: $height;
     background-color: #fff;
     box-shadow: 0px 0px 6px 0px rgba(178, 178, 178, 0.32);
@@ -316,6 +358,19 @@ $height: 64px;
     .right {
         display: inline-flex;
         align-items: center;
+        .login {
+            display: inline-flex;
+            align-items: center;
+            cursor: pointer;
+            &:hover {
+                opacity: 0.9;
+            }
+            span {
+                margin-left: 5px;
+                color: #666;
+                font-size: 14px;
+            }
+        }
     }
     .msg {
         margin-right: 30px;
@@ -346,19 +401,6 @@ $height: 64px;
         color: #666;
         cursor: pointer;
     }
-    .login {
-        display: inline-flex;
-        align-items: center;
-        cursor: pointer;
-        &:hover {
-            opacity: 0.9;
-        }
-        span {
-            margin-left: 5px;
-            color: #666;
-            font-size: 14px;
-        }
-    }
     .rounded {
         border-radius: 6px;
     }
@@ -369,6 +411,37 @@ $height: 64px;
             border-color: #48cafd;
         }
     }
+
+    .mobile-inner {
+        position: absolute;
+        top: 0;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        width: 100%;
+        height: $height;
+        .login {
+            font-size: 20px;
+            color: #c1c1c1;
+            cursor: pointer;
+        }
+        .menu-icon {
+            margin: 0 20px 0 10px;
+            font-size: 20px;
+            color: #c1c1c1;
+            cursor: pointer;
+        }
+    }
+}
+.mobile-menu {
+    z-index: 9999;
+    position: absolute;
+    top: $height;
+    left: 0;
+    width: 100%;
+    background-color: white;
+    max-height: 300px;
+    overflow-y: scroll;
 }
 @media (max-width: 1870px) {
     .header {
@@ -389,4 +462,9 @@ $height: 64px;
         }
     }
 }
+.ip {
+    position: fixed;
+    top: 25px;
+    left: 200px;
+}
 </style>
diff --git a/src/layouts/navbar/index.vue b/src/layouts/navbar/index.vue
index 422183f..2fa9055 100644
--- a/src/layouts/navbar/index.vue
+++ b/src/layouts/navbar/index.vue
@@ -1,13 +1,15 @@
 <template>
   <div>
-    <ul class="nav">
+    <!-- pc端 -->
+    <ul v-if="!$store.state.layout.isMobile"
+        class="nav">
       <li v-for="(item, i) in menus"
           :key="i"
-          :class="{active: active == item.index}"
+          :class="{active: active == item.id}"
           @click="jump(item)">
-        {{item.title}}
+        {{item.name}}
         <ul :class="['children']"
-            v-if="item.index === '/preInfo/list' || item.index === '/info/list'">
+            v-if="item.id === '/preInfo/list' || item.id === '/info/list'">
           <li v-for="(column, i) in columns"
               :key="i"
               :class="{active: columnActive === column.id}"
@@ -15,14 +17,31 @@
         </ul>
       </li>
     </ul>
+
+    <!-- 移动端 -->
+    <el-menu v-else
+             ref="elMenu"
+             class="menu"
+             background-color="#fff"
+             text-color="#333"
+             active-text-color="#006eff"
+             @open="menuClick"
+             @select="menuClick"
+             :default-active="String(active)">
+      <menuTree :menuList="menus" />
+    </el-menu>
   </div>
 </template>
 
 <script>
+import menuTree from '@/components/menuTree'
 import Setting from "@/setting"
 import util from "@/libs/util"
 import { mapActions } from "vuex";
 export default {
+  components: {
+    menuTree,
+  },
   data () {
     return {
       token: util.local.get(Setting.tokenKey),
@@ -31,75 +50,75 @@ export default {
       // 登录后的菜单
       loginedMenu: [
         {
-          index: "/station/list",
-          title: "实验台"
+          id: "/station/list",
+          name: "实验台"
         },
         {
-          index: "/appraisal/list",
-          title: "能力测评"
+          id: "/appraisal/list",
+          name: "能力测评"
         },
         {
-          index: "/record/list",
-          title: "实验记录"
+          id: "/record/list",
+          name: "实验记录"
         },
         {
-          index: "/ass/list",
-          title: "考核列表"
+          id: "/ass/list",
+          name: "考核列表"
         },
         {
-          index: "/course/list",
-          title: "课程学习"
+          id: "/course/list",
+          name: "课程学习"
         },
         {
-          index: "/info/list",
-          title: "最新资讯"
+          id: "/info/list",
+          name: "最新资讯"
         },
         {
-          index: "/match/list",
-          title: "线上赛事"
+          id: "/match/list",
+          name: "线上赛事"
         },
         {
-          index: "/activity/list",
-          title: "创业活动"
+          id: "/activity/list",
+          name: "创业活动"
         },
         {
-          index: "/screen",
-          title: "数据看板"
+          id: "/screen",
+          name: "数据看板"
         }
       ],
       // 游客菜单
       touristMenu: [
         {
-          index: "/index/list",
-          title: "首页"
+          id: "/index/list",
+          name: "首页"
         },
         {
-          index: "/touristMatch/list",
-          title: "大赛资讯"
+          id: "/touristMatch/list",
+          name: "大赛资讯"
         },
         {
-          index: "/preCourse/list",
-          title: "精品课程"
+          id: "/preCourse/list",
+          name: "精品课程"
         },
         {
-          index: "/preInfo/list",
-          title: "最新资讯"
+          id: "/preInfo/list",
+          name: "最新资讯"
         },
         {
-          index: 'data',
-          title: "数据科研"
+          id: 'data',
+          name: "数据科研"
         },
         {
-          index: "/log/list",
-          title: "更新日志"
+          id: "/log/list",
+          name: "更新日志"
         },
         {
-          index: "/screen",
-          title: "数据看板"
+          id: "/screen",
+          name: "数据看板"
         }
         // {
-        //     index: "trial",
-        //     title: "试用申请"
+        //     id: "trial",
+        //     name: "试用申请"
         // }
       ],
       menus: [],
@@ -109,7 +128,7 @@ export default {
           name: '平台资讯'
         }
       ], // 资讯一级栏目
-      columnActive: this.$route.query.parentId
+      columnActive: this.$route.query.parentId,
     };
   },
   watch: {
@@ -131,10 +150,10 @@ export default {
       // 如果是智信云的网站，则显示产品服务
       const menus = this.touristMenu
       if (Setting.isZxy) {
-        menus[0].index = '/index/zxy'
+        menus[0].id = '/index/zxy'
         menus.splice(1, 0, {
-          index: '/product',
-          title: '产品服务'
+          id: '/product',
+          name: '产品服务'
         })
       }
       this.menus = menus
@@ -149,34 +168,43 @@ export default {
     ]),
     // 跳转
     jump (item) {
-      const { index } = item
+      const { id } = item
       // 数据科研点击后打开新窗口去到数据平台
-      if (index === 'data') {
+      if (id === 'data') {
         window.open(Setting.isDev
           ? `http://192.168.31.125:8092/#/`
           : Setting.isTest
             ? location.origin
             : `https://www.dataforward.cn`)
-      } else if (index === 'trial') {
+      } else if (id === 'trial') {
         // 申请试用
         // window.open('https://www.wjx.cn/vm/wB0RcMm.aspx')
-      } else if (index === '/screen') {
+      } else if (id === '/screen') {
         // 数据看板
         window.open(this.$router.resolve('/screen').href)
       } else {
         const token = util.local.get(Setting.tokenKey)
         // 如果未登录且跳转的是登录后才有的菜单
-        if (!token && this.loginedMenu.find(e => e.index === index)) {
+        if (!token && this.loginedMenu.find(e => e.id === id)) {
           location.reload()
         } else {
-          this.active = index
+          this.active = id
           this.columnActive = ''
           this.setColumnId('')
-          index === '/preInfo/list' || index === '/info/list' || this.$router.push(index).catch(err => { })
+          id === '/preInfo/list' || id === '/info/list' || this.$router.push(id).catch(err => { })
           token !== this.token && location.reload() // 如果登录后再返回该页面，浏览器里会存有token，但是这个页面里的token是刚进到页面时获取的，应该是空，如果是这个情况，则刷新，否则右上角还会显示为登录按钮
         }
       }
     },
+    // 移动端跳转
+    menuClick (e) {
+      this.$emit('toggleMobileMenu')
+      if (e === 'data') {
+        location.href = `https://www.dataforward.cn`
+      } else {
+        this.$router.push(e)
+      }
+    },
     // 获取资讯一级栏目
     getColumns () {
       this.$get(this.api.queryAllColumns).then(({ columnTree }) => {
@@ -260,6 +288,70 @@ export default {
         }
     }
 }
+
+$height: 90px;
+/deep/.menu.el-menu--horizontal {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 0;
+    outline: none;
+    .el-menu-item,
+    .el-submenu__title {
+        height: $height;
+        line-height: $height;
+        span {
+            font-size: 1rem;
+            font-weight: 600;
+        }
+        &:hover {
+            background-color: transparent !important;
+            span {
+                color: #1583ff;
+            }
+        }
+    }
+    .el-submenu__title {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+    }
+    .menu-child {
+        display: flex;
+    }
+    .el-submenu__icon-arrow {
+        position: static;
+        margin: 0 0 0 5px;
+        color: inherit;
+    }
+    .is-active {
+        color: #333 !important;
+    }
+    .active,
+    .active .el-submenu__title {
+        color: #1583ff !important;
+    }
+    &.home {
+        .el-menu-item,
+        .el-submenu__title {
+            &:hover {
+                background-color: transparent !important;
+                span {
+                    color: #fff;
+                }
+            }
+        }
+        .is-active {
+            color: #f9f9f9 !important;
+        }
+        .active,
+        .active .el-submenu__title {
+            color: #fff !important;
+        }
+    }
+}
 @media (max-width: 1870px) {
     .nav {
         left: 55%;
diff --git a/src/libs/resize/index.js b/src/libs/resize/index.js
index 8c2831f..d26186d 100644
--- a/src/libs/resize/index.js
+++ b/src/libs/resize/index.js
@@ -1,18 +1,39 @@
-// rem等比适配配置文件
+
+import store from '@/store'
+
 // 基准大小
 const baseSize = 16;
 
 // 设置 rem 函数
-function setRem() {
+const setRem = () => {
     // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
     const scale = document.documentElement.clientWidth / 1920;
     // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
     document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + "px";
 }
 
+const throttle = (func, delay) => {
+	var prev = Date.now()
+	return function () {
+		var context = this;
+		var args = arguments;
+		var now = Date.now();
+		if (now - prev >= delay) {
+			func.apply(context, args);
+			prev = Date.now();
+		}
+	}
+}
+
+const isMobile = () => {
+	store.commit('layout/setMobile', /Mobi|Android|iPhone/i.test(navigator.userAgent) || window.innerWidth <= 640)
+}
+
 // 初始化
 setRem();
+isMobile()
 // 改变窗口大小时重新设置 rem
-window.onresize = function() {
+window.onresize = throttle(() => {
     setRem();
-};
\ No newline at end of file
+		isMobile()
+}, 500)
\ No newline at end of file
diff --git a/src/pages/course/details/index.vue b/src/pages/course/details/index.vue
index a73b963..41d0398 100644
--- a/src/pages/course/details/index.vue
+++ b/src/pages/course/details/index.vue
@@ -57,6 +57,19 @@
           <div class="video_wid"
                id="player"></div>
         </div>
+        <div class="inner"
+             v-else-if="videoSrc">
+          <video class="video"
+                 :key="videoSrc"
+                 width="100%"
+                 height="100%"
+                 autoplay
+                 controls>
+            <source :src="videoSrc"
+                    type="video/mp4">
+            您的浏览器不支持 video 标签。
+          </video>
+        </div>
       </div>
       <div class="catalog">
         <div class="list">
@@ -235,28 +248,33 @@ export default {
       this.isWord = false
       this.isExcel = false
       if (this.transferType(row.fileType) == '视频') {
-        this.$get(`${this.api.getPlayAuthNakadai}/${row.fileId}`).then(res => {
-          this.playAuth = res.playAuth
-          // 如果已经产生了实例，则销毁重新创建，不然播放器会播放上一个视频
-          if (this.player) {
-            this.player.dispose()
-            this.player = null
-          }
-          this.$nextTick(() => {
+        // 阿里云视频点播
+        if (row.fileId) {
+          this.$get(`${this.api.getPlayAuthNakadai}/${row.fileId}`).then(res => {
+            this.playAuth = res.playAuth
+            // 如果已经产生了实例，则销毁重新创建，不然播放器会播放上一个视频
             if (this.player) {
-              this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth);
-            } else {
-              this.player = new Aliplayer({
-                id: "player",
-                width: "100%",
-                autoplay: false,
-                vid: row.fileId,
-                playauth: this.playAuth,
-                encryptType: 1 //当播放私有加密流时需要设置。
-              });
+              this.player.dispose()
+              this.player = null
             }
-          });
-        }).catch(res => { })
+            this.$nextTick(() => {
+              if (this.player) {
+                this.player.replayByVidAndPlayAuth(row.fileId, this.playAuth);
+              } else {
+                this.player = new Aliplayer({
+                  id: "player",
+                  width: "100%",
+                  autoplay: false,
+                  vid: row.fileId,
+                  playauth: this.playAuth,
+                  encryptType: 1 //当播放私有加密流时需要设置。
+                });
+              }
+            });
+          }).catch(res => { })
+        } else {
+          this.videoSrc = row.fileUrl
+        }
       } else if (this.transferType(row.fileType) == '图片') {
         this.coverUrl = row.fileUrl
       } else if (row.fileType == 'pdf') {
diff --git a/src/pages/index/list/index.vue b/src/pages/index/list/index.vue
index 7e09d92..7fd5266 100644
--- a/src/pages/index/list/index.vue
+++ b/src/pages/index/list/index.vue
@@ -988,4 +988,69 @@ export default {
         }
     }
 }
+
+@media (max-width: 640px) {
+    .wrap {
+        .inner {
+            width: 90% !important;
+        }
+        .intro {
+            flex-direction: column;
+            padding: 40px 20px;
+            li {
+                width: 100%;
+                margin: 0 0 20px 0;
+            }
+        }
+        .about {
+            .inner {
+                padding: 30px;
+            }
+            .desc {
+                padding: 0;
+                background: none;
+            }
+        }
+        .adv {
+            .i-title {
+                margin-bottom: 50px;
+            }
+            .list {
+                flex-direction: column;
+                li {
+                    width: 100%;
+                    margin: 0 0 20px 0;
+                }
+            }
+        }
+        .pics {
+            flex-direction: column;
+            .text {
+                width: 100%;
+            }
+            .pro-bg1 {
+                max-width: 100%;
+                .bg2,
+                .bg3 {
+                    left: 0;
+                    max-width: 100%;
+                }
+                .bg6 {
+                    display: none;
+                }
+            }
+            .pro-bg2,
+            .pro-bg3,
+            .pro-bg4,
+            .pro-bg5 {
+                max-width: 100%;
+                .bg2,
+                .bg3 {
+                    left: 0;
+                    max-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 88f7bcb..ffe4645 100644
--- a/src/pages/index/zxy/index.vue
+++ b/src/pages/index/zxy/index.vue
@@ -99,13 +99,14 @@
           </div>
           <img src="@/assets/img/zxy/about2.png"
                alt=""
-               class="wow fadeInDown"
+               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">
         </div>
       </div>
@@ -590,6 +591,9 @@ export default {
                 }
             }
         }
+        .pic {
+            max-width: 100%;
+        }
     }
     .inner {
         position: relative;
@@ -615,6 +619,9 @@ export default {
             font-size: 22px;
             color: #666;
         }
+        .bg {
+            max-width: 100%;
+        }
     }
     .adv {
         position: relative;
@@ -1055,4 +1062,112 @@ export default {
         }
     }
 }
+
+@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%;
+                }
+            }
+        }
+        .adv {
+            .en {
+                top: 70px;
+            }
+            .list {
+                flex-direction: column;
+                li {
+                    width: 100%;
+                    margin: 0 0 20px 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%;
+                }
+            }
+        }
+    }
+}
 </style>
\ No newline at end of file
diff --git a/src/pages/match/details/index.vue b/src/pages/match/details/index.vue
index 5e8ddf6..1967fed 100644
--- a/src/pages/match/details/index.vue
+++ b/src/pages/match/details/index.vue
@@ -220,6 +220,7 @@
                 <th width="150">团队邀请码：</th>
                 <td>
                   <el-input :disabled="!editing"
+                            maxlength="6"
                             v-model="info.team.invitationCode"></el-input>
                 </td>
               </tr>
@@ -372,15 +373,19 @@
                                @click="selectPar(item)"></i>
                           </td>
                         </template>
-                        <!-- 积分赛才需要显示总分这个字段，直接第一行合并表格（填了成绩公布时间才显示分数，不然为空） -->
+                        <!-- 积分赛才需要显示总分这个字段，直接第一行合并表格 -->
                         <td v-if="form.rule === 0 && !i"
-                            :rowspan="info.stages.length">{{ item.showDetail && item.resultAnnouncementTime >= 0 ? info.totalScore : '' }}</td>
+                            :rowspan="info.stages.length">{{ info.totalScore }}</td>
                         <td>
-                          <span v-if="item.score >= 0 && item.resultAnnouncementTime >= 0"
-                                class="m-r-10">分数{{item.score}}</span>
-                          <el-button v-if="item.showDetail && item.resultAnnouncementTime >= 0 && item.resultsDetails === 0 && item.reportId"
-                                     type="text"
-                                     @click="show(item)">查看成绩详情</el-button>
+                          <!-- 成绩公布时间到了后，才显示下面的分数和查看详情按钮 -->
+                          <template v-if="item.showDetail">
+                            <span v-if="item.score >= 0"
+                                  class="m-r-10">分数{{item.score}}</span>
+                            <!-- 团队赛 or （个人赛 并且 是否公布成绩详情勾选的是 并且 有reportId） -->
+                            <el-button v-if="form.completeCompetitionSetup.competitionType || (!form.completeCompetitionSetup.competitionType && item.resultsDetails === 0 && item.reportId)"
+                                       type="text"
+                                       @click="show(item)">查看成绩详情</el-button>
+                          </template>
                         </td>
                       </tr>
                     </template>
@@ -604,7 +609,8 @@
             <td>{{ item.timeSum }}min</td>
             <td>{{ item.score }}</td>
             <td>
-              <el-button :disabled="!item.reportId"
+              <!-- 成绩公布时间到了后才显示该按钮 -->
+              <el-button v-if="curRow.resultsDetails === 0 && item.reportId"
                          type="text"
                          @click="toReport(item)">查看</el-button>
             </td>
@@ -1047,9 +1053,13 @@ export default {
         // 设置定时器，阶段比赛结束后公布成绩，到时间后调本接口
         const now = await Util.getNow()
         this.form.competitionStage && this.form.competitionStage.map(e => {
-          // 如果公布成绩详情勾选的是
-          if (!e.resultsDetails) {
-            const endTime = new Date(e.endTime).getTime() + e.resultAnnouncementTime * 3600000 // 阶段结束时间+成绩公布时间（成绩公布时间单位是小时，所以要转化为毫秒）
+          // 如果成绩公布时间输入的值大于0（输入的是0则直接公布；没输入值则不公布）
+          const time = e.resultAnnouncementTime
+          if (time === 0) {
+            info.stages.find(n => n.stageId == e.stageId).showDetail = 1
+          } else if (time) {
+            const endTime = new Date(e.endTime).getTime() + time * 3600000 // 阶段结束时间+成绩公布时间（成绩公布时间单位是小时，所以要转化为毫秒）
+            console.log("🚀 ~ this.$post ~ endTime:", time, endTime - now)
             if (now > endTime) { // 如果到了公布时间
               info.stages.find(n => n.stageId == e.stageId).showDetail = 1
             } else if (endTime - now < 86400000) { // 没有到公布时间，则加定时器，到点后调用
@@ -1363,8 +1373,8 @@ export default {
     show (row) {
       // 团队展示弹框，个人跳转实验报告
       if (this.form.completeCompetitionSetup.competitionType) { // 团队比赛则展示团队成员成绩详情
-        this.curRow = row
         this.memberVisible = true
+        this.curRow = row
         const teamId = this.form.competitionRegistration.teamId
         if (teamId) {
           this.$post(this.api.stageTeamScoreDetails, {
diff --git a/src/pages/record/show/index.vue b/src/pages/record/show/index.vue
index faa6e45..47c3dab 100644
--- a/src/pages/record/show/index.vue
+++ b/src/pages/record/show/index.vue
@@ -27,10 +27,9 @@
             @click="back">返回实验</span>
     </div>
     <div class="content"
-         :class="{loading}"
+         v-loading="loading"
          id="pdfDom">
-      <div class="text-right"
-           v-if="!loading">
+      <div class="text-right">
         <el-button @click="editReport">
           {{ editing ? "保存" : "编辑" }}
         </el-button>
@@ -289,6 +288,7 @@ export default {
   },
   methods: {
     getData () { // 查询详情
+      this.loading = true
       const { reportId } = this
       this.$get(`${this.api.reportDetail}?reportId=${reportId}`).then(({ report, userScores }) => {
         this.form = report
@@ -359,6 +359,7 @@ export default {
         })
       }
       this.expData = list
+      this.loading = false
     },
     // 返回
     back () {
@@ -496,9 +497,6 @@ samp {
 .content {
     padding: 16px 40px;
     background: #fff;
-    &.loading {
-        padding-top: 30px;
-    }
     .r-title {
         margin-bottom: 40px;
         font-size: 24px;
diff --git a/src/setting.js b/src/setting.js
index 16e7cd6..a53580a 100644
--- a/src/setting.js
+++ b/src/setting.js
@@ -33,7 +33,7 @@ if (isPro) {
     uploadURL = `http://121.37.12.51/`
     host = "http://121.37.12.51/"; // 测试服
     // host = 'https://www.occupationlab.com/' // 正式服
-    host = "http://192.168.31.217:9000/";
+		host = localStorage.getItem('localIp') == 1 ? 'http://192.168.31.51:9000/' : 'http://192.168.31.217:9000/'
 } else if (isSq) {
 	zcPath = `10.20.100.204:8883`
 }
diff --git a/src/store/modules/layout.js b/src/store/modules/layout.js
index 0e7c1c3..39fed67 100644
--- a/src/store/modules/layout.js
+++ b/src/store/modules/layout.js
@@ -2,20 +2,15 @@
  * 布局管理
  * */
 
-// 是否IE
-function isIE() {
-    if (!!window.ActiveXObject || "ActiveXObject" in window) return true;
-    return false;
-}
 
 export default {
     namespaced: true,
     state: {
-        isIE: isIE()
+				isMobile: false,
     },
     mutations: {
-        SET_IE: (state, val) => {
-            state.isIE = val;
+        setMobile: (state, val) => {
+            state.isMobile = val;
         }
     },
     actions: {}
diff --git a/src/styles/common.scss b/src/styles/common.scss
index f1a8db5..900a919 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -1,395 +1,398 @@
-@import "./default/index.scss";
-@import "./var.scss";
+@import './default/index.scss';
+@import './var.scss';
 
 @font-face {
-  font-family: youshe;
-  src: url('font/YouSheBiaoTiHei.ttf');
+    font-family: youshe;
+    src: url('font/YouSheBiaoTiHei.ttf');
 }
 @font-face {
-  font-family: din;
-  src: url('font/din.otf');
+    font-family: din;
+    src: url('font/din.otf');
 }
 @font-face {
-  font-family: yjsz;
-  src: url('font/yjsz.TTF');
+    font-family: yjsz;
+    src: url('font/yjsz.TTF');
 }
 
 [v-cloak] {
-  display: none;
+    display: none;
 }
 
 .flex-between {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  .l-title {
-    margin-bottom: 0;
-  }
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .l-title {
+        margin-bottom: 0;
+    }
 }
 
 ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
+    width: 8px;
+    height: 8px;
 }
 
 ::-webkit-scrollbar-thumb {
-  width: 5px;
-  border-radius: 6px;
-  background: #d7d7d7;
+    width: 5px;
+    border-radius: 6px;
+    background: #d7d7d7;
 }
 .main {
-  .view {
-    min-width: $min-width;
-    min-height: calc(100vh - 107px);
-    padding: 12px 200px 20px;
-    margin: 0 auto;
-    background-color: #F3F6FA;
-    &.no-pd {
-      padding-top: 0;
-    }
-    &.pb {
-      padding-bottom: 20px;
-    }
-  }
-  .wrap-inner {
-    min-width: $min-width;
-    width: 100%;
-    padding: 0 200px 20px;
-    margin: 0 auto;
-  }
-  .center-wrap {
-    width: 1000px;
-    padding-bottom: 20px;
-    margin: 40px auto 0;
-  }
+    .view {
+        min-height: calc(100vh - 107px);
+        padding: 12px 200px 20px;
+        margin: 0 auto;
+        background-color: #f3f6fa;
+        &.no-pd {
+            padding-top: 0;
+        }
+        &.pb {
+            padding-bottom: 20px;
+        }
+    }
+    .wrap-inner {
+        min-width: $min-width;
+        width: 100%;
+        padding: 0 200px 20px;
+        margin: 0 auto;
+    }
+    .center-wrap {
+        width: 1000px;
+        padding-bottom: 20px;
+        margin: 40px auto 0;
+    }
 }
-.l-title{
-  display: flex;
-  align-items: center;
-  margin-bottom: 12px;
-  font-size: 14px;
-  color: #333;
-  img{
-    margin-right: 5px;
-  }
+.l-title {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    font-size: 14px;
+    color: #333;
+    img {
+        margin-right: 5px;
+    }
 }
 .p-title {
-  padding-left: 5px;
-  margin-bottom: 24px;
-  line-height: 1;
-  font-size: 14px;
-  color: #585858;
-  border-left: 3px solid $--color-primary;
+    padding-left: 5px;
+    margin-bottom: 24px;
+    line-height: 1;
+    font-size: 14px;
+    color: #585858;
+    border-left: 3px solid $--color-primary;
 }
 
 .el-input {
-  .el-input__inner {
-    border-color: rgba(0, 0, 0, 0.15);
-  }
+    .el-input__inner {
+        border-color: rgba(0, 0, 0, 0.15);
+    }
 }
 
 .filter {
-  width: 100vw;
-  display: inline-flex;
-  align-items: center;
-  flex: 1;
-
-  li {
+    width: 100vw;
     display: inline-flex;
     align-items: center;
-    margin-right: 30px;
+    flex: 1;
 
-    label {
-      margin-right: 6px;
-      font-size: 14px;
-      line-height: 14px;
-      color: rgba(0, 0, 0, .65);
-      white-space: nowrap;
-    }
+    li {
+        display: inline-flex;
+        align-items: center;
+        margin-right: 30px;
 
-    .el-radio {
-      margin-right: 10px !important;
+        label {
+            margin-right: 6px;
+            font-size: 14px;
+            line-height: 14px;
+            color: rgba(0, 0, 0, 0.65);
+            white-space: nowrap;
+        }
 
-      .el-radio__input {
-        display: none !important;
-      }
+        .el-radio {
+            margin-right: 10px !important;
+
+            .el-radio__input {
+                display: none !important;
+            }
+        }
     }
-  }
 }
 
 .page {
-  position: relative;
-  padding: 24px 16px;
-  background-color: #fff;
+    position: relative;
+    padding: 24px 16px;
+    background-color: #fff;
 
-  .tool {
-    display: flex;
-    justify-content: space-between;
-    margin-bottom: 24px;
-
-    .single-choice {
-      dl {
+    .tool {
         display: flex;
-        line-height: 30px;
-
-        dt {
-          color: rgba(0, 0, 0, .65);
-          font-size: 14px;
-          white-space: nowrap;
-        }
-
-        dd {
-          display: inline-flex;
-          align-items: center;
-          flex-wrap: wrap;
-
-          span {
-            padding: 0 10px;
-            margin: 0 10px;
-            color: #333;
-            font-size: 14px;
-            line-height: 1.8;
-            white-space: nowrap;
-
-            cursor: pointer;
-
-            &:hover {
-              color: $--color-primary;
+        justify-content: space-between;
+        margin-bottom: 24px;
+
+        .single-choice {
+            dl {
+                display: flex;
+                line-height: 30px;
+
+                dt {
+                    color: rgba(0, 0, 0, 0.65);
+                    font-size: 14px;
+                    white-space: nowrap;
+                }
+
+                dd {
+                    display: inline-flex;
+                    align-items: center;
+                    flex-wrap: wrap;
+
+                    span {
+                        padding: 0 10px;
+                        margin: 0 10px;
+                        color: #333;
+                        font-size: 14px;
+                        line-height: 1.8;
+                        white-space: nowrap;
+
+                        cursor: pointer;
+
+                        &:hover {
+                            color: $--color-primary;
+                        }
+
+                        &.active {
+                            border-radius: 4px;
+                            color: #fff;
+                            background-color: $--color-primary;
+                        }
+                    }
+                }
             }
-
-            &.active {
-              border-radius: 4px;
-              color: #fff;
-              background-color: $--color-primary;
-            }
-          }
         }
-      }
     }
-  }
 }
 
 .pagination {
-  margin-top: 20px;
-  text-align: center;
-  button,.number,.more,.el-input__inner{
-      min-width: 32px !important;
-      height: 32px !important;
-      line-height: 32px;
-      color: #333 !important;
-      background-color: transparent !important;
-      border: 1px solid #ccc !important;
-      border-radius: 2px !important;
-  }
-  button i{
-      color: #333;
-  }
-  .active{
-      color: #fff !important;
-      background-color: $--color-primary !important;
-  }
+    margin-top: 20px;
+    text-align: center;
+    button,
+    .number,
+    .more,
+    .el-input__inner {
+        min-width: 32px !important;
+        height: 32px !important;
+        line-height: 32px;
+        color: #333 !important;
+        background-color: transparent !important;
+        border: 1px solid #ccc !important;
+        border-radius: 2px !important;
+    }
+    button i {
+        color: #333;
+    }
+    .active {
+        color: #fff !important;
+        background-color: $--color-primary !important;
+    }
 }
 
-.el-table{
-  border-radius: 4px;
-  th{
-      background: #E8F0FF !important;
-      .cell{
-          color: #222326;
-          font-size: 12px;
-          font-weight: normal;
-          .el-checkbox{
-              &:before{
-                  opacity: 1;
-              }
-          }
-      }
-  }
-  th, td{
-      padding: 10px 0;
-      border-bottom-color: #E1E6F2;
-  }
-  &.el-table--striped .el-table__body tr.el-table__row--striped td{
-      background-color: #FAFBFF;
-  }
-  .el-checkbox__inner{
-      border-radius: 4px;
-      transition: none !important;
-  }
-  .el-checkbox__input.is-indeterminate .el-checkbox__inner{
-      background-color: #FFFFFF;
-      border-color: #DCDFE6;
-  }
-  .el-switch__core{
-      background-color: #bfbfbf;
-  }
-  .el-switch__label--right{
-      z-index: 2;
-      position: absolute;
-      right: 8px;
-      margin-left: 0;
-      color: #fff !important;
-  }
-  .el-switch__label--right.is-active{
-      left: 8px;
-      right: auto;
-  }
-  .el-switch__label--right span{
-      font-size: 12px;
-  }
-  .el-button--text{
-      padding: 0;
-  }
+.el-table {
+    border-radius: 4px;
+    th {
+        background: #e8f0ff !important;
+        .cell {
+            color: #222326;
+            font-size: 12px;
+            font-weight: normal;
+            .el-checkbox {
+                &:before {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+    th,
+    td {
+        padding: 10px 0;
+        border-bottom-color: #e1e6f2;
+    }
+    &.el-table--striped .el-table__body tr.el-table__row--striped td {
+        background-color: #fafbff;
+    }
+    .el-checkbox__inner {
+        border-radius: 4px;
+        transition: none !important;
+    }
+    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+        background-color: #ffffff;
+        border-color: #dcdfe6;
+    }
+    .el-switch__core {
+        background-color: #bfbfbf;
+    }
+    .el-switch__label--right {
+        z-index: 2;
+        position: absolute;
+        right: 8px;
+        margin-left: 0;
+        color: #fff !important;
+    }
+    .el-switch__label--right.is-active {
+        left: 8px;
+        right: auto;
+    }
+    .el-switch__label--right span {
+        font-size: 12px;
+    }
+    .el-button--text {
+        padding: 0;
+    }
 }
 
 .el-message {
-  padding: 11px 20px;
+    padding: 11px 20px;
 
-  .el-message__icon {
-    font-size: 16px;
-  }
+    .el-message__icon {
+        font-size: 16px;
+    }
 
-  .el-message__content {
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.65);
-  }
+    .el-message__content {
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+    }
 
-  .el-icon-close {
-    font-size: 14px;
-    color: #92998d;
-  }
+    .el-icon-close {
+        font-size: 14px;
+        color: #92998d;
+    }
 
-  .el-message--success {
-    border: 1px solid #B7EB8F;
-    background: #F6FFED;
+    .el-message--success {
+        border: 1px solid #b7eb8f;
+        background: #f6ffed;
 
-    .el-message__icon {
-      color: #00c700;
+        .el-message__icon {
+            color: #00c700;
+        }
     }
-  }
 
-  .el-message--warning {
-    border: 1px solid #FFE58F;
-    background: #FFFBE6;
+    .el-message--warning {
+        border: 1px solid #ffe58f;
+        background: #fffbe6;
 
-    .el-message__icon {
-      color: #ffa900;
+        .el-message__icon {
+            color: #ffa900;
+        }
     }
-  }
 }
 
 .el-message-box {
-  padding-bottom: 24px;
+    padding-bottom: 24px;
 
-  .el-message-box__header {
-    padding: 32px 32px 12px 50px;
+    .el-message-box__header {
+        padding: 32px 32px 12px 50px;
 
-    span {
-      font-size: 16px;
-      color: rgba(0, 0, 0, 0.85);
-      font-weight: 500;
+        span {
+            font-size: 16px;
+            color: rgba(0, 0, 0, 0.85);
+            font-weight: 500;
+        }
     }
-  }
 
-  .el-message-box__status {
-    top: -30px;
-  }
+    .el-message-box__status {
+        top: -30px;
+    }
 
-  .el-message-box__status + .el-message-box__message {
-    font-size: 14px;
-    color: rgba(0, 0, 0, 0.65);
-  }
+    .el-message-box__status + .el-message-box__message {
+        font-size: 14px;
+        color: rgba(0, 0, 0, 0.65);
+    }
 
-  .el-message-box__btns {
-    padding-right: 32px;
+    .el-message-box__btns {
+        padding-right: 32px;
 
-    &.el-icon-warning {
-      color: #ffa900;
+        &.el-icon-warning {
+            color: #ffa900;
+        }
     }
-  }
 
-  &:not(.normal) {
-    .el-button--primary {
-      color: #606266;
-      background: #fff;
-      border-color: #DCDFE6;
+    &:not(.normal) {
+        .el-button--primary {
+            color: #606266;
+            background: #fff;
+            border-color: #dcdfe6;
 
-      &:hover {
-        color: $--color-primary;
-        border-color: #efbdbb;
-        background-color: #fae9e8;
-      }
+            &:hover {
+                color: $--color-primary;
+                border-color: #efbdbb;
+                background-color: #fae9e8;
+            }
+        }
     }
-  }
 }
 
 .el-dialog__wrapper {
-  .el-dialog {
-    border-radius: 4px;
+    .el-dialog {
+        border-radius: 4px;
 
-    .el-dialog__header {
-      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+        .el-dialog__header {
+            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
 
-      .el-dialog__title {
-        font-size: 16px;
-        color: rgba(0, 0, 0, 0.85);
-      }
-    }
+            .el-dialog__title {
+                font-size: 16px;
+                color: rgba(0, 0, 0, 0.85);
+            }
+        }
 
-    .el-dialog__footer {
-      padding: 10px 16px;
-      border-top: 1px solid rgba(0, 0, 0, 0.06);
+        .el-dialog__footer {
+            padding: 10px 16px;
+            border-top: 1px solid rgba(0, 0, 0, 0.06);
 
-      .el-button {
-        font-size: 14px;
-        border-radius: 4px;
-        border-color: rgba(0, 0, 0, 0.15);
-      }
+            .el-button {
+                font-size: 14px;
+                border-radius: 4px;
+                border-color: rgba(0, 0, 0, 0.15);
+            }
+        }
     }
-  }
 }
 
 .el-tooltip__popper {
-  width: 300px;
+    width: 300px;
 }
 .el-tooltip__popper.is-dark {
-  padding: 18px 20px;
-  color: #606266;
-  line-height: 1.8;
-  background-color: #fff;
-  border: .0625rem solid #ebeef5;
-  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
-  border-radius: 4px;
+    padding: 18px 20px;
+    color: #606266;
+    line-height: 1.8;
+    background-color: #fff;
+    border: 0.0625rem solid #ebeef5;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
 }
-.el-tooltip__popper[x-placement^="top"] {
-  .popper__arrow {
-    border-top-color: #fff;
-    &:after {
-      border-top-color: #fff;
+.el-tooltip__popper[x-placement^='top'] {
+    .popper__arrow {
+        border-top-color: #fff;
+        &:after {
+            border-top-color: #fff;
+        }
     }
-  }
 }
 
-@media(max-width: 1600px) {
-  .el-table {
-    .el-switch__label--right.is-active {
-      left: 8px;
+@media (max-width: 1600px) {
+    .el-table {
+        .el-switch__label--right.is-active {
+            left: 8px;
+        }
     }
-  }
 }
 
-.empty{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 50px 0;
-  text-align: center;
-  img{
-    width: 471px;
-  }
-  p{
-    margin-top: 40px;
-    font-size: 18px;
-    color: rgba(0, 0, 0, 0.25);
-  }
-}
\ No newline at end of file
+.empty {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 50px 0;
+    text-align: center;
+    img {
+        width: 471px;
+    }
+    p {
+        margin-top: 40px;
+        font-size: 18px;
+        color: rgba(0, 0, 0, 0.25);
+    }
+}