227 lines
5.4 KiB
Vue
227 lines
5.4 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<div class="top-box">
|
||
|
|
<div class="top-sl" >
|
||
|
|
<div class="box-title">
|
||
|
|
<span style="margin-right: 5px">本日流水总额</span>
|
||
|
|
<el-popover
|
||
|
|
placement="top-start"
|
||
|
|
title="标题"
|
||
|
|
width="200"
|
||
|
|
trigger="hover"
|
||
|
|
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||
|
|
|
||
|
|
<i class="el-icon-warning-outline" slot="reference" ></i>
|
||
|
|
</el-popover>
|
||
|
|
</div>
|
||
|
|
<div class="box-size">
|
||
|
|
4023
|
||
|
|
</div>
|
||
|
|
<div class="box-but">
|
||
|
|
<div class="icon-lv">
|
||
|
|
<i class="el-icon-bottom"></i>
|
||
|
|
<span>20.5%</span>
|
||
|
|
</div>
|
||
|
|
<div>环比</div>
|
||
|
|
<div> <i class="el-icon-arrow-right"></i> </div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="top-sl" >
|
||
|
|
<div class="box-title">
|
||
|
|
<span style="margin-right: 5px">本日流水总额</span>
|
||
|
|
<el-popover
|
||
|
|
placement="top-start"
|
||
|
|
title="标题"
|
||
|
|
width="200"
|
||
|
|
trigger="hover"
|
||
|
|
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||
|
|
|
||
|
|
<i class="el-icon-warning-outline" slot="reference" ></i>
|
||
|
|
</el-popover>
|
||
|
|
</div>
|
||
|
|
<div class="box-size">
|
||
|
|
4023
|
||
|
|
</div>
|
||
|
|
<div class="box-but">
|
||
|
|
<div class="icon-lv">
|
||
|
|
<i class="el-icon-bottom"></i>
|
||
|
|
<span>20.5%</span>
|
||
|
|
</div>
|
||
|
|
<div>环比</div>
|
||
|
|
<div> <i class="el-icon-arrow-right"></i> </div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="top-sl" >
|
||
|
|
<div class="box-title">
|
||
|
|
<span style="margin-right: 5px">本日流水总额</span>
|
||
|
|
<el-popover
|
||
|
|
placement="top-start"
|
||
|
|
title="标题"
|
||
|
|
width="200"
|
||
|
|
trigger="hover"
|
||
|
|
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||
|
|
|
||
|
|
<i class="el-icon-warning-outline" slot="reference" ></i>
|
||
|
|
</el-popover>
|
||
|
|
</div>
|
||
|
|
<div class="box-size">
|
||
|
|
4023
|
||
|
|
</div>
|
||
|
|
<div class="box-but">
|
||
|
|
<div class="icon-lv">
|
||
|
|
<i class="el-icon-bottom"></i>
|
||
|
|
<span>20.5%</span>
|
||
|
|
</div>
|
||
|
|
<div>环比</div>
|
||
|
|
<div> <i class="el-icon-arrow-right"></i> </div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="top-sl" >
|
||
|
|
<div class="box-title">
|
||
|
|
<span style="margin-right: 5px">本日流水总额</span>
|
||
|
|
<el-popover
|
||
|
|
placement="top-start"
|
||
|
|
title="标题"
|
||
|
|
width="200"
|
||
|
|
trigger="hover"
|
||
|
|
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||
|
|
|
||
|
|
<i class="el-icon-warning-outline" slot="reference" ></i>
|
||
|
|
</el-popover>
|
||
|
|
</div>
|
||
|
|
<div class="box-size">
|
||
|
|
4023
|
||
|
|
</div>
|
||
|
|
<div class="box-but">
|
||
|
|
<div class="icon-lv">
|
||
|
|
<i class="el-icon-bottom"></i>
|
||
|
|
<span>20.5%</span>
|
||
|
|
</div>
|
||
|
|
<div>环比</div>
|
||
|
|
<div> <i class="el-icon-arrow-right"></i> </div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="top-sl" >
|
||
|
|
<div class="box-title">
|
||
|
|
<span style="margin-right: 5px">本日流水总额</span>
|
||
|
|
<el-popover
|
||
|
|
placement="top-start"
|
||
|
|
title="标题"
|
||
|
|
width="200"
|
||
|
|
trigger="hover"
|
||
|
|
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||
|
|
|
||
|
|
<i class="el-icon-warning-outline" slot="reference" ></i>
|
||
|
|
</el-popover>
|
||
|
|
</div>
|
||
|
|
<div class="box-size">
|
||
|
|
4023
|
||
|
|
</div>
|
||
|
|
<div class="box-but">
|
||
|
|
<div class="icon-lv">
|
||
|
|
<i class="el-icon-bottom"></i>
|
||
|
|
<span>20.5%</span>
|
||
|
|
</div>
|
||
|
|
<div>环比</div>
|
||
|
|
<div> <i class="el-icon-arrow-right"></i> </div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="top-sl" >
|
||
|
|
<div class="box-title">
|
||
|
|
<span style="margin-right: 5px">本日流水总额</span>
|
||
|
|
<el-popover
|
||
|
|
placement="top-start"
|
||
|
|
title="标题"
|
||
|
|
width="200"
|
||
|
|
trigger="hover"
|
||
|
|
content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
|
||
|
|
|
||
|
|
<i class="el-icon-warning-outline" slot="reference" ></i>
|
||
|
|
</el-popover>
|
||
|
|
</div>
|
||
|
|
<div class="box-size">
|
||
|
|
4023
|
||
|
|
</div>
|
||
|
|
<div class="box-but">
|
||
|
|
<div class="icon-lv">
|
||
|
|
<i class="el-icon-bottom"></i>
|
||
|
|
<span>20.5%</span>
|
||
|
|
</div>
|
||
|
|
<div>环比</div>
|
||
|
|
<div> <i class="el-icon-arrow-right"></i> </div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "topindex",
|
||
|
|
data(){
|
||
|
|
return{
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.top-box{
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
.top-sl{
|
||
|
|
width: 16%;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 8px;
|
||
|
|
background: #FFFFFF;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 15px;
|
||
|
|
|
||
|
|
}
|
||
|
|
.box-title{
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: rgba(0,0,0,0.6);
|
||
|
|
}
|
||
|
|
.box-size{
|
||
|
|
font-size: 28px;
|
||
|
|
font-weight: 400;
|
||
|
|
color: rgba(0,0,0,0.9);
|
||
|
|
margin-top: 5px;
|
||
|
|
margin-bottom: 15px;
|
||
|
|
}
|
||
|
|
.box-but{
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
color: rgba(0,0,0,0.6);
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
.icon-lv{
|
||
|
|
width: 71px;
|
||
|
|
height: 24px;
|
||
|
|
background: #E3F9E9;
|
||
|
|
border-radius: 3px 3px 3px 3px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 14px;
|
||
|
|
color: #2BA471;
|
||
|
|
}
|
||
|
|
</style>
|