162 lines
3.7 KiB
Vue
162 lines
3.7 KiB
Vue
<template>
|
|
<div class="art-card p-5 h-128 overflow-hidden mb-5 max-sm:mb-4">
|
|
<div class="art-card-header">
|
|
<div class="title">
|
|
<h4>新用户</h4>
|
|
<p>这个月增长<span class="text-success">+20%</span></p>
|
|
</div>
|
|
<ElRadioGroup v-model="radio2">
|
|
<ElRadioButton value="本月" label="本月"></ElRadioButton>
|
|
<ElRadioButton value="上月" label="上月"></ElRadioButton>
|
|
<ElRadioButton value="今年" label="今年"></ElRadioButton>
|
|
</ElRadioGroup>
|
|
</div>
|
|
<ArtTable
|
|
class="w-full"
|
|
:data="tableData"
|
|
style="width: 100%"
|
|
size="large"
|
|
:border="false"
|
|
:stripe="false"
|
|
:header-cell-style="{ background: 'transparent' }"
|
|
>
|
|
<template #default>
|
|
<ElTableColumn label="头像" prop="avatar" width="150px">
|
|
<template #default="scope">
|
|
<div style="display: flex; align-items: center">
|
|
<img class="size-9 rounded-lg" :src="scope.row.avatar" alt="avatar" />
|
|
<span class="ml-2">{{ scope.row.username }}</span>
|
|
</div>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="地区" prop="province" />
|
|
<ElTableColumn label="性别" prop="avatar">
|
|
<template #default="scope">
|
|
<div style="display: flex; align-items: center">
|
|
<span style="margin-left: 10px">{{
|
|
scope.row.sex === 1 ? '男' : '女'
|
|
}}</span>
|
|
</div>
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="进度" width="240">
|
|
<template #default="scope">
|
|
<ElProgress
|
|
:percentage="scope.row.pro"
|
|
:color="scope.row.color"
|
|
:stroke-width="4"
|
|
:aria-label="`${scope.row.username}的完成进度: ${scope.row.pro}%`"
|
|
/>
|
|
</template>
|
|
</ElTableColumn>
|
|
</template>
|
|
</ArtTable>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import avatar1 from '@/assets/images/avatar/avatar1.webp'
|
|
import avatar2 from '@/assets/images/avatar/avatar2.webp'
|
|
import avatar3 from '@/assets/images/avatar/avatar3.webp'
|
|
import avatar4 from '@/assets/images/avatar/avatar4.webp'
|
|
import avatar5 from '@/assets/images/avatar/avatar5.webp'
|
|
import avatar6 from '@/assets/images/avatar/avatar6.webp'
|
|
|
|
|
|
const ANIMATION_DELAY = 100
|
|
|
|
const radio2 = ref('本月')
|
|
|
|
/**
|
|
* 新用户表格数据
|
|
* 包含用户基本信息和完成进度
|
|
*/
|
|
const tableData = reactive([
|
|
{
|
|
username: '中小鱼',
|
|
province: '北京',
|
|
sex: 0,
|
|
age: 22,
|
|
percentage: 60,
|
|
pro: 0,
|
|
color: 'var(--art-primary)',
|
|
avatar: avatar1
|
|
},
|
|
{
|
|
username: '何小荷',
|
|
province: '深圳',
|
|
sex: 1,
|
|
age: 21,
|
|
percentage: 20,
|
|
pro: 0,
|
|
color: 'var(--art-secondary)',
|
|
avatar: avatar2
|
|
},
|
|
{
|
|
username: '誶誶淰',
|
|
province: '上海',
|
|
sex: 1,
|
|
age: 23,
|
|
percentage: 60,
|
|
pro: 0,
|
|
color: 'var(--art-warning)',
|
|
avatar: avatar3
|
|
},
|
|
{
|
|
username: '发呆草',
|
|
province: '长沙',
|
|
sex: 0,
|
|
age: 28,
|
|
percentage: 50,
|
|
pro: 0,
|
|
color: 'var(--art-info)',
|
|
avatar: avatar4
|
|
},
|
|
{
|
|
username: '甜筒',
|
|
province: '浙江',
|
|
sex: 1,
|
|
age: 26,
|
|
percentage: 70,
|
|
pro: 0,
|
|
color: 'var(--art-error)',
|
|
avatar: avatar5
|
|
},
|
|
{
|
|
username: '冷月呆呆',
|
|
province: '湖北',
|
|
sex: 1,
|
|
age: 25,
|
|
percentage: 90,
|
|
pro: 0,
|
|
color: 'var(--art-success)',
|
|
avatar: avatar6
|
|
}
|
|
])
|
|
|
|
/**
|
|
* 添加进度条动画效果
|
|
* 延迟后将进度值从 0 更新到目标百分比，触发动画
|
|
*/
|
|
const addAnimation = () => {
|
|
setTimeout(() => {
|
|
tableData.forEach((item) => {
|
|
item.pro = item.percentage
|
|
})
|
|
}, ANIMATION_DELAY)
|
|
}
|
|
|
|
onMounted(() => {
|
|
addAnimation()
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.art-card {
|
|
:deep(.el-radio-button__original-radio:checked + .el-radio-button__inner) {
|
|
color: var(--el-color-primary) !important;
|
|
background: transparent !important;
|
|
}
|
|
}
|
|
</style>
|