|
@@ -6,78 +6,53 @@
|
|
|
<!--主体-->
|
|
|
<div class="visual-body">
|
|
|
<!-- 左侧 -->
|
|
|
- <div class="leftbar" ref="left">
|
|
|
+ <div class="leftbar" ref="left" style="height: 82%;">
|
|
|
<!-- 通知公告 -->
|
|
|
<Notification></Notification>
|
|
|
- <!-- 2 事件统计-->
|
|
|
- <div class="forthis">
|
|
|
- <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
|
|
|
- <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
|
|
|
- <div class="i-list-con h-29-5">
|
|
|
- <div class="d-l-con no_hover">
|
|
|
- <div class="event-count">
|
|
|
- <div class="count-number">{{ totalStr.charAt(0) }}</div>
|
|
|
- <div class="count-number">{{ totalStr.charAt(1) }}</div>
|
|
|
- <div class="count-number">{{ totalStr.charAt(2) }}</div>
|
|
|
- <div class="count-number">{{ totalStr.charAt(3) }}</div>
|
|
|
- <div class="count-number">{{ totalStr.charAt(4) }}</div>
|
|
|
- <div class="count-number">{{ totalStr.charAt(5) }}</div>
|
|
|
- <dv-decoration-5 style="width:81%;height:15px;position: absolute; top:4.2rem;z-index: 0; " />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="d-l-con-icon no_hover">
|
|
|
- <div class="icon-con w-33 flex-d t-a-center">
|
|
|
- <dv-decoration-9
|
|
|
- style="width: 5.5rem;height: 5.5rem; color:#16e29e;font-size: 1rem;font-weight: bolder;">
|
|
|
- {{ newReportPre }}%
|
|
|
- </dv-decoration-9>
|
|
|
- <div class="e-state"
|
|
|
- :style="{'background-image':`url(${require('@/assets/images/integrated/state-bg.png')})`}">
|
|
|
- <span>未签收</span> <span>{{ newReport }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="icon-con w-33 flex-d t-a-center">
|
|
|
- <dv-decoration-9
|
|
|
- style="width: 5.5rem;height: 5.5rem; color:#f18425;font-size: 1rem;font-weight: bolder;">
|
|
|
- {{ readySurePre }}%
|
|
|
- </dv-decoration-9>
|
|
|
- <div class="e-state"
|
|
|
- :style="{'background-image':`url(${require('@/assets/images/integrated/state-bg.png')})`}">
|
|
|
- <span>处理中</span> <span>{{ readySure }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="icon-con w-33 flex-d t-a-center">
|
|
|
- <dv-decoration-9
|
|
|
- style="width: 5.5rem;height: 5.5rem; color:#9179f1;font-size: 1rem;font-weight: bolder;">
|
|
|
- {{ readyFinishPre }}%
|
|
|
- </dv-decoration-9>
|
|
|
- <div class="e-state"
|
|
|
- :style="{'background-image':`url(${require('@/assets/images/integrated/state-bg.png')})`}">
|
|
|
- <span>办结归档</span> <span>{{ readyFinish }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="d-l-con no_hover">
|
|
|
- <div id="chart-event-ai" style="width: 100%;height:6vh;"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </dv-border-box-13>
|
|
|
- </div>
|
|
|
- <!-- 3 组织机构 -->
|
|
|
- <div class="forthis">
|
|
|
- <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
|
|
|
- <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
|
|
|
- <div class="i-list-con h-27">
|
|
|
- <div class="d-l-con " v-for="(item,index) in forestFarm" :key="index"
|
|
|
- :class="{on:listCurrentIndex1==item.deptId}" v-on:click="selectCameraByDeptId(item.deptId)">
|
|
|
- <div class="d-l-l-text">
|
|
|
- <i class="i-small"></i>
|
|
|
- <h4>{{ item.deptName }}</h4>
|
|
|
- </div>
|
|
|
- <div class="d-l-l-count">{{ item.eventCount }}</div>
|
|
|
+
|
|
|
+ <!-- 公司列表 -->
|
|
|
+ <div class="third_contain">
|
|
|
+ <!-- 三级搜索框 -->
|
|
|
+ <el-input v-model="thirdInput" class="thirdInputModel" placeholder="按企业名称搜索 " style="color:white" @change="thirdLevelSearch">
|
|
|
+ </el-input>
|
|
|
+ <div style="height: 4%;"></div>
|
|
|
+ <div class="sp_sbg">
|
|
|
+ <div
|
|
|
+ style="width: 100%;height: 9%;display: flex;"
|
|
|
+ v-for="(e,index) in companyList"
|
|
|
+ :key="index"
|
|
|
+ class="sp_sbg_div"
|
|
|
+ :class=" deviceBtn == index ? 'on': 'onno'"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ :style="deviceBtn == index ? 'color:#38CCEA' : 'color:#fff'"
|
|
|
+ :class=" deviceBtn == index ? 'highlightedBtn': 'notHighlightedBtn'"
|
|
|
+ @click="getDeviceList(e,index)">
|
|
|
+ <el-tooltip :content="e.name" placement="top" v-if="(e.name!=null||e.name!='')&&e.name.length>8">
|
|
|
+ <span style="position: relative;left: -18%;">
|
|
|
+ {{ e.name.substring(0,8) }}...
|
|
|
+ </span>
|
|
|
+ </el-tooltip>
|
|
|
+ <span style="position: relative;left: -18%;" v-else>
|
|
|
+ {{ e.name }}
|
|
|
+ </span>
|
|
|
+ </el-button>
|
|
|
+ <div
|
|
|
+ class="thirdDevice_icon thirdHighlightedBtn"
|
|
|
+ @click="thirdDeviceHashighLighted(e,index)"
|
|
|
+ >
|
|
|
</div>
|
|
|
</div>
|
|
|
- </dv-border-box-13>
|
|
|
+ </div>
|
|
|
+ <!--分页-->
|
|
|
+ <div class="paging">
|
|
|
+ <el-button type="button" @click="getCompanyList(10,queryParams.pageNum-1)">上一页
|
|
|
+ </el-button>
|
|
|
+ <span>第{{ queryParams.pageNum }}页</span>
|
|
|
+ <el-button type="button" :disabled="nextbutton"
|
|
|
+ @click="getCompanyList(10,queryParams.pageNum+1)">下一页
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 地图 -->
|
|
@@ -104,7 +79,7 @@
|
|
|
</div>
|
|
|
|
|
|
<!-- 右侧 -->
|
|
|
- <div class="rightbar rightbar-index" ref="right">
|
|
|
+ <div class="rightbar rightbar-index" ref="right" style="height: 81%;">
|
|
|
<div class="right-item1">
|
|
|
<!-- 天气 -->
|
|
|
<div class="forthis">
|
|
@@ -235,62 +210,42 @@
|
|
|
</div>
|
|
|
</dv-border-box-13>
|
|
|
</div>
|
|
|
- <!-- 曝光台 -->
|
|
|
- <!-- <ExceedEvent class="forthis" :exposureStageList="exposureStageList"></ExceedEvent> -->
|
|
|
- <!-- 事件列表 -->
|
|
|
- <EventList
|
|
|
- :eventList="eventList"
|
|
|
- :nextbutton="nextbutton"
|
|
|
- class="forthis"
|
|
|
- :pageNumOfParent="currentPageNum"
|
|
|
- :newPageNum="newPageNum"
|
|
|
- :currentDayOfParent="calendarDay"
|
|
|
- ref="eventCom"
|
|
|
- ></EventList>
|
|
|
- </div>
|
|
|
- <div class="right-item2">
|
|
|
- <!-- 日历 -->
|
|
|
- <div class="forthis">
|
|
|
- <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
|
|
|
- <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
|
|
|
- <div class="i-list-con small-bottom-margin h-30">
|
|
|
- <dateChoose @selectDay="selectDay" :canSelectDate="this.canSelectDate"></dateChoose>
|
|
|
- </div>
|
|
|
- </dv-border-box-13>
|
|
|
- </div>
|
|
|
- <!-- 事件分类 -->
|
|
|
- <div class="forthis">
|
|
|
- <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
|
|
|
- <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
|
|
|
- <div class="this-title" style="cursor: pointer"
|
|
|
- @click="setEventTypeId({eventTypeIdDl: [], eventTypeId: []})">
|
|
|
- <span title="点击查询全部事件类型">事件分类</span>
|
|
|
- <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
|
|
|
- </div>
|
|
|
- <div class="i-list-con small-bottom-margin h-19">
|
|
|
- <chart v-if="showEventKind" :config="eventKind" @setEventTypeId="setEventTypeId"
|
|
|
- style="width: 90%;height: 18vh; padding:.5rem 1rem" />
|
|
|
+ <!-- 设备列表 -->
|
|
|
+ <div class="container">
|
|
|
+ <div class="topBar">设备列表</div>
|
|
|
+ <!-- 输入框 -->
|
|
|
+ <el-input v-model="input" class="inputModel" placeholder="请输入要查询的设备名称 " clearable style="color:white" @change="search" >
|
|
|
+ </el-input>
|
|
|
+ <!-- 菜单 -->
|
|
|
+ <div class="mainContainer">
|
|
|
+ <!-- 列表 -->
|
|
|
+ <div class="listItem" v-for="(e,idx) in cameraListSearch" :key="idx" @click="dropLocation(e.latitude, e.longitude, idx,e.cameraRadius)">
|
|
|
+ <img class="itemPic"
|
|
|
+ v-bind:src="e.cameraImg == null ? require('@/assets/images/video-plaza/shiLianWangImg/no-camera.png'):fileUrl+e.cameraImg" >
|
|
|
+ <div class="itemArea" >
|
|
|
+ <h4>{{ e.sbName }}</h4>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </dv-border-box-13>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
-
|
|
|
- <!-- 上报排行 -->
|
|
|
- <!-- <div class="forthis">
|
|
|
- <dv-border-box-13 backgroundColor="rgba(12, 19, 38, .90)" style="padding-bottom: 1rem;">
|
|
|
- <img src="../assets/images/integrated/light.png" style="width: 100%; margin-top: .4rem;" />
|
|
|
- <div class="this-title">
|
|
|
- <span>上报排行</span>
|
|
|
- <dv-decoration-3 style="width:150px;height:15px;margin-right: 1rem;" />
|
|
|
- </div>
|
|
|
- <div class="i-list-con small-bottom-margin h-19">
|
|
|
- <dv-scroll-ranking-board :config="reportList" style="width: 100%;height: 300px; padding:.5rem 1rem" />
|
|
|
- </div>
|
|
|
- </dv-border-box-13>
|
|
|
- </div> -->
|
|
|
- <ReportRanking class="forthis" :reportList="reportList"></ReportRanking>
|
|
|
-
|
|
|
</div>
|
|
|
|
|
|
+ <!-- 设备列表 -->
|
|
|
+ <div class="container1">
|
|
|
+ <div class="topBar">企业信息</div>
|
|
|
+ <!-- 输入框 -->
|
|
|
+ <el-input v-model="input" class="inputModel" placeholder="请输入要查询的企业信息 " clearable style="color:white" @change="search" >
|
|
|
+ </el-input>
|
|
|
+ <!-- 菜单 -->
|
|
|
+ <div class="mainContainer">
|
|
|
+ <!-- 列表 -->
|
|
|
+ <div class="listItem" v-for="(e,idx) in cameraListSearch" :key="idx" @click="showCompanyDialog(e)">
|
|
|
+ <div class="itemArea">
|
|
|
+ <h4>{{ e.sbName }}</h4>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<vBottomMenu ref="bottomMenu" @stopAudio="stopAudio"></vBottomMenu>
|
|
|
</div>
|
|
@@ -305,6 +260,7 @@
|
|
|
<TVWall ref="TVWall"></TVWall>
|
|
|
<TVWalls ref="TVWalls"></TVWalls>
|
|
|
<wrj ref="wrj"></wrj>
|
|
|
+ <CompanyProjectDialog ref="companyProjectDialog"></CompanyProjectDialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
@@ -346,6 +302,7 @@
|
|
|
import firespread from '@/views/firespread.vue' //事件详情弹窗
|
|
|
import chart from './from/dvCapsuleChart.vue'
|
|
|
import {getUserProfile} from "@/api/system/user";
|
|
|
+ import CompanyProjectDialog from '@/components/companyProjectDialog'
|
|
|
|
|
|
/** ----------------------------------摄像头预览开始------------------------------------- */
|
|
|
import {
|
|
@@ -380,6 +337,7 @@
|
|
|
// ExceedEvent, // 超期事件栏
|
|
|
EventList, // 事件列表
|
|
|
ReportRanking, // 上报排行
|
|
|
+ CompanyProjectDialog
|
|
|
},
|
|
|
created() {
|
|
|
this.selectByMenuId()
|
|
@@ -508,6 +466,106 @@
|
|
|
lat: ""
|
|
|
},
|
|
|
/** ----------------------------------定位功能-----------------------------------------*/
|
|
|
+ thirdInput:'', // 输入框label(三级)
|
|
|
+ companyList:[
|
|
|
+ {
|
|
|
+ name:'测试测试测试测试测试测试'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'测试测试测试测试测试测试'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'测试测试测试测试测试测试'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'测试测试测试测试测试测试'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'测试测试测试测试测试测试'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'测试测试测试测试测试测试'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'测试测试测试测试测试测试'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'测试测试测试测试测试测试'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name:'测试测试测试测试测试测试'
|
|
|
+ },
|
|
|
+ ], // 企业列表
|
|
|
+ cameraListSearch:[
|
|
|
+ {
|
|
|
+ sbName:'测试测试测试测试测试测试',
|
|
|
+ cameraImg:null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sbName:'测试测试测试测试测试测试',
|
|
|
+ cameraImg:null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sbName:'测试测试测试测试测试测试',
|
|
|
+ cameraImg:null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sbName:'测试测试测试测试测试测试',
|
|
|
+ cameraImg:null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sbName:'测试测试测试测试测试测试',
|
|
|
+ cameraImg:null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sbName:'测试测试测试测试测试测试',
|
|
|
+ cameraImg:null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sbName:'测试测试测试测试测试测试',
|
|
|
+ cameraImg:null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sbName:'测试测试测试测试测试测试',
|
|
|
+ cameraImg:null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sbName:'测试测试测试测试测试测试',
|
|
|
+ cameraImg:null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sbName:'测试测试测试测试测试测试',
|
|
|
+ cameraImg:null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sbName:'测试测试测试测试测试测试',
|
|
|
+ cameraImg:null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sbName:'测试测试测试测试测试测试',
|
|
|
+ cameraImg:null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sbName:'测试测试测试测试测试测试',
|
|
|
+ cameraImg:null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sbName:'测试测试测试测试测试测试',
|
|
|
+ cameraImg:null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sbName:'测试测试测试测试测试测试',
|
|
|
+ cameraImg:null
|
|
|
+ },
|
|
|
+ {
|
|
|
+ sbName:'测试测试测试测试测试测试',
|
|
|
+ cameraImg:null
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ queryParams:{
|
|
|
+ pageNum:1
|
|
|
+ }, // 企业列表参数
|
|
|
+ deviceBtn:null
|
|
|
}
|
|
|
},
|
|
|
/** ----------------------------------weosocket开始------------------------------------- */
|
|
@@ -532,6 +590,20 @@
|
|
|
},
|
|
|
/** ----------------------------------weosocket结束------------------------------------- */
|
|
|
methods: {
|
|
|
+ showCompanyDialog(e){
|
|
|
+ this.$refs.companyProjectDialog.open({label:'测试',value:'测试'})
|
|
|
+ },
|
|
|
+ // 查询收藏列表
|
|
|
+ getCompanyList(pageSize, pageNum) {
|
|
|
+ },
|
|
|
+ //三级列表选择(获取列表)
|
|
|
+ async getDeviceList(e,idx){
|
|
|
+ this.deviceBtn=idx
|
|
|
+ // this.$emit('setcameraDataList',[])
|
|
|
+ // const resdata = await getCameraById({labelId:e.id});
|
|
|
+ // this.cameraList = resdata.data?resdata.data:[]
|
|
|
+ // await this.$emit('setcameraDataList',resdata.data?resdata.data:[])
|
|
|
+ },
|
|
|
getLocation(event) {
|
|
|
this.visible_dw = !this.visible_dw
|
|
|
if (!this.visible_dw) {
|
|
@@ -1413,35 +1485,224 @@
|
|
|
|
|
|
<style rel="stylesheet/scss" lang="scss" scoped>
|
|
|
@import '@/assets/styles/base.scss';
|
|
|
- .paging {
|
|
|
- padding: .5rem .3rem;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-content: center;
|
|
|
|
|
|
- span {
|
|
|
- color: #2bacf7;
|
|
|
+ .highlightedBtn{
|
|
|
+ background: url('~@/assets/images/video-plaza/highLightBtn.png') 0 0 no-repeat; /* 高亮背景 */
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ .notHighlightedBtn{
|
|
|
+ background: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .third_contain{
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: scroll;
|
|
|
+ width: 99%;
|
|
|
+ height: 100%;
|
|
|
+ padding-left:10px;
|
|
|
+ ::v-deep .el-button{
|
|
|
+ width: 80%;
|
|
|
+ height: 100%;
|
|
|
+ margin-left: 0 !important;
|
|
|
+ >span{
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ >span >span{
|
|
|
+ left: 0 !important;
|
|
|
+ display: inline-block;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ::v-deep .el-button:not(:nth-child(1)){
|
|
|
+ }
|
|
|
+ .thirdDevice_icon{
|
|
|
+ width: 10%;
|
|
|
+ margin: 1.7% 15px 0 2%;
|
|
|
+ height: 70%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .paging {
|
|
|
+ height: 4%;
|
|
|
+ padding: 0rem .3rem;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 0 1rem;
|
|
|
+ justify-content: center;
|
|
|
+ align-content: center;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: #2bacf7;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 1rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ button {
|
|
|
+ width: 70px;
|
|
|
+ padding: 0 0.3rem;
|
|
|
+ height: 1.5rem;
|
|
|
+ background-color: #112543;
|
|
|
+ color: #2bacf7;
|
|
|
+ border: 1px solid #33467f;
|
|
|
+ }
|
|
|
+
|
|
|
+ button:hover {
|
|
|
+ padding: 0 0.3rem;
|
|
|
+ height: 1.5rem;
|
|
|
+ background-color: #112543;
|
|
|
+ color: #0ff7c5;
|
|
|
+ border: 1px solid #1d657f;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .thirdInputModel{
|
|
|
+ margin-top: 10px;
|
|
|
+ // margin-left: 8%;
|
|
|
+ // width: 95%;
|
|
|
+ }
|
|
|
+ .sp_sbg{
|
|
|
+ overflow: hidden;
|
|
|
+ overflow-y: scroll;
|
|
|
+ width: 100%;
|
|
|
+ height: 80%;
|
|
|
+ .sp_sbg_div{
|
|
|
+ background-color: rgb(35, 76, 172,0.2);
|
|
|
+ margin: 5px 0px;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ .el-button{
|
|
|
+ background: none;
|
|
|
+ outline: 0px;
|
|
|
+ border: 0px;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- button {
|
|
|
- padding: 0 0.3rem;
|
|
|
- height: 1.5rem;
|
|
|
- background-color: #112543;
|
|
|
- color: #2bacf7;
|
|
|
- border: 1px solid #33467f;
|
|
|
+ .sp_sbg_div.on{
|
|
|
+ background-color: rgb(35, 76, 172,0.4);
|
|
|
+ .el-button{
|
|
|
+ span{
|
|
|
+ color: #01FBFE!important;
|
|
|
+ text-shadow: 0px 0px 3px #01FBFE;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- button:hover {
|
|
|
- padding: 0 0.3rem;
|
|
|
- height: 1.5rem;
|
|
|
- background-color: #112543;
|
|
|
- color: #0ff7c5;
|
|
|
- border: 1px solid #1d657f;
|
|
|
+ }
|
|
|
+ .sip_img{
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ .sip_imgon{
|
|
|
+ opacity: 1;
|
|
|
+ box-shadow: 0px 5px 5px #0b3555;
|
|
|
+ }
|
|
|
+ .thirdHighlightedBtn{
|
|
|
+ background: url('~@/assets/images/video-plaza/camera1_on.png') 0 0 no-repeat; /* 高亮背景 */
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .thirdDevice_icon{
|
|
|
+ width: 10%;
|
|
|
+ margin: 1.7% 15px 0 2%;
|
|
|
+ height: 70%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container{
|
|
|
+ width:98%;
|
|
|
+ height:70%;
|
|
|
+ position: relative;
|
|
|
+ left: 1%;
|
|
|
+ z-index: 20;
|
|
|
+ background: url('~@/assets/images/video-plaza/bg-sl.png') 0 0 no-repeat; /* 高亮背景 */
|
|
|
+ border-bottom: 1px solid #1b497d;
|
|
|
+ border-right: 1px solid #1b497d;
|
|
|
+ }
|
|
|
+
|
|
|
+ .container1{
|
|
|
+ width:48%;
|
|
|
+ height:95%;
|
|
|
+ position: relative;
|
|
|
+ left: 1%;
|
|
|
+ z-index: 20;
|
|
|
+ background: url('~@/assets/images/video-plaza/bg-sl.png') 0 0 no-repeat; /* 高亮背景 */
|
|
|
+ border-bottom: 1px solid #1b497d;
|
|
|
+ border-right: 1px solid #1b497d;
|
|
|
+ .listItem{
|
|
|
+ cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+ .topBar{
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ z-index: 99;
|
|
|
+ width: 100%;
|
|
|
+ height: 4%;
|
|
|
+ text-indent: 23px;
|
|
|
+ line-height: 1.1;
|
|
|
+ color: #fff;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ background: url('~@/assets/images/video-plaza/rightBar.png') 0 0 no-repeat
|
|
|
+ }
|
|
|
+
|
|
|
+ .mainContainer{
|
|
|
+ overflow: hidden scroll;
|
|
|
+ position: absolute;
|
|
|
+ width: 90%;
|
|
|
+ height: 80%;
|
|
|
+ margin: 7% auto auto 5%;
|
|
|
+ }
|
|
|
+ .listItem{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ height: 9%;
|
|
|
+ width: 100%;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .listItem:not(:nth-child(1)){
|
|
|
+ margin-top: 6%;
|
|
|
+ }
|
|
|
+ .itemPic{
|
|
|
+ width: 24%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .itemArea{
|
|
|
+ font-size: 15px;
|
|
|
+ white-space: nowrap;
|
|
|
+ width: 73%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin:auto auto auto 2%;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .itemArea:hover {
|
|
|
+ white-space: normal;
|
|
|
+ overflow: visible;
|
|
|
+ }
|
|
|
+ .itemArea >h3{
|
|
|
+ font-size: 20px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .itemArea >span{
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .inputModel{
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 14%;
|
|
|
+ padding: 0 5%;
|
|
|
+ }
|
|
|
+ ::v-deep .el-input__inner{
|
|
|
+ background-color: #0e3271ba ;
|
|
|
+ box-shadow: inset 0 0 10px 2px #1b497d;
|
|
|
+ border: 1px solid #205b8b;
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss">
|