|
|
@@ -1,6 +1,34 @@
|
|
|
<template>
|
|
|
- <div class="app-container">
|
|
|
-
|
|
|
+ <div class="app-container back">
|
|
|
+ <el-container>
|
|
|
+ <el-aside width="284px" style="height: 100vh;">
|
|
|
+ <div class="aside_header">
|
|
|
+ <span>CONTACT</span>
|
|
|
+ <span>章节目录</span>
|
|
|
+ </div>
|
|
|
+ <div class="aside_content">
|
|
|
+ <el-tree ref="treeBox" :data="tree" :props="defaultProps" :default-expanded-keys="expandId" node-key="id"
|
|
|
+ :default-checked-keys="childrenId" :highlight-current="true" @node-click="treeNodeClick"
|
|
|
+ >
|
|
|
+ <p class="custom-tree-node" :title="node.label" slot-scope="{node, data}">
|
|
|
+ <span class="text-ellipsis" :title="node.label">{{ node.label }}</span>
|
|
|
+ </p>
|
|
|
+ </el-tree>
|
|
|
+ </div>
|
|
|
+ </el-aside>
|
|
|
+ <el-main style="background: #fff">
|
|
|
+ <div class="video_wrap">
|
|
|
+ <div class="videoplay" >
|
|
|
+ <div class="video"v-if="aliId">
|
|
|
+ <mx-video :aliIdType="aliIdType" :src="aliId"></mx-video>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ 暂无视频
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-main>
|
|
|
+ </el-container>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -10,25 +38,137 @@
|
|
|
import MxCondition from '@/components/MxCondition/mx-condition'
|
|
|
import { getOperationManual } from '@/api/webApi/webVideo'
|
|
|
|
|
|
-
|
|
|
export default {
|
|
|
components: { MxCondition },
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
+ tree: [],
|
|
|
+ aliIdType: '',
|
|
|
+ aliId: "", // 默认的视频aliId
|
|
|
+ defaultProps: {
|
|
|
+ children: 'children',
|
|
|
+ label: 'name'
|
|
|
+ },
|
|
|
+ expandId: [],
|
|
|
+ childrenId: [],
|
|
|
+ checkNode: [],
|
|
|
+ nameType:''
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
+ const subPaths = this.$route.path.split("/");
|
|
|
+ const lastSubPath = subPaths[subPaths.length - 1]
|
|
|
+ const nameType = lastSubPath.split("_")[lastSubPath.split("_").length - 1]
|
|
|
+ this.nameType= nameType
|
|
|
this.getOperationManual()
|
|
|
},
|
|
|
methods: {
|
|
|
- getOperationManual(){
|
|
|
+ getOperationManual() {
|
|
|
getOperationManual({
|
|
|
- nameType:1
|
|
|
+ nameType: this.nameType
|
|
|
}).then(res => {
|
|
|
- conole.log(res)
|
|
|
+ this.tree = res.data
|
|
|
+ this.aliId = res.data[0].children[0].aliId // 默认的视频aliId
|
|
|
+ this.expandId.push(res.data[0].id)
|
|
|
+ this.childrenId.push(res.data[0].children[0].id)
|
|
|
+ this.$nextTick(function() {
|
|
|
+ this.$refs.treeBox.setCurrentKey(this.childrenId[0])
|
|
|
+ this.checkNode = this.$refs.treeBox.getCheckedNodes()
|
|
|
+ })
|
|
|
})
|
|
|
+ },
|
|
|
+ treeNodeClick(item) {
|
|
|
+ console.log(item)
|
|
|
+ if (item.hasOwnProperty("children") && item.children.length) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ console.log(item)
|
|
|
+ this.checkNode = item;
|
|
|
+ this.aliId = item.aliId;
|
|
|
}
|
|
|
- },
|
|
|
- }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
+<style scoped>
|
|
|
+.back{
|
|
|
+ padding: 20px;
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #f7f7f7;
|
|
|
+}
|
|
|
+.aside_header {
|
|
|
+ background: white;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding: 24px 16px 0 16px;
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-aside {
|
|
|
+ background: white;
|
|
|
+ padding: 0;
|
|
|
+ margin-bottom: 0;
|
|
|
+ margin-right: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.aside_header span {
|
|
|
+ margin-top: 5px;
|
|
|
+ width: 84px;
|
|
|
+ height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #343434;
|
|
|
+ line-height: 22px;
|
|
|
+}
|
|
|
+
|
|
|
+.aside_header span:first-child {
|
|
|
+ width: 173px;
|
|
|
+ height: 27px;
|
|
|
+ background: linear-gradient(180deg, #ffffff 0%, #47c6a2 100%);
|
|
|
+ opacity: 0.5;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.video_wrap video {
|
|
|
+ width: 100%;
|
|
|
+ height: 566px;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+::-webkit-scrollbar-thumb {
|
|
|
+ -webkit-box-shadow: inset 0 0 1px rgba(136, 136, 136, 0.3);
|
|
|
+ background-color: rgb(238, 241, 245);
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ ::v-deep .el-tree-node__content {
|
|
|
+ padding-top: 6px;
|
|
|
+ padding-bottom: 6px;
|
|
|
+ height: 32px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #343434;
|
|
|
+ line-height: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ ::v-deep .el-tree-node__expand-icon.expanded {
|
|
|
+ content: "";
|
|
|
+}
|
|
|
+
|
|
|
+ ::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
|
|
|
+ padding: 6px;
|
|
|
+ /* position: absolute; */
|
|
|
+ right: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+ ::v-deep .el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
|
|
|
+ color: #47c6a2;
|
|
|
+}
|
|
|
+</style>
|
