109 lines
2.3 KiB
Vue
109 lines
2.3 KiB
Vue
<!-- 较高的盒子组件 -->
|
||
<template>
|
||
<view class="care_box">
|
||
<!-- 添加按钮 -->
|
||
<view class="box_img">
|
||
<img src="../../static/images/catgroup.png" alt="" srcset="" class="img_icon">
|
||
|
||
</view>
|
||
<view class="box_content">
|
||
<view class="con_title">
|
||
添加我的宠物
|
||
</view>
|
||
<view class="con_sub">
|
||
<view class="sub_item">
|
||
补充品种
|
||
</view>
|
||
<view>
|
||
补充生日
|
||
</view>
|
||
</view>
|
||
<view class="con_content">
|
||
<!-- <view>
|
||
上次洗护：-
|
||
</view> -->
|
||
<view>
|
||
上次洗护时间：-
|
||
</view>
|
||
</view>
|
||
<nut-button size="small">添加宠物</nut-button>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
|
||
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
// page {
|
||
// --nut-button-default-bg-color: linear-gradient(90deg, #FFCD35 0%, #FFDE5E 100%);
|
||
// --nut-button-small-height: 60rpx;
|
||
// --nut-button-small-line-height: 60rpx;
|
||
// --nut-button-border-width: 0rpx;
|
||
// --nut-button-small-font-size: 28rpx;
|
||
// --nut-button-default-color: #312D22;
|
||
// }
|
||
|
||
.care_box {
|
||
--nut-button-default-bg-color: linear-gradient(90deg, #FFCD35 0%, #FFDE5E 100%);
|
||
--nut-button-small-height: 60rpx;
|
||
--nut-button-small-line-height: 60rpx;
|
||
--nut-button-border-width: 0rpx;
|
||
--nut-button-small-font-size: 28rpx;
|
||
--nut-button-default-color: #312D22;
|
||
width: 702rpx;
|
||
// height: 278rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||
border: 1rpx solid #FFCD35;
|
||
box-sizing: border-box;
|
||
padding: 24rpx;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
|
||
.box_img {
|
||
height: 96rpx;
|
||
width: 96rpx;
|
||
margin-right: 12rpx;
|
||
border-radius: 50%;
|
||
|
||
.img_icon {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.box_content {
|
||
display: flex;
|
||
flex-flow: column nowrap;
|
||
|
||
.con_title {
|
||
font-size: $uni-font-size-title;
|
||
color: $uni-text-color;
|
||
font-weight: 500;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.con_sub {
|
||
font-size: $uni-font-size-base;
|
||
color: $uni-text-color-grey;
|
||
margin-bottom: 10rpx;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
|
||
.sub_item {
|
||
margin-right: 16rpx;
|
||
}
|
||
}
|
||
|
||
.con_content {
|
||
font-size: $uni-font-size-base;
|
||
color: $uni-text-color;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
}
|
||
}
|
||
</style> |