h5-elab-open-ownerUnion/components/leve-view/leve-view.vue

<template>
	<view class="level">
		<view class="leve_left">
			<view class="level_left_txt">
				{{currentLevelTxt}}
			</view>
			<view class="level_progress">
				<view class="leve_progress_" :style="{width:currentLevel/nextLevel*300+'rpx'}">
					
				</view>
				<view class="leve_progress_bg">
					
				</view>
			</view>
			<view class="level_right_txt">
				{{nextLevelTxt}}
			</view>
		</view>
		<view class="level_right">
			成长值 {{currentLevel}}/{{nextLevel}}
		</view>
	</view>
</template>

<script>
	export default {
		name:"leve-view",
		props:{
			currentLevel:[Number,String],
			nextLevel:[Number,String],
			currentLevelTxt:String,
			nextLevelTxt:String,
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
   .level{
	   display: flex;
	   align-items: center;
	   justify-content: space-between;
	   margin-top: 14px;
	   .leve_left{
		   display: flex;
		   align-items: center;
		   .level_right_txt,
		   .level_left_txt{
			   height: 30rpx;
			   background: #BEA991;
			   border-radius: 8rpx;
			   font-size: 18rpx;
			   font-family: FontName, FontName-Regular;
			   font-weight: 400;
			   text-align: center;
			   color: #ffffff;
			   padding: 0rpx 4rpx;
		   }
		   .level_right_txt{
			   background: #A38462;
		   }
		   .level_progress{
			   width: 300rpx;
			   height: 10rpx;
			   position: relative;
			   
			   .leve_progress_{
				   position: absolute;
				   height: 10rpx;
				   left: 0;
				   top: 0;
				   background: linear-gradient(270deg,#ffffff, #bea991 70%);
				   z-index: 11;
			   }
			
			   .leve_progress_bg{
				   width: 100%;
				   height: 100%;
				   background: #A38462;
			   }
		   }
	   }
	   .level_right{
		   font-size: 20rpx;
		   font-family: Verdana, Verdana-Regular;
		   font-weight: 400;
		   text-align: left;
		   color: #ffffff;
	   }
   }
</style>