<template>
  <view class="star_contents_body">
    <up-icon
      v-for="(i, index) in 5"
      :key="index"
      name="star-fill"
      size="18"
      :color="index < props?.valueModel ? '#FFC53D' : '#F3F3F4'"
    ></up-icon>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const props = defineProps(['valueModel'])
</script>

<style lang="scss" scoped>
:deep(.u-transition) {
  padding-bottom: calc(env(safe-area-inset-bottom) + 48px) !important;
}
.star_contents_body {
  display: flex;
  flex: 1;
  gap: 10rpx;
  align-items: center;
  justify-content: center;
}
</style>
