82 lines
1.5 KiB
Vue
82 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<div class="desc">
|
||
|
|
<div class="icon" v-if="icon">
|
||
|
|
<img :src="icon" alt="" class="icon-img">
|
||
|
|
</div>
|
||
|
|
<div class="info" :style="{ paddingLeft: `${paddingLeft}px` }">
|
||
|
|
<div class="title" :style="{ color: titleColor }">{{ title }}</div>
|
||
|
|
<div class="num" :style="{ color: color, textAlign: align }">{{ num }}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: "CustomDesc",
|
||
|
|
props: {
|
||
|
|
titleColor: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
paddingLeft: {
|
||
|
|
type: [String, Number],
|
||
|
|
default: '12'
|
||
|
|
},
|
||
|
|
icon: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
color: {
|
||
|
|
type: String,
|
||
|
|
default: '#08EBF5'
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
num: {
|
||
|
|
type: [String, Number],
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
align: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="less">
|
||
|
|
@import "assets/styles/mixin";
|
||
|
|
.desc {
|
||
|
|
.clear-fix;
|
||
|
|
.icon {
|
||
|
|
width: 56px;
|
||
|
|
height: 56px;
|
||
|
|
.float(left);
|
||
|
|
.icon-img {
|
||
|
|
display: block;
|
||
|
|
width: 56px;
|
||
|
|
height: 56px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.info {
|
||
|
|
overflow: hidden;
|
||
|
|
padding-left: 12px;
|
||
|
|
.title {
|
||
|
|
font-family: MicrosoftYaHei;
|
||
|
|
font-size: 14px;
|
||
|
|
color: rgba(255,255,255,0.50);
|
||
|
|
font-weight: 400;
|
||
|
|
}
|
||
|
|
.num {
|
||
|
|
font-family: HIKLDH-Number-CondensedMedium;
|
||
|
|
font-size: 24px;
|
||
|
|
color: #08EBF5;
|
||
|
|
letter-spacing: 0;
|
||
|
|
font-weight: 500;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|