ソースを参照

修改弹出框样式以及滚动条样式

wangrulan 2 年 前
コミット
827581e7a5
2 ファイル変更32 行追加1 行削除
  1. 19 1
      src/common/less/public.less
  2. 13 0
      src/components/permissions/user/index.vue

+ 19 - 1
src/common/less/public.less

@@ -154,4 +154,22 @@ i {
 
 .super .el-form-item{
   margin-bottom: 0;
-}
+}
+
+::-webkit-scrollbar {
+  /*滚动条整体样式*/
+  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
+  height: 10px;
+  }
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 10px;
+  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.1);
+  background   : #ccc;
+  }
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  /* box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.1); */
+  border-radius: 10px;
+  background   : #ededed;
+  }

+ 13 - 0
src/components/permissions/user/index.vue

@@ -198,7 +198,9 @@
       :visible.sync="dialogFormVisible"
       append-to-body
       width="600px"
+      class="dialog"
     >
+    <div class="dialogClass">
       <el-form
         :model="form"
         ref="form"
@@ -327,6 +329,7 @@
           </el-cascader>
         </el-form-item>
       </el-form>
+    </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取 消</el-button>
         <el-button
@@ -776,5 +779,15 @@ export default {
 .marginTop-20 {
   margin-top: -20px;
 }
+// .dialog{
+//   overflow-y: auto;
+//   overflow-x: hidden;
+// }
+.dialog .dialogClass{
+  height: 50vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-right: 20px;
+}
 
 </style>