<template>
    <div class="y_star">
        <div v-for="item in 5"
             :data-score="currentScore-item"
             :class="{y_star_full:currentScore-item>=0,y_star_half:(currentScore-item<0&&currentScore-item>=-0.5)}"></div>
    </div>
</template>

<script>
    export default {
        name: "yStar",
        data(){
            return {
                currentScore:this.score
            }
        },
        props:{
            score:""
        },
        watch:{
            currentStore(){
                this.$emit("update:score",this.currentStore)
            },
            score(){
                this.currentScore = this.score;
            },
        }
    }
</script>

<style lang="scss">
    .y_star{
        display: flex;
        &>div{
            width: 13px;
            height: 13px;
            margin-right: 5px;
            background-size: cover;
            background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAxCAYAAACVtYpYAAAACXBIWXMAABYlAAAWJQFJUiTwAAACh0lEQVRogdWa0XXaQBBFL5z8vhNKUAeRKzDpwCXgDnAHogNcQXAH7iC4gtCBTQfAFkA+tMRAkJiVdpH1ztEH0mh2rh4SsysG+/2elHLO5cCD/7iUtEw53iAlkIf5c7b7Z0qoYarEXvML+4qUAyYDcs6NgfsLh+79sSRK6VDR8FgrJQGqceegZC6lcqiIFBOs6EAGdw5K4lIKh4pEsSZFBQpw56DoLsV2aNrgnCJmAdE6BedcBrw3PD1a9xDToaKjc08UxaGKni1UUVxq7ZBzbkp7GIDfzrmibRKzQ/5pNAJyIPNbDnxvW8QFvQEfflsBG6t7J0A3LrqJtpSAH1TADvb7Pc65CfDr9vVF1UxSMdjtdjFu6K+iuyEw7rqKiHoYAsuuq4io1VDSCnjpupIIepH0OgSQNKHfUC+e4fOHtcdQ/2DgrFPoIdQJDFxofXoE9R8MVPRyPYC6CAM1zak/4SlRQW1UCQNXum1Jc+AxdkUt9FwHA8Zu+4v0eo+SFteCTPMhn6jLr9+TBQYCZ6zOuQ23n0psJY2swaEz1tfA+BgKGjMUaBMYf3OFAuVJqqhXFhLcB6CQlVg7kHNuREdrC34R06QQh7pw56DMGtgXoLE1sC9AmTUwBMicNIHMFzNk5TTtPzSuSNLAEmdtTjOavyp543NlaUzgY/hId35Bp1bfjMmyBgWsgamkk9bFLzfPgR+B+TLKpd9aWe+hccDAa8pWPzuHAZC0lJRTzrPWAXlN95EVKDPEHIMsrgVLWkjKsIPdDGgLzIDcOmc51hHYzOeqkmkKYQW61MIfQDJJhaRWnbikgvLCVYEtLXlCHttzYOI/LoDWEDVjjSjfqE8p+8dnSaY37H8BcKLcbIpXYj8AAAAASUVORK5CYII=');

            &.y_star_full{
                background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAxCAYAAACVtYpYAAAACXBIWXMAABYlAAAWJQFJUiTwAAADaklEQVRogd2aWW4TQRCGv27xntzAHcT2wGIQAgWBMHsSJFYJJILEcINwA3MCwgkYS2GVWMUuJZgdJBYHXvLA4twgOQBTPIwNTmwn3XY3dvhfbHXXdNXX1TNTJVuJCCGVfDhkEIkAlEhRbblfDOlPhQRKPh4yCCVEeirOQOSo2vrgTiifOtTCFeWBnnljoyEdBgNKPh02wJkGUxl5dzAK5TdkhvItzrWlIEDJ5yOGxtmpKiNvh6IQvkNlKO/JxlnegSyyU1WQLIXIUD6QrZW8AiWlowa77FSVkTeDkc8YfGco/4+uaSpvQMnkMYNbdqrKyOuByFccPjOU79C1c+QFKPlyzABH2lgiI68GRnzE0jZQ8vV4BJSor9lcdUFeHmi7zrOutpOpEzmEXkSyCAYRA5JF6EEEBNLPynrV79Vx/lTbc8bq7QSE54jMVCr1MkgZoaR2j884ASXfh7OI9ILMDz5TcdTIOQGAmo3NIlJCKKeglBCZUQeeF+cAJT9PR4iM/tlt2+D/PdBC119Ugy9G1K8fwwb42VLw3QUEImc1YOpP4pKV0UC501F4VFnrvrEycLHTkXjQpBp6GWsA3Tc2AhQ6HFA7mgRyUPNi1csvR8DZzsTTlu4COTX4YgYavFiTb6cikEtL5ClXUPuLUW38daWPXnElZmlkqg4GmtRyesXVmO6GaggDCxSnemXXQhXUvmdRs8kFq2296lpMd0EV1N7mMGDRPujVXQNVUHsmosWMrPohveZ6TGehCmr3eGRjaN3g6TU3YtIXWCdk3c26dqyxo70PTapdizd2VbkC9Tra+5A1DLgDGUd7H3LyuRSAMvJsj/XJcAXa6WjvS1lbQ2ugZOqE9aIB5B+Izrbq1r5dgP67DP13QMY9Dm/qkQm7J90yh0U3tBjMNH8rjBytPymzQHExIyugZOpkK8dtGsjrzffi2kF5fzBH+vOJK5g/INyO2ywwojfdjRtNqq0PikBO3g7lSP9VYpt5q021vYdsFpsFzgNGb7wTL2as+h8WVf/DLGlbMm2xvrGwcbqHmmmWdKdHdfa2UyEJoLY9ioFYXg1EpEcx004wthkqNxkvAEavv5XXG245w9RKbX8cqx1PDHCOdJNsY5gjl471fI2jAtCn196M9LqbbYHMl9rxdJT0eM33Z9Xk/QZoRholOEfyzwAAAABJRU5ErkJggg==');
            }

            &.y_star_half{
                background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADQAAAAxCAYAAACVtYpYAAAACXBIWXMAABYlAAAWJQFJUiTwAAADSklEQVRogd2aP2/bRhiHHx0KeMkLe8ha+Jy4jYeiVoPsVnYjdlvAHRwg7CeoC3TqRE9dlW9AAWn+IWjtfIHYa4G2coICXhLbczvYOHfoYF4HSgDrSPJ7Es+y+gMIQbyXd+9zP4p8TyTee2JvZ78sr57++cd3lzHWB0RU/uu9GTwZsJJPfYhzbhlIROQw1pgmVscdNYGV0vclYCfmgNGA8t9WLPCgR9Osc64Ra9yYDqVDto2kKED576uW3u50tRTLpVgOpRXFBKtyIIU7XUVxKYZDaaRYlSoFytufW3TudFW5S1U7lF7SMX1VGVC+F+xOV5W6VKVD6ZiO/Y8qAcpff1FnOHe6qsylkYHyN18mVFOfvXLOpaN2UvPeqwLz/bU6nhm8b+D9DJ463ltgFu8pNopPOp+lfX8vPNbmdAK0gcPOtgMci0g7GCh/u26LJH0peSzez0Ip4QuSHxFokI46kG3guBdszXtPfnA/wfsmnukioXLy3SSvBNAgbYpIWjt7t26Bg/7JTwwQwF0D2MsY6TJU++evVUNxLv4v5KeuZ8bMPWoDrXEnU4F2RaRtAMzco4TJhtoDVqF0YzU3fkyYTKiWiNRF5BjOVQrm5sRBtUQkKe94r/Qx848TJgPqPRjoU8uZ+ScJ8DByQqOoJwwMKE7NR082gK9jZTSC+sLABdW2+fhpxtWCGggDiuWDuXVloC6EAeV6yCw8yxgvlAoGAhZ4ZuF5RlG+j0Mb2sDQFetWYHwV2u7eNDUKBbryhWwoUD1KFoNlQ4InAWgxJDgUaDYwvhI559QTqQbK99caQ2VTjaw2MMQhdacRVL1DjBeooQ0MAVJ3GkFWGzgpDqkvRiFAw17hjoBva2en3wO7Q/aB9s981Zsk+f5Xqs7O6QhIzZ2XGcC1Yt8PncQywifIaoK0r8aE3FBPgNTc3m72ahSRHcA65xKK50JaMKsJ0p5yms5OgE3Ams+2esKUJSKZiFiKZYmmim8oYtQO2QFtJxTv9DRN/efg4lVEMufcFsUSYQOYDu2jLK1D/ZYNLaBuPv0pNYvhMF2JyLGIpBQTt0kxSecV/nxokPL9tSaebzpPFVp4UvPJi0NdymFyzs1Q/L4SCsdawIZmXfQvMEL1qNnjQ6IAAAAASUVORK5CYII=');
            }
        }
    }
</style>