diff --git a/src/App.vue b/src/App.vue index 2fdb5d5..0013bb0 100644 --- a/src/App.vue +++ b/src/App.vue @@ -41,8 +41,10 @@ export default defineComponent({ diff --git a/src/views/debate/debate.vue b/src/views/debate/debate.vue new file mode 100644 index 0000000..5fc9bb8 --- /dev/null +++ b/src/views/debate/debate.vue @@ -0,0 +1,1008 @@ + + + + + + diff --git a/src/views/faceteach/FaceTeach.vue b/src/views/faceteach/FaceTeach.vue index e2ebe64..5a82e5e 100644 --- a/src/views/faceteach/FaceTeach.vue +++ b/src/views/faceteach/FaceTeach.vue @@ -88,8 +88,8 @@
社交产品如何做好模块化处理?
-
必修
-
作业
+
必修
+
作业
提交
@@ -102,8 +102,8 @@ 模块化产品展示相关案例与展示:如何自由组合你的思考?
-
必修
-
考试
+
必修
+
考试
去考试
@@ -273,6 +273,7 @@ export default { width: 100%; margin-top: 20px; display: flex; + align-items: flex-start; .detail { flex: 1; margin-right: 20px; @@ -365,45 +366,7 @@ export default { color: #333330; line-height: 18px; } - .work .active { - width: 82px; - height: 28px; - background: linear-gradient(90deg, #a5d4e0 0%, #b4dce6 100%); - border-radius: 4px; - font-size: 14px; - font-weight: 500; - color: #ffffff; - line-height: 24px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - margin-right: 11px; - } - .work .unactive { - width: 80px; - height: 26px; - border: 1px solid #a5d4e0; - border-radius: 4px; - font-size: 14px; - font-weight: 500; - color: #a5d4e0; - line-height: 24px; - display: flex; - align-items: center; - justify-content: center; - margin-right: 11px; - cursor: pointer; - } - .work .btncolor { - background: linear-gradient(90deg, #84aad2 0%, #a4c5e9 100%); - } - .work .bordercolor { - border: 1px solid #85aad2; - } - .work .fontcolor { - color: rgba(133, 170, 210, 1); - } + .work .submit { width: 126px; height: 46px; @@ -423,7 +386,8 @@ export default { } .teacher { width: 434px; - min-height: 557px; + min-height: 500px; + // height: 10%; background-color: rgba(255, 255, 255, 1); border-radius: 8px; .title { @@ -453,7 +417,7 @@ export default { // min-height: 115px; padding: 25px 0px; display: flex; - align-items: center; + // align-items: center; } .teacheritem .peopleimg { width: 60px; @@ -481,6 +445,7 @@ export default { font-weight: 500; color: #394145; margin-top: 14px; + line-height: 24px; } } } diff --git a/src/views/liveBroadcast/LiveBroadcast.vue b/src/views/liveBroadcast/LiveBroadcast.vue new file mode 100644 index 0000000..ab4aaf6 --- /dev/null +++ b/src/views/liveBroadcast/LiveBroadcast.vue @@ -0,0 +1,531 @@ + + + + + + diff --git a/src/views/moreActive/MoreActive.vue b/src/views/moreActive/MoreActive.vue new file mode 100644 index 0000000..c16675c --- /dev/null +++ b/src/views/moreActive/MoreActive.vue @@ -0,0 +1,394 @@ + + + + + + diff --git a/src/views/roadmap/PathDetails.vue b/src/views/roadmap/PathDetails.vue index 2017e0e..6465481 100644 --- a/src/views/roadmap/PathDetails.vue +++ b/src/views/roadmap/PathDetails.vue @@ -11,18 +11,269 @@
-
-
序:产品经理从初级到中级
-
- -
进行中
+
+
+
{{ i.title }}
+
+ +
进行中
+
+
+ +
+ 未开始 +
+
+
+
+
+
{{ value.name }}
+
+
+ {{ item.name }} +
+
+
+
当前进度
+
+
+ +
+
+ {{ value.progress }}% +
+
+
+
+
+
+ 去上课 +
+ +
-
必修
-
在线
-
#通用力
+ +
+
+ +
+ + +
+ 请各位选课的同学提前阅读本课程的 + “教学大纲与计划”“课程考核要求”与“学习要求” + ,并按给定的中学化学教学主题分好小组
+ 每位同学在网上学习的活动轨迹都会自动被系统记录将作为大家个人线上参与的评价依据;
+ 请大家务必在规定的时间内提交作业,否则会被系统自动记录为“迟交”或“未交”则会影响线上参与的平时成 + 绩;
+
+
+ +
+
+ +
{{ value.name }}
+
+ +
下载
+
+
+
+
+
+
+ + +
+
+
+ +
个人信息
+
+
+
+ +
+
+
{{ el.name }}
+
+ +
+
+
{{ el.introduce }}
+
+
+
+
+
+ +
学习进度
+
+
+
+
上次学到:启航班-领导寄语
+
继续学习
+
+
+
+
总进度
+
+
+ +
+
+ 32% +
+
+
+
+
+
+
必修进度
+
+
+ +
+
+ 10% +
+
+
+
+
+
+
-
@@ -33,7 +284,190 @@ import { reactive, toRefs } from "vue"; export default { name: "PathDetails", setup() { - const state = reactive({}); + const state = reactive({ + activeName: "first", + course: [ + { + state: 1, //1:进行中 2:未开始 + title: "序:产品经理从初级到中级", + courseItem: [ + { + id: 1, + name: "人工智能启蒙就讲解(上)", + tag: [ + { + classify: 1, //1:必修 2:选修 3:在线、测评等 4:标签 + name: "必修", + }, + { + classify: 3, + name: "在线", + }, + { + classify: 4, + name: "#通用力", + }, + { + classify: 4, + name: "#前沿趋势", + }, + ], + progress: 48, + }, + { + id: 1, + name: "人工智能启蒙就讲解(下)", + tag: [ + { + classify: 2, + name: "选修", + }, + { + classify: 3, + name: "测评", + }, + { + classify: 4, + name: "#通用力", + }, + { + classify: 4, + name: "#前沿趋势", + }, + ], + progress: 0, + }, + ], + }, + { + state: 2, //1:进行中 2:未开始 + title: "第一讲:中级产品经理的思考逻辑", + courseItem: [ + { + id: 1, + name: "趣味课前小测 - MBTI测试:你适合做哪个方向?", + tag: [ + { + classify: 1, //1:必修 2:选修 3:在线、测评等 4:标签 + name: "必修", + }, + { + classify: 3, + name: "测评", + }, + ], + progress: 48, + }, + { + id: 1, + name: "趣味课前小测 - MBTI测试:你适合做哪个方向?", + tag: [ + { + classify: 2, + name: "选修", + }, + { + classify: 3, + name: "外部链接", + }, + ], + progress: 0, + }, + ], + }, + { + state: 2, //1:进行中 2:未开始 + title: "第二讲:模块化产品展示", + courseItem: [ + { + id: 1, + name: "模块化产品展示相关案例与展示:如何自由组合你的思考?", + tag: [ + { + classify: 1, //1:必修 2:选修 3:在线、测评等 4:标签 + name: "必修", + }, + { + classify: 3, + name: "测评", + }, + ], + progress: 48, + }, + { + id: 1, + name: "社交产品如何做好模块化处理?", + tag: [ + { + classify: 2, + name: "选修", + }, + { + classify: 3, + name: "作业", + }, + ], + progress: 0, + }, + { + id: 1, + name: "微信与Telegram哪个平台的功能模块化做的最好?", + tag: [ + { + classify: 2, + name: "选修", + }, + { + classify: 3, + name: "辩论", + }, + ], + progress: 0, + }, + ], + }, + ], + sharedoc: [ + { + id: 1, + name: "项目参考文档.doc", + img: require("../../assets/image/file/word.png"), + }, + { + id: 2, + name: "人工智能启蒙讲解讲义.pptx", + img: require("../../assets/image/file/ppt.png"), + }, + { + id: 3, + name: "中级产品经理必备工具.pdf", + img: require("../../assets/image/file/pdf.png"), + }, + { + id: 4, + name: "Python学习入门讲义.zip", + img: require("../../assets/image/file/zip.png"), + }, + { + id: 5, + name: "Axure RP10更新内容.md", + img: require("../../assets/image/file/md.png"), + }, + ], + teacher: [ + { + id: 1, + name: "王星天(显示事业)", + introduce: "教师是学生的镜子,学生是老师的影子。", + peopleimg: require("../../assets/image/img.jpg"), + medal: [ + require("../../assets/image/medal/medal1.png"), + require("../../assets/image/medal/medal2.png"), + require("../../assets/image/medal/medal3.png"), + ], + }, + ], + }); const handleClick = (tab, event) => { console.log(tab, event); }; @@ -79,6 +513,7 @@ export default { align-items: center; background-color: rgba(249, 249, 249, 1); margin-top: 27px; + margin-bottom: 19px; .titleL { font-size: 16px; font-weight: 800; @@ -97,12 +532,198 @@ export default { margin-left: 2px; } } + .course { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + margin-bottom: 32px; + margin-left: 26px; + .coursename { + font-size: 14px; + font-weight: 500; + color: #333330; + line-height: 24px; + } + .coursetag { + display: flex; + flex-wrap: wrap; + } + .progressBox { + font-size: 14px; + font-weight: 500; + color: #677d86; + margin-top: 24px; + .progress { + display: flex; + align-items: center; + } + .progress .el-progress-bar__outer { + background-color: rgba(232, 241, 254, 1); + } + } + .goclass { + width: 126px; + height: 46px; + background: #2478ff; + box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7); + border-radius: 4px; + font-size: 16px; + font-weight: 800; + color: #ffffff; + display: flex; + align-items: center; + justify-content: center; + margin-right: 37px; + cursor: pointer; + } + } } .detailR { width: 434px; - min-height: 557px; - background-color: rgba(255, 255, 255, 1); - border-radius: 8px; + .detailRT { + min-height: 298px; + background: #ffffff; + border-radius: 8px; + .el-tabs__item { + height: 56px; + padding: 10px 33px 0px 27px; + font-size: 14px; + font-weight: 500; + } + .el-tabs__nav-wrap::after { + background-color: rgba(56, 125, 247, 0.2); + } + .notice { + padding: 15px 43px 30px 47px; + font-size: 14px; + font-weight: 500; + color: #333330; + line-height: 24px; + } + .sharedocname { + width: 259px; + font-size: 14px; + font-weight: 400; + color: #677d86; + margin-left: 20px; + line-height: 24px; + } + .download { + display: flex; + align-items: center; + margin-left: 20px; + cursor: pointer; + font-size: 16px; + font-weight: 400; + color: #2478ff; + } + } + .detailRB { + min-height: 459px; + background: #ffffff; + border-radius: 8px; + margin-top: 17px; + .info .title { + display: flex; + align-items: center; + padding-top: 39px; + position: relative; + margin-left: 48px; + } + .info .title .text { + margin-left: 8px; + font-size: 16px; + color: rgba(51, 51, 51, 1); + font-weight: 800; + } + .info .title .box { + width: 75px; + height: 10px; + background-color: rgba(36, 120, 255, 0.15); + position: absolute; + left: 23px; + top: 53px; + } + .info .teacheritem { + margin-left: 48px; + margin-right: 48px; + margin-top: 30px; + display: flex; + // align-items: center; + } + .info .teacheritem .peopleimg { + width: 60px; + height: 60px; + border-radius: 30px; + } + .info .teacheritem .teacherName { + font-size: 14px; + font-weight: bold; + color: #394145; + display: flex; + align-items: center; + width: 260px; + } + .info .teacheritem .teacherName .teacherMedal { + width: 17px; + height: 19px; + margin-right: 4px; + display: flex; + align-items: center; + } + .info .teacheritem .introduce { + width: 260px; + font-size: 14px; + font-weight: 500; + color: #394145; + margin-top: 14px; + line-height: 24px; + } + .info .rate { + display: flex; + align-items: center; + justify-content: space-between; + margin-top: 29px; + margin-left: 48px; + margin-right: 26px; + } + .info .rate .ratetext { + width: 259px; + font-size: 14px; + font-weight: 500; + color: #677d86; + line-height: 24px; + } + .info .rate .ratebtn { + width: 86px; + height: 36px; + border: 1px solid #2478ff; + border-radius: 4px; + font-size: 14px; + font-weight: 500; + color: #2478ff; + line-height: 24px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + } + .info .progressBox { + font-size: 14px; + font-weight: 500; + color: #677d86; + margin-top: 16px; + margin-left: 44px; + .progress { + display: flex; + align-items: center; + } + .progress .el-progress-bar__outer { + background-color: rgba(232, 241, 254, 1); + } + } + } } } }