|
|
@@ -3,55 +3,37 @@
|
|
|
<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 || tType == 1">
|
|
|
- <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 class="free-browse-switch" v-if="courseDetail.userid == userid">
|
|
|
- <span class="switch-label" :class="{ active: freeBrowse }">{{ freeBrowse ? '自由浏览' : '跟随模式' }}</span>
|
|
|
- <el-switch
|
|
|
- v-model="freeBrowse"
|
|
|
- :active-value="true"
|
|
|
- :inactive-value="false"
|
|
|
- class="custom-switch"
|
|
|
- active-color="#FCCF00"
|
|
|
- inactive-color="#F53F3F"
|
|
|
- @change="onFreeBrowseChange"
|
|
|
- ></el-switch>
|
|
|
- </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 class="pec_h_r_btn_afterClass" @click="afterClass" v-if="courseDetail.userid == userid">
|
|
|
- <img src="../../assets/icon/newIcon/afterClass.svg" alt="" />
|
|
|
- <span>下课</span>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ <div
|
|
|
+ @click.stop="back"
|
|
|
+ v-if="tType == 1 || screenType!=2"
|
|
|
+ >
|
|
|
+ <img src="../../assets/icon/newIcon/return.png" alt="" />
|
|
|
+ <span style="color: #000">返回</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="pec_content">
|
|
|
- <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;clipboard-write;clipboard-read"
|
|
|
- webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="no" border="0" :src="iframeSrc"
|
|
|
- v-if="showIframe" style="width: 100%; height: 100%; border: none" ref="ppt"></iframe>
|
|
|
+ <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;clipboard-write;clipboard-read" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" frameborder="no" border="0" :src="iframeSrc" v-if="showIframe" style="width: 100%; height: 100%; border: none"></iframe>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -74,15 +56,13 @@ export default {
|
|
|
courseType: this.$route.query.type,
|
|
|
screenType: this.$route.query.screenType,
|
|
|
tcid2: this.$route.query.tcid,
|
|
|
- tcid: "",
|
|
|
- className: "",
|
|
|
+ tcid:"",
|
|
|
showIframe: false,
|
|
|
iframeSrc: "",
|
|
|
courseDetail: {},
|
|
|
pageLoading: false,
|
|
|
- inviteCode: "",
|
|
|
+ inviteCode:"",
|
|
|
startTime: "",
|
|
|
- freeBrowse: true, // 默认自由浏览
|
|
|
opertimer: null, // 定时器
|
|
|
};
|
|
|
},
|
|
|
@@ -142,13 +122,7 @@ export default {
|
|
|
this.showIframe = false;
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
- 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}`;
|
|
|
+ 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}`;
|
|
|
|
|
|
this.iframeSrc = _url;
|
|
|
|
|
|
@@ -170,59 +144,41 @@ 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) {
|
|
|
+ back(){
|
|
|
+ if(this.tType!=2){
|
|
|
this.goTo(
|
|
|
'/courseDetail?userid=' +
|
|
|
- this.userid +
|
|
|
- '&oid=' +
|
|
|
- this.oid +
|
|
|
- '&org=' +
|
|
|
- this.org +
|
|
|
- '&cid=' +
|
|
|
- this.classId +
|
|
|
- '&courseId=' +
|
|
|
- this.id +
|
|
|
- '&tType=' +
|
|
|
- this.tType +
|
|
|
- '&screenType=' +
|
|
|
- this.screenType
|
|
|
+ this.userid +
|
|
|
+ '&oid=' +
|
|
|
+ this.oid +
|
|
|
+ '&org=' +
|
|
|
+ this.org +
|
|
|
+ '&cid=' +
|
|
|
+ this.classId +
|
|
|
+ '&courseId=' +
|
|
|
+ this.id +
|
|
|
+ '&tType=' +
|
|
|
+ this.tType +
|
|
|
+ '&screenType=' +
|
|
|
+ this.screenType
|
|
|
)
|
|
|
- } else {
|
|
|
+ }else{
|
|
|
this.goTo(
|
|
|
'/index?userid=' +
|
|
|
- this.userid +
|
|
|
- '&oid=' +
|
|
|
- this.oid +
|
|
|
- '&org=' +
|
|
|
- this.org +
|
|
|
- '&cid=' +
|
|
|
- this.classId +
|
|
|
- '&tType=' +
|
|
|
- this.tType +
|
|
|
- '&screenType=' +
|
|
|
- this.screenType
|
|
|
+ this.userid +
|
|
|
+ '&oid=' +
|
|
|
+ this.oid +
|
|
|
+ '&org=' +
|
|
|
+ this.org +
|
|
|
+ '&cid=' +
|
|
|
+ this.classId +
|
|
|
+ '&tType=' +
|
|
|
+ this.tType +
|
|
|
+ '&screenType=' +
|
|
|
+ this.screenType
|
|
|
)
|
|
|
}
|
|
|
},
|
|
|
- afterClass() {
|
|
|
- this.$confirm('确定下课吗，会让所有正在上课的学生全部退出登录？', '提示', {
|
|
|
- confirmButtonText: '确定',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning'
|
|
|
- }).then(() => {
|
|
|
- this.$refs.ppt.contentWindow.PPTistStudent.forceLogout();
|
|
|
- }).catch(() => {});
|
|
|
- },
|
|
|
- onFreeBrowseChange(value) {
|
|
|
- this.freeBrowse = value;
|
|
|
- console.log('自由浏览模式已切换为1：', this.freeBrowse);
|
|
|
- this.$refs.ppt.contentWindow.PPTistStudent.toggleFollowMode()
|
|
|
- },
|
|
|
setOperationTime() {
|
|
|
let _this = this;
|
|
|
if (_this.opertimer) {
|
|
|
@@ -275,13 +231,8 @@ export default {
|
|
|
hour12: false,
|
|
|
timeZone: "Asia/Shanghai"
|
|
|
}).replace(/\//g, "-")
|
|
|
- this.getClassName()
|
|
|
this.getCourseDetail();
|
|
|
this.setOperationTime();
|
|
|
- window.onFreeBrowseChange = (value) => {
|
|
|
- this.freeBrowse = value;
|
|
|
- console.log('自由浏览模式已切换为：', this.freeBrowse);
|
|
|
- }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
@@ -294,6 +245,7 @@ export default {
|
|
|
flex-direction: column;
|
|
|
overflow: hidden;
|
|
|
box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
background-color: #f2f2f2;
|
|
|
}
|
|
|
|
|
|
@@ -301,20 +253,18 @@ export default {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
background-color: #fff;
|
|
|
+ border-radius: 12px;
|
|
|
}
|
|
|
|
|
|
.pec_header {
|
|
|
width: 100%;
|
|
|
- height: 50px;
|
|
|
- background: #FCCF00;
|
|
|
+ height: 80px;
|
|
|
+ border-radius: 12px 12px 0 0;
|
|
|
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 {
|
|
|
@@ -322,22 +272,8 @@ export default {
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
- 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 {
|
|
|
+ justify-content: center;
|
|
|
+ margin-left: 20px;
|
|
|
font-weight: bold;
|
|
|
font-size: 20px;
|
|
|
color: #0e1e33;
|
|
|
@@ -348,6 +284,8 @@ export default {
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 20px;
|
|
|
}
|
|
|
|
|
|
.pec_h_r_btnArea {
|
|
|
@@ -356,7 +294,7 @@ export default {
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
-.pec_h_r_btnArea>div {
|
|
|
+.pec_h_r_btnArea > div {
|
|
|
width: auto;
|
|
|
height: auto;
|
|
|
display: flex;
|
|
|
@@ -366,90 +304,37 @@ export default {
|
|
|
background-color: #f0f4fa;
|
|
|
border-radius: 4px;
|
|
|
cursor: pointer;
|
|
|
+ margin-right: 10px;
|
|
|
font-size: 14px;
|
|
|
font-weight: 400;
|
|
|
color: #000;
|
|
|
border: 1px solid #cad1dc;
|
|
|
}
|
|
|
|
|
|
-.pec_h_r_btnArea>div>img {
|
|
|
+.pec_h_r_btnArea > div > img {
|
|
|
width: 15px;
|
|
|
height: 15px;
|
|
|
margin-right: 5px;
|
|
|
}
|
|
|
|
|
|
-.pec_h_r_btnArea>.pec_h_r_btn_refresh {
|
|
|
+.pec_h_r_btnArea > .pec_h_r_btn_refresh {
|
|
|
color: #fff;
|
|
|
background-color: #0061ff;
|
|
|
border-color: #0061ff;
|
|
|
}
|
|
|
|
|
|
-.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: 100%;
|
|
|
-}
|
|
|
-
|
|
|
-.class-info-group {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- gap: 10px;
|
|
|
-}
|
|
|
-
|
|
|
-.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% - 50px);
|
|
|
+ height: calc(100% - 80px);
|
|
|
border-radius: 0 0 12px 12px;
|
|
|
background-color: #fff;
|
|
|
}
|
|
|
|
|
|
-.free-browse-switch {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 9px 10px;
|
|
|
- background: #FFF7F5;
|
|
|
- border-radius: 26px;
|
|
|
- margin-left: 15px;
|
|
|
- gap: 5px;
|
|
|
-}
|
|
|
|
|
|
-.switch-label {
|
|
|
- background: linear-gradient(to right, #F53F3F, #FCCF00);
|
|
|
- -webkit-background-clip: text;
|
|
|
- color: transparent;
|
|
|
+.inviteBox {
|
|
|
+ font-size: 14px;
|
|
|
+ /* margin-top: 5px; */
|
|
|
+ color: #00000099;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
</style>
|
SanHQin