You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
81 lines
1.5 KiB
81 lines
1.5 KiB
<template> |
|
<div :class="['infomation', center && 'center']"> |
|
<el-button class="icon" type="info" :icon="icon"></el-button> |
|
<div class="title">{{ title }}</div> |
|
<el-divider></el-divider> |
|
<span style="margin-right: -105px">{{ num }}</span> |
|
</div> |
|
</template> |
|
|
|
<script lang="ts" setup> |
|
const prop = defineProps({ |
|
num: { |
|
type: Number, |
|
default: 0, |
|
}, |
|
icon: { |
|
type: String, |
|
default: '', |
|
}, |
|
title: { |
|
type: String, |
|
default: '', |
|
}, |
|
center: { |
|
type: Boolean, |
|
default: false |
|
} |
|
}); |
|
|
|
</script> |
|
<style lang="scss" scoped> |
|
.infomation { |
|
text-align: center; |
|
margin-bottom: 10px; |
|
float: left; |
|
width: 250px; |
|
height: 80px; |
|
background-color: transparent; |
|
color: deepskyblue; |
|
border-radius: 20px; |
|
margin-left: 50px; |
|
box-shadow: -2px 2px 3px #aaaaaa; |
|
|
|
.icon { |
|
position: relative; |
|
top: -10px; |
|
z-index: 2; |
|
left: -35px; |
|
font-size: 20px; |
|
background-color: transparent; |
|
color: deepskyblue; |
|
} |
|
|
|
.title { |
|
float: right; |
|
margin: 10px 10px 0 0; |
|
} |
|
|
|
&.center { |
|
.icon { |
|
left: 0px; |
|
} |
|
|
|
.title { |
|
float: none; |
|
width: 100%; |
|
margin: 0; |
|
text-align: center; |
|
} |
|
} |
|
} |
|
|
|
.el-divider { |
|
background-color: transparent; |
|
position: relative; |
|
} |
|
|
|
.el-divider--horizontal { |
|
margin: 5px 0; |
|
} |
|
</style> |