ajy/code/ajyApp/pages/device/moxibustion/moxibustion.nvue

<template>
	<view class="container">
		<view class="list">
			<view class="item" v-if="num2 != '0'">
				<image class="img" src="/static/device/haocai1.png" mode="aspectFill"></image>
				<view class="info">
					<text class="txt1">尘盒滤芯</text>
					<text class="txt2">尘盒收集率：{{num2}}%</text>
					<view class="linebg">
						<view class="bar" :style="{width: num2+'%'}"></view>
					</view>
				</view>
			</view>
			<view class="item" v-if="num1 != '0'">
				<image class="img" src="/static/device/haocai2.png" mode="aspectFill"></image>
				<view class="info">
					<text class="txt1">艾灸柱</text>
					<text class="txt2">剩余量：{{num1}}个</text>
					<view class="linebg">
						<view class="bar" :style="{width: persent+'rpx'}"></view>
					</view>
				</view>
			</view>
			<view class="item" v-if="num3 != '0'">
				<image class="img" src="/static/device/haocai1.png" mode="aspectFill"></image>
				<view class="info">
					<text class="txt1">回收仓</text>
					<text class="txt2">占用率：{{num3}}%</text>
					<view class="linebg">
						<view class="bar" :style="{width: num3+'%'}"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			num1: '0',
			num2: '0',
			num3: '0',
			persent: 0
		}
	},
	onLoad(options) {
		this.num1 = options.p1 || '0'
		this.num2 = options.p2 || '0'
		this.num3 = options.p3 || '0'
		let num = parseInt(options.p1 || '0')
		this.persent = (400 * num / 12)
	},
	methods: {
	}
}
</script>

<style>
.container {
	flex: 1;
	background-color: #ffffff;
}
.list {
	padding-top: 30rpx;
	align-items: center;
}
.item {
	flex-direction: row;
	width: 676rpx;
	height: 204rpx;
	background-color: #F3F3F3;
	border-radius: 20rpx;
	align-items: center;
	margin-bottom: 16rpx;
}
.img {
	width: 140rpx;
	height: 140rpx;
	margin-left: 28rpx;
	margin-right: 48rpx;
	border-radius: 20rpx;
}
.info {
	flex: 1;
}
.txt1 {
	font-size: 32rpx;
	color: #545F71;
	line-height: 44rpx;
	margin-top: 8rpx;
	margin-bottom: 12rpx;
}
.txt2 {
	font-size: 26rpx;
	color: #9BA5B7;
	line-height: 44rpx;
	margin-bottom: 12rpx;
}
.linebg {
	width: 392rpx;
	height: 12rpx;
	background-color: #B6DAD5;
	border-radius: 20rpx;
}
.bar {
	height: 12rpx;
	background-color: #389588;
	border-radius: 20rpx;
}
</style>