From 2f26fbc8e76dc8f4c87696367e2ead8f6b7a452a Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Sat, 26 Nov 2022 14:57:48 +0800
Subject: [PATCH] 样式调整
---
src/views/lyout/index.vue | 87 +++++----
src/styles/base/index.scss | 7
src/views/home/index.vue | 249 ++++++---------------------
src/styles/dc/index.scss | 16
src/views/home/components/rightContainer.vue | 98 ++++------
src/views/home/components/leftContainer.vue | 42 +--
6 files changed, 175 insertions(+), 324 deletions(-)
diff --git a/src/styles/base/index.scss b/src/styles/base/index.scss
index 1b4c62c..4087a5b 100644
--- a/src/styles/base/index.scss
+++ b/src/styles/base/index.scss
@@ -10,6 +10,7 @@
body {
width: 100%;
height: 100%;
+ font-size: 16px;
}
ul {
@@ -460,7 +461,8 @@
justify-content: center;
width: 100%;
height: 100%;
- flex-wrap:wrap;
+ flex-wrap: wrap;
+
input {
width: 90%;
height: 30px;
@@ -478,6 +480,7 @@
input::-webkit-input-placeholder {
color: rgba(238, 238, 238, 0.7);
}
+
button {
width: 60px;
height: 30px;
@@ -491,7 +494,7 @@
}
}
-.choose-police-box{
+.choose-police-box {
.el-dialog {
margin: 0 !important;
display: flex;
diff --git a/src/styles/dc/index.scss b/src/styles/dc/index.scss
index b8802ba..7fdcbec 100644
--- a/src/styles/dc/index.scss
+++ b/src/styles/dc/index.scss
@@ -47,12 +47,12 @@
}
.dc-location-bar.homebottom {
- bottom: 370px !important;
+ bottom: 378px !important;
}
.dc-zoom-controller.homebottom {
- left: 410px !important;
- bottom: 366px !important;
+ left: 402px !important;
+ bottom: 362px !important;
}
.screen-full-btn {
@@ -83,8 +83,8 @@
}
.screen-full-btn.homebottom {
- left: 410px !important;
- bottom: 320px;
+ left: 402px !important;
+ bottom: 318px;
}
.dc-zoom-controller.shrink-btn {
@@ -114,8 +114,8 @@
}
.image-switch-icon-btn.iconbottom {
- left: 410px;
- bottom: 486px;
+ left: 402px;
+ bottom: 476px;
}
.image-switch-icon-btn.shrink-btn {
@@ -171,7 +171,7 @@
.image-switch-img-btn.imgbottom {
left: 446px;
- bottom: 490px;
+ bottom: 452px;
}
.image-switch-img-btn.shrink-btn {
diff --git a/src/views/home/components/leftContainer.vue b/src/views/home/components/leftContainer.vue
index e3d4e21..dbee1aa 100644
--- a/src/views/home/components/leftContainer.vue
+++ b/src/views/home/components/leftContainer.vue
@@ -3,16 +3,9 @@
<div class="person-box">
<div class="title">
<div>
- <span
- class="peopleTap"
- :class="{ choosed: peopletype == 0 }"
- @click="peopleTabClick(0)"
- >现有人员</span>/
- <span
- class="peopleTap"
- :class="{ choosed: peopletype == 1 }"
- @click="peopleTabClick(1)"
- >重点人员</span>
+ <span class="peopleTap" :class="{ choosed: peopletype == 0 }"
+ @click="peopleTabClick(0)">现有人员</span>/
+ <span class="peopleTap" :class="{ choosed: peopletype == 1 }" @click="peopleTabClick(1)">重点人员</span>
</div>
<div>
共
@@ -35,12 +28,7 @@
</div>
</div>
<div id="PersonEcharts" class="echarts-box"></div>
- <div
- class="back"
- title="返回上一级"
- v-show="dataDeep == 2 && peopletype == 0"
- @click="backBegin"
- ></div>
+ <div class="back" title="返回上一级" v-show="dataDeep == 2 && peopletype == 0" @click="backBegin"></div>
</div>
<div class="house-box">
<div class="title">现有房屋</div>
@@ -835,7 +823,7 @@
height: 100%;
.person-box {
- height: 35%;
+ height: 300px;
.peopleTap {
color: rgb(98, 95, 95);
@@ -881,19 +869,17 @@
}
}
- .house-box {
- flex: 1;
- }
-
.land-box {
- height: 310px;
+ height: 300px;
}
.person-box,
.house-box,
.land-box {
+ margin: 8px;
display: flex;
flex-direction: column;
+ background: $bg-color;
.title::after {
content: '';
@@ -914,7 +900,7 @@
text-align: left;
height: 40px;
line-height: 40px;
- font-size: 20px;
+ font-size: 16px;
display: flex;
justify-content: space-between;
background-image: linear-gradient(to right, #2e4aba, #010d3e);
@@ -923,7 +909,7 @@
color: #fff;
}
- & > div:nth-of-type(2) {
+ &>div:nth-of-type(2) {
font-size: 14px;
}
}
@@ -945,7 +931,7 @@
border: 1px solid rgba(20, 50, 123, 1);
cursor: pointer;
- & > div {
+ &>div {
height: 26px;
line-height: 26px;
}
@@ -963,6 +949,12 @@
}
}
+ .house-box {
+ flex: 1;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
:deep(.el-table__body-wrapper) {
overflow-x: hidden !important;
}
diff --git a/src/views/home/components/rightContainer.vue b/src/views/home/components/rightContainer.vue
index fa38aea..0e8e7b9 100644
--- a/src/views/home/components/rightContainer.vue
+++ b/src/views/home/components/rightContainer.vue
@@ -1,48 +1,29 @@
<template>
- <div class="container">
- <div class="case-box">
+ <div class="container" ref="Container">
+ <div class="case-box" ref="caseBox">
<div class="title">
案件统计
<div class="timer">
- <el-date-picker
- v-model="eventTime"
- type="daterange"
- align="right"
- unlink-panels
- range-separator="至"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- :picker-options="pickerOptions"
- ></el-date-picker>
+ <el-date-picker v-model="eventTime" type="daterange" align="right" unlink-panels range-separator="至"
+ start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
+ </el-date-picker>
</div>
</div>
<div id="EventChangeEcharts" class="echarts-box"></div>
</div>
- <div class="alert-box">
- <div class="title">
+
+ <div class="alert-box" ref="alertBox">
+ <div class="title" ref="alertBoxTitle">
<span style="margin-right:130px">安保活动</span>
- <span
- class="activity"
- :class="{ choosed: acttype == 0 }"
- @click="actTabClick(0)"
- >正在进行</span>
+ <span class="activity" :class="{ choosed: acttype == 0 }" @click="actTabClick(0)">正在进行</span>
<span>/</span>
- <span
- class="activity"
- :class="{ choosed: acttype == 1 }"
- @click="actTabClick(1)"
- >历史活动</span>
+ <span class="activity" :class="{ choosed: acttype == 1 }" @click="actTabClick(1)">历史活动</span>
</div>
<div id="peopleList" class="echarts-box">
- <el-table
- :data="acttype == 0 ? underwayArr : historyArr"
- style="width: 100%"
+ <el-table :height="tableHeight" :data="acttype == 0 ? underwayArr : historyArr" style="width: 100%"
:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
- :row-class-name="tableRowClassName"
- ref="activityTable"
- @row-click="activityRowClick"
- >
+ :row-class-name="tableRowClassName" ref="activityTable" @row-click="activityRowClick">
<el-table-column prop="activityName" label="活动名称"></el-table-column>
<el-table-column prop="startTime" label="开始时间"></el-table-column>
<el-table-column prop="endTime" label="结束时间"></el-table-column>
@@ -50,20 +31,13 @@
</el-table>
</div>
</div>
- <div class="crowd-box">
+
+ <div class="crowd-box" ref="crowdBox">
<div class="title">
<span style="margin-right:130px">现有设备</span>
- <span
- class="equiment"
- :class="{ choosed: linetype == 0 }"
- @click="lineTabClick(0)"
- >设备种类</span>
+ <span class="equiment" :class="{ choosed: linetype == 0 }" @click="lineTabClick(0)">设备种类</span>
<span>/</span>
- <span
- class="activity"
- :class="{ choosed: linetype == 1 }"
- @click="lineTabClick(1)"
- >设备状态</span>
+ <span class="activity" :class="{ choosed: linetype == 1 }" @click="lineTabClick(1)">设备状态</span>
</div>
<div style="overflow: hidden;" id="EquipmentEcharts" class="echarts-box"></div>
</div>
@@ -130,6 +104,7 @@
spareNewArr: [],
overhaulNewArr: [],
disableNewArr: [],
+ tableHeight: 0
}
},
created () {
@@ -145,8 +120,12 @@
this.clickEquimentChart()
this.historyArr = historyArr
this.underwayArr = underwayArr
+
this.$nextTick(() => {
window.addEventListener("resize", this.echartsResize)
+ this.tableHeight = this.$refs.Container.offsetHeight - this.$refs.caseBox.offsetHeight - this.$refs.crowdBox.offsetHeight - this.$refs.alertBoxTitle.offsetHeight - 52
+
+ console.log(this.tableHeight, this.$refs.Container.offsetHeight, this.$refs.caseBox.offsetHeight, this.$refs.crowdBox.offsetHeight, this.$refs.alertBoxTitle.offsetHeight, 32)
})
this.equipmentEchartsCarousel()
},
@@ -674,32 +653,20 @@
width: 100%;
.case-box {
- height: 30%;
- }
-
- .alert-box,
- .crowd-box {
- height: 35%;
-
- .echarts-box {
- overflow-x: hidden;
- overflow-y: auto;
- }
- }
-
- .alert-box {
- flex: 1;
+ height: 300px;
}
.crowd-box {
- height: 310px;
+ height: 300px;
}
.case-box,
.alert-box,
.crowd-box {
+ margin: 8px;
display: flex;
flex-direction: column;
+ background: $bg-color;
.title::after {
content: '';
@@ -720,7 +687,7 @@
text-align: left;
height: 40px;
line-height: 40px;
- font-size: 20px;
+ font-size: 16px;
background-image: linear-gradient(to right, #2e4aba, #010d3e);
.timer {
@@ -766,7 +733,7 @@
border: 1px solid rgba(20, 50, 123, 1);
cursor: pointer;
- & > div {
+ &>div {
height: 26px;
line-height: 26px;
}
@@ -786,5 +753,16 @@
height: 100%;
}
}
+
+ .alert-box {
+ flex: 1;
+ margin-top: 0;
+ margin-bottom: 0;
+
+ .echarts-box {
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
+ }
}
</style>
\ No newline at end of file
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 050aba8..63c861e 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-08-18 16:18:17
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2022-11-12 14:12:25
+ * @LastEditTime: 2022-11-26 14:53:59
* @FilePath: \srs-police-affairs\src\views\home\index.vue
* @Description: 小区-栋-层-房屋
*
@@ -11,31 +11,18 @@
<template>
<div class="container">
- <left-container
- class="left-container"
- @showpeopledetail="showpeopledetail"
- @showlanddetail="showlanddetail"
- @showkeypersondetail="showkeypersondetail"
- ref="leftContainer"
- ></left-container>
+ <left-container class="left-container" @showpeopledetail="showpeopledetail" @showlanddetail="showlanddetail"
+ @showkeypersondetail="showkeypersondetail" ref="leftContainer"></left-container>
- <right-container
- class="right-container"
- @showequimentdetail="showequimentdetail"
- @selectPoliceChangeEventData="selectPoliceChangeEventData"
- @changeActivityType="changeActivityType"
- @activityChange="activityChange"
- ref="rightContainer"
- ></right-container>
+ <right-container class="right-container" @showequimentdetail="showequimentdetail"
+ @selectPoliceChangeEventData="selectPoliceChangeEventData" @changeActivityType="changeActivityType"
+ @activityChange="activityChange" ref="rightContainer"></right-container>
- <bottom-container
- class="bottom-container"
- ref="bottomContainer"
+ <bottom-container class="bottom-container" ref="bottomContainer"
@changePoliceSituationHistoryType="changePoliceSituationHistoryType"
@changePoliceSituationTimeType="changePoliceSituationTimeType"
- @policeSituationChange="policeSituationChange"
- @policeSituationSiteClick="policeSituationSiteClick"
- ></bottom-container>
+ @policeSituationChange="policeSituationChange" @policeSituationSiteClick="policeSituationSiteClick">
+ </bottom-container>
<div class="center-container">
<div class="layers-control-btn house">
@@ -62,72 +49,29 @@
</div>
<div ref="RegionSelect" style="left: 0;" class="region-select">
- <map-select
- class="map-select"
- @selectCheck="policeStationSelect"
- :checkValue="policeStationCheckValue"
- :options="policeStationOptions"
- :optionsName="'policeStationName'"
- ></map-select>
+ <map-select class="map-select" @selectCheck="policeStationSelect" :checkValue="policeStationCheckValue"
+ :options="policeStationOptions" :optionsName="'policeStationName'"></map-select>
- <map-select
- class="map-select"
- @selectCheck="areaSelect"
- :checkValue="areaCheckValue"
- :options="areaOptions"
- :optionsName="'areaCheckName'"
- ></map-select>
+ <map-select class="map-select" @selectCheck="areaSelect" :checkValue="areaCheckValue" :options="areaOptions"
+ :optionsName="'areaCheckName'"></map-select>
- <map-select
- class="map-select"
- @selectCheck="housingSelect"
- :checkValue="housingCheckValue"
- :options="housingOptions"
- :optionsName="'housingsName'"
- ></map-select>
+ <map-select class="map-select" @selectCheck="housingSelect" :checkValue="housingCheckValue"
+ :options="housingOptions" :optionsName="'housingsName'"></map-select>
</div>
- <el-dialog
- :title="dialogTitle"
- :modal="true"
- :visible.sync="dialogVisible"
- :before-close="dialogBeforeClose"
- :close-on-click-modal="true"
- >
- <video
- src="/video/sp.mp4"
- autoplay
- controls
- width="100%"
- height="100%"
- ref="videoElement"
- style="object-fit: fill"
- ></video>
+ <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose"
+ :close-on-click-modal="true">
+ <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
+ style="object-fit: fill"></video>
</el-dialog>
- <el-dialog
- :title="panoramaTitle"
- :modal="true"
- :visible.sync="panoramaVisible"
- :before-close="panoramaBeforeClose"
- :close-on-click-modal="true"
- class="panorama-details-box"
- >
- <iframe
- src="http://vr.jxpskj.com/JXSFKZQJ/QJ/"
- style="width: 100%; height: 100%;"
- frameborder="0"
- ></iframe>
+ <el-dialog :title="panoramaTitle" :modal="true" :visible.sync="panoramaVisible"
+ :before-close="panoramaBeforeClose" :close-on-click-modal="true" class="panorama-details-box">
+ <iframe src="http://vr.jxpskj.com/JXSFKZQJ/QJ/" style="width: 100%; height: 100%;" frameborder="0"></iframe>
</el-dialog>
- <el-dialog
- :title="activityTitle"
- :modal="true"
- :visible.sync="activityVisible"
- :before-close="activityBeforeClose"
- :close-on-click-modal="true"
- class="activity-details-box"
- >
+ <el-dialog :title="activityTitle" :modal="true" :visible.sync="activityVisible"
+ :before-close="activityBeforeClose" :close-on-click-modal="true" class="activity-details-box">
<div class="item">
<div>活动名称:</div>
<div>{{ activityDetailArr.activityName }}</div>
@@ -162,14 +106,8 @@
</div>
</el-dialog>
- <el-dialog
- :title="phoneTitle"
- :modal="true"
- :visible.sync="phoneVisible"
- :before-close="phoneBeforeClose"
- :close-on-click-modal="true"
- class="phone-details-box"
- >
+ <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose"
+ :close-on-click-modal="true" class="phone-details-box">
<div class="item">
<div>责任人：</div>
<div>{{ phoneDetails.person }}</div>
@@ -188,14 +126,8 @@
</div>
</el-dialog>
- <el-dialog
- :title="peopleTitle"
- :modal="true"
- :visible.sync="peopleVisible"
- :before-close="peopleBeforeClose"
- :close-on-click-modal="true"
- class="area-details-box"
- >
+ <el-dialog :title="peopleTitle" :modal="true" :visible.sync="peopleVisible" :before-close="peopleBeforeClose"
+ :close-on-click-modal="true" class="area-details-box">
<div class="item">
<div>责任区负责人：</div>
<div>王某某</div>
@@ -214,58 +146,30 @@
</div>
</el-dialog>
- <el-dialog
- :title="equimentTitle"
- :modal="true"
- :visible.sync="equimentVisible"
- :before-close="equimentBeforeClose"
- :close-on-click-modal="true"
- class="equiment-details-box"
- >
+ <el-dialog :title="equimentTitle" :modal="true" :visible.sync="equimentVisible"
+ :before-close="equimentBeforeClose" :close-on-click-modal="true" class="equiment-details-box">
<div class="equiment-detail">
<div class="left">
- <el-tree
- :data="jurisdictionData"
- :props="defaultProps"
- @node-click="jurisdictionNodeClick"
- ref="tree"
- node-key="id"
- ></el-tree>
+ <el-tree :data="jurisdictionData" :props="defaultProps" @node-click="jurisdictionNodeClick"
+ ref="tree" node-key="id"></el-tree>
</div>
<div class="right">
<div class="monitor" v-if="monitorContent">
- <video
- src="/video/sp.mp4"
- autoplay
- controls
- width="100%"
- height="100%"
- ref="videoElement"
- style="object-fit: fill"
- ></video>
+ <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement"
+ style="object-fit: fill"></video>
</div>
<div class="others" v-if="othersContent">
- <el-table
- :data="showArr.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
+ <el-table :data="showArr.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
style="width: 100%"
:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
:cell-style="{ 'text-align': 'center', 'borderColor': '#324e75' }"
- :row-class-name="tableRowClassName"
- >
+ :row-class-name="tableRowClassName">
<el-table-column prop="carID" label="车牌号" v-if="carArrShow"></el-table-column>
<el-table-column prop="carType" label="车型" v-if="carArrShow"></el-table-column>
<el-table-column prop="phoneID" label="手台号" v-if="phoneArrShow"></el-table-column>
<el-table-column prop="phoneType" label="手台机型" v-if="phoneArrShow"></el-table-column>
- <el-table-column
- prop="recorderID"
- label="执法记录仪号"
- v-if="recorderArrShow"
- ></el-table-column>
- <el-table-column
- prop="recorderType"
- label="记录仪机型"
- v-if="recorderArrShow"
- ></el-table-column>
+ <el-table-column prop="recorderID" label="执法记录仪号" v-if="recorderArrShow"></el-table-column>
+ <el-table-column prop="recorderType" label="记录仪机型" v-if="recorderArrShow"></el-table-column>
<el-table-column prop="id" label="设备号" v-if="stateArrShow"></el-table-column>
<el-table-column prop="equimentType" label="设备类型" v-if="stateArrShow"></el-table-column>
<el-table-column prop="policeStation" label="所属派出所"></el-table-column>
@@ -273,35 +177,20 @@
<el-table-column prop="state" label="状态"></el-table-column>
</el-table>
<div class="pages">
- <el-pagination
- background
- layout="prev, pager, next"
- :total="showArr.length"
- :page-size="pagesize"
- pager-count="3"
- :current-page="currentPage"
- @current-change="handleCurrentChange"
- ></el-pagination>
+ <el-pagination background layout="prev, pager, next" :total="showArr.length"
+ :page-size="pagesize" pager-count="3" :current-page="currentPage"
+ @current-change="handleCurrentChange"></el-pagination>
</div>
</div>
</div>
</div>
</el-dialog>
- <el-dialog
- :title="landTitle"
- :modal="true"
- :visible.sync="landVisible"
- :before-close="landBeforeClose"
- :close-on-click-modal="true"
- class="land-details-box"
- >
- <el-table
- :data="landDetailArr"
- style="width: 100%"
+ <el-dialog :title="landTitle" :modal="true" :visible.sync="landVisible" :before-close="landBeforeClose"
+ :close-on-click-modal="true" class="land-details-box">
+ <el-table :data="landDetailArr" style="width: 100%"
:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
- :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
- >
+ :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
<el-table-column prop="housingEastate" label="小区名称" width="100"></el-table-column>
<el-table-column prop="location" label="位置" width="140"></el-table-column>
<el-table-column prop="area" label="面积" width="120"></el-table-column>
@@ -310,20 +199,11 @@
</el-table>
</el-dialog>
- <el-dialog
- :title="keyPersonTitle"
- :modal="true"
- :visible.sync="keyPersonVisible"
- :before-close="keyPersonBeforeClose"
- :close-on-click-modal="true"
- class="keyPerson-details-box"
- >
- <el-table
- :data="keyPersonDetailArr"
- style="width: 100%"
+ <el-dialog :title="keyPersonTitle" :modal="true" :visible.sync="keyPersonVisible"
+ :before-close="keyPersonBeforeClose" :close-on-click-modal="true" class="keyPerson-details-box">
+ <el-table :data="keyPersonDetailArr" style="width: 100%"
:header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }"
- :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }"
- >
+ :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }">
<el-table-column prop="type" label="重点人员类型"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="sex" label="性别"></el-table-column>
@@ -334,14 +214,8 @@
</el-table>
</el-dialog>
- <el-dialog
- :title="policeSituationTitle"
- :modal="true"
- :visible.sync="policeSituationVisible"
- :before-close="policeSituationBeforeClose"
- :close-on-click-modal="true"
- class="policeSituation-details-box"
- >
+ <el-dialog :title="policeSituationTitle" :modal="true" :visible.sync="policeSituationVisible"
+ :before-close="policeSituationBeforeClose" :close-on-click-modal="true" class="policeSituation-details-box">
<div class="item">
<div>所属派出所:</div>
<div>{{ policeSituationDetailArr.policeName }}</div>
@@ -1529,11 +1403,10 @@
display: flex;
flex-direction: column;
position: fixed;
- top: 80px;
+ top: 60px;
left: 0;
width: 400px;
- height: calc(100% - 80px);
- background: $bg-color;
+ height: calc(100% - 60px);
z-index: 90;
}
@@ -1541,11 +1414,11 @@
display: flex;
flex-direction: column;
position: fixed;
- top: 80px;
+ top: 60px;
right: 0;
width: 400px;
- height: calc(100% - 80px);
- background: $bg-color;
+ height: calc(100% - 60px);
+
z-index: 90;
}
@@ -1553,7 +1426,7 @@
display: flex;
position: fixed;
left: 50%;
- bottom: 320px;
+ bottom: 318px;
transform: translate(-50%, 0);
z-index: 90;
@@ -1674,8 +1547,8 @@
.bottom-container {
position: fixed;
left: 400px;
- bottom: 0px;
- height: 310px;
+ bottom: 8px;
+ height: 300px;
width: calc(100% - 800px);
background-color: $bg-color;
box-sizing: border-box;
@@ -1717,9 +1590,7 @@
background-color: #66b1ff87;
}
- :deep(.el-tree--highlight-current
- .el-tree-node.is-current
- > .el-tree-node__content) {
+ :deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
background: #454545;
}
diff --git a/src/views/lyout/index.vue b/src/views/lyout/index.vue
index 88c72c2..7b7411c 100644
--- a/src/views/lyout/index.vue
+++ b/src/views/lyout/index.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-08-18 16:18:24
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2022-11-18 10:39:09
+ * @LastEditTime: 2022-11-26 10:45:02
* @FilePath: \srs-police-affairs\src\views\lyout\index.vue
* @Description:
*
@@ -19,28 +19,22 @@
<!-- 菜单导航 -->
<div class="menu-list">
- <div
- @mouseenter="item.childrenFlag = true"
- @mouseleave="item.childrenFlag = false"
- class="nav-list"
- :class="{ on: currentUrl.indexOf(item.path) != -1 }"
- @click="goToPath(item)"
- v-for="(item, index) in menuList"
- :key="index"
- >
+ <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list"
+ :class="{ on: currentUrl.indexOf(item.path) != -1 }" @click="goToPath(item)"
+ v-for="(item, index) in menuList" :key="index">
{{ item.menuName }}
<div class="sub-nav-list" v-show="item.children && item.childrenFlag">
- <div
- v-for="(subItem, subIndex) in item.children"
- :key="subIndex"
- @click="goToPath(subItem)"
- >{{ subItem.menuName }}</div>
+ <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)">{{
+ subItem.menuName
+ }}</div>
</div>
</div>
</div>
<!-- 用户登录展示的 -->
- <!-- <div class="user-infor"></div> -->
+ <div class="user-infor">
+ <i class="el-icon-user-solid"></i>
+ </div>
</div>
<div class="main-container">
@@ -48,23 +42,15 @@
<mapBox ref="modalForm" />
<!-- 主体内容区域 -->
- <div
- class="main-content"
- id="MainContent"
- :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
- >
+ <div class="main-content" id="MainContent"
+ :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }">
<router-view ref="target-name"></router-view>
</div>
- <el-button
- v-show="leftShow"
- class="flexible-btn"
+ <el-button v-show="leftShow" class="flexible-btn"
:class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"
- :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"
- id="FlexibleBtn"
- type="primary"
- @click="flexibelClick"
- ></el-button>
+ :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary"
+ @click="flexibelClick"></el-button>
</div>
</div>
</template>
@@ -106,6 +92,11 @@
menuName: '安保活动',
path: '/lyout/activity'
},
+ {
+ menuName: '运维管理',
+ openExternal: true,
+ path: 'http://192.168.0.105:8081/#/login'
+ }
],
show: true,
@@ -155,6 +146,11 @@
* @return {*} 没有返回值
*/
goToPath (params) {
+ if (params.openExternal) {
+ window.open(params.path)
+ return
+ }
+
if (params.children && params.children.length > 0) return
if (params.path) {
@@ -227,8 +223,8 @@
justify-content: space-between;
position: absolute;
width: 100%;
- height: 80px;
- line-height: 80px;
+ height: 60px;
+ line-height: 60px;
text-align: left;
font-size: 44px;
font-weight: bold;
@@ -240,12 +236,12 @@
display: flex;
align-items: center;
width: 450px;
- font-size: 38px;
+ font-size: 24px;
// text-align: center;
overflow: hidden;
letter-spacing: 6px;
- & > img {
+ &>img {
// width: 100%;
height: 80%;
margin: 0 10px 0 10px;
@@ -254,13 +250,13 @@
}
.menu-list {
- margin-right: 10px;
+ margin-right: 60px;
display: flex;
align-items: center;
.nav-list.on {
// color: rgba(32, 106, 181, 1);
- border-bottom: 3px solid #409eff;
+ border-bottom: 2px solid #409eff;
box-sizing: border-box;
}
@@ -270,8 +266,8 @@
display: flex;
align-items: center;
justify-content: center;
- height: 60px;
- font-size: 32px;
+ height: 40px;
+ font-size: 18px;
font-weight: 400;
cursor: pointer;
border-bottom: 3px solid transparent;
@@ -279,7 +275,7 @@
.sub-nav-list {
border-top: 14px solid transparent;
position: absolute;
- top: 60px;
+ top: 40px;
width: 100%;
cursor: default;
z-index: 999;
@@ -304,6 +300,17 @@
}
}
}
+
+ .user-infor {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 60px;
+ height: 60px;
+ line-height: 60px;
+ text-align: center;
+ font-size: 24px;
+ }
}
.main-container {
@@ -313,8 +320,8 @@
.main-content {
position: absolute;
- top: 80px;
- height: calc(100% - 80px);
+ top: 60px;
+ height: calc(100% - 60px);
}
.main-content.spread {
--
Gitblit v1.9.3