├── .babelrc ├── .gitignore ├── README.md ├── dist ├── Dll.js ├── index.css ├── index.html └── index.js ├── dll ├── Dll.js └── manifest.json ├── package.json ├── src ├── api │ ├── README.md │ └── index.js ├── components │ ├── footer │ │ ├── Footer.js │ │ ├── Footer.styl │ │ └── index.js │ ├── header │ │ ├── Header.js │ │ ├── Header.styl │ │ └── index.js │ ├── leftnav │ │ ├── Leftnav.js │ │ ├── Leftnav.styl │ │ └── index.js │ └── notfound │ │ ├── Notfound.js │ │ ├── Notfound.styl │ │ └── index.js ├── images │ └── logo.svg ├── index.html ├── index.js ├── index.styl ├── loadable.js ├── pages │ └── home │ │ ├── Home.js │ │ ├── Home.styl │ │ └── index.js ├── router.js └── util │ ├── error.js │ └── performance.js ├── webpack.config.js ├── webpack.dll.config.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | [ 4 | "env", 5 | { 6 | "targets": { 7 | "browsers": [ 8 | ">1%", 9 | "last 3 versions" 10 | ] 11 | } 12 | } 13 | ], 14 | "stage-2", 15 | "latest", 16 | "react" 17 | ], 18 | "plugins": [ 19 | "syntax-dynamic-import", 20 | "transform-class-properties", ["import", { 21 | "libraryName": "antd", 22 | "libraryDirectory": "es", 23 | "style": "css" 24 | }] 25 | ] 26 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .cache-loader 2 | node_modules 3 | bower_components/ 4 | dist 5 | coverage 6 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | #### webpack4-es6-react 2 | 3 | 描述:一个基于 webpack4、React16、react-router-dom、es6、antd、axios 的前端项目，路由支持按需加载或按模块加载,ui框架默认配置是 antd,支持按需加载组件; 4 | [typescript版本](https://github.com/NewPrototype/webpack4-es6-react-typescript) 5 | 6 | #### 运行项目 7 | - ```cnpm i ``` 安装依赖,注意版本依赖版本 8 | - ```npm run start ``` 启动项目 9 | 10 | #### 锁定依赖版本 11 | - ``` npm install || yarn install``` 12 | 13 | #### 运行方法 14 | - ```npm run dll``` 公共包第一次生成，后续都不需要重新生成，加快打包速度 15 | - ```npm run start``` 启动项目 16 | - ```npm run dev``` 快捷打包，不压缩文件，发布测试环境 17 | - ```npm run build``` 正式打包，压缩文件,发布生产环境 18 | 19 | #### 功能 20 | 21 | - 编译速度快（使用 happypack 插件实现多线程执行任务） 22 | - 按需加载（不同页面文件单独压缩） 23 | - hash 指纹（js、css 文件自动添加版本号） 24 | - es2015 25 | - 支持 less、stylus 26 | - 图片体积小支持 base64 压缩 27 | - 支持 svg 解析 28 | - 支持自定义打包文件的目录 29 | - 支持热更新 30 | - 支持打包输出 map 文件，去除 console.log,注释 31 | - 支持打包压缩文件 32 | - 按需切割路由 router.js 里面 33 | - 增加 dll 加快打包速度 34 | 35 | #### 开发依赖 36 | - webpack 4.23.1 37 | - react 16.6.0 38 | - react-dom 16.6.0 39 | - react-router-dom 4.3.1 40 | - antd 3.10.4 41 | - axios 0.18.0 42 | - react-loadable 5.5.0 43 | - react-router 4.3.1 44 | #### 目录结构 45 | 46 | ``` 47 | . 48 | ├── dist --------------------- 打包文件 49 | ├── dll --------------------- dll文件 50 | ├── webpack.config --------------------- webpack相关配置 51 | ├── package.json --------------------- 项目配置 52 | ├── yarn.json --------------------- yarn 版本锁定 53 | ├── README.md ------------------------ 说明文件 54 | └── src ------------------------------ 源码目录 55 | └── util ------------------------ 辅助 56 |    └── error.js --------------------- 错误检查 57 |    └── performance.js --------------------- 页面性能 58 | ├── index.js -------------------------- 入口文件路由配置 59 | ├── router.js -------------------------- 路由配置 60 | ├── loadable.js -------------------------- 按需加载路由配置 61 | ├── index.styl -------------------------- 公共css 62 | ├── index.html -------------------------- html入口文件 63 | ├── components ------------------- 业务模块集合目录 64 | ├── api ------------------- 接口集合 65 | ├── images ----------------------- 图片资源目录 66 | └── pages ------------------------ 页面集合目录 67 |    └── home --------------------- home页面 68 |       ├── Home.js ------------- 页面入口文件 69 |       └── Home.styl -------- 页面样式 70 |       └── index.js -------- 页面样式 71 | ``` 72 | 73 | #### 克隆 74 | 75 | ``` 76 | git clone https://github.com/NewPrototype/webpack4-es6-react.git 77 | ``` 78 | 79 | 80 | #### 速度 81 | 82 | - 打包速度从 76830 毫秒提升到 14830 毫秒 83 | ``` 84 | Hash: 7e97185183a8397d60dc 85 | Version: webpack 4.23.1 86 | Time: 14830ms 87 | Built at: 2018-06-11 11:20:01 88 | ``` 89 | - 热更新速度从 2500 毫到 500 毫秒左右 90 | ``` 91 | Hash: df56e41b7815ca326b9e 92 | Version: webpack 4.23.1 93 | Time: 500ms 94 | Built at: 2018-06-12 15:27:47 95 | ``` 96 | 97 | #### todoList 98 | 99 | - 按需加载路由 100 | - 输出 webpack 编译 json,分析编译时间 101 | - 支持 axios 102 | - 支持 TypeScript 103 | - 加入DllPlugin加快打包 104 | - 提高 webpack 编译速度（一直在持续...） -------------------------------------------------------------------------------- /dist/index.css: -------------------------------------------------------------------------------- 1 | /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ 2 | /* stylelint-disable no-duplicate-selectors */ 3 | /* stylelint-disable */ 4 | /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ 5 | /* stylelint-disable at-rule-no-unknown */ 6 | @font-face { 7 | font-family: "Chinese Quote"; 8 | src: local("PingFang SC"), local("SimSun"); 9 | unicode-range: U+2018, U+2019, U+201c, U+201d; 10 | } 11 | html, 12 | body { 13 | width: 100%; 14 | height: 100%; 15 | } 16 | input::-ms-clear, 17 | input::-ms-reveal { 18 | display: none; 19 | } 20 | *, 21 | *::before, 22 | *::after { 23 | -webkit-box-sizing: border-box; 24 | box-sizing: border-box; 25 | } 26 | html { 27 | font-family: sans-serif; 28 | line-height: 1.15; 29 | -webkit-text-size-adjust: 100%; 30 | -ms-text-size-adjust: 100%; 31 | -ms-overflow-style: scrollbar; 32 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 33 | } 34 | @-ms-viewport { 35 | width: device-width; 36 | } 37 | article, 38 | aside, 39 | dialog, 40 | figcaption, 41 | figure, 42 | footer, 43 | header, 44 | hgroup, 45 | main, 46 | nav, 47 | section { 48 | display: block; 49 | } 50 | body { 51 | margin: 0; 52 | font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 53 | font-size: 14px; 54 | font-variant: tabular-nums; 55 | line-height: 1.5; 56 | color: rgba(0, 0, 0, 0.65); 57 | background-color: #fff; 58 | } 59 | [tabindex="-1"]:focus { 60 | outline: none !important; 61 | } 62 | hr { 63 | -webkit-box-sizing: content-box; 64 | box-sizing: content-box; 65 | height: 0; 66 | overflow: visible; 67 | } 68 | h1, 69 | h2, 70 | h3, 71 | h4, 72 | h5, 73 | h6 { 74 | margin-top: 0; 75 | margin-bottom: .5em; 76 | color: rgba(0, 0, 0, 0.85); 77 | font-weight: 500; 78 | } 79 | p { 80 | margin-top: 0; 81 | margin-bottom: 1em; 82 | } 83 | abbr[title], 84 | abbr[data-original-title] { 85 | text-decoration: underline; 86 | -webkit-text-decoration: underline dotted; 87 | text-decoration: underline dotted; 88 | cursor: help; 89 | border-bottom: 0; 90 | } 91 | address { 92 | margin-bottom: 1em; 93 | font-style: normal; 94 | line-height: inherit; 95 | } 96 | input[type="text"], 97 | input[type="password"], 98 | input[type="number"], 99 | textarea { 100 | -webkit-appearance: none; 101 | } 102 | ol, 103 | ul, 104 | dl { 105 | margin-top: 0; 106 | margin-bottom: 1em; 107 | } 108 | ol ol, 109 | ul ul, 110 | ol ul, 111 | ul ol { 112 | margin-bottom: 0; 113 | } 114 | dt { 115 | font-weight: 500; 116 | } 117 | dd { 118 | margin-bottom: .5em; 119 | margin-left: 0; 120 | } 121 | blockquote { 122 | margin: 0 0 1em; 123 | } 124 | dfn { 125 | font-style: italic; 126 | } 127 | b, 128 | strong { 129 | font-weight: bolder; 130 | } 131 | small { 132 | font-size: 80%; 133 | } 134 | sub, 135 | sup { 136 | position: relative; 137 | font-size: 75%; 138 | line-height: 0; 139 | vertical-align: baseline; 140 | } 141 | sub { 142 | bottom: -0.25em; 143 | } 144 | sup { 145 | top: -0.5em; 146 | } 147 | a { 148 | color: #1890ff; 149 | background-color: transparent; 150 | text-decoration: none; 151 | outline: none; 152 | cursor: pointer; 153 | -webkit-transition: color .3s; 154 | transition: color .3s; 155 | -webkit-text-decoration-skip: objects; 156 | } 157 | a:focus { 158 | text-decoration: underline; 159 | -webkit-text-decoration-skip: ink; 160 | text-decoration-skip: ink; 161 | } 162 | a:hover { 163 | color: #40a9ff; 164 | } 165 | a:active { 166 | color: #096dd9; 167 | } 168 | a:active, 169 | a:hover { 170 | outline: 0; 171 | text-decoration: none; 172 | } 173 | a[disabled] { 174 | color: rgba(0, 0, 0, 0.25); 175 | cursor: not-allowed; 176 | pointer-events: none; 177 | } 178 | pre, 179 | code, 180 | kbd, 181 | samp { 182 | font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace; 183 | font-size: 1em; 184 | } 185 | pre { 186 | margin-top: 0; 187 | margin-bottom: 1em; 188 | overflow: auto; 189 | } 190 | figure { 191 | margin: 0 0 1em; 192 | } 193 | img { 194 | vertical-align: middle; 195 | border-style: none; 196 | } 197 | svg:not(:root) { 198 | overflow: hidden; 199 | } 200 | a, 201 | area, 202 | button, 203 | [role="button"], 204 | input:not([type=range]), 205 | label, 206 | select, 207 | summary, 208 | textarea { 209 | -ms-touch-action: manipulation; 210 | touch-action: manipulation; 211 | } 212 | table { 213 | border-collapse: collapse; 214 | } 215 | caption { 216 | padding-top: .75em; 217 | padding-bottom: .3em; 218 | color: rgba(0, 0, 0, 0.45); 219 | text-align: left; 220 | caption-side: bottom; 221 | } 222 | th { 223 | text-align: inherit; 224 | } 225 | input, 226 | button, 227 | select, 228 | optgroup, 229 | textarea { 230 | margin: 0; 231 | font-family: inherit; 232 | font-size: inherit; 233 | line-height: inherit; 234 | color: inherit; 235 | } 236 | button, 237 | input { 238 | overflow: visible; 239 | } 240 | button, 241 | select { 242 | text-transform: none; 243 | } 244 | button, 245 | html [type="button"], 246 | [type="reset"], 247 | [type="submit"] { 248 | -webkit-appearance: button; 249 | } 250 | button::-moz-focus-inner, 251 | [type="button"]::-moz-focus-inner, 252 | [type="reset"]::-moz-focus-inner, 253 | [type="submit"]::-moz-focus-inner { 254 | padding: 0; 255 | border-style: none; 256 | } 257 | input[type="radio"], 258 | input[type="checkbox"] { 259 | -webkit-box-sizing: border-box; 260 | box-sizing: border-box; 261 | padding: 0; 262 | } 263 | input[type="date"], 264 | input[type="time"], 265 | input[type="datetime-local"], 266 | input[type="month"] { 267 | -webkit-appearance: listbox; 268 | } 269 | textarea { 270 | overflow: auto; 271 | resize: vertical; 272 | } 273 | fieldset { 274 | min-width: 0; 275 | padding: 0; 276 | margin: 0; 277 | border: 0; 278 | } 279 | legend { 280 | display: block; 281 | width: 100%; 282 | max-width: 100%; 283 | padding: 0; 284 | margin-bottom: .5em; 285 | font-size: 1.5em; 286 | line-height: inherit; 287 | color: inherit; 288 | white-space: normal; 289 | } 290 | progress { 291 | vertical-align: baseline; 292 | } 293 | [type="number"]::-webkit-inner-spin-button, 294 | [type="number"]::-webkit-outer-spin-button { 295 | height: auto; 296 | } 297 | [type="search"] { 298 | outline-offset: -2px; 299 | -webkit-appearance: none; 300 | } 301 | [type="search"]::-webkit-search-cancel-button, 302 | [type="search"]::-webkit-search-decoration { 303 | -webkit-appearance: none; 304 | } 305 | ::-webkit-file-upload-button { 306 | font: inherit; 307 | -webkit-appearance: button; 308 | } 309 | output { 310 | display: inline-block; 311 | } 312 | summary { 313 | display: list-item; 314 | } 315 | template { 316 | display: none; 317 | } 318 | [hidden] { 319 | display: none !important; 320 | } 321 | mark { 322 | padding: .2em; 323 | background-color: #feffe6; 324 | } 325 | ::-moz-selection { 326 | background: #1890ff; 327 | color: #fff; 328 | } 329 | ::selection { 330 | background: #1890ff; 331 | color: #fff; 332 | } 333 | .clearfix { 334 | zoom: 1; 335 | } 336 | .clearfix:before, 337 | .clearfix:after { 338 | content: ""; 339 | display: table; 340 | } 341 | .clearfix:after { 342 | clear: both; 343 | } 344 | .anticon { 345 | display: inline-block; 346 | font-style: normal; 347 | vertical-align: -0.125em; 348 | text-align: center; 349 | text-transform: none; 350 | line-height: 0; 351 | text-rendering: optimizeLegibility; 352 | -webkit-font-smoothing: antialiased; 353 | -moz-osx-font-smoothing: grayscale; 354 | } 355 | .anticon > * { 356 | line-height: 1; 357 | } 358 | .anticon svg { 359 | display: inline-block; 360 | } 361 | .anticon:before { 362 | display: none; 363 | } 364 | .anticon .anticon-icon { 365 | display: block; 366 | } 367 | .anticon-spin:before { 368 | display: inline-block; 369 | -webkit-animation: loadingCircle 1s infinite linear; 370 | animation: loadingCircle 1s infinite linear; 371 | } 372 | .anticon-spin { 373 | display: inline-block; 374 | -webkit-animation: loadingCircle 1s infinite linear; 375 | animation: loadingCircle 1s infinite linear; 376 | } 377 | .fade-enter, 378 | .fade-appear { 379 | -webkit-animation-duration: 0.2s; 380 | animation-duration: 0.2s; 381 | -webkit-animation-fill-mode: both; 382 | animation-fill-mode: both; 383 | -webkit-animation-play-state: paused; 384 | animation-play-state: paused; 385 | } 386 | .fade-leave { 387 | -webkit-animation-duration: 0.2s; 388 | animation-duration: 0.2s; 389 | -webkit-animation-fill-mode: both; 390 | animation-fill-mode: both; 391 | -webkit-animation-play-state: paused; 392 | animation-play-state: paused; 393 | } 394 | .fade-enter.fade-enter-active, 395 | .fade-appear.fade-appear-active { 396 | -webkit-animation-name: antFadeIn; 397 | animation-name: antFadeIn; 398 | -webkit-animation-play-state: running; 399 | animation-play-state: running; 400 | } 401 | .fade-leave.fade-leave-active { 402 | -webkit-animation-name: antFadeOut; 403 | animation-name: antFadeOut; 404 | -webkit-animation-play-state: running; 405 | animation-play-state: running; 406 | pointer-events: none; 407 | } 408 | .fade-enter, 409 | .fade-appear { 410 | opacity: 0; 411 | -webkit-animation-timing-function: linear; 412 | animation-timing-function: linear; 413 | } 414 | .fade-leave { 415 | -webkit-animation-timing-function: linear; 416 | animation-timing-function: linear; 417 | } 418 | @-webkit-keyframes antFadeIn { 419 | 0% { 420 | opacity: 0; 421 | } 422 | 100% { 423 | opacity: 1; 424 | } 425 | } 426 | @keyframes antFadeIn { 427 | 0% { 428 | opacity: 0; 429 | } 430 | 100% { 431 | opacity: 1; 432 | } 433 | } 434 | @-webkit-keyframes antFadeOut { 435 | 0% { 436 | opacity: 1; 437 | } 438 | 100% { 439 | opacity: 0; 440 | } 441 | } 442 | @keyframes antFadeOut { 443 | 0% { 444 | opacity: 1; 445 | } 446 | 100% { 447 | opacity: 0; 448 | } 449 | } 450 | .move-up-enter, 451 | .move-up-appear { 452 | -webkit-animation-duration: 0.2s; 453 | animation-duration: 0.2s; 454 | -webkit-animation-fill-mode: both; 455 | animation-fill-mode: both; 456 | -webkit-animation-play-state: paused; 457 | animation-play-state: paused; 458 | } 459 | .move-up-leave { 460 | -webkit-animation-duration: 0.2s; 461 | animation-duration: 0.2s; 462 | -webkit-animation-fill-mode: both; 463 | animation-fill-mode: both; 464 | -webkit-animation-play-state: paused; 465 | animation-play-state: paused; 466 | } 467 | .move-up-enter.move-up-enter-active, 468 | .move-up-appear.move-up-appear-active { 469 | -webkit-animation-name: antMoveUpIn; 470 | animation-name: antMoveUpIn; 471 | -webkit-animation-play-state: running; 472 | animation-play-state: running; 473 | } 474 | .move-up-leave.move-up-leave-active { 475 | -webkit-animation-name: antMoveUpOut; 476 | animation-name: antMoveUpOut; 477 | -webkit-animation-play-state: running; 478 | animation-play-state: running; 479 | pointer-events: none; 480 | } 481 | .move-up-enter, 482 | .move-up-appear { 483 | opacity: 0; 484 | -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 485 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 486 | } 487 | .move-up-leave { 488 | -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); 489 | animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); 490 | } 491 | .move-down-enter, 492 | .move-down-appear { 493 | -webkit-animation-duration: 0.2s; 494 | animation-duration: 0.2s; 495 | -webkit-animation-fill-mode: both; 496 | animation-fill-mode: both; 497 | -webkit-animation-play-state: paused; 498 | animation-play-state: paused; 499 | } 500 | .move-down-leave { 501 | -webkit-animation-duration: 0.2s; 502 | animation-duration: 0.2s; 503 | -webkit-animation-fill-mode: both; 504 | animation-fill-mode: both; 505 | -webkit-animation-play-state: paused; 506 | animation-play-state: paused; 507 | } 508 | .move-down-enter.move-down-enter-active, 509 | .move-down-appear.move-down-appear-active { 510 | -webkit-animation-name: antMoveDownIn; 511 | animation-name: antMoveDownIn; 512 | -webkit-animation-play-state: running; 513 | animation-play-state: running; 514 | } 515 | .move-down-leave.move-down-leave-active { 516 | -webkit-animation-name: antMoveDownOut; 517 | animation-name: antMoveDownOut; 518 | -webkit-animation-play-state: running; 519 | animation-play-state: running; 520 | pointer-events: none; 521 | } 522 | .move-down-enter, 523 | .move-down-appear { 524 | opacity: 0; 525 | -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 526 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 527 | } 528 | .move-down-leave { 529 | -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); 530 | animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); 531 | } 532 | .move-left-enter, 533 | .move-left-appear { 534 | -webkit-animation-duration: 0.2s; 535 | animation-duration: 0.2s; 536 | -webkit-animation-fill-mode: both; 537 | animation-fill-mode: both; 538 | -webkit-animation-play-state: paused; 539 | animation-play-state: paused; 540 | } 541 | .move-left-leave { 542 | -webkit-animation-duration: 0.2s; 543 | animation-duration: 0.2s; 544 | -webkit-animation-fill-mode: both; 545 | animation-fill-mode: both; 546 | -webkit-animation-play-state: paused; 547 | animation-play-state: paused; 548 | } 549 | .move-left-enter.move-left-enter-active, 550 | .move-left-appear.move-left-appear-active { 551 | -webkit-animation-name: antMoveLeftIn; 552 | animation-name: antMoveLeftIn; 553 | -webkit-animation-play-state: running; 554 | animation-play-state: running; 555 | } 556 | .move-left-leave.move-left-leave-active { 557 | -webkit-animation-name: antMoveLeftOut; 558 | animation-name: antMoveLeftOut; 559 | -webkit-animation-play-state: running; 560 | animation-play-state: running; 561 | pointer-events: none; 562 | } 563 | .move-left-enter, 564 | .move-left-appear { 565 | opacity: 0; 566 | -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 567 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 568 | } 569 | .move-left-leave { 570 | -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); 571 | animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); 572 | } 573 | .move-right-enter, 574 | .move-right-appear { 575 | -webkit-animation-duration: 0.2s; 576 | animation-duration: 0.2s; 577 | -webkit-animation-fill-mode: both; 578 | animation-fill-mode: both; 579 | -webkit-animation-play-state: paused; 580 | animation-play-state: paused; 581 | } 582 | .move-right-leave { 583 | -webkit-animation-duration: 0.2s; 584 | animation-duration: 0.2s; 585 | -webkit-animation-fill-mode: both; 586 | animation-fill-mode: both; 587 | -webkit-animation-play-state: paused; 588 | animation-play-state: paused; 589 | } 590 | .move-right-enter.move-right-enter-active, 591 | .move-right-appear.move-right-appear-active { 592 | -webkit-animation-name: antMoveRightIn; 593 | animation-name: antMoveRightIn; 594 | -webkit-animation-play-state: running; 595 | animation-play-state: running; 596 | } 597 | .move-right-leave.move-right-leave-active { 598 | -webkit-animation-name: antMoveRightOut; 599 | animation-name: antMoveRightOut; 600 | -webkit-animation-play-state: running; 601 | animation-play-state: running; 602 | pointer-events: none; 603 | } 604 | .move-right-enter, 605 | .move-right-appear { 606 | opacity: 0; 607 | -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 608 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 609 | } 610 | .move-right-leave { 611 | -webkit-animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); 612 | animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34); 613 | } 614 | @-webkit-keyframes antMoveDownIn { 615 | 0% { 616 | -webkit-transform-origin: 0 0; 617 | transform-origin: 0 0; 618 | -webkit-transform: translateY(100%); 619 | transform: translateY(100%); 620 | opacity: 0; 621 | } 622 | 100% { 623 | -webkit-transform-origin: 0 0; 624 | transform-origin: 0 0; 625 | -webkit-transform: translateY(0%); 626 | transform: translateY(0%); 627 | opacity: 1; 628 | } 629 | } 630 | @keyframes antMoveDownIn { 631 | 0% { 632 | -webkit-transform-origin: 0 0; 633 | transform-origin: 0 0; 634 | -webkit-transform: translateY(100%); 635 | transform: translateY(100%); 636 | opacity: 0; 637 | } 638 | 100% { 639 | -webkit-transform-origin: 0 0; 640 | transform-origin: 0 0; 641 | -webkit-transform: translateY(0%); 642 | transform: translateY(0%); 643 | opacity: 1; 644 | } 645 | } 646 | @-webkit-keyframes antMoveDownOut { 647 | 0% { 648 | -webkit-transform-origin: 0 0; 649 | transform-origin: 0 0; 650 | -webkit-transform: translateY(0%); 651 | transform: translateY(0%); 652 | opacity: 1; 653 | } 654 | 100% { 655 | -webkit-transform-origin: 0 0; 656 | transform-origin: 0 0; 657 | -webkit-transform: translateY(100%); 658 | transform: translateY(100%); 659 | opacity: 0; 660 | } 661 | } 662 | @keyframes antMoveDownOut { 663 | 0% { 664 | -webkit-transform-origin: 0 0; 665 | transform-origin: 0 0; 666 | -webkit-transform: translateY(0%); 667 | transform: translateY(0%); 668 | opacity: 1; 669 | } 670 | 100% { 671 | -webkit-transform-origin: 0 0; 672 | transform-origin: 0 0; 673 | -webkit-transform: translateY(100%); 674 | transform: translateY(100%); 675 | opacity: 0; 676 | } 677 | } 678 | @-webkit-keyframes antMoveLeftIn { 679 | 0% { 680 | -webkit-transform-origin: 0 0; 681 | transform-origin: 0 0; 682 | -webkit-transform: translateX(-100%); 683 | transform: translateX(-100%); 684 | opacity: 0; 685 | } 686 | 100% { 687 | -webkit-transform-origin: 0 0; 688 | transform-origin: 0 0; 689 | -webkit-transform: translateX(0%); 690 | transform: translateX(0%); 691 | opacity: 1; 692 | } 693 | } 694 | @keyframes antMoveLeftIn { 695 | 0% { 696 | -webkit-transform-origin: 0 0; 697 | transform-origin: 0 0; 698 | -webkit-transform: translateX(-100%); 699 | transform: translateX(-100%); 700 | opacity: 0; 701 | } 702 | 100% { 703 | -webkit-transform-origin: 0 0; 704 | transform-origin: 0 0; 705 | -webkit-transform: translateX(0%); 706 | transform: translateX(0%); 707 | opacity: 1; 708 | } 709 | } 710 | @-webkit-keyframes antMoveLeftOut { 711 | 0% { 712 | -webkit-transform-origin: 0 0; 713 | transform-origin: 0 0; 714 | -webkit-transform: translateX(0%); 715 | transform: translateX(0%); 716 | opacity: 1; 717 | } 718 | 100% { 719 | -webkit-transform-origin: 0 0; 720 | transform-origin: 0 0; 721 | -webkit-transform: translateX(-100%); 722 | transform: translateX(-100%); 723 | opacity: 0; 724 | } 725 | } 726 | @keyframes antMoveLeftOut { 727 | 0% { 728 | -webkit-transform-origin: 0 0; 729 | transform-origin: 0 0; 730 | -webkit-transform: translateX(0%); 731 | transform: translateX(0%); 732 | opacity: 1; 733 | } 734 | 100% { 735 | -webkit-transform-origin: 0 0; 736 | transform-origin: 0 0; 737 | -webkit-transform: translateX(-100%); 738 | transform: translateX(-100%); 739 | opacity: 0; 740 | } 741 | } 742 | @-webkit-keyframes antMoveRightIn { 743 | 0% { 744 | opacity: 0; 745 | -webkit-transform-origin: 0 0; 746 | transform-origin: 0 0; 747 | -webkit-transform: translateX(100%); 748 | transform: translateX(100%); 749 | } 750 | 100% { 751 | opacity: 1; 752 | -webkit-transform-origin: 0 0; 753 | transform-origin: 0 0; 754 | -webkit-transform: translateX(0%); 755 | transform: translateX(0%); 756 | } 757 | } 758 | @keyframes antMoveRightIn { 759 | 0% { 760 | opacity: 0; 761 | -webkit-transform-origin: 0 0; 762 | transform-origin: 0 0; 763 | -webkit-transform: translateX(100%); 764 | transform: translateX(100%); 765 | } 766 | 100% { 767 | opacity: 1; 768 | -webkit-transform-origin: 0 0; 769 | transform-origin: 0 0; 770 | -webkit-transform: translateX(0%); 771 | transform: translateX(0%); 772 | } 773 | } 774 | @-webkit-keyframes antMoveRightOut { 775 | 0% { 776 | -webkit-transform-origin: 0 0; 777 | transform-origin: 0 0; 778 | -webkit-transform: translateX(0%); 779 | transform: translateX(0%); 780 | opacity: 1; 781 | } 782 | 100% { 783 | -webkit-transform-origin: 0 0; 784 | transform-origin: 0 0; 785 | -webkit-transform: translateX(100%); 786 | transform: translateX(100%); 787 | opacity: 0; 788 | } 789 | } 790 | @keyframes antMoveRightOut { 791 | 0% { 792 | -webkit-transform-origin: 0 0; 793 | transform-origin: 0 0; 794 | -webkit-transform: translateX(0%); 795 | transform: translateX(0%); 796 | opacity: 1; 797 | } 798 | 100% { 799 | -webkit-transform-origin: 0 0; 800 | transform-origin: 0 0; 801 | -webkit-transform: translateX(100%); 802 | transform: translateX(100%); 803 | opacity: 0; 804 | } 805 | } 806 | @-webkit-keyframes antMoveUpIn { 807 | 0% { 808 | -webkit-transform-origin: 0 0; 809 | transform-origin: 0 0; 810 | -webkit-transform: translateY(-100%); 811 | transform: translateY(-100%); 812 | opacity: 0; 813 | } 814 | 100% { 815 | -webkit-transform-origin: 0 0; 816 | transform-origin: 0 0; 817 | -webkit-transform: translateY(0%); 818 | transform: translateY(0%); 819 | opacity: 1; 820 | } 821 | } 822 | @keyframes antMoveUpIn { 823 | 0% { 824 | -webkit-transform-origin: 0 0; 825 | transform-origin: 0 0; 826 | -webkit-transform: translateY(-100%); 827 | transform: translateY(-100%); 828 | opacity: 0; 829 | } 830 | 100% { 831 | -webkit-transform-origin: 0 0; 832 | transform-origin: 0 0; 833 | -webkit-transform: translateY(0%); 834 | transform: translateY(0%); 835 | opacity: 1; 836 | } 837 | } 838 | @-webkit-keyframes antMoveUpOut { 839 | 0% { 840 | -webkit-transform-origin: 0 0; 841 | transform-origin: 0 0; 842 | -webkit-transform: translateY(0%); 843 | transform: translateY(0%); 844 | opacity: 1; 845 | } 846 | 100% { 847 | -webkit-transform-origin: 0 0; 848 | transform-origin: 0 0; 849 | -webkit-transform: translateY(-100%); 850 | transform: translateY(-100%); 851 | opacity: 0; 852 | } 853 | } 854 | @keyframes antMoveUpOut { 855 | 0% { 856 | -webkit-transform-origin: 0 0; 857 | transform-origin: 0 0; 858 | -webkit-transform: translateY(0%); 859 | transform: translateY(0%); 860 | opacity: 1; 861 | } 862 | 100% { 863 | -webkit-transform-origin: 0 0; 864 | transform-origin: 0 0; 865 | -webkit-transform: translateY(-100%); 866 | transform: translateY(-100%); 867 | opacity: 0; 868 | } 869 | } 870 | @-webkit-keyframes loadingCircle { 871 | 100% { 872 | -webkit-transform: rotate(360deg); 873 | transform: rotate(360deg); 874 | } 875 | } 876 | @keyframes loadingCircle { 877 | 100% { 878 | -webkit-transform: rotate(360deg); 879 | transform: rotate(360deg); 880 | } 881 | } 882 | [ant-click-animating], 883 | [ant-click-animating-without-extra-node] { 884 | position: relative; 885 | } 886 | [ant-click-animating-without-extra-node]:after, 887 | .ant-click-animating-node { 888 | content: ''; 889 | position: absolute; 890 | top: -1px; 891 | left: -1px; 892 | bottom: -1px; 893 | right: -1px; 894 | border-radius: inherit; 895 | border: 0 solid #1890ff; 896 | opacity: 0.2; 897 | -webkit-animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1); 898 | animation: fadeEffect 2s cubic-bezier(0.08, 0.82, 0.17, 1), waveEffect 0.4s cubic-bezier(0.08, 0.82, 0.17, 1); 899 | -webkit-animation-fill-mode: forwards; 900 | animation-fill-mode: forwards; 901 | display: block; 902 | pointer-events: none; 903 | } 904 | @-webkit-keyframes waveEffect { 905 | 100% { 906 | top: -6px; 907 | left: -6px; 908 | bottom: -6px; 909 | right: -6px; 910 | border-width: 6px; 911 | } 912 | } 913 | @keyframes waveEffect { 914 | 100% { 915 | top: -6px; 916 | left: -6px; 917 | bottom: -6px; 918 | right: -6px; 919 | border-width: 6px; 920 | } 921 | } 922 | @-webkit-keyframes fadeEffect { 923 | 100% { 924 | opacity: 0; 925 | } 926 | } 927 | @keyframes fadeEffect { 928 | 100% { 929 | opacity: 0; 930 | } 931 | } 932 | .slide-up-enter, 933 | .slide-up-appear { 934 | -webkit-animation-duration: 0.2s; 935 | animation-duration: 0.2s; 936 | -webkit-animation-fill-mode: both; 937 | animation-fill-mode: both; 938 | -webkit-animation-play-state: paused; 939 | animation-play-state: paused; 940 | } 941 | .slide-up-leave { 942 | -webkit-animation-duration: 0.2s; 943 | animation-duration: 0.2s; 944 | -webkit-animation-fill-mode: both; 945 | animation-fill-mode: both; 946 | -webkit-animation-play-state: paused; 947 | animation-play-state: paused; 948 | } 949 | .slide-up-enter.slide-up-enter-active, 950 | .slide-up-appear.slide-up-appear-active { 951 | -webkit-animation-name: antSlideUpIn; 952 | animation-name: antSlideUpIn; 953 | -webkit-animation-play-state: running; 954 | animation-play-state: running; 955 | } 956 | .slide-up-leave.slide-up-leave-active { 957 | -webkit-animation-name: antSlideUpOut; 958 | animation-name: antSlideUpOut; 959 | -webkit-animation-play-state: running; 960 | animation-play-state: running; 961 | pointer-events: none; 962 | } 963 | .slide-up-enter, 964 | .slide-up-appear { 965 | opacity: 0; 966 | -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 967 | animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 968 | } 969 | .slide-up-leave { 970 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 971 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 972 | } 973 | .slide-down-enter, 974 | .slide-down-appear { 975 | -webkit-animation-duration: 0.2s; 976 | animation-duration: 0.2s; 977 | -webkit-animation-fill-mode: both; 978 | animation-fill-mode: both; 979 | -webkit-animation-play-state: paused; 980 | animation-play-state: paused; 981 | } 982 | .slide-down-leave { 983 | -webkit-animation-duration: 0.2s; 984 | animation-duration: 0.2s; 985 | -webkit-animation-fill-mode: both; 986 | animation-fill-mode: both; 987 | -webkit-animation-play-state: paused; 988 | animation-play-state: paused; 989 | } 990 | .slide-down-enter.slide-down-enter-active, 991 | .slide-down-appear.slide-down-appear-active { 992 | -webkit-animation-name: antSlideDownIn; 993 | animation-name: antSlideDownIn; 994 | -webkit-animation-play-state: running; 995 | animation-play-state: running; 996 | } 997 | .slide-down-leave.slide-down-leave-active { 998 | -webkit-animation-name: antSlideDownOut; 999 | animation-name: antSlideDownOut; 1000 | -webkit-animation-play-state: running; 1001 | animation-play-state: running; 1002 | pointer-events: none; 1003 | } 1004 | .slide-down-enter, 1005 | .slide-down-appear { 1006 | opacity: 0; 1007 | -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 1008 | animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 1009 | } 1010 | .slide-down-leave { 1011 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1012 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1013 | } 1014 | .slide-left-enter, 1015 | .slide-left-appear { 1016 | -webkit-animation-duration: 0.2s; 1017 | animation-duration: 0.2s; 1018 | -webkit-animation-fill-mode: both; 1019 | animation-fill-mode: both; 1020 | -webkit-animation-play-state: paused; 1021 | animation-play-state: paused; 1022 | } 1023 | .slide-left-leave { 1024 | -webkit-animation-duration: 0.2s; 1025 | animation-duration: 0.2s; 1026 | -webkit-animation-fill-mode: both; 1027 | animation-fill-mode: both; 1028 | -webkit-animation-play-state: paused; 1029 | animation-play-state: paused; 1030 | } 1031 | .slide-left-enter.slide-left-enter-active, 1032 | .slide-left-appear.slide-left-appear-active { 1033 | -webkit-animation-name: antSlideLeftIn; 1034 | animation-name: antSlideLeftIn; 1035 | -webkit-animation-play-state: running; 1036 | animation-play-state: running; 1037 | } 1038 | .slide-left-leave.slide-left-leave-active { 1039 | -webkit-animation-name: antSlideLeftOut; 1040 | animation-name: antSlideLeftOut; 1041 | -webkit-animation-play-state: running; 1042 | animation-play-state: running; 1043 | pointer-events: none; 1044 | } 1045 | .slide-left-enter, 1046 | .slide-left-appear { 1047 | opacity: 0; 1048 | -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 1049 | animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 1050 | } 1051 | .slide-left-leave { 1052 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1053 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1054 | } 1055 | .slide-right-enter, 1056 | .slide-right-appear { 1057 | -webkit-animation-duration: 0.2s; 1058 | animation-duration: 0.2s; 1059 | -webkit-animation-fill-mode: both; 1060 | animation-fill-mode: both; 1061 | -webkit-animation-play-state: paused; 1062 | animation-play-state: paused; 1063 | } 1064 | .slide-right-leave { 1065 | -webkit-animation-duration: 0.2s; 1066 | animation-duration: 0.2s; 1067 | -webkit-animation-fill-mode: both; 1068 | animation-fill-mode: both; 1069 | -webkit-animation-play-state: paused; 1070 | animation-play-state: paused; 1071 | } 1072 | .slide-right-enter.slide-right-enter-active, 1073 | .slide-right-appear.slide-right-appear-active { 1074 | -webkit-animation-name: antSlideRightIn; 1075 | animation-name: antSlideRightIn; 1076 | -webkit-animation-play-state: running; 1077 | animation-play-state: running; 1078 | } 1079 | .slide-right-leave.slide-right-leave-active { 1080 | -webkit-animation-name: antSlideRightOut; 1081 | animation-name: antSlideRightOut; 1082 | -webkit-animation-play-state: running; 1083 | animation-play-state: running; 1084 | pointer-events: none; 1085 | } 1086 | .slide-right-enter, 1087 | .slide-right-appear { 1088 | opacity: 0; 1089 | -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 1090 | animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); 1091 | } 1092 | .slide-right-leave { 1093 | -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1094 | animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); 1095 | } 1096 | @-webkit-keyframes antSlideUpIn { 1097 | 0% { 1098 | opacity: 0; 1099 | -webkit-transform-origin: 0% 0%; 1100 | transform-origin: 0% 0%; 1101 | -webkit-transform: scaleY(0.8); 1102 | transform: scaleY(0.8); 1103 | } 1104 | 100% { 1105 | opacity: 1; 1106 | -webkit-transform-origin: 0% 0%; 1107 | transform-origin: 0% 0%; 1108 | -webkit-transform: scaleY(1); 1109 | transform: scaleY(1); 1110 | } 1111 | } 1112 | @keyframes antSlideUpIn { 1113 | 0% { 1114 | opacity: 0; 1115 | -webkit-transform-origin: 0% 0%; 1116 | transform-origin: 0% 0%; 1117 | -webkit-transform: scaleY(0.8); 1118 | transform: scaleY(0.8); 1119 | } 1120 | 100% { 1121 | opacity: 1; 1122 | -webkit-transform-origin: 0% 0%; 1123 | transform-origin: 0% 0%; 1124 | -webkit-transform: scaleY(1); 1125 | transform: scaleY(1); 1126 | } 1127 | } 1128 | @-webkit-keyframes antSlideUpOut { 1129 | 0% { 1130 | opacity: 1; 1131 | -webkit-transform-origin: 0% 0%; 1132 | transform-origin: 0% 0%; 1133 | -webkit-transform: scaleY(1); 1134 | transform: scaleY(1); 1135 | } 1136 | 100% { 1137 | opacity: 0; 1138 | -webkit-transform-origin: 0% 0%; 1139 | transform-origin: 0% 0%; 1140 | -webkit-transform: scaleY(0.8); 1141 | transform: scaleY(0.8); 1142 | } 1143 | } 1144 | @keyframes antSlideUpOut { 1145 | 0% { 1146 | opacity: 1; 1147 | -webkit-transform-origin: 0% 0%; 1148 | transform-origin: 0% 0%; 1149 | -webkit-transform: scaleY(1); 1150 | transform: scaleY(1); 1151 | } 1152 | 100% { 1153 | opacity: 0; 1154 | -webkit-transform-origin: 0% 0%; 1155 | transform-origin: 0% 0%; 1156 | -webkit-transform: scaleY(0.8); 1157 | transform: scaleY(0.8); 1158 | } 1159 | } 1160 | @-webkit-keyframes antSlideDownIn { 1161 | 0% { 1162 | opacity: 0; 1163 | -webkit-transform-origin: 100% 100%; 1164 | transform-origin: 100% 100%; 1165 | -webkit-transform: scaleY(0.8); 1166 | transform: scaleY(0.8); 1167 | } 1168 | 100% { 1169 | opacity: 1; 1170 | -webkit-transform-origin: 100% 100%; 1171 | transform-origin: 100% 100%; 1172 | -webkit-transform: scaleY(1); 1173 | transform: scaleY(1); 1174 | } 1175 | } 1176 | @keyframes antSlideDownIn { 1177 | 0% { 1178 | opacity: 0; 1179 | -webkit-transform-origin: 100% 100%; 1180 | transform-origin: 100% 100%; 1181 | -webkit-transform: scaleY(0.8); 1182 | transform: scaleY(0.8); 1183 | } 1184 | 100% { 1185 | opacity: 1; 1186 | -webkit-transform-origin: 100% 100%; 1187 | transform-origin: 100% 100%; 1188 | -webkit-transform: scaleY(1); 1189 | transform: scaleY(1); 1190 | } 1191 | } 1192 | @-webkit-keyframes antSlideDownOut { 1193 | 0% { 1194 | opacity: 1; 1195 | -webkit-transform-origin: 100% 100%; 1196 | transform-origin: 100% 100%; 1197 | -webkit-transform: scaleY(1); 1198 | transform: scaleY(1); 1199 | } 1200 | 100% { 1201 | opacity: 0; 1202 | -webkit-transform-origin: 100% 100%; 1203 | transform-origin: 100% 100%; 1204 | -webkit-transform: scaleY(0.8); 1205 | transform: scaleY(0.8); 1206 | } 1207 | } 1208 | @keyframes antSlideDownOut { 1209 | 0% { 1210 | opacity: 1; 1211 | -webkit-transform-origin: 100% 100%; 1212 | transform-origin: 100% 100%; 1213 | -webkit-transform: scaleY(1); 1214 | transform: scaleY(1); 1215 | } 1216 | 100% { 1217 | opacity: 0; 1218 | -webkit-transform-origin: 100% 100%; 1219 | transform-origin: 100% 100%; 1220 | -webkit-transform: scaleY(0.8); 1221 | transform: scaleY(0.8); 1222 | } 1223 | } 1224 | @-webkit-keyframes antSlideLeftIn { 1225 | 0% { 1226 | opacity: 0; 1227 | -webkit-transform-origin: 0% 0%; 1228 | transform-origin: 0% 0%; 1229 | -webkit-transform: scaleX(0.8); 1230 | transform: scaleX(0.8); 1231 | } 1232 | 100% { 1233 | opacity: 1; 1234 | -webkit-transform-origin: 0% 0%; 1235 | transform-origin: 0% 0%; 1236 | -webkit-transform: scaleX(1); 1237 | transform: scaleX(1); 1238 | } 1239 | } 1240 | @keyframes antSlideLeftIn { 1241 | 0% { 1242 | opacity: 0; 1243 | -webkit-transform-origin: 0% 0%; 1244 | transform-origin: 0% 0%; 1245 | -webkit-transform: scaleX(0.8); 1246 | transform: scaleX(0.8); 1247 | } 1248 | 100% { 1249 | opacity: 1; 1250 | -webkit-transform-origin: 0% 0%; 1251 | transform-origin: 0% 0%; 1252 | -webkit-transform: scaleX(1); 1253 | transform: scaleX(1); 1254 | } 1255 | } 1256 | @-webkit-keyframes antSlideLeftOut { 1257 | 0% { 1258 | opacity: 1; 1259 | -webkit-transform-origin: 0% 0%; 1260 | transform-origin: 0% 0%; 1261 | -webkit-transform: scaleX(1); 1262 | transform: scaleX(1); 1263 | } 1264 | 100% { 1265 | opacity: 0; 1266 | -webkit-transform-origin: 0% 0%; 1267 | transform-origin: 0% 0%; 1268 | -webkit-transform: scaleX(0.8); 1269 | transform: scaleX(0.8); 1270 | } 1271 | } 1272 | @keyframes antSlideLeftOut { 1273 | 0% { 1274 | opacity: 1; 1275 | -webkit-transform-origin: 0% 0%; 1276 | transform-origin: 0% 0%; 1277 | -webkit-transform: scaleX(1); 1278 | transform: scaleX(1); 1279 | } 1280 | 100% { 1281 | opacity: 0; 1282 | -webkit-transform-origin: 0% 0%; 1283 | transform-origin: 0% 0%; 1284 | -webkit-transform: scaleX(0.8); 1285 | transform: scaleX(0.8); 1286 | } 1287 | } 1288 | @-webkit-keyframes antSlideRightIn { 1289 | 0% { 1290 | opacity: 0; 1291 | -webkit-transform-origin: 100% 0%; 1292 | transform-origin: 100% 0%; 1293 | -webkit-transform: scaleX(0.8); 1294 | transform: scaleX(0.8); 1295 | } 1296 | 100% { 1297 | opacity: 1; 1298 | -webkit-transform-origin: 100% 0%; 1299 | transform-origin: 100% 0%; 1300 | -webkit-transform: scaleX(1); 1301 | transform: scaleX(1); 1302 | } 1303 | } 1304 | @keyframes antSlideRightIn { 1305 | 0% { 1306 | opacity: 0; 1307 | -webkit-transform-origin: 100% 0%; 1308 | transform-origin: 100% 0%; 1309 | -webkit-transform: scaleX(0.8); 1310 | transform: scaleX(0.8); 1311 | } 1312 | 100% { 1313 | opacity: 1; 1314 | -webkit-transform-origin: 100% 0%; 1315 | transform-origin: 100% 0%; 1316 | -webkit-transform: scaleX(1); 1317 | transform: scaleX(1); 1318 | } 1319 | } 1320 | @-webkit-keyframes antSlideRightOut { 1321 | 0% { 1322 | opacity: 1; 1323 | -webkit-transform-origin: 100% 0%; 1324 | transform-origin: 100% 0%; 1325 | -webkit-transform: scaleX(1); 1326 | transform: scaleX(1); 1327 | } 1328 | 100% { 1329 | opacity: 0; 1330 | -webkit-transform-origin: 100% 0%; 1331 | transform-origin: 100% 0%; 1332 | -webkit-transform: scaleX(0.8); 1333 | transform: scaleX(0.8); 1334 | } 1335 | } 1336 | @keyframes antSlideRightOut { 1337 | 0% { 1338 | opacity: 1; 1339 | -webkit-transform-origin: 100% 0%; 1340 | transform-origin: 100% 0%; 1341 | -webkit-transform: scaleX(1); 1342 | transform: scaleX(1); 1343 | } 1344 | 100% { 1345 | opacity: 0; 1346 | -webkit-transform-origin: 100% 0%; 1347 | transform-origin: 100% 0%; 1348 | -webkit-transform: scaleX(0.8); 1349 | transform: scaleX(0.8); 1350 | } 1351 | } 1352 | .swing-enter, 1353 | .swing-appear { 1354 | -webkit-animation-duration: 0.2s; 1355 | animation-duration: 0.2s; 1356 | -webkit-animation-fill-mode: both; 1357 | animation-fill-mode: both; 1358 | -webkit-animation-play-state: paused; 1359 | animation-play-state: paused; 1360 | } 1361 | .swing-enter.swing-enter-active, 1362 | .swing-appear.swing-appear-active { 1363 | -webkit-animation-name: antSwingIn; 1364 | animation-name: antSwingIn; 1365 | -webkit-animation-play-state: running; 1366 | animation-play-state: running; 1367 | } 1368 | @-webkit-keyframes antSwingIn { 1369 | 0%, 1370 | 100% { 1371 | -webkit-transform: translateX(0); 1372 | transform: translateX(0); 1373 | } 1374 | 20% { 1375 | -webkit-transform: translateX(-10px); 1376 | transform: translateX(-10px); 1377 | } 1378 | 40% { 1379 | -webkit-transform: translateX(10px); 1380 | transform: translateX(10px); 1381 | } 1382 | 60% { 1383 | -webkit-transform: translateX(-5px); 1384 | transform: translateX(-5px); 1385 | } 1386 | 80% { 1387 | -webkit-transform: translateX(5px); 1388 | transform: translateX(5px); 1389 | } 1390 | } 1391 | @keyframes antSwingIn { 1392 | 0%, 1393 | 100% { 1394 | -webkit-transform: translateX(0); 1395 | transform: translateX(0); 1396 | } 1397 | 20% { 1398 | -webkit-transform: translateX(-10px); 1399 | transform: translateX(-10px); 1400 | } 1401 | 40% { 1402 | -webkit-transform: translateX(10px); 1403 | transform: translateX(10px); 1404 | } 1405 | 60% { 1406 | -webkit-transform: translateX(-5px); 1407 | transform: translateX(-5px); 1408 | } 1409 | 80% { 1410 | -webkit-transform: translateX(5px); 1411 | transform: translateX(5px); 1412 | } 1413 | } 1414 | .zoom-enter, 1415 | .zoom-appear { 1416 | -webkit-animation-duration: 0.2s; 1417 | animation-duration: 0.2s; 1418 | -webkit-animation-fill-mode: both; 1419 | animation-fill-mode: both; 1420 | -webkit-animation-play-state: paused; 1421 | animation-play-state: paused; 1422 | } 1423 | .zoom-leave { 1424 | -webkit-animation-duration: 0.2s; 1425 | animation-duration: 0.2s; 1426 | -webkit-animation-fill-mode: both; 1427 | animation-fill-mode: both; 1428 | -webkit-animation-play-state: paused; 1429 | animation-play-state: paused; 1430 | } 1431 | .zoom-enter.zoom-enter-active, 1432 | .zoom-appear.zoom-appear-active { 1433 | -webkit-animation-name: antZoomIn; 1434 | animation-name: antZoomIn; 1435 | -webkit-animation-play-state: running; 1436 | animation-play-state: running; 1437 | } 1438 | .zoom-leave.zoom-leave-active { 1439 | -webkit-animation-name: antZoomOut; 1440 | animation-name: antZoomOut; 1441 | -webkit-animation-play-state: running; 1442 | animation-play-state: running; 1443 | pointer-events: none; 1444 | } 1445 | .zoom-enter, 1446 | .zoom-appear { 1447 | -webkit-transform: scale(0); 1448 | -ms-transform: scale(0); 1449 | transform: scale(0); 1450 | -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1451 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1452 | } 1453 | .zoom-leave { 1454 | -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1455 | animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1456 | } 1457 | .zoom-big-enter, 1458 | .zoom-big-appear { 1459 | -webkit-animation-duration: 0.2s; 1460 | animation-duration: 0.2s; 1461 | -webkit-animation-fill-mode: both; 1462 | animation-fill-mode: both; 1463 | -webkit-animation-play-state: paused; 1464 | animation-play-state: paused; 1465 | } 1466 | .zoom-big-leave { 1467 | -webkit-animation-duration: 0.2s; 1468 | animation-duration: 0.2s; 1469 | -webkit-animation-fill-mode: both; 1470 | animation-fill-mode: both; 1471 | -webkit-animation-play-state: paused; 1472 | animation-play-state: paused; 1473 | } 1474 | .zoom-big-enter.zoom-big-enter-active, 1475 | .zoom-big-appear.zoom-big-appear-active { 1476 | -webkit-animation-name: antZoomBigIn; 1477 | animation-name: antZoomBigIn; 1478 | -webkit-animation-play-state: running; 1479 | animation-play-state: running; 1480 | } 1481 | .zoom-big-leave.zoom-big-leave-active { 1482 | -webkit-animation-name: antZoomBigOut; 1483 | animation-name: antZoomBigOut; 1484 | -webkit-animation-play-state: running; 1485 | animation-play-state: running; 1486 | pointer-events: none; 1487 | } 1488 | .zoom-big-enter, 1489 | .zoom-big-appear { 1490 | -webkit-transform: scale(0); 1491 | -ms-transform: scale(0); 1492 | transform: scale(0); 1493 | -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1494 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1495 | } 1496 | .zoom-big-leave { 1497 | -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1498 | animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1499 | } 1500 | .zoom-big-fast-enter, 1501 | .zoom-big-fast-appear { 1502 | -webkit-animation-duration: 0.1s; 1503 | animation-duration: 0.1s; 1504 | -webkit-animation-fill-mode: both; 1505 | animation-fill-mode: both; 1506 | -webkit-animation-play-state: paused; 1507 | animation-play-state: paused; 1508 | } 1509 | .zoom-big-fast-leave { 1510 | -webkit-animation-duration: 0.1s; 1511 | animation-duration: 0.1s; 1512 | -webkit-animation-fill-mode: both; 1513 | animation-fill-mode: both; 1514 | -webkit-animation-play-state: paused; 1515 | animation-play-state: paused; 1516 | } 1517 | .zoom-big-fast-enter.zoom-big-fast-enter-active, 1518 | .zoom-big-fast-appear.zoom-big-fast-appear-active { 1519 | -webkit-animation-name: antZoomBigIn; 1520 | animation-name: antZoomBigIn; 1521 | -webkit-animation-play-state: running; 1522 | animation-play-state: running; 1523 | } 1524 | .zoom-big-fast-leave.zoom-big-fast-leave-active { 1525 | -webkit-animation-name: antZoomBigOut; 1526 | animation-name: antZoomBigOut; 1527 | -webkit-animation-play-state: running; 1528 | animation-play-state: running; 1529 | pointer-events: none; 1530 | } 1531 | .zoom-big-fast-enter, 1532 | .zoom-big-fast-appear { 1533 | -webkit-transform: scale(0); 1534 | -ms-transform: scale(0); 1535 | transform: scale(0); 1536 | -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1537 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1538 | } 1539 | .zoom-big-fast-leave { 1540 | -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1541 | animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1542 | } 1543 | .zoom-up-enter, 1544 | .zoom-up-appear { 1545 | -webkit-animation-duration: 0.2s; 1546 | animation-duration: 0.2s; 1547 | -webkit-animation-fill-mode: both; 1548 | animation-fill-mode: both; 1549 | -webkit-animation-play-state: paused; 1550 | animation-play-state: paused; 1551 | } 1552 | .zoom-up-leave { 1553 | -webkit-animation-duration: 0.2s; 1554 | animation-duration: 0.2s; 1555 | -webkit-animation-fill-mode: both; 1556 | animation-fill-mode: both; 1557 | -webkit-animation-play-state: paused; 1558 | animation-play-state: paused; 1559 | } 1560 | .zoom-up-enter.zoom-up-enter-active, 1561 | .zoom-up-appear.zoom-up-appear-active { 1562 | -webkit-animation-name: antZoomUpIn; 1563 | animation-name: antZoomUpIn; 1564 | -webkit-animation-play-state: running; 1565 | animation-play-state: running; 1566 | } 1567 | .zoom-up-leave.zoom-up-leave-active { 1568 | -webkit-animation-name: antZoomUpOut; 1569 | animation-name: antZoomUpOut; 1570 | -webkit-animation-play-state: running; 1571 | animation-play-state: running; 1572 | pointer-events: none; 1573 | } 1574 | .zoom-up-enter, 1575 | .zoom-up-appear { 1576 | -webkit-transform: scale(0); 1577 | -ms-transform: scale(0); 1578 | transform: scale(0); 1579 | -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1580 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1581 | } 1582 | .zoom-up-leave { 1583 | -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1584 | animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1585 | } 1586 | .zoom-down-enter, 1587 | .zoom-down-appear { 1588 | -webkit-animation-duration: 0.2s; 1589 | animation-duration: 0.2s; 1590 | -webkit-animation-fill-mode: both; 1591 | animation-fill-mode: both; 1592 | -webkit-animation-play-state: paused; 1593 | animation-play-state: paused; 1594 | } 1595 | .zoom-down-leave { 1596 | -webkit-animation-duration: 0.2s; 1597 | animation-duration: 0.2s; 1598 | -webkit-animation-fill-mode: both; 1599 | animation-fill-mode: both; 1600 | -webkit-animation-play-state: paused; 1601 | animation-play-state: paused; 1602 | } 1603 | .zoom-down-enter.zoom-down-enter-active, 1604 | .zoom-down-appear.zoom-down-appear-active { 1605 | -webkit-animation-name: antZoomDownIn; 1606 | animation-name: antZoomDownIn; 1607 | -webkit-animation-play-state: running; 1608 | animation-play-state: running; 1609 | } 1610 | .zoom-down-leave.zoom-down-leave-active { 1611 | -webkit-animation-name: antZoomDownOut; 1612 | animation-name: antZoomDownOut; 1613 | -webkit-animation-play-state: running; 1614 | animation-play-state: running; 1615 | pointer-events: none; 1616 | } 1617 | .zoom-down-enter, 1618 | .zoom-down-appear { 1619 | -webkit-transform: scale(0); 1620 | -ms-transform: scale(0); 1621 | transform: scale(0); 1622 | -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1623 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1624 | } 1625 | .zoom-down-leave { 1626 | -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1627 | animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1628 | } 1629 | .zoom-left-enter, 1630 | .zoom-left-appear { 1631 | -webkit-animation-duration: 0.2s; 1632 | animation-duration: 0.2s; 1633 | -webkit-animation-fill-mode: both; 1634 | animation-fill-mode: both; 1635 | -webkit-animation-play-state: paused; 1636 | animation-play-state: paused; 1637 | } 1638 | .zoom-left-leave { 1639 | -webkit-animation-duration: 0.2s; 1640 | animation-duration: 0.2s; 1641 | -webkit-animation-fill-mode: both; 1642 | animation-fill-mode: both; 1643 | -webkit-animation-play-state: paused; 1644 | animation-play-state: paused; 1645 | } 1646 | .zoom-left-enter.zoom-left-enter-active, 1647 | .zoom-left-appear.zoom-left-appear-active { 1648 | -webkit-animation-name: antZoomLeftIn; 1649 | animation-name: antZoomLeftIn; 1650 | -webkit-animation-play-state: running; 1651 | animation-play-state: running; 1652 | } 1653 | .zoom-left-leave.zoom-left-leave-active { 1654 | -webkit-animation-name: antZoomLeftOut; 1655 | animation-name: antZoomLeftOut; 1656 | -webkit-animation-play-state: running; 1657 | animation-play-state: running; 1658 | pointer-events: none; 1659 | } 1660 | .zoom-left-enter, 1661 | .zoom-left-appear { 1662 | -webkit-transform: scale(0); 1663 | -ms-transform: scale(0); 1664 | transform: scale(0); 1665 | -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1666 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1667 | } 1668 | .zoom-left-leave { 1669 | -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1670 | animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1671 | } 1672 | .zoom-right-enter, 1673 | .zoom-right-appear { 1674 | -webkit-animation-duration: 0.2s; 1675 | animation-duration: 0.2s; 1676 | -webkit-animation-fill-mode: both; 1677 | animation-fill-mode: both; 1678 | -webkit-animation-play-state: paused; 1679 | animation-play-state: paused; 1680 | } 1681 | .zoom-right-leave { 1682 | -webkit-animation-duration: 0.2s; 1683 | animation-duration: 0.2s; 1684 | -webkit-animation-fill-mode: both; 1685 | animation-fill-mode: both; 1686 | -webkit-animation-play-state: paused; 1687 | animation-play-state: paused; 1688 | } 1689 | .zoom-right-enter.zoom-right-enter-active, 1690 | .zoom-right-appear.zoom-right-appear-active { 1691 | -webkit-animation-name: antZoomRightIn; 1692 | animation-name: antZoomRightIn; 1693 | -webkit-animation-play-state: running; 1694 | animation-play-state: running; 1695 | } 1696 | .zoom-right-leave.zoom-right-leave-active { 1697 | -webkit-animation-name: antZoomRightOut; 1698 | animation-name: antZoomRightOut; 1699 | -webkit-animation-play-state: running; 1700 | animation-play-state: running; 1701 | pointer-events: none; 1702 | } 1703 | .zoom-right-enter, 1704 | .zoom-right-appear { 1705 | -webkit-transform: scale(0); 1706 | -ms-transform: scale(0); 1707 | transform: scale(0); 1708 | -webkit-animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1709 | animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1); 1710 | } 1711 | .zoom-right-leave { 1712 | -webkit-animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1713 | animation-timing-function: cubic-bezier(0.78, 0.14, 0.15, 0.86); 1714 | } 1715 | @-webkit-keyframes antZoomIn { 1716 | 0% { 1717 | opacity: 0; 1718 | -webkit-transform: scale(0.2); 1719 | transform: scale(0.2); 1720 | } 1721 | 100% { 1722 | opacity: 1; 1723 | -webkit-transform: scale(1); 1724 | transform: scale(1); 1725 | } 1726 | } 1727 | @keyframes antZoomIn { 1728 | 0% { 1729 | opacity: 0; 1730 | -webkit-transform: scale(0.2); 1731 | transform: scale(0.2); 1732 | } 1733 | 100% { 1734 | opacity: 1; 1735 | -webkit-transform: scale(1); 1736 | transform: scale(1); 1737 | } 1738 | } 1739 | @-webkit-keyframes antZoomOut { 1740 | 0% { 1741 | -webkit-transform: scale(1); 1742 | transform: scale(1); 1743 | } 1744 | 100% { 1745 | opacity: 0; 1746 | -webkit-transform: scale(0.2); 1747 | transform: scale(0.2); 1748 | } 1749 | } 1750 | @keyframes antZoomOut { 1751 | 0% { 1752 | -webkit-transform: scale(1); 1753 | transform: scale(1); 1754 | } 1755 | 100% { 1756 | opacity: 0; 1757 | -webkit-transform: scale(0.2); 1758 | transform: scale(0.2); 1759 | } 1760 | } 1761 | @-webkit-keyframes antZoomBigIn { 1762 | 0% { 1763 | opacity: 0; 1764 | -webkit-transform: scale(0.8); 1765 | transform: scale(0.8); 1766 | } 1767 | 100% { 1768 | -webkit-transform: scale(1); 1769 | transform: scale(1); 1770 | } 1771 | } 1772 | @keyframes antZoomBigIn { 1773 | 0% { 1774 | opacity: 0; 1775 | -webkit-transform: scale(0.8); 1776 | transform: scale(0.8); 1777 | } 1778 | 100% { 1779 | -webkit-transform: scale(1); 1780 | transform: scale(1); 1781 | } 1782 | } 1783 | @-webkit-keyframes antZoomBigOut { 1784 | 0% { 1785 | -webkit-transform: scale(1); 1786 | transform: scale(1); 1787 | } 1788 | 100% { 1789 | opacity: 0; 1790 | -webkit-transform: scale(0.8); 1791 | transform: scale(0.8); 1792 | } 1793 | } 1794 | @keyframes antZoomBigOut { 1795 | 0% { 1796 | -webkit-transform: scale(1); 1797 | transform: scale(1); 1798 | } 1799 | 100% { 1800 | opacity: 0; 1801 | -webkit-transform: scale(0.8); 1802 | transform: scale(0.8); 1803 | } 1804 | } 1805 | @-webkit-keyframes antZoomUpIn { 1806 | 0% { 1807 | opacity: 0; 1808 | -webkit-transform-origin: 50% 0%; 1809 | transform-origin: 50% 0%; 1810 | -webkit-transform: scale(0.8); 1811 | transform: scale(0.8); 1812 | } 1813 | 100% { 1814 | -webkit-transform-origin: 50% 0%; 1815 | transform-origin: 50% 0%; 1816 | -webkit-transform: scale(1); 1817 | transform: scale(1); 1818 | } 1819 | } 1820 | @keyframes antZoomUpIn { 1821 | 0% { 1822 | opacity: 0; 1823 | -webkit-transform-origin: 50% 0%; 1824 | transform-origin: 50% 0%; 1825 | -webkit-transform: scale(0.8); 1826 | transform: scale(0.8); 1827 | } 1828 | 100% { 1829 | -webkit-transform-origin: 50% 0%; 1830 | transform-origin: 50% 0%; 1831 | -webkit-transform: scale(1); 1832 | transform: scale(1); 1833 | } 1834 | } 1835 | @-webkit-keyframes antZoomUpOut { 1836 | 0% { 1837 | -webkit-transform-origin: 50% 0%; 1838 | transform-origin: 50% 0%; 1839 | -webkit-transform: scale(1); 1840 | transform: scale(1); 1841 | } 1842 | 100% { 1843 | opacity: 0; 1844 | -webkit-transform-origin: 50% 0%; 1845 | transform-origin: 50% 0%; 1846 | -webkit-transform: scale(0.8); 1847 | transform: scale(0.8); 1848 | } 1849 | } 1850 | @keyframes antZoomUpOut { 1851 | 0% { 1852 | -webkit-transform-origin: 50% 0%; 1853 | transform-origin: 50% 0%; 1854 | -webkit-transform: scale(1); 1855 | transform: scale(1); 1856 | } 1857 | 100% { 1858 | opacity: 0; 1859 | -webkit-transform-origin: 50% 0%; 1860 | transform-origin: 50% 0%; 1861 | -webkit-transform: scale(0.8); 1862 | transform: scale(0.8); 1863 | } 1864 | } 1865 | @-webkit-keyframes antZoomLeftIn { 1866 | 0% { 1867 | opacity: 0; 1868 | -webkit-transform-origin: 0% 50%; 1869 | transform-origin: 0% 50%; 1870 | -webkit-transform: scale(0.8); 1871 | transform: scale(0.8); 1872 | } 1873 | 100% { 1874 | -webkit-transform-origin: 0% 50%; 1875 | transform-origin: 0% 50%; 1876 | -webkit-transform: scale(1); 1877 | transform: scale(1); 1878 | } 1879 | } 1880 | @keyframes antZoomLeftIn { 1881 | 0% { 1882 | opacity: 0; 1883 | -webkit-transform-origin: 0% 50%; 1884 | transform-origin: 0% 50%; 1885 | -webkit-transform: scale(0.8); 1886 | transform: scale(0.8); 1887 | } 1888 | 100% { 1889 | -webkit-transform-origin: 0% 50%; 1890 | transform-origin: 0% 50%; 1891 | -webkit-transform: scale(1); 1892 | transform: scale(1); 1893 | } 1894 | } 1895 | @-webkit-keyframes antZoomLeftOut { 1896 | 0% { 1897 | -webkit-transform-origin: 0% 50%; 1898 | transform-origin: 0% 50%; 1899 | -webkit-transform: scale(1); 1900 | transform: scale(1); 1901 | } 1902 | 100% { 1903 | opacity: 0; 1904 | -webkit-transform-origin: 0% 50%; 1905 | transform-origin: 0% 50%; 1906 | -webkit-transform: scale(0.8); 1907 | transform: scale(0.8); 1908 | } 1909 | } 1910 | @keyframes antZoomLeftOut { 1911 | 0% { 1912 | -webkit-transform-origin: 0% 50%; 1913 | transform-origin: 0% 50%; 1914 | -webkit-transform: scale(1); 1915 | transform: scale(1); 1916 | } 1917 | 100% { 1918 | opacity: 0; 1919 | -webkit-transform-origin: 0% 50%; 1920 | transform-origin: 0% 50%; 1921 | -webkit-transform: scale(0.8); 1922 | transform: scale(0.8); 1923 | } 1924 | } 1925 | @-webkit-keyframes antZoomRightIn { 1926 | 0% { 1927 | opacity: 0; 1928 | -webkit-transform-origin: 100% 50%; 1929 | transform-origin: 100% 50%; 1930 | -webkit-transform: scale(0.8); 1931 | transform: scale(0.8); 1932 | } 1933 | 100% { 1934 | -webkit-transform-origin: 100% 50%; 1935 | transform-origin: 100% 50%; 1936 | -webkit-transform: scale(1); 1937 | transform: scale(1); 1938 | } 1939 | } 1940 | @keyframes antZoomRightIn { 1941 | 0% { 1942 | opacity: 0; 1943 | -webkit-transform-origin: 100% 50%; 1944 | transform-origin: 100% 50%; 1945 | -webkit-transform: scale(0.8); 1946 | transform: scale(0.8); 1947 | } 1948 | 100% { 1949 | -webkit-transform-origin: 100% 50%; 1950 | transform-origin: 100% 50%; 1951 | -webkit-transform: scale(1); 1952 | transform: scale(1); 1953 | } 1954 | } 1955 | @-webkit-keyframes antZoomRightOut { 1956 | 0% { 1957 | -webkit-transform-origin: 100% 50%; 1958 | transform-origin: 100% 50%; 1959 | -webkit-transform: scale(1); 1960 | transform: scale(1); 1961 | } 1962 | 100% { 1963 | opacity: 0; 1964 | -webkit-transform-origin: 100% 50%; 1965 | transform-origin: 100% 50%; 1966 | -webkit-transform: scale(0.8); 1967 | transform: scale(0.8); 1968 | } 1969 | } 1970 | @keyframes antZoomRightOut { 1971 | 0% { 1972 | -webkit-transform-origin: 100% 50%; 1973 | transform-origin: 100% 50%; 1974 | -webkit-transform: scale(1); 1975 | transform: scale(1); 1976 | } 1977 | 100% { 1978 | opacity: 0; 1979 | -webkit-transform-origin: 100% 50%; 1980 | transform-origin: 100% 50%; 1981 | -webkit-transform: scale(0.8); 1982 | transform: scale(0.8); 1983 | } 1984 | } 1985 | @-webkit-keyframes antZoomDownIn { 1986 | 0% { 1987 | opacity: 0; 1988 | -webkit-transform-origin: 50% 100%; 1989 | transform-origin: 50% 100%; 1990 | -webkit-transform: scale(0.8); 1991 | transform: scale(0.8); 1992 | } 1993 | 100% { 1994 | -webkit-transform-origin: 50% 100%; 1995 | transform-origin: 50% 100%; 1996 | -webkit-transform: scale(1); 1997 | transform: scale(1); 1998 | } 1999 | } 2000 | @keyframes antZoomDownIn { 2001 | 0% { 2002 | opacity: 0; 2003 | -webkit-transform-origin: 50% 100%; 2004 | transform-origin: 50% 100%; 2005 | -webkit-transform: scale(0.8); 2006 | transform: scale(0.8); 2007 | } 2008 | 100% { 2009 | -webkit-transform-origin: 50% 100%; 2010 | transform-origin: 50% 100%; 2011 | -webkit-transform: scale(1); 2012 | transform: scale(1); 2013 | } 2014 | } 2015 | @-webkit-keyframes antZoomDownOut { 2016 | 0% { 2017 | -webkit-transform-origin: 50% 100%; 2018 | transform-origin: 50% 100%; 2019 | -webkit-transform: scale(1); 2020 | transform: scale(1); 2021 | } 2022 | 100% { 2023 | opacity: 0; 2024 | -webkit-transform-origin: 50% 100%; 2025 | transform-origin: 50% 100%; 2026 | -webkit-transform: scale(0.8); 2027 | transform: scale(0.8); 2028 | } 2029 | } 2030 | @keyframes antZoomDownOut { 2031 | 0% { 2032 | -webkit-transform-origin: 50% 100%; 2033 | transform-origin: 50% 100%; 2034 | -webkit-transform: scale(1); 2035 | transform: scale(1); 2036 | } 2037 | 100% { 2038 | opacity: 0; 2039 | -webkit-transform-origin: 50% 100%; 2040 | transform-origin: 50% 100%; 2041 | -webkit-transform: scale(0.8); 2042 | transform: scale(0.8); 2043 | } 2044 | } 2045 | .ant-motion-collapse { 2046 | overflow: hidden; 2047 | } 2048 | .ant-motion-collapse-active { 2049 | -webkit-transition: height 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) !important; 2050 | transition: height 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1) !important; 2051 | } 2052 | 2053 | /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ 2054 | /* stylelint-disable no-duplicate-selectors */ 2055 | /* stylelint-disable */ 2056 | /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ 2057 | .ant-menu { 2058 | font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 2059 | font-size: 14px; 2060 | font-variant: tabular-nums; 2061 | line-height: 1.5; 2062 | -webkit-box-sizing: border-box; 2063 | box-sizing: border-box; 2064 | margin: 0; 2065 | padding: 0; 2066 | outline: none; 2067 | margin-bottom: 0; 2068 | padding-left: 0; 2069 | list-style: none; 2070 | -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 2071 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 2072 | color: rgba(0, 0, 0, 0.65); 2073 | background: #fff; 2074 | line-height: 0; 2075 | -webkit-transition: background .3s, width .2s; 2076 | transition: background .3s, width .2s; 2077 | zoom: 1; 2078 | } 2079 | .ant-menu:before, 2080 | .ant-menu:after { 2081 | content: ""; 2082 | display: table; 2083 | } 2084 | .ant-menu:after { 2085 | clear: both; 2086 | } 2087 | .ant-menu ul, 2088 | .ant-menu ol { 2089 | list-style: none; 2090 | margin: 0; 2091 | padding: 0; 2092 | } 2093 | .ant-menu-hidden { 2094 | display: none; 2095 | } 2096 | .ant-menu-item-group-title { 2097 | color: rgba(0, 0, 0, 0.45); 2098 | font-size: 14px; 2099 | line-height: 1.5; 2100 | padding: 8px 16px; 2101 | -webkit-transition: all .3s; 2102 | transition: all .3s; 2103 | } 2104 | .ant-menu-submenu, 2105 | .ant-menu-submenu-inline { 2106 | -webkit-transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); 2107 | transition: border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); 2108 | } 2109 | .ant-menu-item:active, 2110 | .ant-menu-submenu-title:active { 2111 | background: #e6f7ff; 2112 | } 2113 | .ant-menu-submenu .ant-menu-sub { 2114 | cursor: initial; 2115 | -webkit-transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2116 | transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2117 | } 2118 | .ant-menu-item > a { 2119 | display: block; 2120 | color: rgba(0, 0, 0, 0.65); 2121 | } 2122 | .ant-menu-item > a:hover { 2123 | color: #1890ff; 2124 | } 2125 | .ant-menu-item > a:focus { 2126 | text-decoration: none; 2127 | } 2128 | .ant-menu-item > a:before { 2129 | position: absolute; 2130 | background-color: transparent; 2131 | top: 0; 2132 | left: 0; 2133 | bottom: 0; 2134 | right: 0; 2135 | content: ''; 2136 | } 2137 | .ant-menu-item-divider { 2138 | height: 1px; 2139 | overflow: hidden; 2140 | background-color: #e8e8e8; 2141 | line-height: 0; 2142 | } 2143 | .ant-menu-item:hover, 2144 | .ant-menu-item-active, 2145 | .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, 2146 | .ant-menu-submenu-active, 2147 | .ant-menu-submenu-title:hover { 2148 | color: #1890ff; 2149 | } 2150 | .ant-menu-horizontal .ant-menu-item, 2151 | .ant-menu-horizontal .ant-menu-submenu { 2152 | margin-top: -1px; 2153 | } 2154 | .ant-menu-horizontal > .ant-menu-item:hover, 2155 | .ant-menu-horizontal > .ant-menu-item-active, 2156 | .ant-menu-horizontal > .ant-menu-submenu .ant-menu-submenu-title:hover { 2157 | background-color: transparent; 2158 | } 2159 | .ant-menu-item-selected { 2160 | color: #1890ff; 2161 | } 2162 | .ant-menu-item-selected > a, 2163 | .ant-menu-item-selected > a:hover { 2164 | color: #1890ff; 2165 | } 2166 | .ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected { 2167 | background-color: #e6f7ff; 2168 | } 2169 | .ant-menu-inline, 2170 | .ant-menu-vertical, 2171 | .ant-menu-vertical-left { 2172 | border-right: 1px solid #e8e8e8; 2173 | } 2174 | .ant-menu-vertical-right { 2175 | border-left: 1px solid #e8e8e8; 2176 | } 2177 | .ant-menu-vertical.ant-menu-sub, 2178 | .ant-menu-vertical-left.ant-menu-sub, 2179 | .ant-menu-vertical-right.ant-menu-sub { 2180 | border-right: 0; 2181 | padding: 0; 2182 | -webkit-transform-origin: 0 0; 2183 | -ms-transform-origin: 0 0; 2184 | transform-origin: 0 0; 2185 | } 2186 | .ant-menu-vertical.ant-menu-sub .ant-menu-item, 2187 | .ant-menu-vertical-left.ant-menu-sub .ant-menu-item, 2188 | .ant-menu-vertical-right.ant-menu-sub .ant-menu-item { 2189 | border-right: 0; 2190 | margin-left: 0; 2191 | left: 0; 2192 | } 2193 | .ant-menu-vertical.ant-menu-sub .ant-menu-item:after, 2194 | .ant-menu-vertical-left.ant-menu-sub .ant-menu-item:after, 2195 | .ant-menu-vertical-right.ant-menu-sub .ant-menu-item:after { 2196 | border-right: 0; 2197 | } 2198 | .ant-menu-vertical.ant-menu-sub > .ant-menu-item, 2199 | .ant-menu-vertical-left.ant-menu-sub > .ant-menu-item, 2200 | .ant-menu-vertical-right.ant-menu-sub > .ant-menu-item, 2201 | .ant-menu-vertical.ant-menu-sub > .ant-menu-submenu, 2202 | .ant-menu-vertical-left.ant-menu-sub > .ant-menu-submenu, 2203 | .ant-menu-vertical-right.ant-menu-sub > .ant-menu-submenu { 2204 | -webkit-transform-origin: 0 0; 2205 | -ms-transform-origin: 0 0; 2206 | transform-origin: 0 0; 2207 | } 2208 | .ant-menu-horizontal.ant-menu-sub, 2209 | .ant-menu-vertical.ant-menu-sub, 2210 | .ant-menu-vertical-left.ant-menu-sub, 2211 | .ant-menu-vertical-right.ant-menu-sub { 2212 | min-width: 160px; 2213 | } 2214 | .ant-menu-item, 2215 | .ant-menu-submenu-title { 2216 | cursor: pointer; 2217 | margin: 0; 2218 | padding: 0 20px; 2219 | position: relative; 2220 | display: block; 2221 | white-space: nowrap; 2222 | -webkit-transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); 2223 | transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); 2224 | } 2225 | .ant-menu-item .anticon, 2226 | .ant-menu-submenu-title .anticon { 2227 | min-width: 14px; 2228 | margin-right: 10px; 2229 | font-size: 14px; 2230 | -webkit-transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2231 | transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2232 | } 2233 | .ant-menu-item .anticon + span, 2234 | .ant-menu-submenu-title .anticon + span { 2235 | -webkit-transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2236 | transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2237 | opacity: 1; 2238 | } 2239 | .ant-menu > .ant-menu-item-divider { 2240 | height: 1px; 2241 | margin: 1px 0; 2242 | overflow: hidden; 2243 | padding: 0; 2244 | line-height: 0; 2245 | background-color: #e8e8e8; 2246 | } 2247 | .ant-menu-submenu-popup { 2248 | position: absolute; 2249 | border-radius: 4px; 2250 | z-index: 1050; 2251 | } 2252 | .ant-menu-submenu-popup .submenu-title-wrapper { 2253 | padding-right: 20px; 2254 | } 2255 | .ant-menu-submenu-popup:before { 2256 | position: absolute; 2257 | top: -7px; 2258 | left: 0; 2259 | right: 0; 2260 | bottom: 0; 2261 | content: ' '; 2262 | opacity: .0001; 2263 | } 2264 | .ant-menu-submenu > .ant-menu { 2265 | background-color: #fff; 2266 | border-radius: 4px; 2267 | } 2268 | .ant-menu-submenu > .ant-menu-submenu-title:after { 2269 | -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2270 | transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2271 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2272 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2273 | } 2274 | .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow, 2275 | .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow, 2276 | .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow, 2277 | .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow { 2278 | -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2279 | transition: -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2280 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2281 | transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2282 | position: absolute; 2283 | top: 50%; 2284 | right: 16px; 2285 | width: 10px; 2286 | } 2287 | .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, 2288 | .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, 2289 | .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, 2290 | .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, 2291 | .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, 2292 | .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, 2293 | .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, 2294 | .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after { 2295 | content: ''; 2296 | position: absolute; 2297 | vertical-align: baseline; 2298 | background: #fff; 2299 | background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.65)), to(rgba(0, 0, 0, 0.65))); 2300 | background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)); 2301 | background-image: linear-gradient(to right, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)); 2302 | width: 6px; 2303 | height: 1.5px; 2304 | border-radius: 2px; 2305 | -webkit-transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2306 | transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2307 | transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2308 | transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 2309 | } 2310 | .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, 2311 | .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, 2312 | .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:before, 2313 | .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before { 2314 | -webkit-transform: rotate(45deg) translateY(-2px); 2315 | -ms-transform: rotate(45deg) translateY(-2px); 2316 | transform: rotate(45deg) translateY(-2px); 2317 | } 2318 | .ant-menu-submenu-vertical > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, 2319 | .ant-menu-submenu-vertical-left > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, 2320 | .ant-menu-submenu-vertical-right > .ant-menu-submenu-title .ant-menu-submenu-arrow:after, 2321 | .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after { 2322 | -webkit-transform: rotate(-45deg) translateY(2px); 2323 | -ms-transform: rotate(-45deg) translateY(2px); 2324 | transform: rotate(-45deg) translateY(2px); 2325 | } 2326 | .ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after, 2327 | .ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after, 2328 | .ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after, 2329 | .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:after, 2330 | .ant-menu-submenu-vertical > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before, 2331 | .ant-menu-submenu-vertical-left > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before, 2332 | .ant-menu-submenu-vertical-right > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before, 2333 | .ant-menu-submenu-inline > .ant-menu-submenu-title:hover .ant-menu-submenu-arrow:before { 2334 | background: -webkit-gradient(linear, left top, right top, from(#1890ff), to(#1890ff)); 2335 | background: -webkit-linear-gradient(left, #1890ff, #1890ff); 2336 | background: linear-gradient(to right, #1890ff, #1890ff); 2337 | } 2338 | .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before { 2339 | -webkit-transform: rotate(-45deg) translateX(2px); 2340 | -ms-transform: rotate(-45deg) translateX(2px); 2341 | transform: rotate(-45deg) translateX(2px); 2342 | } 2343 | .ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after { 2344 | -webkit-transform: rotate(45deg) translateX(-2px); 2345 | -ms-transform: rotate(45deg) translateX(-2px); 2346 | transform: rotate(45deg) translateX(-2px); 2347 | } 2348 | .ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow { 2349 | -webkit-transform: translateY(-2px); 2350 | -ms-transform: translateY(-2px); 2351 | transform: translateY(-2px); 2352 | } 2353 | .ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:after { 2354 | -webkit-transform: rotate(-45deg) translateX(-2px); 2355 | -ms-transform: rotate(-45deg) translateX(-2px); 2356 | transform: rotate(-45deg) translateX(-2px); 2357 | } 2358 | .ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title .ant-menu-submenu-arrow:before { 2359 | -webkit-transform: rotate(45deg) translateX(2px); 2360 | -ms-transform: rotate(45deg) translateX(2px); 2361 | transform: rotate(45deg) translateX(2px); 2362 | } 2363 | .ant-menu-vertical .ant-menu-submenu-selected, 2364 | .ant-menu-vertical-left .ant-menu-submenu-selected, 2365 | .ant-menu-vertical-right .ant-menu-submenu-selected { 2366 | color: #1890ff; 2367 | } 2368 | .ant-menu-vertical .ant-menu-submenu-selected > a, 2369 | .ant-menu-vertical-left .ant-menu-submenu-selected > a, 2370 | .ant-menu-vertical-right .ant-menu-submenu-selected > a { 2371 | color: #1890ff; 2372 | } 2373 | .ant-menu-horizontal { 2374 | border: 0; 2375 | border-bottom: 1px solid #e8e8e8; 2376 | -webkit-box-shadow: none; 2377 | box-shadow: none; 2378 | line-height: 46px; 2379 | white-space: nowrap; 2380 | } 2381 | .ant-menu-horizontal > .ant-menu-item, 2382 | .ant-menu-horizontal > .ant-menu-submenu { 2383 | position: relative; 2384 | top: 1px; 2385 | display: inline-block; 2386 | vertical-align: bottom; 2387 | border-bottom: 2px solid transparent; 2388 | } 2389 | .ant-menu-horizontal > .ant-menu-item:hover, 2390 | .ant-menu-horizontal > .ant-menu-submenu:hover, 2391 | .ant-menu-horizontal > .ant-menu-item-active, 2392 | .ant-menu-horizontal > .ant-menu-submenu-active, 2393 | .ant-menu-horizontal > .ant-menu-item-open, 2394 | .ant-menu-horizontal > .ant-menu-submenu-open, 2395 | .ant-menu-horizontal > .ant-menu-item-selected, 2396 | .ant-menu-horizontal > .ant-menu-submenu-selected { 2397 | border-bottom: 2px solid #1890ff; 2398 | color: #1890ff; 2399 | } 2400 | .ant-menu-horizontal > .ant-menu-item > a { 2401 | display: block; 2402 | color: rgba(0, 0, 0, 0.65); 2403 | } 2404 | .ant-menu-horizontal > .ant-menu-item > a:hover { 2405 | color: #1890ff; 2406 | } 2407 | .ant-menu-horizontal > .ant-menu-item > a:before { 2408 | bottom: -2px; 2409 | } 2410 | .ant-menu-horizontal > .ant-menu-item-selected > a { 2411 | color: #1890ff; 2412 | } 2413 | .ant-menu-horizontal:after { 2414 | content: " "; 2415 | display: block; 2416 | height: 0; 2417 | clear: both; 2418 | } 2419 | .ant-menu-vertical .ant-menu-item, 2420 | .ant-menu-vertical-left .ant-menu-item, 2421 | .ant-menu-vertical-right .ant-menu-item, 2422 | .ant-menu-inline .ant-menu-item { 2423 | position: relative; 2424 | } 2425 | .ant-menu-vertical .ant-menu-item:after, 2426 | .ant-menu-vertical-left .ant-menu-item:after, 2427 | .ant-menu-vertical-right .ant-menu-item:after, 2428 | .ant-menu-inline .ant-menu-item:after { 2429 | content: ""; 2430 | position: absolute; 2431 | right: 0; 2432 | top: 0; 2433 | bottom: 0; 2434 | border-right: 3px solid #1890ff; 2435 | -webkit-transform: scaleY(0.0001); 2436 | -ms-transform: scaleY(0.0001); 2437 | transform: scaleY(0.0001); 2438 | opacity: 0; 2439 | -webkit-transition: opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); 2440 | transition: opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); 2441 | transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); 2442 | transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); 2443 | } 2444 | .ant-menu-vertical .ant-menu-item, 2445 | .ant-menu-vertical-left .ant-menu-item, 2446 | .ant-menu-vertical-right .ant-menu-item, 2447 | .ant-menu-inline .ant-menu-item, 2448 | .ant-menu-vertical .ant-menu-submenu-title, 2449 | .ant-menu-vertical-left .ant-menu-submenu-title, 2450 | .ant-menu-vertical-right .ant-menu-submenu-title, 2451 | .ant-menu-inline .ant-menu-submenu-title { 2452 | padding: 0 16px; 2453 | font-size: 14px; 2454 | line-height: 40px; 2455 | height: 40px; 2456 | margin-top: 4px; 2457 | margin-bottom: 4px; 2458 | overflow: hidden; 2459 | text-overflow: ellipsis; 2460 | } 2461 | .ant-menu-vertical .ant-menu-submenu, 2462 | .ant-menu-vertical-left .ant-menu-submenu, 2463 | .ant-menu-vertical-right .ant-menu-submenu, 2464 | .ant-menu-inline .ant-menu-submenu { 2465 | padding-bottom: 0.01px; 2466 | } 2467 | .ant-menu-vertical .ant-menu-item:not(:last-child), 2468 | .ant-menu-vertical-left .ant-menu-item:not(:last-child), 2469 | .ant-menu-vertical-right .ant-menu-item:not(:last-child), 2470 | .ant-menu-inline .ant-menu-item:not(:last-child) { 2471 | margin-bottom: 8px; 2472 | } 2473 | .ant-menu-vertical > .ant-menu-item, 2474 | .ant-menu-vertical-left > .ant-menu-item, 2475 | .ant-menu-vertical-right > .ant-menu-item, 2476 | .ant-menu-inline > .ant-menu-item, 2477 | .ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title, 2478 | .ant-menu-vertical-left > .ant-menu-submenu > .ant-menu-submenu-title, 2479 | .ant-menu-vertical-right > .ant-menu-submenu > .ant-menu-submenu-title, 2480 | .ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title { 2481 | line-height: 40px; 2482 | height: 40px; 2483 | } 2484 | .ant-menu-inline { 2485 | width: 100%; 2486 | } 2487 | .ant-menu-inline .ant-menu-selected:after, 2488 | .ant-menu-inline .ant-menu-item-selected:after { 2489 | -webkit-transition: opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); 2490 | transition: opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); 2491 | transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); 2492 | transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1); 2493 | opacity: 1; 2494 | -webkit-transform: scaleY(1); 2495 | -ms-transform: scaleY(1); 2496 | transform: scaleY(1); 2497 | } 2498 | .ant-menu-inline .ant-menu-item, 2499 | .ant-menu-inline .ant-menu-submenu-title { 2500 | width: calc(100% + 1px); 2501 | } 2502 | .ant-menu-inline .ant-menu-submenu-title { 2503 | padding-right: 34px; 2504 | } 2505 | .ant-menu-inline-collapsed { 2506 | width: 80px; 2507 | } 2508 | .ant-menu-inline-collapsed > .ant-menu-item, 2509 | .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item, 2510 | .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-submenu > .ant-menu-submenu-title, 2511 | .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title { 2512 | left: 0; 2513 | text-overflow: clip; 2514 | padding: 0 32px !important; 2515 | } 2516 | .ant-menu-inline-collapsed > .ant-menu-item .ant-menu-submenu-arrow, 2517 | .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .ant-menu-submenu-arrow, 2518 | .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-submenu-arrow, 2519 | .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .ant-menu-submenu-arrow { 2520 | display: none; 2521 | } 2522 | .ant-menu-inline-collapsed > .ant-menu-item .anticon, 2523 | .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .anticon, 2524 | .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-submenu > .ant-menu-submenu-title .anticon, 2525 | .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .anticon { 2526 | font-size: 16px; 2527 | line-height: 40px; 2528 | margin: 0; 2529 | } 2530 | .ant-menu-inline-collapsed > .ant-menu-item .anticon + span, 2531 | .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .anticon + span, 2532 | .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-submenu > .ant-menu-submenu-title .anticon + span, 2533 | .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .anticon + span { 2534 | max-width: 0; 2535 | display: inline-block; 2536 | opacity: 0; 2537 | } 2538 | .ant-menu-inline-collapsed-tooltip { 2539 | pointer-events: none; 2540 | } 2541 | .ant-menu-inline-collapsed-tooltip .anticon { 2542 | display: none; 2543 | } 2544 | .ant-menu-inline-collapsed-tooltip a { 2545 | color: rgba(255, 255, 255, 0.85); 2546 | } 2547 | .ant-menu-inline-collapsed .ant-menu-item-group-title { 2548 | overflow: hidden; 2549 | white-space: nowrap; 2550 | text-overflow: ellipsis; 2551 | padding-left: 4px; 2552 | padding-right: 4px; 2553 | } 2554 | .ant-menu-item-group-list { 2555 | margin: 0; 2556 | padding: 0; 2557 | } 2558 | .ant-menu-item-group-list .ant-menu-item, 2559 | .ant-menu-item-group-list .ant-menu-submenu-title { 2560 | padding: 0 16px 0 28px; 2561 | } 2562 | .ant-menu-root.ant-menu-vertical, 2563 | .ant-menu-root.ant-menu-vertical-left, 2564 | .ant-menu-root.ant-menu-vertical-right, 2565 | .ant-menu-root.ant-menu-inline { 2566 | -webkit-box-shadow: none; 2567 | box-shadow: none; 2568 | } 2569 | .ant-menu-sub.ant-menu-inline { 2570 | padding: 0; 2571 | border: 0; 2572 | -webkit-box-shadow: none; 2573 | box-shadow: none; 2574 | border-radius: 0; 2575 | } 2576 | .ant-menu-sub.ant-menu-inline > .ant-menu-item, 2577 | .ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title { 2578 | line-height: 40px; 2579 | height: 40px; 2580 | list-style-type: disc; 2581 | list-style-position: inside; 2582 | } 2583 | .ant-menu-sub.ant-menu-inline .ant-menu-item-group-title { 2584 | padding-left: 32px; 2585 | } 2586 | .ant-menu-item-disabled, 2587 | .ant-menu-submenu-disabled { 2588 | color: rgba(0, 0, 0, 0.25) !important; 2589 | cursor: not-allowed; 2590 | background: none; 2591 | border-color: transparent !important; 2592 | } 2593 | .ant-menu-item-disabled > a, 2594 | .ant-menu-submenu-disabled > a { 2595 | color: rgba(0, 0, 0, 0.25) !important; 2596 | pointer-events: none; 2597 | } 2598 | .ant-menu-item-disabled > .ant-menu-submenu-title, 2599 | .ant-menu-submenu-disabled > .ant-menu-submenu-title { 2600 | color: rgba(0, 0, 0, 0.25) !important; 2601 | cursor: not-allowed; 2602 | } 2603 | .ant-menu-item-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, 2604 | .ant-menu-submenu-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, 2605 | .ant-menu-item-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after, 2606 | .ant-menu-submenu-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after { 2607 | background: rgba(0, 0, 0, 0.25) !important; 2608 | } 2609 | .ant-menu-dark, 2610 | .ant-menu-dark .ant-menu-sub { 2611 | color: rgba(255, 255, 255, 0.65); 2612 | background: #001529; 2613 | } 2614 | .ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow, 2615 | .ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow { 2616 | opacity: .45; 2617 | -webkit-transition: all .3s; 2618 | transition: all .3s; 2619 | } 2620 | .ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow:after, 2621 | .ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow:after, 2622 | .ant-menu-dark .ant-menu-submenu-title .ant-menu-submenu-arrow:before, 2623 | .ant-menu-dark .ant-menu-sub .ant-menu-submenu-title .ant-menu-submenu-arrow:before { 2624 | background: #fff; 2625 | } 2626 | .ant-menu-dark.ant-menu-submenu-popup { 2627 | background: transparent; 2628 | } 2629 | .ant-menu-dark .ant-menu-inline.ant-menu-sub { 2630 | background: #000c17; 2631 | -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) inset; 2632 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45) inset; 2633 | } 2634 | .ant-menu-dark.ant-menu-horizontal { 2635 | border-bottom: 0; 2636 | } 2637 | .ant-menu-dark.ant-menu-horizontal > .ant-menu-item, 2638 | .ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu { 2639 | border-color: #001529; 2640 | border-bottom: 0; 2641 | top: 0; 2642 | margin-top: 0; 2643 | } 2644 | .ant-menu-dark.ant-menu-horizontal > .ant-menu-item > a:before { 2645 | bottom: 0; 2646 | } 2647 | .ant-menu-dark .ant-menu-item, 2648 | .ant-menu-dark .ant-menu-item-group-title, 2649 | .ant-menu-dark .ant-menu-item > a { 2650 | color: rgba(255, 255, 255, 0.65); 2651 | } 2652 | .ant-menu-dark.ant-menu-inline, 2653 | .ant-menu-dark.ant-menu-vertical, 2654 | .ant-menu-dark.ant-menu-vertical-left, 2655 | .ant-menu-dark.ant-menu-vertical-right { 2656 | border-right: 0; 2657 | } 2658 | .ant-menu-dark.ant-menu-inline .ant-menu-item, 2659 | .ant-menu-dark.ant-menu-vertical .ant-menu-item, 2660 | .ant-menu-dark.ant-menu-vertical-left .ant-menu-item, 2661 | .ant-menu-dark.ant-menu-vertical-right .ant-menu-item { 2662 | border-right: 0; 2663 | margin-left: 0; 2664 | left: 0; 2665 | } 2666 | .ant-menu-dark.ant-menu-inline .ant-menu-item:after, 2667 | .ant-menu-dark.ant-menu-vertical .ant-menu-item:after, 2668 | .ant-menu-dark.ant-menu-vertical-left .ant-menu-item:after, 2669 | .ant-menu-dark.ant-menu-vertical-right .ant-menu-item:after { 2670 | border-right: 0; 2671 | } 2672 | .ant-menu-dark.ant-menu-inline .ant-menu-item, 2673 | .ant-menu-dark.ant-menu-inline .ant-menu-submenu-title { 2674 | width: 100%; 2675 | } 2676 | .ant-menu-dark .ant-menu-item:hover, 2677 | .ant-menu-dark .ant-menu-item-active, 2678 | .ant-menu-dark .ant-menu-submenu-active, 2679 | .ant-menu-dark .ant-menu-submenu-open, 2680 | .ant-menu-dark .ant-menu-submenu-selected, 2681 | .ant-menu-dark .ant-menu-submenu-title:hover { 2682 | background-color: transparent; 2683 | color: #fff; 2684 | } 2685 | .ant-menu-dark .ant-menu-item:hover > a, 2686 | .ant-menu-dark .ant-menu-item-active > a, 2687 | .ant-menu-dark .ant-menu-submenu-active > a, 2688 | .ant-menu-dark .ant-menu-submenu-open > a, 2689 | .ant-menu-dark .ant-menu-submenu-selected > a, 2690 | .ant-menu-dark .ant-menu-submenu-title:hover > a { 2691 | color: #fff; 2692 | } 2693 | .ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow, 2694 | .ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow, 2695 | .ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow, 2696 | .ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow, 2697 | .ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow, 2698 | .ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow, 2699 | .ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow, 2700 | .ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow, 2701 | .ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow, 2702 | .ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow, 2703 | .ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow, 2704 | .ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow { 2705 | opacity: 1; 2706 | } 2707 | .ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after, 2708 | .ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after, 2709 | .ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after, 2710 | .ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after, 2711 | .ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after, 2712 | .ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after, 2713 | .ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after, 2714 | .ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after, 2715 | .ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after, 2716 | .ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after, 2717 | .ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after, 2718 | .ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:after, 2719 | .ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, 2720 | .ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, 2721 | .ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, 2722 | .ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, 2723 | .ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, 2724 | .ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, 2725 | .ant-menu-dark .ant-menu-item:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before, 2726 | .ant-menu-dark .ant-menu-item-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before, 2727 | .ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before, 2728 | .ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before, 2729 | .ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before, 2730 | .ant-menu-dark .ant-menu-submenu-title:hover > .ant-menu-submenu-title:hover > .ant-menu-submenu-arrow:before { 2731 | background: #fff; 2732 | } 2733 | .ant-menu-dark .ant-menu-item-selected { 2734 | border-right: 0; 2735 | color: #fff; 2736 | } 2737 | .ant-menu-dark .ant-menu-item-selected:after { 2738 | border-right: 0; 2739 | } 2740 | .ant-menu-dark .ant-menu-item-selected > a, 2741 | .ant-menu-dark .ant-menu-item-selected > a:hover { 2742 | color: #fff; 2743 | } 2744 | .ant-menu.ant-menu-dark .ant-menu-item-selected, 2745 | .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected { 2746 | background-color: #1890ff; 2747 | } 2748 | .ant-menu-dark .ant-menu-item-disabled, 2749 | .ant-menu-dark .ant-menu-submenu-disabled, 2750 | .ant-menu-dark .ant-menu-item-disabled > a, 2751 | .ant-menu-dark .ant-menu-submenu-disabled > a { 2752 | opacity: 0.8; 2753 | color: rgba(255, 255, 255, 0.35) !important; 2754 | } 2755 | .ant-menu-dark .ant-menu-item-disabled > .ant-menu-submenu-title, 2756 | .ant-menu-dark .ant-menu-submenu-disabled > .ant-menu-submenu-title { 2757 | color: rgba(255, 255, 255, 0.35) !important; 2758 | } 2759 | .ant-menu-dark .ant-menu-item-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, 2760 | .ant-menu-dark .ant-menu-submenu-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow:before, 2761 | .ant-menu-dark .ant-menu-item-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after, 2762 | .ant-menu-dark .ant-menu-submenu-disabled > .ant-menu-submenu-title > .ant-menu-submenu-arrow:after { 2763 | background: rgba(255, 255, 255, 0.35) !important; 2764 | } 2765 | 2766 | /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ 2767 | /* stylelint-disable no-duplicate-selectors */ 2768 | /* stylelint-disable */ 2769 | /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ 2770 | .ant-tooltip { 2771 | font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 2772 | font-size: 14px; 2773 | font-variant: tabular-nums; 2774 | line-height: 1.5; 2775 | color: rgba(0, 0, 0, 0.65); 2776 | -webkit-box-sizing: border-box; 2777 | box-sizing: border-box; 2778 | margin: 0; 2779 | padding: 0; 2780 | list-style: none; 2781 | position: absolute; 2782 | z-index: 1060; 2783 | display: block; 2784 | visibility: visible; 2785 | max-width: 250px; 2786 | } 2787 | .ant-tooltip-hidden { 2788 | display: none; 2789 | } 2790 | .ant-tooltip-placement-top, 2791 | .ant-tooltip-placement-topLeft, 2792 | .ant-tooltip-placement-topRight { 2793 | padding-bottom: 8px; 2794 | } 2795 | .ant-tooltip-placement-right, 2796 | .ant-tooltip-placement-rightTop, 2797 | .ant-tooltip-placement-rightBottom { 2798 | padding-left: 8px; 2799 | } 2800 | .ant-tooltip-placement-bottom, 2801 | .ant-tooltip-placement-bottomLeft, 2802 | .ant-tooltip-placement-bottomRight { 2803 | padding-top: 8px; 2804 | } 2805 | .ant-tooltip-placement-left, 2806 | .ant-tooltip-placement-leftTop, 2807 | .ant-tooltip-placement-leftBottom { 2808 | padding-right: 8px; 2809 | } 2810 | .ant-tooltip-inner { 2811 | padding: 6px 8px; 2812 | color: #fff; 2813 | text-align: left; 2814 | text-decoration: none; 2815 | background-color: rgba(0, 0, 0, 0.75); 2816 | border-radius: 4px; 2817 | -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 2818 | box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); 2819 | min-height: 32px; 2820 | word-wrap: break-word; 2821 | } 2822 | .ant-tooltip-arrow { 2823 | position: absolute; 2824 | width: 0; 2825 | height: 0; 2826 | border-color: transparent; 2827 | border-style: solid; 2828 | } 2829 | .ant-tooltip-placement-top .ant-tooltip-arrow, 2830 | .ant-tooltip-placement-topLeft .ant-tooltip-arrow, 2831 | .ant-tooltip-placement-topRight .ant-tooltip-arrow { 2832 | bottom: 3px; 2833 | border-width: 5px 5px 0; 2834 | border-top-color: rgba(0, 0, 0, 0.75); 2835 | } 2836 | .ant-tooltip-placement-top .ant-tooltip-arrow { 2837 | left: 50%; 2838 | margin-left: -5px; 2839 | } 2840 | .ant-tooltip-placement-topLeft .ant-tooltip-arrow { 2841 | left: 16px; 2842 | } 2843 | .ant-tooltip-placement-topRight .ant-tooltip-arrow { 2844 | right: 16px; 2845 | } 2846 | .ant-tooltip-placement-right .ant-tooltip-arrow, 2847 | .ant-tooltip-placement-rightTop .ant-tooltip-arrow, 2848 | .ant-tooltip-placement-rightBottom .ant-tooltip-arrow { 2849 | left: 3px; 2850 | border-width: 5px 5px 5px 0; 2851 | border-right-color: rgba(0, 0, 0, 0.75); 2852 | } 2853 | .ant-tooltip-placement-right .ant-tooltip-arrow { 2854 | top: 50%; 2855 | margin-top: -5px; 2856 | } 2857 | .ant-tooltip-placement-rightTop .ant-tooltip-arrow { 2858 | top: 8px; 2859 | } 2860 | .ant-tooltip-placement-rightBottom .ant-tooltip-arrow { 2861 | bottom: 8px; 2862 | } 2863 | .ant-tooltip-placement-left .ant-tooltip-arrow, 2864 | .ant-tooltip-placement-leftTop .ant-tooltip-arrow, 2865 | .ant-tooltip-placement-leftBottom .ant-tooltip-arrow { 2866 | right: 3px; 2867 | border-width: 5px 0 5px 5px; 2868 | border-left-color: rgba(0, 0, 0, 0.75); 2869 | } 2870 | .ant-tooltip-placement-left .ant-tooltip-arrow { 2871 | top: 50%; 2872 | margin-top: -5px; 2873 | } 2874 | .ant-tooltip-placement-leftTop .ant-tooltip-arrow { 2875 | top: 8px; 2876 | } 2877 | .ant-tooltip-placement-leftBottom .ant-tooltip-arrow { 2878 | bottom: 8px; 2879 | } 2880 | .ant-tooltip-placement-bottom .ant-tooltip-arrow, 2881 | .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow, 2882 | .ant-tooltip-placement-bottomRight .ant-tooltip-arrow { 2883 | top: 3px; 2884 | border-width: 0 5px 5px; 2885 | border-bottom-color: rgba(0, 0, 0, 0.75); 2886 | } 2887 | .ant-tooltip-placement-bottom .ant-tooltip-arrow { 2888 | left: 50%; 2889 | margin-left: -5px; 2890 | } 2891 | .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow { 2892 | left: 16px; 2893 | } 2894 | .ant-tooltip-placement-bottomRight .ant-tooltip-arrow { 2895 | right: 16px; 2896 | } 2897 | 2898 | /* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */ 2899 | /* stylelint-disable no-duplicate-selectors */ 2900 | /* stylelint-disable */ 2901 | /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */ 2902 | .ant-steps { 2903 | font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 2904 | font-size: 14px; 2905 | font-variant: tabular-nums; 2906 | line-height: 1.5; 2907 | color: rgba(0, 0, 0, 0.65); 2908 | -webkit-box-sizing: border-box; 2909 | box-sizing: border-box; 2910 | margin: 0; 2911 | padding: 0; 2912 | list-style: none; 2913 | font-size: 0; 2914 | width: 100%; 2915 | display: -webkit-box; 2916 | display: -webkit-flex; 2917 | display: -ms-flexbox; 2918 | display: flex; 2919 | } 2920 | .ant-steps-item { 2921 | position: relative; 2922 | display: inline-block; 2923 | vertical-align: top; 2924 | -webkit-box-flex: 1; 2925 | -webkit-flex: 1; 2926 | -ms-flex: 1; 2927 | flex: 1; 2928 | overflow: hidden; 2929 | } 2930 | .ant-steps-item:last-child { 2931 | -webkit-box-flex: 0; 2932 | -webkit-flex: none; 2933 | -ms-flex: none; 2934 | flex: none; 2935 | } 2936 | .ant-steps-item:last-child .ant-steps-item-tail, 2937 | .ant-steps-item:last-child .ant-steps-item-title:after { 2938 | display: none; 2939 | } 2940 | .ant-steps-item-icon, 2941 | .ant-steps-item-content { 2942 | display: inline-block; 2943 | vertical-align: top; 2944 | } 2945 | .ant-steps-item-icon { 2946 | border: 1px solid rgba(0, 0, 0, 0.25); 2947 | width: 32px; 2948 | height: 32px; 2949 | line-height: 32px; 2950 | text-align: center; 2951 | border-radius: 32px; 2952 | font-size: 16px; 2953 | margin-right: 8px; 2954 | -webkit-transition: background-color 0.3s, border-color 0.3s; 2955 | transition: background-color 0.3s, border-color 0.3s; 2956 | font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 2957 | } 2958 | .ant-steps-item-icon > .ant-steps-icon { 2959 | line-height: 1; 2960 | top: -1px; 2961 | color: #1890ff; 2962 | position: relative; 2963 | } 2964 | .ant-steps-item-tail { 2965 | position: absolute; 2966 | left: 0; 2967 | width: 100%; 2968 | top: 12px; 2969 | padding: 0 10px; 2970 | } 2971 | .ant-steps-item-tail:after { 2972 | content: ''; 2973 | display: inline-block; 2974 | background: #e8e8e8; 2975 | height: 1px; 2976 | border-radius: 1px; 2977 | width: 100%; 2978 | -webkit-transition: background .3s; 2979 | transition: background .3s; 2980 | } 2981 | .ant-steps-item-title { 2982 | font-size: 16px; 2983 | color: rgba(0, 0, 0, 0.65); 2984 | display: inline-block; 2985 | padding-right: 16px; 2986 | position: relative; 2987 | line-height: 32px; 2988 | } 2989 | .ant-steps-item-title:after { 2990 | content: ''; 2991 | height: 1px; 2992 | width: 9999px; 2993 | background: #e8e8e8; 2994 | display: block; 2995 | position: absolute; 2996 | top: 16px; 2997 | left: 100%; 2998 | } 2999 | .ant-steps-item-description { 3000 | font-size: 14px; 3001 | color: rgba(0, 0, 0, 0.45); 3002 | } 3003 | .ant-steps-item-wait .ant-steps-item-icon { 3004 | border-color: rgba(0, 0, 0, 0.25); 3005 | background-color: #fff; 3006 | } 3007 | .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon { 3008 | color: rgba(0, 0, 0, 0.25); 3009 | } 3010 | .ant-steps-item-wait .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot { 3011 | background: rgba(0, 0, 0, 0.25); 3012 | } 3013 | .ant-steps-item-wait > .ant-steps-item-content > .ant-steps-item-title { 3014 | color: rgba(0, 0, 0, 0.45); 3015 | } 3016 | .ant-steps-item-wait > .ant-steps-item-content > .ant-steps-item-title:after { 3017 | background-color: #e8e8e8; 3018 | } 3019 | .ant-steps-item-wait > .ant-steps-item-content > .ant-steps-item-description { 3020 | color: rgba(0, 0, 0, 0.45); 3021 | } 3022 | .ant-steps-item-wait > .ant-steps-item-tail:after { 3023 | background-color: #e8e8e8; 3024 | } 3025 | .ant-steps-item-process .ant-steps-item-icon { 3026 | border-color: #1890ff; 3027 | background-color: #fff; 3028 | } 3029 | .ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon { 3030 | color: #1890ff; 3031 | } 3032 | .ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot { 3033 | background: #1890ff; 3034 | } 3035 | .ant-steps-item-process > .ant-steps-item-content > .ant-steps-item-title { 3036 | color: rgba(0, 0, 0, 0.85); 3037 | } 3038 | .ant-steps-item-process > .ant-steps-item-content > .ant-steps-item-title:after { 3039 | background-color: #e8e8e8; 3040 | } 3041 | .ant-steps-item-process > .ant-steps-item-content > .ant-steps-item-description { 3042 | color: rgba(0, 0, 0, 0.65); 3043 | } 3044 | .ant-steps-item-process > .ant-steps-item-tail:after { 3045 | background-color: #e8e8e8; 3046 | } 3047 | .ant-steps-item-process .ant-steps-item-icon { 3048 | background: #1890ff; 3049 | } 3050 | .ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon { 3051 | color: #fff; 3052 | } 3053 | .ant-steps-item-process .ant-steps-item-title { 3054 | font-weight: 500; 3055 | } 3056 | .ant-steps-item-finish .ant-steps-item-icon { 3057 | border-color: #1890ff; 3058 | background-color: #fff; 3059 | } 3060 | .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon { 3061 | color: #1890ff; 3062 | } 3063 | .ant-steps-item-finish .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot { 3064 | background: #1890ff; 3065 | } 3066 | .ant-steps-item-finish > .ant-steps-item-content > .ant-steps-item-title { 3067 | color: rgba(0, 0, 0, 0.65); 3068 | } 3069 | .ant-steps-item-finish > .ant-steps-item-content > .ant-steps-item-title:after { 3070 | background-color: #1890ff; 3071 | } 3072 | .ant-steps-item-finish > .ant-steps-item-content > .ant-steps-item-description { 3073 | color: rgba(0, 0, 0, 0.45); 3074 | } 3075 | .ant-steps-item-finish > .ant-steps-item-tail:after { 3076 | background-color: #1890ff; 3077 | } 3078 | .ant-steps-item-error .ant-steps-item-icon { 3079 | border-color: #f5222d; 3080 | background-color: #fff; 3081 | } 3082 | .ant-steps-item-error .ant-steps-item-icon > .ant-steps-icon { 3083 | color: #f5222d; 3084 | } 3085 | .ant-steps-item-error .ant-steps-item-icon > .ant-steps-icon .ant-steps-icon-dot { 3086 | background: #f5222d; 3087 | } 3088 | .ant-steps-item-error > .ant-steps-item-content > .ant-steps-item-title { 3089 | color: #f5222d; 3090 | } 3091 | .ant-steps-item-error > .ant-steps-item-content > .ant-steps-item-title:after { 3092 | background-color: #e8e8e8; 3093 | } 3094 | .ant-steps-item-error > .ant-steps-item-content > .ant-steps-item-description { 3095 | color: #f5222d; 3096 | } 3097 | .ant-steps-item-error > .ant-steps-item-tail:after { 3098 | background-color: #e8e8e8; 3099 | } 3100 | .ant-steps-item.ant-steps-next-error .ant-steps-item-title:after { 3101 | background: #f5222d; 3102 | } 3103 | .ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item { 3104 | margin-right: 16px; 3105 | white-space: nowrap; 3106 | } 3107 | .ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item:last-child { 3108 | margin-right: 0; 3109 | } 3110 | .ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item:last-child .ant-steps-item-title { 3111 | padding-right: 0; 3112 | } 3113 | .ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item-tail { 3114 | display: none; 3115 | } 3116 | .ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item-description { 3117 | max-width: 140px; 3118 | white-space: normal; 3119 | } 3120 | .ant-steps-item-custom .ant-steps-item-icon { 3121 | background: none; 3122 | border: 0; 3123 | width: auto; 3124 | height: auto; 3125 | } 3126 | .ant-steps-item-custom .ant-steps-item-icon > .ant-steps-icon { 3127 | font-size: 24px; 3128 | line-height: 32px; 3129 | top: 0; 3130 | left: 0.5px; 3131 | width: 32px; 3132 | height: 32px; 3133 | } 3134 | .ant-steps-item-custom.ant-steps-item-process .ant-steps-item-icon > .ant-steps-icon { 3135 | color: #1890ff; 3136 | } 3137 | .ant-steps-small.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item { 3138 | margin-right: 12px; 3139 | } 3140 | .ant-steps-small.ant-steps-horizontal:not(.ant-steps-label-vertical) .ant-steps-item:last-child { 3141 | margin-right: 0; 3142 | } 3143 | .ant-steps-small .ant-steps-item-icon { 3144 | width: 24px; 3145 | height: 24px; 3146 | line-height: 24px; 3147 | text-align: center; 3148 | border-radius: 24px; 3149 | font-size: 12px; 3150 | } 3151 | .ant-steps-small .ant-steps-item-title { 3152 | font-size: 14px; 3153 | line-height: 24px; 3154 | padding-right: 12px; 3155 | } 3156 | .ant-steps-small .ant-steps-item-title:after { 3157 | top: 12px; 3158 | } 3159 | .ant-steps-small .ant-steps-item-description { 3160 | font-size: 14px; 3161 | color: rgba(0, 0, 0, 0.45); 3162 | } 3163 | .ant-steps-small .ant-steps-item-tail { 3164 | top: 8px; 3165 | padding: 0 8px; 3166 | } 3167 | .ant-steps-small .ant-steps-item-custom .ant-steps-item-icon { 3168 | width: inherit; 3169 | height: inherit; 3170 | line-height: inherit; 3171 | border-radius: 0; 3172 | border: 0; 3173 | background: none; 3174 | } 3175 | .ant-steps-small .ant-steps-item-custom .ant-steps-item-icon > .ant-steps-icon { 3176 | font-size: 24px; 3177 | line-height: 24px; 3178 | -webkit-transform: none; 3179 | -ms-transform: none; 3180 | transform: none; 3181 | } 3182 | .ant-steps-vertical { 3183 | display: block; 3184 | } 3185 | .ant-steps-vertical .ant-steps-item { 3186 | display: block; 3187 | overflow: visible; 3188 | } 3189 | .ant-steps-vertical .ant-steps-item-icon { 3190 | float: left; 3191 | margin-right: 16px; 3192 | } 3193 | .ant-steps-vertical .ant-steps-item-content { 3194 | min-height: 48px; 3195 | overflow: hidden; 3196 | display: block; 3197 | } 3198 | .ant-steps-vertical .ant-steps-item-title { 3199 | line-height: 32px; 3200 | } 3201 | .ant-steps-vertical .ant-steps-item-description { 3202 | padding-bottom: 12px; 3203 | } 3204 | .ant-steps-vertical > .ant-steps-item > .ant-steps-item-tail { 3205 | position: absolute; 3206 | left: 16px; 3207 | top: 0; 3208 | height: 100%; 3209 | width: 1px; 3210 | padding: 38px 0 6px; 3211 | } 3212 | .ant-steps-vertical > .ant-steps-item > .ant-steps-item-tail:after { 3213 | height: 100%; 3214 | width: 1px; 3215 | } 3216 | .ant-steps-vertical > .ant-steps-item:not(:last-child) > .ant-steps-item-tail { 3217 | display: block; 3218 | } 3219 | .ant-steps-vertical > .ant-steps-item > .ant-steps-item-content > .ant-steps-item-title:after { 3220 | display: none; 3221 | } 3222 | .ant-steps-vertical.ant-steps-small .ant-steps-item-tail { 3223 | position: absolute; 3224 | left: 12px; 3225 | top: 0; 3226 | padding: 30px 0 6px; 3227 | } 3228 | .ant-steps-vertical.ant-steps-small .ant-steps-item-title { 3229 | line-height: 24px; 3230 | } 3231 | @media (max-width: 480px) { 3232 | .ant-steps-horizontal.ant-steps-label-horizontal { 3233 | display: block; 3234 | } 3235 | .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item { 3236 | display: block; 3237 | overflow: visible; 3238 | } 3239 | .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-icon { 3240 | float: left; 3241 | margin-right: 16px; 3242 | } 3243 | .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-content { 3244 | min-height: 48px; 3245 | overflow: hidden; 3246 | display: block; 3247 | } 3248 | .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-title { 3249 | line-height: 32px; 3250 | } 3251 | .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item-description { 3252 | padding-bottom: 12px; 3253 | } 3254 | .ant-steps-horizontal.ant-steps-label-horizontal > .ant-steps-item > .ant-steps-item-tail { 3255 | position: absolute; 3256 | left: 16px; 3257 | top: 0; 3258 | height: 100%; 3259 | width: 1px; 3260 | padding: 38px 0 6px; 3261 | } 3262 | .ant-steps-horizontal.ant-steps-label-horizontal > .ant-steps-item > .ant-steps-item-tail:after { 3263 | height: 100%; 3264 | width: 1px; 3265 | } 3266 | .ant-steps-horizontal.ant-steps-label-horizontal > .ant-steps-item:not(:last-child) > .ant-steps-item-tail { 3267 | display: block; 3268 | } 3269 | .ant-steps-horizontal.ant-steps-label-horizontal > .ant-steps-item > .ant-steps-item-content > .ant-steps-item-title:after { 3270 | display: none; 3271 | } 3272 | .ant-steps-horizontal.ant-steps-label-horizontal.ant-steps-small .ant-steps-item-tail { 3273 | position: absolute; 3274 | left: 12px; 3275 | top: 0; 3276 | padding: 30px 0 6px; 3277 | } 3278 | .ant-steps-horizontal.ant-steps-label-horizontal.ant-steps-small .ant-steps-item-title { 3279 | line-height: 24px; 3280 | } 3281 | } 3282 | .ant-steps-label-vertical .ant-steps-item { 3283 | overflow: visible; 3284 | } 3285 | .ant-steps-label-vertical .ant-steps-item-tail { 3286 | padding: 0 24px; 3287 | margin-left: 48px; 3288 | } 3289 | .ant-steps-label-vertical .ant-steps-item-content { 3290 | display: block; 3291 | text-align: center; 3292 | margin-top: 8px; 3293 | width: 104px; 3294 | } 3295 | .ant-steps-label-vertical .ant-steps-item-icon { 3296 | display: inline-block; 3297 | margin-left: 36px; 3298 | } 3299 | .ant-steps-label-vertical .ant-steps-item-title { 3300 | padding-right: 0; 3301 | } 3302 | .ant-steps-label-vertical .ant-steps-item-title:after { 3303 | display: none; 3304 | } 3305 | .ant-steps-dot .ant-steps-item-title { 3306 | line-height: 1.5; 3307 | } 3308 | .ant-steps-dot .ant-steps-item-tail { 3309 | width: 100%; 3310 | top: 2px; 3311 | margin: 0 0 0 70px; 3312 | padding: 0; 3313 | } 3314 | .ant-steps-dot .ant-steps-item-tail:after { 3315 | height: 3px; 3316 | width: calc(100% - 20px); 3317 | margin-left: 12px; 3318 | } 3319 | .ant-steps-dot .ant-steps-item:first-child .ant-steps-icon-dot { 3320 | left: 2px; 3321 | } 3322 | .ant-steps-dot .ant-steps-item-icon { 3323 | padding-right: 0; 3324 | width: 8px; 3325 | height: 8px; 3326 | line-height: 8px; 3327 | border: 0; 3328 | margin-left: 67px; 3329 | background: transparent; 3330 | } 3331 | .ant-steps-dot .ant-steps-item-icon .ant-steps-icon-dot { 3332 | float: left; 3333 | width: 100%; 3334 | height: 100%; 3335 | border-radius: 100px; 3336 | position: relative; 3337 | -webkit-transition: all .3s; 3338 | transition: all .3s; 3339 | /* expand hover area */ 3340 | } 3341 | .ant-steps-dot .ant-steps-item-icon .ant-steps-icon-dot:after { 3342 | content: ""; 3343 | background: rgba(0, 0, 0, 0.001); 3344 | width: 60px; 3345 | height: 32px; 3346 | position: absolute; 3347 | top: -12px; 3348 | left: -26px; 3349 | } 3350 | .ant-steps-dot .ant-steps-item-content { 3351 | width: 140px; 3352 | } 3353 | .ant-steps-dot .ant-steps-item-process .ant-steps-item-icon { 3354 | width: 10px; 3355 | height: 10px; 3356 | line-height: 10px; 3357 | } 3358 | .ant-steps-dot .ant-steps-item-process .ant-steps-item-icon .ant-steps-icon-dot { 3359 | top: -1px; 3360 | } 3361 | .ant-steps-vertical.ant-steps-dot .ant-steps-item-icon { 3362 | margin-left: 0; 3363 | margin-top: 8px; 3364 | } 3365 | .ant-steps-vertical.ant-steps-dot .ant-steps-item-tail { 3366 | margin: 0; 3367 | left: -9px; 3368 | top: 2px; 3369 | padding: 22px 0 4px; 3370 | } 3371 | .ant-steps-vertical.ant-steps-dot .ant-steps-item:first-child .ant-steps-icon-dot { 3372 | left: 0; 3373 | } 3374 | .ant-steps-vertical.ant-steps-dot .ant-steps-item-process .ant-steps-icon-dot { 3375 | left: -2px; 3376 | } 3377 | 3378 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | webpack4.0 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /dll/manifest.json: -------------------------------------------------------------------------------- 1 | {"name":"vendor_967f8e20effd29cc9573","content":{"./node_modules/prop-types/index.js":{"id":0,"buildMeta":{"providedExports":true}},"./node_modules/react/index.js":{"id":1,"buildMeta":{"providedExports":true}},"./node_modules/history/es/PathUtils.js":{"id":2,"buildMeta":{"exportsType":"namespace","providedExports":["addLeadingSlash","stripLeadingSlash","hasBasename","stripBasename","stripTrailingSlash","parsePath","createPath"]}},"./node_modules/warning/warning.js":{"id":3,"buildMeta":{"providedExports":true}},"./node_modules/invariant/browser.js":{"id":4,"buildMeta":{"providedExports":true}},"./node_modules/history/node_modules/warning/browser.js":{"id":5,"buildMeta":{"providedExports":true}},"./node_modules/history/es/index.js":{"id":6,"buildMeta":{"exportsType":"namespace","providedExports":["createBrowserHistory","createHashHistory","createMemoryHistory","createLocation","locationsAreEqual","parsePath","createPath"]}},"./node_modules/history/es/LocationUtils.js":{"id":7,"buildMeta":{"exportsType":"namespace","providedExports":["createLocation","locationsAreEqual"]}},"./node_modules/history/es/DOMUtils.js":{"id":8,"buildMeta":{"exportsType":"namespace","providedExports":["canUseDOM","addEventListener","removeEventListener","getConfirmation","supportsHistory","supportsPopStateOnHashChange","supportsGoWithoutReloadUsingHash","isExtraneousPopstateEvent"]}},"./node_modules/axios/lib/utils.js":{"id":9,"buildMeta":{"providedExports":true}},"./node_modules/react-router/es/Router.js":{"id":10,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router/es/matchPath.js":{"id":11,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router/es/generatePath.js":{"id":12,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router/es/Route.js":{"id":13,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router-dom/es/Router.js":{"id":14,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/history/es/createTransitionManager.js":{"id":15,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router-dom/es/Link.js":{"id":16,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router/es/MemoryRouter.js":{"id":17,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router/es/Prompt.js":{"id":18,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router/es/Redirect.js":{"id":19,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router/es/StaticRouter.js":{"id":20,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router/es/Switch.js":{"id":21,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router/es/withRouter.js":{"id":22,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router-dom/es/Route.js":{"id":23,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/path-to-regexp/index.js":{"id":24,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/defaults.js":{"id":25,"buildMeta":{"providedExports":true}},"./node_modules/object-assign/index.js":{"id":26,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/bind.js":{"id":27,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/adapters/xhr.js":{"id":28,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/createError.js":{"id":29,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/cancel/isCancel.js":{"id":30,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/cancel/Cancel.js":{"id":31,"buildMeta":{"providedExports":true}},"./node_modules/history/es/createBrowserHistory.js":{"id":32,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/history/es/createHashHistory.js":{"id":33,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/history/es/createMemoryHistory.js":{"id":34,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router-dom/es/BrowserRouter.js":{"id":35,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router-dom/es/HashRouter.js":{"id":36,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router-dom/es/MemoryRouter.js":{"id":37,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router-dom/es/NavLink.js":{"id":38,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router-dom/es/Prompt.js":{"id":39,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router-dom/es/Redirect.js":{"id":40,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router-dom/es/StaticRouter.js":{"id":41,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router-dom/es/Switch.js":{"id":42,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router-dom/es/generatePath.js":{"id":43,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router-dom/es/matchPath.js":{"id":44,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/react-router-dom/es/withRouter.js":{"id":45,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/resolve-pathname/index.js":{"id":46,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/value-equal/index.js":{"id":47,"buildMeta":{"exportsType":"namespace","providedExports":["default"]}},"./node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js":{"id":48,"buildMeta":{"providedExports":true}},"./node_modules/react/cjs/react.production.min.js":{"id":50,"buildMeta":{"providedExports":true}},"./node_modules/react-dom/index.js":{"id":51,"buildMeta":{"providedExports":true}},"./node_modules/react-dom/cjs/react-dom.production.min.js":{"id":52,"buildMeta":{"providedExports":true}},"./node_modules/scheduler/index.js":{"id":53,"buildMeta":{"providedExports":true}},"./node_modules/scheduler/cjs/scheduler.production.min.js":{"id":54,"buildMeta":{"providedExports":true}},"./node_modules/axios/index.js":{"id":55,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/axios.js":{"id":56,"buildMeta":{"providedExports":true}},"./node_modules/is-buffer/index.js":{"id":57,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/Axios.js":{"id":58,"buildMeta":{"providedExports":true}},"./node_modules/process/browser.js":{"id":59,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/normalizeHeaderName.js":{"id":60,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/settle.js":{"id":61,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/enhanceError.js":{"id":62,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/buildURL.js":{"id":63,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/parseHeaders.js":{"id":64,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/isURLSameOrigin.js":{"id":65,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/btoa.js":{"id":66,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/cookies.js":{"id":67,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/InterceptorManager.js":{"id":68,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/dispatchRequest.js":{"id":69,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/core/transformData.js":{"id":70,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/isAbsoluteURL.js":{"id":71,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/combineURLs.js":{"id":72,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/cancel/CancelToken.js":{"id":73,"buildMeta":{"providedExports":true}},"./node_modules/axios/lib/helpers/spread.js":{"id":74,"buildMeta":{"providedExports":true}},"./node_modules/react-loadable/lib/index.js":{"id":75,"buildMeta":{"providedExports":true}},"./node_modules/prop-types/factoryWithThrowingShims.js":{"id":76,"buildMeta":{"providedExports":true}},"./node_modules/prop-types/lib/ReactPropTypesSecret.js":{"id":77,"buildMeta":{"providedExports":true}},"./node_modules/react-router/es/index.js":{"id":78,"buildMeta":{"exportsType":"namespace","providedExports":["MemoryRouter","Prompt","Redirect","Route","Router","StaticRouter","Switch","generatePath","matchPath","withRouter"]}},"./node_modules/isarray/index.js":{"id":79,"buildMeta":{"providedExports":true}},"./node_modules/react-router-dom/es/index.js":{"id":80,"buildMeta":{"exportsType":"namespace","providedExports":["BrowserRouter","HashRouter","Link","MemoryRouter","NavLink","Prompt","Redirect","Route","Router","StaticRouter","Switch","generatePath","matchPath","withRouter"]}},"./node_modules/querystring-es3/index.js":{"id":81,"buildMeta":{"providedExports":true}},"./node_modules/querystring-es3/decode.js":{"id":82,"buildMeta":{"providedExports":true}},"./node_modules/querystring-es3/encode.js":{"id":83,"buildMeta":{"providedExports":true}}}} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "reactscratch", 3 | "version": "1.0.0", 4 | "description": "Create react app from scratch", 5 | "keywords": [ 6 | "react-app", 7 | "scratch" 8 | ], 9 | "main": "index.js", 10 | "scripts": { 11 | "start": "webpack-dev-server --open --color --hot --mode development --inline --profile --env.dev=development", 12 | "build": "webpack --progress --profile --mode production --env.dev=production", 13 | "dev": " webpack --progress --profile --mode development --env.dev=dev", 14 | "dll": " webpack --mode production --profile --inline --config webpack.dll.config.js " 15 | }, 16 | "author": "", 17 | "license": "ISC", 18 | "dependencies": { 19 | "antd": "3.20.3", 20 | "axios": "^0.18.0", 21 | "js-yaml": "^3.13.1", 22 | "querystring": "^0.2.0", 23 | "querystringify": "^2.1.1", 24 | "react": "16.8.0", 25 | "react-dom": "16.8.0", 26 | "react-loadable": "^5.4.0", 27 | "react-router": "^4.3.1", 28 | "react-router-dom": "^4.3.1" 29 | }, 30 | "devDependencies": { 31 | "babel-cli": "^6.26.0", 32 | "babel-core": "^6.26.3", 33 | "babel-loader": "^7.1.4", 34 | "babel-plugin-import": "^1.7.0", 35 | "babel-plugin-syntax-dynamic-import": "^6.18.0", 36 | "babel-plugin-transform-class-properties": "^6.24.1", 37 | "babel-preset-env": "^1.6.1", 38 | "babel-preset-latest": "^6.24.1", 39 | "babel-preset-react": "^6.24.1", 40 | "babel-preset-stage-2": "^6.24.1", 41 | "cache-loader": "^1.2.2", 42 | "clean-webpack-plugin": "^0.1.19", 43 | "copy-webpack-plugin": "^4.5.2", 44 | "css-loader": "^0.28.11", 45 | "extended-define-webpack-plugin": "^0.1.3", 46 | "happypack": "^5.0.0", 47 | "html-loader": "^0.5.5", 48 | "html-webpack-plugin": "^3.2.0", 49 | "less-loader": "^4.1.0", 50 | "mini-css-extract-plugin": "^0.4.0", 51 | "postcss-loader": "^2.1.5", 52 | "prop-types": "^15.6.1", 53 | "react-redux": "^5.0.7", 54 | "redux": "^4.0.0", 55 | "redux-saga": "^0.16.0", 56 | "style-loader": "^0.21.0", 57 | "stylus": "^0.54.5", 58 | "stylus-loader": "^3.0.2", 59 | "svg-sprite-loader": "^3.8.0", 60 | "uglifyjs-webpack-plugin": "^1.2.5", 61 | "url-loader": "^1.0.1", 62 | "webpack": "^4.7.0", 63 | "webpack-bundle-analyzer": "^3.3.2", 64 | "webpack-cli": "^3.0.8", 65 | "webpack-dev-server": "^3.1.4" 66 | }, 67 | "theme": { 68 | "font-size-base": "12px", 69 | "layout-header-background": "rgb(64, 64, 64)", 70 | "menu-dark-submenu-bg": "rgb(51, 51, 51)", 71 | "mainColor": "#0590FF" 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /src/api/README.md: -------------------------------------------------------------------------------- 1 | ### axios 使用方法 2 | - 引用 3 | ``` 4 | import {axiosLogin} from 'api' 5 | ``` 6 | 7 | - 发送接口请求 8 | ``` 9 | axiosLogin.login(params).then((data)=>{ 10 | //处理axios 11 | }) 12 | ``` -------------------------------------------------------------------------------- /src/api/index.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | import querystring from 'querystring'; 4 | 5 | import config from './../config'; 6 | const { server, devServer } = config; 7 | import { message } from 'antd'; 8 | 9 | 10 | if (__LOCAL__) { //true 为开发环境 11 | axios.defaults.baseURL = devServer; //请求测试域名和端口 12 | } else { 13 | axios.defaults.baseURL = server; //请求正式域名和端口 14 | } 15 | 16 | // 发送请求前拦截器 17 | axios.interceptors.request.use( 18 | config => { 19 | if ( 20 | config.method === 'post' || 21 | config.method === 'put' || 22 | config.method === 'delete' || 23 | config.method === 'patch' 24 | ) { 25 | config.data = querystring.stringify(config.data); 26 | config.headers = { //json格式 27 | 'Content-Type': 'application/json; charset=UTF-8', 28 | 'X-Requested-With': 'XMLHttpRequest', 29 | }; 30 | } 31 | // config.headers = { 32 | // authorization: `Bearer ${localStorage.getItem('toKen')}`, //根据需求是否需要token 33 | // }; 34 | return config; 35 | }, 36 | error => { 37 | return Promise.reject(error); 38 | } 39 | ); 40 | 41 | /** 42 | * 返回数据批量处理接口 43 | */ 44 | axios.interceptors.response.use( 45 | response => { 46 | if (response.status) { 47 | if (response.data.code == 1) { 48 | message.success(response.data.message); 49 | } else { 50 | message.error(response.data.message); 51 | } 52 | return response.data.result; 53 | } else { 54 | message.error(response.data.message); 55 | } 56 | return response; 57 | }, 58 | error => { 59 | message.error(error.response.data.message); 60 | return error.response.data; 61 | } 62 | ); 63 | 64 | 65 | /** 66 | * 登陆模块 67 | */ 68 | export const axiosLogin = { 69 | login: async function login(params = {}) { 70 | return await axios.get('/login', params); 71 | } 72 | } -------------------------------------------------------------------------------- /src/components/footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Footer.styl'; 3 | 4 | class Footer extends React.Component { 5 | 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | }; 10 | } 11 | 12 | render() { 13 | return ( 14 |
15 | component footer 16 |
17 | ); 18 | } 19 | 20 | componentWillMount() {} 21 | componentDidMount() {} 22 | componentWillReceiveProps(nextProps) {} 23 | shouldComponentUpdate(nextProps, nextState) { return true; } 24 | componentWillUpdate(nextProps, nextState) {} 25 | componentDidUpdate(prevProps, prevState) {} 26 | componentWillUnmount() {} 27 | } 28 | 29 | export default Footer; 30 | -------------------------------------------------------------------------------- /src/components/footer/Footer.styl: -------------------------------------------------------------------------------- 1 | .footer { 2 | display: block; 3 | height: 40px; 4 | background: #fff; 5 | box-shadow: 0 0 2px 1px #999; 6 | margin-top: 10px; 7 | text-align: center; 8 | line-height: 40px; 9 | width: 100%; 10 | } 11 | 12 | -------------------------------------------------------------------------------- /src/components/footer/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./Footer'); -------------------------------------------------------------------------------- /src/components/header/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Steps } from 'antd'; 3 | const Step = Steps.Step; 4 | 5 | 6 | import './Header.styl'; 7 | 8 | 9 | class Header extends React.Component { 10 | constructor(props) { 11 | super(props); 12 | this.state = { 13 | 14 | }; 15 | } 16 | 17 | render() { 18 | return ( 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | ); 28 | } 29 | 30 | componentWillMount() { } 31 | componentDidMount() { } 32 | componentWillReceiveProps(nextProps) { } 33 | shouldComponentUpdate(nextProps, nextState) { 34 | return true; 35 | } 36 | componentWillUpdate(nextProps, nextState) { } 37 | componentDidUpdate(prevProps, prevState) { } 38 | componentWillUnmount() { } 39 | } 40 | 41 | export default Header; 42 | -------------------------------------------------------------------------------- /src/components/header/Header.styl: -------------------------------------------------------------------------------- 1 | .header { 2 | display: block; 3 | height: 60px; 4 | background: #fff; 5 | display: flex; 6 | box-shadow: 0 0 2px 1px #999; 7 | margin-bottom: 10px; 8 | .ant-steps{ 9 | padding-top: 12px; 10 | } 11 | } 12 | 13 | -------------------------------------------------------------------------------- /src/components/header/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./Header'); -------------------------------------------------------------------------------- /src/components/leftnav/Leftnav.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | // import { hashHistory } from 'react-router'; 3 | import PropTypes from 'prop-types'; 4 | 5 | import { Link } from 'react-router-dom'; 6 | 7 | import { Menu } from 'antd'; 8 | const SubMenu = Menu.SubMenu; 9 | const MenuItemGroup = Menu.ItemGroup; 10 | 11 | import './Leftnav.styl'; 12 | 13 | const router = [ 14 | { title: '首页', key: '/home', childRouter: [] }, 15 | { title: '错误', key: '/notfound', }, 16 | { 17 | title: '多路由', key: '/content', 18 | }, 19 | ] 20 | 21 | class LeftNav extends React.Component { 22 | constructor(props,context) { 23 | super(props,context); 24 | this.context.router; 25 | } 26 | 27 | 28 | handleClick = (e) => { 29 | // // console.log(e,'---'); 30 | // let path=''; 31 | // e.keyPath.reverse(); 32 | // for(var i=0;i 41 | 48 | { 49 | router.map((value, index) => { 50 | if (value.childRouter&&value.childRouter.length > 0) { 51 | return {value.title}}> 52 | { 53 | value.childRouter.map((item, i) => { 54 | return {item.title} 55 | }) 56 | } 57 | 58 | } else { 59 | return {value.title} 60 | } 61 | }) 62 | } 63 | 64 | 65 | ); 66 | } 67 | 68 | componentWillMount() { } 69 | componentDidMount() { } 70 | componentWillReceiveProps(nextProps) { } 71 | shouldComponentUpdate(nextProps, nextState) { return true; } 72 | componentWillUpdate(nextProps, nextState) { } 73 | componentDidUpdate(prevProps, prevState) { } 74 | componentWillUnmount() { } 75 | } 76 | export default LeftNav; 77 | -------------------------------------------------------------------------------- /src/components/leftnav/Leftnav.styl: -------------------------------------------------------------------------------- 1 | .leftnav { 2 | display: block; 3 | width: 200px; 4 | } 5 | 6 | -------------------------------------------------------------------------------- /src/components/leftnav/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./Leftnav'); -------------------------------------------------------------------------------- /src/components/notfound/Notfound.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Notfound.styl'; 3 | 4 | class Notfound extends React.Component { 5 | 6 | constructor(props) { 7 | super(props); 8 | this.state = { 9 | }; 10 | } 11 | 12 | render() { 13 | return ( 14 |
15 | component notfound 16 |
17 | ); 18 | } 19 | 20 | componentWillMount() {} 21 | componentDidMount() {} 22 | componentWillReceiveProps(nextProps) {} 23 | shouldComponentUpdate(nextProps, nextState) { return true; } 24 | componentWillUpdate(nextProps, nextState) {} 25 | componentDidUpdate(prevProps, prevState) {} 26 | componentWillUnmount() {} 27 | } 28 | 29 | export default Notfound; 30 | -------------------------------------------------------------------------------- /src/components/notfound/Notfound.styl: -------------------------------------------------------------------------------- 1 | .notfound 2 | display block 3 | 4 | -------------------------------------------------------------------------------- /src/components/notfound/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./Notfound'); -------------------------------------------------------------------------------- /src/images/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | webpack4.0 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import {HashRouter} from 'react-router-dom'; 4 | import LeftNav from 'components/leftnav'; 5 | import Header from 'components/header'; 6 | import Footer from 'components/footer'; 7 | import Routers from './router'; 8 | import Error from './util/error'; //错误日志 9 | import Performance from './util/performance'; //错误日志 10 | import 'babel-polyfill'; 11 | 12 | import './index.styl'; 13 | 14 | /** 15 | * 热更新 16 | */ 17 | if (module.hot) { 18 | module.hot.accept (); 19 | } 20 | class App extends React.Component { 21 | componentWillMount () {} 22 | render () { 23 | return ( 24 |
25 |
26 |
27 | 28 | 29 |
30 |
31 |
32 | ); 33 | } 34 | } 35 | 36 | ReactDOM.render ( 37 | 38 | 39 | , 40 | document.getElementById ('App') 41 | ); 42 | -------------------------------------------------------------------------------- /src/index.styl: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | html, body { 7 | height: 100%; 8 | } 9 | 10 | #App, .main { 11 | height: 100%; 12 | } 13 | 14 | .main { 15 | flex-direction: column; 16 | display: flex; 17 | } 18 | 19 | .content { 20 | flex: 1; 21 | display: flex; 22 | } 23 | 24 | .main-content { 25 | flex: 1; 26 | } 27 | -------------------------------------------------------------------------------- /src/loadable.js: -------------------------------------------------------------------------------- 1 | import Loadable from 'react-loadable'; 2 | export const Loading = props => { 3 | if (props.error) { 4 | return '加载错误'; 5 | } else if (props.timedOut) { 6 | return '加载超时'; 7 | } else if (props.pastDelay) { 8 | return '正在加载中...'; 9 | } else { 10 | return null; 11 | } 12 | }; 13 | 14 | export const importPath = ({loader}) => { 15 | return Loadable ({ 16 | loader, 17 | loading: Loading, 18 | delay: 200, 19 | timeout: 10000, 20 | }); 21 | }; 22 | -------------------------------------------------------------------------------- /src/pages/home/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Home.styl'; 3 | 4 | 5 | 6 | 7 | class Home extends React.Component { 8 | 9 | constructor(props) { 10 | super(props); 11 | this.state = { 12 | }; 13 | } 14 | 15 | render() { 16 | return ( 17 |
18 | component home 19 |
20 | ); 21 | } 22 | } 23 | 24 | export default Home; 25 | -------------------------------------------------------------------------------- /src/pages/home/Home.styl: -------------------------------------------------------------------------------- 1 | .home 2 | display block 3 | 4 | -------------------------------------------------------------------------------- /src/pages/home/index.js: -------------------------------------------------------------------------------- 1 | module.exports = require('./Home'); -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Switch, Route } from 'react-router-dom'; 3 | import { importPath } from './loadable'; 4 | /** 5 | * webpackChunkName 为需要按模块切割的名称 6 | */ 7 | const routers = [ 8 | { 9 | path: '/', 10 | component: importPath({ 11 | loader: () => import('pages/home/index.js'), 12 | }), 13 | }, 14 | { 15 | path: '/home', 16 | component: importPath({ 17 | loader: () => 18 | import(/* webpackChunkName:"home" */ 'pages/home/index.js'), 19 | }), 20 | }, 21 | ]; 22 | 23 | const Routers = () => ( 24 |
25 | 26 | {routers.map(({ component, path, exact }, index) => { 27 | return ( 28 | 29 | ); 30 | })} 31 | 32 |
33 | ); 34 | 35 | export default Routers; 36 | -------------------------------------------------------------------------------- /src/util/error.js: -------------------------------------------------------------------------------- 1 | const logData = () => { }; 2 | 3 | //前端错误日志监控 4 | window.onerror = function (errorMessage, scriptURI, lineNo, columnNo, error) { 5 | console.log('errorMessage: ' + errorMessage); // 异常信息 6 | console.log('scriptURI: ' + scriptURI); // 异常文件路径 7 | console.log('lineNo: ' + lineNo); // 异常行号 8 | console.log('columnNo: ' + columnNo); // 异常列号 9 | console.log('error: ' + error); // 异常堆栈信息 10 | let errorInfo = { 11 | errorMessage, 12 | scriptURI, 13 | lineNo, 14 | columnNo, 15 | error, 16 | time: new Date(), 17 | }; 18 | if (localStorage.getItem('errorLog')) { //检查本地是否有错误日志 19 | let errorLog = JSON.parse(localStorage.getItem('errorLog')); 20 | errorLog.push(errorInfo); 21 | } else { 22 | localStorage.setItem('errorLog', JSON.stringify([errorInfo])); 23 | } 24 | }; 25 | 26 | window.addEventListener( //在页面注销时候检查是否有错误日志，如果有上传 27 | 'unload', 28 | () => { 29 | if (localStorage.getItem('errorLog')) { // 30 | localStorage.removeItem('errorLog') 31 | //ajax 上传 32 | } 33 | }, 34 | false 35 | ); 36 | -------------------------------------------------------------------------------- /src/util/performance.js: -------------------------------------------------------------------------------- 1 | // performance.now() 2 | 3 | // // 计算加载时间 4 | // const getPerformanceTiming = () => { 5 | // var performance = window.performance; 6 | 7 | // if (!performance) { 8 | // // 当前浏览器不支持 9 | // console.log('你的浏览器不支持 performance 接口'); 10 | // return; 11 | // } 12 | 13 | 14 | // var t = performance.timing; 15 | // var times = {}; 16 | 17 | // //【重要】页面加载完成的时间 18 | // //【原因】这几乎代表了用户等待页面可用的时间 19 | // times.loadPage = t.loadEventEnd - t.loadEventStart; 20 | // //加载耗时 21 | // times.pageloadtime = t.loadEventEnd - t.navigationStart; 22 | // //【重要】解析 DOM 树结构的时间 23 | // //【原因】反省下你的 DOM 树嵌套是不是太多了！ 24 | // times.domReady = t.domContentLoadedEventEnd - t.domContentLoadedEventStart; 25 | 26 | // //【重要】重定向的时间 27 | // //【原因】拒绝重定向！比如，http://example.com/ 就不该写成 http://example.com 28 | // times.redirect = t.redirectEnd - t.redirectStart; 29 | 30 | // //【重要】DNS 查询时间 31 | // //【原因】DNS 预加载做了么？页面内是不是使用了太多不同的域名导致域名查询的时间太长？ 32 | // // 可使用 HTML5 Prefetch 预查询 DNS ，见：[HTML5 prefetch](http://segmentfault.com/a/1190000000633364) 33 | // times.lookupDomain = t.domainLookupEnd - t.domainLookupStart; 34 | 35 | // //【重要】读取页面第一个字节的时间 36 | // //【原因】这可以理解为用户拿到你的资源占用的时间，加异地机房了么，加CDN 处理了么？加带宽了么？加 CPU 运算速度了么？ 37 | // // TTFB 即 Time To First Byte 的意思 38 | // // 维基百科：https://en.wikipedia.org/wiki/Time_To_First_Byte 39 | // times.ttfb = t.responseStart - t.navigationStart; 40 | 41 | // //【重要】内容加载完成的时间 42 | // //【原因】页面内容经过 gzip 压缩了么，静态资源 css/js 等压缩了么？ 43 | // times.request = t.responseEnd - t.requestStart; 44 | 45 | // //【重要】执行 onload 回调函数的时间 46 | // //【原因】是否太多不必要的操作都放到 onload 回调函数里执行了，考虑过延迟加载、按需加载的策略么？ 47 | // times.loadEvent = t.loadEventEnd - t.loadEventStart; 48 | 49 | // // DNS 缓存时间 50 | // times.appcache = t.domainLookupStart - t.fetchStart; 51 | 52 | // // 卸载页面的时间 53 | // times.unloadEvent = t.unloadEventEnd - t.unloadEventStart; 54 | 55 | // // TCP 建立连接完成握手的时间 56 | // times.connect = t.connectEnd - t.connectStart; 57 | // console.log('当前网络加载时间:',(performance.now() / 1000).toFixed(2), '秒') 58 | 59 | // return times; 60 | // } 61 | // getPerformanceTiming() 62 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require ('path'); 2 | const theme = require (path.join (__dirname, '/package.json')).theme; 3 | const HtmlWebpackPlugin = require ('html-webpack-plugin'); //html 4 | const MiniCssExtractPlugin = require ('mini-css-extract-plugin'); //css压缩 5 | const UglifyJsPlugin = require ('uglifyjs-webpack-plugin'); //多线程压缩 6 | const ExtendedDefinePlugin = require ('extended-define-webpack-plugin'); //全局变量 7 | const CleanWebpackPlugin = require ('clean-webpack-plugin'); //清空 8 | const CopyWebpackPlugin = require ('copy-webpack-plugin'); //复制静态html 9 | const webpack = require ('webpack'); 10 | const BundleAnalyzerPlugin = require ('webpack-bundle-analyzer') 11 | .BundleAnalyzerPlugin; //视图分析webpack情况 12 | 13 | const HappyPack = require ('happypack'); //多线程运行 14 | var happyThreadPool = HappyPack.ThreadPool ({size: 4}); 15 | const devtool = { 16 | dev: 'cheap-eval-source-map', 17 | development: 'cheap-eval-source-map', 18 | production: 'source-map', 19 | }; 20 | const PORT = 8000; 21 | const publicPath = { 22 | dev: './', 23 | development: '/', 24 | production: './', 25 | }; 26 | 27 | const minimize = { 28 | dev: false, 29 | development: false, 30 | production: true, 31 | }; 32 | const stylus = { 33 | dev: ['cache-loader', 'style-loader', 'css-loader', 'stylus-loader'], 34 | development: ['style-loader', 'css-loader', 'stylus-loader'], 35 | production: [ 36 | {loader: MiniCssExtractPlugin.loader}, 37 | { 38 | loader: 'css-loader', 39 | options: { 40 | minimize: true, //压缩 41 | sourceMap: true, 42 | }, 43 | }, 44 | {loader: 'stylus-loader'}, 45 | ], 46 | }; 47 | 48 | /** 49 | * 公共插件 50 | */ 51 | const pluginsPublic = [ 52 | new HtmlWebpackPlugin ({ 53 | template: `${__dirname}/src/index.html`, //源html 54 | inject: 'body', //注入到哪里 55 | filename: 'index.html', //输出后的名称 56 | hash: true, //为静态资源生成hash值 57 | showErrors: true, 58 | }), 59 | new BundleAnalyzerPlugin ({ 60 | //另外一种方式 61 | analyzerMode: 'server', 62 | analyzerHost: '127.0.0.1', 63 | analyzerPort: 8889, 64 | reportFilename: 'report.html', 65 | defaultSizes: 'parsed', 66 | openAnalyzer: true, 67 | generateStatsFile: false, 68 | statsFilename: 'stats.json', 69 | statsOptions: null, 70 | logLevel: 'info', 71 | }), 72 | new MiniCssExtractPlugin ({ 73 | chunkFilename: '[chunkhash].css', 74 | }), 75 | new HappyPack ({ 76 | //多线程运行 默认是电脑核数-1 77 | id: 'babel', //对于loaders id 78 | loaders: ['cache-loader', 'babel-loader?cacheDirectory'], //是用babel-loader解析 79 | threadPool: happyThreadPool, 80 | verboseWhenProfiling: true, //显示信息 81 | }), 82 | ]; 83 | /** 84 | * 公共打包插件 85 | */ 86 | const pluginsBuild = [ 87 | new ExtendedDefinePlugin ({ 88 | //全局变量 89 | __LOCAL__: false, 90 | }), 91 | new CleanWebpackPlugin (['dist'], { 92 | root: __dirname, 93 | }), 94 | new CopyWebpackPlugin ([ 95 | {from: 'dll/Dll.js', to: path.resolve (__dirname, 'dist')}, 96 | ]), 97 | new webpack.HashedModuleIdsPlugin (), 98 | new webpack.DllReferencePlugin ({ 99 | context: __dirname, 100 | manifest: require ('./dll/manifest.json'), 101 | }), 102 | ]; 103 | 104 | const plugins = { 105 | dev: [].concat (pluginsPublic, pluginsBuild), 106 | development: [].concat ( 107 | pluginsPublic, 108 | new ExtendedDefinePlugin ({ 109 | //全局变量 110 | __LOCAL__: true, 111 | }) 112 | ), 113 | production: [].concat ( 114 | pluginsPublic, 115 | pluginsBuild, 116 | new UglifyJsPlugin ({ 117 | // sourceMap: true, 118 | parallel: true, 119 | cache: true, 120 | uglifyOptions: { 121 | output: { 122 | comments: false, 123 | beautify: false, 124 | }, 125 | compress: { 126 | drop_console: true, 127 | warnings: false, 128 | drop_debugger: true, 129 | }, 130 | }, 131 | exclude: /(node_modules|bower_components)/, 132 | }) //压缩，生成map 133 | ), 134 | }; 135 | 136 | module.exports = (env, argv) => { 137 | const dev = env.dev; 138 | return { 139 | devServer: { 140 | compress: true, //开发服务器是否启动gzip等压缩 141 | port: PORT, //端口 142 | historyApiFallback: true, //不会出现404页面，避免找不到 143 | }, 144 | devtool: devtool[dev], //cheap-eval-source-map 是一种比较快捷的map,没有映射列 145 | performance: { 146 | maxEntrypointSize: 250000, //入口文件大小，性能指示 147 | maxAssetSize: 250000, //生成的最大文件 148 | hints: 'warning', //依赖过大是否错误提示 149 | }, 150 | entry: { 151 | //入口 152 | index: './src/index.js', 153 | }, 154 | output: { 155 | //出口 156 | path: path.resolve (__dirname, 'dist'), //出口路径 157 | chunkFilename: '[name]-[hash].js', 158 | filename: '[name].js', 159 | publicPath: publicPath[dev], //公共路径 160 | }, 161 | resolve: { 162 | mainFields: ['main', 'jsnext:main', 'browser'], //npm读取先后方式 jsnext:main 是采用es6模块写法 163 | alias: { 164 | //快捷入口 165 | api: path.resolve (__dirname, 'src/api'), 166 | components: path.resolve (__dirname, 'src/components/'), 167 | pages: path.resolve (__dirname, 'src/pages/'), 168 | styles: path.resolve (__dirname, 'src/styles/'), 169 | lib: path.resolve (__dirname, 'src/lib/'), 170 | util: path.resolve (__dirname, 'src/lib/util/'), 171 | server: path.resolve (__dirname, 'src/lib/server'), 172 | svg: path.resolve (__dirname, 'src/images/svg/'), 173 | images: path.resolve (__dirname, 'src/images'), 174 | react: path.resolve (__dirname, 'node_modules/react/'), 175 | 'react-dom': path.resolve (__dirname, 'node_modules/react-dom'), 176 | 'react-redux': path.resolve ( 177 | __dirname, 178 | 'node_modules/react-redux/lib/index.js' 179 | ), 180 | img: path.resolve (__dirname, 'src/images'), 181 | }, 182 | }, 183 | module: { 184 | noParse: /node_modules\/(moment|chart\.js)/, //不解析 185 | rules: [ 186 | { 187 | test: /\.(js|jsx)$/, 188 | exclude: /(node_modules|bower_components)/, //排除 189 | include: [path.resolve (__dirname, 'src')], //包括 190 | loader: 'happypack/loader?id=babel', 191 | }, 192 | { 193 | test: /\.css$/, 194 | use: [ 195 | {loader: MiniCssExtractPlugin.loader}, 196 | { 197 | loader: 'css-loader', 198 | options: { 199 | minimize: minimize[dev], //压缩 200 | sourceMap: minimize[dev], 201 | }, 202 | }, 203 | ], 204 | }, 205 | { 206 | test: /\.(html)$/, 207 | use: { 208 | loader: 'html-loader', 209 | options: { 210 | attrs: [':data-src'], //为了做图片懒加载，那些属性需要被，制定什么属性被该loader解析 211 | minimize: false, 212 | }, 213 | }, 214 | }, 215 | { 216 | test: /\.(png|jpg|gif|jpeg|ttf|svg)$/, 217 | exclude: /(node_modules|bower_components)/, 218 | include: [path.resolve (__dirname, 'src/images')], 219 | use: [ 220 | { 221 | loader: 'url-loader?limit=8024', //limit 图片大小的衡量，进行base64处理 222 | options: { 223 | name: '[path][name].[ext]', 224 | }, 225 | }, 226 | ], 227 | }, 228 | { 229 | test: /\.styl/, 230 | exclude: /(node_modules|bower_components)/, 231 | include: [path.resolve (__dirname, 'src')], 232 | use: stylus[dev], 233 | }, 234 | { 235 | test: /\.less/, 236 | use: [ 237 | {loader: MiniCssExtractPlugin.loader}, 238 | 239 | { 240 | loader: 'css-loader', 241 | options: { 242 | minimize: minimize[dev], //压缩 243 | sourceMap: minimize[dev], 244 | }, 245 | }, 246 | {loader: 'less-loader', options: {modifyVars: theme}}, 247 | ], 248 | }, 249 | ], 250 | }, 251 | plugins: plugins[dev], 252 | }; 253 | }; 254 | -------------------------------------------------------------------------------- /webpack.dll.config.js: -------------------------------------------------------------------------------- 1 | const path = require ('path'), fs = require ('fs'), webpack = require ('webpack'); 2 | 3 | const vendors = [ 4 | 'react', 5 | 'react-dom', 6 | 'axios', 7 | 'react-loadable', 8 | 'react-router', 9 | 'react-router-dom', 10 | 'querystring', 11 | ]; 12 | 13 | module.exports = { 14 | entry: { 15 | vendor: vendors, 16 | }, 17 | output: { 18 | path: path.resolve (__dirname, 'dll'), 19 | filename: 'Dll.js', 20 | library: '[name]_[hash]', 21 | }, 22 | plugins: [ 23 | new webpack.DllPlugin ({ 24 | path: path.resolve (__dirname, 'dll', 'manifest.json'), 25 | name: '[name]_[hash]', 26 | context: __dirname, 27 | }), 28 | ], 29 | }; 30 | --------------------------------------------------------------------------------