Skip to content

G
gassafety
Commit dba01e2a authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

调整gis地图页面右下角样式

parent 105b1977
Show whitespace changes
Inline Side-by-side
Showing with 172 additions and 39 deletions
gassafety-web/src/assets/styles/gassafety.scss
View file @ dba01e2a
......@@ -103,6 +103,61 @@
}
}
// gis地图中底部table样式
.right-bottom-data-left {
.el-table {
.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
th {
word-break: break-word;
background-color: #fff;
color: #525252;
height: 30px;
font-size: 13px;
padding: 0;
}
}
.el-table__body-wrapper {
.el-table__row:nth-child(2n + 1) {
background-color: #e6e6e6;
// &:hover {
// td {
// background-color: #f4f4f4;
// }
// }
td {
.cell {
color: #525252;
}
}
}
.el-table__row:nth-child(2n) {
background-color: #f4f4f4;
// &:hover {
// td {
// background-color: #e6e6e6;
// }
// }
td {
.cell {
color: #053b6a;
}
}
}
}
.el-table__body-wrapper {
.el-button [class*="el-icon-"] + span {
margin-left: 1px;
}
}
}
}
/** 表单布局 **/
.form-header {
font-size: 15px;
......@@ -273,24 +328,21 @@
}
}
// 所有的提示框标题
.el-dialog__header{
padding-bottom:0;
padding:0px;
.el-dialog__header {
padding-bottom: 0;
padding: 0px;
height: 51px;
line-height: 50px;
background-color: #053b6a;
.el-dialog__title{
.el-dialog__title {
display: inline-block;
margin-left:22px;
color:#fff;
margin-left: 22px;
color: #fff;
}
.el-dialog__headerbtn{
i{
.el-dialog__headerbtn {
i {
color: #fff;
}
}
// background-color: ;
}
// 图片预览
gassafety-web/src/views/enterprise/mapView/components/RightBototmData.vue
View file @ dba01e2a
......@@ -3,17 +3,43 @@
<div class="left">
<div class="top">设备报警最新记录</div>
<div class="bottom">
<div class="one">设备编号:<span>1123123123</span></div>
<div class="two">报警时间:<span>34523452345</span></div>
<div class="bottom right-bottom-data-left">
<!-- <div class="table-top">
<div>编号</div>
<div>名称</div>
<div>类型</div>
<div>内容</div>
<div>事件</div>
</div> -->
<!-- <div class="one">设备编号:<span>1123123123</span></div>
<div class="two">报警时间:<span>34523452345</span></div> -->
<el-table size="mini" :data="tableData" style="width: 100%" height="170">
<el-table-column prop="date" label="编号" width="150">
</el-table-column>
<el-table-column prop="name" label="名称" width="120">
</el-table-column>
<el-table-column prop="province" label="类型" width="80">
</el-table-column>
<el-table-column prop="city" label="时间" width="120">
</el-table-column>
<el-table-column prop="address" label="内容" width="">
</el-table-column>
</el-table>
</div>
</div>
<div class="right">
<template v-for="item in list">
<div class="right-content" :key="item.type">
<template v-for="(item, index) in list">
<div
class="right-content"
:class="{ three: index == 2 }"
:key="item.type"
>
<div class="text-icon">
<i class="iconfont" :class="[iconClass(item),{iconFontSize: item.type==4 }]"></i>
<i
class="iconfont"
:class="[iconClass(item), { iconFontSize: item.type == 4 }]"
></i>
</div>
<div class="text">
<div class="top">{{ typeName[item.type] }}</div>
......@@ -50,6 +76,57 @@ export default {
4: "icon-ylbgs",
99: "icon-gdcd",
},
tableData: [
{
date: "2016-05-03",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路",
},
{
date: "2016-05-02",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-01",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-08",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-06",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-07",
name: "王小虎",
province: "上海",
city: "普陀区",
address: "上海市普陀区金沙江路 1518 弄",
},
],
};
},
created() {
......@@ -57,7 +134,7 @@ export default {
},
methods: {
iconClass(item) {
return this.iconList[item.type]
return this.iconList[item.type];
},
},
};
......@@ -65,58 +142,62 @@ export default {
<style lang="scss" scoped>
.wrapper {
width: 778px;
height: 304px;
// width: 978px;
height: 200px;
position: fixed;
right: 32px;
bottom: 22px;
right: 10px;
bottom: 10px;
overflow:hidden;
// background-color: #fff;
display: flex;
justify-content: space-between;
& > div {
}
.left {
width: 278px;
width: 778px;
margin-right: 12px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
background-color: #fff;
color: #fff;
// background-color: #fff;
// color: #fff;
font-size: 14px;
font-weight: 400;
.top {
height: 32px;
background-color: #053b6a;
color: #fff;
line-height: 32px;
padding-left: 12px;
}
.bottom {
& > div {
height: 20px;
padding-left: 32px;
padding-bottom: 2px;
&.one {
background-color: #f0f0f0;
color: #2788ea;
}
&.two {
color: #676767;
}
.table-top {
// background-color: red;
// display: flex;
// justify-content: space-between;
// div {
// width: 100%;
// text-align: center;
// }
}
}
}
.right {
width: 500px;
width: 740px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
// justify-content: space-between;
align-content: flex-start;
margin-top:7px;
& > .right-content {
background-color: #fff;
width: 238px;
height: 82px;
margin-bottom: 29px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
margin-right: 10px;
display: flex;
&.three {
margin-right: 0px;
}
// align-items: center;
.text-icon {
line-height: 82px;
......@@ -142,7 +223,7 @@ export default {
}
}
// 单独调整下最后一个icon的大小
.iconFontSize{
.iconFontSize {
font-size: 50px !important;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment