cultivationApp/pages/leave/leaveDetail.vue

<template>
	<view class="content">
		<view class="card-d">
			<u--form labelWidth='130' :model="formData" ref="form">
				<view class="c-title">操作信息</view>
				<view class="c-box">
					<u-form-item label="耳号" borderBottom>
						<up-input  readonly type="txt"
							border="none" v-model="formData.id"></up-input>
					</u-form-item>
					<u-form-item label="所在栏舍" borderBottom>
						<up-input  readonly 
							border="none" v-model="formData.lanse"></up-input>
					</u-form-item>
					<u-form-item label="离舍类型" borderBottom >
						<up-input  readonly 
							border="none" v-model="formData.type"></up-input>
					</u-form-item>
          <u-form-item label="离舍原因" borderBottom >
          	<up-input  readonly 
          		border="none" v-model="formData.why"></up-input>
          </u-form-item>
          <u-form-item label="操作人员" borderBottom >
          	<up-input  readonly
          		border="none" v-model="formData.user"></up-input>
          </u-form-item>
          <u-form-item label="离舍时间" borderBottom >
          	<up-input   readonly
          		border="none" v-model="formData.create_time"></up-input>
          </u-form-item>
          <u-form-item label="备注" borderBottom >
          	<up-input   readonly
          		border="none" v-model="formData.notes"></up-input>
          </u-form-item>
				</view>
			</u--form>
		</view>
	</view>

</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad,
		onReady
	} from "@dcloudio/uni-app"

	const formData = reactive({
		id: "23",
		lanse: "栏舍一号",
		type: "生病",
    why: "去治疗",
		user: "张某某",
    create_time: "2023-12-22"
	})
	
</script>

<style lang='scss' scoped>
	page {
		background-color: #fffcf5;
	}

	.card-d {
		background-color: #fffcf5;

		.c-title {
			font-weight: bold;
			display: flex;
			align-items: center;
			padding: 30rpx;
			padding-bottom: 15rpx;

			&:before {
				content: '';
				display: inline-block;
				height: 0.8rem;
				width: 6rpx;
				margin-top: 0.2rem;
				margin-right: 10rpx;
				background-color: #feb048;
				border-radius: 6rpx;
			}
		}

		.c-box {
			background-color: #fff;
			padding: 20rpx;
      margin: 28rpx;
      margin-top: 0;
      border-radius: 14rpx;
			box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
		}

		.c-box-p {
			padding: 20rpx;
		}

		.btn {
			margin: 20rpx auto;
			width: 694rpx;
			height: 80rpx;
			border-radius: 80rpx;
			background-color: #feb048;
			color: #fff;
		}
	}
  
  .swiper{
    width: 654rpx;
    height: 400rpx;
    margin: 20rpx 0;
    border-radius: 14rpx;
    overflow: hidden;
    .img{
      width: 100%;
      height: 100%;
    }
  }

  :deep(.u-form-item__body){
    padding: 5rpx 0 !important;
  }
</style>