<template>
|
<div class="time-container flex justify-center text-white items-center shadow-md">
|
<el-icon class="mr-1 text-xl" size="24"><Timer /></el-icon>
|
<div class="label mr-1">剩余时间:</div>
|
<el-countdown :value="time" />
|
</div>
|
</template>
|
|
<script setup>
|
import {ref} from 'vue';
|
import { Timer } from '@element-plus/icons-vue';
|
|
const time = ref(1000);
|
</script>
|
|
<style lang="scss" scoped>
|
.time-container {
|
width: 220px;
|
border-radius: 100px;
|
padding: 10px 0;
|
background-color: rgba($color: #86d7f7, $alpha: 0.3);
|
|
}
|
|
:deep(.el-statistic__number) {
|
color: #ffffff;
|
}
|
</style>
|
