组件

<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>