@ -1,343 +1,215 @@
< template > < template >
< div > < div >
< el -card shadow = "hover" < el -card shadow = "hover" class = "mgb20" >
class = "mgb20" >
< div class = "flex-between" > < div class = "flex-between" >
< el -page -header @back ="back" < el -page -header @back ="back" : content = "name + '/' + (sorting ? '编辑排序' : '内容设置')" > < / e l - p a g e - h e a d e r >
: content = "name + '/' + (sorting? '编辑排序' : '内容设置')" > < / e l - p a g e - h e a d e r >
< / div > < / div >
< / e l - c a r d > < / e l - c a r d >
<!-- 内容设置 -- > <!-- 内容设置 -- >
< el -card shadow = "hover" < el -card shadow = "hover" class = "mgb20" >
class = "mgb20" >
< div class = "page" > < div class = "page" >
< div class = "relative" > < div class = "relative" >
< div class = "p-title" > 内容设置 < / div > < div class = "p-title" > 内容设置 < / div >
< div class = "btns" > < div class = "btns" >
< template v-if ="!sorting" > < template v-if ="!sorting" >
< el -button type = "primary" < el -button type = "primary" round @click ="addChapter" v-auth ="'/curriculum:内容设置:添加章节'" > 添加章节 < / el -button >
round < el -button type = "primary" round @click ="sort" v-auth ="'/curriculum:内容设置:编辑排序'" > 编辑顺序 < / el -button >
@ click = "addChapter"
v - auth = "'/curriculum:内容设置:添加章节'" > 添加章节 < / e l - b u t t o n >
< el -button type = "primary"
round
@ click = "sort"
v - auth = "'/curriculum:内容设置:编辑排序'" > 编辑顺序 < / e l - b u t t o n >
< / template > < / template >
< template v-else > < template v-else >
< el -button type = "primary" < el -button type = "primary" round @click ="move" > 批量移动 < / el -button >
round < el -button type = "primary" round @click ="cancelSort" > 取消 < / el -button >
@ click = "move" > 批量移动 < / e l - b u t t o n > < el -button type = "primary" round @click ="saveSort" > 保存 < / el -button >
< el -button type = "primary"
round
@ click = "cancelSort" > 取消 < / e l - b u t t o n >
< el -button type = "primary"
round
@ click = "saveSort" > 保存 < / e l - b u t t o n >
< / template > < / template >
< / div > < / div >
< / div > < / div >
< el -divider > < / e l - d i v i d e r > < el -divider > < / e l - d i v i d e r >
< div class = "page-content" > < div class = "page-content" >
< div class = "mgb20" < div class = "mgb20" v-for ="(chapter, index) in chapters" :key="chapter.id" >
v - for = "(chapter,index) in chapters"
: key = "chapter.id" >
< div class = "flex-between mgb10" > < div class = "flex-between mgb10" >
< div > { { chapter . name } } < / div > < div > { { chapter . name } } < / div >
< div > < div >
< template v-if ="!sorting" > < template v-if ="!sorting" >
< el -button class = "action-btn" < el -button class = "action-btn" plain @click ="editChapter(chapter)"
plain v - auth = "'/curriculum:内容设置:修改章节名称'" > 修改章节名称 < / e l - b u t t o n >
@ click = "editChapter(chapter)" < el -button class = "action-btn" plain @click ="addSection(chapter.id)"
v - auth = "'/curriculum:内容设置:修改章节名称'" > 修改章节名称 < / e l - b u t t o n > v - auth = "'/curriculum:内容设置:添加小节'" > 添加小节 < / e l - b u t t o n >
< el -button class = "action-btn" < el -button class = "action-btn" plain @click ="delChapter(chapter.id)"
plain v - auth = "'/curriculum:内容设置:删除章节'" > 删除 < / e l - b u t t o n >
@ click = "addSection(chapter.id)"
v - auth = "'/curriculum:内容设置:添加小节'" > 添加小节 < / e l - b u t t o n >
< el -button class = "action-btn"
plain
@ click = "delChapter(chapter.id)"
v - auth = "'/curriculum:内容设置:删除章节'" > 删除 < / e l - b u t t o n >
< / template > < / template >
< template v-else > < template v-else >
< i class = "el-icon-top sort-icon" < i class = "el-icon-top sort-icon" : class = "{ disabled: index == 0 }" style = "margin-right: 5px"
: class = "{disabled: index == 0}" @ click = "sortChapter(chapter, 'up', index == 0, index)" > < / i >
style = "margin-right: 5px" < i class = "el-icon-bottom sort-icon" : class = "{ disabled: index == chapters.length - 1 }"
@ click = "sortChapter(chapter,'up',index == 0,index)" > < / i > @ click = "sortChapter(chapter, 'down', index == chapter.length - 1, index)" > < / i >
< i class = "el-icon-bottom sort-icon"
: class = "{disabled: index == chapters.length-1}"
@ click = "sortChapter(chapter,'down',index == chapter.length-1,index)" > < / i >
< / template > < / template >
< / div > < / div >
< / div > < / div >
< el -table :data ="chapter.subsectionList" < el -table :data ="chapter.subsectionList" class = "table" stripe header -align = " center " row -key = " id " >
class = "table" < el -table -column v-if ="sorting" width="55" align="center" >
stripe
header - align = "center"
row - key = "id" >
< el -table -column v -if = " sorting "
width = "55"
align = "center" >
< template slot -scope = " scope " > < template slot -scope = " scope " >
< el -checkbox v-model ="scope.row.check" > < / el -checkbox > < el -checkbox v-model ="scope.row.check" > < / el -checkbox >
< / template > < / template >
< / e l - t a b l e - c o l u m n > < / e l - t a b l e - c o l u m n >
< el -table -column type = "index" < el -table -column type = "index" width = "100" label = "序号" align = "center" > < / e l - t a b l e - c o l u m n >
width = "100" < el -table -column prop = "name" label = "资源名称" >
label = "序号"
align = "center" > < / e l - t a b l e - c o l u m n >
< el -table -column prop = "name"
label = "资源名称" >
< / e l - t a b l e - c o l u m n > < / e l - t a b l e - c o l u m n >
< el -table -column prop = "fileType" < el -table -column prop = "fileType" label = "资源类型" align = "center" >
label = "资源类型"
align = "center" >
< template slot -scope = " scope " > < template slot -scope = " scope " >
{ { transferType ( scope . row . fileType ) } } { { transferType ( scope . row . fileType ) } }
< / template > < / template >
< / e l - t a b l e - c o l u m n > < / e l - t a b l e - c o l u m n >
< el -table -column label = "操作" < el -table -column label = "操作" align = "center" width = "300" >
align = "center"
width = "300" >
< template slot -scope = " scope " > < template slot -scope = " scope " >
< template v-if ="!sorting" > < template v-if ="!sorting" >
< el -button type = "text" < el -button type = "text" @click ="download(scope.row)" v-auth ="'/curriculum:内容设置:下载'" > 下载 < / el -button >
@ click = "download(scope.row)" < el -button type = "text" @click ="preview(scope.row)" v-auth ="'/curriculum:内容设置:查看'" > 查看 < / el -button >
v - auth = "'/curriculum:内容设置:下载'" > 下载 < / e l - b u t t o n > < el -button type = "text" @click ="delSection(scope.row)"
< el -button type = "text" v - auth = "'/curriculum:内容设置:删除小节'" > 删除 < / e l - b u t t o n >
@ click = "preview(scope.row)" < el -button type = "text" @ click = "editSectionName(scope.row, chapter.id)"
v - auth = "'/curriculum:内容设置:查看'" > 查看 < / e l - b u t t o n > v - auth = "'/curriculum:内容设置:修改小节名称'" > 修改小节名称 < / e l - b u t t o n >
< el -button type = "text" < el -button type = "text" @ click = "switchFile(scope.row, chapter.id)"
@ click = "delSection(scope.row)" v - auth = "'/curriculum:内容设置:更换文件'" > 更换文件 < / e l - b u t t o n >
v - auth = "'/curriculum:内容设置:删除小节'" > 删除 < / e l - b u t t o n >
< el -button type = "text"
@ click = "editSectionName(scope.row,chapter.id)"
v - auth = "'/curriculum:内容设置:修改小节名称'" > 修改小节名称 < / e l - b u t t o n >
< el -button type = "text"
@ click = "switchFile(scope.row,chapter.id)"
v - auth = "'/curriculum:内容设置:更换文件'" > 更换文件 < / e l - b u t t o n >
< / template > < / template >
< template v-else > < template v-else >
< i class = "el-icon-top sort-icon" < i class = "el-icon-top sort-icon" : class = "{ disabled: scope.$index == 0 }" style = "margin-right: 5px"
: class = "{disabled: scope.$index == 0}" @ click = "sortSection(index, 'up', scope.$index == 0, scope.$index)" > < / i >
style = "margin-right: 5px"
@ click = "sortSection(index,'up',scope.$index == 0,scope.$index)" > < / i >
< i class = "el-icon-bottom sort-icon" < i class = "el-icon-bottom sort-icon"
: class = "{disabled: scope.$index == chapter.subsectionList.length-1}" : class = "{ disabled: scope.$index == chapter.subsectionList.length - 1 }"
@ click = "sortSection(index,'down',scope.$index == chapter.subsectionList.length-1,scope.$index)" > < / i > @ click = "sortSection(index, 'down', scope.$index == chapter.subsectionList.length - 1, scope.$index)" > < / i >
< / template > < / template >
< / template > < / template >
< / e l - t a b l e - c o l u m n > < / e l - t a b l e - c o l u m n >
< / e l - t a b l e > < / e l - t a b l e >
< / div > < / div >
< el -dialog : title = "chapterId ? '编辑章节' : '新增章节'" < el -dialog : title = "chapterId ? '编辑章节' : '新增章节'" :visible.sync ="chapterVisible" width = "540px"
: visible . sync = "chapterVisible" : close - on - click - modal = "false" >
width = "540px"
: close - on - click - modal = "false" >
< el -form > < el -form >
< el -form -item > < el -form -item >
< el -input placeholder = "请输入章节名称，便于对小节归类" < el -input placeholder = "请输入章节名称，便于对小节归类" v-model ="chapterName" maxlength="50" > < / el -input >
v - model = "chapterName"
maxlength = "50" > < / e l - i n p u t >
< / e l - f o r m - i t e m > < / e l - f o r m - i t e m >
< / e l - f o r m > < / e l - f o r m >
< span slot = "footer" < span slot = "footer" class = "dialog-footer" >
class = "dialog-footer" >
< el -button @ click = "chapterVisible = false" > 取消 < / e l - b u t t o n > < el -button @ click = "chapterVisible = false" > 取消 < / e l - b u t t o n >
< el -button type = "primary" < el -button type = "primary" @click ="chapterSubmit" > 确定 < / el -button >
@ click = "chapterSubmit" > 确定 < / e l - b u t t o n >
< / span > < / span >
< / e l - d i a l o g > < / e l - d i a l o g >
< el -dialog title = "添加小节" < el -dialog title = "添加小节" :visible.sync ="sectionVisible" width = "540px" @close ="closeSection"
: visible . sync = "sectionVisible" : close - on - click - modal = "false" >
width = "540px" < el -form ref = "form" :model ="sectionForm" label -width = " 80px " @ submit.native.prevent >
@ close = "closeSection"
: close - on - click - modal = "false" >
< el -form ref = "form"
: model = "sectionForm"
label - width = "80px"
@ submit . native . prevent >
< el -form -item label = "资源添加" > < el -form -item label = "资源添加" >
< Upload :max-size ="100000" < Upload :max-size ="100000" :file-list ="uploadList" :on-remove ="handleRemove"
: file - list = "uploadList" @ beforeUpload = "beforeUpload" @ onSuccess = "uploadSuccess" >
: on - remove = "handleRemove"
@ beforeUpload = "beforeUpload"
@ onSuccess = "uploadSuccess" >
< template slot = "tip" > < template slot = "tip" >
< p > 视频请上传MP4格式 ， 大小不超过150M ； office文件大小不要超过10M < / p > < p > 视频请上传MP4格式 ， 大小不超过150M ； office文件大小不要超过10M < / p >
< / template > < / template >
< / Upload > < / Upload >
< / e l - f o r m - i t e m > < / e l - f o r m - i t e m >
< el -form -item label = "小节名称" > < el -form -item label = "小节名称" >
< el -input placeholder = "请输入小节名称" < el -input placeholder = "请输入小节名称" v -model .trim = " sectionForm.sectionName " maxlength = "50"
v - model . trim = "sectionForm.sectionName" @ keyup . enter . native = "sectionSubmit()" > < / e l - i n p u t >
maxlength = "50"
@ keyup . enter . native = "sectionSubmit()" > < / e l - i n p u t >
< / e l - f o r m - i t e m > < / e l - f o r m - i t e m >
< / e l - f o r m > < / e l - f o r m >
< span slot = "footer" < span slot = "footer" class = "dialog-footer" >
class = "dialog-footer" >
< el -button @ click = "sectionVisible = false" > 取消 < / e l - b u t t o n > < el -button @ click = "sectionVisible = false" > 取消 < / e l - b u t t o n >
< el -button type = "primary" < el -button type = "primary" @click ="sectionSubmit" > 确定 < / el -button >
@ click = "sectionSubmit" > 确定 < / e l - b u t t o n >
< / span > < / span >
< / e l - d i a l o g > < / e l - d i a l o g >
< el -dialog title = "更换文件" < el -dialog title = "更换文件" :visible.sync ="switchVisible" width = "540px" :close-on-click-modal ="false"
: visible . sync = "switchVisible" @ close = "closeSwitch" >
width = "540px"
: close - on - click - modal = "false"
@ close = "closeSwitch" >
< div style = "text-align: center" > < div style = "text-align: center" >
< Upload :max-size ="100000" < Upload :max-size ="100000" :file-list ="uploadList" :on-remove ="handleRemove" @beforeUpload ="beforeUpload"
: file - list = "uploadList" @ onSuccess = "uploadSuccess" >
: on - remove = "handleRemove"
@ beforeUpload = "beforeUpload"
@ onSuccess = "uploadSuccess" >
< div slot = "tip" > < / div > < div slot = "tip" > < / div >
< / Upload > < / Upload >
< / div > < / div >
< span slot = "footer" < span slot = "footer" class = "dialog-footer" >
class = "dialog-footer" >
< el -button @ click = "switchVisible = false" > 取消 < / e l - b u t t o n > < el -button @ click = "switchVisible = false" > 取消 < / e l - b u t t o n >
< el -button type = "primary" < el -button type = "primary" @click ="switchSubmit" > 确定 < / el -button >
@ click = "switchSubmit" > 确定 < / e l - b u t t o n >
< / span > < / span >
< / e l - d i a l o g > < / e l - d i a l o g >
< el -dialog title = "修改小节名称" < el -dialog title = "修改小节名称" :visible.sync ="sectionNameVisible" width = "540px" :close-on-click-modal ="false" >
: visible . sync = "sectionNameVisible"
width = "540px"
: close - on - click - modal = "false" >
< el -form @ submit.native.prevent > < el -form @ submit.native.prevent >
< el -form -item > < el -form -item >
< el -input placeholder = "请输入小节名称" < el -input placeholder = "请输入小节名称" v -model = " sectionForm.sectionName " maxlength = "50"
v - model = "sectionForm.sectionName" @ keyup . enter . native = "sectionNameSubmit()" > < / e l - i n p u t >
maxlength = "50"
@ keyup . enter . native = "sectionNameSubmit()" > < / e l - i n p u t >
< / e l - f o r m - i t e m > < / e l - f o r m - i t e m >
< / e l - f o r m > < / e l - f o r m >
< span slot = "footer" < span slot = "footer" class = "dialog-footer" >
class = "dialog-footer" >
< el -button @ click = "sectionNameVisible = false" > 取消 < / e l - b u t t o n > < el -button @ click = "sectionNameVisible = false" > 取消 < / e l - b u t t o n >
< el -button type = "primary" < el -button type = "primary" @click ="sectionNameSubmit" > 确定 < / el -button >
@ click = "sectionNameSubmit" > 确定 < / e l - b u t t o n >
< / span > < / span >
< / e l - d i a l o g > < / e l - d i a l o g >
< div v -show = " previewImg " < div v -show = " previewImg " class = "el-image-viewer__wrapper" : class = "{ active: previewImg }"
class = "el-image-viewer__wrapper" style = "z-index: 2000" >
: class = "{active: previewImg}"
style = "z-index: 2000" >
< div class = "el-image-viewer__mask" > < / div > < div class = "el-image-viewer__mask" > < / div >
< span class = "el-image-viewer__btn el-image-viewer__close" < span class = "el-image-viewer__btn el-image-viewer__close" @ click = "previewImg = ''" > < i
@ click = "previewImg = ''" > < i class = "el-icon-circle-close" class = "el-icon-circle-close" style = "color: #fff" > < / i > < / span >
style = "color: #fff" > < / i > < / span >
< div class = "el-image-viewer__canvas" > < div class = "el-image-viewer__canvas" >
< img :src ="previewImg" < img :src ="previewImg" class = "el-image-viewer__img"
class = "el-image-viewer__img" style = "transform: scale(1) rotate(0deg);margin-top: -1px; max-height: 100%; max-width: 100%;" >
style = "transform: scale(1) rotate(0deg);margin-top: -1px; max-height: 100%; max-width: 100%;" >
< / div > < / div >
< / div > < / div >
< div v -show = " iframeSrc | | videoSrc " < div v -show = " iframeSrc | | videoSrc " class = "el-image-viewer__wrapper" : class = "{ active: iframeSrc }"
class = "el-image-viewer__wrapper" style = "z-index: 2000" >
: class = "{active: iframeSrc}"
style = "z-index: 2000" >
< div class = "el-image-viewer__mask" > < / div > < div class = "el-image-viewer__mask" > < / div >
< span class = "el-image-viewer__btn el-image-viewer__close" < span class = "el-image-viewer__btn el-image-viewer__close" : class = "{ 'doc-close': isWord }"
: class = "{'doc-close': isWord}" : style = "{ top: isWord ? '50px' : '5px' }" @ click = "closeIframe" > < i class = "el-icon-circle-close"
: style = "{top: isWord ? '50px' : '5px'}" style = "color: #fff" > < / i > < / span >
@ click = "closeIframe" > < i class = "el-icon-circle-close"
style = "color: #fff" > < / i > < / span >
< div class = "el-image-viewer__canvas" > < div class = "el-image-viewer__canvas" >
< iframe v -if = " iframeSrc " < iframe v-if ="iframeSrc" class="fileIframe" id="fileIframe" :src="iframeSrc" frameborder="0" > < / iframe >
class = "fileIframe" < video v -if = " videoSrc " class = "video" width = "1200" height = "600" autoplay controls >
id = "fileIframe" < source :src ="videoSrc" type = "video/mp4" >
: src = "iframeSrc"
frameborder = "0" > < / iframe >
< video v -if = " videoSrc "
class = "video"
width = "1200"
height = "600"
autoplay
controls >
< source :src ="videoSrc"
type = "video/mp4" >
您的浏览器不支持 video 标签 。 您的浏览器不支持 video 标签 。
< / video > < / video >
< template v-if ="showMask" > < template v-if ="showMask" >
< div class = "mask" < div class = "mask" style = "width: 200px;height: 30px;top: 53px;right: 320px" > < / div >
style = "width: 200px;height: 30px;top: 53px;right: 320px" > < / div > < div class = "mask" style = "width: 175px;height: 30px;top: 53px;right: 5px" > < / div >
< div class = "mask"
style = "width: 175px;height: 30px;top: 53px;right: 5px" > < / div >
< / template > < / template >
< template v-if ="showMask1" > < template v-if ="showMask1" >
< div class = "word-mask1" < div class = "word-mask1" style = "width: 200px;height: 50px;" > < / div >
style = "width: 200px;height: 50px;" > < / div > < div class = "word-mask" style = "height: 40px;top: 48px;" > < / div >
< div class = "word-mask" < div class = "word-mask2" style = "top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);" > < / div >
style = "height: 40px;top: 48px;" > < / div >
< div class = "word-mask2"
style = "top: 55px;left: 28%;width: 44%;height: calc(100% - 80px);" > < / div >
< / template > < / template >
< template v-if ="showMask2 && iframeSrc" > < template v-if ="showMask2 && iframeSrc" >
< div class = "excel-mask1" < div class = "excel-mask1" style = "height: 48px;" > < / div >
style = "height: 48px;" > < / div >
< / template > < / template >
< / div > < / div >
< / div > < / div >
< div v -show = " playAuth " < div v-show ="playAuth" class="el-image-viewer__wrapper" :class="{ active: playAuth }" style="z-index: 2000" >
class = "el-image-viewer__wrapper"
: class = "{active: playAuth}"
style = "z-index: 2000" >
< div class = "el-image-viewer__mask" > < / div > < div class = "el-image-viewer__mask" > < / div >
< span class = "el-image-viewer__btn el-image-viewer__close" < span class = "el-image-viewer__btn el-image-viewer__close" @click ="closePlayer" > < i
@ click = "closePlayer" > < i class = "el-icon-circle-close" class = "el-icon-circle-close" style = "color: #fff" > < / i > < / span >
style = "color: #fff" > < / i > < / span > < div class = "player" id = "player" > < / div >
< div class = "player"
id = "player" > < / div >
< / div > < / div >
< Pdf :visible.sync ="pdfVisible" < Pdf :visible.sync ="pdfVisible" :src.sync ="pdfSrc" / >
: src . sync = "pdfSrc" / >
< / div > < / div >
< / div > < / div >
< / e l - c a r d > < / e l - c a r d >
< div class = "player-download" < div class = "player-download" id = "playerDownload" > < / div >
id = "playerDownload" > < / div >
< el -dialog title = "资源移动" < el -dialog title = "资源移动" :visible.sync ="moveVisible" :close-on-click-modal ="false" width = "330px" >
: visible . sync = "moveVisible"
: close - on - click - modal = "false"
width = "330px" >
< el -form > < el -form >
< el -form -item label = "目标章节" > < el -form -item label = "目标章节" >
< el -select v -model = " moveForm.id " < el -select v-model ="moveForm.id" placeholder="请选择目标章节" @change="chapterChange" >
placeholder = "请选择目标章节" < el -option v-for ="(item, i) in chapters" :key="i" :label="item.name" :value="item.id" > < / el -option >
@ change = "chapterChange" >
< el -option v -for = " ( item , i ) in chapters "
: key = "i"
: label = "item.name"
: value = "item.id" > < / e l - o p t i o n >
< / e l - s e l e c t > < / e l - s e l e c t >
< / e l - f o r m - i t e m > < / e l - f o r m - i t e m >
< el -form -item label = "目标排序" > < el -form -item label = "目标排序" >
< el -select v -model = " moveForm.sort " < el -select v-model ="moveForm.sort" placeholder="请选择目标排序" >
placeholder = "请选择目标排序" > < el -option v-for ="(item, i) in sortList" :key="i" :label="item.name" :value="item.id" > < / el -option >
< el -option v -for = " ( item , i ) in sortList "
: key = "i"
: label = "item.name"
: value = "item.id" > < / e l - o p t i o n >
< / e l - s e l e c t > < / e l - s e l e c t >
< / e l - f o r m - i t e m > < / e l - f o r m - i t e m >
< / e l - f o r m > < / e l - f o r m >
< span slot = "footer" < span slot = "footer" class = "dialog-footer" >
class = "dialog-footer" >
< el -button @ click = "moveVisible = false" > 取消 < / e l - b u t t o n > < el -button @ click = "moveVisible = false" > 取消 < / e l - b u t t o n >
< el -button type = "primary" < el -button type = "primary" @click ="moveConfirm" > 确定 < / el -button >
@ click = "moveConfirm" > 确定 < / e l - b u t t o n >
< / span > < / span >
< / e l - d i a l o g > < / e l - d i a l o g >
< / div > < / div >
@ -753,7 +625,7 @@ export default {
const { fileType , fileId } = row const { fileType , fileId } = row
/ / 下 载 p p t / / 下 载 p p t
if ( fileType === 'pptx' ) { if ( fileType === 'pptx' ) {
this . downloadFile ( row . name , row . fileUrl ) this . downloadFile ( row . originalFileName || row . name , row . fileUrl )
} else if ( fileId ) { } else if ( fileId ) {
/ / 阿 里 云 点 播 视 频 ， 先 生 成 视 频 ， 再 拿 到 视 频 地 址 去 下 载 （ 现 在 已 经 去 掉 视 频 点 播 的 方 法 ， 但 是 还 需 要 兼 容 历 史 数 据 ） / / 阿 里 云 点 播 视 频 ， 先 生 成 视 频 ， 再 拿 到 视 频 地 址 去 下 载 （ 现 在 已 经 去 掉 视 频 点 播 的 方 法 ， 但 是 还 需 要 兼 容 历 史 数 据 ）
this . $get ( ` ${ this . api . getPlayAuth } / ${ fileId } ` ) . then ( res => { this . $get ( ` ${ this . api . getPlayAuth } / ${ fileId } ` ) . then ( res => {
@ -949,172 +821,177 @@ export default {
< style scoped lang = "scss" > < style scoped lang = "scss" >
. page - content { . page - content {
max - height : calc ( 100 vh - 420 px ) ; max - height : calc ( 100 vh - 420 px ) ;
overflow : auto ; overflow : auto ;
} }
. action - btn { . action - btn {
color : # 9076 ff ; color : # 9076 ff ;
font - size : 14 px ; font - size : 14 px ;
border : # 9076 ff 1 px solid ; border : # 9076 ff 1 px solid ;
background - color : # fff ; background - color : # fff ;
border - radius : 4 px ; border - radius : 4 px ;
} }
. btns { . btns {
position : absolute ; position : absolute ;
top : 12 px ; top : 12 px ;
right : 24 px ; right : 24 px ;
. el - button { . el - button {
font - size : 14 px ; font - size : 14 px ;
} }
} }
. sort - icon { . sort - icon {
font - size : 24 px ; font - size : 24 px ;
cursor : pointer ; cursor : pointer ;
& . disabled { & . disabled {
color : # ccc ; color : # ccc ;
cursor : not - allowed ; cursor : not - allowed ;
} }
} }
/deep/ . el - progress - bar { /deep/ . el - progress - bar {
padding - right : 70 px ; padding - right : 70 px ;
margin - right : - 70 px ; margin - right : - 70 px ;
} }
. el - upload _ _tip { . el - upload _ _tip {
position : absolute ; position : absolute ;
top : - 4 px ; top : - 4 px ;
right : 0 ; right : 0 ;
width : 300 px ; width : 300 px ;
line - height : 1.4 ; line - height : 1.4 ;
} }
. el - image - viewer _ _wrapper { . el - image - viewer _ _wrapper {
transform : translateY ( - 10 px ) ; transform : translateY ( - 10 px ) ;
transition : transform 0.5 s ; transition : transform 0.5 s ;
& . active { & . active {
transform : translateY ( 0 ) ; transform : translateY ( 0 ) ;
} }
} }
. el - image - viewer _ _close { . el - image - viewer _ _close {
z - index : 10000 ; z - index : 10000 ;
top : 15 px ; top : 15 px ;
right : 15 px ; right : 15 px ;
& . doc - close { & . doc - close {
i { i {
color : # 000 ! important ; color : # 000 ! important ;
}
} }
}
} }
. player { . player {
position : absolute ; position : absolute ;
top : 50 % ; top : 50 % ;
left : 50 % ; left : 50 % ;
transform : translate ( - 50 % , - 50 % ) ; transform : translate ( - 50 % , - 50 % ) ;
width : 1200 px ! important ; width : 1200 px ! important ;
height : 600 px ! important ; height : 600 px ! important ;
} }
. player - download { . player - download {
position : absolute ; position : absolute ;
top : - 9999 px ; top : - 9999 px ;
} }
. fileIframe { . fileIframe {
z - index : 1 ; z - index : 1 ;
position : absolute ; position : absolute ;
top : 0 ; top : 0 ;
left : 0 ; left : 0 ;
bottom : 0 ; bottom : 0 ;
right : 0 ; right : 0 ;
width : 100 % ; width : 100 % ;
height : 100 % ; height : 100 % ;
} }
. mask { . mask {
z - index : 1000 ; z - index : 1000 ;
position : fixed ; position : fixed ;
background - color : rgb ( 57 , 58 , 61 ) ; background - color : rgb ( 57 , 58 , 61 ) ;
} }
. word - mask { . word - mask {
z - index : 1000 ; z - index : 1000 ;
position : fixed ; position : fixed ;
right : 0 ; right : 0 ;
width : 100 % ; width : 100 % ;
background - color : rgb ( 243 , 242 , 241 ) ; background - color : rgb ( 243 , 242 , 241 ) ;
} }
. word - mask1 { . word - mask1 {
z - index : 1000 ; z - index : 1000 ;
position : fixed ; position : fixed ;
top : 0 ; top : 0 ;
right : 0 ; right : 0 ;
background - color : # 2 b579a ; background - color : # 2 b579a ;
} }
. word - mask2 { . word - mask2 {
z - index : 1000 ; z - index : 1000 ;
position : fixed ; position : fixed ;
background - color : transparent ; background - color : transparent ;
} }
. excel - mask1 { . excel - mask1 {
z - index : 9 ; z - index : 9 ;
position : absolute ; position : absolute ;
top : 0 ; top : 0 ;
left : 20 % ; left : 20 % ;
width : 80 % ; width : 80 % ;
background - color : # 107 c41 ; background - color : # 107 c41 ;
} }
. page { . page {
position : relative ; position : relative ;
padding : 24 px ; padding : 24 px ;
background - color : # fff ; background - color : # fff ;
border - radius : 8 px ; border - radius : 8 px ;
. tool { . tool {
display : flex ; display : flex ;
justify - content : space - between ; justify - content : space - between ;
margin - bottom : 24 px ; margin - bottom : 24 px ;
. filter { . filter {
display : inline - flex ; display : inline - flex ;
flex - wrap : wrap ; flex - wrap : wrap ;
align - items : center ; align - items : center ;
flex : 1 ; flex : 1 ;
li { li {
display : inline - flex ; display : inline - flex ;
align - items : center ; align - items : center ;
margin - right : 30 px ; margin - right : 30 px ;
label { label {
margin - right : 6 px ; margin - right : 6 px ;
font - size : 14 px ; font - size : 14 px ;
line - height : 14 px ; line - height : 14 px ;
color : rgba ( 0 , 0 , 0 , 0.65 ) ; color : rgba ( 0 , 0 , 0 , 0.65 ) ;
white - space : nowrap ; white - space : nowrap ;
}
}
} }
}
}
& . mul { & . mul {
margin - bottom : 0 ; margin - bottom : 0 ;
. filter { . filter {
width : 1200 px ; width : 1200 px ;
li { li {
margin - bottom : 24 px ; margin - bottom : 24 px ;
}
}
} }
}
} }
}
} }
< / style > < / style >
