Skip to content

X
xzksxt
Commit 74d8a8b1 by 宋珺琪
Options

修改背景、视频展示bug、答题选项图片、等

parent 7da0f74e
Showing with 276 additions and 55 deletions
src/components/student/answer.vue
......@@ -9,7 +9,8 @@
<li><i class="iconfont icon-menufold icon20" ref="toggle" @click="slider_flag = !slider_flag"></i></li>
<div style="display: flex;">
<img class="jinhuiClass" src="@/assets/img/jinhui.png" alt="" />
<li style=" font-family:'youshe';color: black;font-size: 45px; text-shadow: 8px 1px 1px #888888;">{{examData.type}}-{{examData.source}}</li>
<li style=" font-family:'youshe';color: white;font-size: 40px;margin-right: -15px ">{{examData.type}}-{{examData.source}}</li>
<!-- 阴影效果 text-shadow: 8px 1px 1px #888888;color: rgba(255, 255, 0, 0.8);-->
</div>
<li>（{{userInfo.name}}）</li>
<li>
......@@ -20,14 +21,14 @@
cid: this.$route.query.cid,
cname:this.$route.query.cname,
role:this.$route.query.role
}}" class="router1">个人统计
}}" class="router1" target="_blank" >个人统计
</router-link>
</li>
<li>
<router-link
:to="{
path: '/videoList',
}" class="router1">视频
}" class="router1" target="_blank">视频
</router-link>
</li>
<li><i class="iconfont icon-arrLeft icon20"></i></li>
......@@ -120,7 +121,7 @@
</div>
<div v-if=" optionValue == '多选题'" >
<el-checkbox-group v-model="checkList" @change="handleCheckboxChange" >
<div style="display: flex">
<!-- <div style="display: flex">-->
<el-checkbox :label="1" :disabled='radioFlag'
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('A') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
{{showAnswer.answerA}}
......@@ -129,11 +130,11 @@
<li style="overflow: visible;display: flex">
<img :src="showAnswer.Aimg" alt=""
@click="magnifyPhoto(showAnswer.Aimg)"
style="width: 50px; height:45px; margin-left: 10px;margin-top: 5px">
style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
</li>
</ul>
</div>
<div style="display: flex">
<!-- </div>-->
<!-- <div style="display: flex">-->
<el-checkbox :label="2" :disabled='radioFlag'
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('B') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
{{showAnswer.answerB}}
......@@ -142,11 +143,11 @@
<li style="overflow: visible;display: flex">
<img :src="showAnswer.Bimg" alt=""
@click="magnifyPhoto(showAnswer.Bimg)"
style="width: 50px; height:45px; margin-left: 10px;margin-top: 5px">
style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
</li>
</ul>
</div>
<div style="display:flex;">
<!-- </div>-->
<!-- <div style="display:flex;">-->
<el-checkbox :label="3" :disabled='radioFlag'
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('C') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
{{showAnswer.answerC}}
......@@ -155,11 +156,11 @@
<li style="overflow: visible;display: flex">
<img :src="showAnswer.Cimg" alt=""
@click="magnifyPhoto(showAnswer.Cimg)"
style="width: 50px; height:45px; margin-left: 10px;margin-top: 5px">
style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
</li>
</ul>
</div>
<div style="display: flex">
<!-- </div>-->
<!-- <div style="display: flex">-->
<el-checkbox :label="4" :disabled='radioFlag'
:class=" ischeckBox ?(this.reduceAnswer.rightAnswer.replace(/\s/g, '').split(',').includes('D') ? 'checkboxTrueStyle' : 'checkboxFlaseStyle'):'noStyle'">
{{showAnswer.answerD}}
......@@ -168,10 +169,10 @@
<li style="overflow: visible;display: flex">
<img :src="showAnswer.Dimg" alt=""
@click="magnifyPhoto(showAnswer.Dimg)"
style="width: 50px; height:45px; margin-left: 10px;margin-top: 5px">
style="width: 300px; height:300px; margin-left: 10px;margin-top: 5px">
</li>
</ul>
</div>
<!-- </div>-->
</el-checkbox-group>
<el-button class="submitAnswerClass" type="primary" plain v-show="isOptionSelected" @click="submitAnswer" >提交</el-button>
......@@ -337,9 +338,13 @@ export default {
this.optionValue = "多选题"
this.showAnswer ={
answerA:reduceAnswer.answerA,
Aimg:reduceAnswer.aimg,
answerB:reduceAnswer.answerB,
Bimg:reduceAnswer.bimg,
answerC:reduceAnswer.answerC,
Cimg:reduceAnswer.cimg,
answerD:reduceAnswer.answerD,
Dimg:reduceAnswer.dimg,
}
}else if (!reduceAnswer.oneOrMore) {
reduceAnswer.oneOrMore = '3'
......@@ -583,9 +588,9 @@ export default {
<style lang="less">
.jinhuiClass{
height: 80px;
margin-right: 5px;
margin-top: -15px;
margin-bottom: -15px
margin-bottom: -15px;
margin-left: -15px;
}
@font-face {
font-family: "youshe";
......@@ -1019,14 +1024,18 @@ export default {
border: 1px solid #FF90AA;
}
#answer .top {
background-color: rgb(39, 118, 223);
/*background-color: rgb(39, 118, 223);*/
/*background-color: #dc4b4b;*/
background: url('../../assets/img/title2.jpg') left/ cover no-repeat;
background-size: 100%;
position: fixed;
width: 100%;
}
#answer .item {
display: flex;
padding: 20px;
font-size: 26px;
padding-bottom: 20px;
padding-top: 20px;
font-size: 23px;
letter-spacing: 1px;
}
#answer .top .item li:nth-child(1) {
......@@ -1039,6 +1048,7 @@ export default {
font-weight: bold;
display: flex;
align-items: center;
color: white;
}
//个人统计
#answer .top .item li:nth-child(4) {
......@@ -1077,9 +1087,10 @@ export default {
text-align: left;
}
.router1 {
color: black;
color: white;
font-weight: bold;
border: 2px solid black;
margin-right: 5px;
border: 2px solid white;
border-radius: 10px;
}
//背景
......@@ -1089,8 +1100,7 @@ export default {
left: 0;
width: 100%;
height: 100%;
background: url('../../assets/img/beijing111.jpg')center top / cover no-repeat;
background-color: #b6bccdd1 !important;
background: url('../../assets/img/beij2.jpg')center top / cover no-repeat;
background-size: 100% 100%;
max-height: 100%; /* 设置固定高度，根据需要调整 */
overflow: auto; /* 添加滚动条 */
......
src/components/student/index.vue
......@@ -119,7 +119,8 @@ export default {
}
.list a {
text-decoration: none;
color: #fff;
color: black;
font-weight: bold;
}
li {
list-style: none;
......@@ -181,7 +182,7 @@ li {
width: 100%;
overflow-y: auto;
height: 100%;
background: url('../../assets/img/dtbj.png')center top / cover no-repeat;
background: url('../../assets/img/beij2.jpg')center top / cover no-repeat;
background-color: #b6bccdd1 !important;
}
.final {
......
src/components/student/scoreDwTjTable.vue
......@@ -188,7 +188,8 @@ export default {
margin: 0 auto;
.title {
margin: 20px;
color: #fff;
color: black;
font-weight: bold;
}
.content-el {
background-color: #fff;
......
src/components/student/scoreTable.vue
......@@ -119,7 +119,8 @@ export default {
margin: 0 auto;
.title {
margin: 20px;
color: #fff;
color: black;
font-weight: bold;
}
.content-el {
background-color: #fff;
......
src/components/student/scoreTjTable.vue
......@@ -90,7 +90,8 @@ export default {
margin: 0 auto;
.title {
margin: 20px;
color: #fff;
color: black;
font-weight: bold;
}
.content-el {
background-color: #fff;
......
src/components/teacher/addVideo.vue
......@@ -44,7 +44,11 @@
accept="video/*"
:on-change="handlePhotoChange"
:limit="1"
ref="uploadRef"
element-loading-text="正在上传"
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(0, 0, 0, 0.8)"
v-loading.fullscreen.lock="fullscreenLoading"
ref="uploadRef"
:show-file-list="false">
<el-button slot="trigger" type="primary" style="margin-left: 10px;" title="只能上传视频文件">上传视频</el-button>
</el-upload>
......@@ -64,15 +68,18 @@
<video controls width="100%">
<source :src=o.video type="video/mp4">
</video>
<div style="padding: 14px;">
<span>{{o.videoName}}</span>
<el-button class="searchListButton" type="success" style="margin-left: 10px" @click="open(o)">
编辑
</el-button>
<el-button class="searchListButton" type="success" style="margin-left: 10px" @click="deleteVideo(o.videoId)">
删除
</el-button>
<div style="padding: 14px; display: flex; align-items: center;">
<span class="searchListSpan" v-bind:title="o.videoName" style="flex: 1;">{{o.videoName}}</span>
<div style="display: flex;">
<el-button class="searchListButton" type="success" style="margin-left: 10px;" @click="open(o)">
编辑
</el-button>
<el-button class="searchListButton" type="success" style="margin-left: 10px;" @click="deleteVideo(o.videoId)">
删除
</el-button>
</div>
</div>
</el-card>
</el-col>
</el-row>
......@@ -88,6 +95,7 @@
name: "addVideo",
data() {
return {
fullscreenLoading:false,
searchForm: {
videoNmae: '',
uploadTime: [],
......@@ -171,16 +179,11 @@
//提交
submitForm() {
this.fullscreenLoading = true
console.log(this.video)
if (!this.video) {
return;
console.log(111111111111111)
}
const isLt10M = this.video.size / 1024 / 1024 < 10;
if (!isLt10M) {
this.$message.error('上传视频文件不能超过10MB！');
}
console.log(isLt10M);
let date = new Date()
let params = new FormData();
......@@ -196,6 +199,7 @@
if (res.data.code == 200) {
this.fileList = []
this.video = ''
this.fullscreenLoading = false
this.$message.success('添加成功');
this.videoList();
// 重置上传组件
......@@ -232,7 +236,7 @@
}).then(res => {
if (res.data.code == 200) {
this.videoLists = res.data.data
this.$message.success('模糊查询成功');
this.$message.success('查询成功');
}
})
}
......@@ -245,6 +249,13 @@
</script>
<style lang="scss" scoped>
.searchListSpan{
display: flex;
align-items: center;
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 显示省略号 */
}
.el-col-6 {
display: flex;
}
......
src/components/videoList/packages/vue-mini-player/src/PlayBtn.vue
......@@ -63,8 +63,52 @@ export default {
methods: {
handleClick() {
this.$emit('update:isPlaying', !this.isPlaying);
if (!this.isPlaying) {
//点击播放自动全屏
console.log("进来了")
const baseControlsEl = this.$parent.$container;
console.log(baseControlsEl)
this.reqFullScreen(baseControlsEl);
}
},
reqFullScreen(element) {
console.log('进入全屏');
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.webkitEnterFullscreen) {
element.webkitEnterFullscreen();
} else if (this.$video.webkitEnterFullscreen) {
this.$video.webkitEnterFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else {
console.log('进入全屏失败');
}
},
},
/* mounted() {
const controlsElement = document.querySelectorAll('.qun-base-controls');
console.log(controlsElement)
if (controlsElement) {
controlsElement.forEach(e=>{
e.style.display = 'none';
})
}
}
const controlsElement1 = document.querySelectorAll('._play-btn');
console.log(controlsElement1)
if (controlsElement1) {
controlsElement1.forEach(e=>{
e.style.display = 'none';
})
}
}*/
};
</script>
......
src/components/videoList/packages/vue-mini-player/src/VuePlayer.vue
......@@ -78,7 +78,7 @@ export default {
clearModeTimer: null,
isStart: true,
isPlaying: false,
isClearMode: false
isClearMode: true //默认是否展示播放和进度条
};
},
watch: {
......@@ -166,7 +166,7 @@ export default {
this.isClearMode = true;
this.clearModeTimer = null
this.$emit('clearMode');
}, 3000);
}, 2000);
},
pauseAllVideo() {
if (this.mutex) {
......@@ -222,7 +222,8 @@ export default {
</script>
<style lang="scss" scoped>
.vm-player {
width: 100%;
margin: 5px;
/*width: 100%;*/
height: 100%;
min-height: 10em;
position: relative;
......
src/components/videoList/packages/vue-mini-player/src/controls/Fullscreen.vue
......@@ -55,6 +55,31 @@ export default {
const fullEle =
document.fullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || document.webkitFullscreenElement;
this.$emit('update:isFullscreen', !!fullEle);
if (this.isFullscreen) {
// 退出全屏停止播放视频
const videoElements = document.querySelectorAll("._video-ref")
console.log(videoElements)
for (let i = 0; i < videoElements.length; i++) {
videoElements[i].pause();
}
const controlsElement = document.querySelectorAll('.qun-base-controls');
console.log(controlsElement)
if (controlsElement) {
controlsElement.forEach(e => {
e.style.display = 'none';
})
}
const controlsElement1 = document.querySelectorAll('._play-btn');
console.log(controlsElement1)
if (controlsElement1) {
controlsElement1.forEach(e => {
e.style.display = 'none';
})
}
}
},
reqFullScreen(element) {
if (element.requestFullscreen) {
......@@ -86,6 +111,8 @@ export default {
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
},
docfullscreenchange() {
this.setFullscreenState();
......
src/components/videoList/videoList.vue
......@@ -4,14 +4,55 @@
<ul class="item">
<div style="display: flex;">
<img class="jinhuiClass" src="@/assets/img/jinhui.png" alt="" />
<li style=" font-family:'youshe';color: black;font-size: 45px; text-shadow: 8px 1px 1px #888888;">计算机计算机-{source}}</li>
<li style=" font-family:'youshe';color:white;font-size: 45px;">刑侦百科-线上视频学习</li>
</div>
</ul>
</div>
<div>
<div class="tabs">
<el-form ref="searchForm" :model="searchForm">
<el-row>
<el-col :span="6">
<el-form-item label="文件名称 :" style="display: flex;font-weight: bold">
<el-input v-model="searchForm.videoNmae" clearable placeholder="请输入文件名称检索"></el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="9">
<el-form-item label="创建时间">
<el-date-picker
v-model="searchForm.uploadTime"
value-format="yyyy-MM-dd"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
</el-col>-->
<el-col :span="6">
<el-button
class="toEmptyButton"
@click="toEmpty">
<span class="skyp icon-sousuo"></span>
清空
</el-button>
<el-button
class="searchListButton"
@click="searchList()"
>
<span class="skyp icon-sousuo"></span>
查询
</el-button>
<!-- <el-button class="searchListButton" type="success" style="margin-left: 10px">
当前视频总数{{this.videoLists.length}}
</el-button>-->
</el-col>
</el-row>
</el-form>
</div>
<section class="main" v-for="(o, index) in videoLists" :key="o.videoId">
<div class="videoBox">
<p class="videoTitle">{{o.videoName}}</p>
<p class="videoTitle" v-bind:title="o.videoName" style="flex: 1;">{{o.videoName}}</p>
<QunVideo :url=o.video />
</div>
</section>
......@@ -31,7 +72,10 @@
data() {
return {
videoLists: [],//视频列表
searchForm: {
videoNmae: '',
uploadTime: [],
},
};
},
methods: {
......@@ -49,8 +93,61 @@
this.videoLists = res.data.data
}
})
}
},
//删除
deleteVideo(videoId){
let params = new FormData();
params.append("id",videoId)
this.$axios({
url: '/api/deleteVideo',
method: 'post',
data: params
}).then(res => {
if (res.data.code == 200) {
this.$message.success('删除成功');
this.videoList()
}
})
},
//清空
toEmpty() {
this.searchForm = {
videoNmae: '',
uploadTime: [],
}
this.videoList()
},
//添加照片
handlePhotoChange(file) {
console.log("添加照片")
this.video = file.raw
this.videoName = file.name
this.fileList.push(file.raw);
this.submitForm();
},
//模糊查询
searchList() {
console.log(this.searchForm.uploadTime)
let params = new FormData();
params.append("name",this.searchForm.videoNmae)
if (this.searchForm.uploadTime[0]){
params.append("startTime",this.searchForm.uploadTime[0])
}
if (this.searchForm.uploadTime[1]){
params.append("endTime",this.searchForm.uploadTime[1])
}
this.$axios({
url: '/api/selectVideoByNameOrTime',
method: 'post',
data: params
}).then(res => {
if (res.data.code == 200) {
this.videoLists = res.data.data
this.$message.success('模糊查询成功');
}
})
}
},
created() {
this.videoList()
......@@ -59,6 +156,27 @@
</script>
<style lang="scss" scoped>
.el-col-6{
width: auto;
margin-right: 20px;
}
.el-form-item{
font-size: 18px!important;
margin-bottom: 0px;
}
/*清空和查询*/
.toEmptyButton,.searchListButton{
font-weight: bold;
font-size: 18px;
}
.tabs{
margin-top: 15px;
margin-left: 15px;
}
@font-face {
font-family: "youshe";
src: url("../../assets/fonts/YouSheBiaoTiHei-2.ttf");
}
.jinhuiClass{
height: 80px;
margin-right: 5px;
......@@ -66,7 +184,7 @@
margin-bottom: -15px
}
.top{
background-color: rgb(39, 118, 223);
background: url('../../assets/img/title2.jpg') left/ cover no-repeat;
}
.item {
display: flex;
......@@ -88,7 +206,7 @@
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
height: 100%;
background: url("../../assets/img/beijing111.jpg") no-repeat;
background: url('../../assets/img/beij2.jpg') left/ cover no-repeat;
background-size: 100% 100%;
max-height: 100%; /* 设置固定高度，根据需要调整 */
overflow: auto; /* 添加滚动条 */
......@@ -121,6 +239,12 @@
margin-right:15px;
margin-top: 15px;
.videoTitle {
width: 200px;
display: flex;
align-items: center;
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 隐藏溢出部分 */
text-overflow: ellipsis; /* 显示省略号 */
color: #fff;
font-weight: 600;
line-height: 30px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment