You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
295 lines
5.9 KiB
295 lines
5.9 KiB
<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>
|