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 @@
+
+
+
+
+
混合制项目
+
/
+
管理者进阶-腾飞班
+
/
+
辩论详情
+
+
+
+ 上一个
+ 下一个
+
+
+
+
+
+ 【辩论】管理者进阶腾飞班 - 关键人才要不要保留?
+
+
+
+
+
+
+
+

+
参与情况
+
+
+
+
+
+
+
+
+ 熊*铭 已选择正方观点
+ 2022.7.1
+
+
+
+
+

+
+ 关键人才掌握核心技术
+ 人才流失会对团队带来不良影响
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+
+ 576票
+
+ 235票
+
+
+
+
+
+
+
+
+
+ 熊*铭 已选择反方观点
+ 2022.7.1
+
+
+
+
+

+
+ “能分开的都不是爱情”
+ 留住的留不住心,随他去
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

+
辩论时间
+
+
+
+
+ 2022-7-20
+ 00:00 至 2022-8-29
+ 23:59:59
+
+
+
+ 距离结束还有
+ 123 小时 42 分钟
+
+
+
+
+

+
辩论说明
+
+
+
+
+ 为提高核心项目讲解体验,现向广大学员征集较为接受的授课方式,每位学员可投票2个选项
+ ,我们将选 取最高选项的两个做后续讲解。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
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 @@
-
-
序:产品经理从初级到中级
-
-

-
进行中
+
+
+
{{ i.title }}
+
+

+
进行中
+
+
+

+
+ 未开始
+
+
+
+
+
+
{{ value.name }}
+
+
+
当前进度
+
+
+
+
+
+ {{ value.progress }}%
+
+
+
+
+
+
+ 去上课
+
+

+
-
必修
-
在线
-
#通用力
+
+
+
+
+
+
+
+
+ 请各位选课的同学提前阅读本课程的
+ “教学大纲与计划”“课程考核要求”与“学习要求”
+ ,并按给定的中学化学教学主题分好小组
+ 每位同学在网上学习的活动轨迹都会自动被系统记录将作为大家个人线上参与的评价依据;
+ 请大家务必在规定的时间内提交作业,否则会被系统自动记录为“迟交”或“未交”则会影响线上参与的平时成
+ 绩;
+
+
+
+
+
+
![]()
+
{{ value.name }}
+
+

+
下载
+
+
+
+
+
+
+
+
+
+
+
+

+
个人信息
+
+
+
+
![]()
+
+
+
{{ el.name }}
+
+
![]()
+
+
+
{{ el.introduce }}
+
+
+
+
+
+

+
学习进度
+
+
+
+
+
+
+
+
-
@@ -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);
+ }
+ }
+ }
}
}
}