<template>
|
<div class="person-info">
|
<div class="person-l">
|
<el-icon>
|
<UserFilled />
|
</el-icon>
|
</div>
|
<div class="person-r">
|
{{ person.workerName || '' }}
|
<!-- <span>{{ person.phoneNum || "" }}</span> -->
|
<span>
|
<el-icon>
|
<StarFilled />
|
</el-icon>
|
<el-icon>
|
<StarFilled />
|
</el-icon>
|
<el-icon>
|
<StarFilled />
|
</el-icon>
|
<el-icon>
|
<StarFilled />
|
</el-icon>
|
<el-icon>
|
<StarFilled />
|
</el-icon>
|
</span>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import { StarFilled, UserFilled } from '@element-plus/icons-vue'
|
import { toRefs } from 'vue'
|
import type { Worker } from '@/api/task'
|
|
export interface PersonInfoProps {
|
person: Worker
|
}
|
|
const props = defineProps<PersonInfoProps>()
|
const { person } = toRefs(props)
|
</script>
|
|
<style scoped lang="scss">
|
$status-default: #13235a;
|
$status-running: #f76c0f;
|
$status-ready: #13235a;
|
$status-done: #2c5dbb82;
|
$status-star: yellow;
|
|
.font_weight {
|
font-weight: 600;
|
}
|
|
.person-info {
|
width: 100%;
|
height: 60px;
|
line-height: 60px;
|
margin-top: 10px;
|
border-radius: 10px;
|
background: $status-default;
|
color: #fff;
|
overflow: hidden;
|
|
.person-l {
|
width: 80px;
|
height: 40px;
|
line-height: 40px;
|
padding: 10px 0px;
|
text-align: center;
|
float: left;
|
font-size: 40px;
|
}
|
|
.person-r {
|
width: calc(100% - 80px);
|
font-size: 20px;
|
font-weight: 600;
|
span {
|
color: $status-star;
|
margin-left: 10px;
|
}
|
}
|
}
|
</style>
|
