xt / xt-ac · Commits

Go to a project

Commit 47bd14ed5e31ac58d4ad84edb3aa78cccbe06ce5

Authored by zhangyan
1 parent 743b09e4
build: skipped

no message

Inline Side-by-side
Showing 14 changed files with 240 additions and 57 deletions
@@ -77,7 +77,7 @@ @@ -77,7 +77,7 @@
77 background:#353535; 77 background:#353535;
78 } 78 }
79 .bg-orange{ 79 .bg-orange{
80 - background:#fe9401; 80 + background:#ffc16a;
81 } 81 }
82 82
83 /*flex布局*/ 83 /*flex布局*/
@@ -3,17 +3,17 @@ Component({ @@ -3,17 +3,17 @@ Component({
3 list:[ 3 list:[
4 { 4 {
5 id:1, 5 id:1,
6 - title:'精选', 6 + title:'寄养所',
7 isactive:true 7 isactive:true
8 }, 8 },
9 { 9 {
10 id:2, 10 id:2,
11 - title:'组队', 11 + title:'医院',
12 isactive:false 12 isactive:false
13 }, 13 },
14 { 14 {
15 id:3, 15 id:3,
16 - title:'榜单', 16 + title:'美容',
17 isactive:false 17 isactive:false
18 } 18 }
19 ] 19 ]
1 <view class="top-tab flex-cm bg-white fixed left top"> 1 <view class="top-tab flex-cm bg-white fixed left top">
2 <view class="flex-lm"> 2 <view class="flex-lm">
3 <block wx:for="{{list}}"> 3 <block wx:for="{{list}}">
4 - <view class="gray-deep-font font32r {{item.isactive==true ? 'orange-font border-bottom' : ''}} top-tab-block flex-cm">{{item.title}}</view> 4 + <view class="black-font font32r {{item.isactive==true ? 'orange-font border-bottom' : ''}} top-tab-block flex-cm">{{item.title}}</view>
5 </block> 5 </block>
6 </view> 6 </view>
7 </view> 7 </view>
1 @import '../../app.wxss' 1 @import '../../app.wxss'
2 .top-tab{ 2 .top-tab{
3 width:100%; 3 width:100%;
4 - height:90rpx; 4 + height:80rpx;
5 padding:0 40rpx; 5 padding:0 40rpx;
6 box-sizing:border-box; 6 box-sizing:border-box;
7 - /*box-shadow:0 2px 10px rgba(254,148,1,0.2);*/  
8 z-index:99; 7 z-index:99;
  8 + box-shadow:0 0 5px rgba(0,0,0,.1);
9 } 9 }
10 .top-tab-block{ 10 .top-tab-block{
11 padding:0 24rpx; 11 padding:0 24rpx;
12 - height:86rpx; 12 + height:76rpx;
13 box-sizing:border-bottom; 13 box-sizing:border-bottom;
14 margin:0 35rpx; 14 margin:0 35rpx;
15 } 15 }
@@ -43,7 +43,8 @@ Page({ @@ -43,7 +43,8 @@ Page({
43 menubottom:650, 43 menubottom:650,
44 team:true, 44 team:true,
45 sort:true, 45 sort:true,
46 - home:false 46 + home:false,
  47 + pets:[1,2,3,4,5,6]
47 48
48 49
49 }, 50 },
@@ -28,44 +28,105 @@ @@ -28,44 +28,105 @@
28 </view> 28 </view>
29 <view style="height:20rpx;background:#f7f7f7;"></view> 29 <view style="height:20rpx;background:#f7f7f7;"></view>
30 <view class="topic flex-vl"> 30 <view class="topic flex-vl">
31 - <swiper display-multiple-items="2" next-margin="80">  
32 - <swiper-item>  
33 - <view class="pet-block">  
34 - <image src="/pages/image/topic3.jpg" class="topic-image"></image>  
35 - <view class="white-font font28r font-siny pet-mask flex-cm">#萌宠时尚秀</view>  
36 - </view>  
37 - </swiper-item>  
38 - <swiper-item>  
39 - <view class="pet-block">  
40 - <image src="/pages/image/topic2.jpg" class="topic-image"></image>  
41 - <view class="white-font font28r font-siny pet-mask flex-cm">#萌宠照片集</view>  
42 - </view>  
43 - </swiper-item>  
44 - </swiper> 31 + <view class="flex-lr block-title">
  32 + <view class="flex-lm">
  33 + <view class="block-line bg-orange"></view>
  34 + <view class="black-font font-bold font36r">热门活动</view>
  35 + </view>
  36 + <view class="flex-rr">
  37 + <view class="gray-font font24r">查看更多</view>
  38 + <image src="/pages/image/click.svg" class="click-icon"></image>
  39 + </view>
  40 + </view>
  41 + <view class="flex-rs">
  42 + <view class="pet-block">
  43 + <image src="/pages/image/topic3.jpg" class="topic-image"></image>
  44 + <view class="white-font font28r font-siny pet-mask flex-cm">#萌宠时尚秀</view>
  45 + </view>
  46 + <view class="pet-block">
  47 + <image src="/pages/image/topic2.jpg" class="topic-image"></image>
  48 + <view class="white-font font28r font-siny pet-mask flex-cm">#萌宠照片集</view>
  49 + </view>
  50 + <view class="pet-block">
  51 + <image src="/pages/image/topic1.jpg" class="topic-image"></image>
  52 + <view class="white-font font28r font-siny pet-mask flex-cm">#萌宠颜值大比拼</view>
  53 + </view>
  54 + <view class="pet-block">
  55 + <image src="http://qn.colorcun.com/b.png" class="topic-image"></image>
  56 + <view class="white-font font28r font-siny pet-mask flex-cm">#萌宠运动会</view>
  57 + </view>
  58 + </view>
  59 +</view>
  60 +<view style="height:20rpx;background:#f7f7f7;"></view>
  61 +<view class="pet-man">
  62 + <view class="flex-lr block-title">
  63 + <view class="flex-lm">
  64 + <view class="block-line bg-orange"></view>
  65 + <view class="black-font font-bold font36r">精选宠圈</view>
  66 + </view>
  67 + <view class="flex-rr">
  68 + <view class="gray-font font24r">查看更多</view>
  69 + <image src="/pages/image/click.svg" class="click-icon"></image>
  70 + </view>
  71 + </view>
  72 + <view class="pet-man-list flex-rs">
  73 + <swiper display-multiple-items="2" next-margin="90rpx" indicator-dots="true" indicator-active-color="#fe9401">
  74 + <block wx:for="{{pets}}">
  75 + <swiper-item>
  76 + <view class="pet-man-block">
  77 + <image src="http://qn.colorcun.com/b.png" class="pet-man-petimg"></image>
  78 + <view class="pet-man-info flex-vc">
  79 + <image src="/pages/image/topic3.jpg" class="pet-man-headimg"></image>
  80 + <view class="black-font font30r font-siny" style="margin-top:-18rpx;">爱喵铲屎官</view>
  81 + <view class="pet-man-care flex-cm">
  82 + <image src="/pages/image/collection.svg" class="pet-collection"></image>
  83 + <view class="gray-deep-font font24r">12</view>
  84 + </view>
  85 + </view>
  86 + </view>
  87 + </swiper-item>
  88 + </block>
  89 + </swiper>
  90 + </view>
45 </view> 91 </view>
46 <view style="height:20rpx;background:#f7f7f7;"></view> 92 <view style="height:20rpx;background:#f7f7f7;"></view>
47 <view class="best-info"> 93 <view class="best-info">
48 - <view class="best-info-title flex-cm"> 94 + <!--<view class="best-info-title flex-cm">
49 <view class="best-line bg-black"></view> 95 <view class="best-line bg-black"></view>
50 <view class="best-react bg-black"></view> 96 <view class="best-react bg-black"></view>
51 <view class="black-font font34r font-siny" style="margin:0 30rpx;">精选</view> 97 <view class="black-font font34r font-siny" style="margin:0 30rpx;">精选</view>
52 <view class="best-react bg-black"></view> 98 <view class="best-react bg-black"></view>
53 <view class="best-line bg-black"></view> 99 <view class="best-line bg-black"></view>
  100 + </view>-->
  101 + <view class="flex-lr block-title">
  102 + <view class="flex-lm">
  103 + <view class="block-line bg-orange"></view>
  104 + <view class="black-font font-bold font36r">附近组队遛</view>
  105 + </view>
  106 + <view class="flex-rr">
  107 + <view class="gray-font font24r">查看更多</view>
  108 + <image src="/pages/image/click.svg" class="click-icon"></image>
  109 + </view>
54 </view> 110 </view>
55 <view class="pet-list"> 111 <view class="pet-list">
56 <block wx:for="{{blocks}}"> 112 <block wx:for="{{blocks}}">
57 - <view class="pet-list-single flex-lr">  
58 - <view><image class="pet-image" src="/pages/image/topic2.jpg" mode="scaleToFill"></image></view> 113 + <view class="pet-list-single flex-lt">
  114 + <view><image class="pet-image" src="http://qn.colorcun.com/b.png" mode="scaleToFill"></image></view>
59 <view class="pet-info"> 115 <view class="pet-info">
60 - <!--<image class="pet-head" src="/pages/image/topic2.jpg"></image>-->  
61 - <view class="black-font font28r font-more-two" style="width:450rpx;">作为一只金毛mm,保持傲娇绝对是她的生活状态！</view>  
62 - <view class="flex-lr" style="margin-top:26rpx;">  
63 - <view class="gray-font font24r">2018-10-24 16:45</view>  
64 - <view class="flex-rr">  
65 - <image src="/pages/image/collection.svg" class="collect-icon"></image>  
66 - <view class="gray-deep-font font24r">23</view>  
67 - </view> 116 + <view class="black-font font32r font-bold">#组队一起遛，组队一起遛</view>
  117 + <view class="gray-deep-font font26r font-siny flex-lr" style="margin-top:14rpx;">唐城遗址公园<view>距离<text class="orange-font font30r">500</text>m</view></view>
  118 + <view class="gray-deep-font font26r" style="margin-top:14rpx;">周四 11-01 16:40</view>
  119 + <view class="flex-lm" style="margin-top:20rpx;">
  120 + <block wx:for="{{pets}}">
  121 + <block wx:if="{{index<4}}">
  122 + <image src="/pages/image/topic3.jpg" style="width:50rpx;height:50rpx;border-radius:50%;margin-right:10rpx;"></image>
  123 + </block>
  124 + </block>
  125 + <block wx:if="{{pets.length>4}}">
  126 + <view class="gray-deep-font font24r font-siny">等{{pets.length}}人加入</view>
  127 + </block>
68 </view> 128 </view>
  129 + <!--<view class="pet-join orange-font font28r flex-cm">参与</view>-->
69 </view> 130 </view>
70 </view> 131 </view>
71 </block> 132 </block>
@@ -56,27 +56,21 @@ @@ -56,27 +56,21 @@
56 56
57 .topic{ 57 .topic{
58 width:100%; 58 width:100%;
59 - margin:40rpx 0;  
60 -}  
61 -.topic swiper{  
62 - width:100%;  
63 - padding-left:30rpx;  
64 - box-sizing:border-box;  
65 - height:190rpx;  
66 -}  
67 -.topic swiper-item{  
68 - width:360rpx!important; 59 + margin-bottom:20rpx;
69 } 60 }
70 .pet-block{ 61 .pet-block{
71 width:330rpx; 62 width:330rpx;
72 - height:190rpx; 63 + height:220rpx;
73 position:relative; 64 position:relative;
74 - border-radius:14rpx; 65 + border-radius:8rpx;
75 overflow:hidden; 66 overflow:hidden;
  67 + margin-left:30rpx;
  68 + margin-bottom:30rpx;
  69 + box-shadow:0 0 5px rgba(0,0,0,.1);
76 } 70 }
77 .topic-image{ 71 .topic-image{
78 width:330rpx; 72 width:330rpx;
79 - height:190rpx; 73 + height:100%;
80 box-shadow:0 0 5px rgba(0,0,0,.4); 74 box-shadow:0 0 5px rgba(0,0,0,.4);
81 margin-right:30rpx; 75 margin-right:30rpx;
82 } 76 }
@@ -107,17 +101,33 @@ @@ -107,17 +101,33 @@
107 } 101 }
108 .pet-list-single{ 102 .pet-list-single{
109 width:690rpx; 103 width:690rpx;
110 - height:220rpx; 104 + min-height:220rpx;
  105 + padding:30rpx 0;
  106 + box-sizing:border-box;
111 margin:0 auto; 107 margin:0 auto;
112 border-bottom:1px solid #efeef3; 108 border-bottom:1px solid #efeef3;
113 } 109 }
114 .pet-image{ 110 .pet-image{
115 - width:160rpx; 111 + width:200rpx;
116 height:160rpx; 112 height:160rpx;
117 } 113 }
118 .pet-info{ 114 .pet-info{
119 - padding:20rpx 30rpx; 115 + width:490rpx;
  116 + padding-left:30rpx;
120 box-sizing:border-box; 117 box-sizing:border-box;
  118 + position:relative;
  119 +}
  120 +.pet-join{
  121 + width:120rpx;
  122 + height:50rpx;
  123 + border:1px solid #fe9401;
  124 + color:#fe9401;
  125 + box-sizing:border-box;
  126 + border-radius:25rpx;
  127 + position:absolute;
  128 + right:20rpx;
  129 + top:50%;
  130 + margin-top:-25rpx;
121 } 131 }
122 .collect-icon{ 132 .collect-icon{
123 width:30rpx; 133 width:30rpx;
@@ -167,4 +177,60 @@ @@ -167,4 +177,60 @@
167 top:0; 177 top:0;
168 transform:scale(0); 178 transform:scale(0);
169 transition:transform 0.1s ease 0.2s,right 0.2s ease 0.1s,top 0.2s ease 0.1s; 179 transition:transform 0.1s ease 0.2s,right 0.2s ease 0.1s,top 0.2s ease 0.1s;
  180 +}
  181 +.block-title{
  182 + width:100%;
  183 + height:120rpx;
  184 + padding:0 15rpx;
  185 + box-sizing:border-box;
  186 +}
  187 +.block-line{
  188 + width:6rpx;
  189 + height:44rpx;
  190 + margin-right:15rpx;
  191 +}
  192 +.pet-man{
  193 +
  194 +}
  195 +.pet-man-list swiper{
  196 + width:100%;
  197 + height:450rpx;
  198 + margin-bottom:20rpx;
  199 +}
  200 +.pet-man-list swiper-item{
  201 + width:330rpx!imporant;
  202 + overflow:auto!imporant;
  203 + border-radius:8rpx;
  204 +}
  205 +.pet-man-block{
  206 + width:300rpx;
  207 + margin-left:30rpx;
  208 + box-shadow:0 0 5px rgba(0,0,0,.1);
  209 + padding-bottom:36rpx;
  210 + border-radius:8rpx;
  211 + margin-bottom:30rpx;
  212 + overflow:hidden;
  213 +}
  214 +.pet-man-petimg{
  215 + width:100%;
  216 + height:170rpx;
  217 +}
  218 +.pet-man-headimg{
  219 + width:76rpx;
  220 + height:76rpx;
  221 + border-radius:50%;
  222 + position:relative;
  223 + top:-38rpx;
  224 +}
  225 +.pet-collection{
  226 + width:30rpx;
  227 + height:30rpx;
  228 + margin-right:20rpx;
  229 +}
  230 +.pet-man-care{
  231 + width:160rpx;
  232 + height:50rpx;
  233 + border:1px solid #ccc;
  234 + border-radius:30rpx;
  235 + margin-top:24rpx;
170 } 236 }
1 <view class="person-banner"> 1 <view class="person-banner">
2 - <image src="/pages/image/6.jpg" class="person-bannerimg"></image> 2 + <image src="http://qn.colorcun.com/b.png" class="person-bannerimg"></image>
3 <view class="picture-list"> 3 <view class="picture-list">
4 <view class="flex-lt picture-list-block"> 4 <view class="flex-lt picture-list-block">
5 <view class="gray-font font32r" style="width:110rpx;padding-top:20rpx;">今天</view> 5 <view class="gray-font font32r" style="width:110rpx;padding-top:20rpx;">今天</view>
6 - <image src="/pages/image/1.jpg" class="picture-head"></image> 6 + <image src="/pages/image/topic2.jpg" class="picture-head"></image>
7 <view class="gray-deep-font font28r" style="width:410rpx;line-height:1.5;">滴滴都睡着了，我还饿着肚子没心情睡觉，麻麻把饭端过来为我呀，人家好饿</view> 7 <view class="gray-deep-font font28r" style="width:410rpx;line-height:1.5;">滴滴都睡着了，我还饿着肚子没心情睡觉，麻麻把饭端过来为我呀，人家好饿</view>
8 </view> 8 </view>
9 <view class="flex-lt picture-list-block"> 9 <view class="flex-lt picture-list-block">
@@ -11,7 +11,7 @@ @@ -11,7 +11,7 @@
11 <view>28</view> 11 <view>28</view>
12 <view class="font28r" style="margin-top:10rpx;">6月</view> 12 <view class="font28r" style="margin-top:10rpx;">6月</view>
13 </view> 13 </view>
14 - <image src="/pages/image/1.jpg" class="picture-head"></image> 14 + <image src="/pages/image/topic3.jpg" class="picture-head"></image>
15 <view class="gray-deep-font font28r" style="width:410rpx;line-height:1.5;">滴滴都睡着了，我还饿着肚子没心情睡觉，麻麻把饭端过来为我呀，人家好饿</view> 15 <view class="gray-deep-font font28r" style="width:410rpx;line-height:1.5;">滴滴都睡着了，我还饿着肚子没心情睡觉，麻麻把饭端过来为我呀，人家好饿</view>
16 </view> 16 </view>
17 </view> 17 </view>
1 { 1 {
2 "backgroundTextStyle":"light", 2 "backgroundTextStyle":"light",
3 - "navigationBarBackgroundColor": "#f7f7f7", 3 + "navigationBarBackgroundColor": "#ffffff",
4 "navigationBarTextStyle":"black", 4 "navigationBarTextStyle":"black",
  5 + "navigationBarTitleText":"服务",
5 "usingComponents": { 6 "usingComponents": {
  7 + "toptab":"../../components/toptab/toptab",
6 "tabbar":"../../components/bottomtab/bottomtab" 8 "tabbar":"../../components/bottomtab/bottomtab"
7 } 9 }
8 } 10 }
1 -<view class="seller-server flex-lr"> 1 +<toptab></toptab>
  2 +<!--<view class="seller-server flex-lr">
2 <block wx:for="{{sellericons}}"> 3 <block wx:for="{{sellericons}}">
3 <view class="flex-vc"> 4 <view class="flex-vc">
4 <image src="{{item.isactive==true ? item.iconactive : item.icon}}" class="seller-icon" style="width:{{item.widhei}}rpx;height:{{item.widhei}}rpx;margin-bottom:{{item.marbottom}}rpx;"></image> 5 <image src="{{item.isactive==true ? item.iconactive : item.icon}}" class="seller-icon" style="width:{{item.widhei}}rpx;height:{{item.widhei}}rpx;margin-bottom:{{item.marbottom}}rpx;"></image>
5 <view class="{{item.isactive==true ? 'orange-font' : 'gray-deep-font'}} font28r font-siny">{{item.title}}</view> 6 <view class="{{item.isactive==true ? 'orange-font' : 'gray-deep-font'}} font28r font-siny">{{item.title}}</view>
6 </view> 7 </view>
7 </block> 8 </block>
  9 +</view>-->
  10 +<view class="banner">
  11 + <image src="/pages/image/seller-detail.jpg" class="banner-img"></image>
8 </view> 12 </view>
9 <view class="seller-list"> 13 <view class="seller-list">
10 <view class="best-info-title flex-cm"> 14 <view class="best-info-title flex-cm">
@@ -9,6 +9,14 @@ @@ -9,6 +9,14 @@
9 height:40rpx; 9 height:40rpx;
10 margin-bottom:10rpx; 10 margin-bottom:10rpx;
11 } 11 }
  12 +.banner{
  13 + margin-top:80rpx;
  14 + margin-bottom:40rpx;
  15 +}
  16 +.banner-img{
  17 + width:100%;
  18 + height:400rpx;
  19 +}
12 .best-info-title{ 20 .best-info-title{
13 margin:40rpx 0; 21 margin:40rpx 0;
14 } 22 }
@@ -19,5 +19,6 @@ Page({ @@ -19,5 +19,6 @@ Page({
19 isactive:false, 19 isactive:false,
20 }, 20 },
21 ], 21 ],
  22 + pets:[1,2,3,4,5,6]
22 } 23 }
23 }) 24 })
@@ -8,7 +8,7 @@ @@ -8,7 +8,7 @@
8 </view> 8 </view>
9 <view class="team-list bg-white"> 9 <view class="team-list bg-white">
10 <block wx:for="{{blocks}}"> 10 <block wx:for="{{blocks}}">
11 - <view class="team-block flex-lm"> 11 + <!--<view class="team-block flex-lm">
12 <image src="../image/topic2.jpg" class="dog-headimg"></image> 12 <image src="../image/topic2.jpg" class="dog-headimg"></image>
13 <view class="flex-lr team-info"> 13 <view class="flex-lr team-info">
14 <view class="flex-vl"> 14 <view class="flex-vl">
@@ -20,6 +20,25 @@ @@ -20,6 +20,25 @@
20 <image src="/pages/image/click.svg" class="click-icon"></image> 20 <image src="/pages/image/click.svg" class="click-icon"></image>
21 </view> 21 </view>
22 </view> 22 </view>
  23 + </view>-->
  24 + <view class="pet-list-single flex-lt">
  25 + <view><image class="pet-image" src="http://qn.colorcun.com/b.png" mode="scaleToFill"></image></view>
  26 + <view class="pet-info">
  27 + <view class="black-font font32r font-bold" style="width:450rpx;">#组队一起遛，组队一起遛</view>
  28 + <view class="gray-deep-font font26r font-siny flex-lr" style="margin-top:14rpx;">唐城遗址公园<view>距离<text class="orange-font font30r">500</text>m</view></view>
  29 + <view class="gray-deep-font font26r" style="margin-top:14rpx;">周四 11-01 16:40</view>
  30 + <view class="flex-lm" style="margin-top:20rpx;">
  31 + <block wx:for="{{pets}}">
  32 + <block wx:if="{{index<4}}">
  33 + <image src="/pages/image/topic3.jpg" style="width:50rpx;height:50rpx;border-radius:50%;margin-right:10rpx;"></image>
  34 + </block>
  35 + </block>
  36 + <block wx:if="{{pets.length>4}}">
  37 + <view class="gray-deep-font font24r font-siny">等{{pets.length}}人加入</view>
  38 + </block>
  39 + </view>
  40 + <!--<view class="pet-join orange-font font28r flex-cm">参与</view>-->
  41 + </view>
23 </view> 42 </view>
24 </block> 43 </block>
25 <view class="gray-font font26r flex-cm" style="padding:20rpx 0;">已经到底啦~</view> 44 <view class="gray-font font26r flex-cm" style="padding:20rpx 0;">已经到底啦~</view>
@@ -9,6 +9,7 @@ page{ @@ -9,6 +9,7 @@ page{
9 .team-banner{ 9 .team-banner{
10 display:block; 10 display:block;
11 width:690rpx; 11 width:690rpx;
  12 + height:400rpx;
12 margin:0 auto; 13 margin:0 auto;
13 margin-top:10rpx; 14 margin-top:10rpx;
14 border-radius:10rpx; 15 border-radius:10rpx;
@@ -22,7 +23,7 @@ page{ @@ -22,7 +23,7 @@ page{
22 border-radius:10rpx; 23 border-radius:10rpx;
23 padding:0 30rpx; 24 padding:0 30rpx;
24 box-sizing:border-box; 25 box-sizing:border-box;
25 - /*box-shadow:0 0 5px rgba(0,0,0,.1);*/ 26 + box-shadow:0 0 5px rgba(0,0,0,.08);
26 } 27 }
27 .search-block-single{ 28 .search-block-single{
28 height:50rpx; 29 height:50rpx;
@@ -36,6 +37,7 @@ page{ @@ -36,6 +37,7 @@ page{
36 border-radius:10rpx; 37 border-radius:10rpx;
37 margin-top:20rpx; 38 margin-top:20rpx;
38 margin-bottom:40rpx; 39 margin-bottom:40rpx;
  40 + box-shadow:0 0 5px rgba(0,0,0,.08);
39 } 41 }
40 .team-block{ 42 .team-block{
41 width:100%; 43 width:100%;
@@ -55,4 +57,23 @@ page{ @@ -55,4 +57,23 @@ page{
55 width:540rpx; 57 width:540rpx;
56 padding-left:20rpx; 58 padding-left:20rpx;
57 box-sizing:border-box; 59 box-sizing:border-box;
  60 +}
  61 +.pet-list-single{
  62 + width:690rpx;
  63 + min-height:220rpx;
  64 + padding:30rpx 0;
  65 + box-sizing:border-box;
  66 + margin:0 auto;
  67 + border-bottom:1px solid #efeef3;
  68 +}
  69 +.pet-image{
  70 + width:200rpx;
  71 + height:160rpx;
  72 + margin-left:20rpx;
  73 +}
  74 +.pet-info{
  75 + width:470rpx;
  76 + padding:0 20rpx;
  77 + box-sizing:border-box;
  78 + position:relative;
58 } 79 }