pet-front/otherPages/orderTakingManage/pet/detail.vue

<template>
	<!-- <div>宠物信息页 </div> -->
	<view class="box">
		<view class="top box-size">
			<view class="form-title">
				宠物头像
			</view>
			<view class="img">
				<image
					src="https://k.sinaimg.cn/n/sinakd20118/751/w690h861/20240406/8eda-d4d56e3bface126bd5806ff981a09314.jpg/w700d1q75cms.jpg"
					mode="" style="width: 157rpx;height: 157rpx;" :style="{borderRadius:'100rpx'}"></image>
				<!-- <view class="">
					点击更换头像
					<view class="top_item">
						<image src="/static/images/tabBar/Group 1000001460@2x.png" mode=""
							style="width: 55rpx;height: 55rpx;" :style="{borderRadius:'50rpx'}"></image>
					</view>
				</view> -->
			</view>
		</view>
		<view class="information">
			<view class="form-title">
				宠物基本信息
			</view>
			<view class="information_item box-size margin_top_3%">
				<view class="level name box-size pad_4">
					昵称
					<!-- <input type="text" placeholder="请输入宠物名字" /> -->
					<view class="item_">
						小咪
					</view>
				</view>
				<view class="line1">
				</view>
				<view class="level name box-size pad_4">
					性别
					<!-- <view>
						<up-picker :show="show" :columns="columns"></up-picker>
						<up-button @click="show = true">请选择</up-button>
					</view> -->
					<view class="item_">
						女生
					</view>
				</view>
				<view class="line1">
				</view>
				<view class="level name box-size pad_4">
					品种
					<view class="item_">
						中华田园猫
					</view>
				</view>
				<view class="line1">
				</view>
				<view class="level name box-size pad_4">
					出生年月
					<view class="item_">
						2022.12
					</view>
				</view>
				<view class="line1">
				</view>
				<view class="level name box-size pad_4">
					体重
					<view class="item_">
						中型(10~20KG)
					</view>
				</view>
				<view class="line1">
				</view>
				<view class="level name box-size pad_4">
					性格
					<view class="item_">
						活泼开朗，比较顽皮，对陌生人警惕性高
					</view>
				</view>
			</view>
		</view>
		<view class="information">
			<view class="form-title">
				宠物健康情况
			</view>
			<view class="information_item box-size margin_top_3% item">
				<view class="level name box-size pad_4">
					疫苗
					<!-- <input type="text" placeholder="请输入宠物名字" /> -->
					<view class="item_">
						有免疫史
					</view>
				</view>
				<view class="line1">
				</view>
				<view class="level name box-size pad_4">
					驱虫
					<!-- <view>
						<up-picker :show="show" :columns="columns"></up-picker>
						<up-button @click="show = true">请选择</up-button>
					</view> -->
					<view class="item_">
						未驱虫
					</view>
				</view>
				<view class="line1">
				</view>
				<view class="level name box-size pad_4">
					绝育
					<view class="item_">
						已绝育
					</view>
				</view>
				<view class="line1">
				</view>
				<view class="level name box-size pad_4">
					健康
				</view>
			</view>
		</view>
		<view class="container box-size">
			<view class="container_item level">
				<view class="icon" :style="{borderRadius:'30rpx'}">
					<!-- <up-icon name="checkbox-mark" color="#FFFFFF" size="40"></up-icon> -->
				</view>
				身体健康，无异常
			</view>
			<view class="container_item level">
				<view class="icon_" :style="{borderRadius:'30rpx'}">
					<!-- <up-icon name="checkbox-mark" color="#FFFFFF" size="40"></up-icon> -->
				</view>
				近三个月有做过手术
			</view>
			<view class="bottom box-size" :style="{borderRadius:'8rpx'}">
				右腿骨折，右眼有轻微白内障
			</view>
		</view>
	</view>
</template>

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

	// const show = ref(false);
	// const columns = reactive([
	// 	['猫', '狗']
	// ]);
</script>

<style lang="scss">
	.box {
		width: 100vw;
		height: 100vh;

		.top {
			width: 100vw;
			height: 300rpx;
			background-color: #FFFFFF;
			padding: 0 1%;


			.img {
				width: 165rpx;
				height: 165rpx;
				// background-color: pink;
				color: #7D8196;
				font-size: 28rpx;
				margin: 1% 39%;
				display: grid;
				jplace-items: center;
				// position: relative;

				// .top_item {
				// 	position: absolute;
				// 	top: 100rpx;
				// 	left: 100rpx;
				// }
			}
		}

		.item {
			height: 360rpx !important;
		}

		.information {
			width: 100vw;
			height: auto;
			background-color: #FFFFFF;
			margin-top: 17rpx;
			padding: 0 1%;

			.information_item {
				width: 100vw;
				height: 550rpx;
				font-size: 30rpx;
				display: grid;
				justify-content: space-around;

				.item_ {
					width: auto;
					height: 40rpx;
				}

				.name {
					width: 100vw;
					height: 40rpx;
					justify-content: space-between;

					// .name input {
					// 	width: 50rpx;
					// 	background-color: #FFFFFF;
					// }
				}

				// .sex {
				// 	width: 200rpx;
				// 	height: 40rpx;
				// 	background-color: #7D8196;
				// }

				.line1 {
					position: relative;
					margin-bottom: 30rpx;

					&::before {
						position: absolute;
						top: 5rpx;
						left: 17rpx;
						content: "";
						width: 706rpx;
						height: 0.5rpx;
						background-color: #EFEFEF;
						// background-color: red;
					}
				}
			}


		}

		.container {
			width: 100vw;
			height: 500rpx;
			background-color: #FFF4E4;
			padding: 3% 3% 5% 5%;
			font-size: 30rpx;

			.container_item {
				width: auto;
				height: 40rpx;
				margin-bottom: 20rpx;

				.icon {
					width: 40rpx;
					height: 40rpx;
					background-color: #FFBF60;
					margin-right: 15rpx;
				}

				.icon_ {
					width: 38rpx;
					height: 38rpx;
					border: 1rpx solid gray;
					background-color: #FFF;
					margin-right: 15rpx;
				}
			}

			.bottom {
				width: 680rpx;
				height: 80rpx;
				background-color: #FFFFFF;
				padding-left: 2%;
				border: 1rpx solid #FFBF60;
				line-height: 80rpx;
			}
		}
	}

	.box-size {
		box-sizing: border-box;
	}

	.level {
		display: flex;
	}

	.pad_4 {
		padding: 0 4%;
	}

	.margin_top_3 {
		margin-top: 3%;
	}
</style>