大屏适配优化心灵照相机

package.json

@@ -13,6 +13,7 @@
     "webpack": "webpack --version"
   },
   "dependencies": {
+    "autofit.js": "^3.1.3",
     "axios": "^0.21.4",
     "clipboard": "^2.0.11",
     "core-js": "^3.6.5",

src/App.vue

@@ -1,4 +1,8 @@
 <template>
+  <!-- <div id="app" class="app-container ScaleBox" ref="ScaleBox" :style="{
+    width: width + 'px',
+    height: height + 'px',
+  }"> -->
   <div id="app">
     <transition name="fade">
       <keep-alive>
@@ -11,10 +15,22 @@
   </div>
 </template>
 <script>
+// import resizeMixin from '@/utils/resizeMixin';
+import autofit from 'autofit.js'
 export default {
   created() {
     this.chooseCss();
   },
+
+  mounted() {
+    autofit.init({
+      // designHeight: 1080,
+      // designWidth: 988,
+      renderDom: "#app",
+      resize: true
+    })
+
+  },
   methods: {
     chooseCss() {
       var u = navigator.userAgent;
@@ -26,14 +42,42 @@ export default {
 };
 </script>
 <style>
+body {
+  /* width: 100%;
+  height: 100%;
+  margin: 0; */
+  /* min-width: 1280px; */
+  overflow: hidden;
+}
+
 #app {
+  display: flex;
+  justify-content: space-between;
   font-family: Avenir, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   /* text-align: center; */
   color: #2c3e50;
-  height: 100vh;
-  overflow: hidden;
+  width: 100%;
+  height: calc(100%);
+  /* height: 1080px; */
+  /* height: 100vh; */
+  /* width: 100%;
+  height: 100%;
+  min-width: 1280px; */
+  /* width: 100vw; */
+  /* overflow: hidden; */
+  /* width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  &>div {
+    height: 100%;
+    width: 100%;
+  } */
 }
 
 #nav {
@@ -48,24 +92,30 @@ export default {
 #nav a.router-link-exact-active {
   color: #42b983;
 }
-.headerRow{
+
+.headerRow {
   display: flex;
   flex-direction: row;
   align-items: center;
 }
-.headerRowEnd{
+
+.headerRowEnd {
   justify-content: flex-end;
 }
-.headerRowLeftRight{
+
+.headerRowLeftRight {
   justify-content: space-between;
 }
-.mrl{
+
+.mrl {
   margin-left: 10px;
 }
-.mrr{
+
+.mrr {
   margin-right: 10px;
 }
-.pointers{
+
+.pointers {
   cursor: pointer;
 }
 </style>

src/components/DateSelect.vue

@@ -1,54 +1,30 @@
 <!-- 日期搜索框 -->
 <template>
   <div id="myDate">
+    <!-- :popper-append-to-body="false" -->
     <!-- <el-button icon="el-icon-caret-left" @click="dateChange(4)"></el-button> -->
-    <el-select
-      v-model="yearsModel"
-      @change="dateChange(1)"
-      placeholder="请选择"
-      style="width: 100px"
-    >
-      <el-option
-        v-for="item in years"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      >
+    <el-select :popper-append-to-body="true" v-model="yearsModel" @change="dateChange(1)" placeholder="请选择"
+      style="width: 100px">
+      <el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value">
       </el-option>
     </el-select>
-    <el-select
-      v-model="monthsModel"
-      @change="dateChange(2)"
-      placeholder="请选择"
-      style="width: 100px"
-    >
-      <el-option
-        v-for="item in months"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      >
+    <el-select :popper-append-to-body="true" v-model="monthsModel" @change="dateChange(2)" placeholder="请选择"
+      style="width: 100px">
+      <el-option v-for="item in months" :key="item.value" :label="item.label" :value="item.value">
       </el-option>
     </el-select>
-    <el-select
-      v-model="daysModel"
-      @change="dateChange(3)"
-      placeholder="请选择"
-      style="width: 100px"
-    >
-      <el-option
-        v-for="item in days"
-        :key="item.value"
-        :label="item.label"
-        :value="item.value"
-      >
+    <el-select :popper-append-to-body="true" v-model="daysModel" @change="dateChange(3)" placeholder="请选择"
+      style="width: 100px">
+      <el-option v-for="item in days" :key="item.value" :label="item.label" :value="item.value">
       </el-option>
     </el-select>
     <!-- <el-button icon="el-icon-caret-right" @click="dateChange(5)"></el-button> -->
   </div>
 </template>
- 
+
 <script>
+import autofit from 'autofit.js'
+
 export default {
   name: "DateSelect",
   props: ["yearsModelPrants"],
@@ -80,18 +56,28 @@ export default {
     // }
   },
   mounted() {
+    autofit.init({
+      ignore: [
+        {
+          // dom: "#myDate", //必填
+          // height: 300,//可选，写数字即可（px）
+          // width: 300,//可选，写数字即可（px）
+          // scale: 1.2, //可选：回放程度，基于主元素缩放后的大小
+          // fontSize: 26 //可选，如果自定义缩放后文字大小不合适，可以在这里设置文字大小
+        },]
+    })
 
-      if(this.yearsModelPrants && this.yearsModelPrants != ''){
-         this.yearsModel = Number(this.yearsModelPrants.split("-")[0]);
-         this.monthsModel = this.yearsModelPrants.split("-")[1];
-         this.daysModel = this.yearsModelPrants.split("-")[2];
-      }
-      // else {
-      //     this.yearsModelPrants = "";
-      //     this.yearsModel = null;
-      //     this.monthsModel = null;
-      //     this.daysModel = null;
-      // }
+    if (this.yearsModelPrants && this.yearsModelPrants != '') {
+      this.yearsModel = Number(this.yearsModelPrants.split("-")[0]);
+      this.monthsModel = this.yearsModelPrants.split("-")[1];
+      this.daysModel = this.yearsModelPrants.split("-")[2];
+    }
+    // else {
+    //     this.yearsModelPrants = "";
+    //     this.yearsModel = null;
+    //     this.monthsModel = null;
+    //     this.daysModel = null;
+    // }
 
   },
   methods: {
@@ -99,7 +85,7 @@ export default {
       this.yearsModel = null;
       this.monthsModel = null;
       this.daysModel = null;
-      
+
     },
     init() {
       var myDate = new Date();
@@ -140,16 +126,16 @@ export default {
       //   this.months.push({ value: m, label: m + "月" });
       // }
 
-      if(this.yearsModel == this.nowYear){
-          for (let i = 1; i <= this.nowMonth; i++) {
-              m = i < 10 ? `0${i}` : `${i}`;
-              this.months.push({ value: m, label: m + "月" });
-          }
-      }else {
-          for (let i = 1; i <= 12; i++) {
-              m = i < 10 ? `0${i}` : `${i}`;
-              this.months.push({ value: m, label: m + "月" });
-          }
+      if (this.yearsModel == this.nowYear) {
+        for (let i = 1; i <= this.nowMonth; i++) {
+          m = i < 10 ? `0${i}` : `${i}`;
+          this.months.push({ value: m, label: m + "月" });
+        }
+      } else {
+        for (let i = 1; i <= 12; i++) {
+          m = i < 10 ? `0${i}` : `${i}`;
+          this.months.push({ value: m, label: m + "月" });
+        }
       }
 
 
@@ -164,20 +150,22 @@ export default {
       //   this.days.push({ value: d, label: d + "日" });
       // }
 
-      if(this.yearsModel == this.nowYear && this.monthsModel == this.nowMonth){
-          for (var i = 1; i <= this.nowDay; i++) {
-              d = i < 10 ? `0${i}` : `${i}`;
-              this.days.push({ value: d, label: d + "日" });
-          }
-      }else {
-          for (var i = 1; i <= maxDay; i++) {
-              d = i < 10 ? `0${i}` : `${i}`;
-              this.days.push({ value: d, label: d + "日" });
-          }
+      if (this.yearsModel == this.nowYear && this.monthsModel == this.nowMonth) {
+        for (var i = 1; i <= this.nowDay; i++) {
+          d = i < 10 ? `0${i}` : `${i}`;
+          this.days.push({ value: d, label: d + "日" });
+        }
+      } else {
+        for (var i = 1; i <= maxDay; i++) {
+          d = i < 10 ? `0${i}` : `${i}`;
+          this.days.push({ value: d, label: d + "日" });
+        }
       }
 
     },
     dateChange(type) {
+      console.log(':popper-append-to-body="false"');
+
       //1年 2月 3日 4 左 5右
       // if (type == 1 || type == 2) {
       //   if (this.monthsModel == 0) {
@@ -189,36 +177,36 @@ export default {
       // }
 
       if (type == 1) {
-          if (this.monthsModel == 0) {
-              this.daysModel = 0;
-              this.initSelectMonth();
-              this.initSelectDay(this.yearsModel, 1);
+        if (this.monthsModel == 0) {
+          this.daysModel = 0;
+          this.initSelectMonth();
+          this.initSelectDay(this.yearsModel, 1);
+        } else {
+          if (this.yearsModel == this.nowYear) {
+            this.monthsModel = null;
+            this.daysModel = null;
+            this.initSelectMonth();
+            this.initSelectDay(this.yearsModel, 1);
           } else {
-              if(this.yearsModel == this.nowYear){
-                  this.monthsModel = null;
-                  this.daysModel = null;
-                  this.initSelectMonth();
-                  this.initSelectDay(this.yearsModel, 1);
-              }else {
-                  this.initSelectMonth();
-                  this.initSelectDay(this.yearsModel, this.monthsModel);
-              }
-
+            this.initSelectMonth();
+            this.initSelectDay(this.yearsModel, this.monthsModel);
           }
+
+        }
       }
       if (type == 2) {
-          if (this.monthsModel == 0) {
-              this.daysModel = 0;
-              this.initSelectDay(this.yearsModel, 1);
+        if (this.monthsModel == 0) {
+          this.daysModel = 0;
+          this.initSelectDay(this.yearsModel, 1);
+        } else {
+          if (this.yearsModel == this.nowYear && this.monthsModel == this.nowMonth) {
+            this.daysModel = null;
+            this.initSelectDay(this.yearsModel, 1);
           } else {
-              if(this.yearsModel == this.nowYear && this.monthsModel == this.nowMonth){
-                  this.daysModel = null;
-                  this.initSelectDay(this.yearsModel, 1);
-              }else {
-                  this.initSelectDay(this.yearsModel, this.monthsModel);
-              }
-
+            this.initSelectDay(this.yearsModel, this.monthsModel);
           }
+
+        }
       }
 
 

src/components/Footer.vue

@@ -2,16 +2,11 @@
   <div class="footer">
     <div class="wrap" style="overflow:hidden">
       <ul class="record">
-        <li  v-if="$store.state.systemVersion != 'lan'">
-          <a
-            target="_blank"
-            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011402011379"
-            ><img src="../assets/beian.png" /><span class="ml10"
-              >京公网安备 11011402011379号</span
-            ></a
-          >
+        <li v-if="$store.state.systemVersion != 'lan'">
+          <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11011402011379"><img
+              src="../assets/beian.png" /><span class="ml10">京公网安备 11011402011379号</span></a>
         </li>
-        <li  v-if="$store.state.systemVersion != 'lan'">
+        <li v-if="$store.state.systemVersion != 'lan'">
           <a href="javascript:;">京ICP备20000146号-2</a>
         </li>
         <li>
@@ -33,6 +28,7 @@ export default {
   width: 100%;
   background: #00CDDD;
   overflow: hidden;
+  /* height: 0px !important; */
 }
 
 .footer .record {

src/components/login/Login.vue

@@ -7,7 +7,8 @@
           <div class="login_box">
             <p v-if="systemVersion != 'public'">
               <span>类型</span>
-              <el-select v-model="userType" placeholder="请选择用户类型" @change="userTypeChange">
+              <el-select :popper-append-to-body="false" v-model="userType" placeholder="请选择用户类型"
+                @change="userTypeChange">
                 <el-option v-for="item in roleList[systemVersion]" :key="item.value" :label="item.label"
                   :value="item.value" />
               </el-select>
@@ -188,6 +189,8 @@
 import "element-ui/lib/theme-chalk/display.css";
 import DateSelect from "../DateSelect.vue";
 import { mapActions } from "vuex";
+// import autofit from 'autofit.js'
+
 
 export default {
   components: { DateSelect },
@@ -403,6 +406,9 @@ export default {
     };
   },
   created() { },
+  mounted() {
+    // autofit.off()
+  },
   methods: {
     ...mapActions({
       setTagActive: "setTagActive",
@@ -497,7 +503,7 @@ export default {
                 institutionNo: this.institutionNo,
               },
             });
-          }else if (userType == 4) {
+          } else if (userType == 4) {
             this.$router.push({
               path: "ContainerSys/AdminHome",
               query: {
@@ -513,6 +519,8 @@ export default {
 
     // 选择注册日期
     dateChange(obj) {
+      console.log(obj);
+
       this.userInfo.birthday = `${obj.year}-${obj.month}-${obj.day}`;
     },
 
@@ -631,7 +639,8 @@ export default {
   width: 100%;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  /* min-height: 100vh; */
+  height: 100%;
   background-image: url('~@/assets/bg-login1.png');
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -807,7 +816,8 @@ export default {
 }
 
 .all-height {
-  height: 100vh;
+  /* height: 100vh; */
+  height: 100%;
   background: #f5f5f5 url(../../assets/index/psychic_camera_logo.png) no-repeat 10vw 24vh;
   background-size: 46% auto;
 }

src/components/manage/ContainerSys.vue

@@ -2,7 +2,7 @@
   <el-container>
     <el-header class="shadow-menu">
       <el-row class="admin-header-content">
-        <el-col :span="12" >
+        <el-col :span="12">
           <div class="admin-logo-content">
             <img src="../../assets/manage/manage_logo.png" alt="" />
           </div>
@@ -12,16 +12,10 @@
         <!--<el-avatar :size="size" :src="circleUrl"></el-avatar>-->
         <!--</div>-->
         <!--</el-col>-->
-        <el-col  :span="12" class="just-right">
-          <el-menu
-            :default-active="activeIndex"
-            class="el-menu-demo"
-            mode="horizontal"
-            background-color="#00CDDD"
-            text-color="#fff"
-            active-text-color="#fff"
-          >
-            <el-submenu index="2" class="rightExit">
+        <el-col :span="12" class="just-right">
+          <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" background-color="#00CDDD"
+            text-color="#fff" active-text-color="#fff">
+            <el-submenu :popper-append-to-body="false" index="2" class="rightExit">
               <template slot="title" :size="size" :src="circleUrl">
                 {{ Name }}
               </template>
@@ -33,36 +27,21 @@
       </el-row>
     </el-header>
     <el-container class="main-container">
-      <el-aside style="width: auto">
-
-        <el-menu
-          class="el-menu-vertical-demo shadow-menu aside-menu"
-          :router="true"
-          :default-active="  menuActive || active"
-          :collapse="isCollapse"
-          text-color="#333"
-          active-text-color="#fff"
-          @select="selectMenu"
-        >
-
-
-          <el-submenu
-            v-for="item in menuList"
-            :key="item.id"
-            :index="item.path"
-            v-if="item.child && item.child.length && item.showItem > 0"
-          >
+      <el-aside style="width: auto;overflow: hidden; height: 1054px;">
+
+        <el-menu class="el-menu-vertical-demo shadow-menu aside-menu" :router="true"
+          :default-active="menuActive || active" :collapse="isCollapse" text-color="#333" active-text-color="#fff"
+          @select="selectMenu">
+
+
+          <el-submenu v-for="item in menuList" :key="item.id" :index="item.path"
+            v-if="item.child && item.child.length && item.showItem > 0">
             <template slot="title">
               <i :class="item.icon"></i>
               <span>{{ item.name }}</span>
             </template>
             <el-menu-item-group>
-              <el-menu-item
-                v-for="el in item.child"
-                :key="el.id"
-                :index="el.path"
-                v-if="el.showItem"
-              >
+              <el-menu-item v-for="el in item.child" :key="el.id" :index="el.path" v-if="el.showItem">
                 <span style="margin-left: 10px">{{ el.name }}</span>
               </el-menu-item>
             </el-menu-item-group>
@@ -114,7 +93,7 @@
             <el-breadcrumb-item v-if="crumbChild">
               {{ crumbChild }}
             </el-breadcrumb-item>
-            <el-breadcrumb-item v-if="sacleListName"> {{sacleListName}}</el-breadcrumb-item>
+            <el-breadcrumb-item v-if="sacleListName"> {{ sacleListName }}</el-breadcrumb-item>
           </el-breadcrumb>
         </el-header>
 
@@ -126,38 +105,22 @@
 
       </el-container>
     </el-container>
-     <el-footer style='padding-left:0;padding-right:0'><Footer /></el-footer>
+    <!-- <el-footer style='padding-left:0;padding-right:0;height: 0px;'> -->
+      <Footer />
+    <!-- </el-footer> -->
 
     <!---lxh-修改密码-->
     <el-dialog title="修改密码" :visible.sync="dialogVisible" :close-on-click-modal="false" width="40%">
       <div>
-        <el-form
-          :model="ruleForm"
-          :rules="rules"
-          ref="ruleForm"
-          label-width="150px"
-          class="demo-ruleForm"
-        >
+        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
           <el-form-item label="请输入旧密码" prop="oldpass">
-            <el-input
-              type="password"
-              v-model="ruleForm.oldpass"
-              autocomplete="off"
-            />
+            <el-input type="password" v-model="ruleForm.oldpass" autocomplete="off" />
           </el-form-item>
           <el-form-item label="请输入新密码" prop="pass">
-            <el-input
-              type="password"
-              v-model="ruleForm.pass"
-              autocomplete="off"
-            />
+            <el-input type="password" v-model="ruleForm.pass" autocomplete="off" />
           </el-form-item>
           <el-form-item label="确认新密码" prop="checkPass">
-            <el-input
-              type="password"
-              v-model="ruleForm.checkPass"
-              autocomplete="off"
-            />
+            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" />
           </el-form-item>
 
           <el-form-item>
@@ -170,13 +133,13 @@
   </el-container>
 </template>
 <script>
-import {mapGetters,mapActions} from "vuex"
+import { mapGetters, mapActions } from "vuex"
 export default {
   name: "ContainerSys",
-computed: {
-      ...mapGetters(['sacleListName']),
-      ...mapGetters(['menuActive']),
-    },
+  computed: {
+    ...mapGetters(['sacleListName']),
+    ...mapGetters(['menuActive']),
+  },
   data() {
     var systemVersion = process.env.VUE_APP_VERSION;
     //修改密码***
@@ -292,10 +255,10 @@ computed: {
       "b80bb7740288fda1f201890375a60c8f"
     );
     this.phone = sessionStorage.getItem(
-        "f7a42fe7211f98ac7a60a285ac3a9e87"
+      "f7a42fe7211f98ac7a60a285ac3a9e87"
     );
     this.userType = sessionStorage.getItem(
-        "f7a42fe7211f98ac7a60a285ac3a9528"
+      "f7a42fe7211f98ac7a60a285ac3a9528"
     );
 
     console.log('--------------------------------------------------')
@@ -319,168 +282,168 @@ computed: {
     this.selectMenu(this.$route.path);
   },
   methods: {
-     ...mapActions({
-      setSacleListName:"setSacleListName",
-      setMenuActive:"setMenuActive"
+    ...mapActions({
+      setSacleListName: "setSacleListName",
+      setMenuActive: "setMenuActive"
     }),
 
     initMenus() {
-       this.menuList = [
+      this.menuList = [
 
-         {
-           id: 0,
-           name: "首页",
-           icon: "el-icon-s-home",
+        {
+          id: 0,
+          name: "首页",
+          icon: "el-icon-s-home",
           //  path: "/ContainerSys/AdminHome",
-           path: ['2', '3'].includes(this.userType) ? "/ContainerSys/AdminHomeS" :"/ContainerSys/AdminHome",
-           showItem: true,
-           child: [],
-         },
-         {
-           id: 1,
-           name: "用户管理",
-           icon: "el-icon-user-solid",
-           path: "1",
-           showItem: ['2', '3'].includes(this.userType),
-           child: [
-             {
-               id: "1-1",
-               name: "学生管理",
-               parentName: "用户管理",
-               styleCss: "el-icon-s-custom",
-               path: "/ContainerSys/UserManage",
-               showItem: true,
-             },
-             {
-               id: "1-2",
-               name: "年级管理",
-               parentName: "用户管理",
-               styleCss: "el-icon-s-custom",
-               path: "/ContainerSys/UserGroupManagement",
-               showItem: true,
-             },
-             {
-               id: "1-3",
-               name: "管理员管理",
-               parentName: "用户管理",
-               styleCss: "el-icon-s-grid",
-               path: "/ContainerSys/AdminManage",
-               showItem: this.userType == 3,
-             },
-           ],
-         },
-         {
-           id: 2,
-           name: "测试记录",
-           icon: "el-icon-s-order",
-           path: "2",
-           showItem: ['2', '3'].includes(this.userType),
-           child: [
-             {
-               id: "2-1",
-               name: "学生测试记录",
-               parentName: "测试记录",
-               styleCss: "el-icon-s-custom",
-               path: "/ContainerSys/UserRecords",
-               showItem: true,
-             },
-             {
-               id: "2-2",
-               name: "量表测试记录",
-               parentName: "测试记录",
-               styleCss: "el-icon-s-custom",
-               path: "/ContainerSys/SacleList",
-               showItem: true,
-             },
-             {
-               id: "2-3",
-               name: "认知任务测试记录",
-               parentName: "测试记录",
-               styleCss: "el-icon-s-grid",
-               path: "/ContainerSys/CognitiveTaskList",
-               showItem: true,
-             },
-           ],
-         },
-         {
-           id: 3,
-           name: "学校管理",
-           icon: "el-icon-s-order",
-           path: "3",
-           showItem: this.userType === '4',
-           child: [
-             {
-               id: "3-1",
-               name: "学校信息",
-               parentName: "学校管理",
-               styleCss: "el-icon-s-custom",
-               path: "/ContainerSys/InstitutionInfo",
-               showItem: this.userType === '4',
-             },
-           ],
-         },
-         {
-           id: 4,
-           name: "系统管理",
-           icon: "el-icon-s-order",
-           path: "4",
-           showItem: ['2', '3'].includes(this.userType),
-           child: [
-             {
-               id: "4-1",
-               name: "操作日志管理",
-               parentName: "系统管理",
-               styleCss: "el-icon-s-grid",
-               path: "/ContainerSys/OperationLog",
-               showItem: true,
-             },
-             {
-               id: "4-2",
-               name: "测试计划",
-               parentName: "系统管理",
-               styleCss: "el-icon-s-custom",
-               path: "/ContainerSys/testPlan",
-               showItem: true,
-             },
-             {
-               id: "4-3",
-               name: "历史计划",
-               parentName: "系统管理",
-               styleCss: "el-icon-s-custom",
-               path: "/ContainerSys/planHistory",
-               showItem: true,
-             },
-           ],
-         },
-         {
-           id: 5,
-           name: "量表管理",
-           icon: "el-icon-s-order",
-           path: "5",
-           showItem: ['2', '3'].includes(this.userType),
-           child: [
-             {
-               id: "5-1",
-               name: "自定义量表",
-               parentName: "量表管理",
-               styleCss: "el-icon-s-custom",
-               path: "/ContainerSys/ScaleManagement",
-               showItem: true,
-             },
-             {
-               id: "5-2",
-               name: "量表预警",
-               parentName: "量表管理",
-               styleCss: "el-icon-s-custom",
-               path: "/ContainerSys/scaleWarn",
-               showItem: true,
-             },
-           ],
-         },
-       ]
+          path: ['2', '3'].includes(this.userType) ? "/ContainerSys/AdminHomeS" : "/ContainerSys/AdminHome",
+          showItem: true,
+          child: [],
+        },
+        {
+          id: 1,
+          name: "用户管理",
+          icon: "el-icon-user-solid",
+          path: "1",
+          showItem: ['2', '3'].includes(this.userType),
+          child: [
+            {
+              id: "1-1",
+              name: "学生管理",
+              parentName: "用户管理",
+              styleCss: "el-icon-s-custom",
+              path: "/ContainerSys/UserManage",
+              showItem: true,
+            },
+            {
+              id: "1-2",
+              name: "年级管理",
+              parentName: "用户管理",
+              styleCss: "el-icon-s-custom",
+              path: "/ContainerSys/UserGroupManagement",
+              showItem: true,
+            },
+            {
+              id: "1-3",
+              name: "管理员管理",
+              parentName: "用户管理",
+              styleCss: "el-icon-s-grid",
+              path: "/ContainerSys/AdminManage",
+              showItem: this.userType == 3,
+            },
+          ],
+        },
+        {
+          id: 2,
+          name: "测试记录",
+          icon: "el-icon-s-order",
+          path: "2",
+          showItem: ['2', '3'].includes(this.userType),
+          child: [
+            {
+              id: "2-1",
+              name: "学生测试记录",
+              parentName: "测试记录",
+              styleCss: "el-icon-s-custom",
+              path: "/ContainerSys/UserRecords",
+              showItem: true,
+            },
+            {
+              id: "2-2",
+              name: "量表测试记录",
+              parentName: "测试记录",
+              styleCss: "el-icon-s-custom",
+              path: "/ContainerSys/SacleList",
+              showItem: true,
+            },
+            {
+              id: "2-3",
+              name: "认知任务测试记录",
+              parentName: "测试记录",
+              styleCss: "el-icon-s-grid",
+              path: "/ContainerSys/CognitiveTaskList",
+              showItem: true,
+            },
+          ],
+        },
+        {
+          id: 3,
+          name: "学校管理",
+          icon: "el-icon-s-order",
+          path: "3",
+          showItem: this.userType === '4',
+          child: [
+            {
+              id: "3-1",
+              name: "学校信息",
+              parentName: "学校管理",
+              styleCss: "el-icon-s-custom",
+              path: "/ContainerSys/InstitutionInfo",
+              showItem: this.userType === '4',
+            },
+          ],
+        },
+        {
+          id: 4,
+          name: "系统管理",
+          icon: "el-icon-s-order",
+          path: "4",
+          showItem: ['2', '3'].includes(this.userType),
+          child: [
+            {
+              id: "4-1",
+              name: "操作日志管理",
+              parentName: "系统管理",
+              styleCss: "el-icon-s-grid",
+              path: "/ContainerSys/OperationLog",
+              showItem: true,
+            },
+            {
+              id: "4-2",
+              name: "测试计划",
+              parentName: "系统管理",
+              styleCss: "el-icon-s-custom",
+              path: "/ContainerSys/testPlan",
+              showItem: true,
+            },
+            {
+              id: "4-3",
+              name: "历史计划",
+              parentName: "系统管理",
+              styleCss: "el-icon-s-custom",
+              path: "/ContainerSys/planHistory",
+              showItem: true,
+            },
+          ],
+        },
+        {
+          id: 5,
+          name: "量表管理",
+          icon: "el-icon-s-order",
+          path: "5",
+          showItem: ['2', '3'].includes(this.userType),
+          child: [
+            {
+              id: "5-1",
+              name: "自定义量表",
+              parentName: "量表管理",
+              styleCss: "el-icon-s-custom",
+              path: "/ContainerSys/ScaleManagement",
+              showItem: true,
+            },
+            {
+              id: "5-2",
+              name: "量表预警",
+              parentName: "量表管理",
+              styleCss: "el-icon-s-custom",
+              path: "/ContainerSys/scaleWarn",
+              showItem: true,
+            },
+          ],
+        },
+      ]
     },
 
-    changeMenu: function() {
+    changeMenu: function () {
       this.isCollapse = !this.isCollapse;
     },
     //匹配获取页签名称-2020-03-17 lwl
@@ -497,7 +460,7 @@ computed: {
               this.crumbParent = i.parentName;
               this.crumbChild = i.name;
             }
-            if( param !== "/ContainerSys/SacleList"){
+            if (param !== "/ContainerSys/SacleList") {
               this.setSacleListName(null)
             }
           });
@@ -533,15 +496,15 @@ computed: {
         if (this.institutionNo && this.institutionNo !== 'null') {
           data.institutionNo = this.institutionNo
         }
-        this.$http.post("system/logout", data,(res) => {
-          if( res && res.code == 200 ){
+        this.$http.post("system/logout", data, (res) => {
+          if (res && res.code == 200) {
             this.$message({
               message: "已成功退出登录",
               type: "success",
             })
             localStorage.clear()
             sessionStorage.clear()
-            this.$router.push({ path: "/",})
+            this.$router.push({ path: "/", })
           } else {
             this.$message({
               message: res.msg,
@@ -649,7 +612,8 @@ computed: {
 ::v-deep .el-container {
 
   &.main-container {
-    height: calc(100vh - 96px);
+    height: 100%;
+    width: 100%;
     overflow: hidden;
   }
 
@@ -667,9 +631,11 @@ computed: {
     }
   }
 }
+
 .el-menu-vertical-demo:not(.el-menu--collapse) {
   width: 200px;
   min-height: 400px;
+  height: 100%;
   overflow: hidden;
 }
 
@@ -727,12 +693,15 @@ computed: {
   height: calc(100vh - 96px);
   text-align: left;
 }
+
 .aside-menu .el-menu-item.is-active {
   background: #00CDDD !important;
 }
+
 .el-menu-item-group .el-menu-item.is-active {
   background: #00CDDD !important;
 }
+
 .fade-enter {
   opacity: 0;
 }
@@ -745,6 +714,7 @@ computed: {
 .fade-enter-active {
   transition: opacity 0s;
 }
+
 /*.rightExit {*/
 /*float: right !important;*/
 /*}*/
@@ -767,14 +737,16 @@ computed: {
 .admin-header-content {
   background: #00CDDD;
   height: 100% !important;
-    display: flex;
+  display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
 }
+
 .admin-header-content .el-col {
   height: 100% !important;
 }
+
 .admin-header-content .admin-logo-content {
   /*box-sizing: border-box;*/
   /*width: 100%;*/
@@ -783,10 +755,12 @@ computed: {
   height: 45px;
   padding: 8px 0 8px 20px;
 }
+
 .admin-header-content .admin-logo-content img {
   width: 100%;
   height: 100%;
 }
+
 .admin-header-content .admin-head-content {
   width: 100%;
   height: 100%;
@@ -796,24 +770,37 @@ computed: {
   align-items: center;
   flex: 1;
 }
+
 .admin-header-content .el-menu-demo {
   height: 100%;
+
+  .rightExit {
+  //   position: absolute !important;
+  //   top: 0px !important;
+  //   left: 0px !important;
+  }
+
 }
-.el-menu--horizontal > .el-submenu .el-submenu__title,
-/deep/.el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
+
+.el-menu--horizontal>.el-submenu .el-submenu__title,
+/deep/.el-menu--horizontal>.el-submenu.is-active .el-submenu__title {
   border-bottom: none !important;
 }
-/deep/.el-menu--horizontal > .el-submenu .el-submenu__icon-arrow {
+
+/deep/.el-menu--horizontal>.el-submenu .el-submenu__icon-arrow {
   color: #fff;
 }
-
+// .el-menu--horizontal {
+//     border-right: none;
+//     left: 0px !important;
+// }
 .el-menu.el-menu--horizontal {
   border-bottom: none;
 }
 
-.just-right{
-      display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
+.just-right {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
 }
 </style>

src/components/manage/main/AdminHomeS.vue

@@ -1,5 +1,9 @@
 <template>
-  <div class="app-container">
+  <!-- <div class="app-container ScaleBox" ref="ScaleBox" :style="{
+    width: width + 'px',
+    height: height + 'px',
+  }"> -->
+  <div class="app-container" id="homeapp">
     <div class="top-header">
     </div>
     <div class="main-content">
@@ -71,7 +75,7 @@
               <el-table :data="scaleListasks" size="small" style="width: 100%" :height="tableHeight">
                 <el-table-column align="center" prop="name" label="测试名称">
                 </el-table-column>
-                <el-table-column align="center" prop="count" label="测试人数">
+                <el-table-column align="center" prop="count" label="测试人次">
                 </el-table-column>
               </el-table>
               <el-pagination :current-page.sync="currentPage1" :page-size="10"
@@ -119,6 +123,8 @@ import IndexBar from "../../echarts/IndexBar.vue"
 import IndexBarA from "../../echarts/IndexBarA.vue"
 import IndexBarS from "../../echarts/IndexBarS.vue"
 import { roundToFixed } from "../../../utils/utils"
+import autofit from 'autofit.js'
+
 
 export default {
   name: "AdminHome",
@@ -157,7 +163,9 @@ export default {
         yData: ['1'],
         names: ['1']
       },
-
+      scale: 0,
+      width: 1695,
+      height: 880,
       riskChangeData: { // 风险变化趋势数据
         xData: ['六月', '七月'],
         yData: ['79', '90', '99'],
@@ -182,9 +190,20 @@ export default {
     this.userType = sessionStorage.getItem("f7a42fe7211f98ac7a60a285ac3a9528")
   },
   async mounted() {
+    autofit.init({
+      // designHeight: 1080,
+      // designWidth: 1920,
+      // renderDom: "#homeapp",
+      // resize: true
+    })
+
+    // this.setScale();
+    // window.addEventListener("resize", this.debounce(this.setScale));
     let tempDom = document.querySelector('#bottomTableOutline')
     this.$nextTick(() => {
-      this.tableHeight = tempDom.offsetHeight - 170
+      console.log(tempDom.offsetHeight);
+      
+      this.tableHeight = tempDom.offsetHeight 
       this.$forceUpdate()
     })
 
@@ -204,8 +223,7 @@ export default {
     }
     let riskLevelDataSList = await this.finishInstitutionNum()
     console.log(riskLevelDataSList, '========================>riskLevelDataSList');
-    this.riskLevelDataS = riskLevelDataSList[0].value * 100
-    // this.riskLevelDataS = 66
+    this.riskLevelDataS = roundToFixed(riskLevelDataSList[0].value * 100, 2)
     console.log(this.riskLevelDataS, '============>this.riskLevelDataS');
 
     this.groupEvaluationRatioData = await this.groupEvaluationRatio()
@@ -245,6 +263,68 @@ export default {
     this.mapData = await this.psychologicalRiskMap()
   },
   methods: {
+    //     debounce(fn, delay) {
+    //       const delays = delay || 500;
+    //       let timer;
+    //       return function () {
+    //         const th = this;
+    //         const args = arguments;
+    //         if (timer) {
+    //           clearTimeout(timer);
+    //         }
+    //         timer = setTimeout(function () {
+    //           timer = null;
+    //           fn.apply(th, args);
+    //         }, delays);
+    //       };
+    //     },
+
+    //     getScale() {
+    //       // 固定好16：9的宽高比，计算出最合适的缩放比
+    //       const { width, height } = this;
+    //       const wh = window.innerHeight / height;
+    //       const ww = window.innerWidth / width;
+    //       console.log(ww < wh ? ww : wh);
+    //       return ww < wh ? ww : wh;
+    //     },
+    //     setScale() {
+    //       // 获取到缩放比例，设置它
+    //       this.scale = this.getScale();
+    //       if (this.$refs.ScaleBox) {
+    //         this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
+    //       }
+    //     },
+    //     /**
+    //  * 设置屏幕兼容性
+    //  */
+    //     setScreenCompatibility() {
+    //       const sketch = {
+    //         width: 1920,
+    //         height: 1080,
+    //       }
+    //       // 计算屏幕实际分辨率宽高比例为 R
+    //       const R = window.innerWidth / window.innerHeight;
+    //       // 计算设计稿分辨率宽度与屏幕实际分辨率宽度比 Rw
+    //       const Rw = sketch.width / window.innerWidth;
+    //       // 计算设计稿分辨率高度与屏幕实际分辨率高度比 为 Rh
+    //       const Rh = sketch.height / window.innerHeight;
+    //       let width = sketch.width;
+    //       let height = (sketch.width / R);
+    //       let scale = 1 / Rw;
+    //       if (Rw < Rh) {
+    //         width = (sketch.height * R);
+    //         height = sketch.height;
+    //         scale = 1 / Rh;
+    //       }
+    //       // 设置body拉伸（尺寸）
+    //       document.body.style.width = width + "px";
+    //       document.body.style.height = height + "px";
+    //       // 设置body缩放
+    //       document.body.style.transform = `scale(${scale})`;
+    //       document.body.style.transformOrigin = '0 0';
+    //       document.body.style.MozTransform = `scale(${scale})`;
+    //       document.body.style.MozTransformOrigin = '0 0';
+    //     },
     // 查询分页数据方法
     handleCurrentChange(current, falg) {
       console.log(current, falg, '查询');
@@ -430,6 +510,10 @@ export default {
   position: absolute;
   left: 0;
   top: 0;
+  // width: 1920px;
+  // height: 1080px;
+  // width: 1716px;
+  // height: 894px;
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -456,6 +540,10 @@ export default {
     flex-direction: row;
     justify-content: space-around;
     padding-bottom: 2px;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
 
     // @media screen and (min-width:1920px){
     .Evaluation {

src/components/manage/main/RealTime.vue

@@ -434,7 +434,8 @@ export default {
 
 .screenFlag {
   background-color: #000000;
-  height: 100vh;
+  /* height: 100vh; */
+  height: 100%;
 }
 .screenColorFlag {
   color: azure;

src/components/manage/main/UserGroupManagement.vue

@@ -57,11 +57,19 @@
     <el-dialog :title="title" :visible.sync="dialogVisible" width="680px" :before-close="handleClose">
       <div v-if="fals === 'add'">
         <el-row>
-          <span style="margin-left: 15px;">请选择角色：</span>
+          <!-- <span style="margin-left: 15px;">请选择角色：</span>
           <el-select v-model="groupUser" multiple placeholder="请选择">
             <el-option v-for="item in optionsgroupUserList" :key="item.id" :label="item.petName" :value="item.id">
             </el-option>
-          </el-select>
+          </el-select> -->
+          <el-form ref="formName" :rules="rules" :model="form" label-width="120px">
+            <el-form-item label="请选择角色：" prop="groupUser">
+              <el-select style="width: 260px;" v-model="form.groupUser" multiple placeholder="请选择">
+                <el-option v-for="item in optionsgroupUserList" :key="item.id" :label="item.petName" :value="item.id">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-form>
         </el-row>
         <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
         <div style="margin: 15px 0;"></div>
@@ -250,33 +258,45 @@ export default {
 
     // 添加年级
     creatGroupBatch() {
-      if (this.loading) {
-        return
-      }
-      this.loading = true
-      let tempArr = this.checkedGrades.map((item) => {
-        return this.creatGroup(item)
-      })
-      Promise.all(tempArr).then(() => {
-        this.loading = false
-        this.dialogVisible = false
-        this.handleClose()
-        this.getData()
-      }).catch((err) => {
-        this.loading = false
-        console.log('发生错误：年级已存在 ', err)
-        this.$message({
-          type: "info",
-          message: "年级已存在!",
-        });
+      this.$refs['formName'].validate((valid) => {
+        if (valid) {
+          if (this.loading) {
+            return
+          }
+          this.loading = true
+          let tempArr = this.checkedGrades.map((item) => {
+            return this.creatGroup(item)
+          })
+          Promise.all(tempArr).then(() => {
+            this.loading = false
+            this.dialogVisible = false
+            this.handleClose()
+            this.$message({
+              type: "success",
+              message: "添加成功!",
+            });
+            this.getData()
+          }).catch((err) => {
+            this.loading = false
+            console.log('发生错误：年级已存在 ', err)
+            this.$message({
+              type: "info",
+              message: "年级已存在!",
+            });
 
+          })
+        } else {
+          console.log('error submit!!');
+          return false;
+        }
       })
+
     },
 
     creatGroup(gradeName) {
-      console.log(this.groupUser, '===================jjjjjjjjjjjjj=========>this.groupUser');
+      console.log(this.form.groupUser, '===================jjjjjjjjjjjjj=========>this.groupUser');
 
-      let groupUserList = this.groupUser.map(item => {
+      let groupUserList = this.form.groupUser.map(item => {
         return { userId: item }
       })
       console.log(groupUserList, '=============================>groupUserListgroupUserListgroupUserList');
@@ -372,27 +392,7 @@ export default {
       )
       // this.$refs['formName'].validate((valid) => {
       //   if (valid) {
-      //     this.$http.post(
-      //       "/group/updateName",
-      //       {
-      //         id: this.dialogVisibleData[0].id,
-      //         userId: this.dialogVisibleData[0].userId,
-      //         groupId: this.dialogVisibleData[0].groupId,
-      //         groupName: this.form.name,
-      //         groupUserList: groupUserList
-      //       },
-      //       (msg) => {
-      //         console.log(msg);
-      //         this.getData();
-      //         this.$message({
-      //           type: "success",
-      //           message: "更改新组: " + value + "  成功",
-      //         });
-      //       }
-      //     ).catch(error => {
-      //       console.log(error);
 
-      //     })
       //   } else {
       //     console.log('error submit!!');
       //     return false;

src/style/pad.css

@@ -5,6 +5,7 @@
     transform: rotateZ(90deg) translateY(-100%);
   }
   #app{
-        min-width: 100vh;
+        /* min-width: 100vh; */
+        width: 100%;
   }
 }

src/utils/resizeMixin.js

@@ -0,0 +1,63 @@
+// * 默认缩放值
+const scale = {
+    width: '1',
+    height: '1',
+  };
+   
+  // * 设计稿尺寸（px）
+  const baseWidth = 1920;
+  const baseHeight = 1080;
+   
+  // * 需保持的比例（默认16:9）
+  const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));
+   
+  export default {
+    data() {
+      return {
+        drawTiming: null,
+      };
+    },
+    mounted() {
+      this.calcRate();
+      window.addEventListener('resize', this.resize);
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.resize);
+    },
+    methods: {
+      calcRate() {
+        const appRef = this.$refs['appRef'];
+        if (!appRef) return;
+        // 当前宽高比
+        const currentRate = parseFloat(
+          (window.innerWidth / window.innerHeight).toFixed(5)
+        );
+        if (appRef) {
+          if (currentRate > baseProportion) {
+            // 表示更宽
+            scale.width = (
+              (window.innerHeight * baseProportion) /
+              baseWidth
+            ).toFixed(5);
+            scale.height = (window.innerHeight / baseHeight).toFixed(5);
+            appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
+          } else {
+            // 表示更高
+            scale.height = (
+              window.innerWidth /
+              baseProportion /
+              baseHeight
+            ).toFixed(5);
+            scale.width = (window.innerWidth / baseWidth).toFixed(5);
+            appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
+          }
+        }
+      },
+      resize() {
+        clearTimeout(this.drawTiming);
+        this.drawTiming = setTimeout(() => {
+          this.calcRate();
+        }, 200);
+      },
+    },
+  };

src/views/CognitiveAbilityTask/VisualSpace.vue

@@ -1,16 +1,14 @@
 <template>
   <div>
     <div class="desc_wrap" v-if="!resultEnd">
-      <div
-        style="
+      <div style="
           width: 70%;
           height: 100%;
           background: rgb(248, 248, 248);
           opacity: 1;
           border-radius: 12px;
           margin: 0 auto;
-        "
-      >
+        ">
         <div style="float: left; width: 50%; height: 100%; overflow-y: auto">
           <div id="left_top">
             <div>
@@ -27,29 +25,17 @@
             <!-- <p>{{subjectInfo.description}}</p> -->
           </div>
         </div>
-        <div
-          class="right_part"
-          :style="{
-            background:
-              'url(' + require('../../assets/page' + taskId + '.png') + ')',
-            'background-size': '100% 100%',
-          }"
-        >
+        <div class="right_part" :style="{
+          background:
+            'url(' + require('../../assets/page' + taskId + '.png') + ')',
+          'background-size': '100% 100%',
+        }">
           <div id="title">
             <span>{{ subjectInfo.name }}</span>
           </div>
           <div style="position: absolute; bottom: 54px; right: 38%">
-            <el-button
-              v-show="!startButtonFlag"
-              class="start"
-              @click="startTest('0')"
-              >练习测试</el-button
-            >
-            <el-button
-              v-show="startButtonFlag"
-              class="start"
-              @click="startTest('1')"
-            >
+            <el-button v-show="!startButtonFlag" class="start" @click="startTest('0')">练习测试</el-button>
+            <el-button v-show="startButtonFlag" class="start" @click="startTest('1')">
               {{ butttonName }}
             </el-button>
 
@@ -68,25 +54,21 @@
       </p>
     </div> -->
 
-    <p
-      align="center"
-      v-show="resultEnd"
-      style="margin-top: 3%; margin-bottom: 3%; font-size: 30px"
-    >
+    <p align="center" v-show="resultEnd" style="margin-top: 3%; margin-bottom: 3%; font-size: 30px">
       <!-- <el-table border :data="tableDataTwo" style="width: 60vw">
         <el-table-column prop="key" label="指标名称" width></el-table-column>
         <el-table-column prop="value" label="指标值" width></el-table-column>
       </el-table> -->
-      <table class="test_result">
-        <tr>
-          <th>指标名称</th>
-          <th>测试结果</th>
-        </tr>
-        <tr>
-          <td>正确率：</td>
-          <td>{{ tableDataTwo[0].value }}</td>
-        </tr>
-      </table>
+    <table class="test_result">
+      <tr>
+        <th>指标名称</th>
+        <th>测试结果</th>
+      </tr>
+      <tr>
+        <td>正确率：</td>
+        <td>{{ tableDataTwo[0].value }}</td>
+      </tr>
+    </table>
     </p>
 
     <!-- <div
@@ -98,44 +80,22 @@
       "
     ></div> -->
 
-    <div
-      v-show="maskFlag"
-      class="activeTask"
-      @contextmenu.prevent=""
-      @click.left="userClick('L')"
-      @click.right="userClick('R')"
-    >
-      <div
-        :class="{ aa: practiceFlag }"
-        style="width: 50%; margin-left: 10%; margin-top: 24px"
-      >
-        <el-progress
-        class="main_progress"
-          :text-inside="true"
-          :format="format"
-          :stroke-width="48"
-          :percentage="(lunInit / 75) * 100"
-        ></el-progress>
+    <div v-show="maskFlag" class="activeTask" @contextmenu.prevent="" @click.left="userClick('L')"
+      @click.right="userClick('R')">
+      <div :class="{ aa: practiceFlag }" style="width: 50%; margin-left: 10%; margin-top: 24px">
+        <el-progress class="main_progress" :text-inside="true" :format="format" :stroke-width="48"
+          :percentage="(lunInit / 75) * 100"></el-progress>
       </div>
-      <img
-        @click="screenState()"
-        src="../../assets/small-big.png"
-        alt=""
-        style="
+      <img @click="screenState()" src="../../assets/small-big.png" alt="" style="
           height: 48px;
           width: 48px;
           position: fixed;
           top: 24px;
           right: 22px;
           cursor: pointer;
-        "
-      />
+        " />
       <div class="spaceTable glass">
-        <div
-          v-show="tableFlag"
-          align="center"
-          style="margin-top: 7rem; display: block"
-        >
+        <div v-show="tableFlag" align="center" style="margin-top: 7rem; display: block">
           <!-- <p @click="fff">dasd111111111111</p>
           <p @click="showCircle">dasd</p>-->
           <table class>
@@ -150,39 +110,28 @@
                 </span>
                 <!-- 单独显示中间颜色方块 -->
                 <span v-show="itemsub == 6">
-                  <span
-                    v-bind:class="{
-                      circleLeftTop: squareFlag,
-                      circleLeftTopC: !squareFlag,
-                    }"
-                  ></span>
+                  <span v-bind:class="{
+                    circleLeftTop: squareFlag,
+                    circleLeftTopC: !squareFlag,
+                  }"></span>
                 </span>
                 <span v-show="itemsub == 7">
-                  <span
-                    v-bind:class="{
-                      circleRightTop: squareFlag,
-                      circleRightTopC: !squareFlag,
-                    }"
-                    >&nbsp;</span
-                  >
+                  <span v-bind:class="{
+                    circleRightTop: squareFlag,
+                    circleRightTopC: !squareFlag,
+                  }">&nbsp;</span>
                 </span>
                 <span v-show="itemsub == 8">
-                  <span
-                    v-bind:class="{
-                      circleLeftButtom: squareFlag,
-                      circleLeftButtomC: !squareFlag,
-                    }"
-                    >&nbsp;</span
-                  >
+                  <span v-bind:class="{
+                    circleLeftButtom: squareFlag,
+                    circleLeftButtomC: !squareFlag,
+                  }">&nbsp;</span>
                 </span>
                 <span v-show="itemsub == 9">
-                  <span
-                    v-bind:class="{
-                      circleRightButtom: squareFlag,
-                      circleRightButtomC: !squareFlag,
-                    }"
-                    >&nbsp;</span
-                  >
+                  <span v-bind:class="{
+                    circleRightButtom: squareFlag,
+                    circleRightButtomC: !squareFlag,
+                  }">&nbsp;</span>
                 </span>
                 <!-- 单独显示星星 -->
                 <span v-show="itemsub == 15">
@@ -1102,6 +1051,7 @@ export default {
 .train-cen {
   text-align: center;
 }
+
 .activeTask {
   background: url(../../assets/congnitiveAblitity/vis-bg.png) no-repeat center;
   background-size: cover;
@@ -1111,13 +1061,17 @@ export default {
   right: 0;
   bottom: 0;
   text-align: center;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
+  /* height: 100vh; */
 }
+
 .spaceTr {
   /* border: 5px solid red; */
   /* height: 40px; */
   display: flex;
 }
+
 .spaceTd {
   border: 1px solid #fff;
   width: 40px;
@@ -1125,9 +1079,11 @@ export default {
   display: inline-block;
   text-align: center;
 }
+
 .spaceTable {
   text-align: center;
 }
+
 .spaceSpan {
   text-align: center;
   margin-left: 2px;
@@ -1139,6 +1095,7 @@ export default {
   box-shadow: 1px 0px 6px rgb(0, 0, 0);
   border-radius: 50%;
 }
+
 .spaceSpanCheng {
   margin-left: 2px;
   margin-top: 1px;
@@ -1150,12 +1107,15 @@ export default {
   box-shadow: 1px 0px 6px rgb(0, 0, 0);
   border-radius: 50%;
 }
+
 .vsdown {
   font-size: 70px;
 }
+
 .vsp {
   margin-top: 20%;
 }
+
 .circleLeftTop {
   z-index: 100;
   margin-top: 20px;
@@ -1168,6 +1128,7 @@ export default {
   position: fixed;
   margin-bottom: -2px;
 }
+
 .circleLeftTopC {
   z-index: 100;
   margin-top: 20px;
@@ -1180,6 +1141,7 @@ export default {
   position: fixed;
   margin-bottom: -2px;
 }
+
 .circleRightTop {
   margin-top: 20px;
   margin-right: 24px;
@@ -1191,6 +1153,7 @@ export default {
   position: fixed;
   margin-bottom: -2px;
 }
+
 .circleRightTopC {
   margin-top: 20px;
   margin-right: 24px;
@@ -1203,6 +1166,7 @@ export default {
   position: fixed;
   margin-bottom: -2px;
 }
+
 .circleLeftButtom {
   margin-left: 22px;
   /* border-radius: 0 0 0 20px; */
@@ -1214,6 +1178,7 @@ export default {
   position: fixed;
   margin-top: -2px;
 }
+
 .circleLeftButtomC {
   margin-left: 22px;
   /* border-radius: 0 0 0 20px; */
@@ -1225,6 +1190,7 @@ export default {
   position: fixed;
   margin-top: -2px;
 }
+
 .circleRightButtom {
   /* border-radius: 0 0 20px 0; */
   display: block;
@@ -1235,6 +1201,7 @@ export default {
   position: fixed;
   margin-top: -2px;
 }
+
 .circleRightButtomC {
   /* border-radius: 0 0 20px 0; */
   display: block;
@@ -1245,6 +1212,7 @@ export default {
   position: fixed;
   margin-top: -2px;
 }
+
 /* 加号 */
 
 .circleLeftTopAdd {
@@ -1260,6 +1228,7 @@ export default {
   margin-bottom: -5px;
   border-width: 0 2px 2px 0;
 }
+
 .circleRightTopAdd {
   margin-top: 20px;
   margin-right: 24px;
@@ -1272,6 +1241,7 @@ export default {
   margin-bottom: -2px;
   border-width: 0 0 2px 2px;
 }
+
 .circleLeftButtomAdd {
   margin-left: 20px;
   /* border-radius: 0 0 0 20px; */
@@ -1284,6 +1254,7 @@ export default {
   border-style: solid;
   border-width: 2px 2px 0 0;
 }
+
 .circleRightButtomAdd {
   /* border-radius: 0 0 20px 0; */
   display: block;
@@ -1294,6 +1265,7 @@ export default {
   border-style: solid;
   border-width: 2px 0 0 2px;
 }
+
 .circleRightButtomCircle {
   border-radius: 50%;
   border-style: solid;
@@ -1304,12 +1276,15 @@ export default {
   width: 30px;
   height: 30px;
 }
+
 .vsInfo {
   font-size: 30px;
 }
+
 .vsquery {
   /* margin-top: 15%; */
 }
+
 .glass {
   width: 932px;
   height: 593px;
@@ -1321,6 +1296,7 @@ export default {
   margin: 5vh auto;
   position: relative;
 }
+
 .aa {
   visibility: hidden;
 }

src/views/MainTable.vue

@@ -278,14 +278,15 @@ export default {
 </style>
 <style lang="scss" scoped>
 .wrap {
-  width: 1200px;
-  margin: 0 auto;
-  height: calc(100vh - 70px);
+  // width: 1200px;
+  width: 100%;
+  // margin: 0 auto;
+  height: 100%;
 
   .cardList {
     height: calc(100% - 150px);
     overflow-x: hidden;
-    overflow-y: scroll;
+    // overflow-y: scroll;
   }
 }
 
@@ -357,23 +358,23 @@ div.link:active {
   position: static !important;
 }
 
-/* 适应pad样式 */
-@media screen and (max-width: 1024px) {
-  .wrap {
-    width: 100%;
-    margin: 0;
-  }
+// /* 适应pad样式 */
+// @media screen and (max-width: 1024px) {
+//   .wrap {
+//     width: 100%;
+//     margin: 0;
+//   }
 
-  .content {
-    width: auto;
-    height: 40px;
-    font-size: 14px;
-    font-family: PingFang SC;
-    font-weight: 400;
-    line-height: 20px;
-    color: #333333;
-    margin-top: 16px;
-    opacity: 1;
-  }
-}
+//   .content {
+//     width: auto;
+//     height: 40px;
+//     font-size: 14px;
+//     font-family: PingFang SC;
+//     font-weight: 400;
+//     line-height: 20px;
+//     color: #333333;
+//     margin-top: 16px;
+//     opacity: 1;
+//   }
+// }
 </style>

src/views/ScaleDetail.vue

@@ -108,7 +108,7 @@ export default {
 </script>
 <style lang="scss" scoped>
 .scale-detail-container {
-  height: calc(100vh - 70px);
+  height: 90%;
   position: relative;
 
   .submit-btn {

src/views/ScaleTestPage.vue

@@ -1208,7 +1208,7 @@ export default {
         confirmButtonText: '确定',
         type: 'success',
         callback: () => {
-          this.backFun()
+          // this.backFun()
         }
       })
 

src/views/Welcome.vue

@@ -1,35 +1,22 @@
- <template>
+<template>
   <div class="container">
     <div class="header">
       <div class="wraps">
         <div class="wrap">
           <img src="../assets/index/logo.png" alt="" />
           <ul class="menu">
-            <li
-              v-for="(item, index) in menuList"
-              :class="{ active: num == index }"
-              :key="item.id"
-              @click="handleSelect(item.value)"
-              class="menu-list"
-            >
+            <li v-for="(item, index) in menuList" :class="{ active: num == index }" :key="item.id"
+              @click="handleSelect(item.value)" class="menu-list">
               {{ item.name }}
-              <span class="menu-tag" v-show="index === 2 && tagNum > 0"
-                >{{ tagNum }}
+              <span class="menu-tag" v-show="index === 2 && tagNum > 0">{{ tagNum }}
               </span>
             </li>
           </ul>
           <div class="search_box" v-if="searchShow && (num == 0 || num == 1)">
             <em></em>
-            <input
-              type="text"
-              :placeholder="num == 0 ? '请输入量表名称' : num == 1 ? '请输入认知任务名称' : ''"
-              class="input-with-select"
-              id="input_scale_name"
-              v-model="keywords"
-              clearable
-              @clear="searchScale"
-              @keyup.enter="searchScale()"
-            />
+            <input type="text" :placeholder="num == 0 ? '请输入量表名称' : num == 1 ? '请输入认知任务名称' : ''"
+              class="input-with-select" id="input_scale_name" v-model="keywords" clearable @clear="searchScale"
+              @keyup.enter="searchScale()" />
             <button type="info" round @click="searchScale">搜索</button>
           </div>
         </div>
@@ -39,15 +26,13 @@
             <span class="drop-down-content">{{ nickname }}</span>
             <i class="el-icon-arrow-down el-icon--right"></i>
           </span>
+          <!-- :popper-append-to-body="false" :append-to-body="false" -->
           <el-dropdown-menu class="selectTab" slot="dropdown">
-            <el-dropdown-item v-show="typeTabShow" command="1"
-              >记录查看
+            <el-dropdown-item v-show="typeTabShow" command="1">记录查看
             </el-dropdown-item>
-            <el-dropdown-item v-show="typeTabShow" command="2"
-              >修改密码
+            <el-dropdown-item v-show="typeTabShow" command="2">修改密码
             </el-dropdown-item>
-            <el-dropdown-item v-show="typeTabShow && (systemVersion != 'lan')" command="5"
-              >个人中心
+            <el-dropdown-item v-show="typeTabShow && (systemVersion != 'lan')" command="5">个人中心
             </el-dropdown-item>
             <el-dropdown-item command="3">退出</el-dropdown-item>
           </el-dropdown-menu>
@@ -58,46 +43,25 @@
       <router-view ref="Childmain"></router-view>
     </div>
     <Footer />
-    <el-dialog
-      title="个人中心"
-      :visible.sync="userDialogVisiblephone1"
-      width="60%"
-      :close-on-click-modal="false"
-    >
+    <el-dialog title="个人中心" :visible.sync="userDialogVisiblephone1" width="60%" :close-on-click-modal="false">
       <div>
-        <el-form
-          :model="userRuleForm"
-          status-icon
-          :rules="rules"
-          ref="ruleForm"
-          label-width="100px"
-          class="demo-ruleForm"
-        >
+        <el-form :model="userRuleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
+          class="demo-ruleForm">
           <el-form-item label="请输入手机号" prop="phone">
-            <el-input
-              type="text"
-              maxlength="11"
-              v-model="userRuleForm.phone1"
-            ></el-input>
+            <el-input type="text" maxlength="11" v-model="userRuleForm.phone1"></el-input>
           </el-form-item>
 
           <el-form-item>
             <el-button @click="submitUserForm(1)">不再提示</el-button>
-            <el-button type="primary" @click="submitUserForm(10)"
-              >提交
+            <el-button type="primary" @click="submitUserForm(10)">提交
             </el-button>
           </el-form-item>
         </el-form>
       </div>
     </el-dialog>
 
-    <el-dialog
-      title="个人中心"
-      :visible.sync="userDialogVisible"
-      width="60%"
-      :close-on-click-modal="false"
-      :before-close="handleClose"
-    >
+    <el-dialog title="个人中心" :visible.sync="userDialogVisible" width="60%" :close-on-click-modal="false"
+      :before-close="handleClose">
       <!-- <div v-if="parseInt(userRuleForm.phone1) == 0">
         <el-form
           :model="userRuleForm"
@@ -122,20 +86,10 @@
         </el-form>
       </div> -->
       <div>
-        <el-form
-          :model="userRuleForm"
-          status-icon
-          :rules="rules"
-          ref="ruleForm"
-          label-width="100px"
-          class="demo-ruleForm"
-        >
+        <el-form :model="userRuleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
+          class="demo-ruleForm">
           <el-form-item label="昵称" prop="petName">
-            <el-input
-              type="text"
-              maxlength="11"
-              v-model="userRuleForm.petName"
-            ></el-input>
+            <el-input type="text" maxlength="11" v-model="userRuleForm.petName"></el-input>
           </el-form-item>
           <el-form-item label="性别" prop="gender">
             <el-radio-group v-model="userRuleForm.gender">
@@ -145,26 +99,16 @@
           </el-form-item>
 
           <el-form-item label="生日" prop="birthday">
-            <date-select
-              v-if="yearsModelPrants && yearsModelPrants != ''"
-              :yearsModelPrants="yearsModelPrants"
-              @dateChange="dateChange"
-            ></date-select>
+            <date-select v-if="yearsModelPrants && yearsModelPrants != ''" :yearsModelPrants="yearsModelPrants"
+              @dateChange="dateChange"></date-select>
           </el-form-item>
 
           <el-form-item v-if="systemVersion != 'lan'" label="职业" prop="profession">
-            <el-input
-              v-model="userRuleForm.profession"
-              placeholder="请输入职业"
-            >
+            <el-input v-model="userRuleForm.profession" placeholder="请输入职业">
             </el-input>
           </el-form-item>
           <el-form-item label="请输入手机号" prop="phone">
-            <el-input
-              type="text"
-              maxlength="11"
-              v-model="userRuleForm.phone"
-            ></el-input>
+            <el-input type="text" maxlength="11" v-model="userRuleForm.phone"></el-input>
           </el-form-item>
 
           <el-form-item>
@@ -175,46 +119,21 @@
       </div>
     </el-dialog>
     <!-- 修改密码弹窗 -->
-    <el-dialog
-      title="修改密码"
-      :visible.sync="dialogVisible"
-      width="25%"
-      :close-on-click-modal="false"
-    >
+    <el-dialog title="修改密码" :visible.sync="dialogVisible" width="25%" :close-on-click-modal="false">
       <div>
-        <el-form
-          :model="ruleForm"
-          status-icon
-          :rules="rules"
-          ref="ruleForm"
-          label-width="100px"
-          class="demo-ruleForm"
-        >
+        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
           <el-form-item label="请输入旧密码" prop="oldPassword">
-            <el-input
-              type="password"
-              v-model="ruleForm.oldPassword"
-              autocomplete="off"
-            ></el-input>
+            <el-input type="password" v-model="ruleForm.oldPassword" autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item label="请输入新密码" prop="pass">
-            <el-input
-              type="password"
-              v-model="ruleForm.pass"
-              autocomplete="off"
-            ></el-input>
+            <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
           </el-form-item>
           <el-form-item label="确认新密码" prop="checkPass">
-            <el-input
-              type="password"
-              v-model="ruleForm.checkPass"
-              autocomplete="off"
-            ></el-input>
+            <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
           </el-form-item>
 
           <el-form-item>
-            <el-button type="primary" @click="submitForm('ruleForm')"
-              >提交
+            <el-button type="primary" @click="submitForm('ruleForm')">提交
             </el-button>
             <el-button @click="resetForm('ruleForm')">重置</el-button>
           </el-form-item>
@@ -411,26 +330,26 @@ export default {
       setTagActive: "setTagActive",
     }),
     //个人信息弹窗关闭
-    handleClose(done){
-        //如果用户状态为4，禁止关闭弹窗
-        if(this.userStatus == 4){
-            // return;
-            this.$confirm('需要您补充完整的用户信息，确定要退出吗？')
-                .then(_ => {
-                    //退出登陆
-                    this.escape();
-                    // done();
-                })
-                .catch(_ => {});
+    handleClose(done) {
+      //如果用户状态为4，禁止关闭弹窗
+      if (this.userStatus == 4) {
+        // return;
+        this.$confirm('需要您补充完整的用户信息，确定要退出吗？')
+          .then(_ => {
+            //退出登陆
+            this.escape();
+            // done();
+          })
+          .catch(_ => { });
 
-        }else {
-            done()
-        }
+      } else {
+        done()
+      }
     },
     // 选择注册日期
     dateChange(obj) {
       // this.userRuleForm.birthday = `${obj.year}`;
-        this.userRuleForm.birthday = `${obj.year}-${obj.month}-${obj.day}`;
+      this.userRuleForm.birthday = `${obj.year}-${obj.month}-${obj.day}`;
     },
     // 查询量表数据
     loadData() {
@@ -451,13 +370,13 @@ export default {
       });
     },
     escape() {
-      this.$http.post("system/logout",{
+      this.$http.post("system/logout", {
         institutionNo: this.institutionNo,
         phone: this.userBid,
         roleType: this.userType,
-      },(res) => {
+      }, (res) => {
 
-        if( res && res.code == 200 ){
+        if (res && res.code == 200) {
           this.$message({
             message: "已成功退出登录",
             type: "success",
@@ -466,9 +385,9 @@ export default {
           localStorage.clear();
           this.nickname = "";
           this.userBid = "";
-          this.$router.push({path: "/",});
+          this.$router.push({ path: "/", });
 
-        }else {
+        } else {
           this.$message({
             message: res.msg,
             type: "error",
@@ -529,7 +448,7 @@ export default {
                 name: "TestPlan",
                 params: {},
               })
-              .catch((err) => {});
+              .catch((err) => { });
           }
         }
       } else {
@@ -601,27 +520,27 @@ export default {
       } else if (v == 10) {
         this.userRuleForm.phone = this.userRuleForm.phone1;
         // this.userRuleForm.phone || this.userRuleForm.phone1;
-      }else {
-          if (!this.userRuleForm.petName) {
-              this.$message.warning("请输入昵称");
-              return;
-          }
-          if (!this.userRuleForm.gender) {
-              this.$message.warning("请选择性别");
-              return;
-          }
-          if (!this.userRuleForm.birthday) {
-              this.$message.warning("请选择生日");
-              return;
-          }
-          if (this.userRuleForm.birthday.split("-")[0] == 'null' || this.userRuleForm.birthday.split("-")[1] == 'null' || this.userRuleForm.birthday.split("-")[2] == 'null') {
-              this.$message.warning("请补全生日");
-              return;
-          }
-          if (this.systemVersion != 'lan' && !this.userRuleForm.profession) {
-              this.$message.warning("请输入职业");
-              return;
-          }
+      } else {
+        if (!this.userRuleForm.petName) {
+          this.$message.warning("请输入昵称");
+          return;
+        }
+        if (!this.userRuleForm.gender) {
+          this.$message.warning("请选择性别");
+          return;
+        }
+        if (!this.userRuleForm.birthday) {
+          this.$message.warning("请选择生日");
+          return;
+        }
+        if (this.userRuleForm.birthday.split("-")[0] == 'null' || this.userRuleForm.birthday.split("-")[1] == 'null' || this.userRuleForm.birthday.split("-")[2] == 'null') {
+          this.$message.warning("请补全生日");
+          return;
+        }
+        if (this.systemVersion != 'lan' && !this.userRuleForm.profession) {
+          this.$message.warning("请输入职业");
+          return;
+        }
       }
       // let asd = {
       //   institutionNo: this.institutionNo,
@@ -644,55 +563,55 @@ export default {
       };
       // console.log("请求参数", params);
       this.$http.post("/user/update", params, (res) => {
-          if(res && res.code == 200){
-              this.getUserForm();
-          }else {
-              this.$message.error(res.msg);
-          }
+        if (res && res.code == 200) {
+          this.getUserForm();
+        } else {
+          this.$message.error(res.msg);
+        }
 
       });
     },
     getUserForm() {
       this.$http.get(
         "/user/getModelPhone?institutionNo=" +
-          this.institutionNo +
-          "&phone=" +
-          this.userBid +
-          "&roleType=" +
-          this.userType,
+        this.institutionNo +
+        "&phone=" +
+        this.userBid +
+        "&roleType=" +
+        this.userType,
         {},
         (res) => {
           // console.log("修改后的信息", res);
-            if(res && res.code == 200){
+          if (res && res.code == 200) {
 
-                if (res.data.modelPhone == "0" && this.systemVersion != "lan") {
-                    this.userDialogVisiblephone1 = true;
-                } else {
-                    this.userDialogVisible = false;
-                }
-                this.userDialogVisiblephone1 = false;
-
-                this.userRuleForm.phone1 = res.data.modelPhone;
-                this.userRuleForm.phone = res.data.modelPhone;
-                this.userRuleForm.petName = res.data.petName;
-                this.userRuleForm.gender = res.data.gender;
-                this.userRuleForm.birthday = res.data.birthday;
-                this.yearsModelPrants = res.data.birthday;
-                this.userRuleForm.profession = res.data.profession;
-                //用户昵称单独变量处理，防止个人中心修改未提交联动
-                this.nickname = res.data.petName;
-                //获取用户状态，如果为4强制弹窗要求用户补全信息
-                this.userStatus = res.data.userStatus;
-                if(this.userStatus == '4'){
-                    this.userDialogVisible = true;
-                }else {
-                    this.userDialogVisible = false;
-                }
-                // console.log("res登陆",res)
+            if (res.data.modelPhone == "0" && this.systemVersion != "lan") {
+              this.userDialogVisiblephone1 = true;
+            } else {
+              this.userDialogVisible = false;
+            }
+            this.userDialogVisiblephone1 = false;
 
-            }else {
-                this.$message.error(res.msg);
+            this.userRuleForm.phone1 = res.data.modelPhone;
+            this.userRuleForm.phone = res.data.modelPhone;
+            this.userRuleForm.petName = res.data.petName;
+            this.userRuleForm.gender = res.data.gender;
+            this.userRuleForm.birthday = res.data.birthday;
+            this.yearsModelPrants = res.data.birthday;
+            this.userRuleForm.profession = res.data.profession;
+            //用户昵称单独变量处理，防止个人中心修改未提交联动
+            this.nickname = res.data.petName;
+            //获取用户状态，如果为4强制弹窗要求用户补全信息
+            this.userStatus = res.data.userStatus;
+            if (this.userStatus == '4') {
+              this.userDialogVisible = true;
+            } else {
+              this.userDialogVisible = false;
             }
+            // console.log("res登陆",res)
+
+          } else {
+            this.$message.error(res.msg);
+          }
 
         }
       );
@@ -900,6 +819,7 @@ export default {
 .menu li:hover {
   opacity: 0.8;
 }
+
 .wraps {
   display: flex;
   flex-direction: row;
@@ -907,12 +827,14 @@ export default {
   justify-content: space-between;
   margin: 0 auto;
 }
+
 .menu li.active {
   background: #00b6c5;
 }
 
 .el-menu.el-menu--horizontal {
   border-bottom: 1px solid #e6e6e6 !important;
+  left: 0px !important;
 }
 
 .header .el-dropdown-link {
@@ -924,9 +846,11 @@ export default {
   justify-content: flex-end;
   align-items: center;
 }
+
 .header .el-icon-arrow-down {
   font-size: 16px;
 }
+
 .el-dropdown-link .drop-down-content {
   width: 120px;
   text-align: right;
@@ -1044,21 +968,46 @@ a {
   min-width: 100px;
 }
 
+/* .selectTab {
+  min-width: 100px;
+  position: absolute !important;
+  top: 0px !important;
+  left: 0px !important;
+}
+::v-deep .el-dropdown-menu {
+  min-width: 120px;
+  position: absolute !important;
+  top: 35px !important;
+  left: -45px !important;
+} */
+/* .el-dropdown-menu {
+  min-width: 120px;
+  position: absolute !important;
+  top: 35px !important;
+  left: -45px !important;
+} */
+
 .container {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  /* min-height: 100vh; */
+  width: 100%;
+  height: 100%;
 }
 
 .section {
-  flex: 1;
+  /* flex: 1; */
+  height: 90%;
 }
+
 .menu-list {
   position: relative;
 }
+
 .input-with-selects {
   width: 80%;
 }
+
 .menu-tag {
   position: absolute;
   top: 6px;
@@ -1072,9 +1021,11 @@ a {
   border-radius: 13px;
   font-size: 12px;
 }
+
 .search_box_active {
   opacity: 0.01;
 }
+
 /* 适应pad样式 */
 @media screen and (max-width: 1024px) {
   .search_box {
@@ -1087,5 +1038,4 @@ a {
   color: #ffffff;
   cursor: pointer;
 }
-
 </style>