63 lines
1004 B
Vue
63 lines
1004 B
Vue
<script>
|
|
export default {
|
|
model: {
|
|
prop: 'value',
|
|
event: 'change'
|
|
},
|
|
props: {
|
|
value: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
readonly: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
methods: {
|
|
handleChange(val) {
|
|
if (!this.readonly) {
|
|
this.$emit('change', val);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="rate flex items-center">
|
|
<el-rate
|
|
:value="value"
|
|
@input="handleChange"
|
|
:colors="['#7B61FF', '#7B61FF', '#7B61FF']"
|
|
void-color="#E2E8F0"
|
|
:size="24"
|
|
:disabled="readonly">
|
|
</el-rate>
|
|
<div class="rate-num" :class="value ? 'gradient-box' : ''">{{ (value).toFixed(1) }}</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
::v-deep .el-rate {
|
|
height: 24px;
|
|
.el-rate__icon {
|
|
font-size: 24px;
|
|
}
|
|
}
|
|
.rate-num {
|
|
width: 36px;
|
|
height: 28px;
|
|
line-height: 28px;
|
|
text-align: center;
|
|
background: #E2E8F0;
|
|
color: #fff;
|
|
border-radius: 12px;
|
|
margin-left: 8px;
|
|
font-family: 'Poppins-Regular';
|
|
}
|
|
.gradient-box {
|
|
background: $header-backgroungd;
|
|
}
|
|
</style>
|