Skip to content

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

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

parent 105b1977
Hide 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 @@ ...@@ -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 { .form-header {
font-size: 15px; font-size: 15px;
...@@ -273,24 +328,21 @@ ...@@ -273,24 +328,21 @@
} }
} }
// 所有的提示框标题 // 所有的提示框标题
.el-dialog__header{ .el-dialog__header {
padding-bottom:0; padding-bottom: 0;
padding:0px; padding: 0px;
height: 51px; height: 51px;
line-height: 50px; line-height: 50px;
background-color: #053b6a; background-color: #053b6a;
.el-dialog__title{ .el-dialog__title {
display: inline-block; display: inline-block;
margin-left:22px; margin-left: 22px;
color:#fff; color: #fff;
} }
.el-dialog__headerbtn{ .el-dialog__headerbtn {
i{ i {
color: #fff; color: #fff;
} }
} }
// background-color: ; // background-color: ;
} }
// 图片预览
gassafety-web/src/views/enterprise/mapView/components/RightBototmData.vue
View file @ dba01e2a
...@@ -3,17 +3,43 @@ ...@@ -3,17 +3,43 @@
<div class="left"> <div class="left">
<div class="top">设备报警最新记录</div> <div class="top">设备报警最新记录</div>
<div class="bottom"> <div class="bottom right-bottom-data-left">
<div class="one">设备编号:<span>1123123123</span></div> <!-- <div class="table-top">
<div class="two">报警时间:<span>34523452345</span></div> <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> </div>
<div class="right"> <div class="right">
<template v-for="item in list"> <template v-for="(item, index) in list">
<div class="right-content" :key="item.type"> <div
class="right-content"
:class="{ three: index == 2 }"
:key="item.type"
>
<div class="text-icon"> <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>
<div class="text"> <div class="text">
<div class="top">{{ typeName[item.type] }}</div> <div class="top">{{ typeName[item.type] }}</div>
...@@ -50,6 +76,57 @@ export default { ...@@ -50,6 +76,57 @@ export default {
4: "icon-ylbgs", 4: "icon-ylbgs",
99: "icon-gdcd", 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() { created() {
...@@ -57,7 +134,7 @@ export default { ...@@ -57,7 +134,7 @@ export default {
}, },
methods: { methods: {
iconClass(item) { iconClass(item) {
return this.iconList[item.type] return this.iconList[item.type];
}, },
}, },
}; };
...@@ -65,58 +142,62 @@ export default { ...@@ -65,58 +142,62 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.wrapper { .wrapper {
width: 778px; // width: 978px;
height: 304px; height: 200px;
position: fixed; position: fixed;
right: 32px; right: 10px;
bottom: 22px; bottom: 10px;
overflow:hidden;
// background-color: #fff; // background-color: #fff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
& > div { & > div {
} }
.left { .left {
width: 278px; width: 778px;
margin-right: 12px; margin-right: 12px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
background-color: #fff; // background-color: #fff;
color: #fff; // color: #fff;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
.top { .top {
height: 32px; height: 32px;
background-color: #053b6a; background-color: #053b6a;
color: #fff;
line-height: 32px; line-height: 32px;
padding-left: 12px; padding-left: 12px;
} }
.bottom { .bottom {
& > div { .table-top {
height: 20px; // background-color: red;
padding-left: 32px; // display: flex;
padding-bottom: 2px; // justify-content: space-between;
&.one { // div {
background-color: #f0f0f0; // width: 100%;
color: #2788ea; // text-align: center;
} // }
&.two {
color: #676767;
}
} }
} }
} }
.right { .right {
width: 500px; width: 740px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: space-between; // justify-content: space-between;
align-content: flex-start; align-content: flex-start;
margin-top:7px;
& > .right-content { & > .right-content {
background-color: #fff; background-color: #fff;
width: 238px; width: 238px;
height: 82px; height: 82px;
margin-bottom: 29px; margin-bottom: 29px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
margin-right: 10px;
display: flex; display: flex;
&.three {
margin-right: 0px;
}
// align-items: center; // align-items: center;
.text-icon { .text-icon {
line-height: 82px; line-height: 82px;
...@@ -142,7 +223,7 @@ export default { ...@@ -142,7 +223,7 @@ export default {
} }
} }
// 单独调整下最后一个icon的大小 // 单独调整下最后一个icon的大小
.iconFontSize{ .iconFontSize {
font-size: 50px !important; 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