Commit 4f9a288a authored by 周远喜's avatar 周远喜

地图更改完成

parent 30bdd2ea
assets/images/demo/bg.png

892 Bytes | W: | H:

assets/images/demo/bg.png

852 Bytes | W: | H:

assets/images/demo/bg.png
assets/images/demo/bg.png
assets/images/demo/bg.png
assets/images/demo/bg.png
  • 2-up
  • Swipe
  • Onion skin
assets/images/demo/legend.png

7.21 KB | W: | H:

assets/images/demo/legend.png

12.2 KB | W: | H:

assets/images/demo/legend.png
assets/images/demo/legend.png
assets/images/demo/legend.png
assets/images/demo/legend.png
  • 2-up
  • Swipe
  • Onion skin
This diff is collapsed.
This diff is collapsed.
......@@ -7,7 +7,7 @@
</div>
</Card>
<div class="mt30 treeDiv">
<Tree :data="data1"></Tree>
<Tree :data="data1" @on-select-change="gopage()"></Tree>
</div>
</div>
</template>
......@@ -71,7 +71,17 @@ export default {
],
};
},
methods: {},
methods: {
gopage(){
this.$router.push({
path:"/demo/lid/3",
params:{
count:1,
num:0
}
})
}
},
mounted() {},
};
</script>
......
<template>
<div>
<div class="gradient" >
<p>井盖总数</p>
<p><span class="f20 fwBold">1234</span></p>
<div class="ads">
<div class="gradient" @click="gopage(1)">
<p>井盖总数</p>
<p>
<span class="f20 fwBold">1234</span>
</p>
</div>
<div class="mt30 gradient1" >
<p>正常数量</p>
<p><span class="f20 fwBold">1204</span></p>
<div class="mt30 gradient1" @click="gopage(2)">
<p>正常数量</p>
<p>
<span class="f20 fwBold">1204</span>
</p>
</div>
<div class="mt30 gradient2" >
<p>报警数量</p>
<p><span class="f20 fwBold">30</span></p>
<div class="mt30 gradient2" @click="gopage(3)">
<p>报警数量</p>
<p>
<span class="f20 fwBold">30</span>
</p>
</div>
<div class="mt30 demoDiv">
<Card class="mt10" style="width:100%; box-shadow: 0 0 10px #000">
<p slot="title" class="tl">实时行车异常列车</p>
<div class="divInfo">
<p>地址:山西省西安市未央区</p>
<p>设备名称:凤城五路11号井盖</p>
<p>报警时间:2020-06-06 08:08:08</p>
<p class="red">报警数值:甲烷浓度-55%</p>
</div>
<divider></divider>
<div class="mt20 divInfo">
<p>地址:山西省西安市未央区</p>
<p>设备名称:凤城五路11号井盖</p>
<p>报警时间:2020-06-06 08:08:08</p>
<p class="red">报警数值:甲烷浓度-55%</p>
</div>
</Card>
<Card class="mt10" style="width:100%; box-shadow: 0 0 10px #000">
<p slot="title" class="tl">实时行车异常列车</p>
<div class="divInfo">
<p>地址:山西省西安市未央区</p>
<p>设备名称:凤城五路11号井盖</p>
<p>报警时间:2020-06-06 08:08:08</p>
<p class="red">报警数值:甲烷浓度-55%</p>
</div>
<divider></divider>
<div class="mt20 divInfo">
<p>地址:山西省西安市未央区</p>
<p>设备名称:凤城五路11号井盖</p>
<p>报警时间:2020-06-06 08:18:28</p>
<p class="red">报警数值:井盖移位</p>
</div>
</Card>
</div>
</div>
</template>
......@@ -38,89 +44,104 @@ export default {
data() {
return {};
},
methods: {},
methods: {
gopage(n) {
this.$router.push({
path: "/demo/lid/3",
params: {
count: 10,
num: n,
},
});
},
},
mounted() {},
};
</script>
<style scoped>
.gradient {
background: url(/imgshow/bg1.png) right top no-repeat,
-moz-linear-gradient(left, #43aaf9 0%, #917dfb 100%);
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #43aaf9),
color-stop(100%, #917dfb)
);
background: -webkit-linear-gradient(top, #43aaf9 0%, #917dfb 100%);
background: -o-linear-gradient(top, #43aaf9 0%, #917dfb 100%);
background: -ms-linear-gradient(top, #43aaf9 0%, #917dfb 100%);
background: url(/imgshow/bg1.png) right top no-repeat,
linear-gradient(to right, #43aaf9 0%, #917dfb 100%);
border-radius: 5px;
box-shadow: 0 0 10px #000;
color: white;
height: 100px;
width: 300px;
text-align: left;
padding:20px ;
}
.gradient1 {
background: url(/imgshow/bg3.png) right top no-repeat,
-moz-linear-gradient(left, #05E99C 0%, #7CF538 100%);
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #05E99C),
color-stop(100%, #7CF538)
);
background: -webkit-linear-gradient(top, #05E99C 0%, #7CF538 100%);
background: -o-linear-gradient(top, #05E99C 0%, #7CF538 100%);
background: -ms-linear-gradient(top, #05E99C 0%, #7CF538 100%);
background: url(/imgshow/bg3.png) right top no-repeat,
linear-gradient(to right, #05E99C 0%, #7CF538 100%);
border-radius: 5px;
box-shadow: 0 0 10px #000;
color: white;
height: 100px;
width: 300px;
text-align: left;
padding:20px ;
}
.gradient2 {
background: url(/imgshow/bg5.png) right top no-repeat,
-moz-linear-gradient(left, #F95577 0%, #FCA534 100%);
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #F95577),
color-stop(100%, #FCA534)
);
background: -webkit-linear-gradient(top, #F95577 0%, #FCA534 100%);
background: -o-linear-gradient(top, #F95577 0%, #FCA534 100%);
background: -ms-linear-gradient(top, #F95577 0%, #FCA534 100%);
background: url(/imgshow/bg5.png) right top no-repeat,
linear-gradient(to right, #F95577 0%, #FCA534 100%);
border-radius: 5px;
box-shadow: 0 0 10px #000;
color: white;
height: 100px;
width: 300px;
text-align: left;
padding:20px ;
}
.divInfo {
background: #fff;
padding: 0 20px;
}
.divInfo p {
text-align: left;
line-height: 26px;
}
.demoDiv .ivu-card-head {
<style lang="less">
.ads {
>div{
cursor: pointer;
}
.gradient {
background: url(/imgshow/bg1.png) right top no-repeat,
-moz-linear-gradient(left, #43aaf9 0%, #917dfb 100%);
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #43aaf9),
color-stop(100%, #917dfb)
);
background: -webkit-linear-gradient(top, #43aaf9 0%, #917dfb 100%);
background: -o-linear-gradient(top, #43aaf9 0%, #917dfb 100%);
background: -ms-linear-gradient(top, #43aaf9 0%, #917dfb 100%);
background: url(/imgshow/bg1.png) right top no-repeat,
linear-gradient(to right, #43aaf9 0%, #917dfb 100%);
border-radius: 5px;
box-shadow: 0 0 10px #000;
color: white;
height: 100px;
width: 300px;
text-align: left;
padding: 20px;
}
.gradient1 {
background: url(/imgshow/bg3.png) right top no-repeat,
-moz-linear-gradient(left, #05e99c 0%, #7cf538 100%);
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #05e99c),
color-stop(100%, #7cf538)
);
background: -webkit-linear-gradient(top, #05e99c 0%, #7cf538 100%);
background: -o-linear-gradient(top, #05e99c 0%, #7cf538 100%);
background: -ms-linear-gradient(top, #05e99c 0%, #7cf538 100%);
background: url(/imgshow/bg3.png) right top no-repeat,
linear-gradient(to right, #05e99c 0%, #7cf538 100%);
border-radius: 5px;
box-shadow: 0 0 10px #000;
color: white;
height: 100px;
width: 300px;
text-align: left;
padding: 20px;
}
.gradient2 {
background: url(/imgshow/bg5.png) right top no-repeat,
-moz-linear-gradient(left, #f95577 0%, #fca534 100%);
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, #f95577),
color-stop(100%, #fca534)
);
background: -webkit-linear-gradient(top, #f95577 0%, #fca534 100%);
background: -o-linear-gradient(top, #f95577 0%, #fca534 100%);
background: -ms-linear-gradient(top, #f95577 0%, #fca534 100%);
background: url(/imgshow/bg5.png) right top no-repeat,
linear-gradient(to right, #f95577 0%, #fca534 100%);
border-radius: 5px;
box-shadow: 0 0 10px #000;
color: white;
height: 100px;
width: 300px;
text-align: left;
padding: 20px;
}
.divInfo {
background: #fff;
padding: 0 20px;
}
.divInfo p {
text-align: left;
line-height: 26px;
}
.demoDiv .ivu-card-head {
background: #dedde4;
}
}
</style>
\ No newline at end of file
......@@ -76,6 +76,6 @@ export default {
},
};
</script>
<style lang="less" scoped>
<style lang="less">
</style>
This diff is collapsed.
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