样式

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
+  font-size 32px
-  line-height 24px
+  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
+  height 88px
-  line-height 40px
+  line-height 88px
-  font-size 14px
+  font-size 32px
   color #e74f1a
   background-color #dadee2
 </style>

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,,)
 </style>

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
+      padding 14px 73px
-      border-radius 4px
+      border-radius 16px
       background #858586
-      font-size 16px
+      font-size 32px
       color #fff
 </style>

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'

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
+  width 220px
-  line-height 30px
+  _font(28px, 70px, $gray1,,)
-  _font(14px, 30px, $gray1,,)
 .login-input
-  width calc(100% - 102px)
+  width calc(100% - 220px)
-  line-height 30px
+  _font(28px, 70px, $gray1,,)
-  _font(14px, 30px, $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

src/pages/modules/systemmanage/developer.vue

@@ -149,13 +149,13 @@ export default {
   float left
   z-index 2
 .tabs_item
-  padding 0 20px
+  padding 0 40px
-  height 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

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)
+  _font(24px, 33px, #323232, bold, center)
-  padding 12px 10px
+  padding 24px 20px
 .button1
   position absolute
   right 10px

src/pages/modules/systemmanage/user.vue

@@ -388,6 +388,6 @@ export default {
 <style lang="stylus" scoped>
 @import '~@style/mixin'
 .grid_wrapper
-  height calc(100% - 50px)
+  height calc(100% - 120px)
   overflow-y auto
 </style>

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)
+  _font(32px,60px,#54C0B3,,center)
-  padding 0 15px
+  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
+  width 30px
-  height 32px
+  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
-}
-}
 </style>

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;
+  padding: 28px 58px;
-  font-size: 14px;
+  font-size: 32px;
-  border-radius: 18px;
+  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)
+  width: calc(100% - 160px)
-  margin-left: 86px;
+  margin-left: 160px;
-  line-height: 40px;
+  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;
+  font-size: 28px;
-  height: 40px;
+  height: 80px;
-  line-height: 40px;
+  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;
+  font-size: 28px;
-  padding-left: 10px;
+  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;
+      font-size: 24px;
-      line-height: 23px;
+      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;
+      font-size: 28px;
-      line-height: 23px;
+      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)
@@ -498,3 +507,18 @@
     &::after
       left: 100%;
       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)

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;