e
3 years ago
parent
42ab4bc264
commit
b8218272e0
50 changed files with 20684 additions and 0 deletions
@ -0,0 +1,22 @@ |
||||
.DS_Store |
||||
node_modules |
||||
/dist |
||||
example.html |
||||
# favicon.ico |
||||
# local env files |
||||
.env.local |
||||
.env.*.local |
||||
|
||||
# Log files |
||||
npm-debug.log* |
||||
yarn-debug.log* |
||||
yarn-error.log* |
||||
|
||||
# Editor directories and files |
||||
.idea |
||||
.vscode |
||||
*.suo |
||||
*.ntvs* |
||||
*.njsproj |
||||
*.sln |
||||
*.sw* |
||||
@ -0,0 +1,6 @@ |
||||
{ |
||||
"tabWidth": 4, |
||||
"singleQuote": true, |
||||
"trailingComma": "none", |
||||
"printWidth": 140 |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
MIT License |
||||
|
||||
Copyright (c) 2016-2019 vue-manage-system |
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy |
||||
of this software and associated documentation files (the "Software"), to deal |
||||
in the Software without restriction, including without limitation the rights |
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
||||
copies of the Software, and to permit persons to whom the Software is |
||||
furnished to do so, subject to the following conditions: |
||||
|
||||
The above copyright notice and this permission notice shall be included in all |
||||
copies or substantial portions of the Software. |
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE |
||||
SOFTWARE. |
||||
@ -0,0 +1,20 @@ |
||||
module.exports = { |
||||
presets: [ |
||||
'@vue/app' |
||||
], |
||||
"plugins": [ |
||||
["import", { |
||||
"libraryName": "view-design", |
||||
"libraryDirectory": "src/components", |
||||
|
||||
}], |
||||
|
||||
// ,// 按需引入ant
|
||||
// ["import", {
|
||||
// "libraryName":"ant-design-vue",
|
||||
// style:true
|
||||
// }]
|
||||
|
||||
] |
||||
|
||||
} |
||||
@ -0,0 +1,994 @@ |
||||
/* Element Chalk Variables */ |
||||
|
||||
// Special comment for theme configurator |
||||
// type|skipAutoTranslation|Category|Order |
||||
// skipAutoTranslation 1 |
||||
|
||||
/* Transition |
||||
-------------------------- */ |
||||
$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default; |
||||
$--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default; |
||||
$--fade-linear-transition: opacity 200ms linear !default; |
||||
$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default; |
||||
$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default; |
||||
$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default; |
||||
|
||||
/* Color |
||||
-------------------------- */ |
||||
/// color|1|Brand Color|0 |
||||
$--color-primary: #00B9FF !default; |
||||
/// color|1|Background Color|4 |
||||
$--color-white: #FFFFFF !default; |
||||
/// color|1|Background Color|4 |
||||
$--color-black: #000000 !default; |
||||
$--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */ |
||||
$--color-primary-light-2: mix($--color-white, $--color-primary, 20%) !default; /* 66b1ff */ |
||||
$--color-primary-light-3: mix($--color-white, $--color-primary, 30%) !default; /* 79bbff */ |
||||
$--color-primary-light-4: mix($--color-white, $--color-primary, 40%) !default; /* 8cc5ff */ |
||||
$--color-primary-light-5: mix($--color-white, $--color-primary, 50%) !default; /* a0cfff */ |
||||
$--color-primary-light-6: mix($--color-white, $--color-primary, 60%) !default; /* b3d8ff */ |
||||
$--color-primary-light-7: mix($--color-white, $--color-primary, 70%) !default; /* c6e2ff */ |
||||
$--color-primary-light-8: mix($--color-white, $--color-primary, 80%) !default; /* d9ecff */ |
||||
$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */ |
||||
/// color|1|Functional Color|1 |
||||
$--color-success: #67C23A !default; |
||||
/// color|1|Functional Color|1 |
||||
$--color-warning: #E6A23C !default; |
||||
/// color|1|Functional Color|1 |
||||
$--color-danger: #F56C6C !default; |
||||
/// color|1|Functional Color|1 |
||||
$--color-info: #909399 !default; |
||||
|
||||
$--color-success-light: mix($--color-white, $--color-success, 80%) !default; |
||||
$--color-warning-light: mix($--color-white, $--color-warning, 80%) !default; |
||||
$--color-danger-light: mix($--color-white, $--color-danger, 80%) !default; |
||||
$--color-info-light: mix($--color-white, $--color-info, 80%) !default; |
||||
|
||||
$--color-success-lighter: mix($--color-white, $--color-success, 90%) !default; |
||||
$--color-warning-lighter: mix($--color-white, $--color-warning, 90%) !default; |
||||
$--color-danger-lighter: mix($--color-white, $--color-danger, 90%) !default; |
||||
$--color-info-lighter: mix($--color-white, $--color-info, 90%) !default; |
||||
/// color|1|Font Color|2 |
||||
$--color-text-primary: #303133 !default; |
||||
/// color|1|Font Color|2 |
||||
$--color-text-regular: #606266 !default; |
||||
/// color|1|Font Color|2 |
||||
$--color-text-secondary: #909399 !default; |
||||
/// color|1|Font Color|2 |
||||
$--color-text-placeholder: #C0C4CC !default; |
||||
/// color|1|Border Color|3 |
||||
$--border-color-base: #DCDFE6 !default; |
||||
/// color|1|Border Color|3 |
||||
$--border-color-light: #E4E7ED !default; |
||||
/// color|1|Border Color|3 |
||||
$--border-color-lighter: #EBEEF5 !default; |
||||
/// color|1|Border Color|3 |
||||
$--border-color-extra-light: #F2F6FC !default; |
||||
|
||||
// Background |
||||
/// color|1|Background Color|4 |
||||
$--background-color-base: #F5F7FA !default; |
||||
|
||||
/* Link |
||||
-------------------------- */ |
||||
$--link-color: $--color-primary-light-2 !default; |
||||
$--link-hover-color: $--color-primary !default; |
||||
|
||||
/* Border |
||||
-------------------------- */ |
||||
$--border-width-base: 1px !default; |
||||
$--border-style-base: solid !default; |
||||
$--border-color-hover: $--color-text-placeholder !default; |
||||
$--border-base: $--border-width-base $--border-style-base $--border-color-base !default; |
||||
/// borderRadius|1|Radius|0 |
||||
$--border-radius-base: 4px !default; |
||||
/// borderRadius|1|Radius|0 |
||||
$--border-radius-small: 2px !default; |
||||
/// borderRadius|1|Radius|0 |
||||
$--border-radius-circle: 100% !default; |
||||
/// borderRadius|1|Radius|0 |
||||
$--border-radius-zero: 0 !default; |
||||
|
||||
// Box-shadow |
||||
/// boxShadow|1|Shadow|1 |
||||
$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default; |
||||
// boxShadow|1|Shadow|1 |
||||
$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default; |
||||
/// boxShadow|1|Shadow|1 |
||||
$--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default; |
||||
|
||||
/* Fill |
||||
-------------------------- */ |
||||
$--fill-base: $--color-white !default; |
||||
|
||||
/* Typography |
||||
-------------------------- */ |
||||
$--font-path: 'fonts' !default; |
||||
$--font-display: 'auto' !default; |
||||
/// fontSize|1|Font Size|0 |
||||
$--font-size-extra-large: 20px !default; |
||||
/// fontSize|1|Font Size|0 |
||||
$--font-size-large: 18px !default; |
||||
/// fontSize|1|Font Size|0 |
||||
$--font-size-medium: 16px !default; |
||||
/// fontSize|1|Font Size|0 |
||||
$--font-size-base: 14px !default; |
||||
/// fontSize|1|Font Size|0 |
||||
$--font-size-small: 13px !default; |
||||
/// fontSize|1|Font Size|0 |
||||
$--font-size-extra-small: 12px !default; |
||||
/// fontWeight|1|Font Weight|1 |
||||
$--font-weight-primary: 500 !default; |
||||
/// fontWeight|1|Font Weight|1 |
||||
$--font-weight-secondary: 100 !default; |
||||
/// fontLineHeight|1|Line Height|2 |
||||
$--font-line-height-primary: 24px !default; |
||||
/// fontLineHeight|1|Line Height|2 |
||||
$--font-line-height-secondary: 16px !default; |
||||
$--font-color-disabled-base: #bbb !default; |
||||
/* Size |
||||
-------------------------- */ |
||||
$--size-base: 14px !default; |
||||
|
||||
/* z-index |
||||
-------------------------- */ |
||||
$--index-normal: 1 !default; |
||||
$--index-top: 1000 !default; |
||||
$--index-popper: 2000 !default; |
||||
|
||||
/* Disable base |
||||
-------------------------- */ |
||||
$--disabled-fill-base: $--background-color-base !default; |
||||
$--disabled-color-base: $--color-text-placeholder !default; |
||||
$--disabled-border-base: $--border-color-light !default; |
||||
|
||||
/* Icon |
||||
-------------------------- */ |
||||
$--icon-color: #666 !default; |
||||
$--icon-color-base: $--color-info !default; |
||||
|
||||
/* Checkbox |
||||
-------------------------- */ |
||||
/// fontSize||Font|1 |
||||
$--checkbox-font-size: 14px !default; |
||||
/// fontWeight||Font|1 |
||||
$--checkbox-font-weight: $--font-weight-primary !default; |
||||
/// color||Color|0 |
||||
$--checkbox-font-color: $--color-text-regular !default; |
||||
$--checkbox-input-height: 14px !default; |
||||
$--checkbox-input-width: 14px !default; |
||||
/// borderRadius||Border|2 |
||||
$--checkbox-border-radius: $--border-radius-small !default; |
||||
/// color||Color|0 |
||||
$--checkbox-background-color: $--color-white !default; |
||||
$--checkbox-input-border: $--border-base !default; |
||||
|
||||
/// color||Color|0 |
||||
$--checkbox-disabled-border-color: $--border-color-base !default; |
||||
$--checkbox-disabled-input-fill: #edf2fc !default; |
||||
$--checkbox-disabled-icon-color: $--color-text-placeholder !default; |
||||
|
||||
$--checkbox-disabled-checked-input-fill: $--border-color-extra-light !default; |
||||
$--checkbox-disabled-checked-input-border-color: $--border-color-base !default; |
||||
$--checkbox-disabled-checked-icon-color: $--color-text-placeholder !default; |
||||
|
||||
/// color||Color|0 |
||||
$--checkbox-checked-font-color: $--color-primary !default; |
||||
$--checkbox-checked-input-border-color: $--color-primary !default; |
||||
/// color||Color|0 |
||||
$--checkbox-checked-background-color: $--color-primary !default; |
||||
$--checkbox-checked-icon-color: $--fill-base !default; |
||||
|
||||
$--checkbox-input-border-color-hover: $--color-primary !default; |
||||
/// height||Other|4 |
||||
$--checkbox-bordered-height: 40px !default; |
||||
/// padding||Spacing|3 |
||||
$--checkbox-bordered-padding: 9px 20px 9px 10px !default; |
||||
/// padding||Spacing|3 |
||||
$--checkbox-bordered-medium-padding: 7px 20px 7px 10px !default; |
||||
/// padding||Spacing|3 |
||||
$--checkbox-bordered-small-padding: 5px 15px 5px 10px !default; |
||||
/// padding||Spacing|3 |
||||
$--checkbox-bordered-mini-padding: 3px 15px 3px 10px !default; |
||||
$--checkbox-bordered-medium-input-height: 14px !default; |
||||
$--checkbox-bordered-medium-input-width: 14px !default; |
||||
/// height||Other|4 |
||||
$--checkbox-bordered-medium-height: 36px !default; |
||||
$--checkbox-bordered-small-input-height: 12px !default; |
||||
$--checkbox-bordered-small-input-width: 12px !default; |
||||
/// height||Other|4 |
||||
$--checkbox-bordered-small-height: 32px !default; |
||||
$--checkbox-bordered-mini-input-height: 12px !default; |
||||
$--checkbox-bordered-mini-input-width: 12px !default; |
||||
/// height||Other|4 |
||||
$--checkbox-bordered-mini-height: 28px !default; |
||||
|
||||
/// color||Color|0 |
||||
$--checkbox-button-checked-background-color: $--color-primary !default; |
||||
/// color||Color|0 |
||||
$--checkbox-button-checked-font-color: $--color-white !default; |
||||
/// color||Color|0 |
||||
$--checkbox-button-checked-border-color: $--color-primary !default; |
||||
|
||||
|
||||
|
||||
/* Radio |
||||
-------------------------- */ |
||||
/// fontSize||Font|1 |
||||
$--radio-font-size: $--font-size-base !default; |
||||
/// fontWeight||Font|1 |
||||
$--radio-font-weight: $--font-weight-primary !default; |
||||
/// color||Color|0 |
||||
$--radio-font-color: $--color-text-regular !default; |
||||
$--radio-input-height: 14px !default; |
||||
$--radio-input-width: 14px !default; |
||||
/// borderRadius||Border|2 |
||||
$--radio-input-border-radius: $--border-radius-circle !default; |
||||
/// color||Color|0 |
||||
$--radio-input-background-color: $--color-white !default; |
||||
$--radio-input-border: $--border-base !default; |
||||
/// color||Color|0 |
||||
$--radio-input-border-color: $--border-color-base !default; |
||||
/// color||Color|0 |
||||
$--radio-icon-color: $--color-white !default; |
||||
|
||||
$--radio-disabled-input-border-color: $--disabled-border-base !default; |
||||
$--radio-disabled-input-fill: $--disabled-fill-base !default; |
||||
$--radio-disabled-icon-color: $--disabled-fill-base !default; |
||||
|
||||
$--radio-disabled-checked-input-border-color: $--disabled-border-base !default; |
||||
$--radio-disabled-checked-input-fill: $--disabled-fill-base !default; |
||||
$--radio-disabled-checked-icon-color: $--color-text-placeholder !default; |
||||
|
||||
/// color||Color|0 |
||||
$--radio-checked-font-color: $--color-primary !default; |
||||
/// color||Color|0 |
||||
$--radio-checked-input-border-color: $--color-primary !default; |
||||
/// color||Color|0 |
||||
$--radio-checked-input-background-color: $--color-white !default; |
||||
/// color||Color|0 |
||||
$--radio-checked-icon-color: $--color-primary !default; |
||||
|
||||
$--radio-input-border-color-hover: $--color-primary !default; |
||||
|
||||
$--radio-bordered-height: 40px !default; |
||||
$--radio-bordered-padding: 12px 20px 0 10px !default; |
||||
$--radio-bordered-medium-padding: 10px 20px 0 10px !default; |
||||
$--radio-bordered-small-padding: 8px 15px 0 10px !default; |
||||
$--radio-bordered-mini-padding: 6px 15px 0 10px !default; |
||||
$--radio-bordered-medium-input-height: 14px !default; |
||||
$--radio-bordered-medium-input-width: 14px !default; |
||||
$--radio-bordered-medium-height: 36px !default; |
||||
$--radio-bordered-small-input-height: 12px !default; |
||||
$--radio-bordered-small-input-width: 12px !default; |
||||
$--radio-bordered-small-height: 32px !default; |
||||
$--radio-bordered-mini-input-height: 12px !default; |
||||
$--radio-bordered-mini-input-width: 12px !default; |
||||
$--radio-bordered-mini-height: 28px !default; |
||||
|
||||
/// fontSize||Font|1 |
||||
$--radio-button-font-size: $--font-size-base !default; |
||||
/// color||Color|0 |
||||
$--radio-button-checked-background-color: $--color-primary !default; |
||||
/// color||Color|0 |
||||
$--radio-button-checked-font-color: $--color-white !default; |
||||
/// color||Color|0 |
||||
$--radio-button-checked-border-color: $--color-primary !default; |
||||
$--radio-button-disabled-checked-fill: $--border-color-extra-light !default; |
||||
|
||||
/* Select |
||||
-------------------------- */ |
||||
$--select-border-color-hover: $--border-color-hover !default; |
||||
$--select-disabled-border: $--disabled-border-base !default; |
||||
/// fontSize||Font|1 |
||||
$--select-font-size: $--font-size-base !default; |
||||
$--select-close-hover-color: $--color-text-secondary !default; |
||||
|
||||
$--select-input-color: $--color-text-placeholder !default; |
||||
$--select-multiple-input-color: #666 !default; |
||||
/// color||Color|0 |
||||
$--select-input-focus-border-color: $--color-primary !default; |
||||
/// fontSize||Font|1 |
||||
$--select-input-font-size: 14px !default; |
||||
|
||||
$--select-option-color: $--color-text-regular !default; |
||||
$--select-option-disabled-color: $--color-text-placeholder !default; |
||||
$--select-option-disabled-background: $--color-white !default; |
||||
/// height||Other|4 |
||||
$--select-option-height: 34px !default; |
||||
$--select-option-hover-background: $--background-color-base !default; |
||||
/// color||Color|0 |
||||
$--select-option-selected-font-color: $--color-primary !default; |
||||
$--select-option-selected-hover: $--background-color-base !default; |
||||
|
||||
$--select-group-color: $--color-info !default; |
||||
$--select-group-height: 30px !default; |
||||
$--select-group-font-size: 12px !default; |
||||
|
||||
$--select-dropdown-background: $--color-white !default; |
||||
$--select-dropdown-shadow: $--box-shadow-light !default; |
||||
$--select-dropdown-empty-color: #999 !default; |
||||
/// height||Other|4 |
||||
$--select-dropdown-max-height: 274px !default; |
||||
$--select-dropdown-padding: 6px 0 !default; |
||||
$--select-dropdown-empty-padding: 10px 0 !default; |
||||
$--select-dropdown-border: solid 1px $--border-color-light !default; |
||||
|
||||
/* Alert |
||||
-------------------------- */ |
||||
$--alert-padding: 8px 16px !default; |
||||
/// borderRadius||Border|2 |
||||
$--alert-border-radius: $--border-radius-base !default; |
||||
/// fontSize||Font|1 |
||||
$--alert-title-font-size: 13px !default; |
||||
/// fontSize||Font|1 |
||||
$--alert-description-font-size: 12px !default; |
||||
/// fontSize||Font|1 |
||||
$--alert-close-font-size: 12px !default; |
||||
/// fontSize||Font|1 |
||||
$--alert-close-customed-font-size: 13px !default; |
||||
|
||||
$--alert-success-color: $--color-success-lighter !default; |
||||
$--alert-info-color: $--color-info-lighter !default; |
||||
$--alert-warning-color: $--color-warning-lighter !default; |
||||
$--alert-danger-color: $--color-danger-lighter !default; |
||||
|
||||
/// height||Other|4 |
||||
$--alert-icon-size: 16px !default; |
||||
/// height||Other|4 |
||||
$--alert-icon-large-size: 28px !default; |
||||
|
||||
/* MessageBox |
||||
-------------------------- */ |
||||
/// color||Color|0 |
||||
$--messagebox-title-color: $--color-text-primary !default; |
||||
$--msgbox-width: 420px !default; |
||||
$--msgbox-border-radius: 4px !default; |
||||
/// fontSize||Font|1 |
||||
$--messagebox-font-size: $--font-size-large !default; |
||||
/// fontSize||Font|1 |
||||
$--messagebox-content-font-size: $--font-size-base !default; |
||||
/// color||Color|0 |
||||
$--messagebox-content-color: $--color-text-regular !default; |
||||
/// fontSize||Font|1 |
||||
$--messagebox-error-font-size: 12px !default; |
||||
$--msgbox-padding-primary: 15px !default; |
||||
/// color||Color|0 |
||||
$--messagebox-success-color: $--color-success !default; |
||||
/// color||Color|0 |
||||
$--messagebox-info-color: $--color-info !default; |
||||
/// color||Color|0 |
||||
$--messagebox-warning-color: $--color-warning !default; |
||||
/// color||Color|0 |
||||
$--messagebox-danger-color: $--color-danger !default; |
||||
|
||||
/* Message |
||||
-------------------------- */ |
||||
$--message-shadow: $--box-shadow-base !default; |
||||
$--message-min-width: 380px !default; |
||||
$--message-background-color: #edf2fc !default; |
||||
$--message-padding: 15px 15px 15px 20px !default; |
||||
/// color||Color|0 |
||||
$--message-close-icon-color: $--color-text-placeholder !default; |
||||
/// height||Other|4 |
||||
$--message-close-size: 16px !default; |
||||
/// color||Color|0 |
||||
$--message-close-hover-color: $--color-text-secondary !default; |
||||
|
||||
/// color||Color|0 |
||||
$--message-success-font-color: $--color-success !default; |
||||
/// color||Color|0 |
||||
$--message-info-font-color: $--color-info !default; |
||||
/// color||Color|0 |
||||
$--message-warning-font-color: $--color-warning !default; |
||||
/// color||Color|0 |
||||
$--message-danger-font-color: $--color-danger !default; |
||||
|
||||
/* Notification |
||||
-------------------------- */ |
||||
$--notification-width: 330px !default; |
||||
/// padding||Spacing|3 |
||||
$--notification-padding: 14px 26px 14px 13px !default; |
||||
$--notification-radius: 8px !default; |
||||
$--notification-shadow: $--box-shadow-light !default; |
||||
/// color||Color|0 |
||||
$--notification-border-color: $--border-color-lighter !default; |
||||
$--notification-icon-size: 24px !default; |
||||
$--notification-close-font-size: $--message-close-size !default; |
||||
$--notification-group-margin-left: 13px !default; |
||||
$--notification-group-margin-right: 8px !default; |
||||
/// fontSize||Font|1 |
||||
$--notification-content-font-size: $--font-size-base !default; |
||||
/// color||Color|0 |
||||
$--notification-content-color: $--color-text-regular !default; |
||||
/// fontSize||Font|1 |
||||
$--notification-title-font-size: 16px !default; |
||||
/// color||Color|0 |
||||
$--notification-title-color: $--color-text-primary !default; |
||||
|
||||
/// color||Color|0 |
||||
$--notification-close-color: $--color-text-secondary !default; |
||||
/// color||Color|0 |
||||
$--notification-close-hover-color: $--color-text-regular !default; |
||||
|
||||
/// color||Color|0 |
||||
$--notification-success-icon-color: $--color-success !default; |
||||
/// color||Color|0 |
||||
$--notification-info-icon-color: $--color-info !default; |
||||
/// color||Color|0 |
||||
$--notification-warning-icon-color: $--color-warning !default; |
||||
/// color||Color|0 |
||||
$--notification-danger-icon-color: $--color-danger !default; |
||||
|
||||
/* Input |
||||
-------------------------- */ |
||||
$--input-font-size: $--font-size-base !default; |
||||
/// color||Color|0 |
||||
$--input-font-color: $--color-text-regular !default; |
||||
/// height||Other|4 |
||||
$--input-width: 140px !default; |
||||
/// height||Other|4 |
||||
$--input-height: 40px !default; |
||||
$--input-border: $--border-base !default; |
||||
$--input-border-color: $--border-color-base !default; |
||||
/// borderRadius||Border|2 |
||||
$--input-border-radius: $--border-radius-base !default; |
||||
$--input-border-color-hover: $--border-color-hover !default; |
||||
/// color||Color|0 |
||||
$--input-background-color: $--color-white !default; |
||||
$--input-fill-disabled: $--disabled-fill-base !default; |
||||
$--input-color-disabled: $--font-color-disabled-base !default; |
||||
/// color||Color|0 |
||||
$--input-icon-color: $--color-text-placeholder !default; |
||||
/// color||Color|0 |
||||
$--input-placeholder-color: $--color-text-placeholder !default; |
||||
$--input-max-width: 314px !default; |
||||
|
||||
$--input-hover-border: $--border-color-hover !default; |
||||
$--input-clear-hover-color: $--color-text-secondary !default; |
||||
|
||||
$--input-focus-border: $--color-primary !default; |
||||
$--input-focus-fill: $--color-white !default; |
||||
|
||||
$--input-disabled-fill: $--disabled-fill-base !default; |
||||
$--input-disabled-border: $--disabled-border-base !default; |
||||
$--input-disabled-color: $--disabled-color-base !default; |
||||
$--input-disabled-placeholder-color: $--color-text-placeholder !default; |
||||
|
||||
/// fontSize||Font|1 |
||||
$--input-medium-font-size: 14px !default; |
||||
/// height||Other|4 |
||||
$--input-medium-height: 36px !default; |
||||
/// fontSize||Font|1 |
||||
$--input-small-font-size: 13px !default; |
||||
/// height||Other|4 |
||||
$--input-small-height: 32px !default; |
||||
/// fontSize||Font|1 |
||||
$--input-mini-font-size: 12px !default; |
||||
/// height||Other|4 |
||||
$--input-mini-height: 28px !default; |
||||
|
||||
/* Cascader |
||||
-------------------------- */ |
||||
/// color||Color|0 |
||||
$--cascader-menu-font-color: $--color-text-regular !default; |
||||
/// color||Color|0 |
||||
$--cascader-menu-selected-font-color: $--color-primary !default; |
||||
$--cascader-menu-fill: $--fill-base !default; |
||||
$--cascader-menu-font-size: $--font-size-base !default; |
||||
$--cascader-menu-radius: $--border-radius-base !default; |
||||
$--cascader-menu-border: solid 1px $--border-color-light !default; |
||||
$--cascader-menu-shadow: $--box-shadow-light !default; |
||||
$--cascader-node-background-hover: $--background-color-base !default; |
||||
$--cascader-node-color-disabled:$--color-text-placeholder !default; |
||||
$--cascader-color-empty:$--color-text-placeholder !default; |
||||
$--cascader-tag-background: #f0f2f5; |
||||
|
||||
/* Group |
||||
-------------------------- */ |
||||
$--group-option-flex: 0 0 (1/5) * 100% !default; |
||||
$--group-option-offset-bottom: 12px !default; |
||||
$--group-option-fill-hover: rgba($--color-black, 0.06) !default; |
||||
$--group-title-color: $--color-black !default; |
||||
$--group-title-font-size: $--font-size-base !default; |
||||
$--group-title-width: 66px !default; |
||||
|
||||
/* Tab |
||||
-------------------------- */ |
||||
$--tab-font-size: $--font-size-base !default; |
||||
$--tab-border-line: 1px solid #e4e4e4 !default; |
||||
$--tab-header-color-active: $--color-text-secondary !default; |
||||
$--tab-header-color-hover: $--color-text-regular !default; |
||||
$--tab-header-color: $--color-text-regular !default; |
||||
$--tab-header-fill-active: rgba($--color-black, 0.06) !default; |
||||
$--tab-header-fill-hover: rgba($--color-black, 0.06) !default; |
||||
$--tab-vertical-header-width: 90px !default; |
||||
$--tab-vertical-header-count-color: $--color-white !default; |
||||
$--tab-vertical-header-count-fill: $--color-text-secondary !default; |
||||
|
||||
/* Button |
||||
-------------------------- */ |
||||
/// fontSize||Font|1 |
||||
$--button-font-size: $--font-size-base !default; |
||||
/// fontWeight||Font|1 |
||||
$--button-font-weight: $--font-weight-primary !default; |
||||
/// borderRadius||Border|2 |
||||
$--button-border-radius: $--border-radius-base !default; |
||||
/// padding||Spacing|3 |
||||
$--button-padding-vertical: 12px !default; |
||||
/// padding||Spacing|3 |
||||
$--button-padding-horizontal: 20px !default; |
||||
|
||||
/// fontSize||Font|1 |
||||
$--button-medium-font-size: $--font-size-base !default; |
||||
/// borderRadius||Border|2 |
||||
$--button-medium-border-radius: $--border-radius-base !default; |
||||
/// padding||Spacing|3 |
||||
$--button-medium-padding-vertical: 10px !default; |
||||
/// padding||Spacing|3 |
||||
$--button-medium-padding-horizontal: 20px !default; |
||||
|
||||
/// fontSize||Font|1 |
||||
$--button-small-font-size: 12px !default; |
||||
$--button-small-border-radius: #{$--border-radius-base - 1} !default; |
||||
/// padding||Spacing|3 |
||||
$--button-small-padding-vertical: 9px !default; |
||||
/// padding||Spacing|3 |
||||
$--button-small-padding-horizontal: 15px !default; |
||||
/// fontSize||Font|1 |
||||
$--button-mini-font-size: 12px !default; |
||||
$--button-mini-border-radius: #{$--border-radius-base - 1} !default; |
||||
/// padding||Spacing|3 |
||||
$--button-mini-padding-vertical: 7px !default; |
||||
/// padding||Spacing|3 |
||||
$--button-mini-padding-horizontal: 15px !default; |
||||
|
||||
/// color||Color|0 |
||||
$--button-default-font-color: $--color-text-regular !default; |
||||
/// color||Color|0 |
||||
$--button-default-background-color: $--color-white !default; |
||||
/// color||Color|0 |
||||
$--button-default-border-color: $--border-color-base !default; |
||||
|
||||
/// color||Color|0 |
||||
$--button-disabled-font-color: $--color-text-placeholder !default; |
||||
/// color||Color|0 |
||||
$--button-disabled-background-color: $--color-white !default; |
||||
/// color||Color|0 |
||||
$--button-disabled-border-color: $--border-color-lighter !default; |
||||
|
||||
/// color||Color|0 |
||||
$--button-primary-border-color: $--color-primary !default; |
||||
/// color||Color|0 |
||||
$--button-primary-font-color: $--color-white !default; |
||||
/// color||Color|0 |
||||
$--button-primary-background-color: $--color-primary !default; |
||||
/// color||Color|0 |
||||
$--button-success-border-color: $--color-success !default; |
||||
/// color||Color|0 |
||||
$--button-success-font-color: $--color-white !default; |
||||
/// color||Color|0 |
||||
$--button-success-background-color: $--color-success !default; |
||||
/// color||Color|0 |
||||
$--button-warning-border-color: $--color-warning !default; |
||||
/// color||Color|0 |
||||
$--button-warning-font-color: $--color-white !default; |
||||
/// color||Color|0 |
||||
$--button-warning-background-color: $--color-warning !default; |
||||
/// color||Color|0 |
||||
$--button-danger-border-color: $--color-danger !default; |
||||
/// color||Color|0 |
||||
$--button-danger-font-color: $--color-white !default; |
||||
/// color||Color|0 |
||||
$--button-danger-background-color: $--color-danger !default; |
||||
/// color||Color|0 |
||||
$--button-info-border-color: $--color-info !default; |
||||
/// color||Color|0 |
||||
$--button-info-font-color: $--color-white !default; |
||||
/// color||Color|0 |
||||
$--button-info-background-color: $--color-info !default; |
||||
|
||||
$--button-hover-tint-percent: 20% !default; |
||||
$--button-active-shade-percent: 10% !default; |
||||
|
||||
|
||||
/* cascader |
||||
-------------------------- */ |
||||
$--cascader-height: 200px !default; |
||||
|
||||
/* Switch |
||||
-------------------------- */ |
||||
/// color||Color|0 |
||||
$--switch-on-color: $--color-primary !default; |
||||
/// color||Color|0 |
||||
$--switch-off-color: $--border-color-base !default; |
||||
/// fontSize||Font|1 |
||||
$--switch-font-size: $--font-size-base !default; |
||||
$--switch-core-border-radius: 10px !default; |
||||
// height||Other|4 TODO: width 代码写死的40px 所以下面这三个属性都没意义 |
||||
$--switch-width: 40px !default; |
||||
// height||Other|4 |
||||
$--switch-height: 20px !default; |
||||
// height||Other|4 |
||||
$--switch-button-size: 16px !default; |
||||
|
||||
/* Dialog |
||||
-------------------------- */ |
||||
$--dialog-background-color: $--color-white !default; |
||||
$--dialog-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !default; |
||||
/// fontSize||Font|1 |
||||
$--dialog-title-font-size: $--font-size-large !default; |
||||
/// fontSize||Font|1 |
||||
$--dialog-content-font-size: 14px !default; |
||||
/// fontLineHeight||LineHeight|2 |
||||
$--dialog-font-line-height: $--font-line-height-primary !default; |
||||
/// padding||Spacing|3 |
||||
$--dialog-padding-primary: 20px !default; |
||||
|
||||
/* Table |
||||
-------------------------- */ |
||||
/// color||Color|0 |
||||
$--table-border-color: $--border-color-lighter !default; |
||||
$--table-border: 1px solid $--table-border-color !default; |
||||
/// color||Color|0 |
||||
$--table-font-color: $--color-text-regular !default; |
||||
/// color||Color|0 |
||||
$--table-header-font-color: $--color-text-secondary !default; |
||||
/// color||Color|0 |
||||
$--table-row-hover-background-color: $--background-color-base !default; |
||||
$--table-current-row-background-color: $--color-primary-light-9 !default; |
||||
/// color||Color|0 |
||||
$--table-header-background-color: $--color-white !default; |
||||
$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default; |
||||
|
||||
/* Pagination |
||||
-------------------------- */ |
||||
/// fontSize||Font|1 |
||||
$--pagination-font-size: 13px !default; |
||||
/// color||Color|0 |
||||
$--pagination-background-color: $--color-white !default; |
||||
/// color||Color|0 |
||||
$--pagination-font-color: $--color-text-primary !default; |
||||
$--pagination-border-radius: 3px !default; |
||||
/// color||Color|0 |
||||
$--pagination-button-color: $--color-text-primary !default; |
||||
/// height||Other|4 |
||||
$--pagination-button-width: 35.5px !default; |
||||
/// height||Other|4 |
||||
$--pagination-button-height: 28px !default; |
||||
/// color||Color|0 |
||||
$--pagination-button-disabled-color: $--color-text-placeholder !default; |
||||
/// color||Color|0 |
||||
$--pagination-button-disabled-background-color: $--color-white !default; |
||||
/// color||Color|0 |
||||
$--pagination-hover-color: $--color-primary !default; |
||||
|
||||
/* Popup |
||||
-------------------------- */ |
||||
/// color||Color|0 |
||||
$--popup-modal-background-color: $--color-black !default; |
||||
/// opacity||Other|1 |
||||
$--popup-modal-opacity: 0.5 !default; |
||||
|
||||
/* Popover |
||||
-------------------------- */ |
||||
/// color||Color|0 |
||||
$--popover-background-color: $--color-white !default; |
||||
/// fontSize||Font|1 |
||||
$--popover-font-size: $--font-size-base !default; |
||||
/// color||Color|0 |
||||
$--popover-border-color: $--border-color-lighter !default; |
||||
$--popover-arrow-size: 6px !default; |
||||
/// padding||Spacing|3 |
||||
$--popover-padding: 12px !default; |
||||
$--popover-padding-large: 18px 20px !default; |
||||
/// fontSize||Font|1 |
||||
$--popover-title-font-size: 16px !default; |
||||
/// color||Color|0 |
||||
$--popover-title-font-color: $--color-text-primary !default; |
||||
|
||||
/* Tooltip |
||||
-------------------------- */ |
||||
/// color|1|Color|0 |
||||
$--tooltip-fill: $--color-text-primary !default; |
||||
/// color|1|Color|0 |
||||
$--tooltip-color: $--color-white !default; |
||||
/// fontSize||Font|1 |
||||
$--tooltip-font-size: 12px !default; |
||||
/// color||Color|0 |
||||
$--tooltip-border-color: $--color-text-primary !default; |
||||
$--tooltip-arrow-size: 6px !default; |
||||
/// padding||Spacing|3 |
||||
$--tooltip-padding: 10px !default; |
||||
|
||||
/* Tag |
||||
-------------------------- */ |
||||
/// color||Color|0 |
||||
$--tag-info-color: $--color-info !default; |
||||
/// color||Color|0 |
||||
$--tag-primary-color: $--color-primary !default; |
||||
/// color||Color|0 |
||||
$--tag-success-color: $--color-success !default; |
||||
/// color||Color|0 |
||||
$--tag-warning-color: $--color-warning !default; |
||||
/// color||Color|0 |
||||
$--tag-danger-color: $--color-danger !default; |
||||
/// fontSize||Font|1 |
||||
$--tag-font-size: 12px !default; |
||||
$--tag-border-radius: 4px !default; |
||||
$--tag-padding: 0 10px !default; |
||||
|
||||
/* Tree |
||||
-------------------------- */ |
||||
/// color||Color|0 |
||||
$--tree-node-hover-background-color: $--background-color-base !default; |
||||
/// color||Color|0 |
||||
$--tree-font-color: $--color-text-regular !default; |
||||
/// color||Color|0 |
||||
$--tree-expand-icon-color: $--color-text-placeholder !default; |
||||
|
||||
/* Dropdown |
||||
-------------------------- */ |
||||
$--dropdown-menu-box-shadow: $--box-shadow-light !default; |
||||
$--dropdown-menuItem-hover-fill: $--color-primary-light-9 !default; |
||||
$--dropdown-menuItem-hover-color: $--link-color !default; |
||||
|
||||
/* Badge |
||||
-------------------------- */ |
||||
/// color||Color|0 |
||||
$--badge-background-color: $--color-danger !default; |
||||
$--badge-radius: 10px !default; |
||||
/// fontSize||Font|1 |
||||
$--badge-font-size: 12px !default; |
||||
/// padding||Spacing|3 |
||||
$--badge-padding: 6px !default; |
||||
/// height||Other|4 |
||||
$--badge-size: 18px !default; |
||||
|
||||
/* Card |
||||
--------------------------*/ |
||||
/// color||Color|0 |
||||
$--card-border-color: $--border-color-lighter !default; |
||||
$--card-border-radius: 4px !default; |
||||
/// padding||Spacing|3 |
||||
$--card-padding: 20px !default; |
||||
|
||||
/* Slider |
||||
--------------------------*/ |
||||
/// color||Color|0 |
||||
$--slider-main-background-color: $--color-primary !default; |
||||
/// color||Color|0 |
||||
$--slider-runway-background-color: $--border-color-light !default; |
||||
$--slider-button-hover-color: mix($--color-primary, black, 97%) !default; |
||||
$--slider-stop-background-color: $--color-white !default; |
||||
$--slider-disable-color: $--color-text-placeholder !default; |
||||
$--slider-margin: 16px 0 !default; |
||||
$--slider-border-radius: 3px !default; |
||||
/// height|1|Other|4 |
||||
$--slider-height: 6px !default; |
||||
/// height||Other|4 |
||||
$--slider-button-size: 16px !default; |
||||
$--slider-button-wrapper-size: 36px !default; |
||||
$--slider-button-wrapper-offset: -15px !default; |
||||
|
||||
/* Steps |
||||
--------------------------*/ |
||||
$--steps-border-color: $--disabled-border-base !default; |
||||
$--steps-border-radius: 4px !default; |
||||
$--steps-padding: 20px !default; |
||||
|
||||
/* Menu |
||||
--------------------------*/ |
||||
/// fontSize||Font|1 |
||||
$--menu-item-font-size: $--font-size-base !default; |
||||
/// color||Color|0 |
||||
$--menu-item-font-color: $--color-text-primary !default; |
||||
/// color||Color|0 |
||||
$--menu-background-color: $--color-white !default; |
||||
$--menu-item-hover-fill: $--color-primary-light-9 !default; |
||||
|
||||
/* Rate |
||||
--------------------------*/ |
||||
$--rate-height: 20px !default; |
||||
/// fontSize||Font|1 |
||||
$--rate-font-size: $--font-size-base !default; |
||||
/// height||Other|3 |
||||
$--rate-icon-size: 18px !default; |
||||
/// margin||Spacing|2 |
||||
$--rate-icon-margin: 6px !default; |
||||
$--rate-icon-color: $--color-text-placeholder !default; |
||||
|
||||
/* DatePicker |
||||
--------------------------*/ |
||||
$--datepicker-font-color: $--color-text-regular !default; |
||||
/// color|1|Color|0 |
||||
$--datepicker-off-font-color: $--color-text-placeholder !default; |
||||
/// color||Color|0 |
||||
$--datepicker-header-font-color: $--color-text-regular !default; |
||||
$--datepicker-icon-color: $--color-text-primary !default; |
||||
$--datepicker-border-color: $--disabled-border-base !default; |
||||
$--datepicker-inner-border-color: #e4e4e4 !default; |
||||
/// color||Color|0 |
||||
$--datepicker-inrange-background-color: $--border-color-extra-light !default; |
||||
/// color||Color|0 |
||||
$--datepicker-inrange-hover-background-color: $--border-color-extra-light !default; |
||||
/// color||Color|0 |
||||
$--datepicker-active-color: $--color-primary !default; |
||||
/// color||Color|0 |
||||
$--datepicker-hover-font-color: $--color-primary !default; |
||||
$--datepicker-cell-hover-color: #fff !default; |
||||
|
||||
/* Loading |
||||
--------------------------*/ |
||||
/// height||Other|4 |
||||
$--loading-spinner-size: 42px !default; |
||||
/// height||Other|4 |
||||
$--loading-fullscreen-spinner-size: 50px !default; |
||||
|
||||
/* Scrollbar |
||||
--------------------------*/ |
||||
$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default; |
||||
$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default; |
||||
|
||||
/* Carousel |
||||
--------------------------*/ |
||||
/// fontSize||Font|1 |
||||
$--carousel-arrow-font-size: 12px !default; |
||||
$--carousel-arrow-size: 36px !default; |
||||
$--carousel-arrow-background: rgba(31, 45, 61, 0.11) !default; |
||||
$--carousel-arrow-hover-background: rgba(31, 45, 61, 0.23) !default; |
||||
/// width||Other|4 |
||||
$--carousel-indicator-width: 30px !default; |
||||
/// height||Other|4 |
||||
$--carousel-indicator-height: 2px !default; |
||||
$--carousel-indicator-padding-horizontal: 4px !default; |
||||
$--carousel-indicator-padding-vertical: 12px !default; |
||||
$--carousel-indicator-out-color: $--border-color-hover !default; |
||||
|
||||
/* Collapse |
||||
--------------------------*/ |
||||
/// color||Color|0 |
||||
$--collapse-border-color: $--border-color-lighter !default; |
||||
/// height||Other|4 |
||||
$--collapse-header-height: 48px !default; |
||||
/// color||Color|0 |
||||
$--collapse-header-background-color: $--color-white !default; |
||||
/// color||Color|0 |
||||
$--collapse-header-font-color: $--color-text-primary !default; |
||||
/// fontSize||Font|1 |
||||
$--collapse-header-font-size: 13px !default; |
||||
/// color||Color|0 |
||||
$--collapse-content-background-color: $--color-white !default; |
||||
/// fontSize||Font|1 |
||||
$--collapse-content-font-size: 13px !default; |
||||
/// color||Color|0 |
||||
$--collapse-content-font-color: $--color-text-primary !default; |
||||
|
||||
/* Transfer |
||||
--------------------------*/ |
||||
$--transfer-border-color: $--border-color-lighter !default; |
||||
$--transfer-border-radius: $--border-radius-base !default; |
||||
/// height||Other|4 |
||||
$--transfer-panel-width: 200px !default; |
||||
/// height||Other|4 |
||||
$--transfer-panel-header-height: 40px !default; |
||||
/// color||Color|0 |
||||
$--transfer-panel-header-background-color: $--background-color-base !default; |
||||
/// height||Other|4 |
||||
$--transfer-panel-footer-height: 40px !default; |
||||
/// height||Other|4 |
||||
$--transfer-panel-body-height: 246px !default; |
||||
/// height||Other|4 |
||||
$--transfer-item-height: 30px !default; |
||||
/// height||Other|4 |
||||
$--transfer-filter-height: 32px !default; |
||||
|
||||
/* Header |
||||
--------------------------*/ |
||||
$--header-padding: 0 20px !default; |
||||
|
||||
/* Footer |
||||
--------------------------*/ |
||||
$--footer-padding: 0 20px !default; |
||||
|
||||
/* Main |
||||
--------------------------*/ |
||||
$--main-padding: 20px !default; |
||||
|
||||
/* Timeline |
||||
--------------------------*/ |
||||
$--timeline-node-size-normal: 12px !default; |
||||
$--timeline-node-size-large: 14px !default; |
||||
$--timeline-node-color: $--border-color-light !default; |
||||
|
||||
/* Backtop |
||||
--------------------------*/ |
||||
/// color||Color|0 |
||||
$--backtop-background-color: $--color-white !default; |
||||
/// color||Color|0 |
||||
$--backtop-font-color: $--color-primary !default; |
||||
/// color||Color|0 |
||||
$--backtop-hover-background-color: $--border-color-extra-light !default; |
||||
|
||||
/* Link |
||||
--------------------------*/ |
||||
/// fontSize||Font|1 |
||||
$--link-font-size: $--font-size-base !default; |
||||
/// fontWeight||Font|1 |
||||
$--link-font-weight: $--font-weight-primary !default; |
||||
/// color||Color|0 |
||||
$--link-default-font-color: $--color-text-regular !default; |
||||
/// color||Color|0 |
||||
$--link-default-active-color: $--color-primary !default; |
||||
/// color||Color|0 |
||||
$--link-disabled-font-color: $--color-text-placeholder !default; |
||||
/// color||Color|0 |
||||
$--link-primary-font-color: $--color-primary !default; |
||||
/// color||Color|0 |
||||
$--link-success-font-color: $--color-success !default; |
||||
/// color||Color|0 |
||||
$--link-warning-font-color: $--color-warning !default; |
||||
/// color||Color|0 |
||||
$--link-danger-font-color: $--color-danger !default; |
||||
/// color||Color|0 |
||||
$--link-info-font-color: $--color-info !default; |
||||
/* Calendar |
||||
--------------------------*/ |
||||
/// border||Other|4 |
||||
$--calendar-border: $--table-border !default; |
||||
/// color||Other|4 |
||||
$--calendar-selected-background-color: #F2F8FE !default; |
||||
$--calendar-cell-width: 85px !default; |
||||
|
||||
/* Form |
||||
-------------------------- */ |
||||
/// fontSize||Font|1 |
||||
$--form-label-font-size: $--font-size-base !default; |
||||
|
||||
/* Avatar |
||||
--------------------------*/ |
||||
/// color||Color|0 |
||||
$--avatar-font-color: #fff !default; |
||||
/// color||Color|0 |
||||
$--avatar-background-color: #C0C4CC !default; |
||||
/// fontSize||Font Size|1 |
||||
$--avatar-text-font-size: 14px !default; |
||||
/// fontSize||Font Size|1 |
||||
$--avatar-icon-font-size: 18px !default; |
||||
/// borderRadius||Border|2 |
||||
$--avatar-border-radius: $--border-radius-base !default; |
||||
/// size|1|Avatar Size|3 |
||||
$--avatar-large-size: 40px !default; |
||||
/// size|1|Avatar Size|3 |
||||
$--avatar-medium-size: 36px !default; |
||||
/// size|1|Avatar Size|3 |
||||
$--avatar-small-size: 28px !default; |
||||
|
||||
/* Break-point |
||||
--------------------------*/ |
||||
$--sm: 768px !default; |
||||
$--md: 992px !default; |
||||
$--lg: 1200px !default; |
||||
$--xl: 1920px !default; |
||||
|
||||
$--breakpoints: ( |
||||
'xs' : (max-width: $--sm - 1), |
||||
'sm' : (min-width: $--sm), |
||||
'md' : (min-width: $--md), |
||||
'lg' : (min-width: $--lg), |
||||
'xl' : (min-width: $--xl) |
||||
); |
||||
|
||||
$--breakpoints-spec: ( |
||||
'xs-only' : (max-width: $--sm - 1), |
||||
'sm-and-up' : (min-width: $--sm), |
||||
'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})", |
||||
'sm-and-down': (max-width: $--md - 1), |
||||
'md-and-up' : (min-width: $--md), |
||||
'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})", |
||||
'md-and-down': (max-width: $--lg - 1), |
||||
'lg-and-up' : (min-width: $--lg), |
||||
'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})", |
||||
'lg-and-down': (max-width: $--xl - 1), |
||||
'xl-only' : (min-width: $--xl), |
||||
); |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,45 @@ |
||||
{ |
||||
"name": "vue-manage-system", |
||||
"version": "4.2.0", |
||||
"private": true, |
||||
"scripts": { |
||||
"dev": "npm run serve", |
||||
"serve": "vue-cli-service serve", |
||||
"build": "vue-cli-service build", |
||||
"analyzer": "cross-env use_analyzer=true npm run serve" |
||||
}, |
||||
"dependencies": { |
||||
"ant-design-vue": "^1.7.2", |
||||
"axios": "^0.18.0", |
||||
"babel-polyfill": "^6.26.0", |
||||
"default-passive-events": "^2.0.0", |
||||
"echarts": "^4.8.0", |
||||
"element-ui": "^2.13.0", |
||||
"mavon-editor": "^2.6.17", |
||||
"moment": "^2.21.0", |
||||
"postcss-px2rem": "^0.3.0", |
||||
"px2rem-loader": "^0.1.9", |
||||
"view-design": "^4.4.0", |
||||
"vue": "^2.6.10", |
||||
"vue-cropperjs": "^3.0.0", |
||||
"vue-i18n": "^8.10.0", |
||||
"vue-pdf": "^4.2.0", |
||||
"vue-quill-editor": "^3.0.6", |
||||
"vue-router": "^3.0.3", |
||||
"vuedraggable": "^2.17.0", |
||||
"vuex": "^3.4.0" |
||||
}, |
||||
"devDependencies": { |
||||
"@vue/cli-plugin-babel": "^3.9.0", |
||||
"@vue/cli-service": "^3.9.0", |
||||
"autoprefixer": "^10.0.1", |
||||
"babel-plugin-import": "^1.13.1", |
||||
"element-theme-chalk": "^2.13.2", |
||||
"less": "^4.1.0", |
||||
"less-loader": "^4.0.1", |
||||
"node-sass": "^4.13.0", |
||||
"sass-loader": "^8.0.0", |
||||
"vue-template-compiler": "^2.6.10", |
||||
"webpack-bundle-analyzer": "^4.3.0" |
||||
} |
||||
} |
||||
@ -0,0 +1,5 @@ |
||||
module.exports = { |
||||
plugins: { |
||||
autoprefixer: {} |
||||
} |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
||||
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> |
||||
<link rel="stylesheet" href="//at.alicdn.com/t/font_830376_qzecyukz0s.css"> |
||||
<!-- <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> --> |
||||
<!-- <script src="https://unpkg.com/gojs/release/go-debug.js"></script> --> |
||||
|
||||
<title>智慧金融管理平台</title> |
||||
</head> |
||||
<body> |
||||
<noscript> |
||||
<strong>We're sorry but vms doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> |
||||
</noscript> |
||||
<div id="app"></div> |
||||
<!-- built files will be auto injected --> |
||||
</body> |
||||
|
||||
</html> |
||||
@ -0,0 +1,31 @@ |
||||
<template> |
||||
<div id="app"> |
||||
<router-view></router-view> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'App', |
||||
created() { |
||||
//在页面加载时读取sessionStorage里的状态信息 |
||||
if (sessionStorage.getItem('store')) { |
||||
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store')))); |
||||
} |
||||
|
||||
//在页面刷新时将vuex里的信息保存到sessionStorage里 |
||||
window.addEventListener('beforeunload', () => { |
||||
sessionStorage.setItem('store', JSON.stringify(this.$store.state)); |
||||
}); |
||||
|
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style> |
||||
@import './assets/css/main.css'; |
||||
/* @import "./assets/css/color-dark.css"; */ |
||||
/*深色主题*/ |
||||
@import './assets/css/theme-green/color-green.css'; |
||||
/* 浅绿色主题 */ |
||||
</style> |
||||
@ -0,0 +1,28 @@ |
||||
.header{ |
||||
background-color: #242f42; |
||||
} |
||||
.login-wrap{ |
||||
background: #324157; |
||||
} |
||||
.plugins-tips{ |
||||
background: #eef1f6; |
||||
} |
||||
.plugins-tips a{ |
||||
color: #20a0ff; |
||||
} |
||||
.el-upload--text em { |
||||
color: #20a0ff; |
||||
} |
||||
.pure-button{ |
||||
background: #20a0ff; |
||||
} |
||||
.tags-li.active { |
||||
border: 1px solid #409EFF; |
||||
background-color: #409EFF; |
||||
} |
||||
.message-title{ |
||||
color: #20a0ff; |
||||
} |
||||
.collapse-btn:hover{ |
||||
background: rgb(40,52,70); |
||||
} |
||||
@ -0,0 +1,575 @@ |
||||
/* 公共样式文件 */ |
||||
.bgw { |
||||
background: #fff; |
||||
} |
||||
.bg-yellow{ |
||||
background:#FFA56A; |
||||
} |
||||
.bg-refuse{ |
||||
background: #FF9784; |
||||
} |
||||
.bg-green{ |
||||
background: #46C435; |
||||
} |
||||
.c-white{ |
||||
color: #fff; |
||||
} |
||||
.c-black { |
||||
color: #666666; |
||||
} |
||||
.c-gray { |
||||
color: #cccccc; |
||||
} |
||||
.c-blue { |
||||
color: #52b1ff!important; |
||||
} |
||||
.c-red { |
||||
color: #ff8738; |
||||
} |
||||
.c-yellow{ |
||||
color: #FFC76E; |
||||
} |
||||
.c-green{ |
||||
color: #46C435; |
||||
} |
||||
.c-refuse{ |
||||
color: #FF9784; |
||||
} |
||||
.font-blue { |
||||
color: #00b9ff; |
||||
} |
||||
.bgred{ |
||||
background: #ff8738; |
||||
} |
||||
.container_bg { |
||||
width: 86%; |
||||
margin: auto; |
||||
} |
||||
.text-color { |
||||
color: #9b9b9b; |
||||
} |
||||
.cursor { |
||||
cursor: pointer; |
||||
} |
||||
.wd100 { |
||||
width: 100% !important; |
||||
} |
||||
.wd95 { |
||||
width: 95%; |
||||
} |
||||
.wd90 { |
||||
width: 90%; |
||||
} |
||||
.wd80 { |
||||
width: 80%; |
||||
} |
||||
.wd85 { |
||||
width: 85%; |
||||
} |
||||
.wd70 { |
||||
width: 70%!important; |
||||
} |
||||
.wd60 { |
||||
width: 60%; |
||||
} |
||||
.wd50 { |
||||
width: 50%; |
||||
} |
||||
.wd48 { |
||||
width: 48%; |
||||
} |
||||
.wd45 { |
||||
width: 45%; |
||||
} |
||||
.wd40 { |
||||
width: 40%; |
||||
} |
||||
.wd30 { |
||||
width: 30%; |
||||
} |
||||
.wd35 { |
||||
width: 35%; |
||||
} |
||||
.wd23{ |
||||
width: 23%; |
||||
} |
||||
.wd25{ |
||||
width: 25%; |
||||
} |
||||
.wd20 { |
||||
width: 20%; |
||||
} |
||||
.wd15 { |
||||
width: 15%; |
||||
} |
||||
.wd10 { |
||||
width: 10%; |
||||
} |
||||
.wd5 { |
||||
width: 5%; |
||||
} |
||||
.wd0 { |
||||
width: 0; |
||||
} |
||||
.ht100 { |
||||
height: 100%; |
||||
} |
||||
.ht40 { |
||||
height: 35px!important; |
||||
} |
||||
.ht50 { |
||||
height: 50px; |
||||
} |
||||
.pd0{ |
||||
padding: 0!important; |
||||
} |
||||
.pdlr20{ |
||||
padding-left: 10px; |
||||
padding-right: 10px; |
||||
} |
||||
.pdl0{ |
||||
padding-left: 0; |
||||
} |
||||
.pdl10 { |
||||
padding-left: 10px !important; |
||||
} |
||||
.pdl15 { |
||||
padding-left: 15px !important; |
||||
} |
||||
.pdl20 { |
||||
padding-left: 20px !important; |
||||
} |
||||
.pdl30 { |
||||
padding-left: 30px !important; |
||||
} |
||||
.pdr0{ |
||||
padding-right: 0; |
||||
} |
||||
.pdr10 { |
||||
padding-right: 10px !important; |
||||
} |
||||
.pdr15 { |
||||
padding-right: 15px !important; |
||||
} |
||||
.pdr20 { |
||||
padding-right: 20px !important; |
||||
} |
||||
.pdr30 { |
||||
padding-right: 30px !important; |
||||
} |
||||
.pdt20 { |
||||
padding-top: 20px; |
||||
} |
||||
.pdt30 { |
||||
padding-top: 30px; |
||||
} |
||||
.pdt40 { |
||||
padding-top: 40px; |
||||
} |
||||
.pdt50 { |
||||
padding-top: 50px; |
||||
} |
||||
.pdt60 { |
||||
padding-top: 60px; |
||||
} |
||||
.pdb30 { |
||||
padding-bottom: 30px; |
||||
} |
||||
.pdb40 { |
||||
padding-bottom: 40px; |
||||
} |
||||
.pdb20 { |
||||
padding-bottom: 20px; |
||||
} |
||||
.pdb10 { |
||||
padding-bottom: 10px; |
||||
} |
||||
.pdt10 { |
||||
padding-top: 10px !important; |
||||
} |
||||
.pdtb10 { |
||||
padding-top: 10px; |
||||
padding-bottom: 10px; |
||||
} |
||||
.pdtb20 { |
||||
padding-top: 20px; |
||||
padding-bottom: 20px; |
||||
} |
||||
.pdtb30 { |
||||
padding-top: 30px; |
||||
padding-bottom: 30px; |
||||
} |
||||
.pdtb40 { |
||||
padding-top: 40px; |
||||
padding-bottom: 40px; |
||||
} |
||||
.pdtb50 { |
||||
padding-top: 50px; |
||||
padding-bottom: 50px; |
||||
} |
||||
.border-b { |
||||
border-bottom: 2px solid #f2f2f2; |
||||
} |
||||
.border-t { |
||||
border-top: 2px solid #f2f2f2; |
||||
} |
||||
|
||||
.mga { |
||||
margin: auto; |
||||
} |
||||
.mg20{ |
||||
margin: 20px; |
||||
} |
||||
.mgtb0 { |
||||
margin-top: 0; |
||||
margin-bottom: 0; |
||||
} |
||||
.mgtb10 { |
||||
margin: 10px 0; |
||||
} |
||||
.mgtb20 { |
||||
margin: 20px 0; |
||||
} |
||||
.mgtb30 { |
||||
margin: 30px 0; |
||||
} |
||||
.mgtb40 { |
||||
margin: 40px 0; |
||||
} |
||||
.mgtb50 { |
||||
margin: 50px 0; |
||||
} |
||||
|
||||
.mglr0{ |
||||
margin-left: 0; |
||||
margin-right: 0; |
||||
} |
||||
.mglr10{ |
||||
margin-left: 10px; |
||||
margin-right: 10px; |
||||
} |
||||
.mglr20{ |
||||
margin-left: 20px; |
||||
margin-right: 20px; |
||||
} |
||||
.mglr30{ |
||||
margin-left: 30px; |
||||
margin-right: 30px; |
||||
} |
||||
.mglr40{ |
||||
margin-left: 40px; |
||||
margin-right: 40px; |
||||
} |
||||
.mglr50{ |
||||
margin-left: 50px; |
||||
margin-right: 50px; |
||||
} |
||||
.mgl0 { |
||||
margin-left: 0 !important; |
||||
} |
||||
.mgl10 { |
||||
margin-left: 10px; |
||||
} |
||||
.mgl20 { |
||||
margin-left: 20px; |
||||
} |
||||
.mgl25 { |
||||
margin-left: 25px; |
||||
} |
||||
.mgl30 { |
||||
margin-left: 30px; |
||||
} |
||||
.mgl35 { |
||||
margin-left: 35px; |
||||
} |
||||
.mgl40 { |
||||
margin-left: 40px; |
||||
} |
||||
.mgl50 { |
||||
margin-left: 50px; |
||||
} |
||||
.mgl80 { |
||||
margin-left: 80px; |
||||
} |
||||
.mgl90 { |
||||
margin-left: 90px; |
||||
} |
||||
.mgl100 { |
||||
margin-left: 100px; |
||||
} |
||||
.mgr10 { |
||||
margin-right: 10px; |
||||
} |
||||
.mgr20 { |
||||
margin-right: 20px; |
||||
} |
||||
.mgr30 { |
||||
margin-right: 30px; |
||||
} |
||||
.mgr33 { |
||||
margin-right: 33px; |
||||
} |
||||
.mgr35 { |
||||
margin-right: 35px; |
||||
} |
||||
.mgt34 { |
||||
margin-top: 34px; |
||||
} |
||||
.mgr40 { |
||||
margin-right: 40px; |
||||
} |
||||
.mgr50 { |
||||
margin-right: 50px; |
||||
} |
||||
.mgr60 { |
||||
margin-right: 60px; |
||||
} |
||||
.mgr70 { |
||||
margin-right: 70px; |
||||
} |
||||
.mgr80 { |
||||
margin-right: 80px; |
||||
} |
||||
.mgr90 { |
||||
margin-right: 90px; |
||||
} |
||||
.mgr100 { |
||||
margin-right: 100px; |
||||
} |
||||
.mgt10 { |
||||
margin-top: 10px; |
||||
} |
||||
.mgt15 { |
||||
margin-top: 15px; |
||||
} |
||||
.mgt20 { |
||||
margin-top: 20px!important; |
||||
} |
||||
.mgt30 { |
||||
margin-top: 30px!important; |
||||
} |
||||
.mgt40 { |
||||
margin-top: 40px!important; |
||||
} |
||||
.mgt50 { |
||||
margin-top: 50px!important; |
||||
} |
||||
.mgt60 { |
||||
margin-top: 60px!important; |
||||
} |
||||
.mgt70 { |
||||
margin-top: 70px!important; |
||||
} |
||||
.mgt80 { |
||||
margin-top: 80px!important; |
||||
} |
||||
.mgt90 { |
||||
margin-top: 90px!important; |
||||
} |
||||
.mgt100 { |
||||
margin-top: 100px; |
||||
} |
||||
.mrb30 { |
||||
margin-bottom: 30px; |
||||
} |
||||
.mg0 { |
||||
margin: 0; |
||||
} |
||||
.mgb0 { |
||||
margin-bottom: 0; |
||||
} |
||||
.mgb10 { |
||||
margin-bottom: 10px; |
||||
} |
||||
.mgb20 { |
||||
margin-bottom: 20px; |
||||
} |
||||
.mgb30 { |
||||
margin-bottom: 30px; |
||||
} |
||||
.mgb40 { |
||||
margin-bottom: 40px!important; |
||||
} |
||||
.mgb50 { |
||||
margin-bottom: 50px!important; |
||||
} |
||||
.mgb60 { |
||||
margin-bottom: 60px!important; |
||||
} |
||||
.mgb70 { |
||||
margin-bottom: 70px!important; |
||||
} |
||||
.mgb80 { |
||||
margin-bottom: 80px!important; |
||||
} |
||||
.bd0 { |
||||
border: 0; |
||||
} |
||||
|
||||
.tx-center { |
||||
text-align: center; |
||||
} |
||||
|
||||
.fz-14 { |
||||
font-size: 14px!important; |
||||
} |
||||
.fz-16 { |
||||
font-size: 16px!important; |
||||
} |
||||
.fz-18 { |
||||
font-size: 18px!important; |
||||
} |
||||
.fz-20 { |
||||
font-size: 20px!important; |
||||
} |
||||
.df { |
||||
display: flex; |
||||
} |
||||
.df-ac{ |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.dn{ |
||||
display: none!important; |
||||
} |
||||
.flex-align-center{ |
||||
display: flex; |
||||
align-items: center; |
||||
} |
||||
.flex-wrap{ |
||||
flex-wrap: wrap; |
||||
} |
||||
.fj-center { |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: center; |
||||
} |
||||
.fj-end{ |
||||
justify-content: flex-end; |
||||
} |
||||
.flex1 { |
||||
flex: 1; |
||||
} |
||||
|
||||
.df-between{ |
||||
display: flex; |
||||
align-items: center; |
||||
justify-content: space-between; |
||||
} |
||||
.df-jc{ |
||||
justify-content: center; |
||||
} |
||||
.not-zoom { |
||||
display: flex; |
||||
flex-shrink: 0; |
||||
} |
||||
.btns { |
||||
position: absolute; |
||||
bottom: 20px; |
||||
left: 50%; |
||||
transform: translate(-50%, 0); |
||||
} |
||||
|
||||
.self { |
||||
position: relative; |
||||
} |
||||
.position-a{ |
||||
position: absolute; |
||||
} |
||||
|
||||
.dib { |
||||
display: inline-block; |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.df-column { |
||||
display: flex; |
||||
flex-direction: column; |
||||
} |
||||
|
||||
.icon-size { |
||||
width: 20px; |
||||
} |
||||
.manpower-icon { |
||||
width: 35px; |
||||
height: 35px; |
||||
} |
||||
.radius10 { |
||||
border-radius: 10px; |
||||
} |
||||
.radius-round { |
||||
border-radius: 50%; |
||||
} |
||||
.shadow { |
||||
border: 1px solid #EBEEF5; |
||||
transition: .3s; |
||||
} |
||||
.shadow:hover{ |
||||
box-shadow: 0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.1); |
||||
} |
||||
|
||||
.head-icon { |
||||
width: 100px; |
||||
height: 100px; |
||||
border-radius: 50%; |
||||
} |
||||
.black-all { |
||||
background: black; |
||||
opacity: 0.5; |
||||
width: 100%; |
||||
height: 100%; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
} |
||||
|
||||
.display-none { |
||||
display: none; |
||||
} |
||||
.left-border { |
||||
border-left: 10px solid #00b9ff; |
||||
line-height: 27px; |
||||
} |
||||
|
||||
.icon { |
||||
width: 1.5em; |
||||
height: 1.5em; |
||||
vertical-align: -0.15em; |
||||
fill: currentColor; |
||||
overflow: hidden; |
||||
} |
||||
.text-icon{ |
||||
width: 16px; |
||||
height: 16px; |
||||
vertical-align: -0.15em; |
||||
fill: currentColor; |
||||
overflow: hidden; |
||||
} |
||||
.box-sizing{ |
||||
box-sizing: border-box; |
||||
} |
||||
.white-btn { |
||||
border: 1px solid #00b9ff; |
||||
} |
||||
.btn-wh{ |
||||
width: 120px; |
||||
height: 35px; |
||||
} |
||||
.top-module-icon{ |
||||
width: 26px; |
||||
height: 26px; |
||||
} |
||||
.btn-pdt { |
||||
padding-top: 0!important; |
||||
padding-bottom: 0!important; |
||||
} |
||||
.search-box { |
||||
height: 60px; |
||||
} |
||||
.delete { |
||||
text-align: center; |
||||
} |
||||
.delete img { |
||||
width: 140px; |
||||
height: 188px; |
||||
} |
||||
@ -0,0 +1,539 @@ |
||||
/* Logo 字体 */ |
||||
@font-face { |
||||
font-family: "iconfont logo"; |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); |
||||
} |
||||
|
||||
.logo { |
||||
font-family: "iconfont logo"; |
||||
font-size: 160px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
/* tabs */ |
||||
.nav-tabs { |
||||
position: relative; |
||||
} |
||||
|
||||
.nav-tabs .nav-more { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
height: 42px; |
||||
line-height: 42px; |
||||
color: #666; |
||||
} |
||||
|
||||
#tabs { |
||||
border-bottom: 1px solid #eee; |
||||
} |
||||
|
||||
#tabs li { |
||||
cursor: pointer; |
||||
width: 100px; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
border-bottom: 2px solid transparent; |
||||
position: relative; |
||||
z-index: 1; |
||||
margin-bottom: -1px; |
||||
color: #666; |
||||
} |
||||
|
||||
|
||||
#tabs .active { |
||||
border-bottom-color: #f00; |
||||
color: #222; |
||||
} |
||||
|
||||
.tab-container .content { |
||||
display: none; |
||||
} |
||||
|
||||
/* 页面布局 */ |
||||
.main { |
||||
padding: 30px 100px; |
||||
width: 960px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.main .logo { |
||||
color: #333; |
||||
text-align: left; |
||||
margin-bottom: 30px; |
||||
line-height: 1; |
||||
height: 110px; |
||||
margin-top: -50px; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.main .logo a { |
||||
font-size: 160px; |
||||
color: #333; |
||||
} |
||||
|
||||
.helps { |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
.helps pre { |
||||
padding: 20px; |
||||
margin: 10px 0; |
||||
border: solid 1px #e7e1cd; |
||||
background-color: #fffdef; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.icon_lists { |
||||
width: 100% !important; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.icon_lists li { |
||||
width: 100px; |
||||
margin-bottom: 10px; |
||||
margin-right: 20px; |
||||
text-align: center; |
||||
list-style: none !important; |
||||
cursor: default; |
||||
} |
||||
|
||||
.icon_lists li .code-name { |
||||
line-height: 1.2; |
||||
} |
||||
|
||||
.icon_lists .icon { |
||||
display: block; |
||||
height: 100px; |
||||
line-height: 100px; |
||||
font-size: 42px; |
||||
margin: 10px auto; |
||||
color: #333; |
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
||||
transition: font-size 0.25s linear, width 0.25s linear; |
||||
} |
||||
|
||||
.icon_lists .icon:hover { |
||||
font-size: 100px; |
||||
} |
||||
|
||||
.icon_lists .svg-icon { |
||||
/* 通过设置 font-size 来改变图标大小 */ |
||||
width: 1em; |
||||
/* 图标和文字相邻时，垂直对齐 */ |
||||
vertical-align: -0.15em; |
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
||||
fill: currentColor; |
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
||||
normalize.css 中也包含这行 */ |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.icon_lists li .name, |
||||
.icon_lists li .code-name { |
||||
color: #666; |
||||
} |
||||
|
||||
/* markdown 样式 */ |
||||
.markdown { |
||||
color: #666; |
||||
font-size: 14px; |
||||
line-height: 1.8; |
||||
} |
||||
|
||||
.highlight { |
||||
line-height: 1.5; |
||||
} |
||||
|
||||
.markdown img { |
||||
vertical-align: middle; |
||||
max-width: 100%; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
color: #404040; |
||||
font-weight: 500; |
||||
line-height: 40px; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown h2, |
||||
.markdown h3, |
||||
.markdown h4, |
||||
.markdown h5, |
||||
.markdown h6 { |
||||
color: #404040; |
||||
margin: 1.6em 0 0.6em 0; |
||||
font-weight: 500; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
font-size: 28px; |
||||
} |
||||
|
||||
.markdown h2 { |
||||
font-size: 22px; |
||||
} |
||||
|
||||
.markdown h3 { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.markdown h4 { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.markdown h5 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown h6 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown hr { |
||||
height: 1px; |
||||
border: 0; |
||||
background: #e9e9e9; |
||||
margin: 16px 0; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown p { |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown>p, |
||||
.markdown>blockquote, |
||||
.markdown>.highlight, |
||||
.markdown>ol, |
||||
.markdown>ul { |
||||
width: 80%; |
||||
} |
||||
|
||||
.markdown ul>li { |
||||
list-style: circle; |
||||
} |
||||
|
||||
.markdown>ul li, |
||||
.markdown blockquote ul>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown>ul li p, |
||||
.markdown>ol li p { |
||||
margin: 0.6em 0; |
||||
} |
||||
|
||||
.markdown ol>li { |
||||
list-style: decimal; |
||||
} |
||||
|
||||
.markdown>ol li, |
||||
.markdown blockquote ol>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown code { |
||||
margin: 0 3px; |
||||
padding: 0 5px; |
||||
background: #eee; |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
.markdown strong, |
||||
.markdown b { |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0px; |
||||
empty-cells: show; |
||||
border: 1px solid #e9e9e9; |
||||
width: 95%; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
white-space: nowrap; |
||||
color: #333; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table th, |
||||
.markdown>table td { |
||||
border: 1px solid #e9e9e9; |
||||
padding: 8px 16px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
background: #F7F7F7; |
||||
} |
||||
|
||||
.markdown blockquote { |
||||
font-size: 90%; |
||||
color: #999; |
||||
border-left: 4px solid #e9e9e9; |
||||
padding-left: 0.8em; |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown blockquote p { |
||||
margin: 0; |
||||
} |
||||
|
||||
.markdown .anchor { |
||||
opacity: 0; |
||||
transition: opacity 0.3s ease; |
||||
margin-left: 8px; |
||||
} |
||||
|
||||
.markdown .waiting { |
||||
color: #ccc; |
||||
} |
||||
|
||||
.markdown h1:hover .anchor, |
||||
.markdown h2:hover .anchor, |
||||
.markdown h3:hover .anchor, |
||||
.markdown h4:hover .anchor, |
||||
.markdown h5:hover .anchor, |
||||
.markdown h6:hover .anchor { |
||||
opacity: 1; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.markdown>br, |
||||
.markdown>p>br { |
||||
clear: both; |
||||
} |
||||
|
||||
|
||||
.hljs { |
||||
display: block; |
||||
background: white; |
||||
padding: 0.5em; |
||||
color: #333333; |
||||
overflow-x: auto; |
||||
} |
||||
|
||||
.hljs-comment, |
||||
.hljs-meta { |
||||
color: #969896; |
||||
} |
||||
|
||||
.hljs-string, |
||||
.hljs-variable, |
||||
.hljs-template-variable, |
||||
.hljs-strong, |
||||
.hljs-emphasis, |
||||
.hljs-quote { |
||||
color: #df5000; |
||||
} |
||||
|
||||
.hljs-keyword, |
||||
.hljs-selector-tag, |
||||
.hljs-type { |
||||
color: #a71d5d; |
||||
} |
||||
|
||||
.hljs-literal, |
||||
.hljs-symbol, |
||||
.hljs-bullet, |
||||
.hljs-attribute { |
||||
color: #0086b3; |
||||
} |
||||
|
||||
.hljs-section, |
||||
.hljs-name { |
||||
color: #63a35c; |
||||
} |
||||
|
||||
.hljs-tag { |
||||
color: #333333; |
||||
} |
||||
|
||||
.hljs-title, |
||||
.hljs-attr, |
||||
.hljs-selector-id, |
||||
.hljs-selector-class, |
||||
.hljs-selector-attr, |
||||
.hljs-selector-pseudo { |
||||
color: #795da3; |
||||
} |
||||
|
||||
.hljs-addition { |
||||
color: #55a532; |
||||
background-color: #eaffea; |
||||
} |
||||
|
||||
.hljs-deletion { |
||||
color: #bd2c00; |
||||
background-color: #ffecec; |
||||
} |
||||
|
||||
.hljs-link { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
/* 代码高亮 */ |
||||
/* PrismJS 1.15.0 |
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ |
||||
/** |
||||
* prism.js default theme for JavaScript, CSS and HTML |
||||
* Based on dabblet (http://dabblet.com) |
||||
* @author Lea Verou |
||||
*/ |
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
color: black; |
||||
background: none; |
||||
text-shadow: 0 1px white; |
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||
text-align: left; |
||||
white-space: pre; |
||||
word-spacing: normal; |
||||
word-break: normal; |
||||
word-wrap: normal; |
||||
line-height: 1.5; |
||||
|
||||
-moz-tab-size: 4; |
||||
-o-tab-size: 4; |
||||
tab-size: 4; |
||||
|
||||
-webkit-hyphens: none; |
||||
-moz-hyphens: none; |
||||
-ms-hyphens: none; |
||||
hyphens: none; |
||||
} |
||||
|
||||
pre[class*="language-"]::-moz-selection, |
||||
pre[class*="language-"] ::-moz-selection, |
||||
code[class*="language-"]::-moz-selection, |
||||
code[class*="language-"] ::-moz-selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
pre[class*="language-"]::selection, |
||||
pre[class*="language-"] ::selection, |
||||
code[class*="language-"]::selection, |
||||
code[class*="language-"] ::selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
@media print { |
||||
|
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
text-shadow: none; |
||||
} |
||||
} |
||||
|
||||
/* Code blocks */ |
||||
pre[class*="language-"] { |
||||
padding: 1em; |
||||
margin: .5em 0; |
||||
overflow: auto; |
||||
} |
||||
|
||||
:not(pre)>code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
background: #f5f2f0; |
||||
} |
||||
|
||||
/* Inline code */ |
||||
:not(pre)>code[class*="language-"] { |
||||
padding: .1em; |
||||
border-radius: .3em; |
||||
white-space: normal; |
||||
} |
||||
|
||||
.token.comment, |
||||
.token.prolog, |
||||
.token.doctype, |
||||
.token.cdata { |
||||
color: slategray; |
||||
} |
||||
|
||||
.token.punctuation { |
||||
color: #999; |
||||
} |
||||
|
||||
.namespace { |
||||
opacity: .7; |
||||
} |
||||
|
||||
.token.property, |
||||
.token.tag, |
||||
.token.boolean, |
||||
.token.number, |
||||
.token.constant, |
||||
.token.symbol, |
||||
.token.deleted { |
||||
color: #905; |
||||
} |
||||
|
||||
.token.selector, |
||||
.token.attr-name, |
||||
.token.string, |
||||
.token.char, |
||||
.token.builtin, |
||||
.token.inserted { |
||||
color: #690; |
||||
} |
||||
|
||||
.token.operator, |
||||
.token.entity, |
||||
.token.url, |
||||
.language-css .token.string, |
||||
.style .token.string { |
||||
color: #9a6e3a; |
||||
background: hsla(0, 0%, 100%, .5); |
||||
} |
||||
|
||||
.token.atrule, |
||||
.token.attr-value, |
||||
.token.keyword { |
||||
color: #07a; |
||||
} |
||||
|
||||
.token.function, |
||||
.token.class-name { |
||||
color: #DD4A68; |
||||
} |
||||
|
||||
.token.regex, |
||||
.token.important, |
||||
.token.variable { |
||||
color: #e90; |
||||
} |
||||
|
||||
.token.important, |
||||
.token.bold { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.token.italic { |
||||
font-style: italic; |
||||
} |
||||
|
||||
.token.entity { |
||||
cursor: help; |
||||
} |
||||
@ -0,0 +1,237 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>IconFont Demo</title> |
||||
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/> |
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
||||
<link rel="stylesheet" href="demo.css"> |
||||
<link rel="stylesheet" href="iconfont.css"> |
||||
<script src="iconfont.js"></script> |
||||
<!-- jQuery --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
||||
<!-- 代码高亮 --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
||||
</head> |
||||
<body> |
||||
<div class="main"> |
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1> |
||||
<div class="nav-tabs"> |
||||
<ul id="tabs" class="dib-box"> |
||||
<li class="dib active"><span>Unicode</span></li> |
||||
<li class="dib"><span>Font class</span></li> |
||||
<li class="dib"><span>Symbol</span></li> |
||||
</ul> |
||||
|
||||
</div> |
||||
<div class="tab-container"> |
||||
<div class="content unicode" style="display: block;"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">徽章，会员</div> |
||||
<div class="code-name">&#xe65f;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">皇冠</div> |
||||
<div class="code-name">&#xe798;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">学历</div> |
||||
<div class="code-name">&#xe63a;</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="unicode-">Unicode 引用</h2> |
||||
<hr> |
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> |
||||
<ul> |
||||
<li>兼容性最好，支持 IE6+，及所有现代浏览器。</li> |
||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li> |
||||
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li> |
||||
</ul> |
||||
<blockquote> |
||||
<p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p> |
||||
</blockquote> |
||||
<p>Unicode 使用步骤如下：</p> |
||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> |
||||
<pre><code class="language-css" |
||||
>@font-face { |
||||
font-family: 'iconfont'; |
||||
src: url('iconfont.eot'); |
||||
src: url('iconfont.eot?#iefix') format('embedded-opentype'), |
||||
url('iconfont.woff2') format('woff2'), |
||||
url('iconfont.woff') format('woff'), |
||||
url('iconfont.ttf') format('truetype'), |
||||
url('iconfont.svg#iconfont') format('svg'); |
||||
} |
||||
</code></pre> |
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> |
||||
<pre><code class="language-css" |
||||
>.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> |
||||
<pre> |
||||
<code class="language-html" |
||||
><span class="iconfont">&#x33;</span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content font-class"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-huizhanghuiyuan"></span> |
||||
<div class="name"> |
||||
徽章，会员 |
||||
</div> |
||||
<div class="code-name">.icon-huizhanghuiyuan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-huangguan"></span> |
||||
<div class="name"> |
||||
皇冠 |
||||
</div> |
||||
<div class="code-name">.icon-huangguan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-edu-line"></span> |
||||
<div class="name"> |
||||
学历 |
||||
</div> |
||||
<div class="code-name">.icon-edu-line |
||||
</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="font-class-">font-class 引用</h2> |
||||
<hr> |
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p> |
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p> |
||||
<ul> |
||||
<li>兼容性良好，支持 IE8+，及所有现代浏览器。</li> |
||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li> |
||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li> |
||||
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li> |
||||
</ul> |
||||
<p>使用步骤如下：</p> |
||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> |
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
||||
</code></pre> |
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>" |
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content symbol"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-huizhanghuiyuan"></use> |
||||
</svg> |
||||
<div class="name">徽章，会员</div> |
||||
<div class="code-name">#icon-huizhanghuiyuan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-huangguan"></use> |
||||
</svg> |
||||
<div class="name">皇冠</div> |
||||
<div class="code-name">#icon-huangguan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-edu-line"></use> |
||||
</svg> |
||||
<div class="name">学历</div> |
||||
<div class="code-name">#icon-edu-line</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="symbol-">Symbol 引用</h2> |
||||
<hr> |
||||
|
||||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p> |
||||
<ul> |
||||
<li>支持多色图标了，不再受单色限制。</li> |
||||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li> |
||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li> |
||||
</ul> |
||||
<p>使用步骤如下：</p> |
||||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> |
||||
<pre><code class="language-html"><script src="./iconfont.js"></script> |
||||
</code></pre> |
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> |
||||
<pre><code class="language-html"><style> |
||||
.icon { |
||||
width: 1em; |
||||
height: 1em; |
||||
vertical-align: -0.15em; |
||||
fill: currentColor; |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-xxx"></use> |
||||
</svg> |
||||
</code></pre> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
<script> |
||||
$(document).ready(function () { |
||||
$('.tab-container .content:first').show() |
||||
|
||||
$('#tabs li').click(function (e) { |
||||
var tabContent = $('.tab-container .content') |
||||
var index = $(this).index() |
||||
|
||||
if ($(this).hasClass('active')) { |
||||
return |
||||
} else { |
||||
$('#tabs li').removeClass('active') |
||||
$(this).addClass('active') |
||||
|
||||
tabContent.hide().eq(index).fadeIn() |
||||
} |
||||
}) |
||||
}) |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,29 @@ |
||||
@font-face {font-family: "iconfont"; |
||||
src: url('iconfont.eot?t=1591082516626'); /* IE9 */ |
||||
src: url('iconfont.eot?t=1591082516626#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), |
||||
url('iconfont.woff?t=1591082516626') format('woff'), |
||||
url('iconfont.ttf?t=1591082516626') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ |
||||
url('iconfont.svg?t=1591082516626#iconfont') format('svg'); /* iOS 4.1- */ |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.icon-huizhanghuiyuan:before { |
||||
content: "\e65f"; |
||||
} |
||||
|
||||
.icon-huangguan:before { |
||||
content: "\e798"; |
||||
} |
||||
|
||||
.icon-edu-line:before { |
||||
content: "\e63a"; |
||||
} |
||||
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,30 @@ |
||||
{ |
||||
"id": "", |
||||
"name": "", |
||||
"font_family": "iconfont", |
||||
"css_prefix_text": "icon-", |
||||
"description": "", |
||||
"glyphs": [ |
||||
{ |
||||
"icon_id": "444400", |
||||
"name": "徽章，会员", |
||||
"font_class": "huizhanghuiyuan", |
||||
"unicode": "e65f", |
||||
"unicode_decimal": 58975 |
||||
}, |
||||
{ |
||||
"icon_id": "4294111", |
||||
"name": "皇冠", |
||||
"font_class": "huangguan", |
||||
"unicode": "e798", |
||||
"unicode_decimal": 59288 |
||||
}, |
||||
{ |
||||
"icon_id": "6119296", |
||||
"name": "学历", |
||||
"font_class": "edu-line", |
||||
"unicode": "e63a", |
||||
"unicode_decimal": 58938 |
||||
} |
||||
] |
||||
} |
||||
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,539 @@ |
||||
/* Logo 字体 */ |
||||
@font-face { |
||||
font-family: "iconfont logo"; |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); |
||||
} |
||||
|
||||
.logo { |
||||
font-family: "iconfont logo"; |
||||
font-size: 160px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
/* tabs */ |
||||
.nav-tabs { |
||||
position: relative; |
||||
} |
||||
|
||||
.nav-tabs .nav-more { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
height: 42px; |
||||
line-height: 42px; |
||||
color: #666; |
||||
} |
||||
|
||||
#tabs { |
||||
border-bottom: 1px solid #eee; |
||||
} |
||||
|
||||
#tabs li { |
||||
cursor: pointer; |
||||
width: 100px; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
border-bottom: 2px solid transparent; |
||||
position: relative; |
||||
z-index: 1; |
||||
margin-bottom: -1px; |
||||
color: #666; |
||||
} |
||||
|
||||
|
||||
#tabs .active { |
||||
border-bottom-color: #f00; |
||||
color: #222; |
||||
} |
||||
|
||||
.tab-container .content { |
||||
display: none; |
||||
} |
||||
|
||||
/* 页面布局 */ |
||||
.main { |
||||
padding: 30px 100px; |
||||
width: 960px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.main .logo { |
||||
color: #333; |
||||
text-align: left; |
||||
margin-bottom: 30px; |
||||
line-height: 1; |
||||
height: 110px; |
||||
margin-top: -50px; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.main .logo a { |
||||
font-size: 160px; |
||||
color: #333; |
||||
} |
||||
|
||||
.helps { |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
.helps pre { |
||||
padding: 20px; |
||||
margin: 10px 0; |
||||
border: solid 1px #e7e1cd; |
||||
background-color: #fffdef; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.icon_lists { |
||||
width: 100% !important; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.icon_lists li { |
||||
width: 100px; |
||||
margin-bottom: 10px; |
||||
margin-right: 20px; |
||||
text-align: center; |
||||
list-style: none !important; |
||||
cursor: default; |
||||
} |
||||
|
||||
.icon_lists li .code-name { |
||||
line-height: 1.2; |
||||
} |
||||
|
||||
.icon_lists .icon { |
||||
display: block; |
||||
height: 100px; |
||||
line-height: 100px; |
||||
font-size: 42px; |
||||
margin: 10px auto; |
||||
color: #333; |
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
||||
transition: font-size 0.25s linear, width 0.25s linear; |
||||
} |
||||
|
||||
.icon_lists .icon:hover { |
||||
font-size: 100px; |
||||
} |
||||
|
||||
.icon_lists .svg-icon { |
||||
/* 通过设置 font-size 来改变图标大小 */ |
||||
width: 1em; |
||||
/* 图标和文字相邻时，垂直对齐 */ |
||||
vertical-align: -0.15em; |
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
||||
fill: currentColor; |
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
||||
normalize.css 中也包含这行 */ |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.icon_lists li .name, |
||||
.icon_lists li .code-name { |
||||
color: #666; |
||||
} |
||||
|
||||
/* markdown 样式 */ |
||||
.markdown { |
||||
color: #666; |
||||
font-size: 14px; |
||||
line-height: 1.8; |
||||
} |
||||
|
||||
.highlight { |
||||
line-height: 1.5; |
||||
} |
||||
|
||||
.markdown img { |
||||
vertical-align: middle; |
||||
max-width: 100%; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
color: #404040; |
||||
font-weight: 500; |
||||
line-height: 40px; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown h2, |
||||
.markdown h3, |
||||
.markdown h4, |
||||
.markdown h5, |
||||
.markdown h6 { |
||||
color: #404040; |
||||
margin: 1.6em 0 0.6em 0; |
||||
font-weight: 500; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
font-size: 28px; |
||||
} |
||||
|
||||
.markdown h2 { |
||||
font-size: 22px; |
||||
} |
||||
|
||||
.markdown h3 { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.markdown h4 { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.markdown h5 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown h6 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown hr { |
||||
height: 1px; |
||||
border: 0; |
||||
background: #e9e9e9; |
||||
margin: 16px 0; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown p { |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown>p, |
||||
.markdown>blockquote, |
||||
.markdown>.highlight, |
||||
.markdown>ol, |
||||
.markdown>ul { |
||||
width: 80%; |
||||
} |
||||
|
||||
.markdown ul>li { |
||||
list-style: circle; |
||||
} |
||||
|
||||
.markdown>ul li, |
||||
.markdown blockquote ul>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown>ul li p, |
||||
.markdown>ol li p { |
||||
margin: 0.6em 0; |
||||
} |
||||
|
||||
.markdown ol>li { |
||||
list-style: decimal; |
||||
} |
||||
|
||||
.markdown>ol li, |
||||
.markdown blockquote ol>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown code { |
||||
margin: 0 3px; |
||||
padding: 0 5px; |
||||
background: #eee; |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
.markdown strong, |
||||
.markdown b { |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0px; |
||||
empty-cells: show; |
||||
border: 1px solid #e9e9e9; |
||||
width: 95%; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
white-space: nowrap; |
||||
color: #333; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table th, |
||||
.markdown>table td { |
||||
border: 1px solid #e9e9e9; |
||||
padding: 8px 16px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
background: #F7F7F7; |
||||
} |
||||
|
||||
.markdown blockquote { |
||||
font-size: 90%; |
||||
color: #999; |
||||
border-left: 4px solid #e9e9e9; |
||||
padding-left: 0.8em; |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown blockquote p { |
||||
margin: 0; |
||||
} |
||||
|
||||
.markdown .anchor { |
||||
opacity: 0; |
||||
transition: opacity 0.3s ease; |
||||
margin-left: 8px; |
||||
} |
||||
|
||||
.markdown .waiting { |
||||
color: #ccc; |
||||
} |
||||
|
||||
.markdown h1:hover .anchor, |
||||
.markdown h2:hover .anchor, |
||||
.markdown h3:hover .anchor, |
||||
.markdown h4:hover .anchor, |
||||
.markdown h5:hover .anchor, |
||||
.markdown h6:hover .anchor { |
||||
opacity: 1; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.markdown>br, |
||||
.markdown>p>br { |
||||
clear: both; |
||||
} |
||||
|
||||
|
||||
.hljs { |
||||
display: block; |
||||
background: white; |
||||
padding: 0.5em; |
||||
color: #333333; |
||||
overflow-x: auto; |
||||
} |
||||
|
||||
.hljs-comment, |
||||
.hljs-meta { |
||||
color: #969896; |
||||
} |
||||
|
||||
.hljs-string, |
||||
.hljs-variable, |
||||
.hljs-template-variable, |
||||
.hljs-strong, |
||||
.hljs-emphasis, |
||||
.hljs-quote { |
||||
color: #df5000; |
||||
} |
||||
|
||||
.hljs-keyword, |
||||
.hljs-selector-tag, |
||||
.hljs-type { |
||||
color: #a71d5d; |
||||
} |
||||
|
||||
.hljs-literal, |
||||
.hljs-symbol, |
||||
.hljs-bullet, |
||||
.hljs-attribute { |
||||
color: #0086b3; |
||||
} |
||||
|
||||
.hljs-section, |
||||
.hljs-name { |
||||
color: #63a35c; |
||||
} |
||||
|
||||
.hljs-tag { |
||||
color: #333333; |
||||
} |
||||
|
||||
.hljs-title, |
||||
.hljs-attr, |
||||
.hljs-selector-id, |
||||
.hljs-selector-class, |
||||
.hljs-selector-attr, |
||||
.hljs-selector-pseudo { |
||||
color: #795da3; |
||||
} |
||||
|
||||
.hljs-addition { |
||||
color: #55a532; |
||||
background-color: #eaffea; |
||||
} |
||||
|
||||
.hljs-deletion { |
||||
color: #bd2c00; |
||||
background-color: #ffecec; |
||||
} |
||||
|
||||
.hljs-link { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
/* 代码高亮 */ |
||||
/* PrismJS 1.15.0 |
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ |
||||
/** |
||||
* prism.js default theme for JavaScript, CSS and HTML |
||||
* Based on dabblet (http://dabblet.com) |
||||
* @author Lea Verou |
||||
*/ |
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
color: black; |
||||
background: none; |
||||
text-shadow: 0 1px white; |
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||
text-align: left; |
||||
white-space: pre; |
||||
word-spacing: normal; |
||||
word-break: normal; |
||||
word-wrap: normal; |
||||
line-height: 1.5; |
||||
|
||||
-moz-tab-size: 4; |
||||
-o-tab-size: 4; |
||||
tab-size: 4; |
||||
|
||||
-webkit-hyphens: none; |
||||
-moz-hyphens: none; |
||||
-ms-hyphens: none; |
||||
hyphens: none; |
||||
} |
||||
|
||||
pre[class*="language-"]::-moz-selection, |
||||
pre[class*="language-"] ::-moz-selection, |
||||
code[class*="language-"]::-moz-selection, |
||||
code[class*="language-"] ::-moz-selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
pre[class*="language-"]::selection, |
||||
pre[class*="language-"] ::selection, |
||||
code[class*="language-"]::selection, |
||||
code[class*="language-"] ::selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
@media print { |
||||
|
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
text-shadow: none; |
||||
} |
||||
} |
||||
|
||||
/* Code blocks */ |
||||
pre[class*="language-"] { |
||||
padding: 1em; |
||||
margin: .5em 0; |
||||
overflow: auto; |
||||
} |
||||
|
||||
:not(pre)>code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
background: #f5f2f0; |
||||
} |
||||
|
||||
/* Inline code */ |
||||
:not(pre)>code[class*="language-"] { |
||||
padding: .1em; |
||||
border-radius: .3em; |
||||
white-space: normal; |
||||
} |
||||
|
||||
.token.comment, |
||||
.token.prolog, |
||||
.token.doctype, |
||||
.token.cdata { |
||||
color: slategray; |
||||
} |
||||
|
||||
.token.punctuation { |
||||
color: #999; |
||||
} |
||||
|
||||
.namespace { |
||||
opacity: .7; |
||||
} |
||||
|
||||
.token.property, |
||||
.token.tag, |
||||
.token.boolean, |
||||
.token.number, |
||||
.token.constant, |
||||
.token.symbol, |
||||
.token.deleted { |
||||
color: #905; |
||||
} |
||||
|
||||
.token.selector, |
||||
.token.attr-name, |
||||
.token.string, |
||||
.token.char, |
||||
.token.builtin, |
||||
.token.inserted { |
||||
color: #690; |
||||
} |
||||
|
||||
.token.operator, |
||||
.token.entity, |
||||
.token.url, |
||||
.language-css .token.string, |
||||
.style .token.string { |
||||
color: #9a6e3a; |
||||
background: hsla(0, 0%, 100%, .5); |
||||
} |
||||
|
||||
.token.atrule, |
||||
.token.attr-value, |
||||
.token.keyword { |
||||
color: #07a; |
||||
} |
||||
|
||||
.token.function, |
||||
.token.class-name { |
||||
color: #DD4A68; |
||||
} |
||||
|
||||
.token.regex, |
||||
.token.important, |
||||
.token.variable { |
||||
color: #e90; |
||||
} |
||||
|
||||
.token.important, |
||||
.token.bold { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.token.italic { |
||||
font-style: italic; |
||||
} |
||||
|
||||
.token.entity { |
||||
cursor: help; |
||||
} |
||||
@ -0,0 +1,283 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>IconFont Demo</title> |
||||
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/> |
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
||||
<link rel="stylesheet" href="demo.css"> |
||||
<link rel="stylesheet" href="iconfont.css"> |
||||
<script src="iconfont.js"></script> |
||||
<!-- jQuery --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
||||
<!-- 代码高亮 --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
||||
</head> |
||||
<body> |
||||
<div class="main"> |
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1> |
||||
<div class="nav-tabs"> |
||||
<ul id="tabs" class="dib-box"> |
||||
<li class="dib active"><span>Unicode</span></li> |
||||
<li class="dib"><span>Font class</span></li> |
||||
<li class="dib"><span>Symbol</span></li> |
||||
</ul> |
||||
|
||||
</div> |
||||
<div class="tab-container"> |
||||
<div class="content unicode" style="display: block;"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">徽章，会员</div> |
||||
<div class="code-name">&#xe65f;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">学士帽</div> |
||||
<div class="code-name">&#xe663;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">学习</div> |
||||
<div class="code-name">&#xe763;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">皇冠</div> |
||||
<div class="code-name">&#xe798;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">学历</div> |
||||
<div class="code-name">&#xe63a;</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="unicode-">Unicode 引用</h2> |
||||
<hr> |
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> |
||||
<ul> |
||||
<li>兼容性最好，支持 IE6+，及所有现代浏览器。</li> |
||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li> |
||||
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li> |
||||
</ul> |
||||
<blockquote> |
||||
<p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p> |
||||
</blockquote> |
||||
<p>Unicode 使用步骤如下：</p> |
||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> |
||||
<pre><code class="language-css" |
||||
>@font-face { |
||||
font-family: 'iconfont'; |
||||
src: url('iconfont.eot'); |
||||
src: url('iconfont.eot?#iefix') format('embedded-opentype'), |
||||
url('iconfont.woff2') format('woff2'), |
||||
url('iconfont.woff') format('woff'), |
||||
url('iconfont.ttf') format('truetype'), |
||||
url('iconfont.svg#iconfont') format('svg'); |
||||
} |
||||
</code></pre> |
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> |
||||
<pre><code class="language-css" |
||||
>.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> |
||||
<pre> |
||||
<code class="language-html" |
||||
><span class="iconfont">&#x33;</span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content font-class"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-huizhanghuiyuan"></span> |
||||
<div class="name"> |
||||
徽章，会员 |
||||
</div> |
||||
<div class="code-name">.icon-huizhanghuiyuan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-xueshimao"></span> |
||||
<div class="name"> |
||||
学士帽 |
||||
</div> |
||||
<div class="code-name">.icon-xueshimao |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-xuexi"></span> |
||||
<div class="name"> |
||||
学习 |
||||
</div> |
||||
<div class="code-name">.icon-xuexi |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-huangguan"></span> |
||||
<div class="name"> |
||||
皇冠 |
||||
</div> |
||||
<div class="code-name">.icon-huangguan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-edu-line"></span> |
||||
<div class="name"> |
||||
学历 |
||||
</div> |
||||
<div class="code-name">.icon-edu-line |
||||
</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="font-class-">font-class 引用</h2> |
||||
<hr> |
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p> |
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p> |
||||
<ul> |
||||
<li>兼容性良好，支持 IE8+，及所有现代浏览器。</li> |
||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li> |
||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li> |
||||
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li> |
||||
</ul> |
||||
<p>使用步骤如下：</p> |
||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> |
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
||||
</code></pre> |
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>" |
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content symbol"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-huizhanghuiyuan"></use> |
||||
</svg> |
||||
<div class="name">徽章，会员</div> |
||||
<div class="code-name">#icon-huizhanghuiyuan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-xueshimao"></use> |
||||
</svg> |
||||
<div class="name">学士帽</div> |
||||
<div class="code-name">#icon-xueshimao</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-xuexi"></use> |
||||
</svg> |
||||
<div class="name">学习</div> |
||||
<div class="code-name">#icon-xuexi</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-huangguan"></use> |
||||
</svg> |
||||
<div class="name">皇冠</div> |
||||
<div class="code-name">#icon-huangguan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-edu-line"></use> |
||||
</svg> |
||||
<div class="name">学历</div> |
||||
<div class="code-name">#icon-edu-line</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="symbol-">Symbol 引用</h2> |
||||
<hr> |
||||
|
||||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p> |
||||
<ul> |
||||
<li>支持多色图标了，不再受单色限制。</li> |
||||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li> |
||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li> |
||||
</ul> |
||||
<p>使用步骤如下：</p> |
||||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> |
||||
<pre><code class="language-html"><script src="./iconfont.js"></script> |
||||
</code></pre> |
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> |
||||
<pre><code class="language-html"><style> |
||||
.icon { |
||||
width: 1em; |
||||
height: 1em; |
||||
vertical-align: -0.15em; |
||||
fill: currentColor; |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-xxx"></use> |
||||
</svg> |
||||
</code></pre> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
<script> |
||||
$(document).ready(function () { |
||||
$('.tab-container .content:first').show() |
||||
|
||||
$('#tabs li').click(function (e) { |
||||
var tabContent = $('.tab-container .content') |
||||
var index = $(this).index() |
||||
|
||||
if ($(this).hasClass('active')) { |
||||
return |
||||
} else { |
||||
$('#tabs li').removeClass('active') |
||||
$(this).addClass('active') |
||||
|
||||
tabContent.hide().eq(index).fadeIn() |
||||
} |
||||
}) |
||||
}) |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,37 @@ |
||||
@font-face {font-family: "iconfont"; |
||||
src: url('iconfont.eot?t=1591084244863'); /* IE9 */ |
||||
src: url('iconfont.eot?t=1591084244863#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAeMAAsAAAAADawAAAc9AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDSAqOFIsDATYCJAMYCw4ABCAFhG0HZBtFC6OilG9GyP4ScrLhRTQ2aDQltCjJTeU1/zFQAlz7CgDgIwAYIwUAwN7bXVzhBAAADAES1wMQSLSGZWb3jgusWgUoKxlVbRWQJrAEwrRKEUtAja8JrqZt/2lNmLYUmS5f0Zoq1d0ne5f71Nns0TzCYixKYXGPcDCApyZdUg8ppgxgOwAZIL/die6EGiDAzHxU99cYJr/BubL5d+2PAwVLAzu281Np+wR2DI1tLLW9B0Zhpg6M3NGYqxORqjeDtl5ED1UNjUQmkoj/mEhjoUIspM4inkkvzcrMnw4BQnJ4evXHlzcwi4WLEewwao2CWVsqNkQp+Amuz64W2QDG10W9BlhXf1++kOSD4hi4Tbt3lMHun79lFv4vCJUZ+LPLBq40MEApwF7jZ3yTxmCsvNUThORJWgExPorFqldeR974BYr//7GFUC/EvcFBUEwB/zwXLjZGbnuM04F+0WfGgckIxonRUHgzGYNxYWAaJboZVmcBbWNpJ3CSUrFhx0eIwcRxUvKgWl0pTN1ZttWTpdbzbI5vB36ad/et+9vG7U396biOu0dnrW1a002aK0aI1lJCKDIR5//cflsLVB5ZXN4eCYcqh77Il7Gr5k1/9tzzWIXD+WnP0wy71UwU6RpQH+MiCPgC8WorHAWSk0jzJeTIOStaOLPtrETB3BSQRIacctL3RWHAdqcmA9DPZ6EtFhMeJMjyaieYrHVauJEm6rSR5YEqL8Y6iSnszx67rhJQpedhqBS0i8PQzEVKuJoiipQxywFlToy1Hpm0In7kOBVZf6Ezxy+pWCapXkB+OxG9ZFMBRcLRs3TebVo2faKbu5TC3apGFvZQiTzdQ5iTqEsamTCBsF5CRRKnGsWJqP4X5vjn8Lw/OGvDtnKJrwAQC8PI0BW/f6EBYDjVtVrVyYyiTpt3LhhLkibDI0M/hzu32+DsYraE5Fx3+/XjIrEIabFkWXzFTdSyWS3PK6YX0iRBI23cpwCndgpb/pZa8Vtx+LAR3UUpLaLJwYPsMT+vetSw+BOtKwV3zfyKOUkHL0f42N2Z9N0Y6LzeHfd0pa+uGXEFkuHg0JTEhkSV2lkTkLZlkmvSHmnWSZOqMin1v/tyHYD+CNABdAwPl8LgxYNhBxfJUX/K04NC9vSc3CYmkSnmX9dbjy/gh9SgvukgSBRHLvBOlmMdgpxnehkFKaL4AmqB9WP6bzRHOAb9rXi5o4clToy8GECBidMxxm1XX3LYTBb3xbVWk5gpEkzxv4iRxFk9lZcUf6ExwjnoL8VL5MOQpmKNW6+94LKYbM7Lq23GMdNEiDwHCYAcRhJhd3VcCvKWcENlYYPunTc7va0VIDxxPcRYF6JzeawtDh3SMw5ZI+L55K2wzts7egysZFA3tpu6kJVBz447ncKwHAQT10JMro6cLRaPS+e7+ToRhuRhTPzWzm4DGFF3s5Im5f53YTyJldL8rVG6JQN6H4cV/WJTRvGS1jVrzzRSbIpIdf/NEl9ER3rzjM6pJtj6mpYWKM6dkrd7WbHXwSCj37JnRPWYOIj6LxZBRTJxLnmM/9IcN/bCsRBRuSNRUZUN+kaKv4DyaJD7WFWV89iECRsAk49HfsepOpLPpZ5BJrU3J7SRM7RzZPao1cxl4uZPCgCVrhwJRoAZylHcE9izb6fYdQBrxLbxXYEKG4E9PJ44T/o0goUC9caiRAApQNNRzal/N+OhrRQ5AGmlm9FbEXKAdIwQzVAigRyv6cQAXWQIcxT/Fzq+OD/cZVOy/yKxwZRgoWRhEjVA9lcSDtld09wvduxyVZvOIlHn8ZWzR4Q0+5Qew1UlkTNtqKeiXOUqcroSJ58Otqi9dHqduB3d/vWVgN7uCrh5AzDQOeBY9ftgnco465r3wUQj68RglRi6ZbL6f54xD2B/+iYnenvFR5sXmat3O0qde5ZaU/MgdY56tEWVTdyHrBA8TOdE9qJnEi4ljPDSenuhyXk7lz0uHHayMEoB8P/D7E4MAoB50X9V/Usf1dv6lL+sR/v2auyM5z97V8q/+tGGPO/p4IaV/v+wkE2djwLZvyf7iVPsJ8ih+50V0Ucyu9IH87UKhOaQ/bcw1W9W8Rlk/19FfIYJikc2GHxymZZbCg4RZeDiUwUhJU72jkjDJhAbAMU+AIRkX6AksgeGZN9Myx2DQ6Y/cEnOQEhPaYeMyG9ovo5JCWU4fEObNrUWMmRe63hFxpWKrUHVcEfc2QqMg8jZcEI1cRZbdM8mEdGouanwGM5GZdlgy82IUglykXYQhtpvyyBtKpinDiOKyI4ZNPTmaqUaNT23mHf9/BViOCWFQ0Z8u94hrGMXj2KBiMA8ia1JI1ale+eZkRCWraFYzRqVHn98yiYlX9tArf9KIyQlAnmC6tZAyGbS1Nig+PhqLMczEkfhjuqKihErjrjikTTo7HuuaqMK3hxtbsJRl9tKNVN68audG/RINkZabrYvc35pawIAAAAA') format('woff2'), |
||||
url('iconfont.woff?t=1591084244863') format('woff'), |
||||
url('iconfont.ttf?t=1591084244863') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ |
||||
url('iconfont.svg?t=1591084244863#iconfont') format('svg'); /* iOS 4.1- */ |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
.icon-huizhanghuiyuan:before { |
||||
content: "\e65f"; |
||||
} |
||||
|
||||
.icon-xueshimao:before { |
||||
content: "\e663"; |
||||
} |
||||
|
||||
.icon-xuexi:before { |
||||
content: "\e763"; |
||||
} |
||||
|
||||
.icon-huangguan:before { |
||||
content: "\e798"; |
||||
} |
||||
|
||||
.icon-edu-line:before { |
||||
content: "\e63a"; |
||||
} |
||||
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,44 @@ |
||||
{ |
||||
"id": "", |
||||
"name": "", |
||||
"font_family": "iconfont", |
||||
"css_prefix_text": "icon-", |
||||
"description": "", |
||||
"glyphs": [ |
||||
{ |
||||
"icon_id": "444400", |
||||
"name": "徽章，会员", |
||||
"font_class": "huizhanghuiyuan", |
||||
"unicode": "e65f", |
||||
"unicode_decimal": 58975 |
||||
}, |
||||
{ |
||||
"icon_id": "1495449", |
||||
"name": "学士帽", |
||||
"font_class": "xueshimao", |
||||
"unicode": "e663", |
||||
"unicode_decimal": 58979 |
||||
}, |
||||
{ |
||||
"icon_id": "4292658", |
||||
"name": "学习", |
||||
"font_class": "xuexi", |
||||
"unicode": "e763", |
||||
"unicode_decimal": 59235 |
||||
}, |
||||
{ |
||||
"icon_id": "4294111", |
||||
"name": "皇冠", |
||||
"font_class": "huangguan", |
||||
"unicode": "e798", |
||||
"unicode_decimal": 59288 |
||||
}, |
||||
{ |
||||
"icon_id": "6119296", |
||||
"name": "学历", |
||||
"font_class": "edu-line", |
||||
"unicode": "e63a", |
||||
"unicode_decimal": 58938 |
||||
} |
||||
] |
||||
} |
||||
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,4 @@ |
||||
|
||||
[class*=" icon-"], [class^=icon-] { |
||||
font-family: iconfont!important; |
||||
} |
||||
@ -0,0 +1,29 @@ |
||||
.header{ |
||||
background-color: #fff; |
||||
} |
||||
.login-wrap{ |
||||
background: rgba(56, 157, 170, 0.82);; |
||||
} |
||||
.plugins-tips{ |
||||
background: #f2f2f2; |
||||
} |
||||
.plugins-tips a{ |
||||
color: #00d1b2; |
||||
} |
||||
.el-upload--text em { |
||||
color: #00d1b2; |
||||
} |
||||
.pure-button{ |
||||
background: #00d1b2; |
||||
} |
||||
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus, .pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { |
||||
background-color: #00d1b2 !important; |
||||
border-color: #00d1b2 !important; |
||||
} |
||||
.tags-li.active { |
||||
border: 1px solid #00d1b2; |
||||
background-color: #00d1b2; |
||||
} |
||||
.collapse-btn:hover{ |
||||
background: #00d1b2; |
||||
} |
||||
Binary file not shown.
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,539 @@ |
||||
/* Logo 字体 */ |
||||
@font-face { |
||||
font-family: "iconfont logo"; |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); |
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), |
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); |
||||
} |
||||
|
||||
.logo { |
||||
font-family: "iconfont logo"; |
||||
font-size: 160px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
|
||||
/* tabs */ |
||||
.nav-tabs { |
||||
position: relative; |
||||
} |
||||
|
||||
.nav-tabs .nav-more { |
||||
position: absolute; |
||||
right: 0; |
||||
bottom: 0; |
||||
height: 42px; |
||||
line-height: 42px; |
||||
color: #666; |
||||
} |
||||
|
||||
#tabs { |
||||
border-bottom: 1px solid #eee; |
||||
} |
||||
|
||||
#tabs li { |
||||
cursor: pointer; |
||||
width: 100px; |
||||
height: 40px; |
||||
line-height: 40px; |
||||
text-align: center; |
||||
font-size: 16px; |
||||
border-bottom: 2px solid transparent; |
||||
position: relative; |
||||
z-index: 1; |
||||
margin-bottom: -1px; |
||||
color: #666; |
||||
} |
||||
|
||||
|
||||
#tabs .active { |
||||
border-bottom-color: #f00; |
||||
color: #222; |
||||
} |
||||
|
||||
.tab-container .content { |
||||
display: none; |
||||
} |
||||
|
||||
/* 页面布局 */ |
||||
.main { |
||||
padding: 30px 100px; |
||||
width: 960px; |
||||
margin: 0 auto; |
||||
} |
||||
|
||||
.main .logo { |
||||
color: #333; |
||||
text-align: left; |
||||
margin-bottom: 30px; |
||||
line-height: 1; |
||||
height: 110px; |
||||
margin-top: -50px; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.main .logo a { |
||||
font-size: 160px; |
||||
color: #333; |
||||
} |
||||
|
||||
.helps { |
||||
margin-top: 40px; |
||||
} |
||||
|
||||
.helps pre { |
||||
padding: 20px; |
||||
margin: 10px 0; |
||||
border: solid 1px #e7e1cd; |
||||
background-color: #fffdef; |
||||
overflow: auto; |
||||
} |
||||
|
||||
.icon_lists { |
||||
width: 100% !important; |
||||
overflow: hidden; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
.icon_lists li { |
||||
width: 100px; |
||||
margin-bottom: 10px; |
||||
margin-right: 20px; |
||||
text-align: center; |
||||
list-style: none !important; |
||||
cursor: default; |
||||
} |
||||
|
||||
.icon_lists li .code-name { |
||||
line-height: 1.2; |
||||
} |
||||
|
||||
.icon_lists .icon { |
||||
display: block; |
||||
height: 100px; |
||||
line-height: 100px; |
||||
font-size: 42px; |
||||
margin: 10px auto; |
||||
color: #333; |
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear; |
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear; |
||||
transition: font-size 0.25s linear, width 0.25s linear; |
||||
} |
||||
|
||||
.icon_lists .icon:hover { |
||||
font-size: 100px; |
||||
} |
||||
|
||||
.icon_lists .svg-icon { |
||||
/* 通过设置 font-size 来改变图标大小 */ |
||||
width: 1em; |
||||
/* 图标和文字相邻时，垂直对齐 */ |
||||
vertical-align: -0.15em; |
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */ |
||||
fill: currentColor; |
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 |
||||
normalize.css 中也包含这行 */ |
||||
overflow: hidden; |
||||
} |
||||
|
||||
.icon_lists li .name, |
||||
.icon_lists li .code-name { |
||||
color: #666; |
||||
} |
||||
|
||||
/* markdown 样式 */ |
||||
.markdown { |
||||
color: #666; |
||||
font-size: 14px; |
||||
line-height: 1.8; |
||||
} |
||||
|
||||
.highlight { |
||||
line-height: 1.5; |
||||
} |
||||
|
||||
.markdown img { |
||||
vertical-align: middle; |
||||
max-width: 100%; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
color: #404040; |
||||
font-weight: 500; |
||||
line-height: 40px; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown h2, |
||||
.markdown h3, |
||||
.markdown h4, |
||||
.markdown h5, |
||||
.markdown h6 { |
||||
color: #404040; |
||||
margin: 1.6em 0 0.6em 0; |
||||
font-weight: 500; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown h1 { |
||||
font-size: 28px; |
||||
} |
||||
|
||||
.markdown h2 { |
||||
font-size: 22px; |
||||
} |
||||
|
||||
.markdown h3 { |
||||
font-size: 16px; |
||||
} |
||||
|
||||
.markdown h4 { |
||||
font-size: 14px; |
||||
} |
||||
|
||||
.markdown h5 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown h6 { |
||||
font-size: 12px; |
||||
} |
||||
|
||||
.markdown hr { |
||||
height: 1px; |
||||
border: 0; |
||||
background: #e9e9e9; |
||||
margin: 16px 0; |
||||
clear: both; |
||||
} |
||||
|
||||
.markdown p { |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown>p, |
||||
.markdown>blockquote, |
||||
.markdown>.highlight, |
||||
.markdown>ol, |
||||
.markdown>ul { |
||||
width: 80%; |
||||
} |
||||
|
||||
.markdown ul>li { |
||||
list-style: circle; |
||||
} |
||||
|
||||
.markdown>ul li, |
||||
.markdown blockquote ul>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown>ul li p, |
||||
.markdown>ol li p { |
||||
margin: 0.6em 0; |
||||
} |
||||
|
||||
.markdown ol>li { |
||||
list-style: decimal; |
||||
} |
||||
|
||||
.markdown>ol li, |
||||
.markdown blockquote ol>li { |
||||
margin-left: 20px; |
||||
padding-left: 4px; |
||||
} |
||||
|
||||
.markdown code { |
||||
margin: 0 3px; |
||||
padding: 0 5px; |
||||
background: #eee; |
||||
border-radius: 3px; |
||||
} |
||||
|
||||
.markdown strong, |
||||
.markdown b { |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table { |
||||
border-collapse: collapse; |
||||
border-spacing: 0px; |
||||
empty-cells: show; |
||||
border: 1px solid #e9e9e9; |
||||
width: 95%; |
||||
margin-bottom: 24px; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
white-space: nowrap; |
||||
color: #333; |
||||
font-weight: 600; |
||||
} |
||||
|
||||
.markdown>table th, |
||||
.markdown>table td { |
||||
border: 1px solid #e9e9e9; |
||||
padding: 8px 16px; |
||||
text-align: left; |
||||
} |
||||
|
||||
.markdown>table th { |
||||
background: #F7F7F7; |
||||
} |
||||
|
||||
.markdown blockquote { |
||||
font-size: 90%; |
||||
color: #999; |
||||
border-left: 4px solid #e9e9e9; |
||||
padding-left: 0.8em; |
||||
margin: 1em 0; |
||||
} |
||||
|
||||
.markdown blockquote p { |
||||
margin: 0; |
||||
} |
||||
|
||||
.markdown .anchor { |
||||
opacity: 0; |
||||
transition: opacity 0.3s ease; |
||||
margin-left: 8px; |
||||
} |
||||
|
||||
.markdown .waiting { |
||||
color: #ccc; |
||||
} |
||||
|
||||
.markdown h1:hover .anchor, |
||||
.markdown h2:hover .anchor, |
||||
.markdown h3:hover .anchor, |
||||
.markdown h4:hover .anchor, |
||||
.markdown h5:hover .anchor, |
||||
.markdown h6:hover .anchor { |
||||
opacity: 1; |
||||
display: inline-block; |
||||
} |
||||
|
||||
.markdown>br, |
||||
.markdown>p>br { |
||||
clear: both; |
||||
} |
||||
|
||||
|
||||
.hljs { |
||||
display: block; |
||||
background: white; |
||||
padding: 0.5em; |
||||
color: #333333; |
||||
overflow-x: auto; |
||||
} |
||||
|
||||
.hljs-comment, |
||||
.hljs-meta { |
||||
color: #969896; |
||||
} |
||||
|
||||
.hljs-string, |
||||
.hljs-variable, |
||||
.hljs-template-variable, |
||||
.hljs-strong, |
||||
.hljs-emphasis, |
||||
.hljs-quote { |
||||
color: #df5000; |
||||
} |
||||
|
||||
.hljs-keyword, |
||||
.hljs-selector-tag, |
||||
.hljs-type { |
||||
color: #a71d5d; |
||||
} |
||||
|
||||
.hljs-literal, |
||||
.hljs-symbol, |
||||
.hljs-bullet, |
||||
.hljs-attribute { |
||||
color: #0086b3; |
||||
} |
||||
|
||||
.hljs-section, |
||||
.hljs-name { |
||||
color: #63a35c; |
||||
} |
||||
|
||||
.hljs-tag { |
||||
color: #333333; |
||||
} |
||||
|
||||
.hljs-title, |
||||
.hljs-attr, |
||||
.hljs-selector-id, |
||||
.hljs-selector-class, |
||||
.hljs-selector-attr, |
||||
.hljs-selector-pseudo { |
||||
color: #795da3; |
||||
} |
||||
|
||||
.hljs-addition { |
||||
color: #55a532; |
||||
background-color: #eaffea; |
||||
} |
||||
|
||||
.hljs-deletion { |
||||
color: #bd2c00; |
||||
background-color: #ffecec; |
||||
} |
||||
|
||||
.hljs-link { |
||||
text-decoration: underline; |
||||
} |
||||
|
||||
/* 代码高亮 */ |
||||
/* PrismJS 1.15.0 |
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ |
||||
/** |
||||
* prism.js default theme for JavaScript, CSS and HTML |
||||
* Based on dabblet (http://dabblet.com) |
||||
* @author Lea Verou |
||||
*/ |
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
color: black; |
||||
background: none; |
||||
text-shadow: 0 1px white; |
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; |
||||
text-align: left; |
||||
white-space: pre; |
||||
word-spacing: normal; |
||||
word-break: normal; |
||||
word-wrap: normal; |
||||
line-height: 1.5; |
||||
|
||||
-moz-tab-size: 4; |
||||
-o-tab-size: 4; |
||||
tab-size: 4; |
||||
|
||||
-webkit-hyphens: none; |
||||
-moz-hyphens: none; |
||||
-ms-hyphens: none; |
||||
hyphens: none; |
||||
} |
||||
|
||||
pre[class*="language-"]::-moz-selection, |
||||
pre[class*="language-"] ::-moz-selection, |
||||
code[class*="language-"]::-moz-selection, |
||||
code[class*="language-"] ::-moz-selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
pre[class*="language-"]::selection, |
||||
pre[class*="language-"] ::selection, |
||||
code[class*="language-"]::selection, |
||||
code[class*="language-"] ::selection { |
||||
text-shadow: none; |
||||
background: #b3d4fc; |
||||
} |
||||
|
||||
@media print { |
||||
|
||||
code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
text-shadow: none; |
||||
} |
||||
} |
||||
|
||||
/* Code blocks */ |
||||
pre[class*="language-"] { |
||||
padding: 1em; |
||||
margin: .5em 0; |
||||
overflow: auto; |
||||
} |
||||
|
||||
:not(pre)>code[class*="language-"], |
||||
pre[class*="language-"] { |
||||
background: #f5f2f0; |
||||
} |
||||
|
||||
/* Inline code */ |
||||
:not(pre)>code[class*="language-"] { |
||||
padding: .1em; |
||||
border-radius: .3em; |
||||
white-space: normal; |
||||
} |
||||
|
||||
.token.comment, |
||||
.token.prolog, |
||||
.token.doctype, |
||||
.token.cdata { |
||||
color: slategray; |
||||
} |
||||
|
||||
.token.punctuation { |
||||
color: #999; |
||||
} |
||||
|
||||
.namespace { |
||||
opacity: .7; |
||||
} |
||||
|
||||
.token.property, |
||||
.token.tag, |
||||
.token.boolean, |
||||
.token.number, |
||||
.token.constant, |
||||
.token.symbol, |
||||
.token.deleted { |
||||
color: #905; |
||||
} |
||||
|
||||
.token.selector, |
||||
.token.attr-name, |
||||
.token.string, |
||||
.token.char, |
||||
.token.builtin, |
||||
.token.inserted { |
||||
color: #690; |
||||
} |
||||
|
||||
.token.operator, |
||||
.token.entity, |
||||
.token.url, |
||||
.language-css .token.string, |
||||
.style .token.string { |
||||
color: #9a6e3a; |
||||
background: hsla(0, 0%, 100%, .5); |
||||
} |
||||
|
||||
.token.atrule, |
||||
.token.attr-value, |
||||
.token.keyword { |
||||
color: #07a; |
||||
} |
||||
|
||||
.token.function, |
||||
.token.class-name { |
||||
color: #DD4A68; |
||||
} |
||||
|
||||
.token.regex, |
||||
.token.important, |
||||
.token.variable { |
||||
color: #e90; |
||||
} |
||||
|
||||
.token.important, |
||||
.token.bold { |
||||
font-weight: bold; |
||||
} |
||||
|
||||
.token.italic { |
||||
font-style: italic; |
||||
} |
||||
|
||||
.token.entity { |
||||
cursor: help; |
||||
} |
||||
@ -0,0 +1,515 @@ |
||||
<!DOCTYPE html> |
||||
<html> |
||||
<head> |
||||
<meta charset="utf-8"/> |
||||
<title>IconFont Demo</title> |
||||
<link rel="shortcut icon" href="https://img.alicdn.com/tps/i4/TB1_oz6GVXXXXaFXpXXJDFnIXXX-64-64.ico" type="image/x-icon"/> |
||||
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css"> |
||||
<link rel="stylesheet" href="demo.css"> |
||||
<link rel="stylesheet" href="iconfont.css"> |
||||
<script src="iconfont.js"></script> |
||||
<!-- jQuery --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script> |
||||
<!-- 代码高亮 --> |
||||
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script> |
||||
</head> |
||||
<body> |
||||
<div class="main"> |
||||
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank"></a></h1> |
||||
<div class="nav-tabs"> |
||||
<ul id="tabs" class="dib-box"> |
||||
<li class="dib active"><span>Unicode</span></li> |
||||
<li class="dib"><span>Font class</span></li> |
||||
<li class="dib"><span>Symbol</span></li> |
||||
</ul> |
||||
|
||||
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=1540265" target="_blank" class="nav-more">查看项目</a> |
||||
|
||||
</div> |
||||
<div class="tab-container"> |
||||
<div class="content unicode" style="display: block;"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">circle-圆圈</div> |
||||
<div class="code-name">&#xe71e;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">circle-2-圆圈</div> |
||||
<div class="code-name">&#xe71f;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">微信</div> |
||||
<div class="code-name">&#xe637;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">搜索-填充</div> |
||||
<div class="code-name">&#xe736;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">已勾选32</div> |
||||
<div class="code-name">&#xe63d;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">未勾选32</div> |
||||
<div class="code-name">&#xe63e;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">未勾选40</div> |
||||
<div class="code-name">&#xe64a;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">已勾选40</div> |
||||
<div class="code-name">&#xe64b;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">实 向右箭头-01</div> |
||||
<div class="code-name">&#xe626;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">实 向下箭头-01</div> |
||||
<div class="code-name">&#xe625;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">加号-填充</div> |
||||
<div class="code-name">&#xe72d;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">42指向上、上箭头</div> |
||||
<div class="code-name">&#xe769;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">44指向下、下箭头</div> |
||||
<div class="code-name">&#xe76b;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">群蜂删除-充</div> |
||||
<div class="code-name">&#xe6e9;</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont"></span> |
||||
<div class="name">qq</div> |
||||
<div class="code-name">&#xe614;</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="unicode-">Unicode 引用</h2> |
||||
<hr> |
||||
|
||||
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p> |
||||
<ul> |
||||
<li>兼容性最好，支持 IE6+，及所有现代浏览器。</li> |
||||
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li> |
||||
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li> |
||||
</ul> |
||||
<blockquote> |
||||
<p>注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式</p> |
||||
</blockquote> |
||||
<p>Unicode 使用步骤如下：</p> |
||||
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3> |
||||
<pre><code class="language-css" |
||||
>@font-face { |
||||
font-family: 'iconfont'; |
||||
src: url('iconfont.eot'); |
||||
src: url('iconfont.eot?#iefix') format('embedded-opentype'), |
||||
url('iconfont.woff2') format('woff2'), |
||||
url('iconfont.woff') format('woff'), |
||||
url('iconfont.ttf') format('truetype'), |
||||
url('iconfont.svg#iconfont') format('svg'); |
||||
} |
||||
</code></pre> |
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3> |
||||
<pre><code class="language-css" |
||||
>.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3> |
||||
<pre> |
||||
<code class="language-html" |
||||
><span class="iconfont">&#x33;</span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content font-class"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-circleyuanquan"></span> |
||||
<div class="name"> |
||||
circle-圆圈 |
||||
</div> |
||||
<div class="code-name">.icon-circleyuanquan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-circle2yuanquan"></span> |
||||
<div class="name"> |
||||
circle-2-圆圈 |
||||
</div> |
||||
<div class="code-name">.icon-circle2yuanquan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-weixin"></span> |
||||
<div class="name"> |
||||
微信 |
||||
</div> |
||||
<div class="code-name">.icon-weixin |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-sousuo-tianchong"></span> |
||||
<div class="name"> |
||||
搜索-填充 |
||||
</div> |
||||
<div class="code-name">.icon-sousuo-tianchong |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-yigouxuan"></span> |
||||
<div class="name"> |
||||
已勾选32 |
||||
</div> |
||||
<div class="code-name">.icon-yigouxuan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-weigouxuan"></span> |
||||
<div class="name"> |
||||
未勾选32 |
||||
</div> |
||||
<div class="code-name">.icon-weigouxuan |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-weigouxuan1"></span> |
||||
<div class="name"> |
||||
未勾选40 |
||||
</div> |
||||
<div class="code-name">.icon-weigouxuan1 |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-yigouxuan1"></span> |
||||
<div class="name"> |
||||
已勾选40 |
||||
</div> |
||||
<div class="code-name">.icon-yigouxuan1 |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-shixiangyoujiantou-"></span> |
||||
<div class="name"> |
||||
实 向右箭头-01 |
||||
</div> |
||||
<div class="code-name">.icon-shixiangyoujiantou- |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-shixiangxiajiantou-"></span> |
||||
<div class="name"> |
||||
实 向下箭头-01 |
||||
</div> |
||||
<div class="code-name">.icon-shixiangxiajiantou- |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-jiahao"></span> |
||||
<div class="name"> |
||||
加号-填充 |
||||
</div> |
||||
<div class="code-name">.icon-jiahao |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-up"></span> |
||||
<div class="name"> |
||||
42指向上、上箭头 |
||||
</div> |
||||
<div class="code-name">.icon-up |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-down"></span> |
||||
<div class="name"> |
||||
44指向下、下箭头 |
||||
</div> |
||||
<div class="code-name">.icon-down |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-delete"></span> |
||||
<div class="name"> |
||||
群蜂删除-充 |
||||
</div> |
||||
<div class="code-name">.icon-delete |
||||
</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<span class="icon iconfont icon-qq"></span> |
||||
<div class="name"> |
||||
qq |
||||
</div> |
||||
<div class="code-name">.icon-qq |
||||
</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="font-class-">font-class 引用</h2> |
||||
<hr> |
||||
|
||||
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p> |
||||
<p>与 Unicode 使用方式相比，具有如下特点：</p> |
||||
<ul> |
||||
<li>兼容性良好，支持 IE8+，及所有现代浏览器。</li> |
||||
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li> |
||||
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li> |
||||
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li> |
||||
</ul> |
||||
<p>使用步骤如下：</p> |
||||
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3> |
||||
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css"> |
||||
</code></pre> |
||||
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<pre><code class="language-html"><span class="iconfont icon-xxx"></span> |
||||
</code></pre> |
||||
<blockquote> |
||||
<p>" |
||||
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p> |
||||
</blockquote> |
||||
</div> |
||||
</div> |
||||
<div class="content symbol"> |
||||
<ul class="icon_lists dib-box"> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-circleyuanquan"></use> |
||||
</svg> |
||||
<div class="name">circle-圆圈</div> |
||||
<div class="code-name">#icon-circleyuanquan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-circle2yuanquan"></use> |
||||
</svg> |
||||
<div class="name">circle-2-圆圈</div> |
||||
<div class="code-name">#icon-circle2yuanquan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-weixin"></use> |
||||
</svg> |
||||
<div class="name">微信</div> |
||||
<div class="code-name">#icon-weixin</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-sousuo-tianchong"></use> |
||||
</svg> |
||||
<div class="name">搜索-填充</div> |
||||
<div class="code-name">#icon-sousuo-tianchong</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-yigouxuan"></use> |
||||
</svg> |
||||
<div class="name">已勾选32</div> |
||||
<div class="code-name">#icon-yigouxuan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-weigouxuan"></use> |
||||
</svg> |
||||
<div class="name">未勾选32</div> |
||||
<div class="code-name">#icon-weigouxuan</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-weigouxuan1"></use> |
||||
</svg> |
||||
<div class="name">未勾选40</div> |
||||
<div class="code-name">#icon-weigouxuan1</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-yigouxuan1"></use> |
||||
</svg> |
||||
<div class="name">已勾选40</div> |
||||
<div class="code-name">#icon-yigouxuan1</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-shixiangyoujiantou-"></use> |
||||
</svg> |
||||
<div class="name">实 向右箭头-01</div> |
||||
<div class="code-name">#icon-shixiangyoujiantou-</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-shixiangxiajiantou-"></use> |
||||
</svg> |
||||
<div class="name">实 向下箭头-01</div> |
||||
<div class="code-name">#icon-shixiangxiajiantou-</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-jiahao"></use> |
||||
</svg> |
||||
<div class="name">加号-填充</div> |
||||
<div class="code-name">#icon-jiahao</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-up"></use> |
||||
</svg> |
||||
<div class="name">42指向上、上箭头</div> |
||||
<div class="code-name">#icon-up</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-down"></use> |
||||
</svg> |
||||
<div class="name">44指向下、下箭头</div> |
||||
<div class="code-name">#icon-down</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-delete"></use> |
||||
</svg> |
||||
<div class="name">群蜂删除-充</div> |
||||
<div class="code-name">#icon-delete</div> |
||||
</li> |
||||
|
||||
<li class="dib"> |
||||
<svg class="icon svg-icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-qq"></use> |
||||
</svg> |
||||
<div class="name">qq</div> |
||||
<div class="code-name">#icon-qq</div> |
||||
</li> |
||||
|
||||
</ul> |
||||
<div class="article markdown"> |
||||
<h2 id="symbol-">Symbol 引用</h2> |
||||
<hr> |
||||
|
||||
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a> |
||||
这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p> |
||||
<ul> |
||||
<li>支持多色图标了，不再受单色限制。</li> |
||||
<li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li> |
||||
<li>兼容性较差，支持 IE9+，及现代浏览器。</li> |
||||
<li>浏览器渲染 SVG 的性能一般，还不如 png。</li> |
||||
</ul> |
||||
<p>使用步骤如下：</p> |
||||
<h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3> |
||||
<pre><code class="language-html"><script src="./iconfont.js"></script> |
||||
</code></pre> |
||||
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3> |
||||
<pre><code class="language-html"><style> |
||||
.icon { |
||||
width: 1em; |
||||
height: 1em; |
||||
vertical-align: -0.15em; |
||||
fill: currentColor; |
||||
overflow: hidden; |
||||
} |
||||
</style> |
||||
</code></pre> |
||||
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3> |
||||
<pre><code class="language-html"><svg class="icon" aria-hidden="true"> |
||||
<use xlink:href="#icon-xxx"></use> |
||||
</svg> |
||||
</code></pre> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</div> |
||||
<script> |
||||
$(document).ready(function () { |
||||
$('.tab-container .content:first').show() |
||||
|
||||
$('#tabs li').click(function (e) { |
||||
var tabContent = $('.tab-container .content') |
||||
var index = $(this).index() |
||||
|
||||
if ($(this).hasClass('active')) { |
||||
return |
||||
} else { |
||||
$('#tabs li').removeClass('active') |
||||
$(this).addClass('active') |
||||
|
||||
tabContent.hide().eq(index).fadeIn() |
||||
} |
||||
}) |
||||
}) |
||||
</script> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,83 @@ |
||||
@font-face {font-family: "iconfont"; |
||||
src: url('iconfont.eot?t=1602582786227'); /* IE9 */ |
||||
src: url('iconfont.eot?t=1602582786227#iefix') format('embedded-opentype'), /* IE6-IE8 */ |
||||
url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), |
||||
url('iconfont.woff?t=1602582786227') format('woff'), |
||||
url('iconfont.ttf?t=1602582786227') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ |
||||
url('iconfont.svg?t=1602582786227#iconfont') format('svg'); /* iOS 4.1- */ |
||||
} |
||||
|
||||
.iconfont { |
||||
font-family: "iconfont" !important; |
||||
font-size: 16px; |
||||
font-style: normal; |
||||
-webkit-font-smoothing: antialiased; |
||||
-moz-osx-font-smoothing: grayscale; |
||||
} |
||||
/* 选中 */ |
||||
.icon-circleyuanquan:before { |
||||
content: "\e71e"; |
||||
color: #00B9FF; |
||||
font-size: 20px; |
||||
} |
||||
/* 未选中 */ |
||||
.icon-circle2yuanquan:before { |
||||
content: "\e71f"; |
||||
font-size: 20px; |
||||
} |
||||
|
||||
.icon-weixin:before { |
||||
content: "\e637"; |
||||
font-size: 22px; |
||||
color: #09D347; |
||||
margin-right: 10px; |
||||
} |
||||
|
||||
.icon-sousuo-tianchong:before { |
||||
content: "\e736"; |
||||
} |
||||
|
||||
.icon-yigouxuan:before { |
||||
content: "\e63d"; |
||||
} |
||||
|
||||
.icon-weigouxuan:before { |
||||
content: "\e63e"; |
||||
} |
||||
|
||||
.icon-weigouxuan1:before { |
||||
content: "\e64a"; |
||||
} |
||||
|
||||
.icon-yigouxuan1:before { |
||||
content: "\e64b"; |
||||
} |
||||
|
||||
.icon-shixiangyoujiantou-:before { |
||||
content: "\e626"; |
||||
} |
||||
|
||||
.icon-shixiangxiajiantou-:before { |
||||
content: "\e625"; |
||||
} |
||||
|
||||
.icon-jiahao:before { |
||||
content: "\e72d"; |
||||
} |
||||
|
||||
.icon-up:before { |
||||
content: "\e769"; |
||||
} |
||||
|
||||
.icon-down:before { |
||||
content: "\e76b"; |
||||
} |
||||
|
||||
.icon-delete:before { |
||||
content: "\e6e9"; |
||||
} |
||||
|
||||
.icon-qq:before { |
||||
content: "\e614"; |
||||
} |
||||
|
||||
Binary file not shown.
File diff suppressed because one or more lines are too long
@ -0,0 +1,114 @@ |
||||
{ |
||||
"id": "1540265", |
||||
"name": "education", |
||||
"font_family": "iconfont", |
||||
"css_prefix_text": "icon-", |
||||
"description": "", |
||||
"glyphs": [ |
||||
{ |
||||
"icon_id": "792472", |
||||
"name": "circle-圆圈", |
||||
"font_class": "circleyuanquan", |
||||
"unicode": "e71e", |
||||
"unicode_decimal": 59166 |
||||
}, |
||||
{ |
||||
"icon_id": "792473", |
||||
"name": "circle-2-圆圈", |
||||
"font_class": "circle2yuanquan", |
||||
"unicode": "e71f", |
||||
"unicode_decimal": 59167 |
||||
}, |
||||
{ |
||||
"icon_id": "6684308", |
||||
"name": "微信", |
||||
"font_class": "weixin", |
||||
"unicode": "e637", |
||||
"unicode_decimal": 58935 |
||||
}, |
||||
{ |
||||
"icon_id": "8349129", |
||||
"name": "搜索-填充", |
||||
"font_class": "sousuo-tianchong", |
||||
"unicode": "e736", |
||||
"unicode_decimal": 59190 |
||||
}, |
||||
{ |
||||
"icon_id": "2716513", |
||||
"name": "已勾选32", |
||||
"font_class": "yigouxuan", |
||||
"unicode": "e63d", |
||||
"unicode_decimal": 58941 |
||||
}, |
||||
{ |
||||
"icon_id": "2716516", |
||||
"name": "未勾选32", |
||||
"font_class": "weigouxuan", |
||||
"unicode": "e63e", |
||||
"unicode_decimal": 58942 |
||||
}, |
||||
{ |
||||
"icon_id": "2892929", |
||||
"name": "未勾选40", |
||||
"font_class": "weigouxuan1", |
||||
"unicode": "e64a", |
||||
"unicode_decimal": 58954 |
||||
}, |
||||
{ |
||||
"icon_id": "2892954", |
||||
"name": "已勾选40", |
||||
"font_class": "yigouxuan1", |
||||
"unicode": "e64b", |
||||
"unicode_decimal": 58955 |
||||
}, |
||||
{ |
||||
"icon_id": "5979965", |
||||
"name": "实 向右箭头-01", |
||||
"font_class": "shixiangyoujiantou-", |
||||
"unicode": "e626", |
||||
"unicode_decimal": 58918 |
||||
}, |
||||
{ |
||||
"icon_id": "5979966", |
||||
"name": "实 向下箭头-01", |
||||
"font_class": "shixiangxiajiantou-", |
||||
"unicode": "e625", |
||||
"unicode_decimal": 58917 |
||||
}, |
||||
{ |
||||
"icon_id": "8349103", |
||||
"name": "加号-填充", |
||||
"font_class": "jiahao", |
||||
"unicode": "e72d", |
||||
"unicode_decimal": 59181 |
||||
}, |
||||
{ |
||||
"icon_id": "6129078", |
||||
"name": "42指向上、上箭头", |
||||
"font_class": "up", |
||||
"unicode": "e769", |
||||
"unicode_decimal": 59241 |
||||
}, |
||||
{ |
||||
"icon_id": "6129081", |
||||
"name": "44指向下、下箭头", |
||||
"font_class": "down", |
||||
"unicode": "e76b", |
||||
"unicode_decimal": 59243 |
||||
}, |
||||
{ |
||||
"icon_id": "410692", |
||||
"name": "群蜂删除-充", |
||||
"font_class": "delete", |
||||
"unicode": "e6e9", |
||||
"unicode_decimal": 59113 |
||||
}, |
||||
{ |
||||
"icon_id": "468193", |
||||
"name": "qq", |
||||
"font_class": "qq", |
||||
"unicode": "e614", |
||||
"unicode_decimal": 58900 |
||||
} |
||||
] |
||||
} |
||||
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,53 @@ |
||||
import Vue from 'vue'; |
||||
import App from './App.vue'; |
||||
import router from './router'; |
||||
import ElementUI from 'element-ui'; |
||||
import VueI18n from 'vue-i18n'; |
||||
import { messages } from './components/common/i18n'; |
||||
import 'default-passive-events'//浏览器被动监听器冲突警报问题
|
||||
// import 'element-ui/lib/theme-chalk/index.css'; // 默认主题
|
||||
// import './assets/css/theme-green/index.css'; // 浅绿色主题
|
||||
import DrawFlow from "./components/DrawFlow"; |
||||
import '../theme/index.css' |
||||
import './assets/css/icon.css'; |
||||
import './assets/icon/iconfont.css'; |
||||
import './assets/css/font_iiho0e2wbc/iconfont.css' |
||||
import './components/common/directives'; |
||||
import './components/common/global.js'; |
||||
import 'babel-polyfill'; |
||||
import './util/rem' |
||||
import store from './store' |
||||
import core from './utils/core.js' |
||||
import echarts from 'echarts' |
||||
import 'view-design/dist/styles/iview.css' |
||||
import './assets/css/common.scss' |
||||
import { Tree } from 'view-design'; |
||||
import preventReClick from './utils/preventReClick.js' // 三秒内禁止再次点击
|
||||
import roleBtn from '../src/util/buttonRole.js' // 验证按钮权限
|
||||
import {Popover,Icon} from 'ant-design-vue' // ant流程图插件--系统管理-权限管理的树状结构需要，element的会导致一个无法解决的bug：已勾选值，重新渲染为上一次点击的勾选
|
||||
import 'ant-design-vue/lib/popover/style'; |
||||
// import 'ant-design-vue/lib/icon/style';
|
||||
// import { AntdComponent } from 'ant-design-vue/types/component';
|
||||
// import 'ant-design-vue/dist/antd.css';// ant的css
|
||||
Vue.component('Tree', Tree); |
||||
Vue.prototype.$echarts = echarts |
||||
Vue.prototype.core = core |
||||
Vue.config.productionTip = false; |
||||
Vue.use(DrawFlow); |
||||
Vue.use(VueI18n); |
||||
Vue.use(ElementUI); |
||||
// Vue.use(has);
|
||||
Vue.use(Popover); |
||||
Vue.use(Icon); |
||||
// [Popover,Icon].forEach(AntdComponent=> vue.use(AntdComponent))
|
||||
const i18n = new VueI18n({ |
||||
locale: 'zh', |
||||
messages |
||||
}); |
||||
|
||||
new Vue({ |
||||
router, |
||||
i18n, |
||||
store, |
||||
render: h => h(App) |
||||
}).$mount('#app'); |
||||
Loading…
Reference in new issue