hemall.terabimsoft.com.cn/resources/views/public/admin/uploadMultimediaImg.blade.php

<template id="ImgMul">
    <div styl="width:800px">
    <el-dialog
        :visible.sync="uploadShow"
        width="800px"
        :before-close="beforeClose"
        v-if="imgLoading"
        >
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane  :label="'选取' + tabPan" name="first">
            <div class="clearfix con-box">
            <div class="scroll-box fl">
                <div class="left-group fl" :class="groupList.length > 17?'bor-right':''" >
                    <p class="D-gro" v-for="(item,index) in groupList"  :class="item.id == groupId && index == groupIndex ? 'text-bg' : ''" @click="handleGroup(item.id,index)">[[item.title]]([[item.source_count]])</p>
                </div>
            </div>

            <div class="right-img" :class="groupList.length <= 17?'bor-left':''">
                <div style="margin:10px 0 10px 10px">
                    <el-date-picker
                        v-model="filterDate"
                        type="month"
                        placeholder="选择月"
                        @change="getMultimediaList('',page_size,1)"
                        >
                    </el-date-picker>
                </div>
                <!-- <div class="img-hint"> -->
                    <!-- <span style="margin-right:20px">[[type == 1?'大小不超过4M，已关闭图片水印':'']]<i v-if="type == 1" class="el-icon-question"></i></span> -->
                    <!-- <el-upload
                        :action="uploadLink"
                        ref="upload"
                        multiple
                        :on-success="handleSucesss"
                        :on-exceed="handleExceed"
                        :on-preview="handlePreview"
                        :before-upload="beforeUpload"
                        >
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </div> -->

                <!-- 没有数据 -->
                <div v-if="resourceList.length <= 0" style="text-align:center;margin-top:20px">
                    暂没有数据~
                </div>

                <!-- 图片 type：1 -->
                <div v-if="type == 1" class='img-source fl' v-for="(item,index) in resourceList" @click.stop="handChecked($event,item.id,item)">
                    <img :src="item.url" alt="">
                    <p>[[item.filename]]</p>
                    <div class="img-mark" :style="{ display: item.is_choose ? 'block' : '' }">
                    <!-- @change="handChecked($event,item.id,item)" -->
                        <el-checkbox v-model="item.is_choose" class="sle-img"></el-checkbox>
                    </div>
                </div>

                <!-- 视频 type：3 -->
                <div class="vedio-source fl" v-for="(item,index) in resourceList" v-if="type == 3"  @click.stop="handChecked($event,item.id,item)">
                    <div class="vedio-upload fl">
                        <video :src="item.url"></video>
                    </div>
                    <p class="fl ellipsis" style="margin:20px 0 0 15px;width:110px;">[[item.filename]]</p>
                    <p class="fl ellipsis" style="margin:20px 0 0 15px">[[item.created_at]]</p>
                    <div class="video-mark" :style="{ display: item.is_choose ? 'block' : '' }">
                        <el-checkbox  v-model="item.is_choose" class="sle-img"></el-checkbox>
                    </div>
                    <span class="video-time"><i class="play-triangle"></i>[[Math.floor(item.timeline / 60)]]:[[Math.floor(item.timeline % 60) >= 10?Math.floor(item.timeline % 60):'0' + Math.floor(item.timeline % 60)]]</span>
                </div>

                <!-- 音频 type: 2 -->
                <div class="audio-source fl" v-for="(item,index) in resourceList" v-if="type == 2" @click.stop="handChecked($event,item.id,item)">
                    <div class="fl">
                        <p style="margin:8px 0 0 30px;width:180px;" class="ellipsis">[[item.filename]]</p>
                        <p style="margin:20px 0 0 30px;"  >[[item.created_at]]</p>
                    </div>
                    <div class="fr play-box" @click="playClic()">
                        <img src="../../../../static/images/play.png" alt="">
                        <!-- <img src="../../../../static/images/puse.png" alt=""> -->
                        <p>[[Math.floor(Number(item.timeline) / 60)]]:[[Math.floor(Number(item.timeline) % 60)]]</p>
                    </div>
                    <div class="video-mark" :style="{ display: item.is_choose ? 'block' : '' }">
                        <el-checkbox v-model="item.is_choose" class="sle-img"></el-checkbox>
                    </div>
                </div>
            </div>
            </div>
                <div class="handel  clearfix">
                <el-popover placement="top" width="300" trigger="click">
                    <span style="color:#409eff;cursor: pointer;" class="fl" slot="reference" >新建分组</span>
                    <p class="gro-inp">请输入分组名称</p>
                    <el-input v-model="newGroupName" placeholder="" style="margin-bottom:15px" maxlength="6"show-word-limit></el-input>
                    <el-button type="primary" class="gro-sure" @click="handAddGroup()" style="margin-left:30px">确定</el-button>
                    <el-button class="gro-cancel"  @click="handCancelGroup()" style="margin-left:50px">取消</el-button>
                </el-popover>
                        <div class="fr">
                        <el-pagination
                            background
                            @current-change="currentChange"
                            layout="prev, pager, next"
                            :current-page="current_page"
                            :page-size.sync="Number(page_size)"
                            :total="page_total">
                        </el-pagination>
                    </div>
                </div>

            </el-tab-pane>
            <el-tab-pane :label="tanPanNet" name="second" class="getNet" v-if="type == 1 || type == 3">
            <div class="getnetimg" v-if="type == 1">
                <el-image
                        class="defaultImg"
                        :src="previewUrl"
                    >
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline" style="font-size:40px"></i>
                        </div>
                    </el-image>

                    <div>
                        <p>输入图片链接</p>
                        <el-input v-model="imgLink" placeholder="图片链接" style="width:60%;margin:20px"></el-input>
                        <p>
                            <el-button style="margin-bottom:20px;width:100px" @click="conversion()">转化</el-button>
                        </p>
                    </div>
            </div>

            <div class="getnetvideo" v-if="type == 3">
                    <span>视频链接</span>
                    <el-input v-model="videoLink" placeholder="视频链接" style="width:60%;margin:20px"></el-input>
                    <el-button type="primary" style="width:80px" @click="getNetVideo()">确定</el-button>
                    <!-- <div v-if="viewVideoLink != ''">
                        <video :src="viewVideoLink" controls></video>
                    </div> -->
            </div>

            <!-- <div class="getnetaudio" v-if="type == 3">
                    <span>音频链接</span>
                    <el-input v-model="imgLink" placeholder="音频链接" style="width:60%;margin:20px"></el-input>
                    <el-button type="primary" style="width:80px">确定</el-button>
            </div> -->
            </el-tab-pane>

        </el-tabs>

        <div class="img-hint">
                    <!-- <span style="margin-right:20px">[[type == 1?'大小不超过4M，已关闭图片水印':'']]<i v-if="type == 1" class="el-icon-question"></i></span> -->
                    <el-upload
                        :action="uploadLink"
                        ref="upload"
                        :accept="uploadAccept"
                        :multiple = "multipleTag"
                        :on-success="handleSucesss"
                        :on-exceed="handleExceed"
                        :on-preview="handlePreview"
                        :before-upload="beforeUpload"
                        >
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </div>
            <div class="uploading-btn">
                <span>已选择</span>
                <span v-if="type == 1" style="color:#409eff;">[[selectCount]]/[[resourceTotal]]个图片</span>
                <span v-if="type == 3" style="color:#409eff;">[[selectCount]]/[[resourceTotal]]个视频</span>
                <span v-if="type == 2" style="color:#409eff;">[[selectCount]]/[[resourceTotal]]个音频</span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="sureImg" style="margin-left:20%;width:100px">确 定</el-button>
                    <el-button @click="beforeClose" style="margin-left:5%;width:100px;">取 消</el-button>
                </span>
            </div>
    </el-dialog>
    </div>
</template>

<script>
Vue.component('uploadMultimediaImg', {
    props: {
        uploadShow:Boolean,
        type:{
            type:String,
            default:1
        },
        name:{
            type:String,
            default:""
        },
        sourceType:{
            type:String,
            default:"image"
        },
        selNum:{
            type:String,
            default:"one"
        },
        platformType:{
            type:String,
            default:'1'
        },
    },
    delimiters: ['[[', ']]'],
    data(){
      return{
        imgLoading: false,
        activeName:'first',
        imgChecked:'',
        newGroupName:'',
        currentPage3:0,
        netUrl:'',
        imgLink:'',
        groupList:[],
        groupId:'',
        groupIndex:'',
        imgList:[],
        page_size:12,//
        page:1,//默认请求第一页
        current_page:0,
        page_total:0,
        file:{},
        vedioList:[],
        audioList:[],
        tanPanNet:'',
        tabPan:'',
        resourceTotal:0,
        tabPanStatus:'',
        selectArr:[],
        netImg:{},
        previewUrl:'',
        fileList:[],
        resourceList:[],
        uploadType:'',
        uploadLink:'',
        selectCount:0,
        videoLink:'',
        viewVideoLink:'',
        currentPage:1,
        multipleTag:null,
        filterDate:null,
        uploadAccept:""
      }
    },
    watch:{
        uploadShow() {
            if(this.uploadShow) {
                this.getGroupList(this.type)
                this.getMultimediaList('',this.page_size,this.page)
            }
       },

      type() {
          if(this.type ==1) {
              this.uploadAccept = "image/*";
              this.tabPan = '图片'
              this.tanPanNet = '提取网络图片'
              this.uploadLink = "{!! yzWebFullUrl('upload.uploadV3.upload') !!}"+'&upload_type='+'image'+'&tag_id='+ ''
              this.page_size = 12
          } else if(this.type == 3) {
            this.uploadAccept = ".mp4,.mov,.avi";
              this.tabPan = '视频'
              this.tanPanNet ='提取网络视频'
              this.uploadLink = "{!! yzWebFullUrl('upload.uploadV3.upload') !!}"+'&upload_type='+'video'+'&tag_id='+ ''
              this.page_size = 8
          } else {
            this.uploadAccept = "audio/*";
              this.tabPan = '音频'
              this.tanPanNet = '提取网络音频'
              this.uploadLink = "{!! yzWebFullUrl('upload.uploadV3.upload') !!}"+'&upload_type='+'audio'+'&tag_id='+ ''
              this.page_size = 8
          }
        },
        selNum() {
            if(this.selNum == 'one') {
                this.multipleTag = false//单个选择的不支持多个同时上传
            }
            // alert(this.selNum);
            if(this.selNum == 'more') {
                this.multipleTag = true//单个选择的不支持多个同时上传
            }
        }
    },

    methods:{
        // 获取分组列表
        getGroupList(type) {
        this.type = type;//存储父组件传过来的资源类型，方便新建分组的时候使用
        this.$http.post("{!! yzWebFullUrl('setting.media.tags') !!}", {
                    source_type: type
                }).then(response => {
                if (response.data.result) {
                    this.groupList  = response.data.data;
                    this.groupId = this.groupList[0].id
                    this.imgLoading = true
                } else {
                    this.$message({
                        message: response.data.msg,
                        type: 'error'
                    });
                }
            }, response => {
                this.$message({
                    message: response.data.msg,
                    type: 'error'
                });
            });
        },

        getMultimediaList(id,pageSize,page) {
            let url = ''
            if(this.type == 1) {//图片
                url = "{!! yzWebFullUrl('upload.uploadV3.getImage') !!}"
              this.page_size = 12
            } else if(this.type == 3) {//视频
                url = "{!! yzWebFullUrl('upload.uploadV3.getVideo') !!}"
              this.page_size = 8
              console.log(this.page_size,'34567890')
            } else {//音频
                url = "{!! yzWebFullUrl('upload.uploadV3.getAudio') !!}"
              this.page_size = 8
            }
            let filterDate={
                year:null,
                month:null
            }
            if (this.platformType == '1') {
                url += "&platform_type=1";
            } else {
                url += "&platform_type=2";
            }
            if(this.filterDate){
                let d=new Date(this.filterDate);
                filterDate.year=d.getFullYear();
                filterDate.month=d.getMonth()+1;
            }
            this.$http.post(url, {
                tag_id: id,
                pageSize:this.page_size,
                page:page,
                date:filterDate
                }).then(response => {
                if (response.data.result) {
                    this.page_total= response.data.data.total
                    // this.page_size = response.data.per_page;
                    this.current_page = response.data.data.current_page;
                    this.resourceTotal = response.data.data.total
                    this.resourceList = response.data.data.data
                    this.imgLoading = true
                    this.resourceList.forEach((item, index) => {
                            item['is_choose'] = 0
                    });
                } else {
                    this.$message({
                        message: response.data.msg,
                        type: 'error'
                    });
                }
            }, response => {
                this.$message({
                    message: response.data.msg,
                    type: 'error'
                });
            });
        },

         // 添加分组
        addGroup(sourceType, groupName) {
            this.$http.post("{!! yzWebFullUrl('setting.media.addTag') !!}", {
                    source_type: sourceType,
                    title: groupName
                }).then(response => {
                if (response.data.result) {
                    this.closePopover()
                    this.$message({
                        message: '添加分组成功',
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: response.data.msg,
                        type: 'error'
                    });
                }
            }, response => {
                this.$message({
                    message: response.data.msg,
                    type: 'error'
                });
            });
        },
        // 提取网络图片
        getNetImg(url,tag_id) {
            this.$http.post("{!! yzWebFullUrl('upload.uploadV3.fetch') !!}", {
                    url,
                    tag_id
                }).then(response => {
                if (response.data.result) {
                    this.netImg = response.data.data
                    console.log(this.netImg,'网络图片')
                    this.imgLink = '',
                    this.$message({
                        message: '图片已提取到未分组',
                        type: 'success'
                    });
                } else {
                    this.$message({
                        message: response.data.msg,
                        type: 'error'
                    });
                }
            }, response => {
                this.$message({
                    message: response.data.msg,
                    type: 'error'
                });
            });
        },

        handleGroup(id,ind) {
            this.groupIndex = ind;
            this.groupId = id
            this.getMultimediaList(id,this.page_size,this.page)//请求每一个分组的资源
            this.selectArr = []
            if(this.type == 1) {
                this.uploadLink = "{!! yzWebFullUrl('upload.uploadV3.upload') !!}"+'&upload_type='+'image'+'&tag_id='+ this.groupId
            } else if(this.type == 3) {
                this.uploadLink = "{!! yzWebFullUrl('upload.uploadV3.upload') !!}"+'&upload_type='+'video'+'&tag_id='+ this.groupId
            } else {
                this.uploadLink = "{!! yzWebFullUrl('upload.uploadV3.upload') !!}"+'&upload_type='+'audio'+'&tag_id='+ this.groupId
            }
            this.selectCount = 0
        },

        // 新建分组
        handAddGroup() {
            if (this.newGroupName == '') {
                this.$message({
                    message: '分组名不能为空',
                    type: 'error'
                });
                return
            }
            console.log(this.type);
            this.addGroup(this.type, this.newGroupName)
            this.newGroupName = ''
            // 新建完分组后重新请求分组列表接口
            setTimeout(() => {
                this.getGroupList(this.type)
            }, 800);
            this.closePopover()

        },

        handCancelGroup() {
            this.newGroupName = ''
            this.closePopover()
        },

        closePopover() {
            if (document.all) {
                document.getElementById('ImgMul').click();
            } else {// 其它浏览器
                var e = document.createEvent('MouseEvents')
                e.initEvent('click', true, true)
                document.getElementById('ImgMul').dispatchEvent(e)
            }
        },

        // 弹窗的关闭事件
        handleClose(done) {

        },

        handleClick(tab, event) {
            this.tabPanStatus = tab.paneName
            this.imgLink = ''
            this.previewUrl = ''

        },
        handleSizeChange() {

        },
        currentChange(val){
            this.currentPage = val
            this.getMultimediaList(this.groupId,this.page_size,val)
            this.selectCount = 0
        },

        // 取消按钮
        beforeClose() {
            this.activeName == 'first'
            this.$emit('replace', this.uploadShow);
            this.fileList = []
            this.resourceList=[]//弹窗退出清空数据，取消勾选状态
            this.groupId = ''
            this.groupIndex=''
            this.activeName = 'first'
        },

        // 确定按钮
        sureImg(){
            if( this.activeName == 'first') {
                let list = []
                    this.resourceList.forEach(item => {
                        if(item.is_choose == true) {
                            list.push(item)
                        }
                    })
                this.fileList = list
                this.$emit('sure',this.name, this.uploadShow,this.fileList);
                this.beforeClose();
                this.fileList = []
                this.resourceList=[]//弹窗退出清空数据，取消勾选状态
            } else if(this.fileList.length <= 0) {
                // 提取网络视频
                if(this.type == '3' && this.viewVideoLink) {
                    this.$emit('sure',this.name, this.uploadShow,this.viewVideoLink);
                    this.videoLink = '';
                    this.beforeClose();
                    return
                };
                this.beforeClose();
            } else {
                this.$emit('sure',this.name, this.uploadShow)
                this.beforeClose();
                this.fileList = []
            }
            this.activeName = 'first'
        },

        beforeUpload(file) {
            console.log(file,'12456783456789')
            this.resourceList.forEach(item => {
               return item.is_choose = false
            })
            // this.imgLoading = true;
            // const isLt2M = file.size / 1024 / 1024 < 4;
            // if (!isLt2M) {
            //     this.$message.error("上传文件大小不能超过 4MB!");
            //     // this.imgLoading = false;
            // }
            // return isLt2M;
        },

        //上传成功的回调
        handleSucesss(response, file, fileList) {
            // console.log(response,'aaaaaaaaaaaaaaaaaa')
            if(response.result  == 1) {
                response.data.is_choose = true
                this.resourceList.unshift(response.data)
                let arr = this.resourceList.slice(0,this.page_size)
                this.resourceList = arr
                console.log(this.resourceList,'12435435')
                // this.$refs.upload.clearFiles()
                // if(this.resourceList.length >= 8) {
                //     this.page_total += fileList.length
                // }
                let url = ''
                if(this.type == 1) {//图片
                    url = "{!! yzWebFullUrl('upload.uploadV3.getImage') !!}"
                } else if(this.type == 3) {//视频
                    url = "{!! yzWebFullUrl('upload.uploadV3.getVideo') !!}"
                } else {//音频
                    url = "{!! yzWebFullUrl('upload.uploadV3.getAudio') !!}"
                }
                if (this.platformType == '1') {
                    url += "&platform_type=1";
                } else {
                    url += "&platform_type=2";
                }
                this.$http.post(url, {
                    tag_id: this.groupId,
                    pageSize:this.page_size,
                    page:this.current_page
                    }).then(response => {
                    if (response.data.result) {
                        this.page_total= response.data.data.total
                        // this.page_size = response.data.per_page;
                        this.current_page = response.data.data.current_page;
                        this.resourceTotal = response.data.data.total
                        // this.resourceList = response.data.data.data
                        // this.imgLoading = true
                        // this.resourceList.forEach((item, index) => {
                        //         item['is_choose'] = 0
                        // });
                    } else {
                        this.$message({
                            message: response.data.msg,
                            type: 'error'
                        });
                    }
                }, response => {
                    this.$message({
                        message: response.data.msg,
                        type: 'error'
                    });
                });

                this.getSelect()
                this.getGroupList(this.type)
                this.$message({
                    message: response.msg,
                    type: 'success'
                });
                // this.resourceTotal += fileList.length
            }else {
                this.$message.error(response.msg);
            }
        },

        // // 文件超出个数限制时的钩子
        handleExceed(files) {
           if(files.length > 5) {
            this.$message.error("不能一次上传超过5个文件！");
            return
           }
        },

        // 点击文件列表中已上传的文件时的钩子
        handlePreview(file){

        },
        handChecked(val,id,item) {
            let arr = []
            let data = []
            let list = []
            item.is_choose = !item.is_choose;
            this.resourceList.forEach(item => {
                if(this.selNum=='one') {
                    if(item.id!==id) {
                        item.is_choose = false
                    }
                }
                if(item.is_choose == true) {
                    arr.push(item.id)
                    list.push(item)
                }
            })
            this.selectArr = arr
            this.fileList = list
            this.$forceUpdate()
            this.getSelect()
        },

        getSelect() {
            let count = 0
            this.resourceList.forEach(item => {
                if(item.is_choose)  {
                    count++
                }
            })
            this.selectCount = count;
        },

        //转换网络图片事件
        conversion(){
            this.previewUrl = this.imgLink;
            console.log(this.groupId);
            this.getNetImg(this.imgLink,this.groupId)
            console.log(this.imgLink);
        },

        playClic() {

        },

        getNetVideo() {
            this.viewVideoLink = this.videoLink
            this.$emit('videoclik', this.viewVideoLink);
        }
    },
  template: '#ImgMul'
});
</script>

<style scoped>
    .ellipsis  {
        width: 100px;
        text-overflow: ellipsis;
         white-space: nowrap;
         vertical-align:middle;
         overflow:hidden
    }
        /* 上传 */
    .aduio-box {
        margin-top:20px
    }
    .aduio-item {
        padding:10px;
        margin:0 15px 15px 0;
        width:280px;
        height:130px;
        border:1px solid #c8cede;
    }
    .audio-title {
        display:inline-block;
        width:150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align:middle
    }
    .aduio-right {
        width:60px;
        height:60px;

    }
    .aduio-right {
        margin-top:30px;
        text-align:center;
    }
    .aduio-right img {
        width:40px;
        height:40px;
    }
    .play-box {
        position:relative;
        margin:15px 15px 0 0;
        text-align:center;
        z-index:100;
    }
    .play-box img {
        width:40px;
        height:40px;
    }
    .uploading-btn {
        margin-top: 10px;
        /* text-align:center; */
    }
    .video-box {
        margin:20px 0 30px 0;
        width:100%;
    }
    .video-box .video-item {
        position: relative;
        padding:10px;
        margin-right:15px;
        width:40%;
        height:130px;
        border:1px solid #c8cede;
    }
    .checked-pos {
        position: absolute;
        top:10px;
        left:10px;
    }
    .vedio-file {
        width:150px;
        height:100%
    }
    .vedio-file video {
        width:150px;
        height:100%
    }
    .vedio-right {
        text-align:left
    }

    .vedio-right p{
        margin:20px 0 0 15px;
    }
    .getNetWork {
        margin:30px 0;
        text-align:center
    }

    .con-box {
        position: relative;

    }
    .left-group {
        /* position: relative; */
        /* left:-20px; */
        /* position: absolute; */
        /* height: 500px; */
        /* overflow: scroll; */
        padding: 10px 0;
        left: 0;
        top: 0;
        width:180px;
        max-width:150px;
        min-width:110px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align:middle;
        overflow:hidden;
    }
    .D-gro {
        margin:0;
        padding:3px 0 3px 0px;
        cursor: pointer;
    }
    .left-group .gro-bg {
        background: rgb(41, 186, 156);
        color:#fff;
    }
    .right-img {
        /* min-width: 350px; */
        margin-left: 150px;
        /* width:80%; */
        min-height:475px;
        /* border-left:1px solid #c8cede */
    }
    .handel {
        margin-top:10px;

    }
    .img-hint {
        position: absolute;
        width: 200px;
        top: 10px;
        right: 21px;
        margin-bottom:15px;
        height:40px;
        line-height:40px;
        text-align:right;
        z-index: 9999;
    }
    .img-hint>div {
        float:right
    }
    /* 隐藏上传组件的默认样式 */
    .img-hint input{
        display:none;
    }
    .img-hint .el-upload-list  {
        display:none
    }
    .img-source {
        position: relative;
        margin: 10px 0 0 10px;
        width:140px;
        height:150px;
    }
    .img-source  img {
        width:100%;
        height:110px;
    }
    .img-source p {
        padding:0 5px;
        width:100%;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align:middle;
        overflow:hidden;
    }
    .img-source .sle-img {
        position:absolute;
        /* display:none; */
        top:5px;
        left:5px;
    }
    .img-source p {
        margin-top:15px;
        text-align:center;
    }
    .img-mark {
        position:absolute;
        display:none;
        width:100%;
        height:110px;
        top:0px;
        left:0px;
        background: rgba(41, 186, 156, 0.3);
        border:1px solid rgb(41, 186, 156);
    }
    .img-source:hover .img-mark {
        display:block
    }
    .vedio-source,.audio-source{
        position: relative;
        margin:10px 0 0px 23px;
        width:280px;
        height:102px;
        border:1px solid #c8cede;
    }
    .video-mark {
        position:absolute;
        padding:5px;
        display:none;
        width:100%;
        height:100%;
        top:0px;
        left:0px;
        background: rgba(41, 186, 156, 0.3);
        border:1px solid rgb(41, 186, 156);
    }
    .vedio-upload {
        width:150px;
        height:100%;
    }
    .vedio-upload video {
        width:150px;
        height:100%;
        vertical-align: top;
    }
    .vedio-source:hover .video-mark {
        display:block
    }
    .audio-source:hover .video-mark {
        display:block
    }
    .defaultImg {
        margin-top: 20px;
        width: 150px;
        height: 150px;
        line-height:150px;
        border:1px solid #c8cede;
        text-align:center;
    }
    .getNet {
        text-align:center;
    }
    .getnetvideo, .getnetaudio {
          min-height:300px
    }
    #multimedia-material .el-tabs__content {
        overflow:initial;
    }
    .video-time {
    position:absolute;
    padding-right:8px;
    bottom:10px;
    left:10px;
    color:#fff;
    width:50px;
    height:20px;
    font-size:12px;
    line-height:20px;
    border-radius:5px;
    text-align:right;
    background:rgba(0,0,0,0.5)
    }
    .play-triangle {
        position:absolute;
        top:3px;
        left:6px;
        /* padding-left:5px; */
        height:0;
        width:0;
        overflow: hidden; /* 这里设置overflow, font-size, line-height */
        font-size: 0;     /*是因为, 虽然宽高度为0, 但在IE6下会具有默认的 */
        line-height: 0;  /* 字体大小和行高, 导致盒子呈现被撑开的长矩形 */
        border-color:transparent transparent transparent #fff;
        border-style:solid;
        border-width:7px;
    }
    .bor-right {
        border-right: 1px solid #c8cede;
    }
    .text-bg  {
        background:#29BA9C;
        color:#fff;
    }
    .scroll-box {
        width: 152px;
        height: 475px;
        overflow-y: scroll;
    }

          /*滚动条整体样式*/
    .scroll-box::-webkit-scrollbar {
        width: 2px;
    }
    /*滚动条滑块*/
    .scroll-box::-webkit-scrollbar-thumb {
        border-radius: 30px;
        background: #29BA9C;
    }
    /*滚动条轨道*/
    .scroll-box::-webkit-scrollbar-track {
        box-shadow: inset 0 0 1px rgba(0,0,0,0);
        border-radius: 30px;
        background: #ccc;
    }
    .scroll-box::-webkit-scrollbar-track{
        background:#fff;
    }
    .el-tabs__header {
        margin-bottom: 0;
    }

    .el-dialog__header {
        padding: 25px;
    }

    .el-dialog__body {
        position: relative;
        padding: 10px 20px;
    }
    .image-slot {
        margin-top: 20px;
    }
</style>