59 lines
1.2 KiB
Vue
59 lines
1.2 KiB
Vue
<template>
|
|
<div class="star-comp">
|
|
<img class="star" v-for="(d, index) in stars" :key="index" :src="d" />
|
|
</div>
|
|
</template>
|
|
<script lang="ts">
|
|
import { Component, Vue } from 'vue-property-decorator'
|
|
|
|
declare module 'vue/types/vue' {
|
|
interface Vue {
|
|
level:number
|
|
}
|
|
}
|
|
|
|
@Component({
|
|
name: 'LevelStar',
|
|
components: {
|
|
},
|
|
props: ['level']
|
|
})
|
|
export default class extends Vue {
|
|
starType = [
|
|
require('@/assets/main/detail/star-00.png'),
|
|
require('@/assets/main/detail/star-01.png'),
|
|
require('@/assets/main/detail/star-02.png'),
|
|
require('@/assets/main/detail/star-03.png')
|
|
]
|
|
|
|
stars: string[] = []
|
|
created() {
|
|
this.level = this.level || 0
|
|
this.level = this.level > 15 ? 15 : this.level
|
|
const v = (this.level / 5) | 0
|
|
const p = this.level % 5
|
|
console.log(p)
|
|
for (let i = 0; i < 5; i++) {
|
|
if (p === 0) {
|
|
this.stars.push(this.starType[v])
|
|
} else {
|
|
if (i < p) {
|
|
this.stars.push(this.starType[v + 1])
|
|
} else {
|
|
this.stars.push(this.starType[0])
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@media (max-width: 767px) {
|
|
.star-comp{
|
|
.star{
|
|
width: 30px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|