├── README.md └── src └── whites.scss /README.md: -------------------------------------------------------------------------------- 1 | # Vue-conclusion 2 | vue知识点汇总，已及常用开发小技巧，不定期更新内容，砥砺前行，共同进步 3 | # 移步Issues记录所有问题与知识点 4 | -------------------------------------------------------------------------------- /src/whites.scss: -------------------------------------------------------------------------------- 1 | $--color-primary: #409EFF; 2 | 3 | $--block-background-color: #fff;//页面中块背景色 4 | 5 | 6 | $--menu-background-color:#fff;//top背景颜色 7 | 8 | $--always-white:#fff;//代替$--color-white 9 | 10 | 11 | $--left-contract-background-color:#409EFF; 12 | 13 | $--left-item-background-color: #ecf5ff; 14 | 15 | $--header-background:url(../static/whites/img/header_bg_dack.png) #2f8dee no-repeat bottom center; // header 背景 16 | 17 | $--auth-index-background:url("~static/img/mw_bg.png") ; 18 | 19 | $--color-white: #fff !default; 20 | $--color-black: #000 !default; 21 | 22 | $--color-primary: #409EFF !default; 23 | $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ 24 | $--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ 25 | $--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */ 26 | $--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */ 27 | $--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */ 28 | $--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */ 29 | $--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */ 30 | $--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ 31 | $--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ 32 | 33 | $--color-success: #67c23a !default; 34 | $--color-warning: #e6a23c !default; 35 | $--color-danger: #f56c6c !default; 36 | $--color-info: #909399 !default; 37 | 38 | $--color-success-light: mix($--color-white, $--color-success, 80%) !default; 39 | $--color-warning-light: mix($--color-white, $--color-warning, 80%) !default; 40 | $--color-danger-light: mix($--color-white, $--color-danger, 80%) !default; 41 | $--color-info-light: mix($--color-white, $--color-info, 80%) !default; 42 | 43 | $--color-success-lighter: mix($--color-white, $--color-success, 90%) !default; 44 | $--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default; 45 | $--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default; 46 | $--color-info-lighter: mix($--color-white, $--color-info, 90%) !default; 47 | 48 | $--color-text-primary: #303133 !default; 49 | $--color-text-regular: #606266 !default; 50 | $--color-text-secondary: #909399 !default; 51 | $--color-text-placeholder: #c0c4cc !default; 52 | 53 | /* Link 54 | -------------------------- */ 55 | $--link-color: $--color-primary-light-2 !default; 56 | $--link-hover-color: $--color-primary !default; 57 | 58 | /* Background 59 | -------------------------- */ 60 | $--background-color-base: #e8e8e8 !default; 61 | 62 | /* Border 63 | -------------------------- */ 64 | $--border-color-base: #dcdfe6 !default; 65 | $--border-color-light: #e4e7ed !default; 66 | $--border-color-lighter: #ebeef5 !default; 67 | $--border-color-extra-light: #f2f6fc !default; 68 | $--border-color-hover: $--color-text-placeholder !default; 69 | 70 | /* Fill 71 | -------------------------- */ 72 | $--fill-base: $--color-white !default; 73 | 74 | /* Disable base 75 | -------------------------- */ 76 | $--disabled-fill-base: $--background-color-base !default; 77 | $--disabled-color-base: $--color-text-placeholder !default; 78 | $--disabled-border-base: $--border-color-light !default; 79 | 80 | /* Icon 81 | -------------------------- */ 82 | $--icon-color: #666 !default; 83 | $--icon-color-base: $--color-info !default; 84 | 85 | /* Checkbox 86 | -------------------------- */ 87 | $--checkbox-color: $--color-text-regular !default; 88 | $--checkbox-checked-text-color: $--color-primary; 89 | $--checkbox-checked-input-border-color: $--color-primary ; 90 | $--checkbox-checked-input-fill: $--color-primary ; 91 | $--checkbox-disabled-input-border-color: $--border-color-base ; 92 | $--checkbox-disabled-input-fill: #edf2fc ; 93 | $--checkbox-disabled-icon-color: $--color-text-placeholder; 94 | 95 | /* Select 96 | -------------------------- */ 97 | $--select-border-color-hover: $--border-color-hover ; 98 | $--select-close-hover-color: $--color-text-secondary; 99 | $--select-input-color: $--color-text-placeholder ; 100 | $--select-input-focus-background: $--color-primary ; 101 | $--select-option-color: $--color-text-regular ; 102 | $--select-option-disabled-color: $--color-text-placeholder; 103 | $--select-option-disabled-background: $--color-white; 104 | $--select-option-hover-background: $--background-color-base ; 105 | $--select-option-selected: $--color-primary; 106 | $--select-option-selected-hover: $--background-color-base; 107 | $--select-group-color: $--color-info; 108 | $--select-dropdown-background: $--color-white; 109 | $--select-dropdown-empty-color: #999; 110 | 111 | 112 | /* Button 113 | -------------------------- */ 114 | $--button-primary-border: $--color-primary; 115 | $--button-primary-color: $--always-white ; 116 | $--button-primary-fill: $--color-primary; 117 | 118 | $--button-primary-border-color:$--color-primary; 119 | $--button-primary-font-color:$--always-white ; 120 | $--button-primary-background-color: $--color-primary; 121 | 122 | $--button-disabled-font-color:$--color-text-placeholder; 123 | $--button-disabled-background-color: $--color-white ; 124 | $--button-disabled-border-color:$--border-color-lighter; 125 | 126 | /* Table 127 | -------------------------- */ 128 | $--table-border-color: $--border-color-lighter; 129 | $--table-header-color: $--color-text-regular; 130 | $--table-text-color: $--color-text-regular; 131 | $--table-row-hover-background: $--color-primary-light-9; 132 | $--table-current-row-background: $--color-primary-light-9 ; 133 | $--table-header-background: #f7f7f7; 134 | $--table-footer-background: $--color-text-placeholder ; 135 | 136 | /* Tree 137 | // -------------------------- */ 138 | $--tree-node-hover-color: $--background-color-base; 139 | 140 | /* DatePicker 141 | --------------------------*/ 142 | $--datepicker-color: $--color-text-regular; 143 | $--datepicker-inner-border-color: #e4e4e4; 144 | $--datepicker-inrange-hover-color: $--border-color-extra-light; 145 | $--datepicker-inrange-color: $--border-color-extra-light ; 146 | $--datepicker-active-color: $--color-primary; 147 | $--datepicker-text-hover-color: $--color-primary ; 148 | 149 | /* Checkbox 150 | -------------------------- */ 151 | $--checkbox-color: $--color-text-regular; 152 | $--checkbox-checked-text-color: $--color-primary ; 153 | $--checkbox-checked-input-border-color: $--color-primary; 154 | $--checkbox-checked-input-fill: $--color-primary ; 155 | $--checkbox-disabled-input-border-color: $--border-color-base; 156 | $--checkbox-disabled-input-fill: #edf2fc ; 157 | $--checkbox-disabled-icon-color: $--color-text-placeholder; 158 | 159 | .el-table th > .cell{ 160 | font-size: 14px; 161 | } 162 | .bounced_content .el-checkbox-group{ 163 | margin-top: 10px; 164 | max-height: 200px; 165 | overflow-y: auto !important; 166 | } 167 | .ts-drawer__body .el-form--inline .el-form-item{ 168 | min-width: 25%; 169 | text-align: right; 170 | } 171 | .el-select__tags-text{ 172 | display: inline-block; 173 | text-overflow: ellipsis; 174 | white-space: nowrap; 175 | overflow: hidden; 176 | vertical-align: middle; 177 | max-width: 75px; 178 | } 179 | 180 | @import '@/assets/scss/var/var.scss'; 181 | /******** 导出色值 ***********/ 182 | :export { 183 | colorPrimary: $--color-primary; 184 | colorSuccess:$--color-success; 185 | colorWarning:$--color-warning; 186 | colorDanger:$--color-danger; 187 | textPlaceholder: $--color-text-placeholder; 188 | activeBackground-color:$--left-item-background-color; 189 | textPrimary:$--color-text-primary; 190 | } 191 | --------------------------------------------------------------------------------