BiKing/components/market-depth/market-depth.vue

<template>
	<view :class="['nums-item' , `nums-item_${type}`]" :style="{'height':height}">
		<text :class="['nums-item-bg', leftbg ? 'left' : 'right']" :style="{'width': val[2] + '%' }"></text>
		<view class="item-num">
			<text class="color">{{ val[0] }}</text>
			<text>{{ val[1] * 1000000 }}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "market-depth",
		props: {
			type: {
				type: Number,
				default: 0

			},
			val: {
				type: Array,
				default: () => {
					return []
				}

			},
			height: {
				type: String,
				default: ''
			},
			leftbg: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.nums-item {
		width: 100%;
		position: relative;
		height: 40rpx;
	}

	.nums-item-bg {
		position: absolute;
		top: 0;
		z-index: 1;
		height: 100%;
	}

	.left {
		left: 0;
	}

	.right {

		right: 0;
	}

	.item-num {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		line-height: 33rpx;
		color: #1a1a1a;

		text+text {

			font-weight: 700;
			line-height: 33rpx;
		}
	}

	.nums-item_1 {
		.nums-item-bg {
			background-color: $mai_04;
		}

		.color {
			color: $mai_02;
		}
	}

	.nums-item_2 {
		.nums-item-bg {
			background-color: $mai_03;
		}

		.color {
			color: $mai_01;
		}
	}
</style>