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 @@
background:#353535;
}
.bg-orange{
background:#fe9401;
background:#ffc16a;
}
/*flex布局*/
... ...
... ... @@ -3,17 +3,17 @@ Component({
list:[
{
id:1,
title:'精选',
title:'寄养所',
isactive:true
},
{
id:2,
title:'组队',
title:'医院',
isactive:false
},
{
id:3,
title:'榜单',
title:'美容',
isactive:false
}
]
... ...
<view class="top-tab flex-cm bg-white fixed left top">
<view class="flex-lm">
<block wx:for="{{list}}">
<view class="gray-deep-font font32r {{item.isactive==true ? 'orange-font border-bottom' : ''}} top-tab-block flex-cm">{{item.title}}</view>
<view class="black-font font32r {{item.isactive==true ? 'orange-font border-bottom' : ''}} top-tab-block flex-cm">{{item.title}}</view>
</block>
</view>
</view>
\ No newline at end of file
... ...
@import '../../app.wxss'
.top-tab{
width:100%;
height:90rpx;
height:80rpx;
padding:0 40rpx;
box-sizing:border-box;
/*box-shadow:0 2px 10px rgba(254,148,1,0.2);*/
z-index:99;
box-shadow:0 0 5px rgba(0,0,0,.1);
}
.top-tab-block{
padding:0 24rpx;
height:86rpx;
height:76rpx;
box-sizing:border-bottom;
margin:0 35rpx;
}
... ...
... ... @@ -43,7 +43,8 @@ Page({
menubottom:650,
team:true,
sort:true,
home:false
home:false,
pets:[1,2,3,4,5,6]
},
... ...
... ... @@ -28,44 +28,105 @@
</view>
<view style="height:20rpx;background:#f7f7f7;"></view>
<view class="topic flex-vl">
<swiper display-multiple-items="2" next-margin="80">
<swiper-item>
<view class="pet-block">
<image src="/pages/image/topic3.jpg" class="topic-image"></image>
<view class="white-font font28r font-siny pet-mask flex-cm">#萌宠时尚秀</view>
</view>
</swiper-item>
<swiper-item>
<view class="pet-block">
<image src="/pages/image/topic2.jpg" class="topic-image"></image>
<view class="white-font font28r font-siny pet-mask flex-cm">#萌宠照片集</view>
</view>
</swiper-item>
</swiper>
<view class="flex-lr block-title">
<view class="flex-lm">
<view class="block-line bg-orange"></view>
<view class="black-font font-bold font36r">热门活动</view>
</view>
<view class="flex-rr">
<view class="gray-font font24r">查看更多</view>
<image src="/pages/image/click.svg" class="click-icon"></image>
</view>
</view>
<view class="flex-rs">
<view class="pet-block">
<image src="/pages/image/topic3.jpg" class="topic-image"></image>
<view class="white-font font28r font-siny pet-mask flex-cm">#萌宠时尚秀</view>
</view>
<view class="pet-block">
<image src="/pages/image/topic2.jpg" class="topic-image"></image>
<view class="white-font font28r font-siny pet-mask flex-cm">#萌宠照片集</view>
</view>
<view class="pet-block">
<image src="/pages/image/topic1.jpg" class="topic-image"></image>
<view class="white-font font28r font-siny pet-mask flex-cm">#萌宠颜值大比拼</view>
</view>
<view class="pet-block">
<image src="http://qn.colorcun.com/b.png" class="topic-image"></image>
<view class="white-font font28r font-siny pet-mask flex-cm">#萌宠运动会</view>
</view>
</view>
</view>
<view style="height:20rpx;background:#f7f7f7;"></view>
<view class="pet-man">
<view class="flex-lr block-title">
<view class="flex-lm">
<view class="block-line bg-orange"></view>
<view class="black-font font-bold font36r">精选宠圈</view>
</view>
<view class="flex-rr">
<view class="gray-font font24r">查看更多</view>
<image src="/pages/image/click.svg" class="click-icon"></image>
</view>
</view>
<view class="pet-man-list flex-rs">
<swiper display-multiple-items="2" next-margin="90rpx" indicator-dots="true" indicator-active-color="#fe9401">
<block wx:for="{{pets}}">
<swiper-item>
<view class="pet-man-block">
<image src="http://qn.colorcun.com/b.png" class="pet-man-petimg"></image>
<view class="pet-man-info flex-vc">
<image src="/pages/image/topic3.jpg" class="pet-man-headimg"></image>
<view class="black-font font30r font-siny" style="margin-top:-18rpx;">爱喵铲屎官</view>
<view class="pet-man-care flex-cm">
<image src="/pages/image/collection.svg" class="pet-collection"></image>
<view class="gray-deep-font font24r">12</view>
</view>
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
<view style="height:20rpx;background:#f7f7f7;"></view>
<view class="best-info">
<view class="best-info-title flex-cm">
<!--<view class="best-info-title flex-cm">
<view class="best-line bg-black"></view>
<view class="best-react bg-black"></view>
<view class="black-font font34r font-siny" style="margin:0 30rpx;">精选</view>
<view class="best-react bg-black"></view>
<view class="best-line bg-black"></view>
</view>-->
<view class="flex-lr block-title">
<view class="flex-lm">
<view class="block-line bg-orange"></view>
<view class="black-font font-bold font36r">附近组队遛</view>
</view>
<view class="flex-rr">
<view class="gray-font font24r">查看更多</view>
<image src="/pages/image/click.svg" class="click-icon"></image>
</view>
</view>
<view class="pet-list">
<block wx:for="{{blocks}}">
<view class="pet-list-single flex-lr">
<view><image class="pet-image" src="/pages/image/topic2.jpg" mode="scaleToFill"></image></view>
<view class="pet-list-single flex-lt">
<view><image class="pet-image" src="http://qn.colorcun.com/b.png" mode="scaleToFill"></image></view>
<view class="pet-info">
<!--<image class="pet-head" src="/pages/image/topic2.jpg"></image>-->
<view class="black-font font28r font-more-two" style="width:450rpx;">作为一只金毛mm,保持傲娇绝对是她的生活状态！</view>
<view class="flex-lr" style="margin-top:26rpx;">
<view class="gray-font font24r">2018-10-24 16:45</view>
<view class="flex-rr">
<image src="/pages/image/collection.svg" class="collect-icon"></image>
<view class="gray-deep-font font24r">23</view>
</view>
<view class="black-font font32r font-bold">#组队一起遛，组队一起遛</view>
<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>
<view class="gray-deep-font font26r" style="margin-top:14rpx;">周四 11-01 16:40</view>
<view class="flex-lm" style="margin-top:20rpx;">
<block wx:for="{{pets}}">
<block wx:if="{{index<4}}">
<image src="/pages/image/topic3.jpg" style="width:50rpx;height:50rpx;border-radius:50%;margin-right:10rpx;"></image>
</block>
</block>
<block wx:if="{{pets.length>4}}">
<view class="gray-deep-font font24r font-siny">等{{pets.length}}人加入</view>
</block>
</view>
<!--<view class="pet-join orange-font font28r flex-cm">参与</view>-->
</view>
</view>
</block>
... ...
... ... @@ -56,27 +56,21 @@
.topic{
width:100%;
margin:40rpx 0;
}
.topic swiper{
width:100%;
padding-left:30rpx;
box-sizing:border-box;
height:190rpx;
}
.topic swiper-item{
width:360rpx!important;
margin-bottom:20rpx;
}
.pet-block{
width:330rpx;
height:190rpx;
height:220rpx;
position:relative;
border-radius:14rpx;
border-radius:8rpx;
overflow:hidden;
margin-left:30rpx;
margin-bottom:30rpx;
box-shadow:0 0 5px rgba(0,0,0,.1);
}
.topic-image{
width:330rpx;
height:190rpx;
height:100%;
box-shadow:0 0 5px rgba(0,0,0,.4);
margin-right:30rpx;
}
... ... @@ -107,17 +101,33 @@
}
.pet-list-single{
width:690rpx;
height:220rpx;
min-height:220rpx;
padding:30rpx 0;
box-sizing:border-box;
margin:0 auto;
border-bottom:1px solid #efeef3;
}
.pet-image{
width:160rpx;
width:200rpx;
height:160rpx;
}
.pet-info{
padding:20rpx 30rpx;
width:490rpx;
padding-left:30rpx;
box-sizing:border-box;
position:relative;
}
.pet-join{
width:120rpx;
height:50rpx;
border:1px solid #fe9401;
color:#fe9401;
box-sizing:border-box;
border-radius:25rpx;
position:absolute;
right:20rpx;
top:50%;
margin-top:-25rpx;
}
.collect-icon{
width:30rpx;
... ... @@ -167,4 +177,60 @@
top:0;
transform:scale(0);
transition:transform 0.1s ease 0.2s,right 0.2s ease 0.1s,top 0.2s ease 0.1s;
}
.block-title{
width:100%;
height:120rpx;
padding:0 15rpx;
box-sizing:border-box;
}
.block-line{
width:6rpx;
height:44rpx;
margin-right:15rpx;
}
.pet-man{
}
.pet-man-list swiper{
width:100%;
height:450rpx;
margin-bottom:20rpx;
}
.pet-man-list swiper-item{
width:330rpx!imporant;
overflow:auto!imporant;
border-radius:8rpx;
}
.pet-man-block{
width:300rpx;
margin-left:30rpx;
box-shadow:0 0 5px rgba(0,0,0,.1);
padding-bottom:36rpx;
border-radius:8rpx;
margin-bottom:30rpx;
overflow:hidden;
}
.pet-man-petimg{
width:100%;
height:170rpx;
}
.pet-man-headimg{
width:76rpx;
height:76rpx;
border-radius:50%;
position:relative;
top:-38rpx;
}
.pet-collection{
width:30rpx;
height:30rpx;
margin-right:20rpx;
}
.pet-man-care{
width:160rpx;
height:50rpx;
border:1px solid #ccc;
border-radius:30rpx;
margin-top:24rpx;
}
\ No newline at end of file
... ...
<view class="person-banner">
<image src="/pages/image/6.jpg" class="person-bannerimg"></image>
<image src="http://qn.colorcun.com/b.png" class="person-bannerimg"></image>
<view class="picture-list">
<view class="flex-lt picture-list-block">
<view class="gray-font font32r" style="width:110rpx;padding-top:20rpx;">今天</view>
<image src="/pages/image/1.jpg" class="picture-head"></image>
<image src="/pages/image/topic2.jpg" class="picture-head"></image>
<view class="gray-deep-font font28r" style="width:410rpx;line-height:1.5;">滴滴都睡着了，我还饿着肚子没心情睡觉，麻麻把饭端过来为我呀，人家好饿</view>
</view>
<view class="flex-lt picture-list-block">
... ... @@ -11,7 +11,7 @@
<view>28</view>
<view class="font28r" style="margin-top:10rpx;">6月</view>
</view>
<image src="/pages/image/1.jpg" class="picture-head"></image>
<image src="/pages/image/topic3.jpg" class="picture-head"></image>
<view class="gray-deep-font font28r" style="width:410rpx;line-height:1.5;">滴滴都睡着了，我还饿着肚子没心情睡觉，麻麻把饭端过来为我呀，人家好饿</view>
</view>
</view>
... ...
{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#f7f7f7",
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle":"black",
"navigationBarTitleText":"服务",
"usingComponents": {
"toptab":"../../components/toptab/toptab",
"tabbar":"../../components/bottomtab/bottomtab"
}
}
\ No newline at end of file
... ...
<view class="seller-server flex-lr">
<toptab></toptab>
<!--<view class="seller-server flex-lr">
<block wx:for="{{sellericons}}">
<view class="flex-vc">
<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>
<view class="{{item.isactive==true ? 'orange-font' : 'gray-deep-font'}} font28r font-siny">{{item.title}}</view>
</view>
</block>
</view>-->
<view class="banner">
<image src="/pages/image/seller-detail.jpg" class="banner-img"></image>
</view>
<view class="seller-list">
<view class="best-info-title flex-cm">
... ...
... ... @@ -9,6 +9,14 @@
height:40rpx;
margin-bottom:10rpx;
}
.banner{
margin-top:80rpx;
margin-bottom:40rpx;
}
.banner-img{
width:100%;
height:400rpx;
}
.best-info-title{
margin:40rpx 0;
}
... ...
... ... @@ -19,5 +19,6 @@ Page({
isactive:false,
},
],
pets:[1,2,3,4,5,6]
}
})
\ No newline at end of file
... ...
... ... @@ -8,7 +8,7 @@
</view>
<view class="team-list bg-white">
<block wx:for="{{blocks}}">
<view class="team-block flex-lm">
<!--<view class="team-block flex-lm">
<image src="../image/topic2.jpg" class="dog-headimg"></image>
<view class="flex-lr team-info">
<view class="flex-vl">
... ... @@ -20,6 +20,25 @@
<image src="/pages/image/click.svg" class="click-icon"></image>
</view>
</view>
</view>-->
<view class="pet-list-single flex-lt">
<view><image class="pet-image" src="http://qn.colorcun.com/b.png" mode="scaleToFill"></image></view>
<view class="pet-info">
<view class="black-font font32r font-bold" style="width:450rpx;">#组队一起遛，组队一起遛</view>
<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>
<view class="gray-deep-font font26r" style="margin-top:14rpx;">周四 11-01 16:40</view>
<view class="flex-lm" style="margin-top:20rpx;">
<block wx:for="{{pets}}">
<block wx:if="{{index<4}}">
<image src="/pages/image/topic3.jpg" style="width:50rpx;height:50rpx;border-radius:50%;margin-right:10rpx;"></image>
</block>
</block>
<block wx:if="{{pets.length>4}}">
<view class="gray-deep-font font24r font-siny">等{{pets.length}}人加入</view>
</block>
</view>
<!--<view class="pet-join orange-font font28r flex-cm">参与</view>-->
</view>
</view>
</block>
<view class="gray-font font26r flex-cm" style="padding:20rpx 0;">已经到底啦~</view>
... ...
... ... @@ -9,6 +9,7 @@ page{
.team-banner{
display:block;
width:690rpx;
height:400rpx;
margin:0 auto;
margin-top:10rpx;
border-radius:10rpx;
... ... @@ -22,7 +23,7 @@ page{
border-radius:10rpx;
padding:0 30rpx;
box-sizing:border-box;
/*box-shadow:0 0 5px rgba(0,0,0,.1);*/
box-shadow:0 0 5px rgba(0,0,0,.08);
}
.search-block-single{
height:50rpx;
... ... @@ -36,6 +37,7 @@ page{
border-radius:10rpx;
margin-top:20rpx;
margin-bottom:40rpx;
box-shadow:0 0 5px rgba(0,0,0,.08);
}
.team-block{
width:100%;
... ... @@ -55,4 +57,23 @@ page{
width:540rpx;
padding-left:20rpx;
box-sizing:border-box;
}
.pet-list-single{
width:690rpx;
min-height:220rpx;
padding:30rpx 0;
box-sizing:border-box;
margin:0 auto;
border-bottom:1px solid #efeef3;
}
.pet-image{
width:200rpx;
height:160rpx;
margin-left:20rpx;
}
.pet-info{
width:470rpx;
padding:0 20rpx;
box-sizing:border-box;
position:relative;
}
\ No newline at end of file
... ...