64 lines
1.1 KiB
Vue
64 lines
1.1 KiB
Vue
<template>
|
|
<view>
|
|
<l-circle current="30" percent="30" size="80px" strokeColor="#c83428">
|
|
<view class="centerTxt">
|
|
<view class="num">
|
|
80%
|
|
</view>
|
|
<view class="txt">
|
|
正确率
|
|
</view>
|
|
</view>
|
|
</l-circle>
|
|
</view>
|
|
<view class="progressBox">
|
|
<wt-progress-circle :percent="80" :size="168" progressColor="#4ADA88" id='a'>
|
|
<view class="centerTxt">
|
|
<view class="num">
|
|
80%
|
|
</view>
|
|
<view class="txt">
|
|
正确率
|
|
</view>
|
|
</view>
|
|
</wt-progress-circle>
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.progressBox {
|
|
position: relative;
|
|
width: 168rpx;
|
|
height: 168rpx;
|
|
margin: 0 auto;
|
|
margin-top: 33rpx;
|
|
}
|
|
|
|
.centerTxt {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
|
|
.num {
|
|
font-size: 30rpx;
|
|
font-family: Arial;
|
|
font-weight: bold;
|
|
color: #38393A;
|
|
}
|
|
|
|
.txt {
|
|
font-size: 22rpx;
|
|
font-family: PingFang SC;
|
|
font-weight: 400;
|
|
color: #8A8B8B;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
}
|
|
</style>
|