<template>
	<view class="pet-page-container" :style="{width:buttonWidth}">
    <view class="pet-page-capsule-container row">
      <view class="pet-page-capsule col-4 active">
        喵喵
      </view>
      <view class="pet-page-capsule col-4">
        汪汪
      </view>
      <view class="pet-page-capsule col-4">
        其他萌宠
      </view>
    </view>
	</view>
  <view class="pet-page-group row" v-for="i in [1,2]">
    <view class="order-item row">
      <view class="item-title">
        宝贝姓名
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          58元优惠券
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title">
        宝贝品种
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          58元优惠券
        </view>
      </view>
    </view>
    <view class="order-item row">
      <view class="item-title">
        宝贝体重
      </view>
      <view class="item-content row col">
        <view class="item-content-text">
          58元优惠券
        </view>
      </view>
    </view>
  </view>
  <view class="pet-page-button row">
    <MzButton
        title="添加喵喵"
        button-color="#FFFFFF"
        font-color="#262626"
        button-width="300rpx"
        class=""
    >
    </MzButton>
  </view>
</template>

<script>
	import { imghost } from '@/config/host.js';
  import MzButton from "@/components/MzButton/Index.vue";

  export default{
		name:'PetPage',
		props:{
			title:{
				type:String,
				default:'确认'
			},
			buttonColor:{
				type:String,
				default:'#FFFFFF'
			},
			fontColor:{
				type:String,
				default:'#131313'
			},
			buttonWidth:{
				type:String,
				default:'100%'
			},
			isBackground:{
				type:Boolean,
				default:true
			},
			fontSize:{
				type:String,
				default:'30rpx',
			},
			paddingTb:{
				type:String,
				default:'15rpx',
			},
			btnStyle:{
				type:Object,
				default:{},
			},
		},
    components:{
      MzButton
    },
		data() {
			return {
				loading: true,
				buttonBackground:imghost+"/static/image/small-button-background.png",
				staticImage:{
					buttonBackground:imghost+'/static/image/small-button-background.png'
				}
			}
		},
		onLoad() {
		
		},
		methods: {
		
		}
	}
</script>

<style lang="scss">
	@import './components/index.scss';
</style>