delivery-depot-uniapp/pages/warehouse/components/warehouseInfo/warehouseInfo.vue

<template>

<view class="content">
	<view class="base-info-box">
		<view class="info-item">
			<text class="label">库区名称:</text>
			<text class="value">天津利达粮油库区</text>
		</view>
		<view class="info-item">
			<text class="label">所属企业:</text>
			<text class="value">天津利达粮油有限公司</text>
		</view>
		<view class="info-item">
			<text class="label">统一社会信用代码:</text>
			<text class="value">522516416985</text>
		</view>
		<view class="info-item">
			<text class="label">库区性质:</text>
			<text class="value">民营企业</text>
		</view>
		<view class="info-item">
			<text class="label">库区地址:</text>
			<text class="value">天津市静海区</text>
		</view>
		<view class="info-item">
			<text class="label">库区负责人:</text>
			<text class="value">张三</text>
		</view>
		<view class="info-item">
			<text class="label">库区联系方式:</text>
			<text class="value">15139959459</text>
		</view>
	</view>
	<view class="base-info-box">
		<view class="info-item">
			<text class="label">占地面积(m²):</text>
			<text class="value">15000</text>
		</view>
		<view class="info-item">
			<text class="label">经度:</text>
			<text class="value">43.2</text>
		</view>
		<view class="info-item">
			<text class="label">纬度:</text>
			<text class="value">25.5</text>
		</view>
		<view class="info-item">
			<text class="label">库区图:</text>
			<image class="kqt-image" src="@/static/tp.png"></image>
		</view>
	</view>
</view>

</template>

<script setup>
	import {
		ref
	} from 'vue';

	// 示例数据
	const warehouseData = {
		name: '天津利达粮油库区',
		company: '天津利达粮油有限公司',
		creditCode: '522516416985',
		nature: '民营企业',
		address: '天津市静海区',
		contactPerson: '张三',
		contactNumber: '15139959459',
		area: '15000',
		longitude: '43.2',
		latitude: '25.5'
	};
</script>

<style lang="scss" scoped>
	.page {
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.header {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #f8f8f8;
	}

	.title {
		font-size: 36rpx;
		margin-left: 20rpx;
	}

	.content {
		flex: 1;
		padding: 20rpx;
	}

	.base-info-box {
		background: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 40rpx;
		padding: 0px 20rpx;
	}

	.info-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #e5e9ed;

		.kqt-image {
			max-width: 50%;
			height: 200rpx;
		}
	}

	.info-item:last-child {
		border: 0 none;
	}

	.label {
		font-weight: bold;
		color: #777777;
	}

	.value {
		flex: 1;
		text-align: right;
		color: #0f2239;
		font-weight: 600;
	}

	.image {
		width: 200rpx;
		height: 200rpx;
	}
</style>