From 0175cda6150656bc74b34c6f6c71edd1e1fc653c Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@iotlink.com>
Date: 星期四, 04 二月 2021 18:22:54 +0800
Subject: [PATCH] treee, 修复tab切换时树的选中状态.添加区域
---
src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 483 ++++++++++++++++++++--------------------------------
1 files changed, 188 insertions(+), 295 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
index f1478cb..e4b36d7 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
@@ -18,7 +18,7 @@
end-placeholder="缁撴潫鏃ユ湡"
align="right"
></el-date-picker>
- <el-button size="small" type="primary" @click="dataSearch">鎼滅储</el-button>
+ <el-button size="small" type="primary" @click="init">鎼滅储</el-button>
</div>
<div class="checked-config">
<span style="margin-top:3px;">宸查�夋潯浠�:</span>
@@ -51,7 +51,7 @@
</div>
<div class="optional-config">
<div class="config" v-for="(config,index) in optionalConfigs" :key="index">
- <template v-show="config.isShow">
+ <template v-if="config.isShow">
<div class="title">{{config.title}}</div>
<div class="options-wrap">
<div
@@ -89,7 +89,7 @@
</div>
</template>
</div>
- <div class="config">
+ <div class="config" v-if="showAdvance">
<div class="title">楂樼骇閫夐」</div>
<div>
<el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect">
@@ -117,14 +117,14 @@
<div class="header-bar clearfix">
<div class="left">
<div>
- <el-select v-model="watch" size="mini">
- <el-option value label="鍏ㄩ儴"></el-option>
- <el-option value="1" label="鏈叧娉�"></el-option>
- <el-option value="2" label="宸插叧娉�"></el-option>
+ <el-select v-model="IsFollow" size="mini" @change="filterSearchData">
+ <el-option value='' label="鍏ㄩ儴"></el-option>
+ <el-option :value="false" label="鏈叧娉�"></el-option>
+ <el-option :value="true" label="宸插叧娉�"></el-option>
</el-select>
</div>
<div>
- <el-select v-model="settle" size="mini">
+ <el-select v-model="settle" size="mini" >
<el-option value label="鍏ㄩ儴"></el-option>
<el-option value="1" label="鏈鐞�"></el-option>
<el-option value="2" label="宸插鐞�"></el-option>
@@ -144,33 +144,33 @@
</div>
<div class="content" v-show="showType=='menu'">
<el-row :gutter="20">
- <el-col :xs="8" :sm="6" :md="6" :lg="6" v-for="data in menuList" :key="data.id">
+ <el-col :xs="8" :sm="6" :md="6" :lg="6" v-for="data in tabData" :key="data.id">
<div class="card">
- <div class="video-wrap" @click="checkVideo(data)">
- <video src></video>
+ <div class="video-wrap" @click="checkVideoDetail(data)">
+ <img :src="CLIP+data.VideoCover" alt />
</div>
<div class="video-info">
<div class="base-info">
- <div>
+ <div class="flex-box">
<label>杞﹀彿:</label>
- <span>{{data.no}}</span>
+ <span>{{data.CarNumber}}</span>
</div>
- <div>
+ <div class="flex-box">
<label>杞︽:</label>
- <span>{{data.frequency}}</span>
+ <span>{{data.TrainNumber}}</span>
</div>
- <div>
+ <div class="flex-box">
<label>鏃堕棿:</label>
- <span>{{data.time}}</span>
+ <span>{{data.VideoDate}}</span>
</div>
- <div>
+ <div class="flex-box">
<label>鍙告満|鍓徃鏈�:</label>
- <span>{{data.driver}}</span>
+ <span>{{data.Driver1}}|{{data.Driver2}}</span>
</div>
</div>
<div class="mark-info">
- <div class="abnormal" v-if="data.markType==1">
- <span v-for="(mark,index) in data.marks" :key="index">{{mark}}</span>
+ <div class="abnormal" v-if="data.LableLst&&data.LableLst.length">
+ <span v-for="(label,index) in data.LableLst" :key="index">{{label.Desc}}</span>
</div>
<div v-else>
<span>鏃犲紓甯�</span>
@@ -180,55 +180,55 @@
<div class="tag" v-for="(tag,index) in data.tags" :key="index">{{tag}}</div>
</div>
</div>
- <div class="star">
- <i :class="[data.follow?'follow':'','el-icon-star-off']"></i>
+ <div class="star" @click="toggleFollow(data)">
+ <i :class="[data.IsFollow?'follow':'','el-icon-star-off']"></i>
</div>
</div>
</el-col>
</el-row>
<el-pagination
background
- @size-change="handleSizeChange"
+ @size-change="handleTabSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="curTabPage"
+ :page-sizes="pageSizes"
:page-size="tabPageSize"
- layout="total, prev, pager, next"
- :total="tabTotal">
- </el-pagination>
+ layout="total,sizes, prev, pager, next"
+ :total="tabTotal"
+ ></el-pagination>
</div>
<div class="content" v-show="showType=='list'">
<el-table :data="tableData" fit ref="elTable">
- <el-table-column label="鍚嶇О" prop="name" sortable width="500">
+ <el-table-column label="鍚嶇О" prop="VideoName" sortable width="500">
<template slot-scope="scope">
- <div style="cursor:pointer;">{{scope.row.name}}</div>
+ <div style="cursor:pointer;">{{scope.row.VideoName}}</div>
</template>
</el-table-column>
- <el-table-column label="澶у皬" prop="size" sortable></el-table-column>
- <el-table-column label="淇敼鏃ユ湡" prop="updateTime" sortable></el-table-column>
- <el-table-column label="鍒涘缓鏃ユ湡" prop="createTime" sortable></el-table-column>
+ <el-table-column label="澶у皬" prop="VideoSize" sortable></el-table-column>
+ <el-table-column label="淇敼鏃ユ湡" prop="UpdatedAt" sortable></el-table-column>
+ <el-table-column label="鍒涘缓鏃ユ湡" prop="CreatedAt" sortable></el-table-column>
<el-table-column label="鎿嶄綔">
- <template>
+ <template slot-scope="scope">
<div class="operation">
- <i class="el-icon-star-off" style="font-size: 18px;"></i>
+ <i class="el-icon-star-off" @click="toggleFollow(scope.row)"></i>
</div>
</template>
</el-table-column>
</el-table>
- <!-- <el-pagination background layout="prev, pager, next" :page-size="pageSize" :total="tableListTotal"></el-pagination> -->
<el-pagination
- @size-change="handleSizeChange"
+ @size-change="handleTableSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="curTablePage"
:page-size="tablePageSize"
- layout="total, prev, pager, next"
- :total="tableTotal">
- </el-pagination>
+ :page-sizes="pageSizes"
+ layout="total,sizes, prev, pager, next"
+ :total="tableTotal"
+ ></el-pagination>
</div>
<el-dialog
class="dialog-video"
:visible="videoDialogVisible"
@close="videoDialogVisible=false"
- :append-to-body="false"
>
<div slot="title" class="title">
<div class="center">
@@ -236,115 +236,31 @@
<span>鎾斁瑙嗛</span>
</div>
</div>
- <div class="content">
- <div class="content-top">
- <div class="grid-check">
- <span
- :class="guid === 1 ? 'iconfont icongongge1 activegongge':'iconfont icongongge1'"
- @click="setGuid(1)"
- ></span>
- <span
- :class="guid === 2 ? 'iconfont icongongge activegongge':'iconfont icongongge'"
- @click="setGuid(2)"
- ></span>
- <span
- :class="guid === 3 ? 'iconfont icongongge2 activegongge':'iconfont icongongge2'"
- @click="setGuid(3)"
- ></span>
- </div>
- <div class="video-area">
- <div class="info-list block">
- <p class="title-partment">鐩稿叧瑙嗛</p>
- <!-- <div class="video-name" v-for="video in videoDetails.videoList" :key="video.id">
- <i class="el-icon-film"></i>
- <span>{{video.name}}</span>
- </div>-->
- <div class="video-name">
- <i class="el-icon-film"></i>
- <span>椹鹃┒瀹�</span>
- </div>
- <div class="video-name">
- <i class="el-icon-film"></i>
- <span>鏈烘埧</span>
- </div>
- </div>
- <div class="players">
- <div class="video-item" v-for="(item,index) in videoWrapArr" :key="index"></div>
- </div>
- </div>
- </div>
- <div class="content-bottom">
- <div class="bot-left block">
- <p class="title-partment">蹇�熸爣娉�</p>
- <div style="height:28px;">
- <label style="padding-right:10px;">闅愭偅闂:</label>
- <el-radio v-model="hiddenDanger" :label="1">鏃犲紓甯�</el-radio>
- <el-radio v-model="hiddenDanger" :label="2">鏈夊紓甯�</el-radio>
- <el-button
- icon="el-icon-plus"
- size="mini"
- v-show="hiddenDanger==2"
- type="primary"
- @click="addLabel(videoDetails)"
- >娣诲姞鏍囨敞</el-button>
- </div>
- </div>
- <div class="bot-right block">
- <p class="title-partment">瑙嗛璇︽儏</p>
- <div class="base-info">
- <div>
- <label>杞﹀彿:</label>
- <span>{{videoDetails.no}}</span>
- </div>
- <div>
- <label>杞︽:</label>
- <span>{{videoDetails.frequency}}</span>
- </div>
- <div>
- <label>鏃堕棿:</label>
- <span>{{videoDetails.time}}</span>
- </div>
- <div>
- <label>鍙告満|鍓徃鏈�:</label>
- <span>{{videoDetails.driver}}</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </el-dialog>
- <el-dialog
- class="label-dialog"
- :visible="labelDialogVisible"
- @close="labelDialogVisible=false"
- :append-to-body="false"
- >
- <div class="label-check">
- <el-checkbox-group v-model="labelCheckedList">
- <el-checkbox v-for="item in labelOptions" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
- </el-checkbox-group>
- </div>
- <div class="btns">
- <el-button @click="delLabelChecked" size="small">鍒犻櫎</el-button>
- <el-button @click="cancelLabelChecked" size="small">鍙栨秷</el-button>
- <el-button @click="submitLabelChecked(videoDetails)" size="small" type="primary">纭畾</el-button>
- </div>
+ <video-analyze :videoDetails="selectedVideo" />
</el-dialog>
</div>
</div>
</template>
<script>
-import { getlstInit } from '@/api/shuohuang';
+import { getlstInit, updateVideoAnalyze, getlst, getRelatedVideoInfo, getLabelMap, delLabel, editLabel } from '@/api/shuohuang';
+import VideoAnalyze from "./videoAnalyze"
export default {
+ name: "SearchMain",
+ components: {
+ VideoAnalyze
+ },
data () {
return {
+ CLIP: 'http://192.168.20.113/',
keyword: '',
- searchTime: [this.$moment(new Date().getTime() - 3600 * 1000 * 24 * 3).format("YYYY-MM-DD HH:mm:ss"), this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss")],
+ IsFollow: '',
+ searchTime: [this.$moment(new Date().getTime() - 3600 * 1000 * 24 * 5).format("YYYY-MM-DD HH:mm:ss"), this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss")],
curTabPage: 1,
curTablePage: 1,
tabPageSize: 8,
+ pageSizes: [2, 8, 12, 24],
tabTotal: 0,
tablePageSize: 8,
tableTotal: 0,
@@ -391,88 +307,111 @@
checkedConfigs: [],
optionalConfigs: [],
highLevelConfigs: [],
+ showAdvance: true,
fixedOneLineHeight: 40,
- watch: '',
settle: '',
showType: 'menu',
tableData: [
{ name: 'SS4B115_06_B鑺備簩绔徃鏈哄_20201115_091500.mp4', size: '17.66M', updateTime: '2020-11-04 15:41', createTime: '2020-11-04 15:41' },
{ name: 'SS4B115_06_B鑺備簩绔徃鏈哄_20201115_091700.mp4', size: '17.76M', updateTime: '2020-11-04 15:41', createTime: '2020-11-07 17:41' }
],
- menuList: [
+ tabData: [
{ id: 'ss1', no: 'SS4B115', frequency: '8084', time: '2020-09-21 20:45:08', driver: '寮犱笁', marks: ['鏈懠鍞ゃ�佸懠鍞や笉鏍囧噯', '瀛︿範鍙告満鏈簲绛�'], markType: 1, tags: ['杩涘嚭绔�', '鍙告満绂诲矖'], follow: true },
{ id: 'ss2', no: 'SS4B115', frequency: '8084', time: '2020-09-21 20:45:08', driver: '寮犱笁', marks: [], markType: 0, tags: ['杩涘嚭绔�', '鍙告満绂诲矖'], follow: false }
- ],
-
+ ],
videoDialogVisible: false,
- videoDetails: {},
- guid: 1,
- videoWrapArr: [],
hiddenDanger: 1,
labelDialogVisible: false,
- labelOptions: [{ id: 'whh', name: '鏈懠鍞ゃ�佸懠鍞や笉鏍囧噯' }, { id: 'jsbz', name: '绮剧涓嶆尟銆佽繍琛屼腑鐫¤' }, { id: 'xxsj', name: '瀛︿範鍙告満鏈簲绛�' }, { id: 'myhb', name: '娌℃湁鍚庨儴鐬湜銆佷笉鎸夎瀹氬仛闃叉簻鎺柦' }],
- labelCheckedList: [],
+ selectedVideo: {}
+ }
+ },
+ watch: {
+ checkedConfigs: {
+ handler (n, o) {
+ this.filterSearchData()
+ },
+ deep: true
}
},
mounted () {
- // let mockConfigs = [
- // { id: 'jch', isHighLevel: false, title: '鏈鸿溅鍙�', data: [{ name: '鍏ㄩ儴', id: '' }, { name: 'K24', id: 'k24' }, { name: 'G172', id: 'g172' }, { name: 'K254', id: 'k254' }, { name: 'K264', id: 'k264' }, { name: 'G132', id: 'g132' }, { name: 'K257', id: 'k257' }, { name: 'K269', id: 'k269' }, { name: 'G176', id: 'g176' }, { name: 'G137', id: 'g137' }, { name: 'K297', id: 'k297' }, { name: 'K209', id: 'k209' }, { name: 'G777', id: 'g777' }, { name: 'G337', id: 'g337' }, { name: 'K277', id: 'k277' }, { name: 'K299', id: 'k299' }, { name: 'G866', id: 'g866' }, { name: 'K877', id: 'k877' }, { name: 'K699', id: 'k699' }, { name: 'G906', id: 'g906' }, { name: 'L677', id: 'l677' }, { name: 'M987', id: 'm987' }] },
- // { id: 'cc', isHighLevel: false, title: '杞︽', data: [{ name: '鍏ㄩ儴', id: '' }, { name: 'SS344', id: 'SS344' }, { name: 'SS345', id: 'SS345' }, { name: 'SS765', id: 'SS765' }, { name: 'SS776', id: 'SS776' }, { name: 'SS676', id: 'SS676' }, { name: 'SS876', id: 'SS876' }, { name: 'SS779', id: 'k779' }, { name: 'SS976', id: 'SS976' },] },
- // { id: 'sj', isHighLevel: true, title: '鍙告満', data: [{ name: '寮犱笁', id: 'zs' }, { name: '鏉庢柉', id: "ls" }, { name: '鏉庢柉鐗�', id: "lst" }] },
- // { id: 'lk', isHighLevel: true, title: '璺喌', data: [{ name: '鏍囩ず鐗�', id: 'bsp' }, { name: '淇″彿鏈�', id: "xhj" }, { name: '寮亾', id: "wd" }] }
- // ];
-
- // mockConfigs.forEach(config => {
- // this.$set(config, 'isShow', true);
- // config.data.forEach(item => {
- // this.$set(item, 'isChecked', false);
- // })
- // if (config.isHighLevel) {
- // this.highLevelConfigs.push(config);
- // } else {
- // this.$set(config, 'isMultCheck', false);
- // this.$set(config, 'showMore', false);
- // this.optionalConfigs.push(config);
- // }
- // })
- // this.$nextTick(() => {
- // this.optionalConfigs.forEach(config => {
- // if (this.$refs[`options${config.id}`][0].scrollHeight > this.fixedOneLineHeight) {
- // config.showMore = true;
- // this.$set(config, 'isShowMore', false);
- // } else {
- // config.showMore = false;
- // }
- // });
- // console.log(this.optionalConfigs);
- // });
this.init();
},
methods: {
- handleSizeChange(){
-
+ handleTabSizeChange (size) {
+ this.tabPageSize = size;
+ this.filterSearchData()
},
- handleCurrentChange(){
-
+ handleTableSizeChange (size) {
+ this.tablePageSize = size;
+ this.filterSearchData()
},
+ handleCurrentChange () {
+ this.filterSearchData()
+ },
+ //浜岀骇鏌ヨ
+ filterSearchData () {
+ let _this = this;
+ let isFollow = '';
+ if(this.IsFollow === ''){
+ isFollow = ''
+ }else if(!!this.IsFollow){
+ isFollow = '1'
+ }else{
+ isFollow = '0'
+ }
+ let query = {
+ KeyWord: this.keyword,
+ StartDate: this.searchTime[0],
+ EndDate: this.searchTime[1],
+ PageIndex: this.showType == 'list' ? this.curTablePage : this.showType == 'list',
+ PageSize: this.showType == 'list' ? this.tablePageSize : this.tabPageSize,
+ IsDetail: this.showType == 'list',
+ IsFollow: isFollow
+ };
+ let filterQuerys = [];
+ this.checkedConfigs.forEach(config => {
+ let checkedOpts = config.data.filter(option => option.isChecked);
+ if (checkedOpts.length) {
+ var linkOpts = checkedOpts.map(opt => opt.name);
+ linkOpts = linkOpts.join(',');
+ let obj = {};
+ obj[config.NameEn] = linkOpts;
+ filterQuerys.push(obj);
+ }
+ })
+ Object.assign(query, ...filterQuerys);
+
+ getlst(query).then(res => {
+ if (_this.showType == 'list') {
+ _this.tableTotal = res.total;
+ _this.tableData = res.data;
+ } else {
+ _this.tabTotal = res.total;
+ _this.tabData = res.data;
+ }
+ })
+ },
+ //涓�绾ф煡璇�
init () {
let _this = this;
let query = {
KeyWord: this.keyword,
StartDate: this.searchTime[0],
EndDate: this.searchTime[1],
- PageIndex: this.showType=='list'?this.curTablePage:this.showType=='list',
- PageSize: this.showType=='list'?this.tablePageSize:this.tabPageSize,
- IsDetail: this.showType=='list'
+ PageIndex: this.showType == 'list' ? this.curTablePage : this.showType == 'list',
+ PageSize: this.showType == 'list' ? this.tablePageSize : this.tabPageSize,
+ IsDetail: this.showType == 'list',
+ IsFollow: this.IsFollow
};
this.optionalConfigs = [];
this.highLevelConfigs = [];
getlstInit(query).then(res => {
- debugger
- if(_this.showType=='list'){
+ if (_this.showType == 'list') {
_this.tableTotal = res.total;
- }else{
+ _this.tableData = res.data;
+ } else {
_this.tabTotal = res.total;
+ _this.tabData = res.data;
}
res.filterlst.forEach(config => {
@@ -481,8 +420,6 @@
let obj = {};
obj.name = key;
obj.id = config.Node[key]
- // item.id = item;
- // item.name = k;
return obj
});
config.id = config.ID;
@@ -509,29 +446,30 @@
});
console.log(this.optionalConfigs);
});
+
})
},
- delLabelChecked () {
-
+ toggleFollow (data) {
+ data.IsFollow = !data.IsFollow;
+ this.updataVideo(data);
+ if (data.IsFollow) {
+ this.$notify({
+ type: 'success',
+ message: '宸叉坊鍔犲叧娉�!'
+ });
+ }
},
- cancelLabelChecked () {
-
+ updataVideo (data) {
+ let _this = this;
+ updateVideoAnalyze(data).then(res => {
+ //浜岀骇鏌ヨ
+ });
},
- submitLabelChecked () {
- },
- addLabel (videoDetails) {
- debugger
- this.labelDialogVisible = true;
-
- },
- setGuid (guid) {
- this.videoWrapArr = Math.pow(guid, 2);
-
- },
- checkVideo (data) {
- this.videoDialogVisible = true;
- this.videoDetails = data;
+ checkVideoDetail (data) {
+ let _this = this;
+ _this.selectedVideo = data;
+ _this.videoDialogVisible = true;
},
checkFollow () {
@@ -539,12 +477,26 @@
},
checkType (type) {
this.showType = type;
- this.init();
+ this.filterSearchData()
},
clearCheckedConfigs () {
+ this.checkedConfigs.forEach(config => {
+ config.isShow = true;
+ config.data.forEach(d => {
+ d.isChecked = false
+ });
+ });
this.checkedConfigs = [];
+ this.showAdvance = true;
},
removeCheckedConfig (config) {
+ config.isShow = true;
+ if (config.IsAdvanced) {
+ this.showAdvance = true;
+ }
+ config.data.forEach(d => {
+ d.isChecked = false;
+ });
let index = this.checkedConfigs.findIndex(one => one.id == config.id);
this.checkedConfigs.splice(index, 1);
},
@@ -554,12 +506,14 @@
}
this.checkedConfigs.push(config);
- //config.isShow = false;
-
- // this.dataSearch();
- this.$nextTick(() => {
- config.isShow = false;
- })
+ config.isShow = false;
+ config.isMultCheck = false;
+ if (config.IsAdvanced) {
+ this.showAdvance = false;
+ }
+ // this.$nextTick(() => {
+ // this.$set(config, 'isShow', false)
+ // })
},
@@ -597,6 +551,9 @@
<style lang="scss">
.search-for-video-analyze {
padding: 20px 30px;
+ .flex-box{
+ display: flex;
+ }
.filter-area {
.input-area {
display: flex;
@@ -705,12 +662,12 @@
padding: 0px 12px;
border: 1px solid #ccc;
&:hover {
- color: #6486e7;
- border-color: #6486e7;
+ color: #7695ec;
+ border-color: #7695ec;
}
&.checked {
- color: #3d68e1;
- border-color: #3d68e1;
+ color: #409eff;
+ border-color: #409eff;
}
}
}
@@ -760,12 +717,15 @@
padding: 2px 5px;
cursor: pointer;
border: 1px solid #eee;
+ background-color: #ecf0fc;
border-radius: 3px;
+ color: #777;
&.menu {
margin-right: 10px;
}
&.current {
- border-color: #3d68e1;
+ border-color: #409eff;
+ background-color: #fff;
}
}
}
@@ -782,10 +742,12 @@
text-align: left;
border: 1px solid #dedede;
border-radius: 5px;
+ height: 350px;
.video-wrap {
background: aliceblue;
border-radius: 3px;
- video {
+ img {
+ width: 100%;
border-radius: 3px;
}
}
@@ -823,8 +785,9 @@
font-size: 20px;
right: 10px;
bottom: 10px;
+ color: #ccc;
.follow {
- color: #3d68e1;
+ color: #409eff;
}
}
}
@@ -840,8 +803,10 @@
}
}
.dialog-video {
+ z-index: 2096 !important;
.el-dialog {
width: 1180px;
+ height: 918px;
}
.el-dialog__body {
background: #f5f5f5;
@@ -849,6 +814,7 @@
}
.title-partment {
font-size: 14px;
+ font-weight: 500;
color: #333;
line-height: 18px;
margin-bottom: 8px;
@@ -857,85 +823,12 @@
background: #fff;
padding: 10px;
border-radius: 3px;
+ .flex-box > label {
+ color: #777;
+ }
}
.title {
font-size: 18px;
- }
- .content {
- padding: 15px;
- text-align: left;
- .content-top {
- margin-bottom: 10px;
- .grid-check {
- text-align: right;
- margin-bottom: 6px;
- span {
- font-size: 20px;
- color: #cacaca;
- padding-left: 12px;
- cursor: pointer;
- }
- }
- .video-area {
- display: flex;
- .info-list {
- width: 160px;
- margin-right: 10px;
- .video-name {
- color: #666;
- margin-bottom: 10px;
- &.current {
- color: #3d68e1;
- }
- i {
- padding-right: 4px;
- }
- }
- }
- .players {
- width: 960px;
- height: 540px;
- display: flex;
- .video-item {
- flex: 1;
- background: black;
- border: 1px solid #fff;
- }
- }
- }
- }
- .content-bottom {
- display: flex;
- .bot-left {
- flex: 1;
- }
- .bot-right {
- width: 210px;
- margin-left: 10px;
- label {
- color: #999;
- padding-right: 8px;
- }
- }
- }
- }
- }
- .label-dialog {
- .el-dialog {
- width: 700px;
- .label-check {
- min-height: 400px;
- margin-bottom: 20px;
- .el-checkbox-group {
- display: flex;
- flex-wrap: wrap;
- > label {
- width: 50%;
- text-align: left;
- margin: 0;
- }
- }
- }
}
}
}
--
Gitblit v1.8.0