tiny-vue_version0/examples/sites/demos/pc/app/statistic/statistic-style-composition...

41 lines
1011 B
Vue

<template>
<div>
<tiny-layout>
<tiny-row :flex="true">
<tiny-col :span="8">
<tiny-statistic
:value="306526"
:value-style="{ 'color': '#3ac295' }"
:title="{ value: '进行中', position: 'top' }"
>
</tiny-statistic>
</tiny-col>
<tiny-col :span="8">
<tiny-statistic
:value="306526.23"
:value-style="[{ 'color': '#eb1212', 'text-align': 'center' }]"
:title="{ position: 'bottom' }"
>
<template #title>
<div class="title-content">失败</div>
</template>
</tiny-statistic>
</tiny-col>
</tiny-row>
</tiny-layout>
</div>
</template>
<script setup>
import { Statistic as TinyStatistic, Layout as TinyLayout, Row as TinyRow, Col as TinyCol } from '@opentiny/vue'
</script>
<style scoped>
.title-content {
width: 90px;
text-align: center;
color: #a9a9a9;
font-weight: 600;
}
</style>