diff --git a/package.json b/package.json index fa3120d..8162831 100644 --- a/package.json +++ b/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", diff --git a/src/main.js b/src/main.js index f4c6290..1db7832 100644 --- a/src/main.js +++ b/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) diff --git a/src/rem.js b/src/rem.js new file mode 100644 index 0000000..50b1e8b --- /dev/null +++ b/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() +} diff --git a/src/views/login.vue b/src/views/login.vue index 35970aa..9e392ac 100644 --- a/src/views/login.vue +++ b/src/views/login.vue @@ -63,7 +63,6 @@ @@ -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; } } diff --git a/vue.config.js b/vue.config.js index 820dd10..a112a91 100644 --- a/vue.config.js +++ b/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: '/',