login适配

package.json

@@ -25,7 +25,6 @@
       "git add"
     ]
   },
-  
   "dependencies": {
     "@riophae/vue-treeselect": "^0.4.0",
     "axios": "^0.21.1",
@@ -47,6 +46,8 @@
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
+    "postcss-px2rem": "^0.3.0",
+    "px2rem-loader": "^0.1.9",
     "qs": "^6.10.1",
     "screenfull": "4.2.0",
     "sortablejs": "1.8.4",

src/main.js

@@ -30,6 +30,7 @@ import router from './router/routers'
 import './assets/icons' // icon
 import './router/index' // permission control
 import 'echarts-gl'
+import './rem'
 
 Vue.use(checkPer)
 Vue.use(VueHighlightJS)

src/rem.js

@@ -0,0 +1,16 @@
+// rem等比适配配置文件
+// 基准大小
+const baseSize = 16
+// 设置 rem 函数
+function setRem() {
+  // 当前页面屏幕分辨率相对于 1440宽的缩放比例，可根据自己需要修改
+  const scale = document.documentElement.clientWidth / 1440
+  // 设置页面根节点字体大小（“Math.min(scale, 3)” 指最高放大比例为3，可根据实际业务需求调整）
+  document.documentElement.style.fontSize = `${baseSize * Math.min(scale, 3)}px`
+}
+// 初始化
+setRem()
+// 改变窗口大小时重新设置 rem
+window.onresize = () => {
+  setRem()
+}

src/views/login.vue

@@ -63,7 +63,6 @@
         <el-button
           :loading="loading"
           size="medium"
-          type="primary"
           style="width: 100%"
           @click.native.prevent="handleLogin"
         >
@@ -230,56 +229,67 @@ export default {
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 100%;
+  // height: 100%;
+  width: 1440px;
+  height: 810px;
+  position: relative;
   background-size: cover;
 }
 .title {
-  width: 204px;
-  height: 25px;
-  font-size: 19px;
+  width: 245px;
+  height: 30px;
+  font-size: 23px;
   font-family: Microsoft YaHei-Regular, Microsoft YaHei;
   font-weight: 400;
   color: #1e2864;
   line-height: 0px;
-  margin-top: 65px;
-  margin-left: 54px;
+  margin-top: 78px;
+  margin-left: 65px;
   // letter-spacing: 63px;
   -webkit-background-clip: text;
   // -webkit-text-fill-color: transparent;
 }
 
 .login-form {
-  width: 313px;
-  height: 375px;
+  width: 375px;
+  height: 450px;
   background: #ffffff;
   box-shadow: 0px 0px 10px 1px rgba(83, 83, 83, 0.16);
-  position: fixed;
-  left: 774px;
-  top: 150px;
   border-radius: 6px 6px 6px 6px;
   opacity: 1;
+  position: absolute;
+  left: 808px;
+  top: 180px;
   .el-form-item {
-    width: 263px !important;
-    height: 31px;
+    width: 315px !important;
+    height: 38px;
     background: #ffffff;
-    border-radius: 4px 4px 4px 4px;
+    border-radius: 5px 5px 5px 5px;
     opacity: 1;
-    margin-left: 25px;
+    margin-left: 30px;
+    .el-form-item__content{
+      .el-input{
+        input{
+          height: 38px;
+        }
+      }
+    }
   }
   .input-icon {
-    height: 32px;
     width: 14px;
     margin-left: 2px;
     line-height: 32px;
   }
   .el-button {
-    box-sizing: border-box;
-    width: 263px !important;
-    height: 33px;
+    width: 315px !important;
+    height: 39px;
     background: #1e2864;
-    border-radius: 3px 3px 3px 3px;
-    margin-top:19px;
-    margin-bottom: 65px;
+    border-radius: 4px 4px 4px 4px;
+    margin-top:22px;
+    margin-bottom: 78px;
+    color: #ffffff;
+    font-size: 15px;
+    border:none;
     opacity: 1;
   }
 }
@@ -289,13 +299,16 @@ export default {
   color: #bfbfbf;
 }
 .login-code {
-  width: 33%;
+  width: 83px;
+  height: 27px;
   display: inline-block;
   height: 38px;
   float: right;
   img {
+    width: 100%;
+    height: 100% !important;
     cursor: pointer;
-    vertical-align: middle;
+    // vertical-align: middle;
   }
 }
 </style>

vue.config.js

@@ -1,16 +1,29 @@
 'use strict'
 const path = require('path')
 const defaultSettings = require('./src/settings.js')
-
+// 引入等比适配插件
+const px2rem = require('postcss-px2rem');
+// 配置基本大小
+const postcss = px2rem({
+  // 基准大小 baseSize，需要和rem.js中相同
+  remUnit: 16,
+});
 function resolve(dir) {
   return path.join(__dirname, dir)
 }
-
 const name = defaultSettings.title // 网址标题
 const port = 8013 // 端口配置
-
 // All configuration item explanations can be find in https://cli.vuejs.org/config/
 module.exports = {
+  css : {
+    loaderOptions : {
+      postcss: {
+        plugins: [
+          postcss,
+        ],
+      },
+    }
+  },
   // hash 模式下可使用
   // publicPath: process.env.NODE_ENV === 'development' ? '/' : './',
   publicPath: '/',