suzhou-jichuang-lanhai
/
network-zz
10
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

布局调整

Browse Source
main
项洋 3 weeks ago
parent 0e358e55cb
commit 9f82148843
9 changed files with 232 additions and 217 deletions
Show Stats Download Patch File Download Diff File

20
src/views/privateOrder/ecosphere/components/componentLeft.vue
Unescape View File

@ -1504,9 +1504,9 @@ export default {
width: 100%;
height: 100%;
.module-container {
width: 1603px;
width: 100%;
height: 100%;
margin: 130px 0 0 50px;
margin: 204px 0 0 50px;
display: flex;
flex-wrap: wrap;
// justify-content: space-between;
@ -1680,13 +1680,14 @@ export default {
width: 50%;
height: 50%;
.three-inventory {
padding: 80px 0;
width: 100%;
height: 382px;
margin-top: 30px;
height: calc(100% - 76px);
// margin-top: 30px;
display: flex;
justify-content: space-around;
.three-inventory-item {
width: 200px;
width: 30%;
margin: 0 10px;
display: flex;
flex-direction: column;
@ -1769,7 +1770,8 @@ export default {
padding-top: 20px;
.firewall-container {
margin-top: 20px;
height: calc(100% - 76px);
// margin-top: 20px;
// 顶部卡片区域
.firewall-stats {
@ -1906,7 +1908,7 @@ export default {
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
height: 100%;
height: calc(100% - 72px);
padding: 10px;
.zoology-icon {
@ -1916,7 +1918,7 @@ export default {
flex-direction: column;
align-items: center;
margin-bottom: 10px;
padding: 35px;
padding: 5px;
.icon-bk {
width: 100%;
height: 100%;
@ -2118,7 +2120,7 @@ export default {
text-align: center !important;
}
.section-object {
height: 364px;
height: calc(100% - 72px);
width: 100%;
display: flex;
// flex-direction: column;

155
src/views/privateOrder/ecosphere/components/componentRight.vue
Unescape View File

@ -46,24 +46,26 @@
</div>
<div class="section">
<module-title> 举报事件年度分类统计 </module-title>
<div id="pie" />
<div class="labels">
<div
class="label-item"
v-for="(item, index) in pieData"
:key="index"
:style="{
backgroundImage: `url(${require('@/assets/sentimeent/' +
(item.name === '小程序' ? '其他' : item.name) +
'.png')})`,
backgroundSize: '100% 100%',
}"
>
<div class="label-content">
<div class="percent" :style="{ color: getItemColor(index) }">
{{ getItemPercent(item) }}%
<div class="pie-container">
<div id="pie" />
<div class="labels">
<div
class="label-item"
v-for="(item, index) in pieData"
:key="index"
:style="{
backgroundImage: `url(${require('@/assets/sentimeent/' +
(item.name === '小程序' ? '其他' : item.name) +
'.png')})`,
backgroundSize: '100% 100%',
}"
>
<div class="label-content">
<div class="percent" :style="{ color: getItemColor(index) }">
{{ getItemPercent(item) }}%
</div>
<div class="name">{{ item.name }}</div>
</div>
<div class="name">{{ item.name }}</div>
</div>
</div>
</div>
@ -662,6 +664,7 @@ export default {
labelLine: {
show: false,
length: 30,
fontSize: 14,
},
label: {
show: false,
@ -700,6 +703,7 @@ export default {
labelLine: {
show: true,
length: 30,
fontWeight: "bold",
},
label: {
show: true,
@ -750,8 +754,7 @@ export default {
height: 60,
x: -5,
y: -5,
image: require("@/assets/sentimeent/警告.png")
image: require("@/assets/sentimeent/警告.png"),
},
},
{
@ -762,15 +765,13 @@ export default {
height: 100,
x: -25,
y: -25,
image: require("@/assets/sentimeent/椭圆.png")
image: require("@/assets/sentimeent/椭圆.png"),
},
}
},
],
};
optionSecond.graphic = [
warningIcon,
];
optionSecond.graphic = [warningIcon];
myChart.setOption(optionSecond, true);
echartsJump(myChart, optionSecond);
@ -1138,20 +1139,20 @@ export default {
width: 100%;
height: 100%;
.module-container {
width: 1540px;
width: 100%;
height: 100%;
// float: right;
margin: 130px 50px 0 0;
margin: 204px 50px 0 0;
display: flex;
flex-wrap: wrap;
// justify-content: space-between;
// align-content: space-between;
.section {
width:50%;
height:50%;
width: 50%;
height: 50%;
.clean-action-table {
margin-top: 20px;
height: 400px;
height: calc(100% - 76px);
width: 100%;
.table-header {
display: flex;
@ -1256,7 +1257,7 @@ export default {
.processflow {
// padding-top: 20px;
position: relative;
height: 100%;
height: calc(100% - 76px);
background: url("~@/assets/sentimeent/举报流程环形图.png") no-repeat
center,
url("~@/assets/sentimeent/举报流程(环形中间).png") no-repeat center;
@ -1377,15 +1378,7 @@ export default {
}
}
}
#pie {
position: relative;
top: 0px;
left: 5px;
width: 100%;
height: 70%;
// margin-top: 30px;
// background: url("~@/assets/ecosphere/bg-饼图.png") no-repeat;
}
.qlzfsjtj {
margin-left: 54px;
.qlzf-head {
@ -1630,9 +1623,8 @@ export default {
.charts-container {
display: flex;
flex-direction: column;
height: 400px;
margin-top: 10px;
height: calc(100% - 76px);
width: 100%;
.chart-box {
flex: 1;
width: 100%;
@ -1660,45 +1652,58 @@ export default {
transform: translateX(0px);
}
}
.labels {
position: relative;
display: flex;
justify-content: space-between;
// margin-top: 80px;
padding: 0 20px;
.label-item {
.pie-container {
width: 100%;
height: calc(100% - 76px);
#pie {
position: relative;
top: 0px;
left: 5px;
width: 100%;
height: 70%;
// margin-top: 30px;
// background: url("~@/assets/ecosphere/bg-饼图.png") no-repeat;
}
.labels {
position: relative;
width: 170px;
height: 65px;
// border: 1px dashed;
display: flex;
justify-content: center;
align-items: center;
justify-content: space-between;
// margin-top: 80px;
padding: 0 20px;
.label-content {
.label-item {
position: relative;
width: 170px;
height: 65px;
// border: 1px dashed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
align-items: center;
.percent {
font-size: 28px;
font-weight: bold;
font-family: Arial;
line-height: 1.2;
margin-top: -10px;
}
.label-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
.name {
font-family: AlibabaPuHuiTiR;
font-size: 20px;
color: #b4f9ff;
line-height: 22px;
text-align: justifyLeft;
font-style: normal;
text-transform: none;
margin-top: 5px;
.percent {
font-size: 28px;
font-weight: bold;
font-family: Arial;
line-height: 1.2;
margin-top: -10px;
}
.name {
font-family: AlibabaPuHuiTiR;
font-size: 20px;
color: #b4f9ff;
line-height: 22px;
text-align: justifyLeft;
font-style: normal;
text-transform: none;
margin-top: 5px;
}
}
}
}

51
src/views/privateOrder/ecosphere/index.vue
Unescape View File

@ -4,69 +4,69 @@
<component-mapbox />
</div> -->
<div class="left-container" style="z-index:3;">
<div class="left-container" style="z-index: 3">
<component-left />
</div>
<div class="right-container" style="z-index:3;">
<div class="right-container" style="z-index: 3">
<component-right />
</div>
<div class="center-container" style="z-index:3;">
<div class="center-container" style="z-index: 3">
<component-center />
</div>
</div>
</template>
<script>
import ComponentMapbox from './components/componentmapbox.vue'
import ComponentLeft from './components/componentLeft.vue'
import ComponentRight from './components/componentRight.vue'
import ComponentMapbox from "./components/componentmapbox.vue";
import ComponentLeft from "./components/componentLeft.vue";
import ComponentRight from "./components/componentRight.vue";
// import ComponentCenter from './components/componentCenter'
import ComponentCenter from '../security/components/componentCenter.vue'
import ComponentCenter from "../security/components/componentCenter.vue";
export default {
name:"ecosphere",
name: "ecosphere",
components: {
ComponentLeft,
ComponentRight,
ComponentCenter,
ComponentMapbox
ComponentMapbox,
},
data() {
return {
// 中间状态
centerStatus: 'earth',
centerStatus: "earth",
// 图片预览
imgViewer: {
isShow: false,
urls: []
urls: [],
},
// 视频播放
videoPlayer: {
isShow: false,
title: '',
src: ''
title: "",
src: "",
},
// 图文弹窗
imgTxtPop: {
title: '',
title: "",
isShow: false,
imgs: [],
txt: ''
}
}
txt: "",
},
};
},
methods: {
mapEarthChange(type) {
if (type === 'earth') {
this.centerStatus = 'earth'
if (type === "earth") {
this.centerStatus = "earth";
} else {
this.centerStatus = 'map'
this.centerStatus = "map";
}
}
}
}
},
},
};
</script>
<style lang="scss" scoped>
@ -101,7 +101,7 @@ export default {
height: $ScreenHeight;
margin-left: 40px;
pointer-events: auto;
padding-bottom: 130px;
padding-bottom: 204px;
}
.right-container {
@ -113,12 +113,13 @@ export default {
height: $ScreenHeight;
margin-right: 65px;
pointer-events: auto;
padding-bottom: 204px;
}
.center-container {
position: absolute;
z-index: 3;
left: 1500px;
left: 35%;
margin: 0 auto;
width: 1914px;
height: 100%;

60
src/views/privateOrder/general/index.vue
Unescape View File

@ -32,12 +32,12 @@
</template>
<script>
import ComponentLeft from './components/componentLeft.vue'
import ComponentRight from './components/componentRight.vue'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import DayMap from './components/dayMap.vue'
import VideoPlayer from '../common/VideoPlayer.vue'
import ImgTxt from '../common/ImgTxt.vue'
import ComponentLeft from "./components/componentLeft.vue";
import ComponentRight from "./components/componentRight.vue";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import DayMap from "./components/dayMap.vue";
import VideoPlayer from "../common/VideoPlayer.vue";
import ImgTxt from "../common/ImgTxt.vue";
export default {
components: {
@ -46,60 +46,60 @@ export default {
ElImageViewer,
DayMap,
VideoPlayer,
ImgTxt
ImgTxt,
},
data() {
return {
// 图片预览
imgViewer: {
isShow: false,
urls: []
urls: [],
},
// 视频播放
videoPlayer: {
isShow: false,
title: '',
src: ''
title: "",
src: "",
},
// 图文弹窗
imgTxtPop: {
title: '',
title: "",
isShow: false,
imgs: [],
txt: ''
}
}
txt: "",
},
};
},
methods: {
previewImg(urls) {
this.imgViewer.urls = urls
this.imgViewer.isShow = true
this.imgViewer.urls = urls;
this.imgViewer.isShow = true;
},
closeViewer() {
this.imgViewer.isShow = false
this.imgViewer.isShow = false;
},
showVideoPlayer(title, src) {
this.videoPlayer.isShow = true
this.videoPlayer.title = title
this.videoPlayer.src = src
this.videoPlayer.isShow = true;
this.videoPlayer.title = title;
this.videoPlayer.src = src;
},
closeVideoPlayer() {
this.videoPlayer.isShow = false
this.videoPlayer.isShow = false;
},
showImgTxtPopup(title, imgs, txt) {
this.imgTxtPop.isShow = true
this.imgTxtPop.title = title
this.imgTxtPop.imgs = imgs
this.imgTxtPop.txt = txt
this.imgTxtPop.isShow = true;
this.imgTxtPop.title = title;
this.imgTxtPop.imgs = imgs;
this.imgTxtPop.txt = txt;
},
closeImgTxtPopup() {
this.imgTxtPop.isShow = false
}
}
}
this.imgTxtPop.isShow = false;
},
},
};
</script>
<style lang="scss" scoped>
@ -117,6 +117,7 @@ export default {
width: 1709px;
height: $ScreenHeight;
background: url("~@/assets/privateOrder/common/bg_left_mask.png") no-repeat;
padding-bottom: 204px;
}
.right-container {
@ -128,5 +129,6 @@ export default {
height: $ScreenHeight;
background: url("~@/assets/privateOrder/common/bg_right_mask.png") right
center no-repeat;
padding-bottom: 204px;
}
</style>

20
src/views/privateOrder/positiveEnergy/index.vue
Unescape View File

@ -23,23 +23,23 @@
</template>
<script>
import ComponentLeft from './components/componentLeft.vue'
import ComponentRight from './components/componentRight.vue'
import ComponentCenterLeft from './components/componentCenterLeft.vue'
import ComponentCenterRight from './components/componentCenterRight.vue'
import ComponentLeft from "./components/componentLeft.vue";
import ComponentRight from "./components/componentRight.vue";
import ComponentCenterLeft from "./components/componentCenterLeft.vue";
import ComponentCenterRight from "./components/componentCenterRight.vue";
export default {
components: {
ComponentLeft,
ComponentRight,
ComponentCenterLeft,
ComponentCenterRight
ComponentCenterRight,
},
data() {
return {}
return {};
},
methods: {}
}
methods: {},
};
</script>
<style lang="scss" scoped>
@ -53,7 +53,7 @@ export default {
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
background: url('~@/assets/privateOrder/positiveEnergy/背景底图.png')
background: url("~@/assets/privateOrder/positiveEnergy/背景底图.png")
no-repeat;
background-size: 100% 100%;
}
@ -64,6 +64,7 @@ export default {
width: 1227px;
height: $ScreenHeight;
z-index: 999;
padding-bottom: 204px;
}
.right-container {
@ -72,6 +73,7 @@ export default {
top: 0;
width: 1229px;
height: $ScreenHeight;
padding-bottom:204px;
// &:before {
// background-color: rgba(197, 197, 197, 0.062);
// width: 2560px;

24
src/views/privateOrder/security/components/componentLeft.vue
Unescape View File

@ -1017,32 +1017,32 @@ export default {
.module-container {
width: 1512px;
height: 985px;
margin: 130px 0 0 100px;
height: 100%;
margin: 204px 0 0 100px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
// justify-content: space-between;
// align-content: space-between;
.section-securityMonitor {
width: 680px;
height: 515px;
width: 50%;
height: 50%;
}
.section-dataSource {
width: 849px;
height: 470px;
width: 50%;
height: 50%;
}
.section-attackRanking {
width: 742px;
height: 447px;
width: 50%;
height: 50%;
}
.section-superviseObject {
width: 751px;
height: 470px;
width: 50%;
height: 50%;
margin-top: -7px;
}
}

21
src/views/privateOrder/security/components/componentRight.vue
Unescape View File

@ -940,23 +940,22 @@ export default {
.module-container {
width: 1540px;
height: 965px;
height:100%;
float: right;
margin: 130px 100px 0 0;
margin: 204px 100px 0 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
// justify-content: space-between;
// align-content: space-between;
.section {
width: 740px;
height: 462px;
height: 50%;
width: 50%;
}
.section-plateStatistics {
width: 738px;
height: 512px;
height: 50%;
width: 50%;
:hover {
cursor: pointer;
}
@ -968,6 +967,8 @@ export default {
}
.section-newestRisk {
height: 50%;
width: 50%;
display: flex;
flex-direction: column;
@ -1123,7 +1124,7 @@ export default {
.section-newestRisk,
.section-notification {
// height: 402px;
height: 442px;
// height: 442px;
:hover {
cursor: pointer;

35
src/views/privateOrder/security/index.vue
Unescape View File

@ -8,10 +8,10 @@
<template>
<div class="main">
<!-- <Earth v-show="centerStatus === 'earth'" /> -->
<div class="left-container" style="z-index:2">
<div class="left-container" style="z-index: 2">
<component-left @mapEarthChange="mapEarthChange" />
</div>
<div class="right-container" style="z-index:1">
<div class="right-container" style="z-index: 1">
<component-right @mapEarthChange="mapEarthChange" />
</div>
<div class="center-container">
@ -21,34 +21,34 @@
</template>
<script>
import ComponentLeft from './components/componentLeft.vue'
import ComponentRight from './components/componentRight.vue'
import ComponentCenter from './components/componentCenter'
import Earth from './components/Earth.vue'
import ComponentLeft from "./components/componentLeft.vue";
import ComponentRight from "./components/componentRight.vue";
import ComponentCenter from "./components/componentCenter";
import Earth from "./components/Earth.vue";
export default {
components: {
ComponentLeft,
ComponentRight,
ComponentCenter,
Earth
Earth,
},
data() {
return {
// 中间状态
centerStatus: 'earth'
}
centerStatus: "earth",
};
},
methods: {
mapEarthChange(type) {
if (type === 'earth') {
this.centerStatus = 'earth'
if (type === "earth") {
this.centerStatus = "earth";
} else {
this.centerStatus = 'map'
this.centerStatus = "map";
}
}
}
}
},
},
};
</script>
<style lang="scss" scoped>
@ -62,9 +62,8 @@ export default {
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
position: relative;
background: url("~@/assets/sentimeent/背景底图.png") no-repeat;;
background: url("~@/assets/sentimeent/背景底图.png") no-repeat;
background-size: 100% 100%;
}
.left-container {
position: absolute;
@ -74,6 +73,7 @@ export default {
width: 1603px;
height: $ScreenHeight;
// background: url("~@/assets/privateOrder/common/bg-left.png") no-repeat;
padding-bottom: 204px;
}
.right-container {
@ -83,6 +83,7 @@ export default {
z-index: 3;
width: 1603px;
height: $ScreenHeight;
padding-bottom: 204px;
// background: url("~@/assets/privateOrder/common/bg-right.png") right center
// no-repeat;
/* &:before {

63
src/views/privateOrder/sentiment/index.vue
Unescape View File

@ -34,12 +34,12 @@
</template>
<script>
import ComponentLeft from './components/componentLeft.vue'
import ComponentRight from './components/componentRight.vue'
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
import ComponentCenter from './components/componentCenter.vue'
import VideoPlayer from '../common/VideoPlayer.vue'
import ImgTxt from '../common/ImgTxt.vue'
import ComponentLeft from "./components/componentLeft.vue";
import ComponentRight from "./components/componentRight.vue";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import ComponentCenter from "./components/componentCenter.vue";
import VideoPlayer from "../common/VideoPlayer.vue";
import ImgTxt from "../common/ImgTxt.vue";
export default {
components: {
@ -48,60 +48,60 @@ export default {
ElImageViewer,
ComponentCenter,
VideoPlayer,
ImgTxt
ImgTxt,
},
data() {
return {
// 图片预览
imgViewer: {
isShow: false,
urls: []
urls: [],
},
// 视频播放
videoPlayer: {
isShow: false,
title: '',
src: ''
title: "",
src: "",
},
// 图文弹窗
imgTxtPop: {
title: '',
title: "",
isShow: false,
imgs: [],
txt: ''
}
}
txt: "",
},
};
},
methods: {
previewImg(urls) {
this.imgViewer.urls = urls
this.imgViewer.isShow = true
this.imgViewer.urls = urls;
this.imgViewer.isShow = true;
},
closeViewer() {
this.imgViewer.isShow = false
this.imgViewer.isShow = false;
},
showVideoPlayer(title, src) {
this.videoPlayer.isShow = true
this.videoPlayer.title = title
this.videoPlayer.src = src
this.videoPlayer.isShow = true;
this.videoPlayer.title = title;
this.videoPlayer.src = src;
},
closeVideoPlayer() {
this.videoPlayer.isShow = false
this.videoPlayer.isShow = false;
},
showImgTxtPopup(title, imgs, txt) {
this.imgTxtPop.isShow = true
this.imgTxtPop.title = title
this.imgTxtPop.imgs = imgs
this.imgTxtPop.txt = txt
this.imgTxtPop.isShow = true;
this.imgTxtPop.title = title;
this.imgTxtPop.imgs = imgs;
this.imgTxtPop.txt = txt;
},
closeImgTxtPopup() {
this.imgTxtPop.isShow = false
}
}
}
this.imgTxtPop.isShow = false;
},
},
};
</script>
<style lang="scss" scoped>
@ -113,7 +113,7 @@ export default {
position: relative;
background: url("~@/assets/privateOrder/positiveEnergy/背景底图.png")
no-repeat;
background-size: 100% 100%;
background-size: 100% 100%;
}
.left-container {
@ -124,6 +124,7 @@ export default {
width: 1603px;
height: $ScreenHeight;
background: url("~@/assets/privateOrder/common/bg_left_mask.png") no-repeat;
padding-bottom: 204px;
}
.right-container {
@ -135,7 +136,7 @@ export default {
height: $ScreenHeight;
background: url("~@/assets/privateOrder/common/bg_right_mask.png") right
center no-repeat;
padding-bottom: 130px;
padding-bottom: 204px;
// &:before {
// background-color: rgba(197, 197, 197, 0.062);
// width: 2560px;

Write Preview
Loading…
Cancel
Save