[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-public-tmzahWer":3,"public-project-articles-tmzahWer":16},{"id":4,"uuid":5,"project_id":4,"title":6,"content":7,"type":8,"status":9,"public_enabled":9,"views":10,"sort":11,"created_at":12,"updated_at":13,"project_title":14,"project_slug":15},39,"tmzahWer","06. Vue管理系统速成","\n## 盒子模型拆分网页\n\n## ![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691807894298-8c883d60-7370-4fda-9a5c-f684be93f029.png#averageHue=%23fbeae9&clientId=u7e048124-f3c1-4&from=paste&height=716&id=u6152a0cc&originHeight=895&originWidth=1920&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=187150&status=done&style=none&taskId=ue861ada9-54d6-4ef7-b244-3ec1981d08c&title=&width=1536)\n\n## 官网菜单效果\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691807986977-b4d46580-12a4-4425-95bd-707c83f62080.png#averageHue=%23dae1ea&clientId=u7e048124-f3c1-4&from=paste&height=254&id=u504cc592&originHeight=318&originWidth=1026&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=6173&status=done&style=none&taskId=u002c5a27-a191-4170-b82b-513941ce1a9&title=&width=820.8)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691808323736-49192f7e-a8be-4720-80cb-ce940024053d.png#averageHue=%23fef7f6&clientId=u7e048124-f3c1-4&from=paste&height=716&id=u1621cd84&originHeight=895&originWidth=1920&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=20672&status=done&style=none&taskId=u033be8ff-b574-4425-9599-f97afe08e3d&title=&width=1536)\n当且仅当标签是 el-menu-item 的时候，index 才会生效\n\n$route.path 是当前浏览器正在访问的路由\n格式： \u002Fxxx\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691811289677-0de08f31-54b8-4aca-ac00-0c2cd45bb952.png#averageHue=%23061b2f&clientId=u7e048124-f3c1-4&from=paste&height=39&id=ucc0e3847&originHeight=49&originWidth=245&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=2003&status=done&style=none&taskId=u0967fd1e-31ae-49b1-a076-3234675179f&title=&width=196)\n\npadding: 20\nicon: width 24 + margin 5\n20 + 24 + 5 = 49\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691806934540-1f684b1d-b96a-48b3-a6c7-deff4b2daaa4.png#averageHue=%23e7ca95&clientId=u4a5675e9-1018-4&from=paste&height=431&id=u99772521&originHeight=690&originWidth=940&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=28668&status=done&style=none&taskId=u6c8398ce-b1e5-4265-a6ba-7343a821c42&title=&width=587)\n\n## 我们要实现的效果\n\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691804982853-6ddac1de-35c5-4778-bcfe-903ef27fdcaf.png#averageHue=%23fefdfd&clientId=ubb808c8c-00b4-4&from=paste&height=716&id=ub6f4bc95&originHeight=895&originWidth=1920&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=46499&status=done&style=none&taskId=udc73b1d7-de3d-4de1-8d26-e49b620ea9a&title=&width=1536)\n\n## 布局\n\n**logo**\n![logo1.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691805248472-031a2215-d9b9-49bb-8a70-f2d8172a850d.png#averageHue=%23694234&clientId=ubb808c8c-00b4-4&from=paste&height=160&id=nos3d&originHeight=200&originWidth=200&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=6583&status=done&style=none&taskId=u622ecd2d-3cc7-4a76-bd74-1290fa37f94&title=&width=160)\n\n设置\n菜单高亮颜色：![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691753248771-228fa5e8-9260-42a1-8a74-fc8bf2547ff3.png#averageHue=%231890ff&clientId=udd1c1a95-0fe1-4&from=paste&height=28&id=GA2Iw&originHeight=35&originWidth=56&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=130&status=done&style=none&taskId=uc3fa541d-750e-4a2e-b7e4-61530cf38ee&title=&width=44.8)\\*\\* \\*\\*#1890ff\n一级菜单颜色：![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691753358953-a7d29c15-fa67-4c96-bb4b-fb49982af557.png#averageHue=%23001529&clientId=udd1c1a95-0fe1-4&from=paste&height=25&id=oqDpX&originHeight=31&originWidth=74&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=155&status=done&style=none&taskId=u1aaf9aae-2f34-4aad-a371-d26f035d86a&title=&width=59.2) #001529\n二级菜单颜色：![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691753384111-dd66ce4e-f73e-49ce-90b7-324d67185b60.png#averageHue=%23000c17&clientId=udd1c1a95-0fe1-4&from=paste&height=26&id=OHbbH&originHeight=33&originWidth=61&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=125&status=done&style=none&taskId=u65223b5a-646d-46c5-9591-7e8fd97fefc&title=&width=48.8) #000c17\n\n菜单和头部阴影\n\n```java\nbox-shadow: 2px 0 6px rgba(0,21,41,.35);\n```\n\n整体框架\n\n```java\n\u003Cel-container>\n    \u003Cel-aside>\n\t\u003C\u002Fel-aside>\n\n \t\u003Cel-container>\n    \t\u003Cel-header>\n\t\t\u003C\u002Fel-header>\n\n    \t\u003Cel-main>\n    \t\u003C\u002Fel-main>\n \t\u003C\u002Fel-container>\n\u003C\u002Fel-container>\n```\n\nlogo\n\n```java\n\u003Cdiv style=\"height: 60px; line-height: 60px; font-size: 20px; display: flex; align-items: center; justify-content: center\">\n  \u003Cimg src=\"@\u002Fassets\u002Flogo1.png\" style=\"width: 30px;\" alt=\"\">\n  \u003Cspan class=\"logo-title\" v-show=\"!isCollapse\">Honey2024\u003C\u002Fspan>\n\u003C\u002Fdiv>\n```\n\n菜单\n\n```java\n\u003Cel-menu router :collapse=\"isCollapse\" :collapse-transition=\"false\" background-color=\"#001529\"\n         active-text-color=\"#fff\" text-color=\"rgba(255, 255, 255, 0.65)\" :default-active=\"$route.path\"\n         style=\"border: none\">\n  \u003Cel-menu-item index=\"\u002F\">\n    \u003Ci class=\"el-icon-s-home\">\u003C\u002Fi>\n    \u003Cspan slot=\"title\">系统首页\u003C\u002Fspan>\n  \u003C\u002Fel-menu-item>\n  \u003Cel-submenu index=\"2\">\n    \u003Ctemplate slot=\"title\">\u003Ci class=\"el-icon-menu\">\u003C\u002Fi>\u003Cspan>信息管理\u003C\u002Fspan>\u003C\u002Ftemplate>\n    \u003Cel-menu-item index=\"\u002Fuser\">用户管理\u003C\u002Fel-menu-item>\n    \u003Cel-menu-item index=\"\u002Fadmin\">管理员管理\u003C\u002Fel-menu-item>\n  \u003C\u002Fel-submenu>\n\u003C\u002Fel-menu>\n```\n\n菜单样式\n\n```java\n\u003Cstyle>\n.el-submenu__title {\n  height: 40px !important;\n  line-height: 40px !important;\n  padding: 0 25px !important;\n  transition: color 0s;\n}\n.el-menu-item {\n  min-width: 0 !important;\n  width: calc(100% - 10px);\n  margin: 5px;\n  height: 40px !important;\n  line-height: 40px !important;\n  border-radius: 5px;\n}\n\n.el-menu--inline, .el-menu-item {\n  background-color: #000c17 !important;\n}\n\n\n.el-submenu__title>i:nth-child(1) {\n  margin-top: 2px;\n}\n.el-submenu__title>i.el-submenu__icon-arrow {\n  margin-top: -5px;\n}\n\n.el-menu--inline>.el-menu-item {\n  padding-left: 50px !important;\n}\n.el-menu-item.is-active {\n  background-color: dodgerblue !important;\n}\n\n.el-menu-item:hover {\n  color: #fff !important;\n}\n\n.el-submenu__title:hover *, .el-submenu__title:hover {\n  color: #fff !important;\n}\n\n.el-aside {\n  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);\n  background-color: #001529;\n  color: #fff;\n  min-height: 100vh;\n  transition: width .3s;\n}\n.el-menu--collapse .el-submenu__title {\n  padding: 0 20px !important;\n}\n.el-menu--collapse .el-tooltip {\n  padding: 0 15px !important;\n}\n.logo-title {\n  margin-left: 5px;\n  transition: all .3s;\n}\n\u003C\u002Fstyle>\n```\n\n头部布局\n左侧\n\n```java\n\u003Ci :class=\"collapseIcon\" @click=\"handleCollapse\" style=\"font-size: 26px\">\u003C\u002Fi>\n    \u003Cel-breadcrumb separator=\"\u002F\" style=\"margin-left: 20px\">\n    \u003Cel-breadcrumb-item :to=\"{ path: '\u002F' }\">首页\u003C\u002Fel-breadcrumb-item>\n    \u003Cel-breadcrumb-item :to=\"{ path: '\u002F' }\">课程管理\u003C\u002Fel-breadcrumb-item>\n\u003C\u002Fel-breadcrumb>\n```\n\n右侧\n\n```java\n\u003Cdiv style=\"flex: 1; display: flex; justify-content: flex-end; align-items: center\">\n    \u003Ci class=\"el-icon-quanping\" @click=\"handleFullScreen\" style=\"font-size: 25px\">\u003C\u002Fi>\n    \u003Cel-dropdown placement=\"bottom\">\n      \u003Cdiv style=\"display: flex; align-items: center; cursor: pointer\">\n        \u003Cimg src=\"@\u002Fassets\u002Flogo1.png\" alt=\"\" style=\"width: 40px; height: 40px; margin: 0 5px\">\n        \u003Cspan>管理员\u003C\u002Fspan>\n      \u003C\u002Fdiv>\n      \u003Cel-dropdown-menu slot=\"dropdown\">\n        \u003Cel-dropdown-item>个人信息\u003C\u002Fel-dropdown-item>\n        \u003Cel-dropdown-item>修改密码\u003C\u002Fel-dropdown-item>\n        \u003Cel-dropdown-item>退出登录\u003C\u002Fel-dropdown-item>\n      \u003C\u002Fel-dropdown-menu>\n    \u003C\u002Fel-dropdown>\n\u003C\u002Fdiv>\n```\n\n## iconfont 自定义图标\n\n设置\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691804962823-db5f9da9-ecef-4d97-bdef-862ed8c293a6.png#averageHue=%23fdfdfc&clientId=ubb808c8c-00b4-4&from=paste&height=551&id=ufd528ba2&originHeight=805&originWidth=731&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=39330&status=done&style=none&taskId=u2f040a8e-a426-453c-b10b-b293fda46ff&title=&width=500.79998779296875)![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691805215650-78dd15dd-e922-4b44-969a-023ee342401c.png#averageHue=%23f9f9f8&clientId=ubb808c8c-00b4-4&from=paste&height=306&id=ua77eeb98&originHeight=514&originWidth=1176&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=44081&status=done&style=none&taskId=u1dff9fe4-a38a-4386-b05f-e7fd5e0a912&title=&width=700)\n下载后解压，拷贝这几个文件到你项目 css 静态目录下\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691805179021-65d77d61-ffce-48a6-8ef0-71ec85041c40.png#averageHue=%233f464e&clientId=ubb808c8c-00b4-4&from=paste&height=228&id=u37154035&originHeight=285&originWidth=350&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=11247&status=done&style=none&taskId=ue7e50831-42d5-4842-9eec-8645294c7d7&title=&width=280)\n在 main.js 里引入 iconfont.css 即可\n\n## 主题色设置\n\n[https:\u002F\u002Felement.eleme.cn\u002F#\u002Fzh-CN\u002Ftheme](https:\u002F\u002Felement.eleme.cn\u002F#\u002Fzh-CN\u002Ftheme)\n![image.png](https:\u002F\u002Fcdn.nlark.com\u002Fyuque\u002F0\u002F2023\u002Fpng\u002F751015\u002F1691805148959-19583b0d-91a5-4bbb-976c-01935dd0a725.png#averageHue=%233f464e&clientId=ubb808c8c-00b4-4&from=paste&height=224&id=u07b4be6b&originHeight=280&originWidth=355&originalType=binary&ratio=1.25&rotation=0&showTitle=false&size=10781&status=done&style=none&taskId=u23f24414-fc34-4c75-8e1b-28554f9bdfa&title=&width=284)\n直接复制 theme 文件夹到项目里，在 mian.js 里引入即可\n\n## 直播后的完整代码\n\n```java\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cel-container>\n      \u003C!--    侧边栏  -->\n      \u003Cel-aside :width=\"asideWidth\" style=\"min-height: 100vh; background-color: #001529\">\n        \u003Cdiv style=\"height: 60px; color: white; display: flex; align-items: center; justify-content: center\">\n          \u003Cimg src=\"@\u002Fassets\u002Flogo1.png\" alt=\"\" style=\"width: 40px; height: 40px\">\n          \u003Cspan class=\"logo-title\" v-show=\"!isCollapse\">honey2024\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n\n        \u003Cel-menu :collapse=\"isCollapse\" :collapse-transition=\"false\" router background-color=\"#001529\" text-color=\"rgba(255, 255, 255, 0.65)\" active-text-color=\"#fff\" style=\"border: none\" :default-active=\"$route.path\">\n          \u003Cel-menu-item index=\"\u002F\">\n            \u003Ci class=\"el-icon-menu\">\u003C\u002Fi>\n            \u003Cspan slot=\"title\">系统首页\u003C\u002Fspan>\n          \u003C\u002Fel-menu-item>\n          \u003Cel-menu-item index=\"\u002F1\">\n            \u003Ci class=\"el-icon-house\">\u003C\u002Fi>\n            \u003Cspan slot=\"title\">系统首页\u003C\u002Fspan>\n          \u003C\u002Fel-menu-item>\n          \u003Cel-menu-item index=\"\u002F2\">\n            \u003Ci class=\"el-icon-house\">\u003C\u002Fi>\n            \u003Cspan slot=\"title\">系统首页\u003C\u002Fspan>\n          \u003C\u002Fel-menu-item>\n          \u003Cel-submenu index=\"3\">\n            \u003Ctemplate slot=\"title\">\n              \u003Ci class=\"el-icon-menu\">\u003C\u002Fi>\n              \u003Cspan>信息管理\u003C\u002Fspan>\n            \u003C\u002Ftemplate>\n            \u003Cel-menu-item>用户信息\u003C\u002Fel-menu-item>\n            \u003Cel-menu-item>管理员信息\u003C\u002Fel-menu-item>\n            \u003Cel-menu-item index=\"\u002F\">系统首页\u003C\u002Fel-menu-item>\n          \u003C\u002Fel-submenu>\n        \u003C\u002Fel-menu>\n\n      \u003C\u002Fel-aside>\n\n      \u003Cel-container>\n        \u003C!--        头部区域-->\n        \u003Cel-header>\n\n          \u003Ci :class=\"collapseIcon\" style=\"font-size: 26px\" @click=\"handleCollapse\">\u003C\u002Fi>\n          \u003Cel-breadcrumb separator-class=\"el-icon-arrow-right\" style=\"margin-left: 20px\">\n            \u003Cel-breadcrumb-item :to=\"{ path: '\u002F' }\">首页\u003C\u002Fel-breadcrumb-item>\n            \u003Cel-breadcrumb-item :to=\"{ path: '\u002Fuser' }\">用户管理\u003C\u002Fel-breadcrumb-item>\n          \u003C\u002Fel-breadcrumb>\n\n          \u003Cdiv style=\"flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end\">\n            \u003Ci class=\"el-icon-quanping\" style=\"font-size: 26px\" @click=\"handleFull\">\u003C\u002Fi>\n            \u003Cel-dropdown placement=\"bottom\">\n              \u003Cdiv style=\"display: flex; align-items: center; cursor: default\">\n                \u003Cimg src=\"@\u002Fassets\u002Flogo1.png\" alt=\"\" style=\"width: 40px; height: 40px; margin: 0 5px\">\n                \u003Cspan>管理员\u003C\u002Fspan>\n              \u003C\u002Fdiv>\n              \u003Cel-dropdown-menu slot=\"dropdown\">\n                \u003Cel-dropdown-item>个人信息\u003C\u002Fel-dropdown-item>\n                \u003Cel-dropdown-item>修改密码\u003C\u002Fel-dropdown-item>\n                \u003Cel-dropdown-item @click=\"\">退出登录\u003C\u002Fel-dropdown-item>\n              \u003C\u002Fel-dropdown-menu>\n            \u003C\u002Fel-dropdown>\n          \u003C\u002Fdiv>\n\n        \u003C\u002Fel-header>\n\n        \u003C!--        主体区域-->\n        \u003Cel-main>\n          \u003Cdiv style=\"box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px\">\n            早安，骚年，祝你开心每一天！\n          \u003C\u002Fdiv>\n          \u003Cel-card style=\"width: 500px\">\n            \u003Cdiv slot=\"header\" class=\"clearfix\">\n              \u003Cspan>青哥哥带你做毕设2024\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n            \u003Cdiv>\n              2024毕设正式开始了！青哥哥带你手把手敲出来！\n              \u003Cdiv style=\"margin-top: 20px\">\n                \u003Cdiv style=\"margin: 10px 0\">\u003Cstrong>主题色\u003C\u002Fstrong>\u003C\u002Fdiv>\n                \u003Cel-button type=\"primary\">按钮\u003C\u002Fel-button>\n                \u003Cel-button type=\"success\">按钮\u003C\u002Fel-button>\n                \u003Cel-button type=\"warning\">按钮\u003C\u002Fel-button>\n                \u003Cel-button type=\"danger\">按钮\u003C\u002Fel-button>\n                \u003Cel-button type=\"info\">按钮\u003C\u002Fel-button>\n              \u003C\u002Fdiv>\n            \u003C\u002Fdiv>\n          \u003C\u002Fel-card>\n        \u003C\u002Fel-main>\n\n      \u003C\u002Fel-container>\n\n\n    \u003C\u002Fel-container>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n\nexport default {\n  name: 'HomeView',\n  data() {\n    return {\n      isCollapse: false,  \u002F\u002F 不收缩\n      asideWidth: '200px',\n      collapseIcon: 'el-icon-s-fold'\n    }\n  },\n  methods: {\n    handleFull() {\n      document.documentElement.requestFullscreen()\n    },\n    handleCollapse() {\n      this.isCollapse = !this.isCollapse\n      this.asideWidth = this.isCollapse ? '64px' : '200px'\n      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Cstyle>\n.el-menu--inline {\n  background-color: #000c17 !important;\n}\n.el-menu--inline .el-menu-item {\n  background-color: #000c17 !important;\n  padding-left: 49px !important;\n}\n.el-menu-item:hover, .el-submenu__title:hover {\n  color: #fff !important;\n}\n.el-submenu__title:hover i {\n  color: #fff !important;\n}\n.el-menu-item:hover i {\n  color: #fff !important;\n}\n.el-menu-item.is-active {\n  background-color: #1890ff !important;\n  border-radius: 5px !important;\n  width: calc(100% - 8px);\n  margin-left: 4px;\n}\n.el-menu-item.is-active i, .el-menu-item.is-active .el-tooltip{\n  margin-left: -4px;\n}\n.el-menu-item {\n  height: 40px !important;\n  line-height: 40px !important;\n}\n.el-submenu__title {\n  height: 40px !important;\n  line-height: 40px !important;\n}\n.el-submenu .el-menu-item {\n  min-width: 0 !important;\n}\n.el-menu--inline .el-menu-item.is-active {\n  padding-left: 45px !important;\n}\n\u002F*.el-submenu__icon-arrow {*\u002F\n\u002F*  margin-top: -5px;*\u002F\n\u002F*}*\u002F\n\n.el-aside {\n  transition: width .3s;\n  box-shadow: 2px 0 6px rgba(0,21,41,.35);\n}\n.logo-title {\n  margin-left: 5px;\n  font-size: 20px;\n  transition: all .3s;   \u002F* 0.3s *\u002F\n}\n.el-header {\n  box-shadow: 2px 0 6px rgba(0,21,41,.35);\n  display: flex;\n  align-items: center;\n}\n\u003C\u002Fstyle>\n```\n\n尽管我提前写了一遍，但是直播写的布局思路跟我备课的布局还是不一样，下面放出我备课的布局代码：\n\n## 备课的布局完整代码\n\n```java\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cel-container>\n      \u003Cel-aside :width=\"asideWidth\">\n        \u003Cdiv style=\"height: 60px; line-height: 60px; font-size: 20px; display: flex; align-items: center; justify-content: center\">\n          \u003Cimg src=\"@\u002Fassets\u002Flogo1.png\" style=\"width: 30px;\" alt=\"\">\n          \u003Cspan class=\"logo-title\" v-show=\"!isCollapse\">Honey2024\u003C\u002Fspan>\n        \u003C\u002Fdiv>\n        \u003Cel-menu router :collapse=\"isCollapse\" :collapse-transition=\"false\" background-color=\"#001529\"\n                 active-text-color=\"#fff\" text-color=\"rgba(255, 255, 255, 0.65)\" :default-active=\"$route.path\"\n                 style=\"border: none\">\n          \u003Cel-menu-item index=\"\u002F\">\n            \u003Ci class=\"el-icon-s-home\">\u003C\u002Fi>\n            \u003Cspan slot=\"title\">系统首页\u003C\u002Fspan>\n          \u003C\u002Fel-menu-item>\n          \u003Cel-submenu index=\"2\">\n            \u003Ctemplate slot=\"title\">\u003Ci class=\"el-icon-menu\">\u003C\u002Fi>\u003Cspan>信息管理\u003C\u002Fspan>\u003C\u002Ftemplate>\n            \u003Cel-menu-item index=\"\u002Fuser\">用户管理\u003C\u002Fel-menu-item>\n            \u003Cel-menu-item index=\"\u002Fadmin\">管理员管理\u003C\u002Fel-menu-item>\n          \u003C\u002Fel-submenu>\n        \u003C\u002Fel-menu>\n      \u003C\u002Fel-aside>\n\n      \u003Cel-container>\n        \u003Cel-header style=\"height: 60px; line-height: 60px; display: flex; align-items: center; box-shadow: 2px 0 6px rgba(0, 21, 41, .35);\">\n          \u003Ci :class=\"collapseIcon\" @click=\"handleCollapse\" style=\"font-size: 26px\">\u003C\u002Fi>\n          \u003Cel-breadcrumb separator=\"\u002F\" style=\"margin-left: 20px\">\n            \u003Cel-breadcrumb-item :to=\"{ path: '\u002F' }\">首页\u003C\u002Fel-breadcrumb-item>\n            \u003Cel-breadcrumb-item :to=\"{ path: '\u002F' }\">课程管理\u003C\u002Fel-breadcrumb-item>\n          \u003C\u002Fel-breadcrumb>\n\n          \u003Cdiv style=\"flex: 1; display: flex; justify-content: flex-end; align-items: center\">\n            \u003Ci class=\"el-icon-quanping\" @click=\"handleFullScreen\" style=\"font-size: 25px\">\u003C\u002Fi>\n            \u003Cel-dropdown placement=\"bottom\">\n              \u003Cdiv style=\"display: flex; align-items: center; cursor: pointer\">\n                \u003Cimg src=\"@\u002Fassets\u002Flogo1.png\" alt=\"\" style=\"width: 40px; height: 40px; margin: 0 5px\">\n                \u003Cspan>管理员\u003C\u002Fspan>\n              \u003C\u002Fdiv>\n              \u003Cel-dropdown-menu slot=\"dropdown\">\n                \u003Cel-dropdown-item>个人信息\u003C\u002Fel-dropdown-item>\n                \u003Cel-dropdown-item>修改密码\u003C\u002Fel-dropdown-item>\n                \u003Cel-dropdown-item>退出登录\u003C\u002Fel-dropdown-item>\n              \u003C\u002Fel-dropdown-menu>\n            \u003C\u002Fel-dropdown>\n          \u003C\u002Fdiv>\n        \u003C\u002Fel-header>\n\n        \u003Cel-main>\n          \u003Cdiv style=\"box-shadow: 0 0 10px rgba(0,0,0,.1); padding: 10px 20px; border-radius: 5px; margin-bottom: 10px\">\n            早安，骚年，祝你开心每一天！\n          \u003C\u002Fdiv>\n          \u003Cel-card style=\"width: 500px\">\n            \u003Cdiv slot=\"header\" class=\"clearfix\">\n              \u003Cspan>青哥哥带你做毕设2024\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n           \u003Cdiv>\n             2024毕设正式开始了！青哥哥带你手把手敲出来！\n             \u003Cdiv style=\"margin-top: 20px\">\n               \u003Cdiv style=\"margin: 10px 0\">\u003Cstrong>主题色\u003C\u002Fstrong>\u003C\u002Fdiv>\n               \u003Cel-button type=\"primary\">按钮\u003C\u002Fel-button>\n               \u003Cel-button type=\"success\">按钮\u003C\u002Fel-button>\n               \u003Cel-button type=\"warning\">按钮\u003C\u002Fel-button>\n               \u003Cel-button type=\"danger\">按钮\u003C\u002Fel-button>\n               \u003Cel-button type=\"info\">按钮\u003C\u002Fel-button>\n             \u003C\u002Fdiv>\n           \u003C\u002Fdiv>\n          \u003C\u002Fel-card>\n\u003C!--          \u003Cel-table stripe :header-cell-style=\"{ backgroundColor: 'aliceblue', fontWeight: 'bold', color: '#333' }\">-->\n\u003C!--            \u003Cel-table-column label=\"姓名\" align=\"center\">\u003C\u002Fel-table-column>-->\n\u003C!--            \u003Cel-table-column label=\"电话\" align=\"center\">\u003C\u002Fel-table-column>-->\n\u003C!--            \u003Cel-table-column label=\"邮箱\" align=\"center\">\u003C\u002Fel-table-column>-->\n\u003C!--            \u003Cel-table-column label=\"地址\" align=\"center\">\u003C\u002Fel-table-column>-->\n\u003C!--          \u003C\u002Fel-table>-->\n        \u003C\u002Fel-main>\n      \u003C\u002Fel-container>\n    \u003C\u002Fel-container>\n\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n\nexport default {\n  name: 'HomeView',\n  data() {\n    return {\n      isCollapse: false,\n      asideWidth: '200px',\n      collapseIcon: 'el-icon-s-fold'\n    }\n  },\n  mounted() {\n\n  },\n  methods: {\n    handleFullScreen() {\n      document.documentElement.requestFullscreen()\n    },\n    handleCollapse() {\n      this.isCollapse = !this.isCollapse\n      this.asideWidth = this.isCollapse ? '64px' : '200px'\n      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'\n    }\n  }\n}\n\u003C\u002Fscript>\n\n\u003Cstyle>\n.el-menu--inline, .el-menu-item {\n  background-color: #000c17 !important;\n}\n\n.el-submenu__title {\n  height: 40px !important;\n  line-height: 40px !important;\n  padding: 0 25px !important;\n  transition: color 0s;\n}\n.el-menu--collapse .el-submenu__title {\n  padding: 0 20px !important;\n}\n.el-submenu__title>i:nth-child(1) {\n  margin-top: 2px;\n}\n.el-submenu__title>i.el-submenu__icon-arrow {\n  margin-top: -5px;\n}\n.el-menu-item {\n  min-width: 0 !important;\n  width: calc(100% - 10px);\n  margin: 5px;\n  height: 40px !important;\n  line-height: 40px !important;\n  border-radius: 5px;\n}\n.el-menu--inline>.el-menu-item {\n  padding-left: 50px !important;\n}\n.el-menu-item.is-active {\n  background-color: dodgerblue !important;\n}\n\n.el-menu-item:hover {\n  color: #fff !important;\n}\n\n.el-submenu__title:hover *, .el-submenu__title:hover {\n  color: #fff !important;\n}\n\n.el-aside {\n  box-shadow: 2px 0 6px rgba(0, 21, 41, .35);\n  background-color: #001529;\n  color: #fff;\n  min-height: 100vh;\n  transition: width .3s;\n}\n.el-menu--collapse .el-tooltip {\n  padding: 0 15px !important;\n}\n.logo-title {\n  margin-left: 5px;\n  transition: all .3s;\n}\n.el-menu {\n  transition: all .3s;\n}\n\u003C\u002Fstyle>\n\n```\n","coding",1,3744,61,"2025-04-08 11:27:32","2026-05-03 22:49:02","【青哥带小白做毕设2024】完整教程资料汇总","qingge-graduation-project-2024",{"project":17,"items":18},{"id":4,"title":14,"slug":15},[19,27,34,41,48,55,62,63,70,77,84,91,98,105,112,119,126,133,140,147,154,161,168],{"id":20,"uuid":21,"project_id":4,"title":22,"type":8,"status":9,"public_enabled":9,"views":23,"sort":24,"created_at":25,"updated_at":26,"project_title":14,"project_slug":15},33,"R1oMCsCX","00. 从0开始带小白做SpringBoot+Vue+uniapp微信小程序实战项目",12130,55,"2025-04-08 11:28:17","2026-05-07 15:33:28.189425+00",{"id":28,"uuid":29,"project_id":4,"title":30,"type":8,"status":9,"public_enabled":9,"views":31,"sort":32,"created_at":33,"updated_at":13,"project_title":14,"project_slug":15},34,"s3u3u8W7","01. 网页布局技巧",3326,56,"2025-04-08 11:28:13",{"id":35,"uuid":36,"project_id":4,"title":37,"type":8,"status":9,"public_enabled":9,"views":38,"sort":39,"created_at":40,"updated_at":13,"project_title":14,"project_slug":15},35,"21zUHQYS","02. JavaScript入门",2017,57,"2025-04-08 11:27:55",{"id":42,"uuid":43,"project_id":4,"title":44,"type":8,"status":9,"public_enabled":9,"views":45,"sort":46,"created_at":47,"updated_at":13,"project_title":14,"project_slug":15},36,"4XVgY9Ti","03. Vue脚手架搭建",3719,58,"2025-04-08 11:27:46",{"id":49,"uuid":50,"project_id":4,"title":51,"type":8,"status":9,"public_enabled":9,"views":52,"sort":53,"created_at":54,"updated_at":13,"project_title":14,"project_slug":15},37,"S8vLLLvk","04. Git速成，推送代码到云端",1585,59,"2025-04-08 11:27:41",{"id":56,"uuid":57,"project_id":4,"title":58,"type":8,"status":9,"public_enabled":9,"views":59,"sort":60,"created_at":61,"updated_at":13,"project_title":14,"project_slug":15},38,"9EbwnGDp","05. 网页布局神器ElementUI速成",2670,60,"2025-04-08 11:27:37",{"id":4,"uuid":5,"project_id":4,"title":6,"type":8,"status":9,"public_enabled":9,"views":10,"sort":11,"created_at":12,"updated_at":13,"project_title":14,"project_slug":15},{"id":64,"uuid":65,"project_id":4,"title":66,"type":8,"status":9,"public_enabled":9,"views":67,"sort":68,"created_at":69,"updated_at":13,"project_title":14,"project_slug":15},40,"2agqAUQK","07. SpringBoot速成",3654,62,"2025-04-08 11:27:27",{"id":71,"uuid":72,"project_id":4,"title":73,"type":8,"status":9,"public_enabled":9,"views":74,"sort":75,"created_at":76,"updated_at":13,"project_title":14,"project_slug":15},41,"SXPAzgy7","08. Http扫盲，让小白也能听懂",2337,63,"2025-04-08 11:27:20",{"id":78,"uuid":79,"project_id":4,"title":80,"type":8,"status":9,"public_enabled":9,"views":81,"sort":82,"created_at":83,"updated_at":13,"project_title":14,"project_slug":15},42,"ostBIxAV","09. SpringBoot集成Mybatis实现增删改查",4190,64,"2025-04-08 11:27:13",{"id":85,"uuid":86,"project_id":4,"title":87,"type":8,"status":9,"public_enabled":9,"views":88,"sort":89,"created_at":90,"updated_at":13,"project_title":14,"project_slug":15},43,"6Sv7afpa","10. Vue封装前后端数据交互工具",3716,65,"2024-04-16 02:33:13",{"id":92,"uuid":93,"project_id":4,"title":94,"type":8,"status":9,"public_enabled":9,"views":95,"sort":96,"created_at":97,"updated_at":13,"project_title":14,"project_slug":15},44,"d53BPIQs","11. Vue登录（含验证码）、注册页面开发",4867,66,"2024-04-16 02:33:08",{"id":99,"uuid":100,"project_id":4,"title":101,"type":8,"status":9,"public_enabled":9,"views":102,"sort":103,"created_at":104,"updated_at":13,"project_title":14,"project_slug":15},45,"m033ng06","12. SpringBoot集成JWT token实现权限验证",3243,67,"2024-04-16 02:33:00",{"id":106,"uuid":107,"project_id":4,"title":108,"type":8,"status":9,"public_enabled":9,"views":109,"sort":110,"created_at":111,"updated_at":13,"project_title":14,"project_slug":15},46,"7xzyVD06","13. SpringBoot+Vue实现单文件、多文件上传和下载",2784,68,"2024-04-16 02:32:52",{"id":113,"uuid":114,"project_id":4,"title":115,"type":8,"status":9,"public_enabled":9,"views":116,"sort":117,"created_at":118,"updated_at":13,"project_title":14,"project_slug":15},47,"BdOLUenp","14. 多角色登录（Vue-Router路由守卫）",2318,69,"2024-04-16 02:32:39",{"id":120,"uuid":121,"project_id":4,"title":122,"type":8,"status":9,"public_enabled":9,"views":123,"sort":124,"created_at":125,"updated_at":13,"project_title":14,"project_slug":15},48,"2Wkx3igg","15. Vue个人信息修改、修改密码、重置密码",2092,70,"2024-04-16 02:32:33",{"id":127,"uuid":128,"project_id":4,"title":129,"type":8,"status":9,"public_enabled":9,"views":130,"sort":131,"created_at":132,"updated_at":13,"project_title":14,"project_slug":15},49,"BDvVa4By","16. SpringBoot+Vue管理系统实现增删改查",2598,71,"2024-04-16 02:32:29",{"id":134,"uuid":135,"project_id":4,"title":136,"type":8,"status":9,"public_enabled":9,"views":137,"sort":138,"created_at":139,"updated_at":13,"project_title":14,"project_slug":15},50,"FJVl0rCu","17. SpringBoot+Vue实现数据的批量导入和导出",1684,72,"2024-04-16 02:32:26",{"id":141,"uuid":142,"project_id":4,"title":143,"type":8,"status":9,"public_enabled":9,"views":144,"sort":145,"created_at":146,"updated_at":13,"project_title":14,"project_slug":15},51,"FvW9oHgj","18. SpringBoot+Vue项目部署上线",2845,73,"2024-04-16 02:32:22",{"id":148,"uuid":149,"project_id":4,"title":150,"type":8,"status":9,"public_enabled":9,"views":151,"sort":152,"created_at":153,"updated_at":13,"project_title":14,"project_slug":15},52,"xyqrxxiR","19. SpringBoot+Vue集成富文本编辑器",1499,74,"2024-04-16 02:32:18",{"id":155,"uuid":156,"project_id":4,"title":157,"type":8,"status":9,"public_enabled":9,"views":158,"sort":159,"created_at":160,"updated_at":13,"project_title":14,"project_slug":15},53,"XAaCXz8W","20. SpringBoot+Vue集成系统公告",1043,75,"2024-04-16 02:32:14",{"id":162,"uuid":163,"project_id":4,"title":164,"type":8,"status":9,"public_enabled":9,"views":165,"sort":166,"created_at":167,"updated_at":13,"project_title":14,"project_slug":15},54,"2havlmaC","21. SpringBoot+Vue集成AOP系统日志",1159,76,"2024-04-16 02:32:11",{"id":24,"uuid":169,"project_id":4,"title":170,"type":8,"status":9,"public_enabled":9,"views":171,"sort":172,"created_at":173,"updated_at":13,"project_title":14,"project_slug":15},"ObvLqJdX","22. SpringBoot+Vue实现Echarts数据报表（柱状图、饼图、折线图）",1688,99,"2024-04-16 02:30:25"]