Browse Source

数组类型输入框正式样式封装

lkk 1 year ago
parent
commit
c5c6e16259
1 changed files with 131 additions and 111 deletions
  1. 131 111
      src/views/complianceAnalysis/ghzc.scss

+ 131 - 111
src/views/complianceAnalysis/ghzc.scss

@@ -171,151 +171,172 @@
 
 
     .el-form,
-.el-col {
-    .el-input--mini .el-input__inner {
-        color: #fff !important;
+    .el-col {
+        .el-input--mini .el-input__inner {
+            color: #fff !important;
+        }
+
+        .el-input__inner {
+            color: #fff;
+            background: #041c3273 !important;
+            border: 1px dashed #0F7AC8;
+        }
+
+        .el-input__inner:hover {
+            // color: #fff;
+            // background: #041C32 !important;
+            // border: 1px dashed #409eff;
+        }
+
+        .el-input__inner::placeholder {
+            // color: #fff;
+        }
+
+        .el-cascader--mini {
+            width: 100% !important;
+        }
     }
 
-    .el-input__inner {
+    .el-collapse-item__header {
         color: #fff;
-        background: #041c3273 !important;
-        border: 1px dashed #0F7AC8;
+        /* 修改标题颜色 */
     }
 
-    .el-input__inner:hover {
-        // color: #fff;
-        // background: #041C32 !important;
-        // border: 1px dashed #409eff;
+    .el-collapse-item {
+        border: none;
     }
 
-    .el-input__inner::placeholder {
-        // color: #fff;
+    .el-collapse-item__content {
+        // background-color: rgba(255, 192, 203, 0.425) !important;
+        background-color: transparent !important;
+        color: rgb(217, 237, 254) !important;
+        /* 修改背景颜色 */
     }
 
-    .el-cascader--mini {
-        width: 100% !important;
+    .el-collapse {
+        // border: 1px solid #d3dce6;
+        border: none;
+        /* 修改边框样式 */
     }
-}
-
-.el-collapse-item__header {
-    color: #fff;
-    /* 修改标题颜色 */
-}
 
-.el-collapse-item {
-    border: none;
-}
+    .el-collapse-item__wrap {
+        border-bottom: 1px solid transparent;
+        background-color: transparent !important;
+    }
 
-.el-collapse-item__content {
-    // background-color: rgba(255, 192, 203, 0.425) !important;
-    background-color: transparent !important;
-    color: rgb(217, 237, 254) !important;
-    /* 修改背景颜色 */
-}
+    .el-scrollbar {
+        border: none !important;
+    }
 
-.el-collapse {
-    // border: 1px solid #d3dce6;
-    border: none;
-    /* 修改边框样式 */
-}
+    .el-collapse-item__header {
+        border-bottom: 1px solid transparent;
+        background-color: transparent !important;
+        /* 修改边框 */
+    }
 
-.el-collapse-item__wrap {
-    border-bottom: 1px solid transparent ;
-    background-color: transparent !important;
-}
+    .el-collapse-item__header:hover,
+    .el-collapse-item__header:active {
+        background-color: #40a0ff6c !important;
+        /* 鼠标悬浮和点击时的背景色 */
+    }
 
-.el-scrollbar {
-    border: none !important;
-}
 
-.el-collapse-item__header {
-    border-bottom: 1px solid transparent;
-    background-color: transparent !important;
-    /* 修改下边框 */
-}
 
-.el-collapse-item__header:hover,
-.el-collapse-item__header:active {
-    background-color: #40a0ff6c !important;
-    /* 鼠标悬浮和点击时的背景色 */
-}
+    .el-radio__inner {
+        background-color: #b6e1ff3b;
+    }
 
 
+    .el-table {
+        background-color: transparent !important;
+        // border: none;
+        color: #cddeeb;
+    }
 
-.el-radio__inner {
-    background-color: #b6e1ff3b;
-}
+    .el-table--border {
+        border-radius: 5px;
+    }
 
+    .el-table tr {
+        background-color: transparent !important;
+        color: #cddeeb;
+        height: 43px;
+    }
 
-.el-table {
-    background-color: transparent !important;
-    // border: none;
-    color: #cddeeb;
-}
+    .el-table .el-table__cell {
+        background-color: transparent !important;
+        padding: 0 !important;
+    }
 
-.el-table--border {
-    border-radius: 5px;
-}
+    .el-table td.el-table__cell,
+    .el-table th.el-table__cell.is-leaf {
+        border-bottom: 1px solid #667e8f7c !important;
+    }
 
-.el-table tr {
-    background-color: transparent !important;
-    color: #cddeeb;
-    height: 43px;
-}
+    // 设置表头的颜色
+    .el-table thead tr>th {
+        width: 100%;
+        background-color: #0a2450;
+        color: #cddeeb;
+        border: none;
+    }
 
-.el-table .el-table__cell {
-    background-color: transparent !important;
-    padding: 0 !important;
-}
+    // 去除每行的边框
+    .el-table tbody tr>td {
+        // background-color: rgb(26,28,119);
+        color: #cddeeb;
+        border: none;
+    }
 
-.el-table td.el-table__cell,
-.el-table th.el-table__cell.is-leaf {
-    border-bottom: 1px solid #667e8f7c !important;
-}
+    .el-table thead {
+        background-color: #0a2450 !important;
+    }
 
-// 设置表头的颜色
-.el-table thead tr>th {
-    width: 100%;
-    background-color: #0a2450;
-    color: #cddeeb;
-    border: none;
-}
+    .el-table--border,
+    .el-table--group {
+        border: none;
+    }
 
-// 去除每行的边框
-.el-table tbody tr>td {
-    // background-color: rgb(26,28,119);
-    color: #cddeeb;
-    border: none;
-}
+    .el-table::before {
+        background-color: transparent !important;
+    }
 
-.el-table thead {
-    background-color: #0a2450 !important;
-}
+    .el-table--border::after {
+        background-color: transparent !important;
 
-.el-table--border,
-.el-table--group {
-    border: none;
-}
+    }
 
-.el-table::before {
-    background-color: transparent !important;
-}
+    //表格有边框
+    .el-table--border .el-table__cell {
+        border: none;
+    }
 
-.el-table--border::after {
-    background-color: transparent !important;
+    //树结构选中子集时父级的背景色
+    .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
+        background-color: transparent !important;
+    }
 
-}
 
-//表格有边框
-.el-table--border .el-table__cell {
-    border: none;
-}
+    /* 去除Element UI中el-input数字类型的样式 */
+    .el-input__inner[type="number"] {
+        -webkit-appearance: none;
+        /* 移除系统默认的外观样式 */
+    }
 
-//树结构选中子集时父级的背景色
-.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
-    background-color: transparent !important;
-}
+    /* 去除增加/减少数字按钮的样式 */
+    .el-input__inner[type="number"]::-webkit-inner-spin-button,
+    .el-input__inner[type="number"]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        /* 移除输入框两侧的上下箭头 */
+        margin: 0;
+        /* 移除上下箭头与文本之间的间隔 */
+    }
 
+    /* 去除Firefox浏览器中的一些特定样式 */
+    .el-input__inner[type="number"]::-moz-inner-spin-button {
+        -moz-appearance: none;
+        /* 移除Firefox中的上下箭头 */
+    }
 }
 
 .flex-box {
@@ -441,5 +462,4 @@
     //     cursor: pointer;
     //     margin-left: 30px;
     // }
-}
-
+}