From 3de57be3cf7ecd4e3105c03854523d3b9f152d80 Mon Sep 17 00:00:00 2001
From: ZZJ <zzjdsg2300@163.com>
Date: 星期五, 05 十一月 2021 14:05:15 +0800
Subject: [PATCH] 视频详情
---
src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue | 242 +++++++++++++++++++++++++++++++++++++-----------
1 files changed, 185 insertions(+), 57 deletions(-)
diff --git a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
index d6d1a9b..aefa6a1 100644
--- a/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
+++ b/src/pages/shuohuangMonitorAnalyze/components/searchForVideoAnalyze.vue
@@ -2,13 +2,8 @@
<div class="search-for-video-analyze">
<div class="filter-area">
<div class="input-area">
- <el-input
- class="search-input"
- size="small"
- v-model="keyword"
- placeholder="璇疯緭鍏ュ徃鏈恒�佽溅娆°�佹満杞﹀彿绛夊叧閿瘝杩涜鎼滅储"
- ></el-input>
<el-date-picker
+ style="width: 350px"
v-model="searchTime"
type="datetimerange"
size="small"
@@ -18,10 +13,23 @@
end-placeholder="缁撴潫鏃ユ湡"
align="right"
></el-date-picker>
- <el-button size="small" type="primary" @click="init">鎼滅储</el-button>
+ <el-input
+ class="search-input"
+ size="small"
+ v-model="keyword"
+ placeholder="璇疯緭鍏ュ徃鏈恒�佽溅娆°�佹満杞﹀彿绛夊叧閿瘝"
+ style="width: 315px"
+ >
+ <el-button
+ slot="append"
+ icon="el-icon-search"
+ size="small"
+ @click="init"
+ ></el-button>
+ </el-input>
</div>
<div class="checked-config">
- <span style="margin-top: 3px">宸查�夋潯浠�:</span>
+ <span style="margin-top: 3px; color: #425277">宸茬瓫閫夋潯浠�:</span>
<span
v-show="!checkedConfigs.length"
class="tip"
@@ -61,7 +69,10 @@
:key="index"
>
<template v-if="config.isShow">
- <div class="title">{{ config.title }}</div>
+ <div class="title">
+ <span class="icon iconfont">{{ getIcon(config.title) }}</span>
+ <span>{{ config.title }}</span>
+ </div>
<div class="options-wrap">
<div
class="options"
@@ -78,6 +89,7 @@
<span>{{ option.name }}</span>
</div>
<div
+ class="option-name"
v-show="!config.isMultCheck"
@click="checkOption(config, option)"
>
@@ -86,14 +98,14 @@
</div>
</div>
<div class="btns text-center" v-show="config.isMultCheck">
- <el-button size="mini" @click="cancleMultCheck(config)"
- >鍙栨秷</el-button
- >
<el-button
size="mini"
type="primary"
@click="checkOption(config)"
>纭畾</el-button
+ >
+ <el-button size="mini" @click="cancleMultCheck(config)"
+ >鍙栨秷</el-button
>
</div>
</div>
@@ -103,12 +115,12 @@
v-if="config.showMore"
@click="showMore(config)"
>
- <span>鏇村</span>
+ <span>鏇村</span>
<i
:class="
config.isShowMore
- ? 'el-icon-arrow-up'
- : 'el-icon-arrow-down'
+ ? 'el-icon-caret-top'
+ : 'el-icon-caret-bottom'
"
></i>
</div>
@@ -123,7 +135,10 @@
</template>
</div>
<div class="config" v-if="showAdvance">
- <div class="title">楂樼骇閫夐」</div>
+ <div class="title">
+ <span class="icon iconfont">{{ "\ue793" }}</span>
+ <span>楂樼骇閫夐」</span>
+ </div>
<div>
<el-menu
class="el-menu-demo"
@@ -369,7 +384,7 @@
>
<div slot="title" class="title">
<div class="center">
- <i class="el-icon-connection"></i>
+ <img src="/images/shuohuang/璺緞 414.png" alt="" />
<span>鎾斁瑙嗛</span>
</div>
</div>
@@ -386,7 +401,7 @@
@close="eventDialogVisible = false"
>
<div class="title" slot="title">
- <i class="el-icon-connection"></i>
+ <img src="/images/shuohuang/璺緞 414.png" alt="" />
<span>{{ curEvName }}瑙嗛</span>
</div>
<event-videos :eventVideoArr="eventVideoArr"></event-videos>
@@ -554,7 +569,7 @@
PageSize:
this.showType == "list" ? this.tablePageSize : this.tabPageSize,
IsDetail: this.showType == "list",
- IsFollow: this.IsFollow ,
+ IsFollow: this.IsFollow,
IsOperate: this.IsOperate,
};
let filterQuerys = [];
@@ -597,8 +612,8 @@
//涓�绾ф煡璇�
init() {
if (this.checkedConfigs.length) {
- this.filterSearchData()
- return
+ this.filterSearchData();
+ return;
}
let _this = this;
let query = {
@@ -745,6 +760,25 @@
opt.isChecked = false;
});
},
+ getIcon(name) {
+ switch (name) {
+ case "鏈鸿溅鍙�":
+ return "\ue796";
+ case "杞︽":
+ return "\ue795";
+ case "鍖烘/涓棿绔�":
+ return "\ue797";
+ case "閲嶇偣鍦版":
+ return "\ue78f";
+ case "鍗曚綅":
+ return "\ue794";
+ case "楂樼骇閫夐」":
+ return "\ue793";
+
+ default:
+ break;
+ }
+ },
handleSelect(key, keyPath) {},
showMore(config) {
config.isShowMore = !config.isShowMore;
@@ -844,7 +878,9 @@
<style lang="scss">
.search-for-video-analyze {
//鍑烘í鍚戞粴鍔ㄦ潯
- padding: 20px 40px;
+ padding: 25px 33px;
+ background-color: #fff;
+ margin: 33px;
.flex-box {
display: flex;
}
@@ -853,11 +889,34 @@
display: flex;
align-items: center;
height: 50px;
+
+ .el-range-editor--small .el-range-input {
+ font-size: 13px;
+ color: #7084b1;
+ }
+ .el-input__inner::placeholder {
+ color: #c7d0e5;
+ }
+ .el-range-editor--small .el-range-separator {
+ line-height: 25px;
+ font-size: 13px;
+ color: #7084b1;
+ }
.search-input {
width: 408px;
}
.el-date-editor {
- margin: 0 20px;
+ margin-right: 20px;
+ }
+ .el-input-group__append,
+ .el-input-group__prepend {
+ background-color: #2d52d7;
+ color: #fff;
+ border: 1px solid #2d52d7;
+ padding: 0 16px;
+
+ white-space: nowrap;
+ font-size: 18px;
}
}
.checked-config {
@@ -866,18 +925,18 @@
margin-bottom: 10px;
position: relative;
.config-item {
- padding-left: 10px;
- margin: 0 0 5px 5px;
- background: #f3f3f3;
- border: 1px solid #ddd;
+ padding-left: 8px;
+ margin: 0 5px;
+ background: #cfd5e3;
.remove {
cursor: pointer;
padding: 5px 5px;
margin-left: 5px;
+ background: #e1e4ed;
}
&:hover {
background: #fff;
- border-color: #3d68e1;
+ outline: 1px solid #2d52d7;
.remove {
background: #3d68e1;
color: #fff;
@@ -901,14 +960,19 @@
display: flex;
flex-wrap: no-wrap;
cursor: pointer;
- border-bottom: 1px solid #ddd;
+ border-bottom: 1px solid #d7dce8;
+
.title {
padding: 10px 20px;
- width: 100px;
+ width: 110px;
text-align: left;
- background: #f3f3f3;
- color: rgb(133, 133, 133);
- background: #ecf0fc;
+ color: #2d52d7;
+ font-weight: bold;
+ font-size: 14px;
+ .icon {
+ font-size: 14px;
+ margin-right: 10px;
+ }
}
.options-wrap {
flex: 1;
@@ -921,8 +985,15 @@
padding: 10px 20px;
height: 20px;
line-height: 20px;
- &:hover {
- color: #6486e7;
+ .option-name {
+ padding: 0 8px;
+ color: rgba(66, 82, 119, 1);
+ }
+ &:hover > .option-name {
+ outline: 1px solid #a8b7ee;
+ padding: 0 8px;
+ background: #e2e7f9;
+ color: #2d52d7;
}
.el-checkbox {
padding-right: 6px;
@@ -930,7 +1001,12 @@
}
}
.btns {
- margin: 20px 0;
+ margin: 12px 0;
+ .el-button--mini {
+ padding: 6px 17px;
+ font-size: 12px;
+ border-radius: 4px;
+ }
}
}
.right-btns {
@@ -939,34 +1015,36 @@
user-select: none;
justify-content: flex-end;
.more {
- margin-top: 6px;
+ margin-top: 7px;
padding: 0px 6px;
- border: 1px solid #ccc;
+
margin-right: 10px;
- width: 44px;
- height: 26px;
- line-height: 26px;
+ width: 46px;
+ height: 25px;
+ line-height: 25px;
border-radius: 2px;
+ background: #edeff2;
&:hover {
color: #6486e7;
}
}
.multCheck {
- margin-top: 6px;
+ margin-top: 7px;
width: 44px;
- height: 26px;
- line-height: 26px;
- padding: 0px 6px;
- border: 1px solid #ccc;
+ height: 23px;
+ line-height: 23px;
+ padding: 0px 12px;
+ border: 1px solid #d7dce7;
border-radius: 2px;
- &:hover {
- color: #7695ec;
- border-color: #7695ec;
- }
- &.checked {
- color: #409eff;
- border-color: #409eff;
- }
+ color: #ee4e6e;
+ // &:hover {
+ // color: #7695ec;
+ // border-color: #7695ec;
+ // }
+ // &.checked {
+ // color: #409eff;
+ // border-color: #409eff;
+ // }
}
}
.el-menu.el-menu--horizontal {
@@ -1159,7 +1237,7 @@
}
.dialog-video {
.el-dialog {
- width: 1180px;
+ width: 1340px;
}
.el-dialog__body {
background: #eaeaea;
@@ -1167,7 +1245,7 @@
height: inherit;
}
.el-dialog__header {
- padding: 3px;
+ padding: 0px;
.el-dialog__headerbtn {
top: 6px;
}
@@ -1188,7 +1266,24 @@
}
}
.title {
- font-size: 15px;
+ font-size: 16px;
+ height: 40px;
+ line-height: 40px;
+ background: #2d52d7;
+
+ span {
+ line-height: 40px;
+ color: #fcfcfc;
+ }
+
+ img {
+ width: 20px;
+ vertical-align: middle;
+ margin-right: 10px;
+ }
+ }
+ .el-dialog__close::before {
+ color: #fff;
}
}
.dialog-event {
@@ -1200,6 +1295,39 @@
.el-dialog__body {
padding: 0;
}
+ .el-dialog__header {
+ padding: 0px;
+ .el-dialog__headerbtn {
+ top: 6px;
+ }
+ }
+ .title {
+ font-size: 16px;
+ height: 40px;
+ line-height: 40px;
+ background: #2d52d7;
+
+ span {
+ line-height: 40px;
+ color: #fcfcfc;
+ }
+
+ img {
+ width: 20px;
+ vertical-align: middle;
+ margin-right: 10px;
+ }
+ }
+ .el-dialog__close::before {
+ color: #fff;
+ &:hover {
+ color: #fff;
+ }
+ }
+
+ .more-videos .top .title {
+ background-color: #fff;
+ }
}
}
}
--
Gitblit v1.8.0