equipment-rental-mini/component/LayoutRow.vue

<template>
	<view class="layout-row">
		<u-row
			justify="space-between"
			gutter="10">
			 <u-col span="4">
				<view class="demo-layout">{{rowTitle?rowTitle:""}}</view>
			</u-col>
			<u-col span="8">
				<view class="demo-layout2" v-if="rowTitle==='设备状态'" :style="{color:`${rowValue==='可借出'?'#19be6b':rowValue==='已借出'?'#fa3534':'#ff9900'}`}">
					<i class="iconfont icon-yuandian"></i>
					<text>{{rowValue?rowValue:""}}</text>
				</view>
				<view class="demo-layout" v-else>{{rowValue?rowValue:""}}</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				// rowTitle:"存放地点",
				// rowValue:"222"
			}
		},
		props: {
		    rowTitle: { // 接收父组件传入值
		        type: String || "",
		        default: ""
		    },
			rowValue: { // 接收父组件传入值
			    type: String || "",
			    default: ""
			},
		 }
	}
</script>

<style lang="scss">
	.layout-row{
		border-top: 1rpx solid #d6d7d9;
		padding: 20rpx 0 ;
	}
	.demo-layout {
		height: 25px;
		box-sizing: border-box;
		// padding: 0 10rpx;
	}
	.demo-layout2 {
		height: 25px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		// padding: 0 10rpx;
	}
</style>