<template>
  <div>
      <div class="star">
        <span>星級評定</span>
       <div class="starXin" v-for="(item,index) in list" :key='index'>
            <div @click="star(index)"><img :src="xing>index?stara:starb"/></div>
      </div>
        
      </div>
          <textarea placeholder="請輸入備評價"></textarea>
      <button class="te">評價</button>
  </div>
</template>

<script>
  export default {
    name: "",
    data() {
      return {
            list:[0,1,2,3,4],
          stara:'../../../../static/tabbar/mine/star_a.png',//亮星星
          starb:'../../../../static/tabbar/mine/star_b.png',//暗星星
          xing:0
      }
    },
   //方法
    methods: {
                star(val){
                    this.xing = val+1
                    console.log("點選了"+(val+1)+"顆星")
                }
    }
  }
</script>

<style lang="less" scoped>
.star{
    width: 90%;
    height: auto;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 40px;
      span{
          width: 21%;
          height: auto;
          font-size:15px;
            font-family:PingFangSC-Medium;
            font-weight:500;
            color:rgba(51,51,51,1);
      }
      .starXin{
          height: auto;
          display: flex;
          justify-content: flex-start;
          align-items: center;
          line-height: 20px;
          div{
              margin-left:15px;
          }
      }
      img{
          width: 23px;
          height: 23px;
      }
}
.te{
    margin-top: 43px;
    width: 74%;
    height:43px;
    background:rgba(67,154,255,1);
    border-radius:4px;
    font-size:15px;
    font-family:PingFangSC-Regular;
    font-weight:400;
    color:rgba(254,254,254,1);
}
textarea{
    width:85%;
    margin: 0 auto;
height:120px;
background:rgba(246,246,246,1);
border-radius:6px;
font-size:15px;
font-family:PingFangSC-Regular;
font-weight:400;
color:rgba(153,153,153,1);
line-height:21px;
padding:9px 15px 0 15px ;
}

</style>