|
|
@@ -3,30 +3,38 @@
|
|
|
<div class="pec_main" v-loading="pageLoading">
|
|
|
<div class="pec_header">
|
|
|
<div class="pec_h_left">
|
|
|
+ <div
|
|
|
+ @click.stop="back"
|
|
|
+ class="backBtn"
|
|
|
+ v-if="screenType!=2"
|
|
|
+ >
|
|
|
+ <img src="../../assets/icon/newIcon/return.svg" alt="" />
|
|
|
+ </div>
|
|
|
+ <div v-if="tcid" class="class-info-group">
|
|
|
+ <span class="class-label">班级</span>
|
|
|
+ <span class="class-value">{{ className }}</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="tcid" class="class-info-group">
|
|
|
+ <span class="class-label" v-if="inviteCode">识别码</span>
|
|
|
+ <span class="class-value" v-if="inviteCode">{{ inviteCode }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pec_h_center">
|
|
|
<div class="pec_h_l_title">
|
|
|
<span>{{ courseDetail.title }}</span>
|
|
|
</div>
|
|
|
-
|
|
|
- <div v-if="tcid && inviteCode" class="inviteBox" style="margin-left: 20px;">
|
|
|
- <span>随机码：{{ inviteCode }}</span>
|
|
|
- </div>
|
|
|
</div>
|
|
|
-
|
|
|
<div class="pec_h_right">
|
|
|
<div class="pec_h_r_btnArea">
|
|
|
- <el-tooltip effect="light" content="刷新" placement="top">
|
|
|
+ <!-- <el-tooltip effect="light" content="刷新" placement="top">
|
|
|
<div class="pec_h_r_btn_refresh" @click="refreshCourse">
|
|
|
<img src="../../assets/icon/newIcons/refresh.png" alt="" />
|
|
|
<span>刷新</span>
|
|
|
</div>
|
|
|
- </el-tooltip>
|
|
|
-
|
|
|
- <div
|
|
|
- @click.stop="back"
|
|
|
- v-if="screenType!=2"
|
|
|
- >
|
|
|
- <img src="../../assets/icon/newIcon/return.png" alt="" />
|
|
|
- <span style="color: #000">返回</span>
|
|
|
+ </el-tooltip> -->
|
|
|
+ <div class="pec_h_r_btn_afterClass" @click="afterClass">
|
|
|
+ <img src="../../assets/icon/newIcon/afterClass.svg" alt="" />
|
|
|
+ <span>下课</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -57,6 +65,7 @@ export default {
|
|
|
screenType: this.$route.query.screenType,
|
|
|
tcid2: this.$route.query.tcid,
|
|
|
tcid:"",
|
|
|
+ className:"",
|
|
|
showIframe: false,
|
|
|
iframeSrc: "",
|
|
|
courseDetail: {},
|
|
|
@@ -121,7 +130,13 @@ export default {
|
|
|
this.showIframe = false;
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
- let _url = `https://ppt.cocorobo.cn/?mode=student&courseid=${this.id}&userid=${this.userid}&oid=${this.oid}&org=${this.org}&cid=${this.tcid}&type=${this.tType}`;
|
|
|
+ let api = ''
|
|
|
+ if(this.$region == 'beta'){
|
|
|
+ api = 'https://beta.ppt.cocorobo.cn'
|
|
|
+ }else {
|
|
|
+ api = 'https://ppt.cocorobo.cn'
|
|
|
+ }
|
|
|
+ let _url = api + `/?mode=student&courseid=${this.id}&userid=${this.userid}&oid=${this.oid}&org=${this.org}&cid=${this.tcid}&type=${this.tType}`;
|
|
|
|
|
|
this.iframeSrc = _url;
|
|
|
|
|
|
@@ -143,6 +158,10 @@ export default {
|
|
|
}
|
|
|
return commonElements;
|
|
|
},
|
|
|
+ async getClassName(){
|
|
|
+ let courseGrade = await this.ajax.get(this.$store.state.api + "getClassById", { id: this.tcid2 });
|
|
|
+ this.className = courseGrade.data[0][0].grade;
|
|
|
+ },
|
|
|
back(){
|
|
|
if(this.tType!=2){
|
|
|
this.goTo(
|
|
|
@@ -177,7 +196,10 @@ export default {
|
|
|
this.screenType
|
|
|
)
|
|
|
}
|
|
|
- }
|
|
|
+ },
|
|
|
+ afterClass(){
|
|
|
+ this.$message.warning('下课功能暂未开放')
|
|
|
+ },
|
|
|
},
|
|
|
destroyed(){
|
|
|
if(this.courseDetail.userid == this.userid && this.tcid2 && this.org == '16ace517-b5c7-4168-a9bb-a9e0035df840'){
|
|
|
@@ -202,6 +224,7 @@ export default {
|
|
|
hour12: false,
|
|
|
timeZone: "Asia/Shanghai"
|
|
|
}).replace(/\//g, "-")
|
|
|
+ this.getClassName()
|
|
|
this.getCourseDetail();
|
|
|
}
|
|
|
};
|
|
|
@@ -215,7 +238,6 @@ export default {
|
|
|
flex-direction: column;
|
|
|
overflow: hidden;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 20px;
|
|
|
background-color: #f2f2f2;
|
|
|
}
|
|
|
|
|
|
@@ -223,18 +245,20 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-color: #fff;
|
|
|
- border-radius: 12px;
|
|
|
}
|
|
|
|
|
|
.pec_header {
|
|
|
width: 100%;
|
|
|
- height: 80px;
|
|
|
- border-radius: 12px 12px 0 0;
|
|
|
+ height: 50px;
|
|
|
+ background: #FCCF00;
|
|
|
box-sizing: border-box;
|
|
|
- border-bottom: solid 1px #cad1dc;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ box-shadow: 0px 4px 12px 0px #3648601F;
|
|
|
+ padding: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
.pec_h_left {
|
|
|
@@ -242,8 +266,22 @@ export default {
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-left: 20px;
|
|
|
+ gap: 25px;
|
|
|
+ /* 保持左侧靠左 */
|
|
|
+}
|
|
|
+
|
|
|
+.pec_h_center {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 0;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ z-index: 1;
|
|
|
+}
|
|
|
+
|
|
|
+.pec_h_l_title {
|
|
|
font-weight: bold;
|
|
|
font-size: 20px;
|
|
|
color: #0e1e33;
|
|
|
@@ -254,8 +292,6 @@ export default {
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- justify-content: center;
|
|
|
- margin-right: 20px;
|
|
|
}
|
|
|
|
|
|
.pec_h_r_btnArea {
|
|
|
@@ -274,7 +310,6 @@ export default {
|
|
|
background-color: #f0f4fa;
|
|
|
border-radius: 4px;
|
|
|
cursor: pointer;
|
|
|
- margin-right: 10px;
|
|
|
font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
color: #000;
|
|
|
@@ -293,18 +328,56 @@ export default {
|
|
|
border-color: #0061ff;
|
|
|
}
|
|
|
|
|
|
-.pec_content {
|
|
|
+.pec_h_r_btnArea > .pec_h_r_btn_afterClass{
|
|
|
+ border-color:#F0E1DD;
|
|
|
+ background-color: #FFF7F5;
|
|
|
+ color: #F53F3F;
|
|
|
+}
|
|
|
+
|
|
|
+.backBtn {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.backBtn img {
|
|
|
width: 100%;
|
|
|
- height: calc(100% - 80px);
|
|
|
- border-radius: 0 0 12px 12px;
|
|
|
- background-color: #fff;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
|
|
|
+.class-info-group {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ gap: 10px;
|
|
|
+}
|
|
|
|
|
|
-.inviteBox {
|
|
|
- font-size: 14px;
|
|
|
- /* margin-top: 5px; */
|
|
|
- color: #00000099;
|
|
|
+.class-label {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #222;
|
|
|
+ margin-right: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.class-value {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #222;
|
|
|
+ background: #FFFFFF3D;
|
|
|
+ border: 1px solid #00000080;
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 5px 18px;
|
|
|
+ min-width: 60px;
|
|
|
text-align: center;
|
|
|
+ display: inline-block;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.pec_content {
|
|
|
+ width: 100%;
|
|
|
+ height: calc(100% - 80px);
|
|
|
+ border-radius: 0 0 12px 12px;
|
|
|
+ background-color: #fff;
|
|
|
}
|
|
|
</style>
|
