<template>
<view class="progress-wrap">
<view class="pro_titl">
{{content}}
</view>
<view class="progress" >
<view class="pro_index" :style="{width:number+'%',background:`linear-gradient(270deg, ${color1} 0%, ${color2} 100%)` }">
</view>
</view>
<view class="percentage">{{number || 0}}% </view>
</view>
</template>
<script>
export default {
props: {
content: {
type: '',
default: '魅力指数:'
},
color1: {
type: '',
default: '#72EDE3'
},
color2: {
type: '',
default: '#A08EFF'
},
number: {
type: Number,
default: 0
},
},
data() {
return {
}
},
}
</script>
<style lang="scss" scoped>
.progress-wrap {
width: 100%;
padding-left: 34rpx;
box-sizing: border-box;
display: flex;
align-items: center;
margin-bottom: 30rpx;
.pro_titl {
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #FFFFFF;
line-height: 40rpx;
}
.progress {
width: 394rpx;
height: 28rpx;
background: rgba(255, 255, 255, 0.55);
border-radius: 5rpx;
position: relative;
.pro_index {
position: absolute;
top: 0;
left: 0;
height: 28rpx;
background: linear-gradient(270deg, #72EDE3 0%, #A08EFF 100%);
border-radius: 5rpx;
}
}
.percentage {
width: 62rpx;
height: 40rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: bold;
color: #FFFFFF;
line-height: 40rpx;
margin-left: 24rpx;
}
}
</style>
静态进度条-渐变颜色升级版
版权申诉
144 浏览量
2023-03-09
10:58:33
上传
评论
收藏 1KB ZIP 举报
瑆箫
- 粉丝: 868
- 资源: 129
最新资源
- 演讲稿.txt
- 基于Python的爬虫案例-软科中国大学TOP200
- 碳排放权交易明细数据(2024年5月更新).xlsx
- 特殊文件属性命令chattr和lsattr
- HTML、CSS 和 JavaScript动态、交互式的网页 .txt
- b0cd8f9b23d4e5e381b6a8fd8ee0e907.JPG
- ff45d61c5900e45634cf4cac6cff61a1.JPG
- springboot.springboot.springboot.springboot.txt
- linux-进程与服务管理
- 毕业设计基于Django+MySQL+Redis实现简单的天气预报系统python源码.zip
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈