├── .browserslistrc ├── .eslintrc.js ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ ├── icon │ │ ├── demo.css │ │ ├── demo_index.html │ │ ├── iconfont.css │ │ ├── iconfont.eot │ │ ├── iconfont.js │ │ ├── iconfont.svg │ │ ├── iconfont.ttf │ │ ├── iconfont.woff │ │ └── iconfont.woff2 │ └── logo.png ├── data │ ├── constData.js │ └── menu.js ├── main.js ├── router.js ├── store.js └── views │ ├── admin │ ├── college │ │ └── adminCollege.vue │ ├── examine │ │ └── adminExamine.vue │ ├── home │ │ └── adminHome.vue │ ├── notice │ │ └── adminNotice.vue │ ├── plan │ │ └── adminPlan.vue │ ├── room │ │ └── adminRoom.vue │ ├── teacher │ │ └── adminTeacher.vue │ └── work │ │ └── adminWork.vue │ ├── college │ ├── course │ │ └── collegeCourse.vue │ ├── home │ │ └── collegeHome.vue │ ├── notice │ │ └── collegeNotice.vue │ ├── plan │ │ └── collegePlan.vue │ └── work │ │ └── collegeWork.vue │ ├── home.vue │ ├── login.vue │ └── teacher │ ├── home │ └── teacherHome.vue │ ├── notice │ └── teacherNotice.vue │ ├── plan │ └── teacherPlan.vue │ └── work │ └── teacherWork.vue └── vue.config.js /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | 'extends': [ 7 | 'plugin:vue/essential', 8 | 'eslint:recommended' 9 | ], 10 | rules: { 11 | 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 12 | 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' 13 | }, 14 | parserOptions: { 15 | parser: 'babel-eslint' 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw* 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-element-grade 2 | 3 | ## 框架简介 4 | 5 | #### 底层架构：vue+vue-router+vuex+elementUI+vueCLI3.x 6 | #### 适用于快速生成任何多级权限的管理系统界面以及初始的交互系统，上手十分简单，初学者秒懂的基础框架结构 7 | 8 | ## PC管理系统预览地址 9 | 10 | http://grade.stacktang.cn 11 | 12 | 13 | 14 | ## Project setup 15 | ``` 16 | npm install 17 | ``` 18 | 19 | ### Compiles and hot-reloads for development 20 | ``` 21 | npm run serve 22 | ``` 23 | 24 | ### Compiles and minifies for production 25 | ``` 26 | npm run build 27 | ``` 28 | 29 | ### Run your tests 30 | ``` 31 | npm run test 32 | ``` 33 | 34 | ### Lints and fixes files 35 | ``` 36 | npm run lint 37 | ``` 38 | 39 | ### Customize configuration 40 | See [Configuration Reference](https://cli.vuejs.org/config/). 41 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "course", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "ahaapi": "^3.0.0", 12 | "core-js": "^2.6.5", 13 | "element-ui": "^2.7.2", 14 | "vue": "^2.6.6", 15 | "vue-router": "^3.0.1", 16 | "vuex": "^3.0.1" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^3.5.5", 20 | "@vue/cli-plugin-eslint": "^3.5.1", 21 | "@vue/cli-service": "^3.5.3", 22 | "babel-eslint": "^10.0.1", 23 | "eslint": "^5.8.0", 24 | "eslint-plugin-vue": "^5.0.0", 25 | "node-sass": "^4.9.0", 26 | "sass-loader": "^7.1.0", 27 | "vue-template-compiler": "^2.5.21" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cometang/vue-element-grade/e1da2943a281748e52972a8837d718108c517b96/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | course 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 30 | -------------------------------------------------------------------------------- /src/assets/icon/demo.css: -------------------------------------------------------------------------------- 1 | /* Logo 字体 */ 2 | @font-face { 3 | font-family: "iconfont logo"; 4 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); 5 | src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), 6 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), 7 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), 8 | url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); 9 | } 10 | 11 | .logo { 12 | font-family: "iconfont logo"; 13 | font-size: 160px; 14 | font-style: normal; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | /* tabs */ 20 | .nav-tabs { 21 | position: relative; 22 | } 23 | 24 | .nav-tabs .nav-more { 25 | position: absolute; 26 | right: 0; 27 | bottom: 0; 28 | height: 42px; 29 | line-height: 42px; 30 | color: #666; 31 | } 32 | 33 | #tabs { 34 | border-bottom: 1px solid #eee; 35 | } 36 | 37 | #tabs li { 38 | cursor: pointer; 39 | width: 100px; 40 | height: 40px; 41 | line-height: 40px; 42 | text-align: center; 43 | font-size: 16px; 44 | border-bottom: 2px solid transparent; 45 | position: relative; 46 | z-index: 1; 47 | margin-bottom: -1px; 48 | color: #666; 49 | } 50 | 51 | 52 | #tabs .active { 53 | border-bottom-color: #f00; 54 | color: #222; 55 | } 56 | 57 | .tab-container .content { 58 | display: none; 59 | } 60 | 61 | /* 页面布局 */ 62 | .main { 63 | padding: 30px 100px; 64 | width: 960px; 65 | margin: 0 auto; 66 | } 67 | 68 | .main .logo { 69 | color: #333; 70 | text-align: left; 71 | margin-bottom: 30px; 72 | line-height: 1; 73 | height: 110px; 74 | margin-top: -50px; 75 | overflow: hidden; 76 | *zoom: 1; 77 | } 78 | 79 | .main .logo a { 80 | font-size: 160px; 81 | color: #333; 82 | } 83 | 84 | .helps { 85 | margin-top: 40px; 86 | } 87 | 88 | .helps pre { 89 | padding: 20px; 90 | margin: 10px 0; 91 | border: solid 1px #e7e1cd; 92 | background-color: #fffdef; 93 | overflow: auto; 94 | } 95 | 96 | .icon_lists { 97 | width: 100% !important; 98 | overflow: hidden; 99 | *zoom: 1; 100 | } 101 | 102 | .icon_lists li { 103 | width: 100px; 104 | margin-bottom: 10px; 105 | margin-right: 20px; 106 | text-align: center; 107 | list-style: none !important; 108 | cursor: default; 109 | } 110 | 111 | .icon_lists li .code-name { 112 | line-height: 1.2; 113 | } 114 | 115 | .icon_lists .icon { 116 | display: block; 117 | height: 100px; 118 | line-height: 100px; 119 | font-size: 42px; 120 | margin: 10px auto; 121 | color: #333; 122 | -webkit-transition: font-size 0.25s linear, width 0.25s linear; 123 | -moz-transition: font-size 0.25s linear, width 0.25s linear; 124 | transition: font-size 0.25s linear, width 0.25s linear; 125 | } 126 | 127 | .icon_lists .icon:hover { 128 | font-size: 100px; 129 | } 130 | 131 | .icon_lists .svg-icon { 132 | /* 通过设置 font-size 来改变图标大小 */ 133 | width: 1em; 134 | /* 图标和文字相邻时，垂直对齐 */ 135 | vertical-align: -0.15em; 136 | /* 通过设置 color 来改变 SVG 的颜色/fill */ 137 | fill: currentColor; 138 | /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 139 | normalize.css 中也包含这行 */ 140 | overflow: hidden; 141 | } 142 | 143 | .icon_lists li .name, 144 | .icon_lists li .code-name { 145 | color: #666; 146 | } 147 | 148 | /* markdown 样式 */ 149 | .markdown { 150 | color: #666; 151 | font-size: 14px; 152 | line-height: 1.8; 153 | } 154 | 155 | .highlight { 156 | line-height: 1.5; 157 | } 158 | 159 | .markdown img { 160 | vertical-align: middle; 161 | max-width: 100%; 162 | } 163 | 164 | .markdown h1 { 165 | color: #404040; 166 | font-weight: 500; 167 | line-height: 40px; 168 | margin-bottom: 24px; 169 | } 170 | 171 | .markdown h2, 172 | .markdown h3, 173 | .markdown h4, 174 | .markdown h5, 175 | .markdown h6 { 176 | color: #404040; 177 | margin: 1.6em 0 0.6em 0; 178 | font-weight: 500; 179 | clear: both; 180 | } 181 | 182 | .markdown h1 { 183 | font-size: 28px; 184 | } 185 | 186 | .markdown h2 { 187 | font-size: 22px; 188 | } 189 | 190 | .markdown h3 { 191 | font-size: 16px; 192 | } 193 | 194 | .markdown h4 { 195 | font-size: 14px; 196 | } 197 | 198 | .markdown h5 { 199 | font-size: 12px; 200 | } 201 | 202 | .markdown h6 { 203 | font-size: 12px; 204 | } 205 | 206 | .markdown hr { 207 | height: 1px; 208 | border: 0; 209 | background: #e9e9e9; 210 | margin: 16px 0; 211 | clear: both; 212 | } 213 | 214 | .markdown p { 215 | margin: 1em 0; 216 | } 217 | 218 | .markdown>p, 219 | .markdown>blockquote, 220 | .markdown>.highlight, 221 | .markdown>ol, 222 | .markdown>ul { 223 | width: 80%; 224 | } 225 | 226 | .markdown ul>li { 227 | list-style: circle; 228 | } 229 | 230 | .markdown>ul li, 231 | .markdown blockquote ul>li { 232 | margin-left: 20px; 233 | padding-left: 4px; 234 | } 235 | 236 | .markdown>ul li p, 237 | .markdown>ol li p { 238 | margin: 0.6em 0; 239 | } 240 | 241 | .markdown ol>li { 242 | list-style: decimal; 243 | } 244 | 245 | .markdown>ol li, 246 | .markdown blockquote ol>li { 247 | margin-left: 20px; 248 | padding-left: 4px; 249 | } 250 | 251 | .markdown code { 252 | margin: 0 3px; 253 | padding: 0 5px; 254 | background: #eee; 255 | border-radius: 3px; 256 | } 257 | 258 | .markdown strong, 259 | .markdown b { 260 | font-weight: 600; 261 | } 262 | 263 | .markdown>table { 264 | border-collapse: collapse; 265 | border-spacing: 0px; 266 | empty-cells: show; 267 | border: 1px solid #e9e9e9; 268 | width: 95%; 269 | margin-bottom: 24px; 270 | } 271 | 272 | .markdown>table th { 273 | white-space: nowrap; 274 | color: #333; 275 | font-weight: 600; 276 | } 277 | 278 | .markdown>table th, 279 | .markdown>table td { 280 | border: 1px solid #e9e9e9; 281 | padding: 8px 16px; 282 | text-align: left; 283 | } 284 | 285 | .markdown>table th { 286 | background: #F7F7F7; 287 | } 288 | 289 | .markdown blockquote { 290 | font-size: 90%; 291 | color: #999; 292 | border-left: 4px solid #e9e9e9; 293 | padding-left: 0.8em; 294 | margin: 1em 0; 295 | } 296 | 297 | .markdown blockquote p { 298 | margin: 0; 299 | } 300 | 301 | .markdown .anchor { 302 | opacity: 0; 303 | transition: opacity 0.3s ease; 304 | margin-left: 8px; 305 | } 306 | 307 | .markdown .waiting { 308 | color: #ccc; 309 | } 310 | 311 | .markdown h1:hover .anchor, 312 | .markdown h2:hover .anchor, 313 | .markdown h3:hover .anchor, 314 | .markdown h4:hover .anchor, 315 | .markdown h5:hover .anchor, 316 | .markdown h6:hover .anchor { 317 | opacity: 1; 318 | display: inline-block; 319 | } 320 | 321 | .markdown>br, 322 | .markdown>p>br { 323 | clear: both; 324 | } 325 | 326 | 327 | .hljs { 328 | display: block; 329 | background: white; 330 | padding: 0.5em; 331 | color: #333333; 332 | overflow-x: auto; 333 | } 334 | 335 | .hljs-comment, 336 | .hljs-meta { 337 | color: #969896; 338 | } 339 | 340 | .hljs-string, 341 | .hljs-variable, 342 | .hljs-template-variable, 343 | .hljs-strong, 344 | .hljs-emphasis, 345 | .hljs-quote { 346 | color: #df5000; 347 | } 348 | 349 | .hljs-keyword, 350 | .hljs-selector-tag, 351 | .hljs-type { 352 | color: #a71d5d; 353 | } 354 | 355 | .hljs-literal, 356 | .hljs-symbol, 357 | .hljs-bullet, 358 | .hljs-attribute { 359 | color: #0086b3; 360 | } 361 | 362 | .hljs-section, 363 | .hljs-name { 364 | color: #63a35c; 365 | } 366 | 367 | .hljs-tag { 368 | color: #333333; 369 | } 370 | 371 | .hljs-title, 372 | .hljs-attr, 373 | .hljs-selector-id, 374 | .hljs-selector-class, 375 | .hljs-selector-attr, 376 | .hljs-selector-pseudo { 377 | color: #795da3; 378 | } 379 | 380 | .hljs-addition { 381 | color: #55a532; 382 | background-color: #eaffea; 383 | } 384 | 385 | .hljs-deletion { 386 | color: #bd2c00; 387 | background-color: #ffecec; 388 | } 389 | 390 | .hljs-link { 391 | text-decoration: underline; 392 | } 393 | 394 | /* 代码高亮 */ 395 | /* PrismJS 1.15.0 396 | https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ 397 | /** 398 | * prism.js default theme for JavaScript, CSS and HTML 399 | * Based on dabblet (http://dabblet.com) 400 | * @author Lea Verou 401 | */ 402 | code[class*="language-"], 403 | pre[class*="language-"] { 404 | color: black; 405 | background: none; 406 | text-shadow: 0 1px white; 407 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 408 | text-align: left; 409 | white-space: pre; 410 | word-spacing: normal; 411 | word-break: normal; 412 | word-wrap: normal; 413 | line-height: 1.5; 414 | 415 | -moz-tab-size: 4; 416 | -o-tab-size: 4; 417 | tab-size: 4; 418 | 419 | -webkit-hyphens: none; 420 | -moz-hyphens: none; 421 | -ms-hyphens: none; 422 | hyphens: none; 423 | } 424 | 425 | pre[class*="language-"]::-moz-selection, 426 | pre[class*="language-"] ::-moz-selection, 427 | code[class*="language-"]::-moz-selection, 428 | code[class*="language-"] ::-moz-selection { 429 | text-shadow: none; 430 | background: #b3d4fc; 431 | } 432 | 433 | pre[class*="language-"]::selection, 434 | pre[class*="language-"] ::selection, 435 | code[class*="language-"]::selection, 436 | code[class*="language-"] ::selection { 437 | text-shadow: none; 438 | background: #b3d4fc; 439 | } 440 | 441 | @media print { 442 | 443 | code[class*="language-"], 444 | pre[class*="language-"] { 445 | text-shadow: none; 446 | } 447 | } 448 | 449 | /* Code blocks */ 450 | pre[class*="language-"] { 451 | padding: 1em; 452 | margin: .5em 0; 453 | overflow: auto; 454 | } 455 | 456 | :not(pre)>code[class*="language-"], 457 | pre[class*="language-"] { 458 | background: #f5f2f0; 459 | } 460 | 461 | /* Inline code */ 462 | :not(pre)>code[class*="language-"] { 463 | padding: .1em; 464 | border-radius: .3em; 465 | white-space: normal; 466 | } 467 | 468 | .token.comment, 469 | .token.prolog, 470 | .token.doctype, 471 | .token.cdata { 472 | color: slategray; 473 | } 474 | 475 | .token.punctuation { 476 | color: #999; 477 | } 478 | 479 | .namespace { 480 | opacity: .7; 481 | } 482 | 483 | .token.property, 484 | .token.tag, 485 | .token.boolean, 486 | .token.number, 487 | .token.constant, 488 | .token.symbol, 489 | .token.deleted { 490 | color: #905; 491 | } 492 | 493 | .token.selector, 494 | .token.attr-name, 495 | .token.string, 496 | .token.char, 497 | .token.builtin, 498 | .token.inserted { 499 | color: #690; 500 | } 501 | 502 | .token.operator, 503 | .token.entity, 504 | .token.url, 505 | .language-css .token.string, 506 | .style .token.string { 507 | color: #9a6e3a; 508 | background: hsla(0, 0%, 100%, .5); 509 | } 510 | 511 | .token.atrule, 512 | .token.attr-value, 513 | .token.keyword { 514 | color: #07a; 515 | } 516 | 517 | .token.function, 518 | .token.class-name { 519 | color: #DD4A68; 520 | } 521 | 522 | .token.regex, 523 | .token.important, 524 | .token.variable { 525 | color: #e90; 526 | } 527 | 528 | .token.important, 529 | .token.bold { 530 | font-weight: bold; 531 | } 532 | 533 | .token.italic { 534 | font-style: italic; 535 | } 536 | 537 | .token.entity { 538 | cursor: help; 539 | } 540 | -------------------------------------------------------------------------------- /src/assets/icon/demo_index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IconFont Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 |

19 |
20 | 25 | 26 | 查看项目 27 | 28 |
29 |
30 |
31 |
    32 | 33 |
  • 34 | 35 |
    user
    36 |
    &#xec52;
    37 |
    • 38 | 39 |
  • 40 | 41 |
    修改
    42 |
    &#xe602;
    43 |
    • 44 | 45 |
  • 46 | 47 |
    记录
    48 |
    &#xe61f;
    49 |
    • 50 | 51 |
  • 52 | 53 |
    记录
    54 |
    &#xe611;
    55 |
    • 56 | 57 |
  • 58 | 59 |
    首页
    60 |
    &#xe653;
    61 |
    • 62 | 63 |
  • 64 | 65 |
    908菜单_安排
    66 |
    &#xe683;
    67 |
    • 68 | 69 |
  • 70 | 71 |
    增加
    72 |
    &#xe613;
    73 |
    • 74 | 75 |
  • 76 | 77 |
    下一页
    78 |
    &#xe699;
    79 |
    • 80 | 81 |
  • 82 | 83 |
    新建表格
    84 |
    &#xe6b6;
    85 |
    • 86 | 87 |
  • 88 | 89 |
    上一页
    90 |
    &#xe63a;
    91 |
    • 92 | 93 |
  • 94 | 95 |
    删除
    96 |
    &#xe62a;
    97 |
    • 98 | 99 |
  • 100 | 101 |
    调整
    102 |
    &#xe60e;
    103 |
    • 104 | 105 |
  • 106 | 107 |
    修改
    108 |
    &#xe698;
    109 |
    • 110 | 111 |
  • 112 | 113 |
    记录
    114 |
    &#xe61c;
    115 |
    • 116 | 117 |
  • 118 | 119 |
    管理
    120 |
    &#xe6a3;
    121 |
    • 122 | 123 |
  • 124 | 125 |
    管理1
    126 |
    &#xe6a4;
    127 |
    • 128 | 129 |
  • 130 | 131 |
    通知
    132 |
    &#xe61d;
    133 |
    • 134 | 135 |
  • 136 | 137 |
    统计
    138 |
    &#xe878;
    139 |
    • 140 | 141 |
  • 142 | 143 |
    通知
    144 |
    &#xe648;
    145 |
    • 146 | 147 |
  • 148 | 149 |
    首页小工作量
    150 |
    &#xe61e;
    151 |
    • 152 | 153 |
  • 154 | 155 |
    眼睛_开
    156 |
    &#xe61b;
    157 |
    • 158 | 159 |
  • 160 | 161 |
    密码
    162 |
    &#xe62e;
    163 |
    • 164 | 165 |
  • 166 | 167 |
    学院配置
    168 |
    &#xe672;
    169 |
    • 170 | 171 |
  • 172 | 173 |
    眼睛_闭
    174 |
    &#xe601;
    175 |
    • 176 | 177 |
  • 178 | 179 |
    增加2
    180 |
    &#xe687;
    181 |
    • 182 | 183 |
184 |
185 |

Unicode 引用

186 |
187 | 188 |

Unicode 是字体在网页端最原始的应用方式，特点是：

189 |
    190 |
  • 兼容性最好，支持 IE6+，及所有现代浏览器。
    • 191 |
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • 192 |
  • 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
    • 193 |
194 |
195 |

注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式

196 |
197 |

Unicode 使用步骤如下：

198 |

第一步：拷贝项目下面生成的 @font-face

199 | 
@font-face {
201 |   font-family: 'iconfont';
202 |   src: url('iconfont.eot');
203 |   src: url('iconfont.eot?#iefix') format('embedded-opentype'),
204 |       url('iconfont.woff2') format('woff2'),
205 |       url('iconfont.woff') format('woff'),
206 |       url('iconfont.ttf') format('truetype'),
207 |       url('iconfont.svg#iconfont') format('svg');
208 | }
209 |
210 |

第二步：定义使用 iconfont 的样式

211 | 
.iconfont {
213 |   font-family: "iconfont" !important;
214 |   font-size: 16px;
215 |   font-style: normal;
216 |   -webkit-font-smoothing: antialiased;
217 |   -moz-osx-font-smoothing: grayscale;
218 | }
219 |
220 |

第三步：挑选相应图标并获取字体编码，应用于页面

221 | 
222 | <span class="iconfont">&#x33;</span>
224 |
225 |
226 |

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

227 |
228 |
229 |
230 |
231 |
    232 | 233 |
  • 234 | 235 |
    236 | user 237 |
    238 |
    .course_user 239 |
    240 |
    • 241 | 242 |
  • 243 | 244 |
    245 | 修改 246 |
    247 |
    .course_xiugai 248 |
    249 |
    • 250 | 251 |
  • 252 | 253 |
    254 | 记录 255 |
    256 |
    .course_jilu 257 |
    258 |
    • 259 | 260 |
  • 261 | 262 |
    263 | 记录 264 |
    265 |
    .course_06 266 |
    267 |
    • 268 | 269 |
  • 270 | 271 |
    272 | 首页 273 |
    274 |
    .course_shouye 275 |
    276 |
    • 277 | 278 |
  • 279 | 280 |
    281 | 908菜单_安排 282 |
    283 |
    .course_908caidan_anpai 284 |
    285 |
    • 286 | 287 |
  • 288 | 289 |
    290 | 增加 291 |
    292 |
    .course_zengjia 293 |
    294 |
    • 295 | 296 |
  • 297 | 298 |
    299 | 下一页 300 |
    301 |
    .course_xiayiye 302 |
    303 |
    • 304 | 305 |
  • 306 | 307 |
    308 | 新建表格 309 |
    310 |
    .course_xinjianbiaoge 311 |
    312 |
    • 313 | 314 |
  • 315 | 316 |
    317 | 上一页 318 |
    319 |
    .course_shangyiye 320 |
    321 |
    • 322 | 323 |
  • 324 | 325 |
    326 | 删除 327 |
    328 |
    .course_shanchu 329 |
    330 |
    • 331 | 332 |
  • 333 | 334 |
    335 | 调整 336 |
    337 |
    .course_tiaozheng 338 |
    339 |
    • 340 | 341 |
  • 342 | 343 |
    344 | 修改 345 |
    346 |
    .course_xiugai1 347 |
    348 |
    • 349 | 350 |
  • 351 | 352 |
    353 | 记录 354 |
    355 |
    .course_jiludanzilishijilu 356 |
    357 |
    • 358 | 359 |
  • 360 | 361 |
    362 | 管理 363 |
    364 |
    .course_guanli 365 |
    366 |
    • 367 | 368 |
  • 369 | 370 |
    371 | 管理1 372 |
    373 |
    .course_guanli1 374 |
    375 |
    • 376 | 377 |
  • 378 | 379 |
    380 | 通知 381 |
    382 |
    .course_tongzhi 383 |
    384 |
    • 385 | 386 |
  • 387 | 388 |
    389 | 统计 390 |
    391 |
    .course_tongji 392 |
    393 |
    • 394 | 395 |
  • 396 | 397 |
    398 | 通知 399 |
    400 |
    .course_tongzhi1 401 |
    402 |
    • 403 | 404 |
  • 405 | 406 |
    407 | 首页小工作量 408 |
    409 |
    .course__zhuanzhengongzuoliang 410 |
    411 |
    • 412 | 413 |
  • 414 | 415 |
    416 | 眼睛_开 417 |
    418 |
    .course_yanjing_kai 419 |
    420 |
    • 421 | 422 |
  • 423 | 424 |
    425 | 密码 426 |
    427 |
    .course_ziyuanxhdpi 428 |
    429 |
    • 430 | 431 |
  • 432 | 433 |
    434 | 学院配置 435 |
    436 |
    .course_xueyuanpeizhi 437 |
    438 |
    • 439 | 440 |
  • 441 | 442 |
    443 | 眼睛_闭 444 |
    445 |
    .course_yanjing_bi 446 |
    447 |
    • 448 | 449 |
  • 450 | 451 |
    452 | 增加2 453 |
    454 |
    .course_zengjia1 455 |
    456 |
    • 457 | 458 |
459 |
460 |

font-class 引用

461 |
462 | 463 |

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

464 |

与 Unicode 使用方式相比，具有如下特点：

465 |
    466 |
  • 兼容性良好，支持 IE8+，及所有现代浏览器。
    • 467 |
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • 468 |
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • 469 |
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
    • 470 |
471 |

使用步骤如下：

472 |

第一步：引入项目下面生成的 fontclass 代码：

473 | 
<link rel="stylesheet" href="./iconfont.css">
474 |
475 |

第二步：挑选相应图标并获取类名，应用于页面：

476 | 
<span class="iconfont course_xxx"></span>
477 |
478 |
479 |

" 480 | iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

481 |
482 |
483 |
484 |
485 |
    486 | 487 |
  • 488 | 491 |
    user
    492 |
    #course_user
    493 |
    • 494 | 495 |
  • 496 | 499 |
    修改
    500 |
    #course_xiugai
    501 |
    • 502 | 503 |
  • 504 | 507 |
    记录
    508 |
    #course_jilu
    509 |
    • 510 | 511 |
  • 512 | 515 |
    记录
    516 |
    #course_06
    517 |
    • 518 | 519 |
  • 520 | 523 |
    首页
    524 |
    #course_shouye
    525 |
    • 526 | 527 |
  • 528 | 531 |
    908菜单_安排
    532 |
    #course_908caidan_anpai
    533 |
    • 534 | 535 |
  • 536 | 539 |
    增加
    540 |
    #course_zengjia
    541 |
    • 542 | 543 |
  • 544 | 547 |
    下一页
    548 |
    #course_xiayiye
    549 |
    • 550 | 551 |
  • 552 | 555 |
    新建表格
    556 |
    #course_xinjianbiaoge
    557 |
    • 558 | 559 |
  • 560 | 563 |
    上一页
    564 |
    #course_shangyiye
    565 |
    • 566 | 567 |
  • 568 | 571 |
    删除
    572 |
    #course_shanchu
    573 |
    • 574 | 575 |
  • 576 | 579 |
    调整
    580 |
    #course_tiaozheng
    581 |
    • 582 | 583 |
  • 584 | 587 |
    修改
    588 |
    #course_xiugai1
    589 |
    • 590 | 591 |
  • 592 | 595 |
    记录
    596 |
    #course_jiludanzilishijilu
    597 |
    • 598 | 599 |
  • 600 | 603 |
    管理
    604 |
    #course_guanli
    605 |
    • 606 | 607 |
  • 608 | 611 |
    管理1
    612 |
    #course_guanli1
    613 |
    • 614 | 615 |
  • 616 | 619 |
    通知
    620 |
    #course_tongzhi
    621 |
    • 622 | 623 |
  • 624 | 627 |
    统计
    628 |
    #course_tongji
    629 |
    • 630 | 631 |
  • 632 | 635 |
    通知
    636 |
    #course_tongzhi1
    637 |
    • 638 | 639 |
  • 640 | 643 |
    首页小工作量
    644 |
    #course__zhuanzhengongzuoliang
    645 |
    • 646 | 647 |
  • 648 | 651 |
    眼睛_开
    652 |
    #course_yanjing_kai
    653 |
    • 654 | 655 |
  • 656 | 659 |
    密码
    660 |
    #course_ziyuanxhdpi
    661 |
    • 662 | 663 |
  • 664 | 667 |
    学院配置
    668 |
    #course_xueyuanpeizhi
    669 |
    • 670 | 671 |
  • 672 | 675 |
    眼睛_闭
    676 |
    #course_yanjing_bi
    677 |
    • 678 | 679 |
  • 680 | 683 |
    增加2
    684 |
    #course_zengjia1
    685 |
    • 686 | 687 |
688 |
689 |

Symbol 引用

690 |
691 | 692 |

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 693 | 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

694 |
    695 |
  • 支持多色图标了，不再受单色限制。
    • 696 |
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • 697 |
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • 698 |
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • 699 |
700 |

使用步骤如下：

701 |

第一步：引入项目下面生成的 symbol 代码：

702 | 
<script src="./iconfont.js"></script>
703 |
704 |

第二步：加入通用 CSS 代码（引入一次就行）：

705 | 
<style>
706 | .icon {
707 |   width: 1em;
708 |   height: 1em;
709 |   vertical-align: -0.15em;
710 |   fill: currentColor;
711 |   overflow: hidden;
712 | }
713 | </style>
714 |
715 |

第三步：挑选相应图标并获取类名，应用于页面：

716 | 
<svg class="icon" aria-hidden="true">
717 |   <use xlink:href="#icon-xxx"></use>
718 | </svg>
719 |
720 |
721 |
722 | 723 |
724 |
725 | 744 | 745 | 746 | -------------------------------------------------------------------------------- /src/assets/icon/iconfont.css: -------------------------------------------------------------------------------- 1 | @font-face {font-family: "iconfont"; 2 | src: url('iconfont.eot?t=1554883440096'); /* IE9 */ 3 | src: url('iconfont.eot?t=1554883440096#iefix') format('embedded-opentype'), /* IE6-IE8 */ 4 | url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'), 5 | url('iconfont.woff?t=1554883440096') format('woff'), 6 | url('iconfont.ttf?t=1554883440096') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ 7 | url('iconfont.svg?t=1554883440096#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family: "iconfont" !important; 12 | font-size: 16px; 13 | font-style: normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .course_user:before { 19 | content: "\ec52"; 20 | } 21 | 22 | .course_xiugai:before { 23 | content: "\e602"; 24 | } 25 | 26 | .course_jilu:before { 27 | content: "\e61f"; 28 | } 29 | 30 | .course_06:before { 31 | content: "\e611"; 32 | } 33 | 34 | .course_shouye:before { 35 | content: "\e653"; 36 | } 37 | 38 | .course_908caidan_anpai:before { 39 | content: "\e683"; 40 | } 41 | 42 | .course_zengjia:before { 43 | content: "\e613"; 44 | } 45 | 46 | .course_xiayiye:before { 47 | content: "\e699"; 48 | } 49 | 50 | .course_xinjianbiaoge:before { 51 | content: "\e6b6"; 52 | } 53 | 54 | .course_shangyiye:before { 55 | content: "\e63a"; 56 | } 57 | 58 | .course_shanchu:before { 59 | content: "\e62a"; 60 | } 61 | 62 | .course_tiaozheng:before { 63 | content: "\e60e"; 64 | } 65 | 66 | .course_xiugai1:before { 67 | content: "\e698"; 68 | } 69 | 70 | .course_jiludanzilishijilu:before { 71 | content: "\e61c"; 72 | } 73 | 74 | .course_guanli:before { 75 | content: "\e6a3"; 76 | } 77 | 78 | .course_guanli1:before { 79 | content: "\e6a4"; 80 | } 81 | 82 | .course_tongzhi:before { 83 | content: "\e61d"; 84 | } 85 | 86 | .course_tongji:before { 87 | content: "\e878"; 88 | } 89 | 90 | .course_tongzhi1:before { 91 | content: "\e648"; 92 | } 93 | 94 | .course__zhuanzhengongzuoliang:before { 95 | content: "\e61e"; 96 | } 97 | 98 | .course_yanjing_kai:before { 99 | content: "\e61b"; 100 | } 101 | 102 | .course_ziyuanxhdpi:before { 103 | content: "\e62e"; 104 | } 105 | 106 | .course_xueyuanpeizhi:before { 107 | content: "\e672"; 108 | } 109 | 110 | .course_yanjing_bi:before { 111 | content: "\e601"; 112 | } 113 | 114 | .course_zengjia1:before { 115 | content: "\e687"; 116 | } 117 | 118 | -------------------------------------------------------------------------------- /src/assets/icon/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cometang/vue-element-grade/e1da2943a281748e52972a8837d718108c517b96/src/assets/icon/iconfont.eot -------------------------------------------------------------------------------- /src/assets/icon/iconfont.js: -------------------------------------------------------------------------------- 1 | !function(i){var c,a='',h=(c=document.getElementsByTagName("script"))[c.length-1].getAttribute("data-injectcss");if(h&&!i.__iconfont__svg__cssinject__){i.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}!function(c){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(c,0);else{var h=function(){document.removeEventListener("DOMContentLoaded",h,!1),c()};document.addEventListener("DOMContentLoaded",h,!1)}else document.attachEvent&&(a=c,t=i.document,l=!1,e=function(){l||(l=!0,a())},(o=function(){try{t.documentElement.doScroll("left")}catch(c){return void setTimeout(o,50)}e()})(),t.onreadystatechange=function(){"complete"==t.readyState&&(t.onreadystatechange=null,e())});var a,t,l,e,o}(function(){var c,h;(c=document.createElement("div")).innerHTML=a,a=null,(h=c.getElementsByTagName("svg")[0])&&(h.setAttribute("aria-hidden","true"),h.style.position="absolute",h.style.width=0,h.style.height=0,h.style.overflow="hidden",function(c,h){h.firstChild?function(c,h){h.parentNode.insertBefore(c,h)}(c,h.firstChild):h.appendChild(c)}(h,document.body))})}(window); -------------------------------------------------------------------------------- /src/assets/icon/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | -------------------------------------------------------------------------------- /src/assets/icon/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cometang/vue-element-grade/e1da2943a281748e52972a8837d718108c517b96/src/assets/icon/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/icon/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cometang/vue-element-grade/e1da2943a281748e52972a8837d718108c517b96/src/assets/icon/iconfont.woff -------------------------------------------------------------------------------- /src/assets/icon/iconfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cometang/vue-element-grade/e1da2943a281748e52972a8837d718108c517b96/src/assets/icon/iconfont.woff2 -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cometang/vue-element-grade/e1da2943a281748e52972a8837d718108c517b96/src/assets/logo.png -------------------------------------------------------------------------------- /src/data/constData.js: -------------------------------------------------------------------------------- 1 | 2 | //全局静态常量 3 | 4 | /* 5 | * 权限登录 6 | * @teacher 教师权限 7 | * @admin 校级管理权限 8 | * @college 二级学院管理权限 9 | * */ 10 | const grade={teacher:'0',admin:'1',college:'2'} 11 | 12 | 13 | export default { 14 | grade 15 | } 16 | -------------------------------------------------------------------------------- /src/data/menu.js: -------------------------------------------------------------------------------- 1 | /*左侧导航栏菜单生成的内容*/ 2 | 3 | 4 | //管理员权限菜单 5 | const adminMenu =[ 6 | { 7 | path:'/adminHome', 8 | title:'学校首页', 9 | icon:'course_shouye', 10 | child:[] 11 | }, 12 | { 13 | path:'/adminPlan', 14 | title:'排课管理', 15 | icon:'course_908caidan_anpai', 16 | child:[] 17 | }, 18 | { 19 | path:'/adminCollege', 20 | title:'学院管理', 21 | icon:'course_guanli', 22 | child:[] 23 | }, 24 | { 25 | path:'/adminTeacher', 26 | title:'教师管理', 27 | icon:'course_xueyuanpeizhi', 28 | child:[] 29 | }, 30 | { 31 | path:'/adminRoom', 32 | title:'教室管理', 33 | icon:'course_guanli1', 34 | child:[] 35 | }, 36 | { 37 | path:'/adminExamine', 38 | title:'审核管理', 39 | icon:'course_xiugai1', 40 | child:[] 41 | }, 42 | { 43 | path:'/adminNotice', 44 | title:'通知管理', 45 | icon:'course_tongzhi', 46 | child:[] 47 | }, 48 | { 49 | path:'/adminWork', 50 | title:'工作总量', 51 | icon:'course_tongji', 52 | child:[] 53 | }, 54 | 55 | ] 56 | //二级学院权限菜单 57 | const collegeMenu = [ 58 | { 59 | path:'/collegeHome', 60 | title:'学院首页', 61 | icon:'course_shouye', 62 | child:[] 63 | }, 64 | { 65 | path:'/collegeCourse', 66 | title:'课程大纲', 67 | icon:'course__zhuanzhengongzuoliang', 68 | child:[] 69 | }, 70 | { 71 | path:'/collegeWork', 72 | title:'工作量管理', 73 | icon:'course_guanli1', 74 | child:[] 75 | }, 76 | { 77 | path:'/collegePlan', 78 | title:'排课管理', 79 | icon:'course_908caidan_anpai', 80 | child:[] 81 | }, 82 | { 83 | path:'/collegeNotice', 84 | title:'通知管理', 85 | icon:'course_tongzhi', 86 | child:[] 87 | }, 88 | 89 | ] 90 | 91 | //教师权限菜单 92 | const teacherMenu=[ 93 | { 94 | path:'/teacherHome', 95 | title:'教师首页', 96 | icon:'course_shouye', 97 | child:[] 98 | }, 99 | { 100 | path:'/teacherPlan', 101 | title:'我的排课', 102 | icon:'course_908caidan_anpai', 103 | child:[] 104 | }, 105 | { 106 | path:'/teacherWork', 107 | title:'工作总量', 108 | icon:'course__zhuanzhengongzuoliang', 109 | child:[] 110 | }, 111 | { 112 | path:'/teacherNotice', 113 | title:'我的通知', 114 | icon:'course_tongzhi', 115 | child:[] 116 | } 117 | ] 118 | 119 | 120 | 121 | export default { 122 | adminMenu, 123 | collegeMenu, 124 | teacherMenu 125 | } 126 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import router from './router' 4 | import store from './store' 5 | import ElementUI from 'element-ui' 6 | import 'element-ui/lib/theme-chalk/index.css' 7 | import './assets/icon/iconfont.css' 8 | import constData from './data/constData' 9 | 10 | 11 | 12 | Vue.use(ElementUI) 13 | Vue.config.productionTip = false 14 | Vue.prototype.$constData = constData 15 | 16 | 17 | new Vue({ 18 | router, 19 | store, 20 | render: h => h(App) 21 | }).$mount('#app') 22 | -------------------------------------------------------------------------------- /src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import home from './views/home' 4 | import login from './views/login' 5 | 6 | const teacherHome = ()=>import('./views/teacher/home/teacherHome') 7 | const teacherPlan = ()=>import('./views/teacher/plan/teacherPlan') 8 | const teacherWork = ()=>import('./views/teacher/work/teacherWork') 9 | const teacherNotice =()=>import('./views/teacher/notice/teacherNotice') 10 | 11 | const adminHome = ()=>import('./views/admin/home/adminHome') 12 | const adminPlan = ()=>import('./views/admin/plan/adminPlan') 13 | const adminCollege = ()=>import('./views/admin/college/adminCollege') 14 | const adminTeacher = ()=>import('./views/admin/teacher/adminTeacher') 15 | const adminRoom = ()=>import('./views/admin/room/adminRoom') 16 | const adminExamine = ()=>import('./views/admin/examine/adminExamine') 17 | const adminNotice = ()=>import('./views/admin/notice/adminNotice') 18 | const adminWork = ()=>import('./views/admin/work/adminWork') 19 | 20 | const collegeHome = ()=>import('./views/college/home/collegeHome') 21 | const collegeCourse = ()=>import('./views/college/course/collegeCourse') 22 | const collegeWork = ()=>import('./views/college/work/collegeWork') 23 | const collegePlan = ()=>import('./views/college/plan/collegePlan') 24 | const collegeNotice = ()=>import('./views/college/notice/collegeNotice') 25 | 26 | Vue.use(Router) 27 | 28 | export default new Router({ 29 | mode: 'hash', 30 | base: process.env.BASE_URL, 31 | routes: [ 32 | { 33 | path: '/', 34 | name: 'login', 35 | component: login, 36 | }, 37 | { 38 | path:'/home', 39 | name:'home', 40 | component:home, 41 | children:[ 42 | //教师 43 | { 44 | path: '/teacherHome', 45 | name: 'teacherHome', 46 | component: teacherHome 47 | }, 48 | { 49 | path: '/teacherPlan', 50 | name: 'teacherPlan', 51 | component: teacherPlan 52 | }, 53 | { 54 | path:'/teacherWork', 55 | name:'teacherWork', 56 | component:teacherWork 57 | }, 58 | { 59 | path:'/teacherNotice', 60 | name:'teacherNotice', 61 | component:teacherNotice 62 | }, 63 | 64 | 65 | //校级管理 66 | { 67 | path: '/adminHome', 68 | name: 'adminHome', 69 | component: adminHome 70 | }, 71 | { 72 | path: '/adminPlan', 73 | name: 'adminPlan', 74 | component: adminPlan 75 | }, 76 | { 77 | path: '/adminCollege', 78 | name: 'adminCollege', 79 | component: adminCollege 80 | }, 81 | { 82 | path: '/adminTeacher', 83 | name: 'adminTeacher', 84 | component: adminTeacher 85 | }, 86 | { 87 | path: '/adminRoom', 88 | name: 'adminRoom', 89 | component: adminRoom 90 | }, 91 | { 92 | path: '/adminExamine', 93 | name: 'adminExamine', 94 | component: adminExamine 95 | }, 96 | { 97 | path: '/adminNotice', 98 | name: 'adminNotice', 99 | component: adminNotice 100 | }, 101 | { 102 | path: '/adminWork', 103 | name: 'adminWork', 104 | component: adminWork 105 | }, 106 | 107 | 108 | //院级管理 109 | { 110 | path: '/collegeHome', 111 | name: 'collegeHome', 112 | component: collegeHome 113 | }, 114 | { 115 | path:'/collegeCourse', 116 | name:'collegeCourse', 117 | component:collegeCourse 118 | }, 119 | { 120 | path:'/collegeWork', 121 | name:'collegeWork', 122 | component:collegeWork 123 | }, 124 | { 125 | path:'/collegePlan', 126 | name:'collegePlan', 127 | component:collegePlan 128 | }, 129 | { 130 | path:'/collegeNotice', 131 | name:'collegeNotice', 132 | component:collegeNotice 133 | }, 134 | 135 | 136 | ] 137 | }, 138 | { 139 | path:'/login', 140 | name:'login', 141 | component:login 142 | } 143 | 144 | 145 | ] 146 | }) 147 | -------------------------------------------------------------------------------- /src/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | 4 | Vue.use(Vuex) 5 | 6 | export default new Vuex.Store({ 7 | state: { 8 | navDefaultActive : '0', 9 | }, 10 | mutations: { 11 | 12 | }, 13 | actions: { 14 | 15 | } 16 | }) 17 | -------------------------------------------------------------------------------- /src/views/admin/college/adminCollege.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/admin/examine/adminExamine.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/admin/home/adminHome.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/admin/notice/adminNotice.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/admin/plan/adminPlan.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/admin/room/adminRoom.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/admin/teacher/adminTeacher.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/admin/work/adminWork.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/college/course/collegeCourse.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/college/home/collegeHome.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/college/notice/collegeNotice.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/college/plan/collegePlan.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/college/work/collegeWork.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/home.vue: -------------------------------------------------------------------------------- 1 | 53 | 54 | 121 | 122 | 214 | -------------------------------------------------------------------------------- /src/views/login.vue: -------------------------------------------------------------------------------- 1 | 50 | 51 | 110 | 111 | 157 | 158 | 242 | -------------------------------------------------------------------------------- /src/views/teacher/home/teacherHome.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/teacher/notice/teacherNotice.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/teacher/plan/teacherPlan.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /src/views/teacher/work/teacherWork.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 16 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | 2 | module.exports = { 3 | publicPath: process.env.NODE_ENV === 'production' 4 | ? './' 5 | : './' 6 | } 7 | --------------------------------------------------------------------------------