<template>
    <div>
        <div key="progress-container" :style="{
            width: 40 * 1.5,
            height: 400 * 1.5,
            top: 200 * 1.5,
            left: (40 + 70 - 20) * 1.5,
            backgroundColor: 'rgba(255,255,255,0.2)'
        }">
            <div key="progress" :style="{
                top: process_top * 1.5,
                width: 40 * 1.5,
                height: score_height * 1.5,
                backgroundColor: '#ffd050'
            }">
            </div>
        </div>
        <div key="score" :style="{
            width: 140 * 1.5,
            height: 40 * 1.5,
            color: '#ffd050',
            fontSize: 24 * 1.5,
            top: 620 * 1.5,
            left: 40 * 1.5,
            lineHeight: 40 * 1.5,
            textOverflow: 'clip',
            textAlign: 'center'
        }">{{ `分数:${score}` }}</div>
    </div>
</template>

<script setup type="text/javascript">
/* eslint-disable */
import { shallowRef, defineProps, watch} from 'vue';
//定义props
const props = defineProps({
    score: Number
})
//定义得分
let score_height = shallowRef(0);
// let score = toRef(props, 'score');
let process_top = shallowRef(0)


//监听分数
watch(props, (n, o) => {
    score_height.value = (props.score * 400 / 200)
    if (score_height.value > 400) {
        score_height.value = 400;
    }
    process_top.value = 400 - score_height.value;
})
</script>

<style scoped></style>