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

<template>
	<!-- <div>宠物信息</div> -->
	<view class="box box-size">
		<view class="box-item box-size" :style="{borderRadius:'16rpx'}">
			<view class="level flex">
				<view class="img" :style="{borderRadius:'100rpx'}">
					<image src="" mode=""></image>
				</view>
				<view class="top">
					<view class="name level">
						<view>
							小咪
						</view>
						<view class="img_" :style="{borderRadius:'20rpx'}">
							<image src="" mode=""></image>
						</view>
					</view>
					<view>
						银渐层短毛猫 | 1岁 | 体重2kg
					</view>
				</view>
			</view>
			<view class="character box-size" :style="{borderRadius:'5rpx'}">
				性格：活泼开朗，对人友好
			</view>
			<view class="buttom" :style="{borderRadius:'27rpx'}">
				<!-- <button>查看详细信息</button> -->
				查看详细信息
			</view>
		</view>
	</view>
</template>

<script>
</script>

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

		.box-item {
			width: 710rpx;
			height: 359rpx;
			background-image: linear-gradient(to bottom, #FFF6F7, #FFFFFF);
			padding: 3% 2%;
			position: relative;

			.img {
				width: 142rpx;
				height: 142rpx;
				background-color: red;
				margin: 0 20rpx 20rpx 0;
			}

			.top {
				font-size: 28rpx;
				color: #999999;
			}

			.name {
				font-size: 30rpx;
				color: #000000;
			}

			.img_ {
				width: 35rpx;
				height: 35rpx;
				background-color: red;
				margin-left: 10rpx;
			}

			.character {
				width: 678rpx;
				height: 65rpx;
				background-color: #F9F9F9;
				// background-color: green;
				color: #999999;
				font-size: 28rpx;
				line-height: 65rpx;
				padding: 0 10rpx;
			}

			.buttom {
				width: 188rpx;
				height: 54rpx;
				border: 2rpx solid #FFBF60;
				color: #FFBF60;
				font-size: 22rpx;
				line-height: 54rpx;
				justify-content: center;
				display: grid;
				position: absolute;
				bottom: 25rpx;
				right: 25rpx;


				// .buttom buttom {
				// 	color: #FFBF60;
				// 	font-size: 22rpx;
				// 	line-height: 54rpx;
				// display: grid;
				// 	justify-content: center;
				// }
			}
		}
	}

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

	.level {
		display: flex;
	}

	.flex {
		align-items: center;
	}
</style>