disk-app/pages/index/index.vue

<template>
	<mobile-frame>
		<view class="main">
			<view class="one">
				<view class="list" v-for="(item,index) in list" :key="index">
					<view class="other">
						<view class="other_1">
							<text>磁盘名称：</text>
							<text>{{item.mounted}}</text>
						</view>
						<view class="other_1">
							<text>磁盘所占空间：</text>
							<text>{{item.capacity}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="two">
				<button type="default" size="mini" @click="toCommon('pages/dir/index')">进入目录</button>
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			};
		},
		onShow: function() {
			const that = this;
			that.searc();
		},
		methods: {
			async searc() {
				const that = this;
				let res = await that.$api(`/diskInfo`, 'GET');
				if (res.errcode == '0') {
					that.$set(that, `list`, res.data)
				}
			},
			toCommon(e) {
				uni.navigateTo({
					url: `/${e}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.main {
		padding: 2vw 0;
		.one {
			padding: 0 2vw;
			margin: 0 0 2vw 0;

			.list {
				border: 1px solid var(--ff0Color);
				padding: 2vw;
				margin: 0 0 2vw 0;
				border-radius: 5px;

				.other {
					margin: 0 0 2vw 0;

					.other_1 {
						margin: 0 0 1vw 0;
						font-size: var(--font16Size);
						color: var(--f85Color);

						text:last-child {
							color: var(--f00Color);
							font-weight: bold;
						}
					}
				}
			}
		}

		.two {
			padding: 0 2vw;
			text-align: center;

			button {
				margin: 0 2vw;
				background-color: var(--f35BColor);
				color: var(--fffColor);
			}
		}
	}
</style>