From c4670df8d553db145616a7d39bf739cc67b06387 Mon Sep 17 00:00:00 2001 From: caill <815519168@qq.com> Date: Mon, 3 Jul 2023 18:05:45 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/alert.vue | 12 +-- src/components/time.vue | 6 +- src/components/toast.vue | 8 +- src/config/rem.js | 2 +- src/pages/modules/login/login.vue | 20 ++--- src/pages/modules/systemmanage/developer.vue | 10 +-- src/pages/modules/systemmanage/role.vue | 8 +- src/pages/modules/systemmanage/user.vue | 2 +- src/pages/shells/index/index.vue | 37 ++++---- src/style/common.styl | 88 +++++++++++++------- src/style/reset.css | 8 +- 11 files changed, 106 insertions(+), 95 deletions(-) diff --git a/src/components/alert.vue b/src/components/alert.vue index 5fb28ce..8ee6cce 100644 --- a/src/components/alert.vue +++ b/src/components/alert.vue @@ -86,15 +86,15 @@ export default { color #929292 z-index 2018 .text - padding 10px 15px + padding 14px 73px max-height 60vh min-height 44px overflow-y auto text-align center -webkit-overflow-scrolling touch white-space pre-wrap - font-size 14px - line-height 24px + font-size 32px + line-height 40px color #606266 [class*='hairline'] position relative @@ -114,9 +114,9 @@ export default { border-top-width 1px .button--large width 100% - height 40px - line-height 40px - font-size 14px + height 88px + line-height 88px + font-size 32px color #e74f1a background-color #dadee2 diff --git a/src/components/time.vue b/src/components/time.vue index 7c621bc..e425269 100644 --- a/src/components/time.vue +++ b/src/components/time.vue @@ -56,9 +56,9 @@ export default { _fj(center,flex-end) flex-direction column height 61px - padding-left 10px + padding-left 40px .date-wraper - _font(16px, 24px, #909399,,) + _font(28px, 30px, #909399,,) .time-wraper - _font(16px, 24px, #909399,,) + _font(28px, 30px, #909399,,) diff --git a/src/components/toast.vue b/src/components/toast.vue index fa51c83..0c01d26 100644 --- a/src/components/toast.vue +++ b/src/components/toast.vue @@ -32,13 +32,13 @@ export default { top 50% transform translate(-50%, -50%) .text - line-height 18px + line-height 40px display inline-block width auto text-align center - padding 15px - border-radius 4px + padding 14px 73px + border-radius 16px background #858586 - font-size 16px + font-size 32px color #fff diff --git a/src/config/rem.js b/src/config/rem.js index 21a35f9..6999213 100644 --- a/src/config/rem.js +++ b/src/config/rem.js @@ -1,5 +1,5 @@ /** 10.4寸屏，4:3的，1366*768 */ -// apt设备尺寸分辨率1024*768 现在新设备1920*1080 +// apt设备尺寸分辨率1024*768 现在新设备2560*1440 (function (doc, win) { var docEl = doc.documentElement var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize' diff --git a/src/pages/modules/login/login.vue b/src/pages/modules/login/login.vue index d7f16ae..c003f2a 100644 --- a/src/pages/modules/login/login.vue +++ b/src/pages/modules/login/login.vue @@ -215,18 +215,18 @@ export default { padding 20px .login-content_wraper width 100% - max-width 260px + padding 0 15% margin 0 auto _fj(center,,column) .dl width 100% - _font(16px, 28px, #333, bold, center) + _font(28px, 60px, #333, bold, center) margin-bottom 30px .login-items-wraper width 100% .login-item _fj() - _wh(100%, 42px) + _wh(100%, 80px) background-color #fff padding 5px 12px border 1px solid $gray2 @@ -234,25 +234,23 @@ export default { +.login-item margin-top 20px .login-label - width 102px - line-height 30px - _font(14px, 30px, $gray1,,) + width 220px + _font(28px, 70px, $gray1,,) .login-input - width calc(100% - 102px) - line-height 30px - _font(14px, 30px, $gray1,,) + width calc(100% - 220px) + _font(28px, 70px, $gray1,,) .login-setup-wraper width 100% margin-top 10px _fj() a - _font(14px, 20px, $red1,,) + _font(28px, 80px, $red1,,) .login-setup-wraper__r justify-content flex-end .setup-info color $red1 .setup-info - _font(14px, 20px, $fc1,,) + _font(28px, 80px, $fc1,,) .login-buttons-wraper width 100% margin-top 10px diff --git a/src/pages/modules/systemmanage/developer.vue b/src/pages/modules/systemmanage/developer.vue index 0d608ed..e3f023e 100644 --- a/src/pages/modules/systemmanage/developer.vue +++ b/src/pages/modules/systemmanage/developer.vue @@ -149,13 +149,13 @@ export default { float left z-index 2 .tabs_item - padding 0 20px - height 40px + padding 0 40px + height 80px box-sizing border-box - line-height 40px + line-height 80px display inline-block list-style none - font-size 14px + font-size 28px font-weight 500 position relative transition all .3s cubic-bezier(.645,.045,.355,1) @@ -176,7 +176,7 @@ export default { padding: 15px; .tab_pane _wh(100%,100%) - _font(16px, 28px, #323232,,) + _font(24px, 40px, #323232,,) white-space pre-line word-break break-all overflow-y auto diff --git a/src/pages/modules/systemmanage/role.vue b/src/pages/modules/systemmanage/role.vue index 2dacf69..e6fb39f 100644 --- a/src/pages/modules/systemmanage/role.vue +++ b/src/pages/modules/systemmanage/role.vue @@ -308,12 +308,12 @@ export default { }, toCheck (e) { this.pkId = this.pkId === e.roleId ? '' : e.roleId - this.checkedKeys = this.pkId === e.roleId ? e.menus : [] + this.checkedKeys = this.pkId === e.roleId ? e.menus1 : [] this.tree.map(e => { this.$refs.tree.setChecked(e, false, true) }) if (this.pkId === e.roleId) { - this.checkedKeys = e.menus + this.checkedKeys = e.menus1 } else { this.checkedKeys = [] } @@ -369,8 +369,8 @@ export default { top -1px z-index 99 background #d7d7d7 - _font(14px, 23px, #323232, bold, center) - padding 12px 10px + _font(24px, 33px, #323232, bold, center) + padding 24px 20px .button1 position absolute right 10px diff --git a/src/pages/modules/systemmanage/user.vue b/src/pages/modules/systemmanage/user.vue index 5b77c56..20dfa51 100644 --- a/src/pages/modules/systemmanage/user.vue +++ b/src/pages/modules/systemmanage/user.vue @@ -388,6 +388,6 @@ export default { diff --git a/src/pages/shells/index/index.vue b/src/pages/shells/index/index.vue index 9819bfa..9a68256 100644 --- a/src/pages/shells/index/index.vue +++ b/src/pages/shells/index/index.vue @@ -390,7 +390,7 @@ export default { >>>.el-menu--horizontal>.el-menu-item line-height 80px height 80px - font-size 18px + font-size 32px >>>.el-menu.el-menu--horizontal border-bottom 0 .time-container @@ -398,17 +398,17 @@ export default { .state-item border 1px solid #54C0B3 border-radius 4px - _font(18px,32px,#54C0B3,,center) - padding 0 15px + _font(32px,60px,#54C0B3,,center) + padding 0 35px .state-line - _wh(2px,20px) + _wh(2px,60px) opacity 0.3 background #8991A6 - margin 0 10px + margin 0 20px .elec-qty-wrap position relative - width 15px - height 32px + width 30px + height 60px border 1px solid #dddddd margin-right 5px border-radius 2px @@ -430,9 +430,9 @@ export default { z-index 152 border 1px solid #ddd .elec-txt - _font(18px, 32px, #909399,,left) + _font(28px, 60px, #909399,,left) .icon_admin - _font(20px, 32px, #54C0B3,,left) + _font(32px, 60px, #54C0B3,,left) margin-right 2px >>>.el-menu border-right none @@ -448,6 +448,7 @@ export default { .header_user_wraper_inn _fj() _wh(100%, 100%) + padding 0 30px .header_dropdown_wraper position absolute top 90% @@ -465,7 +466,7 @@ export default { width 100% li width 100% - _font(14px, 36px, #909399,,center) + _font(28px, 60px, #909399,,center) padding 0 10px &:hover background-color #ffc3a7 @@ -500,20 +501,12 @@ export default { .side-bar-container >>>.el-menu-item a color #909399 + >>>.el-menu-item + font-size 28px + line-height 80px + height 80px >>>.is-active background-color: #ecf5ff >>>.is-active a color #409EFF -@media only screen and (max-width: 1620px) { -.title-container { - width 150px - height 15px -} ->>>.el-menu--horizontal>.el-menu-item { - font-size 16px -} ->>>.el-menu-item { - padding 0 10px -} -} diff --git a/src/style/common.styl b/src/style/common.styl index 7c9bee0..aa6a5f5 100644 --- a/src/style/common.styl +++ b/src/style/common.styl @@ -44,10 +44,10 @@ _wh(100%, 100%) padding-top 80px .side-bar-container - _wh(120px, 100%) + _wh(240px, 100%) border-right solid 1px #e6e6e6 .main-container - _wh(calc(100% - 120px), 100%) + _wh(calc(100% - 240px), 100%) .site_container _fj() @@ -133,9 +133,9 @@ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; - padding: 12px 20px; - font-size: 14px; - border-radius: 18px; + padding: 28px 58px; + font-size: 32px; + border-radius: 28px; &:disabled color: #fff; background-color: $gray; @@ -195,7 +195,8 @@ .dialog_body padding: 30px 20px; color: #606266; - font-size: 14px; + font-size: 28px; + line-height: 40px word-break: break-all; .form_wraper width 100% @@ -208,23 +209,23 @@ .form_item+.form_item margin-left 4% .form_item__label - width: 86px; + width: 160px; text-align: left; vertical-align: middle; float: left; - font-size: 14px; + font-size: 28px; color: #606266; line-height: 40px; - padding: 0 12px 0 0; + padding: 20px 10px; box-sizing: border-box; i color $red2 .form_item__content - width: calc(100% - 86px) - margin-left: 86px; - line-height: 40px; + width: calc(100% - 160px) + margin-left: 160px; + line-height: 80px; position: relative; - font-size: 14px; + font-size: 28px; .form_item__input width 100% -webkit-appearance: none; @@ -235,26 +236,27 @@ box-sizing: border-box; color: #696969; display: inline-block; - font-size: 14px; - height: 40px; - line-height: 40px; + font-size: 28px; + height: 80px; + line-height: 80px; outline: none; padding: 0 15px; transition: border-color .2s cubic-bezier(.645,.045,.355,1); width: 100%; + border-radius: 16px .form_item__textarea line-height 23px height 69px .form_item__radio color: #606266; font-weight: 500; - line-height: 40px; + line-height: 80px; position: relative; cursor: pointer; display: inline-block; white-space: nowrap; outline: none; - font-size: 14px; + font-size: 28px; margin-right: 30px; -moz-user-select: none; -webkit-user-select: none; @@ -272,8 +274,8 @@ border-radius 50% .radio__label display: inline-block; - font-size: 14px; - padding-left: 10px; + font-size: 28px; + padding-left: 20px; .icon_radio_checked background-color $green1 .radio__original @@ -288,6 +290,10 @@ margin: 0; .el-select width 100% +.el-input, .el-select .el-input .el-select__caret, .el-select-dropdown__item + font-size 28px + line-height 80px + height 80px .el-select:hover .el-input__inner, .el-input__inner border-color $gray1 .el-select .el-input__inner:focus, .el-select .el-input.is-focus .el-input__inner @@ -296,6 +302,9 @@ color $red2 .el-input__inner color #696969 + font-size 28px + line-height 80px + height 80px .dialog_footer padding: 10px 20px 20px; text-align: center; @@ -319,7 +328,7 @@ _wh(100%, 100%) padding 20px 20px 30px 20px .buttons_wrapper - margin-bottom 10px + margin-bottom 30px .grid_wrapper width 100% table @@ -337,23 +346,23 @@ position: sticky; top: -1px; background: #d7d7d7; - font-size: 14px; - line-height: 23px; + font-size: 24px; + line-height: 33px; color: #323232; font-weight: bold; z-index: 99; - padding 12px 10px; + padding 24px 20px; td box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - padding: 12px 10px; + padding: 20px 10px; border-bottom: 1px dashed $gray1; border-right: 1px dashed $gray1; text-align: center; - font-size: 14px; - line-height: 23px; + font-size: 28px; + line-height: 40px; color: #323232; background: #fff; &:last-child @@ -369,7 +378,7 @@ left: 0; z-index: 99; .grid_button - padding 6px 12px + padding 15px 50px // tree .el-checkbox__inner:hover, .el-checkbox__input.is-focus .el-checkbox__inner @@ -388,7 +397,7 @@ .state_tip _wh(200px, 100px) _fj(center) - _font(32px, 33px, #ffffff,,center) + _font(32px, 45px, #ffffff,,center) border 1px solid $red background-color #ffc3a7 border-radius 6px @@ -406,7 +415,7 @@ border 1.6px solid #54C0B3 background-color #fff _font(32px,33px,#54C0B3,,center) - border-radius 6px + border-radius 16px margin-bottom 20px margin-right 24px .state_item_2 @@ -414,7 +423,7 @@ _fj(center) border 10px solid #DFE1E6 background-color #fff - border-radius 6px + border-radius 16px margin-bottom 20px margin-right 24px &:nth-child(3n) @@ -497,4 +506,19 @@ background-color: rgb(19, 206, 102); &::after left: 100%; - margin-left: -49px; \ No newline at end of file + margin-left: -49px; + +// tree +.el-tree-node__content + height 60px +.el-tree-node__expand-icon,.el-checkbox,.el-tree-node__label + font-size 28px +.el-checkbox__inner + width 28px + height 28px +.el-checkbox__input.is-indeterminate .el-checkbox__inner::before + top 12px +.el-checkbox__input.is-checked .el-checkbox__inner::after + left: 11px; + top: 9px; + transform: rotate(45deg) scaleY(2) \ No newline at end of file diff --git a/src/style/reset.css b/src/style/reset.css index f2a4c9b..0993638 100644 --- a/src/style/reset.css +++ b/src/style/reset.css @@ -68,15 +68,11 @@ html,body { height: 100%; font-size: 16px; min-width: 1440px; + width: 2560px; + height: 1440px; /* max-width: 1920px; */ } -@media only screen and (max-width: 1440px) { - html,body { - width: 1440px - } -} - select, option, textarea { appearance: none; outline: none;