|
|
@@ -3,7 +3,11 @@
|
|
|
<!-- <div class="pb_head">
|
|
|
<span>我的资料</span>
|
|
|
</div> -->
|
|
|
- <div class="pb_content_body">
|
|
|
+ <div class="pb_content_body" style="position: relative">
|
|
|
+ <div class="write_togother" v-if="this.steps == 3">
|
|
|
+ <div class="write_people">陈伟涛、琳珠正在协同本课程..</div>
|
|
|
+ <div class="end_write">结束协同</div>
|
|
|
+ </div>
|
|
|
<div class="left">
|
|
|
<div class="tips">请跟随下面的步骤,逐步上传你的课程或房间內容:</div>
|
|
|
<div class="info_steps">
|
|
|
@@ -20,13 +24,13 @@
|
|
|
<div class="info_solid"></div>
|
|
|
<div class="info_steps">
|
|
|
<span class="" :class="steps > 2 ? 'steps_active' : ''"
|
|
|
- >{{ this.steps > 4 ? "√" : "3" }} </span
|
|
|
+ >{{ this.steps > 2 ? "√" : "3" }} </span
|
|
|
><span>上传课程内容</span>
|
|
|
</div>
|
|
|
<div class="info_solid"></div>
|
|
|
<div class="info_steps">
|
|
|
<span class="" :class="steps > 3 ? 'steps_active' : ''"
|
|
|
- >{{ this.steps > 4 ? "√" : "4" }} </span
|
|
|
+ >{{ this.steps > 3 ? "√" : "4" }} </span
|
|
|
><span>上传成功</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -126,10 +130,36 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div style="flex: 0.5 1 0%;margin-top: 30px;">
|
|
|
+ <div style="flex: 0.5 1 0%; margin-top: 30px">
|
|
|
<div class="bInfo_title">
|
|
|
<span style="color: red">*</span>选择项目成员
|
|
|
</div>
|
|
|
+ <div class="people">
|
|
|
+ <div class="people_top">
|
|
|
+ <div class="people_nav">选择成员</div>
|
|
|
+ <div class="people_top_right">
|
|
|
+ <div class="people_search">
|
|
|
+ <el-input
|
|
|
+ placeholder="搜索成员"
|
|
|
+ v-model="searchPeople"
|
|
|
+ ></el-input>
|
|
|
+ <div class="search_img">
|
|
|
+ <img src="../../assets/icon/search.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="people_name">
|
|
|
+ <el-checkbox>廖志伟</el-checkbox>
|
|
|
+ <el-checkbox>楚王辉</el-checkbox>
|
|
|
+ <el-checkbox>陈丽婷</el-checkbox>
|
|
|
+ <el-checkbox>陈丽婷</el-checkbox>
|
|
|
+ <el-checkbox>廖志伟</el-checkbox>
|
|
|
+ <el-checkbox>楚王辉</el-checkbox>
|
|
|
+ <el-checkbox>陈丽婷</el-checkbox>
|
|
|
+ <el-checkbox>陈丽婷</el-checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -148,7 +178,7 @@
|
|
|
:class="unitIndex == index ? 'cru_selected' : 'cru_select'"
|
|
|
@click="unitSet(index)"
|
|
|
>
|
|
|
- 第{{ index + 1 }}单元
|
|
|
+ 第{{ index + 1 }}阶段
|
|
|
</div>
|
|
|
<img
|
|
|
src="../../assets/line.png"
|
|
|
@@ -161,7 +191,7 @@
|
|
|
<div class="chapter_box" style="max-height: 500px">
|
|
|
<div>
|
|
|
<div class="chapter_contentbox">
|
|
|
- <div>第{{ unitIndex + 1 }}单元</div>
|
|
|
+ <div>第{{ unitIndex + 1 }}阶段</div>
|
|
|
<div>
|
|
|
<input
|
|
|
type="text"
|
|
|
@@ -217,85 +247,132 @@
|
|
|
<div v-if="this.steps == 3">
|
|
|
<div class="basic_box">
|
|
|
<h3 class="info_title">项目内容填写</h3>
|
|
|
- <div>
|
|
|
- <div class="bInfo_title">
|
|
|
- <span style="color: red">*</span>项目名称
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <input
|
|
|
- type="text"
|
|
|
- placeholder="项目名称"
|
|
|
- class="binfo_input"
|
|
|
- v-model="courseName"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <div class="bInfo_title">
|
|
|
- <span style="color: red">*</span>简要描述
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <textarea
|
|
|
- rows="4"
|
|
|
- placeholder="简要描述"
|
|
|
- class="binfo_input"
|
|
|
- cols=""
|
|
|
- v-model="courseText"
|
|
|
- ></textarea>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div style="display: flex">
|
|
|
- <div style="flex: 0.5 1 0%; margin: 0 20px 0 0">
|
|
|
- <div class="bInfo_title">
|
|
|
- 课程封面
|
|
|
- <div class="chapter_beizhu">PNG,GIF,JPEG</div>
|
|
|
- </div>
|
|
|
- <div class="chapter_uploadBox1">
|
|
|
- <div
|
|
|
- class="chapter_add"
|
|
|
- v-if="unitJson[unitIndex].cover.length == 0"
|
|
|
- @click="addImg($event)"
|
|
|
- >
|
|
|
- <div class="chapter_add_l">+</div>
|
|
|
- <div class="chapter_add_r">添加文件</div>
|
|
|
+ <div class="big_box">
|
|
|
+ <div class="left_first">
|
|
|
+ <div>
|
|
|
+ <div class="bInfo_title">
|
|
|
+ <span style="color: red">*</span>项目名称
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
<input
|
|
|
- type="file"
|
|
|
- accept="image/png,image/gif,image/jpeg"
|
|
|
- style="display: none"
|
|
|
- @change="beforeUpload1"
|
|
|
+ type="text"
|
|
|
+ placeholder="项目名称"
|
|
|
+ class="binfo_input"
|
|
|
+ v-model="courseName"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div style="flex: 0.5 1 0%">
|
|
|
- <div class="bInfo_title">
|
|
|
- 课程预览视频
|
|
|
- <div class="chapter_beizhu">MP4,M4V,MOV,AVI</div>
|
|
|
+ <div style="margin-top: 30px">
|
|
|
+ <div class="bInfo_title">
|
|
|
+ <span style="color: red">*</span>简要描述
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <textarea
|
|
|
+ rows="4"
|
|
|
+ placeholder="简要描述"
|
|
|
+ class="binfo_input"
|
|
|
+ cols=""
|
|
|
+ v-model="courseText"
|
|
|
+ ></textarea>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="chapter_uploadBox1">
|
|
|
- <div
|
|
|
- class="chapter_add"
|
|
|
- v-if="unitJson[unitIndex].cover.length == 0"
|
|
|
- @click="addImg($event)"
|
|
|
- >
|
|
|
- <div class="chapter_add_l">+</div>
|
|
|
- <div class="chapter_add_r">添加文件</div>
|
|
|
- <input
|
|
|
- type="file"
|
|
|
- accept="image/png,image/gif,image/jpeg"
|
|
|
- style="display: none"
|
|
|
- @change="beforeUpload1"
|
|
|
- />
|
|
|
+ <el-switch
|
|
|
+ v-model="isTeacherSee"
|
|
|
+ active-text="允许给其他老师查看"
|
|
|
+ style="margin: 40px 0 0 25px"
|
|
|
+ >
|
|
|
+ </el-switch>
|
|
|
+ </div>
|
|
|
+ <div class="right_first">
|
|
|
+ <div>
|
|
|
+ <div style="flex: 0.5 1 0%; margin: 0 20px 0 0">
|
|
|
+ <div class="bInfo_title">
|
|
|
+ 课程封面
|
|
|
+ <div class="chapter_beizhu">PNG,GIF,JPEG</div>
|
|
|
+ </div>
|
|
|
+ <div class="chapter_uploadBox1">
|
|
|
+ <div
|
|
|
+ class="chapter_add"
|
|
|
+ v-if="unitJson[unitIndex].cover.length == 0"
|
|
|
+ @click="addImg($event)"
|
|
|
+ >
|
|
|
+ <div class="chapter_add_l">+</div>
|
|
|
+ <div class="chapter_add_r">添加文件</div>
|
|
|
+ <input
|
|
|
+ type="file"
|
|
|
+ accept="image/png,image/gif,image/jpeg"
|
|
|
+ style="display: none"
|
|
|
+ @change="beforeUpload1"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="unitJson[unitIndex].cover.length != 0"
|
|
|
+ class="chapter_upload_move"
|
|
|
+ style="height: 100%"
|
|
|
+ >
|
|
|
+ <div class="chapter_upload_t" style="width: 100%"></div>
|
|
|
+ <div class="chapter_upload_o" style="top: 7px">
|
|
|
+ <div class="chapter_upload_l">
|
|
|
+ <div class="chapter_upload_l_i"></div>
|
|
|
+ </div>
|
|
|
+ <div class="chapter_upload_ic">
|
|
|
+ <div class="chapter_upload_ic_l">
|
|
|
+ <div
|
|
|
+ style="
|
|
|
+ backgroundposition: -5px -131px;
|
|
|
+ display: block;
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="chapter_upload_ic_r"
|
|
|
+ style="cursor: pointer"
|
|
|
+ >
|
|
|
+ <div></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chapter_upload_n">
|
|
|
+ {unitJson[unitIndex].cover[0].substr(unitJson[unitIndex].
|
|
|
+ [0].lastIndexOf("/")).slice(1)}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="flex: 0.5 1 0%; margin-top: 30px">
|
|
|
+ <div class="bInfo_title">
|
|
|
+ <span style="color: red">*</span>选择项目成员
|
|
|
+ </div>
|
|
|
+ <div class="people">
|
|
|
+ <div class="people_top">
|
|
|
+ <div class="people_nav">选择成员</div>
|
|
|
+ <div class="people_top_right">
|
|
|
+ <div class="people_search">
|
|
|
+ <el-input
|
|
|
+ placeholder="搜索成员"
|
|
|
+ v-model="searchPeople"
|
|
|
+ ></el-input>
|
|
|
+ <div class="search_img">
|
|
|
+ <img src="../../assets/icon/search.png" alt="" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="people_name">
|
|
|
+ <el-checkbox>廖志伟</el-checkbox>
|
|
|
+ <el-checkbox>楚王辉</el-checkbox>
|
|
|
+ <el-checkbox>陈丽婷</el-checkbox>
|
|
|
+ <el-checkbox>陈丽婷</el-checkbox>
|
|
|
+ <el-checkbox>廖志伟</el-checkbox>
|
|
|
+ <el-checkbox>楚王辉</el-checkbox>
|
|
|
+ <el-checkbox>陈丽婷</el-checkbox>
|
|
|
+ <el-checkbox>陈丽婷</el-checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <el-switch
|
|
|
- v-model="isTeacherSee"
|
|
|
- active-text="允许给其他老师查看"
|
|
|
- style="margin: 40px 0 0 25px"
|
|
|
- >
|
|
|
- </el-switch>
|
|
|
<div class="line"></div>
|
|
|
<div class="cru_selectBox">
|
|
|
<div
|
|
|
@@ -305,7 +382,7 @@
|
|
|
:class="unitIndex == index ? 'cru_selected' : 'cru_select'"
|
|
|
@click="unitSet(index)"
|
|
|
>
|
|
|
- 第{{ index + 1 }}单元
|
|
|
+ 第{{ index + 1 }}阶段
|
|
|
</div>
|
|
|
<img
|
|
|
src="../../assets/line.png"
|
|
|
@@ -318,7 +395,7 @@
|
|
|
<div class="chapter_box" style="max-height: 500px">
|
|
|
<div>
|
|
|
<div class="chapter_contentbox">
|
|
|
- <div>第{{ unitIndex + 1 }}单元</div>
|
|
|
+ <div>第{{ unitIndex + 1 }}阶段</div>
|
|
|
<div>
|
|
|
<input
|
|
|
type="text"
|
|
|
@@ -438,6 +515,22 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div v-if="this.steps == 4">
|
|
|
+ <div class="basic_box_success">
|
|
|
+ <div class="right_img">
|
|
|
+ <img src="../../assets/icon/right.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <div style="font-weight: bold">成功</div>
|
|
|
+ <div>您的课程编号</div>
|
|
|
+ <div class="number">178</div>
|
|
|
+ <div class="success_button">
|
|
|
+ <div class="look_course">预览课程</div>
|
|
|
+ <div class="attend_others" @click="dialogVisible = true">
|
|
|
+ 邀请老师协同编辑
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="info_btnBox">
|
|
|
<button
|
|
|
class="info_btn"
|
|
|
@@ -451,7 +544,7 @@
|
|
|
v-if="this.steps > 1 && this.steps != 5"
|
|
|
@click="lastSteps"
|
|
|
>
|
|
|
- {{ this.steps == 3 ? "返回修改" : "上一步" }}
|
|
|
+ {{ this.steps == 4 ? "返回首页" : "上一步" }}
|
|
|
</button>
|
|
|
<button class="info_btn" v-if="this.steps < 5" @click="nextSteps">
|
|
|
{{ this.steps == 3 ? "确认上传" : "下一步" }}
|
|
|
@@ -459,6 +552,21 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <el-dialog
|
|
|
+ title="提示"
|
|
|
+ :visible.sync="dialogVisible"
|
|
|
+ :append-to-body="true"
|
|
|
+ width="25%"
|
|
|
+ :before-close="handleClose"
|
|
|
+ class="dialog_diy"
|
|
|
+ >
|
|
|
+ <div>请复制该链接邀请协同编辑</div>
|
|
|
+ <div>http://www.boomyon.com/index-zhang.com</div>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary">复制链接分享</el-button>
|
|
|
+ <el-button @click="dialogVisible = false">取消</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -477,7 +585,9 @@
|
|
|
homeworkList: [{ name: "" }],
|
|
|
noneBtnImg: false,
|
|
|
unitIndex: 0,
|
|
|
+ dialogVisible: false,
|
|
|
isTeacherSee: false,
|
|
|
+ searchPeople: "",
|
|
|
unitJson: [
|
|
|
{
|
|
|
dyName: "", //单元标题
|
|
|
@@ -534,7 +644,11 @@
|
|
|
return _guid;
|
|
|
},
|
|
|
lastSteps() {
|
|
|
- this.steps--;
|
|
|
+ if (this.steps == 4) {
|
|
|
+ window.location.href = "./course.vue";
|
|
|
+ } else {
|
|
|
+ this.steps--;
|
|
|
+ }
|
|
|
},
|
|
|
nextSteps() {
|
|
|
var a = 1;
|
|
|
@@ -554,6 +668,8 @@
|
|
|
} else {
|
|
|
this.$message.error("请输入单元标题及开始和结束时间");
|
|
|
}
|
|
|
+ } else if (this.steps == 3) {
|
|
|
+ this.steps++;
|
|
|
}
|
|
|
},
|
|
|
unitSet(i) {
|
|
|
@@ -824,7 +940,14 @@
|
|
|
margin: 50px auto;
|
|
|
position: relative;
|
|
|
}
|
|
|
-
|
|
|
+ .basic_box_success {
|
|
|
+ width: 80%;
|
|
|
+ min-height: 455px;
|
|
|
+ margin: 50px auto;
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ border-bottom: 1px solid #bfbfbf;
|
|
|
+ }
|
|
|
.info_title {
|
|
|
font-size: 1.5em;
|
|
|
}
|
|
|
@@ -1266,4 +1389,126 @@
|
|
|
.right_first {
|
|
|
margin-left: 60px;
|
|
|
}
|
|
|
+ .people {
|
|
|
+ border: 1px solid rgb(196, 196, 196);
|
|
|
+ height: 150px;
|
|
|
+ border-radius: 5px;
|
|
|
+ width: 90%;
|
|
|
+ }
|
|
|
+ .people_top {
|
|
|
+ display: flex;
|
|
|
+ width: 100%;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .people_nav,
|
|
|
+ .people_top_right {
|
|
|
+ padding: 20px 0 0 20px;
|
|
|
+ }
|
|
|
+ .people_search {
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .people_search >>> .el-input__inner {
|
|
|
+ height: 25px;
|
|
|
+ width: 70%;
|
|
|
+ }
|
|
|
+ .search_img {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ position: absolute;
|
|
|
+ right: 62px;
|
|
|
+ top: 3px;
|
|
|
+ }
|
|
|
+ .search_img > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .people_name {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ padding: 20px 0 0 25px;
|
|
|
+ flex-direction: row;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .people_name >>> .el-checkbox {
|
|
|
+ width: 17%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .people_name >>> .el-checkbox__label {
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .right_img {
|
|
|
+ width: 150px;
|
|
|
+ height: 150px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .right_img > img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .number {
|
|
|
+ margin-top: 20px;
|
|
|
+ color: #4aa6ff;
|
|
|
+ text-decoration: underline;
|
|
|
+ }
|
|
|
+ .success_button {
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ margin: 5% 0 auto;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: center;
|
|
|
+ }
|
|
|
+ .look_course {
|
|
|
+ margin-right: 40px;
|
|
|
+ background: #3d67bc;
|
|
|
+ width: 200px;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .attend_others {
|
|
|
+ width: 250px;
|
|
|
+ background: #4fb13c;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .dialog_diy >>> .el-dialog__body {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .write_togother {
|
|
|
+ position: absolute;
|
|
|
+ right: 45px;
|
|
|
+ display: flex;
|
|
|
+ top: 5%;
|
|
|
+ }
|
|
|
+ .write_people {
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 50px;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+ .end_write {
|
|
|
+ background: #3d67bc;
|
|
|
+ color: #fff;
|
|
|
+ width: 100px;
|
|
|
+ height: 35px;
|
|
|
+ line-height: 35px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
</style>
|
lcw
