diff --git a/README.md b/README.md index a75f77fa..b27ce9df 100644 --- a/README.md +++ b/README.md @@ -43,10 +43,12 @@ LevelCheck.vue查看页面 ``` ProjectManage.vue:项目页面 -ProjectAdd.vue:创建项目页面 +ProjectAdd.vue:创建单层项目页面 +SonProject.vue:创建单层子项目页面 TaskPage.vue:任务页面 TaskAdd.vue:创建任务页面 TemplateLibrary.vue:模板页面 +LibraryAdd.vue:模板库查看页面 ``` diff --git a/src/components/BreadCrumb.vue b/src/components/BreadCrumb.vue index bad79a1f..2947746f 100644 --- a/src/components/BreadCrumb.vue +++ b/src/components/BreadCrumb.vue @@ -145,6 +145,20 @@ export default { }, ]; } + if (n === "/libraryadd" || n === "/LibraryAdd") { + state.list = [ + { + name: "项目中心", + }, + { + name: "模板库", + }, + { + name: "查看", + href:"/libraryadd", + }, + ]; + } if (n === "/coursemanage" || n === "/CourseManage") { state.list = [ { diff --git a/src/components/NavLeft.vue b/src/components/NavLeft.vue index 35a79d85..bc060992 100644 --- a/src/components/NavLeft.vue +++ b/src/components/NavLeft.vue @@ -288,6 +288,12 @@ export default { selectedKeys: "sub2-2", pagename: "模板库", }, + { + href: "/libraryadd", + openKeys: "sub2", + selectedKeys: "sub2-2", + pagename: "查看", + }, { href: "/coursemanage", openKeys: "sub3", diff --git a/src/store/index.js b/src/store/index.js index 86cc9536..fd665d1d 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -7,6 +7,7 @@ export default createStore({ href: "/learningpath", active: true, },] + }, getters: { diff --git a/src/views/courselibrary/CoursewareManage.vue b/src/views/courselibrary/CoursewareManage.vue index eb6a3bd2..6424a0f1 100644 --- a/src/views/courselibrary/CoursewareManage.vue +++ b/src/views/courselibrary/CoursewareManage.vue @@ -77,7 +77,7 @@ - +
+ + + diff --git a/src/views/projectcenter/LibraryAdd.vue b/src/views/projectcenter/LibraryAdd.vue new file mode 100644 index 00000000..2278df41 --- /dev/null +++ b/src/views/projectcenter/LibraryAdd.vue @@ -0,0 +1,576 @@ + + + + \ No newline at end of file diff --git a/src/views/projectcenter/ProjectAdd.vue b/src/views/projectcenter/ProjectAdd.vue index eaddee91..c83ddd74 100644 --- a/src/views/projectcenter/ProjectAdd.vue +++ b/src/views/projectcenter/ProjectAdd.vue @@ -393,8 +393,8 @@ export default { .in { margin-left: 14px; flex: 1; - .ant-radio-wrapper { - } + // .ant-radio-wrapper { + // } .ant-input { border-radius: 5px; // height: 120%; diff --git a/src/views/projectcenter/ProjectManage.vue b/src/views/projectcenter/ProjectManage.vue index 29106947..29acaa1d 100644 --- a/src/views/projectcenter/ProjectManage.vue +++ b/src/views/projectcenter/ProjectManage.vue @@ -133,13 +133,13 @@
-
+
单层子项目
-
-
+ +
@@ -185,7 +185,7 @@
不包含子项目，直接填写项目基础信息后创建任务
-
+
@@ -197,6 +197,205 @@
+ +
+ +
+
+ 创建多层项目 +
+
+ +
+
+
+
+
+ +
+
项目名称:
+
+ +
+
+
+
+ +
+
分类:
+
+ +
+
+
+
+ +
+
项目经理:
+
+ +
+
+
+
+ +
+
资源归属:
+
+ +
+
+
+ 取消 + 确定 +
+
+ +
+ + +
+ +
+
+ 创建多层项目 +
+
+ +
+
+
+
+ 项目归属： + 管理者进阶 +
+
+
+ +
+
子项目名称:
+
+ +
+
+
+
+ +
+
分类:
+
+ +
+
+
+
+ +
+
子项目经理:
+
+ +
+
+
+
+ +
+
资源归属:
+
+ +
+
+
+ 取消 + 确定 +
+
+ +
+
+ diff --git a/src/views/projectcenter/TaskPage.vue b/src/views/projectcenter/TaskPage.vue index eeefd42d..07d723ec 100644 --- a/src/views/projectcenter/TaskPage.vue +++ b/src/views/projectcenter/TaskPage.vue @@ -40,35 +40,127 @@
- - -
- -
-
-
快速创建项目详情
-
-
-
-
- + + +
+ +
+
快速创建项目详情
+
+
+
+
+
+
添加任务
+
快速添加任务/阶段
+
+
+
+
+
+
添加学员
+
快速添加学员
+
+
+
+
+
+
发布
+
快速发布项目
+
+
+
+ + +
+
项目概览
+
+
+ 200 +
总人数
+
+
+ 15 +
必修课
+
+
+ 15 +
选修课
+
+
+
+ 50% +
+
完成率
+
+
+
+ 30% +
+
必修完成率
+
+
+
+ 30% +
+
选修完成率
+
+
+
阶段信息
+
+
阶段1
+
阶段2
+
+
+
阶段名称：
+
管理者进阶-腾飞班1第一阶段
+
+
+
+ +
课程完成率
+
+
+ +
考试通过率
+
+
+ +
作业合格率
+
+
+
10
+
+ 阶段任务总数 + +
+
5
+
+ 必修课 + +
+
1
+
+ 选修课 + +
+
+
-
- + + + +
+
+
任务大纲
+ + + + 编辑 +
@@ -119,15 +211,40 @@
-
- +
+ + Content of Tab Pane 3 + Content of Tab Pane 3 + Content of Tab Pane 3 + Content of Tab Pane 3 + Content of Tab Pane 3 + +
+ +
+ +
+
+ + 项目发布
发布
快速发布项目
-
+
@@ -190,10 +307,31 @@ 50%
-
-
- 管理 -
+
+
管理者进阶-腾飞班1
+
项目时间：2022/08/01-2022/08/30
+
+
+
项目信息
+
当前项目共0个阶段，0个任务
+
+
+
学员信息
+
项目共0名学员
+
+
+
+ + 发送项目通知 +
+
+ 发给老师 + 发给学员 +
+
+ 取消 + 发布 +
@@ -806,242 +944,200 @@ export default { padding: 5px 16px; background-color: #eff4fc; } - } - .split { - width: 100%; - height: 20px; - background-color: #edf0f5; - } - .content { - //display: flex; - //margin: 0 37px; - .ant-tabs-nav-wrap { - margin-left: 30px; + .split { + width: 100%; + height: 20px; + background-color: #edf0f5; } - .onerow { - //width: 100%; - display: flex; - height: 40px; + .content { + //display: flex; + //margin: 0 37px; + .ant-tabs-nav-wrap { + margin-left: 30px; + } + .editext { + line-height: 40px; + } + } + .edit:hover { + color: #ffffff; + background-color: #409eff; + cursor: pointer; + .editimg { + background-image: url("../../assets/images/projectadd/edit1.png"); + } + } + } + .second { + display: flex; + justify-content: center; + flex-wrap: wrap; + margin-top: 40px; + .nubbox { + width: 253px; + height: 116px; + align-items: center; + background: #fafbfc; + border-radius: 10px; + .nub1 { + color: #ffb54a; + font-size: 30px; + } + .nub2 { + color: #6d7584; + font-size: 14px; + } + } + .taskbox { + width: 412px; + height: 160px; + border-radius: 10px; position: relative; - margin-top: 15px; - margin-left: 38px; - //margin-right: 38px; - .taskmain { - font-size: 18px; - padding-top: 7px; - color: #000000; - } - .btn { + margin-right: 68px; + margin-bottom: 40px; + cursor: pointer; + .leftt { position: absolute; - top: 0; - right: 168px; - background-color: #409eff; - width: 130px; - height: 40px; - border-radius: 8px; - border: 1px solid #409eff; - color: #ffffff; - cursor: pointer; + top: 18px; + left: 0; } - .edit { + .photo { position: absolute; - right: 48px; - top: 0; - color: #409eff; - width: 100px; - height: 40px; - border: 1px solid #409eff; - border-radius: 8px; - .editimg { - width: 15px; - height: 15px; - margin-top: -2px; - margin-left: 25px; - margin-right: 5px; - } - .editext { - line-height: 40px; - } + top: 42px; + left: 37px; } - .edit:hover { - color: #ffffff; - background-color: #409eff; - cursor: pointer; - .editimg { - background-image: url("../../assets/images/projectadd/edit1.png"); - } + .rightt { + position: absolute; + top: 69px; + right: 26px; + } + .centerbox { + position: absolute; + top: 52px; + left: 145px; + font-size: 20px; + font-weight: 700; + //line-height: 36px; + } + .centermain { + color: rgba(135, 139, 146, 1); + font-size: 14px; + position: absolute; + left: 144px; + bottom: 49px; } } - .second { - display: flex; - justify-content: center; - flex-wrap: wrap; - margin-top: 40px; - .nubbox { - width: 253px; - height: 116px; - align-items: center; - background: #fafbfc; - border-radius: 10px; - .nub1 { - color: #ffb54a; - font-size: 30px; - } - .nub2 { - color: #6d7584; - font-size: 14px; - } - } - .taskbox { - width: 412px; - height: 160px; - border-radius: 10px; - position: relative; - margin-right: 68px; - margin-bottom: 40px; - cursor: pointer; - .leftt { - position: absolute; - top: 18px; - left: 0; - } - .photo { - position: absolute; - top: 42px; - left: 37px; - } - .rightt { - position: absolute; - top: 69px; - right: 26px; - } - .centerbox { - position: absolute; - top: 52px; - left: 145px; - font-size: 20px; - font-weight: 700; - //line-height: 36px; - } - .centermain { - color: rgba(135, 139, 146, 1); - font-size: 14px; - position: absolute; - left: 144px; - bottom: 49px; - } - } + } + .stage { + display: flex; + height: 49px; + background-color: #eff4fc; + align-items: center; + margin-top: 20px; + margin-left: 38px; + margin-right: 38px; + .stageimg { + margin-left: 31px; } - .stage { + .stagename { + color: #409eff; + font-size: 16px; + padding-left: 9px; + line-height: 36px; + } + } + .course { + //width: 100%; + display: flex; + flex-wrap: wrap; + align-items: center; + padding: 10px; + margin-left: 38px; + margin-right: 38px; + //margin: 0 12px; + border: 1px solid #f2f6fc; + .first { + //position: relative; display: flex; - height: 49px; - background-color: #eff4fc; + flex-grow: 1; align-items: center; - margin-top: 20px; - margin-left: 38px; - margin-right: 38px; - .stageimg { - margin-left: 31px; + //height: 71px; + margin-left: 12px; + margin-right: 50px; + .icon { + //position: absolute; } - .stagename { - color: #409eff; + .iconame { + //position: absolute; + color: #4f5156; font-size: 16px; - padding-left: 9px; - line-height: 36px; + } + .icontext { + //positipn: absolute; + color: #999ba3; + font-size: 14px; + margin-left: 8px; + width: 83px; } } - .course { - //width: 100%; + .type { + //height: 71px; display: flex; - flex-wrap: wrap; + flex-grow: 1; align-items: center; - padding: 10px; - margin-left: 38px; - margin-right: 38px; - //margin: 0 12px; - border: 1px solid #f2f6fc; - .first { - //position: relative; - display: flex; - flex-grow: 1; - align-items: center; - //height: 71px; - margin-left: 12px; - margin-right: 50px; - .icon { - //position: absolute; - } - .iconame { - //position: absolute; - color: #4f5156; - font-size: 16px; - } - .icontext { - //positipn: absolute; - color: #999ba3; - font-size: 14px; - margin-left: 8px; - width: 83px; - } + margin-right: 50px; + .typename { + width: 63px; + height: 23px; + color: #5dc988; + font-size: 14px; + background-color: #f2f6fc; + border-radius: 4px; + text-align: center; } - .type { - //height: 71px; - display: flex; - flex-grow: 1; - align-items: center; - margin-right: 50px; - .typename { - width: 63px; - height: 23px; - color: #5dc988; - font-size: 14px; - background-color: #f2f6fc; - border-radius: 4px; - text-align: center; - } - .typename1 { - width: 63px; - height: 23px; - color: #f0f4fe; - font-size: 14px; - background-color: #5dc988; - border-radius: 4px; - text-align: center; - } + .typename1 { + width: 63px; + height: 23px; + color: #f0f4fe; + font-size: 14px; + background-color: #5dc988; + border-radius: 4px; + text-align: center; } - .time { - //height: 71px; - flex-grow: 1; - margin-right: 50px; - .timetext { - font-size: 14px; - color: #999ba3; - } + } + .time { + //height: 71px; + flex-grow: 1; + margin-right: 50px; + .timetext { + font-size: 14px; + color: #999ba3; } - .progress { - width: 168px; - margin-left: 10px; - margin-right: 50px; - flex-grow: 1; - .progresstext { - color: #ffc067; - font-size: 14px; - } + } + .progress { + width: 168px; + margin-left: 10px; + margin-right: 50px; + flex-grow: 1; + .progresstext { + color: #ffc067; + font-size: 14px; } - .operations { - display: flex; - width: 200px; - //flex-grow: 1; - .operation { - color: #4ea6ff; - font-size: 14px; - padding: 10px; - margin-left: auto; - } + } + .operations { + display: flex; + width: 200px; + //flex-grow: 1; + .operation { + color: #4ea6ff; + font-size: 14px; + padding: 10px; + margin-left: auto; } } } } + .drawerStyle { .ant-drawer-content-wrapper { // max-width: 1000px; @@ -1112,7 +1208,175 @@ export default { height: 40px; border-radius: 8px; display: flex; + justify-content: left; + flex-wrap: wrap; + margin-top: 40px; + margin-left: 20px; + .nubbox { + width: 253px; + height: 116px; + margin-top: 20px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + background: #fafbfc; + border-radius: 10px; + margin-left: 15px; + .nub1 { + color: #ffb54a; + font-size: 30px; + font-weight: 700; + } + .nub2 { + color: #6d7584; + font-size: 14px; + } + } + .taskbox { + width: 412px; + height: 160px; + border-radius: 10px; + position: relative; + margin-left: 68px; + margin-bottom: 40px; + cursor: pointer; + .leftt { + position: absolute; + top: 18px; + left: 0; + } + .photo { + position: absolute; + top: 42px; + left: 37px; + } + .rightt { + position: absolute; + top: 69px; + right: 26px; + } + .centerbox { + position: absolute; + top: 52px; + left: 145px; + font-size: 20px; + font-weight: 700; + //line-height: 36px; + } + .centermain { + color: rgba(135, 139, 146, 1); + font-size: 14px; + position: absolute; + left: 144px; + bottom: 49px; + } + } + } + .stagemess { + display: flex; + margin-left: 38px; + .stage1 { + width: 100px; + height: 33px; + text-align: center; + line-height: 34px; + border-radius: 6px; + color: #ffffff; + font-size: 16px; + background: #4ea6ff; + margin-right: 10px; + margin-top: 19px; + cursor: pointer; + } + .stage2 { + width: 100px; + height: 33px; + text-align: center; + line-height: 34px; + border-radius: 6px; + border: 1px solid #ebeef3; + color: #000000; + font-size: 16px; + background: #ffffff; + margin-right: 10px; + margin-top: 19px; + cursor: pointer; + } + } + .stagesecond { + display: flex; + margin-left: 39px; + margin-top: 29px; + .staname { + color: #999ba3; + font-size: 14px; + } + .stamess { + color: #4f5156; + font-size: 14px; + } + } + .stagelast { + display: flex; + flex-wrap: wrap; justify-content: center; + margin-bottom: 55px; + .stagepro { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 55px; + margin-right: 120px; + .ant-progress-circle-path { + stroke: #4ea6ff; + } + .ant-progress-text { + color: #4ea6ff; + font-weight: 700; + } + .protext { + color: #6d7584; + font-size: 14px; + margin-top: 25px; + } + } + .proright { + width: 500px; + margin-top: 55px; + margin-left: 50px; + .ant-progress-bg { + height: 24px !important; + background: #4ea6ff; + } + .ant-progress-inner { + height: 24px; + } + .pronub { + color: #4ea6ff; + font-size: 14px; + margin: 5px 0; + } + .proright1 { + display: flex; + justify-content: right; + .textpro { + color: #6d7584; + font-size: 14px; + margin-right: 20px; + } + .ant-progress-text { + color: #4ea6ff; + font-size: 14px; + font-weight: 700; + } + } + } + } + .stage { + display: flex; + height: 49px; + background-color: #eff4fc; align-items: center; .img1 { width: 15px; diff --git a/src/views/projectcenter/TemplateLibrary.vue b/src/views/projectcenter/TemplateLibrary.vue index 24b04069..e04226f8 100644 --- a/src/views/projectcenter/TemplateLibrary.vue +++ b/src/views/projectcenter/TemplateLibrary.vue @@ -41,14 +41,14 @@
- + />
@@ -56,17 +56,143 @@ @@ -158,7 +284,21 @@ export default { } .tmpl_body{ .tmpl_tabbox{ - + .operation { + display: flex; + justify-content: center; + align-items: center; + color: #4ea6ff; + .nselect { + justify-content: center; + align-items: center; + display: flex; + .jc { + margin-left: 20px; + cursor: pointer; + } + } + } } } }