<style scoped>
.number {
  font-size: 46px;
  font-weight: bold;
  color: #000;
  line-height: 42px;
}
.all {
    height: 10px;
    width: 230px;
    border-radius: 5px;
    background: #eee;
}
.fill {
    height: 10px;
    width: 230px;
    border-radius: 5px;
    background: #2D90FF;
    }
</style>
<template>
  <div class="q-mt-lg">
      <div class="flex justify-between">
        <div class="flex items-center">
          <div class="flex items-end mr">
            <span class="number">4.5</span>
            <span>/5</span>
          </div>
          <star :value="4"></star>
        </div>
        <div class="ml custom-pointer" @click="showCommentsList">
          <span>200+條評價</span>
        </div>
      </div>
    <div class="flex justify-between q-mt-lg">
        <div v-for="item in list" :key="item.id">
            <div>{{item.label}}</div>
            <div class="flex items-center">
                <div class="relative all">
                    <span class="absolute fill" :style="{width: item.score/5 * 100 + '%'}"></span>
                </div>
                <span class="q-ml-sm">{{item.score}}</span>
            </div>
        </div>
    </div>
    <div class="flex justify-between wrap">
      <comment class="margin" v-for="item in 3" :key="item"></comment>
    </div>
  </div>
</template>
<script>
import comment from "./comment.vue";
import star from "./star.vue";
export default {
  components: { comment, star },
  data() {
    return {
        list: [{
            label: '位置',
            score: 4,
            id: 1
        },{
            label: '服务',
            score: 5,
            id: 2
        },{
            label: '清洁',
            score: 3.6,
            id: 3
        },{
            label: '环境&卫生',
            score: 4.5,
            id: 4
        }]
    };
  },
  methods: {
    showCommentsList() {
        this.show = true;
    }
  }
};
</script>
