Prechádzať zdrojové kódy

尝试手动引入级联下拉组件样式

damon227 2 rokov pred
rodič
commit
2a1fc44792

+ 128 - 1
src/views/modules/common/material-type-component.vue

@@ -75,6 +75,133 @@
   }
 </script>
 
-<style scoped>
+<style>
+.el-cascader__dropdown {
+    margin: 5px 0;
+    font-size: 14px;
+    background: #FFF;
+    border: 1px solid #E4E7ED;
+    border-radius: 4px;
+    -webkit-box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+}
 
+.el-cascader-panel {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+.el-cascader-menu {
+    min-width: 180px;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    color: #606266;
+    border-right: solid 1px #E4E7ED;
+}
+
+.el-cascader-menu__wrap {
+    height: 204px;
+}
+
+.el-scrollbar {
+    overflow: hidden;
+    position: relative;
+}
+
+.el-cascader-menu {
+    display: inline-block;
+    vertical-align: top;
+    height: 204px;
+    /* overflow: auto; */
+    border-right: 1px solid #e4e7ed;
+    box-sizing: border-box;
+    margin: 0;
+    padding: 6px 0;
+    min-width: 160px;
+}
+
+.el-cascader-menu__list {
+    position: relative;
+    min-height: 100%;
+    margin: 0;
+    padding: 6px 0;
+    list-style: none;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+ul {
+    display: block;
+    list-style-type: disc;
+    margin-block-start: 1em;
+    margin-block-end: 1em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    padding-inline-start: 40px;
+}
+
+.el-cascader-node {
+    position: relative;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    padding: 0 30px 0 20px;
+    height: 34px;
+    line-height: 34px;
+    outline: 0;
+}
+
+.el-cascader-node__label {
+    -webkit-box-flex: 1;
+    -ms-flex: 1;
+    flex: 1;
+    padding: 0 10px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.el-cascader-node__postfix {
+    position: absolute;
+    right: 10px;
+}
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+.el-cascader-menu__hover-zone {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
+
+.el-scrollbar:active>.el-scrollbar__bar, .el-scrollbar:focus>.el-scrollbar__bar, .el-scrollbar:hover>.el-scrollbar__bar {
+    opacity: 1;
+    -webkit-transition: opacity 340ms ease-out;
+    transition: opacity 340ms ease-out;
+}
+
+.el-cascader-node.in-active-path, .el-cascader-node.is-active, .el-cascader-node.is-selectable.in-checked-path {
+    color: #409EFF;
+    font-weight: 700;
+}
+
+.el-cascader-menu__hover-zone {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+}
 </style>