psy_web_share/examWidght/components/lineProgress/index.vue

<template>
	<view class='pro-main'>
		<text v-show='total>0' style='color:black' space="ensp" decode="true"><text
				class='pro-chu'>出题{{currentIndex+1}}</text><text class='pro-fen'>/{{total}}</text>
			{{' '}}</text>
		<view class="title_tips">选择你的答案进入下一题</view>
		<progress style='width:100%;margin-top:8px' :percent="percentage" border-radius="20" backgroundColor='#E3FDFF'
			activeColor="#3FB4C9" stroke-width="8" />
	</view>
</template>

<script>
	export default {
		props: ['currentIndex', 'total'],

		data() {
			return {
				percentage: 0
			}
		},
		watch: {
			currentIndex: function(newVal, oldVal) {
				this.percentage = this.percentageLineProgress(newVal + 1, this.total)
			},
			total: function(newVal, oldVal) {
				this.percentage = this.percentageLineProgress(1, this.total)
			}
		},
		mounted() {

		},
		methods: {
			percentageLineProgress(num, total) {
				if (num == 0 || total == 0) {
					return 0;
				}
				// 小数点后两位百分比
				return Math.round((num / total) * 10000) / 100;
				// return `${num}/${total}`;
			},

		},

	}
</script>

<style scoped>
	.pro-main {
		/* display: flex; */
		/* margin-top: 10px; */
	}

	.pro-main>>>.uni-progress-bar {

		border-radius: 20px !important;
		overflow: hidden;
	}

	.pro-main>>>.uni-progress-inner-bar {

		border-radius: 20px !important;
		overflow: hidden;
		background-color: #03A2AD;
	}

	.pro-chu {
		font-size: 20px;
		font-family: Source Han Sans-Bold, Source Han Sans;
		font-weight: 700;
		color: #03A2AD;
		line-height: 29px;
	}

	.pro-fen {
		font-size: 14px;
		font-family: Source Han Sans-Bold, Source Han Sans;
		font-weight: 700;
		color: #656C74;
		line-height: 20px;
		margin-left: 3px;
	}

	.title_tips {
		font-size: 24rpx;
		font-family: Source Han Sans-Regular, Source Han Sans;
		font-weight: 400;
		color: #656C74;
		line-height: 34rpx;
		float: right;
		margin: 16rpx 34rpx 0 0;
	}
</style>