Commit b924036b authored by 张牧越's avatar 张牧越

样式修正

parent e7ffafdc
......@@ -11,7 +11,7 @@
</title>
</head>
<body>
<body style="min-width: 1300px;">
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
......
......@@ -421,7 +421,14 @@ export default {
};
chart.setOption(option);
},
scrollEnd() {
this.$refs.scroll._cancle();
setTimeout(() => {
this.$ref.scroll._startMove();
}, 3000);
},
},
mounted() {
this.renderWarningChart();
this.renderTodayChart();
......
......@@ -151,25 +151,35 @@
<div class="side-area">
<Title text="报警信息"></Title>
<ShadowContainer>
<div
class="warn-title"
:style="{ borderColor: '#fff' }"
v-for="(warn, index) in warnings"
:key="index"
<vue-seamless-scroll
:data="warnings"
:class-option="classOption"
class="warp"
@ScrollEnd="scrollEnd"
refs="scroll"
>
<div class="warn-text">{{ warn.text }}</div>
<div class="warn-time">{{ warn.time }}</div>
</div>
<div
class="warn-title"
:style="{ borderColor: '#fff' }"
v-for="(warn, index) in warnings"
:key="index"
>
<div class="warn-text">{{ warn.text }}</div>
<div class="warn-time">{{ warn.time }}</div>
</div>
</vue-seamless-scroll>
</ShadowContainer>
<Title text="扬尘噪音"></Title>
<ShadowContainer>
<div
class="noise-monitor"
v-for="(monitor, index) in noiseMonitors"
:key="index"
>
<img src="@/assets/noise/icon_e_qi@2x.png" alt="" />
{{ monitor.text }}
<div style="height: 590px">
<div
class="noise-monitor"
v-for="(monitor, index) in noiseMonitors"
:key="index"
>
<img src="@/assets/noise/icon_e_qi@2x.png" alt="" />
{{ monitor.text }}
</div>
</div>
</ShadowContainer>
</div>
......@@ -234,6 +244,9 @@ export default {
{ text: "料仓扬尘监测" },
{ text: "料仓扬尘监测" },
],
classOption: {
singleHeight: 36,
},
};
},
methods: {
......@@ -723,9 +736,6 @@ export default {
display: flex;
justify-content: space-between;
margin-bottom: 18px;
&:last-child {
margin-bottom: 0;
}
.warn-text {
width: 60%;
text-overflow: ellipsis;
......@@ -749,4 +759,9 @@ export default {
margin-bottom: 0;
}
}
.warp {
width: 100%;
height: 180px;
overflow: hidden;
}
</style>
\ No newline at end of file
......@@ -492,7 +492,7 @@ export default {
};
chart.setOption(option);
},
scrollEnd: function () {
scrollEnd() {
this.$refs.scroll._cancle();
setTimeout(() => {
this.$ref.scroll._startMove();
......
<template>
<div>test4</div>
</template>
\ No newline at end of file
<div id="supervisory">
<div class="side-area">
<el-input
prefix-icon="el-icon-search"
placeholder="监控点名称"
style="margin-bottom: 20px"
></el-input>
<ShadowContainer>
<el-tree
:data="treeData"
:props="defaultProps"
icon-class="el-icon-arrow-right"
></el-tree>
</ShadowContainer>
</div>
<div></div>
</div>
</template>
<script>
export default {
name: "Supervisory",
data() {
return {
treeData: [
{
label: "一级 1",
children: [
{
label: "二级 1-1",
children: [
{
label: "三级 1-1-1",
},
],
},
],
},
{
label: "一级 2",
children: [
{
label: "二级 2-1",
children: [
{
label: "三级 2-1-1",
},
],
},
{
label: "二级 2-2",
children: [
{
label: "三级 2-2-1",
},
],
},
],
},
{
label: "一级 3",
children: [
{
label: "二级 3-1",
children: [
{
label: "三级 3-1-1",
},
],
},
{
label: "二级 3-2",
children: [
{
label: "三级 3-2-1",
},
],
},
],
},
],
defaultProps: {
children: "children",
label: "label",
},
};
},
mounted() {},
methods: {},
};
</script>
<style lang="less" scoped>
#supervisory {
padding: 12px 20px;
display: flex;
justify-content: space-between;
.side-area {
width: 20%;
}
}
::v-deep .el-input__inner {
background: rgba(40, 137, 195, 0.2);
border: 1px solid #217ff7;
}
::v-deep .el-input__inner::placeholder {
color: rgba(255, 255, 255, 0.3);
}
::v-deep .el-tree {
background: transparent !important;
color: rgba(255, 255, 255, 0.8) !important;
}
::v-deep .el-tree-node__content:hover {
background: rgba(44, 96, 162, 0.5) !important;
color: #00a2ff;
}
::v-deep .el-tree-node:focus > .el-tree-node__content {
background: rgba(44, 96, 162, 0.5) !important;
color: #00a2ff;
}
</style>
\ No newline at end of file
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