Skip to content

M
mes-ui
Commit 912fb1d2 authored by renjintao's avatar renjintao
Browse files
Options

sidewest

parent 74076851
Hide whitespace changes
Inline Side-by-side
Showing with 49 additions and 44 deletions
pages/demo/lid/components/sideWest.vue
View file @ 912fb1d2
<template> <template>
<div> <div>
<div class="gradient" > <div class="gradient">
<p>井盖总数</p> <p>井盖总数</p>
<p><span class="f20 fwBold">1234</span>个</p> <p>
<span class="f20 fwBold">1234</span>个
</p>
</div> </div>
<div class="mt30 gradient1" > <div class="mt30 gradient1">
<p>正常数量</p> <p>正常数量</p>
<p><span class="f20 fwBold">1204</span>个</p> <p>
<span class="f20 fwBold">1204</span>个
</p>
</div> </div>
<div class="mt30 gradient2" > <div class="mt30 gradient2">
<p>报警数量</p> <p>报警数量</p>
<p><span class="f20 fwBold">30</span>个</p> <p>
<span class="f20 fwBold">30</span>个
</p>
</div> </div>
<div class="mt30 demoDiv"> <div class="mt30 demoDiv">
<Card class="mt10" style="width:100%; box-shadow: 0 0 10px #000"> <Card class="mt10" style="width:100%; box-shadow: 0 0 10px #000;">
<p slot="title" class="tl">实时行车异常列车</p> <p slot="title" class="tl">实时行车异常列车</p>
<div class="divInfo"> <div class="divInfos">
<p>地址：山西省西安市未央区</p> <p>地址：山西省西安市未央区</p>
<p>设备名称：凤城五路11号井盖</p> <p>设备名称：凤城五路11号井盖</p>
<p>报警时间：2020-06-06 08:08:08</p> <p>报警时间：2020-06-06 08:08:08</p>
<p class="red">报警数值：甲烷浓度-55%</p> <p class="red">报警数值：甲烷浓度-55%</p>
</div>
<divider></divider> <divider></divider>
<div class="mt20 divInfo"> <p>地址：山西省西安市未央区</p>
<p>地址：山西省西安市未央区</p> <p>设备名称：凤城五路11号井盖</p>
<p>设备名称：凤城五路11号井盖</p> <p>报警时间：2020-06-06 08:08:08</p>
<p>报警时间：2020-06-06 08:08:08</p> <p class="red">报警数值：甲烷浓度-55%</p>
<p class="red">报警数值：甲烷浓度-55%</p> </div>
</div> </Card>
</Card>
</div> </div>
</div> </div>
</template> </template>
...@@ -64,63 +68,64 @@ export default { ...@@ -64,63 +68,64 @@ export default {
height: 100px; height: 100px;
width: 300px; width: 300px;
text-align: left; text-align: left;
padding:20px ; padding: 20px;
} }
.gradient1 { .gradient1 {
background: url(/imgshow/bg3.png) right top no-repeat, background: url(/imgshow/bg3.png) right top no-repeat,
-moz-linear-gradient(left, #05E99C 0%, #7CF538 100%); -moz-linear-gradient(left, #05e99c 0%, #7cf538 100%);
background: -webkit-gradient( background: -webkit-gradient(
linear, linear,
left top, left top,
left bottom, left bottom,
color-stop(0%, #05E99C), color-stop(0%, #05e99c),
color-stop(100%, #7CF538) color-stop(100%, #7cf538)
); );
background: -webkit-linear-gradient(top, #05E99C 0%, #7CF538 100%); background: -webkit-linear-gradient(top, #05e99c 0%, #7cf538 100%);
background: -o-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: -ms-linear-gradient(top, #05e99c 0%, #7cf538 100%);
background: url(/imgshow/bg3.png) right top no-repeat, background: url(/imgshow/bg3.png) right top no-repeat,
linear-gradient(to right, #05E99C 0%, #7CF538 100%); linear-gradient(to right, #05e99c 0%, #7cf538 100%);
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000;
color: white; color: white;
height: 100px; height: 100px;
width: 300px; width: 300px;
text-align: left; text-align: left;
padding:20px ; padding: 20px;
} }
.gradient2 { .gradient2 {
background: url(/imgshow/bg5.png) right top no-repeat, background: url(/imgshow/bg5.png) right top no-repeat,
-moz-linear-gradient(left, #F95577 0%, #FCA534 100%); -moz-linear-gradient(left, #f95577 0%, #fca534 100%);
background: -webkit-gradient( background: -webkit-gradient(
linear, linear,
left top, left top,
left bottom, left bottom,
color-stop(0%, #F95577), color-stop(0%, #f95577),
color-stop(100%, #FCA534) color-stop(100%, #fca534)
); );
background: -webkit-linear-gradient(top, #F95577 0%, #FCA534 100%); background: -webkit-linear-gradient(top, #f95577 0%, #fca534 100%);
background: -o-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: -ms-linear-gradient(top, #f95577 0%, #fca534 100%);
background: url(/imgshow/bg5.png) right top no-repeat, background: url(/imgshow/bg5.png) right top no-repeat,
linear-gradient(to right, #F95577 0%, #FCA534 100%); linear-gradient(to right, #f95577 0%, #fca534 100%);
border-radius: 5px; border-radius: 5px;
box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000;
color: white; color: white;
height: 100px; height: 100px;
width: 300px; width: 300px;
text-align: left; text-align: left;
padding:20px ; padding: 20px;
} }
.divInfo { .divInfos {
background: #fff; background: #fff;
padding: 0 20px; padding: 0 20px;
} }
.divInfo p { .divInfos p {
text-align: left; text-align: left;
line-height: 26px; line-height: 26px;
} }
.demoDiv .ivu-card-head { .demoDiv .ivu-card-head {
background: #dedde4; background: #dedde4;
} }
</style> </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