|
@@ -1,14 +1,69 @@
|
|
|
<template>
|
|
|
- <div class="app-container home">
|
|
|
- <video class="video" ref="video" :controls="showCtrl"></video>
|
|
|
-
|
|
|
- <!--视频左边工具图标-->
|
|
|
- <div class="v-tools tool-wrap">
|
|
|
- <!--v-hasPermi="['okc:videoPro:remove']"-->
|
|
|
- <el-button v-if="!disabled" class="tool-btn" plain circle icon="el-icon-plus" size="mini" @click="changeProject" />
|
|
|
- <el-button class="tool-btn" plain circle icon="el-icon-edit" size="mini" @click="openDrawer('draw')" />
|
|
|
- <el-button class="tool-btn" plain circle icon="el-icon-upload2" size="mini" @click="openDrawer('export')" />
|
|
|
- </div>
|
|
|
+ <div class="app-container home" style="display: flex">
|
|
|
+ <div class="box_left">
|
|
|
+ <div class="titleStyle">
|
|
|
+ 课堂标记
|
|
|
+ </div>
|
|
|
+ <el-divider></el-divider>
|
|
|
+ <el-form label-width="80px">
|
|
|
+ <el-form-item label="课堂行为">
|
|
|
+ <el-select v-model="workForm.behavior" placeholder="请选择课堂行为">
|
|
|
+ <el-option v-for="dict in dict.type.behavier" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="教学媒体">
|
|
|
+ <el-select v-model="workForm.media" placeholder="请选择教学媒体">
|
|
|
+ <el-option v-for="dict in dict.type.media" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="TPACK">
|
|
|
+ <el-select v-model="workForm.tpack" placeholder="请选择TPACK">
|
|
|
+ <el-option v-for="dict in dict.type.tpack" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注">
|
|
|
+ <el-input type="textarea" v-model="radios.comments" placeholder="请输入备注" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="btBox">
|
|
|
+ <el-button
|
|
|
+ class="btSize"
|
|
|
+ :loading="wLoading"
|
|
|
+ type="primary" @click="submitWorkForm"
|
|
|
+ >
|
|
|
+ {{ workForm.id ? '提交修改' : '提交' }}
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <div class="box_right">
|
|
|
+ <video class="video" id="video" ref="video" controlslist="nodownload" disablePictureInPicture oncontextmenu = "return false" :controls="showCtrl"></video>
|
|
|
+ <!--视频上方中间时间-->
|
|
|
+ <p class="duration">持续时间区间:{{ formatTime(startTime)}} - {{formatTime(endTime)}}</p>
|
|
|
+
|
|
|
+ <!--视频右边工具图标-->
|
|
|
+ <div class="v-okc tool-wrap">
|
|
|
+ <!--v-hasPermi="['okc:videoPro:remove']"-->
|
|
|
+ <el-button v-if="!disabled" class="tool-btn" plain circle icon="el-icon-plus" @click="changeProject" />
|
|
|
+ <el-button class="tool-btn" plain circle icon="el-icon-edit" @click="openDrawer('draw')" />
|
|
|
+ <el-button class="tool-btn" plain circle icon="el-icon-upload2" @click="openDrawer('export')" />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!--视频左边工具图标-->
|
|
|
+ <div class="v-tools tool-wrap">
|
|
|
+ <el-button style="color: #30D2BE;" @click="openStudy">操作教程</el-button>
|
|
|
+ <el-button style="color: #30D2BE;" @click="getStartTime">区间开始</el-button>
|
|
|
+ <el-button style="color: #30D2BE;" @click="getEndTime">区间截取</el-button>
|
|
|
+ <el-button style="color: #30D2BE;" @click="showHistory">历史记录</el-button>
|
|
|
+ <!--<el-button class="tool-btn" plain circle size="mini" @click="getStartTime"><i class="iconfont icon-kssj"></i></el-button>-->
|
|
|
+ <!--<el-button class="tool-btn" plain circle size="mini" @click="getEndTime"><i class="iconfont icon-jssj"></i></el-button>-->
|
|
|
+ <!--<el-button class="tool-btn" plain circle size="mini" title="课堂标记" @click="openDrawer('point')"><i class="iconfont icon-deploy-point"></i>-->
|
|
|
+ <!--</el-button>-->
|
|
|
+ <!--<el-button class="tool-btn" plain circle size="mini" title="历史记录" @click="showHistory"><i class="iconfont icon-lishijilu"></i>-->
|
|
|
+ <!--</el-button>-->
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
|
|
|
<!--显示图表弹出框-->
|
|
|
<el-dialog class="big-dialog" custom-class="draw-dialog" :title="drawTit" :visible.sync="drawDialog" close-on-click-modal :destroy-on-close="true">
|
|
@@ -99,18 +154,7 @@
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
|
|
|
- <!--视频上方中间时间-->
|
|
|
- <p class="duration">持续时间单元:{{ timeTranslate(startTime) }} - {{ timeTranslate(endTime) }}</p>
|
|
|
|
|
|
- <!--视频右边工具图标-->
|
|
|
- <div class="v-okc tool-wrap">
|
|
|
- <el-button class="tool-btn" plain circle size="mini" @click="getStartTime"><i class="iconfont icon-kssj"></i></el-button>
|
|
|
- <el-button class="tool-btn" plain circle size="mini" @click="getEndTime"><i class="iconfont icon-jssj"></i></el-button>
|
|
|
- <el-button class="tool-btn" plain circle size="mini" @click="openDrawer('point')"><i class="iconfont icon-deploy-point"></i>
|
|
|
- </el-button>
|
|
|
- <el-button class="tool-btn" plain circle size="mini" @click="showHistory"><i class="iconfont icon-lishijilu"></i>
|
|
|
- </el-button>
|
|
|
- </div>
|
|
|
|
|
|
<el-dialog class="point-dialog" :title="pointTit" :visible.sync="pointDialog" width="100%" close-on-click-modal>
|
|
|
<el-radio-group v-show="curIdx === 0" v-model="radios.behavior">
|
|
@@ -127,7 +171,9 @@
|
|
|
<el-button size="mini" @click="submitRadios">确定</el-button>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+ <el-dialog title="操作教程" :visible.sync="isStudy" width="100%" close-on-click-modal>
|
|
|
|
|
|
+ </el-dialog>
|
|
|
<!--自定义视频控件-->
|
|
|
<!--<div class="v-ctrl" v-show="showCtrl">-->
|
|
|
<!-- <el-button class="v-btn" size="small" icon="el-icon-d-arrow-left" circle plain @click="back"></el-button>-->
|
|
@@ -152,7 +198,7 @@
|
|
|
</ul>
|
|
|
<el-button
|
|
|
v-if="drawerType === 'point'"
|
|
|
- class="submit-btn" :loading="wLoading" size="mini"
|
|
|
+ class="submit-btn" :loading="wLoading"
|
|
|
type="primary" @click="submitWorkForm"
|
|
|
>
|
|
|
{{ workForm.id ? '提交修改' : '提交' }}
|
|
@@ -183,8 +229,8 @@
|
|
|
</el-dialog>
|
|
|
<!-- 历史记录-->
|
|
|
<el-dialog title="历史记录" :visible.sync="historyDialog" width="75%" close-on-click-modal>
|
|
|
- <el-button type="info" plain size="mini" @click="deleteLastRecord">撤回最后单元</el-button>
|
|
|
- <el-button type="info" plain size="mini" @click="changeCurrentRecord">修改当前单元</el-button>
|
|
|
+ <el-button type="info" plain @click="deleteLastRecord">撤回最后单元</el-button>
|
|
|
+ <el-button type="info" plain @click="changeCurrentRecord">修改当前单元</el-button>
|
|
|
<br>
|
|
|
<br>
|
|
|
<el-scrollbar wrapClass="scrollbar-wrap">
|
|
@@ -216,6 +262,7 @@ export default {
|
|
|
dicts: ['behavier', 'media', 'tpack'],
|
|
|
data() {
|
|
|
return {
|
|
|
+ isStudy:false,
|
|
|
videoState: '暂停',
|
|
|
keys: [], // exportCurve columns 的dataIndex所需值
|
|
|
|
|
@@ -256,7 +303,7 @@ export default {
|
|
|
pointList: [
|
|
|
{ name: '课堂行为', value: '' },
|
|
|
{ name: '教学媒体', value: '' },
|
|
|
- { name: '内容知识', value: '' },
|
|
|
+ { name: 'TPACK', value: '' },
|
|
|
{ name: '备注', value: '' }
|
|
|
],
|
|
|
drawParams: {
|
|
@@ -277,7 +324,7 @@ export default {
|
|
|
isCheckedAll: false,
|
|
|
btnText: '全 选',
|
|
|
|
|
|
- // 课堂行为记录弹出框
|
|
|
+ // 课堂课堂标记弹出框
|
|
|
pointDialog: false,
|
|
|
pointTit: '',
|
|
|
// 开始截取时间
|
|
@@ -380,11 +427,21 @@ export default {
|
|
|
this.getVideoProInfo()
|
|
|
this.getHistoryList() //在created获取历史记录,是导出编码记录也需要
|
|
|
this.getRcList()
|
|
|
+
|
|
|
},
|
|
|
+ mounted(){
|
|
|
+ let that=this;
|
|
|
+ document.getElementById("video").addEventListener('pause', function () { //暂停
|
|
|
+ that.getEndTime()
|
|
|
+ });
|
|
|
+ },
|
|
|
beforeMount() {
|
|
|
this.projectDialogWidth = window.innerWidth > 750 ? '500px' : '96%'
|
|
|
},
|
|
|
methods: {
|
|
|
+ openStudy(){
|
|
|
+ this.isStudy=true;
|
|
|
+ },
|
|
|
// 获取项目视频信息
|
|
|
getVideoProInfo() {
|
|
|
if (localStorage.getItem('id')) {
|
|
@@ -575,7 +632,7 @@ export default {
|
|
|
} else if (!this.workForm.media) {
|
|
|
this.$modal.msgError('教学媒体不能为空!')
|
|
|
} else if (!this.workForm.tpack) {
|
|
|
- this.$modal.msgError('内容知识不能为空!')
|
|
|
+ this.$modal.msgError('TPACK不能为空!')
|
|
|
} else {
|
|
|
this.wLoading = true
|
|
|
const data = {
|
|
@@ -603,6 +660,7 @@ export default {
|
|
|
this.startTime = this.endTime
|
|
|
this.endTime = 0
|
|
|
this.resetWorkForm()
|
|
|
+ this.playVideo()
|
|
|
}).then(() => {
|
|
|
this.wLoading = false
|
|
|
this.drawerVisible = false
|
|
@@ -611,6 +669,15 @@ export default {
|
|
|
}
|
|
|
|
|
|
},
|
|
|
+ playVideo(){
|
|
|
+ // 解决:Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()
|
|
|
+ let playPromise = this.$refs.video.play()
|
|
|
+ if (playPromise !== undefined) {
|
|
|
+ playPromise.then(() => {
|
|
|
+ this.$refs.video.play()
|
|
|
+ }).catch(() => {})
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
// workForm表单重置
|
|
|
resetWorkForm() {
|
|
@@ -688,7 +755,7 @@ export default {
|
|
|
this.drawerList = this.exportList
|
|
|
this.drawerType = 'export'
|
|
|
} else {
|
|
|
- this.drawerTitle = '行为记录'
|
|
|
+ this.drawerTitle = '课堂标记'
|
|
|
this.drawerList = this.pointList
|
|
|
this.drawerType = 'point'
|
|
|
this.drawerDirection = 'rtl'
|
|
@@ -716,12 +783,12 @@ export default {
|
|
|
// 关闭drawer
|
|
|
closeDrawer() {
|
|
|
// 解决:Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()
|
|
|
- let playPromise = this.$refs.video.play()
|
|
|
- if (playPromise !== undefined) {
|
|
|
- playPromise.then(() => {
|
|
|
- this.$refs.video.play()
|
|
|
- }).catch(() => {})
|
|
|
- }
|
|
|
+ // let playPromise = this.$refs.video.play()
|
|
|
+ // if (playPromise !== undefined) {
|
|
|
+ // playPromise.then(() => {
|
|
|
+ // this.$refs.video.play()
|
|
|
+ // }).catch(() => {})
|
|
|
+ // }
|
|
|
},
|
|
|
/*-----------------el-drawer组件 end----------------------*/
|
|
|
|
|
@@ -872,8 +939,8 @@ export default {
|
|
|
|
|
|
/*-----------------绘图 & 导出 end----------------------*/
|
|
|
|
|
|
- /*-----------------行为记录point start--------------------*/
|
|
|
- // 课堂行为记录
|
|
|
+ /*-----------------课堂标记point start--------------------*/
|
|
|
+ // 课堂标记
|
|
|
handlePoint(index) {
|
|
|
this.pointTit = this.pointList[index].name
|
|
|
this.radios.behavior = this.workForm.behavior
|
|
@@ -900,7 +967,7 @@ export default {
|
|
|
}
|
|
|
this.pointDialog = false
|
|
|
},
|
|
|
- /*-----------------行为记录point start--------------------*/
|
|
|
+ /*-----------------课堂标记point start--------------------*/
|
|
|
|
|
|
// 时间格式转化
|
|
|
timeTranslate(time) {
|
|
@@ -922,8 +989,30 @@ export default {
|
|
|
timeStr += m + ':' + s + ms
|
|
|
return timeStr
|
|
|
},
|
|
|
-
|
|
|
- // 生成guid
|
|
|
+ formatTime(time) {
|
|
|
+ console.log(time,'<---------时间')
|
|
|
+ let timeInMilliseconds=time*1000;
|
|
|
+ // 将毫秒转换为分、秒和毫秒
|
|
|
+ var milliseconds = timeInMilliseconds % 1000;
|
|
|
+ var seconds = Math.floor((timeInMilliseconds / 1000) % 60);
|
|
|
+ var minutes = Math.floor((timeInMilliseconds / 1000 / 60));
|
|
|
+
|
|
|
+ // 将数字转换为字符串,并确保它们都是两位数
|
|
|
+ minutes = minutes < 10 ? '0' + minutes : minutes;
|
|
|
+ seconds = seconds < 10 ? '0' + seconds : seconds;
|
|
|
+ // milliseconds = Math.floor(milliseconds / 100); // 转换为十分之一秒
|
|
|
+ // milliseconds = milliseconds < 10 ? '0' + milliseconds : milliseconds;
|
|
|
+ milliseconds=parseInt(milliseconds)
|
|
|
+ if(milliseconds < 10){
|
|
|
+ milliseconds='00'+milliseconds
|
|
|
+ }else if (milliseconds < 100){
|
|
|
+ milliseconds='0'+milliseconds
|
|
|
+ }
|
|
|
+ // 返回格式化的时间字符串
|
|
|
+ // return minutes + ':' + seconds + ':' + milliseconds;
|
|
|
+ return minutes + ':' + seconds + ':' + milliseconds;
|
|
|
+},
|
|
|
+ // 生成guid
|
|
|
guid() {
|
|
|
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
|
|
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8)
|
|
@@ -1049,186 +1138,206 @@ export default {
|
|
|
width: 100%;
|
|
|
background-color: #000;
|
|
|
position: relative;
|
|
|
+.box_left{
|
|
|
+ width: 15%;
|
|
|
+ height: 100%;
|
|
|
+ .titleStyle{
|
|
|
+ color: white;
|
|
|
+ font-size: 23px;
|
|
|
+ }
|
|
|
+ .btBox{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ .btSize{
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+ .box_right{
|
|
|
+ width: 85%;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+ video {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #000;
|
|
|
|
|
|
- video {
|
|
|
- width: 100%;
|
|
|
- background-color: #000;
|
|
|
-
|
|
|
- &:focus-visible {
|
|
|
- outline: none;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .duration {
|
|
|
- position: absolute;
|
|
|
- top: 1%;
|
|
|
- width: 100%;
|
|
|
- margin: 0;
|
|
|
- text-align: center;
|
|
|
- color: $theme-fontColor;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .tool-wrap {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- position: absolute;
|
|
|
- top: 1%;
|
|
|
-
|
|
|
- .el-button {
|
|
|
- margin: 8px 5px;
|
|
|
- background-color: $theme-dialog;
|
|
|
- padding: 10px;
|
|
|
- border: none;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background-color: #464646;
|
|
|
- }
|
|
|
-
|
|
|
- i {
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- color: $theme-fontColor;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .v-ctrl {
|
|
|
- position: absolute;
|
|
|
- bottom: 4.5%;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%,);
|
|
|
-
|
|
|
- .v-btn {
|
|
|
- background-color: transparent;
|
|
|
- border: none;
|
|
|
-
|
|
|
- i {
|
|
|
- font-size: 16px;
|
|
|
- font-weight: bold;
|
|
|
- color: $theme-fontColor;
|
|
|
- }
|
|
|
-
|
|
|
- &:hover {
|
|
|
- background-color: $theme-dialog;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .v-tools {
|
|
|
- left: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .v-okc {
|
|
|
- right: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .el-drawer__wrapper {
|
|
|
- position: absolute;
|
|
|
-
|
|
|
- .v-drawer {
|
|
|
- min-width: 166px !important;
|
|
|
- background-color: $theme-dialog;
|
|
|
-
|
|
|
- .options {
|
|
|
- list-style-type: none;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
-
|
|
|
- li {
|
|
|
- font-size: 14px;
|
|
|
- padding: 6px 0;
|
|
|
- cursor: pointer;
|
|
|
- word-break: break-all;
|
|
|
- transition: all .5s;
|
|
|
-
|
|
|
- &.active {
|
|
|
- padding-left: 15px;
|
|
|
- color: $theme-activeColor;
|
|
|
- }
|
|
|
-
|
|
|
- &:hover {
|
|
|
- color: $theme-activeColor;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .el-drawer__header {
|
|
|
- color: $theme-fontColor;
|
|
|
- margin-bottom: 20px;
|
|
|
- padding: 10px;
|
|
|
- border-bottom: 1px solid rgba(255, 255, 255, .4);
|
|
|
- }
|
|
|
-
|
|
|
- .el-drawer__body {
|
|
|
- color: $theme-fontColor;
|
|
|
- padding: 0 10px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .submit-btn {
|
|
|
- float: right;
|
|
|
- margin-top: 15px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- ::v-deep .draw-dialog {
|
|
|
- background-color: #f3f3f3;
|
|
|
-
|
|
|
- .el-dialog__header {
|
|
|
- padding-bottom: 0;
|
|
|
-
|
|
|
- .el-dialog__title {
|
|
|
- color: $theme-bgColor;
|
|
|
- }
|
|
|
+ &:focus-visible {
|
|
|
+ outline: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .el-dialog__headerbtn .el-dialog__close {
|
|
|
- color: $theme-bgColor;
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .el-dialog__body {
|
|
|
- padding: 20px;
|
|
|
- }
|
|
|
+ }
|
|
|
|
|
|
- .el-button-group {
|
|
|
- margin-bottom: 1%;
|
|
|
- }
|
|
|
-
|
|
|
- .img-wrap {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- flex-wrap: wrap;
|
|
|
- text-align: center;
|
|
|
+}
|
|
|
+.duration {
|
|
|
+ position: absolute;
|
|
|
+ top: 1%;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0;
|
|
|
+ text-align: center;
|
|
|
+ color: $theme-fontColor;
|
|
|
+}
|
|
|
|
|
|
- div {
|
|
|
- background-color: #fff;
|
|
|
- margin: 0.25% 0;
|
|
|
+::v-deep .tool-wrap {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: absolute;
|
|
|
+ top: 1%;
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ margin: 8px 5px;
|
|
|
+ background-color: $theme-dialog;
|
|
|
+ padding: 10px;
|
|
|
+ border: none;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: #464646;
|
|
|
+ }
|
|
|
+
|
|
|
+ i {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: $theme-fontColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- span {
|
|
|
- display: block;
|
|
|
- padding: 1% 0;
|
|
|
- }
|
|
|
- }
|
|
|
+::v-deep .v-ctrl {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 4.5%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%,);
|
|
|
+
|
|
|
+ .v-btn {
|
|
|
+ background-color: transparent;
|
|
|
+ border: none;
|
|
|
+
|
|
|
+ i {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: $theme-fontColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background-color: $theme-dialog;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- .avg {
|
|
|
- width: 49.75%;
|
|
|
- }
|
|
|
+::v-deep .v-tools {
|
|
|
+ left: 10px;
|
|
|
+}
|
|
|
|
|
|
- .left {
|
|
|
- width: 39.5%;
|
|
|
- }
|
|
|
+::v-deep .v-okc {
|
|
|
+ right: 10px;
|
|
|
+}
|
|
|
|
|
|
- .right {
|
|
|
- width: 60%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+::v-deep .el-drawer__wrapper {
|
|
|
+ position: absolute;
|
|
|
+
|
|
|
+ .v-drawer {
|
|
|
+ min-width: 166px !important;
|
|
|
+ background-color: $theme-dialog;
|
|
|
+
|
|
|
+ .options {
|
|
|
+ list-style-type: none;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+
|
|
|
+ li {
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 6px 0;
|
|
|
+ cursor: pointer;
|
|
|
+ word-break: break-all;
|
|
|
+ transition: all .5s;
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ padding-left: 15px;
|
|
|
+ color: $theme-activeColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: $theme-activeColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-drawer__header {
|
|
|
+ color: $theme-fontColor;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding: 10px;
|
|
|
+ border-bottom: 1px solid rgba(255, 255, 255, .4);
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-drawer__body {
|
|
|
+ color: $theme-fontColor;
|
|
|
+ padding: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .submit-btn {
|
|
|
+ float: right;
|
|
|
+ margin-top: 15px;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- ::v-deep .v-modal {
|
|
|
- position: absolute;
|
|
|
- }
|
|
|
+::v-deep .draw-dialog {
|
|
|
+ background-color: #f3f3f3;
|
|
|
+
|
|
|
+ .el-dialog__header {
|
|
|
+ padding-bottom: 0;
|
|
|
+
|
|
|
+ .el-dialog__title {
|
|
|
+ color: $theme-bgColor;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__headerbtn .el-dialog__close {
|
|
|
+ color: $theme-bgColor;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dialog__body {
|
|
|
+ padding: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-button-group {
|
|
|
+ margin-bottom: 1%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-wrap {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ div {
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 0.25% 0;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: block;
|
|
|
+ padding: 1% 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .avg {
|
|
|
+ width: 49.75%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .left {
|
|
|
+ width: 39.5%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ width: 60%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
+::v-deep .v-modal {
|
|
|
+ position: absolute;
|
|
|
+}
|
|
|
.projectForm {
|
|
|
.video-ipt {
|
|
|
width: 74.5%;
|
|
@@ -1365,6 +1474,13 @@ export default {
|
|
|
// 隐藏video 全屏按钮
|
|
|
video::-webkit-media-controls-fullscreen-button {
|
|
|
display: none !important;
|
|
|
+}
|
|
|
+ .tool-btn{
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+ .tool-wrap .el-button i{
|
|
|
+ font-size: 18px !important;
|
|
|
}
|
|
|
</style>
|
|
|
|