条形进度条

组件

<template><view class="pk-detail-con"><i class="lightning" :style="{ left: line+ '%' }"></i><i class="acimgs" :style="{ left: line+ '%' }"></i><view class="progress"><view class="progress-bar" :style="{ width: line + '%'}"></view><span class="team-name team-l">{{ pkData.left }}</span><span class="team-name team-r">{{ pkData.right }}</span></view></view>
</template><script>export default {name: "pk-bar",props:{pkData:{type:Object,default:()=>({})}},data() {return {line:50,};},mounted() {let {	left,	right	} = this.pkData;if (left >= right) {this.line = (left /(right + left) * 100 ).toFixed(2);} else {this.line = (100 - (right / (right + left) * 100)).toFixed(2);}}}
</script><style lang="less">
.pk-detail-con {position: relative;margin: 30rpx auto 20rpx;}.progress {width: 100%;height: 46rpx;overflow: hidden;border-radius: 20rpx;background: linear-gradient(142deg, #7eb2fc, #4391fe);}.progress-bar {position: relative;height: 46rpx;text-align: left;background: linear-gradient(135deg, #fe8130, #fda461);}.progress,.progress-bar {position: relative;}// .lightning {// 	position: absolute;// 	top: -40rpx;// 	z-index: 9;// 	width: 70rpx;// 	height: 140rpx;// 	float: right;// 	margin-right: -12rpx;// 	background: url("./progress.png") no-repeat center;// 	background-size: cover;// 	transform: translateX(-20rpx);// }// .acimgs{// 	position: absolute;// 	bottom:0;// 	width: 58rpx;// 	height: 60rpx;// 	z-index: 9;// 	background: linear-gradient(-135deg, #58e3ff, #0fb9ff);// 	clip-path: polygon(0 0, 70% 0, 25% 100%, 0% 100%);// 	transform: translateX(-10rpx);// }.team-name {position: absolute;top: 0;line-height: 46rpx;color: #f3eee1;letter-spacing: 1rpx;font-size: 24rpx;}.team-l {left: 23rpx;}.team-r {right: 23rpx;}</style>

使用

<pk-bar :pkData="pkData"></pk-bar>

js

<script>
import pkBar from "@/components/pk-bar/pk-bar.vue"
export default {components: {pkBar},data() {return {pkData:{left: 20,right: 30}};},methods: { }
};
</script>