vue 中使用 css 变量

参考代码

<template>
    <section class="video" :style="`--process:${process}%`">
        <div class="text z-10">{{ props.video.title }}</div>
        <close-one class="icon" theme="outline" size="16"></close-one>
    </section>
</template>

<script setup lang="ts">
import { CloseOne } from '@icon-park/vue-next'
import { VideoType } from '@renderer/types'
import { ref } from 'vue'
const props = defineProps<{ video: VideoType }>()

const process = ref(60)
</script>

<style scoped lang="scss">
.video {
    @apply bg-white px-3 py-1 rounded-lg mb-2 mx-3 text-xs text-slate-600 flex justify-between items-center relative;
    &::before {
        content: '';
        @apply bg-yellow-400 absolute top-0 bottom-0 left-0 right-0 rounded-lg opacity-50;
        width: var(--process);
    }
    .text {
        @apply truncate;
    }
    .icon {
        @apply text-slate-500 opacity-50 hover:text-yellow-500 cursor-pointer hover:scale-125 duration-300;
    }
}
</style>