大屏适配优化心灵照相机3

package.json

@@ -38,6 +38,7 @@
     "vue": "^2.6.11",
     "vue-count-to": "^1.0.13",
     "vue-router": "^3.0.7",
+    "vue2-scale-box": "^0.1.7",
     "vuex": "^2.0.0",
     "vuex-persist": "^3.1.3",
     "vuex-persistedstate": "^4.1.0"
@@ -52,6 +53,7 @@
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "node-sass": "^4.14.1",
+    "postcss-px-to-viewport": "^1.1.1",
     "postcss-pxtorem": "^5.1.1",
     "sass-loader": "^7.3.1",
     "terser-webpack-plugin": "^4.2.3",

public/index.html

@@ -89,5 +89,25 @@
   <div id="app"></div>
   <!-- built files will be auto injected -->
 </body>
-
+<style scoped>
+  html{
+    width: 100%;
+    height: 100%;
+    /* position: relative !important; */
+  } 
+  body {
+  padding: 0px;
+  margin: 0px;
+  /* height: 100%;
+  width: 100%; */
+  /* height: 100vh;
+  width: 100%; */
+  /* position: relative !important; */
+  /* width: 100%;
+  height: 100%;
+  margin: 0; */
+  /* min-width: 1280px; */
+  /* overflow: hidden; */
+}
+</style>
 </html>

src/App.vue

@@ -3,6 +3,9 @@
     width: width + 'px',
     height: height + 'px',
   }"> -->
+  <!-- <div> -->
+  <!-- <scale-box :width="2220" :height="1000" bgc="transparent" :delay="100"> -->
+  <!-- <router-view /> -->
   <div id="app">
     <transition name="fade">
       <keep-alive>
@@ -13,23 +16,34 @@
       <router-view v-if="!$route.meta.keepAlive" />
     </transition>
   </div>
+  <!-- </scale-box> -->
+
+  <!-- </div> -->
+
 </template>
 <script>
 // import resizeMixin from '@/utils/resizeMixin';
 import autofit from 'autofit.js'
+
+import ScaleBox from "vue2-scale-box";
 export default {
+  components: { ScaleBox },
   created() {
     this.chooseCss();
   },
 
   mounted() {
-    // autofit.init({
-    //   // designHeight: 1080,
-    //   // designWidth: 988,
-    //   renderDom: "#app",
-    //   resize: true,
-    //   // ignore: [".el-select"],
-    // })
+    // this.setScreenCompatibility()
+    autofit.init({
+      designHeight: 1080 * 2,
+      designWidth: 1920 * 2,
+      renderDom: "#app",
+      resize: true,
+      // ignore: [".el-select"],
+    })
+
+    // const dropdownMenu = this.$refs['elDropdown'].$children[0] // 找到dropdown下面的dropdownMenu
+    // dropdownMenu.$data.currentPlacement = 'start'
 
   },
   methods: {
@@ -39,16 +53,48 @@ export default {
       let url = pad === true ? "/pad.css" : "/pc.css";
       import(`./style${url}`);
     },
+
+    // /**
+    //  * 设置屏幕兼容性
+    //  */
+    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';
+    }
   },
 };
 </script>
 <style>
-body {
-  /* width: 100%;
-  height: 100%;
-  margin: 0; */
-  /* min-width: 1280px; */
-  overflow: hidden;
+/* body{
+  position: relative;
+} */
+.el-select-dropdown .el-popper {
+  top: 0px !important;
+  left: 0px !important;
 }
 
 #app {
@@ -59,8 +105,10 @@ body {
   -moz-osx-font-smoothing: grayscale;
   /* text-align: center; */
   color: #2c3e50;
+  /* width: calc(100%-50px); */
   width: 100%;
-  height: calc(100%);
+  height: 100%;
+  /* height: calc(100%-50px); */
   /* height: 1080px; */
   /* height: 100vh; */
   /* width: 100%;
@@ -87,50 +135,11 @@ body {
     left: 450px;
     transform-origin: center top;
     z-index: 2018; */
-.el-select-dropdown .el-popper {
+/* .el-select-dropdown .el-popper {
   position: absolute;
   top: 150px !important;
   left: 220px !important;
   transform-origin: center top;
   z-index: 2018;
-}
-
-#nav {
-  padding: 30px;
-}
-
-#nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-#nav a.router-link-exact-active {
-  color: #42b983;
-}
-
-.headerRow {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.headerRowEnd {
-  justify-content: flex-end;
-}
-
-.headerRowLeftRight {
-  justify-content: space-between;
-}
-
-.mrl {
-  margin-left: 10px;
-}
-
-.mrr {
-  margin-right: 10px;
-}
-
-.pointers {
-  cursor: pointer;
-}
+} */
 </style>

src/components/DateSelect.vue

@@ -3,17 +3,17 @@
   <div id="myDate">
     <!-- :popper-append-to-body="false" -->
     <!-- <el-button icon="el-icon-caret-left" @click="dateChange(4)"></el-button> -->
-    <el-select :popper-append-to-body="true" v-model="yearsModel" @change="dateChange(1)" placeholder="请选择"
+    <el-select :popper-append-to-body="false" 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 :popper-append-to-body="true" v-model="monthsModel" @change="dateChange(2)" placeholder="请选择"
+    <el-select :popper-append-to-body="false" 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 :popper-append-to-body="true" v-model="daysModel" @change="dateChange(3)" placeholder="请选择"
+    <el-select :popper-append-to-body="false" 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>
@@ -349,14 +349,24 @@ export default {
   },
 };
 </script>
-<style scoped="scoped">
-#myDate {
-  display: flex;
-  flex-direction: row;
-  justify-content: start;
+<style lang="scss" scoped="scoped">
+::v-deep .el-select-dropdown {
+  //rgba(87,133,87,0.8)
+  // background: rgba(87, 133, 87, 0.78);
+  //margin: 0px;
+  // border: 0px;
+  //border-radius: 0px;
+  position: absolute !important;
+  left: 295px !important;
+  top: 550px !important;
 }
 
-#myDate /deep/ .el-select {
-  margin-left: 5px;
-}
-</style>
+// #myDate {
+//   display: flex;
+//   flex-direction: row;
+//   justify-content: start;
+// }
+
+// #myDate /deep/ .el-select {
+//   margin-left: 5px;
+// }</style>

src/components/echarts/IndexBar.vue

@@ -41,7 +41,8 @@ export default {
     }
   },
   mounted() {
-    this.drawLinesP()
+    // this.drawLinesP()
+    window.addEventListener('resize', this.drawLinesP());
     window.addEventListener("resize", function () {
        if (time !== null) {
         clearTimeout(time)

src/components/echarts/IndexBarA.vue

@@ -35,15 +35,16 @@ export default {
   },
   watch: {
     yData(newVal) {
-      if(newVal && newVal.length > 0) {
+      if (newVal && newVal.length > 0) {
         this.drawLinesP()
       }
     }
   },
   mounted() {
     this.drawLinesP()
+    window.addEventListener('resize', this.drawLinesP());
     window.addEventListener("resize", function () {
-       if (time !== null) {
+      if (time !== null) {
         clearTimeout(time)
       }
       time = setTimeout(() => {
@@ -120,9 +121,9 @@ export default {
             style: {
               ...api.style(),
               fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {offset: 0, color: 'rgba(0, 255, 166, 1)'},
-                {offset: 0.86, color: 'rgba(0, 255, 166, 0)'},
-                {offset: 1, color: 'rgba(0, 255, 166, 0)'},
+                { offset: 0, color: 'rgba(0, 255, 166, 1)' },
+                { offset: 0.86, color: 'rgba(0, 255, 166, 0)' },
+                { offset: 1, color: 'rgba(0, 255, 166, 0)' },
               ]), // 覆盖基础样式
             }
           },
@@ -136,9 +137,9 @@ export default {
             style: {
               ...api.style(),
               fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                {offset: 0, color: 'rgba(0, 255, 166, 1)'},
-                {offset: 0.86, color: 'rgba(0, 255, 166, 0)'},
-                {offset: 1, color: 'rgba(0, 255, 166, 0)'},
+                { offset: 0, color: 'rgba(0, 255, 166, 1)' },
+                { offset: 0.86, color: 'rgba(0, 255, 166, 0)' },
+                { offset: 1, color: 'rgba(0, 255, 166, 0)' },
               ]), // 覆盖基础样式
             },
           },
@@ -152,8 +153,8 @@ export default {
             style: {
               ...api.style(),
               fill: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                {offset: 0, color: 'rgba(72,251,193,0.8)'},
-                {offset: 1, color: 'rgba(0, 255, 166, 0)'},
+                { offset: 0, color: 'rgba(72,251,193,0.8)' },
+                { offset: 1, color: 'rgba(0, 255, 166, 0)' },
               ]), // 覆盖基础样式
             },
           }
@@ -181,7 +182,7 @@ export default {
       });
       const rightShape = echarts.graphic.extendShape({
         buildPath(ctx, shape) {
-          const { topBasicsYAxis, bottomYAxis, basicsXAxis} = shape;
+          const { topBasicsYAxis, bottomYAxis, basicsXAxis } = shape;
           // 侧面宽度
           const WIDTH = 16;
           // 斜角高度
@@ -224,7 +225,7 @@ export default {
 
 <style lang="scss" scoped>
 .index-bar {
-  width: 100%;
-  height: 175px;
+  width: 706px;
+  height: 253px;
 }
 </style>

src/components/echarts/IndexBarS.vue

@@ -47,6 +47,7 @@ export default {
     console.log(this.riskLevelDataS);
 
     this.drawLinesP()
+    window.addEventListener('resize', this.drawLinesP());
     window.addEventListener("resize", function () {
       if (time !== null) {
         clearTimeout(time)
@@ -399,5 +400,6 @@ export default {
 .index-bar {
   width: 100%;
   height: 245px;
+  margin-top: 20px;
 }
 </style>

src/components/echarts/IndexSmallPieS.vue

@@ -24,6 +24,7 @@ export default {
   },
   mounted() {
     this.drawLineTs()
+    window.addEventListener('resize', this.drawLineTs());
   },
   methods: {
     drawLineTs() {

src/components/echarts/IndexSmoothLine.vue

@@ -147,8 +147,9 @@ export default {
 
 <style lang="scss" scoped>
 .smooth-line {
-  width: 100%;
-  height: calc(100% - 28px);
+  width: 600px;
+  // width: 600px;
+  height: 260px;
   margin-top: 4px;
 }
 </style>

src/components/echarts/IndexSmoothLineS.vue

@@ -52,6 +52,7 @@ export default {
   },
   mounted() {
     this.drawLinesP()
+    window.addEventListener('resize', this.drawLinesP());
     window.addEventListener("resize", function () {
       if (time !== null) {
         clearTimeout(time)
@@ -293,8 +294,8 @@ export default {
 
 <style lang="scss" scoped>
 .smooth-line {
-  width: 100%;
-  height: 280px;
-  // margin-top: 4px;
+  width: 466px;
+  height: 360px;
+  margin-top: 24px;
 }
 </style>

src/components/login/Login.vue

@@ -149,7 +149,7 @@
                     style="margin-bottom: 2rem; margin-top: 20px">
                     注册
                   </el-button>
-                  <p style="font-size: 10px; cursor: pointer; font-color: red" @click="registAndLoginControl()">
+                  <p style="font-size: 10px; cursor: pointer; color: red" @click="registAndLoginControl()">
                     已经有账号去登录
                   </p>
                 </div>
@@ -407,7 +407,7 @@ export default {
   },
   created() { },
   mounted() {
-    autofit.off()
+    // autofit.off()
   },
   methods: {
     ...mapActions({
@@ -634,7 +634,18 @@ export default {
 };
 </script>
 
-<style scoped="scoped">
+<style lang="scss" scoped="scoped">
+::v-deep .el-select-dropdown {
+  //rgba(87,133,87,0.8)
+  // background: rgba(87, 133, 87, 0.78);
+  //margin: 0px;
+  // border: 0px;
+  //border-radius: 0px;
+  position: absolute !important;
+  left: 8px !important;
+  top: 38px !important;
+}
+
 .bg {
   width: 100%;
   /* display: flex; */

src/components/manage/ContainerSys.vue

@@ -13,13 +13,24 @@
         <!--</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-dropdown class="el-menu-demo" mode="horizontal" background-color="#00CDDD"
+          text-color="#fff" active-text-color="#fff"  @command="commandHandle">
+          <template slot="title" :size="size" :src="circleUrl">
+                {{ Name }}
+              </template>
+<el-dropdown-menu class="selectTab" :popper-append-to-body="false" :append-to-body="false" slot="dropdown">
+  <el-dropdown-item @click="changePwd()">修改密码
+  </el-dropdown-item>
+  <el-dropdown-item @click="escape()">退出</el-dropdown-item>
+</el-dropdown-menu>
+</el-dropdown> -->
+          <el-menu :popper-append-to-body="false" :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>
-              <el-menu-item index="2-1" @click="escape()">退出</el-menu-item>
+              <el-menu-item style="margin-top: 10px;" index="2-1" @click="escape()">退出</el-menu-item>
               <el-menu-item index="2-1" @click="changePwd()">修改密码</el-menu-item>
             </el-submenu>
           </el-menu>
@@ -106,7 +117,7 @@
       </el-container>
     </el-container>
     <!-- <el-footer style='padding-left:0;padding-right:0;height: 0px;'> -->
-      <Footer />
+    <Footer />
     <!-- </el-footer> -->
 
     <!---lxh-修改密码-->
@@ -609,6 +620,13 @@ export default {
 };
 </script>
 <style lang="scss" scoped>
+::v-deep .el-dropdown-menu {
+  min-width: 120px;
+  position: absolute !important;
+  top: 12px !important;
+  left: 0px !important;
+}
+
 ::v-deep .el-container {
 
   &.main-container {
@@ -775,9 +793,9 @@ export default {
   height: 100%;
 
   .rightExit {
-  //   position: absolute !important;
-  //   top: 0px !important;
-  //   left: 0px !important;
+    position: relative !important;
+    top: 0px !important;
+    left: 0px !important;
   }
 
 }
@@ -790,6 +808,7 @@ export default {
 /deep/.el-menu--horizontal>.el-submenu .el-submenu__icon-arrow {
   color: #fff;
 }
+
 // .el-menu--horizontal {
 //     border-right: none;
 //     left: 0px !important;

src/components/manage/main/AdminHome.vue

@@ -207,13 +207,13 @@ export default {
   async mounted() {
     let tempDom = document.querySelector('#bottomTableOutline')
     this.$nextTick(() => {
-      autofit.init({
-        // designHeight: 1080,
-        // designWidth: 988,
-        renderDom: ".app-container",
-        resize: true,
-        // ignore: [".el-select"],
-      })
+      // autofit.init({
+      //   // designHeight: 1080,
+      //   // designWidth: 988,
+      //   renderDom: ".app-container",
+      //   resize: true,
+      //   // ignore: [".el-select"],
+      // })
       this.tableHeight = tempDom.offsetHeight - 62
     })
 
@@ -381,7 +381,7 @@ export default {
   },
 destroyed(){
   console.log('销毁');
-  autofit.off()
+  // autofit.off()
 }
 }
 </script>
@@ -403,7 +403,7 @@ destroyed(){
   .top-header {
     width: 100%;
     height: 56px;
-    background-image: url('/static/assets/index/bg-header.png');
+    background-image: url('/static/assets/index/bg-header2.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-position: center;

src/components/manage/main/AdminHomeS.vue

@@ -78,11 +78,11 @@
                 <el-table-column align="center" prop="count" label="测试人次">
                 </el-table-column>
               </el-table>
-              <el-pagination :current-page.sync="currentPage1" :page-size="10"
+              <!-- <el-pagination :current-page.sync="currentPage1" :page-size="10"
                 @current-change="handleCurrentChange(currentPage1, '1')"
                 style="position: absolute;left: 48%;transform: translate(-50%, -50%);margin-top: 2vh;" background small
                 layout="prev, pager, next" :total="total1">
-              </el-pagination>
+              </el-pagination> -->
             </div>
           </div>
           <div class="EvaluationR32" id="bottomTableOutline">
@@ -99,11 +99,11 @@
                   </template>
                 </el-table-column>
               </el-table>
-              <el-pagination :current-page.sync="currentPage2" :page-size="10"
+              <!-- <el-pagination :current-page.sync="currentPage2" :page-size="10"
                 @current-change="handleCurrentChange(currentPage2, '2')"
                 style="position: absolute;left: 82%;transform: translate(-50%, -50%);margin-top: 2vh;" background small
                 layout="prev, pager, next" :total="total2">
-              </el-pagination>
+              </el-pagination> -->
             </div>
           </div>
         </div>
@@ -194,16 +194,20 @@ export default {
 
     // this.setScale();
     // window.addEventListener("resize", this.debounce(this.setScale));
+    // this.setScreenCompatibility()
     let tempDom = document.querySelector('#bottomTableOutline')
     this.$nextTick(() => {
-      console.log(tempDom.offsetHeight);
-      autofit.init({
-        // designHeight: 1080,
-        // designWidth: 1920,
-        renderDom: "#homeapp",
-        resize: true
-      })
-      this.tableHeight = tempDom.offsetHeight
+      console.log(tempDom.offsetHeight, '高度');
+      // autofit.init({
+      //   // designHeight: 1080,
+      //   // designWidth: 1920,
+      //   renderDom: "#homeapp",
+      //   resize: true
+      // })
+      // console.log();
+
+      // this.tableHeight = tempDom.offsetHeight
+      this.tableHeight = 250
       this.$forceUpdate()
     })
 
@@ -264,9 +268,10 @@ export default {
   },
   destroyed() {
     console.log('组件销毁');
-    autofit.off()
+    // autofit.off()
   },
   methods: {
+
     //     debounce(fn, delay) {
     //       const delays = delay || 500;
     //       let timer;
@@ -283,52 +288,52 @@ export default {
     //       };
     //     },
 
-    //     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';
-    //     },
+    // 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, '查询');
@@ -520,6 +525,8 @@ export default {
   // height: 894px;
   width: 100%;
   height: 100%;
+  // width: 100vw;
+  // height: 100vh;
   overflow: hidden;
   background-image: url('/static/assets/index/bg-pic1.png');
   background-size: 100% 100%;
@@ -530,7 +537,7 @@ export default {
   .top-header {
     width: 100%;
     height: 56px;
-    background-image: url('/static/assets/index/bg-header1.png');
+    background-image: url('/static/assets/index/bg-header2.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
     background-position: center;

src/components/manage/main/UserGroupManagement.vue

@@ -54,7 +54,8 @@
     </el-table>
     <!--记录展示end-->
 
-    <el-dialog :title="title" :visible.sync="dialogVisible" width="680px" :before-close="handleClose">
+    <el-dialog :popper-append-to-body="false" :title="title" :visible.sync="dialogVisible" width="680px"
+      :before-close="handleClose">
       <div v-if="fals === 'add'">
         <el-row>
           <!-- <span style="margin-left: 15px;">请选择角色：</span>
@@ -64,8 +65,10 @@
           </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-select @dropdownVisibleChange="dropdownVisibleChange" :popper-append-to-body="false"
+                style="width: 260px;position: absolute;" v-model="form.groupUser" multiple placeholder="请选择">
+                <el-option style="position: relative;" v-for="item in optionsgroupUserList" :key="item.id"
+                  :label="item.petName" :value="item.id">
                 </el-option>
               </el-select>
             </el-form-item>
@@ -82,13 +85,19 @@
       <div v-else>
         <el-form ref="formName" :rules="rules" :model="form" label-width="220px">
           <el-form-item label="请选择角色：" prop="groupUser">
-            <el-select style="width: 260px;" v-model="form.groupUser" multiple placeholder="请选择">
+            <el-select @dropdownVisibleChange="dropdownVisibleChange" :popper-append-to-body="false"
+              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-select :popper-append-to-body="false" 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-item label="新的组名：">
-            <el-select style="width: 260px;" v-model="form.name" placeholder="请选择">
+            <el-select @dropdownVisibleChange="dropdownVisibleChange" :popper-append-to-body="false"
+              style="width: 260px;" v-model="form.name" placeholder="请选择">
               <el-option v-for="item in gradeOptions" :key="item.id" :label="item" :value="item">
               </el-option>
             </el-select>
@@ -112,6 +121,7 @@
   </div>
 </template>
 <script>
+import { dropdownVisibleChangeMixin } from '../../../lib/unit'
 export default {
   name: "UserGroupManagement",
   data() {
@@ -157,6 +167,14 @@ export default {
     this.getDatas()
   },
   methods: {
+    dropdownVisibleChange(open) {
+      // dropdownVisibleChangeMixin(open)
+      console.log(open, 'open172');
+
+    },
+    // const devicewidth = document.documentElement.clientWidth;
+    //         const scale = devicewidth / 1920; // 分母——设计稿的尺寸
+    //         setScale(scale)
     // 打开添加年级模态框
     dialogVisibleopen(fal, data) {
       this.fals = fal
@@ -449,6 +467,24 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+::v-deep .el-select,
+::v-deep .el-input,
+::v-deep .el-input__inner {
+  // border-radius: 10px;
+  height: 39.8px !important;
+}
+
+::v-deep .el-select-dropdown {
+  //rgba(87,133,87,0.8)
+  // background: rgba(87, 133, 87, 0.78);
+  //margin: 0px;
+  // border: 0px;
+  //border-radius: 0px;
+  position: absolute !important;
+  left: 8px !important;
+  top: 38px !important;
+}
+
 ::v-deep .el-dialog {
   .el-checkbox {
     margin: 18px 16px;

src/components/manage/main/UserManage.vue

@@ -6,12 +6,14 @@
           <el-button slot="append" icon="el-icon-search" @click="onSubmit"></el-button>
         </el-input>
 
-        <el-select v-model="value" @change="onSubmit" placeholder="用户状态" style="width: 120px" class="mrl">
+        <el-select popper-class="popper-select" :popper-append-to-body="false" v-model="value" @change="onSubmit"
+          placeholder="用户状态" style="width: 120px" class="mrl">
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
           </el-option>
         </el-select>
 
-        <el-select v-model="groupValue" @change="onSubmit" placeholder="年级选择" style="width: 120px" class="mrl">
+        <el-select popper-class="popper-select" :popper-append-to-body="false" v-model="groupValue" @change="onSubmit"
+          placeholder="年级选择" style="width: 120px" class="mrl">
           <el-option v-for="item in groupOptions" :key="item.id" :label="item.groupName" :value="item.id">
           </el-option>
         </el-select>
@@ -159,7 +161,7 @@
       <el-upload class="txt-center" :action="uploadUrl" multiple :before-upload="uploadVa" :limit="3"
         :show-file-list="false" :on-success="uploadSuccess" :on-error="uploadFail" :file-list="fileList" :data="{
           institutionNo: institutionNo,
-          userId:createUserId,
+          userId: createUserId,
         }">
         <el-button size="small" type="primary">点击上传</el-button>
         <div slot="tip" class="el-upload__tip">请上传.xls,.xlsx类型的文件</div>
@@ -608,7 +610,7 @@ export default {
   },
 };
 </script>
-<style>
+<!-- <style>
 .bg-purple-dark {
   background: white;
 }
@@ -622,4 +624,79 @@ export default {
   /*width: 80%;*/
   margin-top: 20px;
 }
-</style>
+
+::v-deep .popper-select {
+  position: absolute !important;
+  top: 0px !important;
+  left: 0px !important;
+  background-color:#635282 !important;
+}
+
+</style> -->
+
+<style lang="scss" scoped>
+//修改的是el-input的样式
+
+//一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
+
+//另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
+
+::v-deep .el-select,
+::v-deep .el-input,
+::v-deep .el-input__inner {
+  // border-radius: 10px;
+  color: #fff;
+  //border: 1px solid green;
+  // border-radius: 0px;
+  // border-color: green;
+  text-align: center;
+  left: 0px !important;
+  top: 0px !important;
+}
+
+//el-input聚焦的时候 外层的border会有一个样式
+// ::v-deep .el-select .el-input.is-focus .el-input__inner {
+//   //border:0px;
+//   border: 1px solid green;
+// }
+
+//修改的是el-input上下的小图标的颜色
+
+// ::v-deep .el-select .el-input .el-select__caret {
+//   color: green;
+
+// }
+
+//修改总体选项的样式 最外层
+
+::v-deep .el-select-dropdown {
+  //rgba(87,133,87,0.8)
+  // background: rgba(87, 133, 87, 0.78);
+  //margin: 0px;
+  // border: 0px;
+  //border-radius: 0px;
+  left: 8px !important;
+  top: 38px !important;
+}
+
+//修改单个的选项的样式
+
+// ::v-deep .el-select-dropdown__item {
+//   background-color: transparent;
+//   color: #fff;
+// }
+
+//item选项的hover样式
+
+// ::v-deep .el-select-dropdown__item.hover,
+
+// ::v-deep .el-select-dropdown__item:hover {
+//   color: rgb(21, 94, 38);
+//   background: rgba(87, 133, 87, 0.3);
+// }
+
+// //修改的是下拉框选项内容上方的尖角
+// ::v-deep .el-popper .popper__arrow,
+// .el-popper .popper__arrow::after {
+//   display: none;
+// }</style>

src/lib/rem.js

@@ -1,17 +1,70 @@
 // 设置 rem 函数
 function setRem() {
-    // 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16
-    const screenWidth = 1920
-    const scale = screenWidth / 16
-    const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
-    // 得到html的Dom元素
-    const htmlDom = document.getElementsByTagName('html')[0]
-    // 设置根元素字体大小
-    htmlDom.style.fontSize = htmlWidth / scale + 'px'
+  console.log("生效了");
+  // 1920 默认大小16px; 1920px = 120rem ;每个元素px基础上/16
+  // const screenWidth = 1920
+  // const scale = screenWidth / 16
+  // const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
+  // // 得到html的Dom元素
+  // const htmlDom = document.getElementsByTagName('html')[0]
+  // // 设置根元素字体大小
+  // htmlDom.style.fontSize = htmlWidth / scale + 'px'
+  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;
   }
-  // 初始化
-  setRem()
-  // 改变窗口大小时重新设置 rem
-  window.onresize = function() {
-    setRem()
-  }
+  // 设置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";
+}
+// 初始化
+setRem();
+// 改变窗口大小时重新设置 rem
+window.onresize = function () {
+  setRem();
+};
+
+// 尝试二
+// // 配置基本大小
+// let baseSize = 19;
+
+// // 设置 rem 函数
+// function setRem() {
+//   //当前页面宽度相对于1920px屏幕宽的缩放比例，可根据自己需要修改。
+//   let scale = document.documentElement.clientWidth / 1920;
+//   //设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
+//   document.documentElement.style.fontSize =
+//     baseSize * Math.min(scale, 2) + "px";
+// }
+// setRem(); //初始化
+
+// // 适配 - 重置函数
+// function resetRem(num) {
+//   if (num) baseSize = Number(num);
+//   setRem();
+// }
+// window.resetRem = resetRem; // 全局可调用(其他方式也可)
+
+// // 改变窗口大小时重置 rem
+// window.onresize = function () {
+//   setRem();
+// };

src/lib/unit.js

@@ -0,0 +1,50 @@
+/**
+* 下拉框可见性变化时触发的方法
+*
+* @param open 是否打开下拉框
+* @returns 无返回值
+*/
+export function dropdownVisibleChangeMixin(open) {
+    const screenWidth = window.screen.width * window.devicePixelRatio;
+    const validWidths = [1024, 1280, 1360, 1366, 1440, 1600];
+    if (open) {
+        setTimeout(() => {
+            if (validWidths.includes(screenWidth)) {
+                observeDropdown();
+            }
+        }, 100);
+    }
+}
+function observeDropdown() {
+    const elements = document.querySelectorAll(".el-select-dropdown");
+    // 筛选出符合多个条件的元素
+    const filteredElements = Array.from(elements).filter(element => {
+        const style = window.getComputedStyle(element);
+        return style.display !== 'none'
+    });
+    if (filteredElements.length > 0) {
+        const dropdown = filteredElements[0];
+        const observer = new IntersectionObserver(
+            entries => {
+                entries.forEach(entry => {
+                    const { isIntersecting, boundingClientRect } = entry;//
+                    if (isIntersecting) {
+                        const distanceToBottom = boundingClientRect.bottom - window.innerHeight;
+                        if (distanceToBottom > 650) {
+                            updateDropdownStyle(dropdown);
+                        }
+                    }
+                });
+            },
+            {
+                root: null, // Use viewport as the root
+                threshold: [0],
+            }
+        );
+        observer.observe(dropdown);
+    }
+}
+function updateDropdownStyle(dropdown) {
+    // 在这里修改下拉菜单的样式
+    dropdown.style.top = "-259px"; // 示例样式
+}

src/views/Welcome.vue

@@ -976,6 +976,13 @@ a {
   min-width: 100px;
 }
 
+::v-deep .el-dropdown-menu {
+  min-width: 120px;
+  position: absolute !important;
+  top: 12px !important;
+  left: 0px !important;
+}
+
 /* .selectTab {
   min-width: 100px;
   position: absolute !important;

vue.config.js

@@ -60,6 +60,69 @@ module.exports = {
                     },
                 }),
             ]
-        }
+        },
+        // css: {
+        //     loaderOptions: {
+        //         postcss: {
+        //             plugins: [
+        //                 require('postcss-px-to-viewport')({
+        //                     unitToConvert: 'px',   // 需要转换的单位
+        //                     viewportWidth: 1920,    // 视口宽度，等同于设计稿宽度
+        //                     unitPrecision: 5,      // 精确到小数点后几位
+        //                     /**
+        //                      * 将会被转换的css属性列表，
+        //                      * 设置为 * 表示全部，如：['*']
+        //                      * 在属性的前面或后面设置*，如：['*position*']，*position* 表示所有包含 position 的属性，如 background-position-y
+        //                      * 设置为 !xx 表示不匹配xx的那些属性，如：['!letter-spacing'] 表示除了letter-spacing 属性之外的其他属性
+        //                      * 还可以同时使用 ! 和 * ，如['!font*'] 表示除了font-size、 font-weight ...这些之外属性之外的其他属性名头部是‘font’的属性
+        //                      * */
+        //                     propList: ['*'],
+        //                     viewportUnit: 'vw',    // 需要转换成为的单位
+        //                     fontViewportUnit: 'vw',// 需要转换称为的字体单位
+        //                     /**
+        //                      * 需要忽略的选择器，即这些选择器对应的属性值不做单位转换
+        //                      * 设置为字符串，转换器在做转换时会忽略那些选择器中包含该字符串的选择器，如：['body']会匹配到 .body-class，也就意味着.body-class对应的样式设置不会被转换
+        //                      * 设置为正则表达式，在做转换前会先校验选择器是否匹配该正则，如果匹配，则不进行转换，如[/^body$/]会匹配到 body 但是不会匹配到 .body
+        //                      */
+        //                     selectorBlackList: [],
+        //                     minPixelValue: 1,      // 最小的像素单位值
+        //                     mediaQuery: false,     // 是否转换媒体查询中设置的属性值
+        //                     replace: true,         // 替换包含vw的规则，而不是添加回退
+        //                     /**
+        //                      * 忽略一些文件，如'node_modules'
+        //                      * 设置为正则表达式，将会忽略匹配该正则的所有文件
+        //                      * 如果设置为数组，那么该数组内的元素都必须是正则表达式
+        //                      */
+        //                     exclude: [],
+        //                     landscape: false,      // 是否自动加入 @media (orientation: landscape)，其中的属性值是通过横屏宽度来转换的
+        //                     landscapeUnit: 'vw',   // 横屏单位
+        //                     landscapeWidth: 1334   // 横屏宽度
+        //                 })
+        //             ]
+        //         }
+        //     }
+        // }
     }
 }
+// // 引入等比适配插件
+// const px2rem = require('postcss-px2rem')
+ 
+// // 配置基本大小
+// const postcss = px2rem({
+//   // 基准大小 baseSize，需要和rem.js中相同
+//   remUnit: 16
+// })
+ 
+// // 使用等比适配插件
+// module.exports = {
+//   lintOnSave: true,
+//   css: {
+//     loaderOptions: {
+//       postcss: {
+//         plugins: [
+//           postcss
+//         ]
+//       }
+//     }
+//   }
+// }