zhywpt-sp/subpackage/personal-center/excel.vue

<template>
	<view class="wrapper">
		<view class="tabel">
			<view class="tr">
				<view class="th">仓库名称</view>
				<view class="th">设备类型</view>
				<view class="th">库存数量</view>
				<view class="th">剩余可用数量</view>
				<view class="th">余量</view>
			</view>
			<view class="tr">
				<view class="td overflow">黔通智联仓库1</view>
				<view class="td">2X储值卡</view>
				<view class="td">10000</view>
				<view class="td">8500</view>
				<view class="td">85%</view>
			</view>
			<view class="tr">
				<view class="td">黔通智联仓库2</view>
				<view class="td">2X储值卡</view>
				<view class="td">10000</view>
				<view class="td">7510</view>
				<view class="td">75.1%</view>
			</view>
			<view class="tr">
				<view class="td">黔通智联仓库3</view>
				<view class="td">2X储值卡</view>
				<view class="td">10000</view>
				<view class="td">10000</view>
				<view class="td">100%</view>
			</view>
			<view class="tr">
				<view class="td">黔通智联仓库4</view>
				<view class="td">2X储值卡</view>
				<view class="td">188000</view>
				<view class="td">100001</view>
				<view class="td">{{(100001/188000*100).toFixed(2)}}%</view>
			</view>
		</view>
	</view>
</template>

<script>

</script>

<style>
	page {
		background: #eef7f7;
	}
</style>
<style scoped>
	.wrapper {
		padding: 30rpx 20rpx;
	}

	.tabel {
		display: table;
		border-collapse: collapse;
		overflow-x: auto;
		word-break: keep-all;
		white-space: nowrap;
		background-color: #FFFFFF;
		font-size: 28rpx;
		width: 100%;
	}

	.tabel .tr {
		display: table-row;
	}

	.tabel .tr .th {
		display: table-cell;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		border: 1rpx solid #DDDDDD;
		border-right: none;
		border-bottom: none;
		background-color: #00B38B;
		color: #FFFFFF;
		font-weight: bold;
		box-sizing: border-box;
	}

	.tabel .tr .td {
		padding: 0rpx 8rpx;
		display: table-cell;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border: 1rpx solid #DDDDDD;
		border-right: none;
		box-sizing: border-box;
	}
</style>