<template> <div class="ProgressVideoBox"> //背景图 <image style=" width: 100% !important; height: 100% !important; background-color: #eeeeee; " mode="scaleToFill" :src="imgUrl" ></image> <div class="mook"> <div class="shadow" :style="`background: conic-gradient(#fff ${progress}%, gray ${progress}%)`" ></div> <div class="num">{{ progress}}%</div> </div> </div> </template> <script lang="ts"> import { defineComponent, watchEffect } from "vue"; export default defineComponent({ name: "ProgressVideo", components: {}, setup() { setInterval(()=>{ progress++ },1000) return { progress, }; }, }); </script> <style lang="scss"> .ProgressVideoBox { text-align: center; width: 132px; height: 180px; position: relative; border-radius: 30px; overflow: hidden; .mook { width: 100%; height: 100%; background-color: rgba(119, 113, 102, 0.7); position: absolute; top: 0; left: 0; z-index: 1; .shadow { width: 120px; height: 120px; position: relative; border-radius: 50%; margin: 20px auto 0; /* background: conic-gradient(#ddff5c 50%, #1d335c 50%); */ mask: radial-gradient(transparent 44px, #000 45px); -webkit-mask: radial-gradient(transparent 44px, #000 45px); transform: scale(0.6); } .shadow::before { content: ""; position: absolute; left: 48px; top: 0px; width: 5px; height: 5px; background: #ddff5c; border-radius: 50%; } .shadow::after { content: ""; position: absolute; left: -1px; top: 44px; width: 8px; height: 8px; background: #85ea8e; border-radius: 50%; } .num { width: 100%; color: #fff; font-size: 35px; margin-top: -20px; } } } </style>
css标签画圆形进度条
于 2023-07-24 14:22:05 首次发布