xt / xt-ac · Commits

Go to a project

Commit b3fdb6111175b790e5ab8ec8f86884662517460c

Authored by zhangyan
1 parent 47bd14ed
build: skipped

no message

Inline Side-by-side
Showing 19 changed files with 428 additions and 80 deletions
... ... @@ -2,6 +2,7 @@
"pages": [
"pages/me/d_index",
"pages/team/team",
"pages/team/t_detail",
"pages/rank/rank",
"pages/seller/seller",
"pages/seller/s_detail",
... ...
... ... @@ -79,6 +79,9 @@
.bg-orange{
background:#ffc16a;
}
.bg-gray{
background:#f7f7f7;
}
/*flex布局*/
.flex-lt{
... ... @@ -139,6 +142,14 @@
flex-direction: column;
-webkit-flex-direction: column;
}
.flex-vr{
display: flex;
display: -webkit-flex;
justify-content: flex-end;
align-items: center;
flex-direction: column;
-webkit-flex-direction: column;
}
.flex-rr{
display: flex;
display: -webkit-flex;
... ... @@ -185,4 +196,8 @@ page{
.click-icon{
width:40rpx;
height:40rpx;
}
.cut{
width:100%;
height:20rpx;
}
\ No newline at end of file
... ...
... ... @@ -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="black-font font32r {{item.isactive==true ? 'orange-font border-bottom' : ''}} top-tab-block flex-cm">{{item.title}}</view>
</block>
</view>
<view class="top-tab flex-cm bg-white fixed left top flex-lr">
<block wx:for="{{list}}">
<view class="black-font font30r {{item.isactive==true ? 'orange-font border-bottom' : ''}} top-tab-block flex-cm">{{item.title}}</view>
</block>
</view>
\ No newline at end of file
... ...
... ... @@ -5,13 +5,12 @@
padding:0 40rpx;
box-sizing:border-box;
z-index:99;
box-shadow:0 0 5px rgba(0,0,0,.1);
border-bottom:1px solid #efeef3;
}
.top-tab-block{
padding:0 24rpx;
height:76rpx;
box-sizing:border-bottom;
margin:0 35rpx;
}
.border-bottom{
padding-top:2px;
... ...
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1540432983366" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8783" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><defs><style type="text/css"></style></defs><path d="M510.352119 912.416237c-220.548741 0-399.339141-178.82643-399.339141-399.403615S289.803378 113.622281 510.352119 113.622281c220.550637 0 399.341037 178.813156 399.341037 399.390341S730.902756 912.416237 510.352119 912.416237zM510.352119 163.544178c-192.982281 0-349.421037 156.461511-349.421037 349.468444S317.369837 862.482963 510.352119 862.482963s349.421037-156.463407 349.421037-349.470341S703.3344 163.544178 510.352119 163.544178zM660.104533 537.979259 535.313067 537.979259l0 124.81043c0 13.778489-11.174874 24.957156-24.959052 24.957156-13.784178 0-24.957156-11.178667-24.957156-24.957156l0-124.81043-124.795259 0c-13.784178 0-24.959052-11.17677-24.959052-24.966637 0-13.780385 11.17677-24.957156 24.959052-24.957156l124.795259 0 0-124.816119c0-13.778489 11.174874-24.951467 24.957156-24.951467 13.786074 0 24.959052 11.171081 24.959052 24.951467l0 124.816119 124.791467 0c13.786074 0 24.959052 11.17677 24.959052 24.957156C685.063585 526.802489 673.890607 537.979259 660.104533 537.979259z" p-id="8784" fill="#666666"></path></svg>
\ No newline at end of file
... ... @@ -104,5 +104,10 @@ Page({
sort:true,
home:false
})
},
teamdetail:function(){
wx.navigateTo({
url:'../team/t_detail'
})
}
})
\ No newline at end of file
... ...
... ... @@ -110,21 +110,23 @@
</view>
<view class="pet-list">
<block wx:for="{{blocks}}">
<view class="pet-list-single flex-lt">
<view class="pet-list-single flex-lt" bindtap="teamdetail">
<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">#组队一起遛，组队一起遛</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: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}}">
</block>-->
<image src="/pages/image/topic3.jpg" style="width:50rpx;height:50rpx;border-radius:50%;margin-right:10rpx;"></image>
<view class="gray-font font24r font-siny">爱喵铲屎官</view>
<!--<block wx:if="{{pets.length>4}}">
<view class="gray-deep-font font24r font-siny">等{{pets.length}}人加入</view>
</block>
</block>-->
</view>
<!--<view class="pet-join orange-font font28r flex-cm">参与</view>-->
</view>
... ...
... ... @@ -26,7 +26,7 @@
.banner-mask{
width:100%;
height:100%;
background:rgba(0,0,0,.2);
background:rgba(0,0,0,.1);
position:absolute;
left:0;
top:0;
... ...
<!--榜单-->
<view class="rank">
<view class="rank-head flex-lr">
<view class="rank-head-block flex-vc">
<view class="rank-com rank-F">
<view class="rank-com rank-S">
<view class="rank-com rank-T" style="background-image: url(http://qn.colorcun.com/b.png);"></view>
</view>
</view>
<view class="rank-sort white-font bg-orange flex-cm font28r">2</view>
<view class="black-font font32r rank-house-title">橙子小馒头</view>
<view class="rank-pet-title flex-cm">
<view class="black-font font26r">小煎包</view>
<view class="gray-deep-font font24r" style="margin-left:10rpx;">16个月</view>
</view>
<view class="rank-care flex-cm">
<image src="/pages/image/collection.svg" class="rank-care-icon"></image>
<view class="gray-deep-font font26r font-siny">10012</view>
</view>
<view class="rank-care-act orange-font font28r flex-cm">关 注</view>
</view>
<view class="rank-head-block flex-vc rank-head-block-active">
<view class="rank-com rank-F">
<view class="rank-com rank-S">
<view class="rank-com rank-T" style="background-image: url(http://qn.colorcun.com/b.png);"></view>
</view>
</view>
<view class="rank-sort white-font bg-orange flex-cm font28r" style="width:46rpx;height:46rpx;top:-40rpx;">1</view>
<view class="black-font font34r rank-house-title font-bold">橙子小馒头</view>
<view class="rank-pet-title flex-cm">
<view class="black-font font30r">小煎包</view>
<view class="gray-deep-font font26r" style="margin-left:10rpx;">16个月</view>
</view>
<view class="rank-care flex-cm">
<image src="/pages/image/collection.svg" class="rank-care-icon" style="width:36rpx;height:36rpx;"></image>
<view class="gray-deep-font font28r">10023</view>
</view>
<view class="rank-care-act orange-font font30r flex-cm">关 注</view>
</view>
<view class="rank-head-block flex-vc">
<view class="rank-com rank-F">
<view class="rank-com rank-S">
<view class="rank-com rank-T" style="background-image: url(http://qn.colorcun.com/b.png);"></view>
</view>
</view>
<view class="rank-sort white-font bg-orange flex-cm font28r">3</view>
<view class="black-font font32r rank-house-title">橙子小馒头</view>
<view class="rank-pet-title flex-cm">
<view class="black-font font26r">小煎包</view>
<view class="gray-deep-font font24r" style="margin-left:10rpx;">16个月</view>
</view>
<view class="rank-care flex-cm">
<image src="/pages/image/collection.svg" class="rank-care-icon"></image>
<view class="gray-deep-font font26r font-siny">10001</view>
</view>
<view class="rank-care-act orange-font font28r flex-cm">关 注</view>
</view>
</view>
<view class="cut bg-gray"></view>
<block wx:for="{{blocks}}">
<view class="rank-block bg-white flex-lm">
<image src="/pages/image/topic2.jpg" class="rank-headimg"></image>
<view class="flex-vl rank-info">
<view class="flex-lr" style="width:100%;">
<view>
<view class="black-font font-bold font32r" style="margin-bottom:14rpx;">小煎包</view>
<view class="gray-font font20r font-siny">1岁零2个月</view>
<view class="gray-deep-font font30r">{{index+4}}</view>
<image src="/pages/image/topic3.jpg" class="rank-headimg"></image>
<view class="flex-lr rank-info">
<view class="flex-vl" style="width:100%;">
<view class="black-font font-bold font34r" style="margin-bottom:14rpx;">橙子小馒头</view>
<view class="flex-lm">
<view class="black-font font28r font-siny">小煎包</view>
<view class="gray-deep-font font24r font-siny" style="margin-left:12rpx;">18个月</view>
</view>
<view class="orange-font font28r rank-title flex-cm">活跃之星</view>
</view>
<view class="black-font font26r font-siny rank-info-detail font-more-two">虽然到目前为止家里还没进过贼，但是，这种事情最好别发生了，我对我家那傻狗没信心等等等等</view>
<view class="rank-info-care flex-lm">
<image src="/pages/image/collection.svg" class="rank-care-icon"></image>
<view class="gray-deep-font font26r font-siny">10001</view>
</view>
</view>
</view>
</block>
... ...
... ... @@ -4,33 +4,122 @@
padding-bottom:120rpx;
margin-top:30rpx;
}
.rank-head{
width:100%;
padding:0 30rpx;
padding-bottom:40rpx;
box-sizing:border-box;
}
.rank-head-block{
}
.rank-com{
width:160rpx;
height:200rpx;
overflow: hidden;
background:pink;
}
.rank-F, .rank-S{
visibility: hidden;
}
.rank-F{
transform: rotate(120deg);
-ms-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
}
.rank-S{
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.rank-T{
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
visibility: visible;
background: no-repeat 50% center;
background-size: 200% auto;
}
.rank-sort{
width:40rpx;
height:40rpx;
border-radius:50%;
position:relative;
top:-30rpx;
}
.rank-house-title{
margin-top:14rpx;
}
.rank-pet-title{
margin-top:10rpx;
}
.rank-care{
margin-top:14rpx;
}
.rank-care-icon{
width:30rpx;
height:30rpx;
margin-right:10rpx;
}
.rank-care-act{
width:120rpx;
height:46rpx;
border:1px solid #fe9401;
border-radius:23rpx;
margin-top:22rpx;
}
.rank-head-block-active{
width:190rpx;
}
.rank-head-block-active .rank-com{
width:190rpx;
height:237.5rpx;
}
.rank-head-block-active .rank-house-title{
margin-top:-30rpx;
}
.rank-head-block-active .rank-pet-title{
margin-top:10rpx;
}
.rank-head-block-active .rank-care{
margin-top:10rpx;
}
.rank-head-block-active .rank-care-act{
width:140rpx;
height:50rpx;
border:1px solid #fe9401;
border-radius:25rpx;
margin-top:18rpx;
}
.rank-block{
width:690rpx;
height:210rpx;
width:100%;
height:170rpx;
margin:0 auto;
box-shadow:0 0 5px rgba(0,0,0,.1);
margin-bottom:30rpx;
border-bottom:1px solid #efeef3;
padding:0 30rpx;
box-sizing:border-box;
border-radius:10rpx;
}
.rank-headimg{
width:140rpx;
height:140rpx;
border-radius:10rpx;
width:110rpx;
height:110rpx;
border-radius:50%;
margin-left:30rpx;
}
.rank-info{
width:490rpx;
width:520rpx;
padding-left:20rpx;
box-sizing:border-box;
}
.rank-info-detail{
width:100%;
.rank-info-care{
margin-top:14rpx;
}
.rank-title{
height:44rpx;
padding:0 16rpx;
width:120rpx;
height:46rpx;
border-radius:22rpx;
border:1px solid #fe9401;
}
\ No newline at end of file
... ...
<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">
<!--<view class="banner">
<image src="/pages/image/seller-detail.jpg" class="banner-img"></image>
</view>
</view>-->
<view class="seller-list">
<view class="best-info-title flex-cm">
<view class="best-line bg-black"></view>
... ... @@ -18,6 +10,19 @@
<view class="best-react bg-black"></view>
<view class="best-line bg-black"></view>
</view>
<swiper next-margin="90rpx" display-multiple-items="2">
<block wx:for="{{sellericons}}">
<swiper-item>
<view class="recommand-seller">
<image src="/pages/image/seller-detail.jpg" class="recommand-seller-image"></image>
<view class="recommand-seller-info flex-lr">
<view class="black-font font30r font-bold">爱家生活馆</view>
<view class="orange-font font28r ">2.5km</view>
</view>
</view>
</swiper-item>
</block>
</swiper>
<block wx:for="{{sellericons}}">
<view class="flex-lm seller-block" bindtap="sellerdetail">
<image src="/pages/image/pet-seller.jpg" class="seller-image"></image>
... ...
.seller-server{
width:100%;
height:140rpx;
padding:0 80rpx;
box-sizing:border-box;
}
.seller-icon{
width:40rpx;
height:40rpx;
margin-bottom:10rpx;
}
.banner{
.seller-list{
margin-top:80rpx;
margin-bottom:40rpx;
}
.banner-img{
width:100%;
height:400rpx;
}
.best-info-title{
margin:40rpx 0;
padding:30rpx 0;
}
.best-react{
width:8rpx;
... ... @@ -29,6 +13,29 @@
width:80rpx;
height:1px;
}
swiper{
width:100%;
height:280rpx;
border-bottom:1px solid #efeef3;
}
swiper-item{
width:330rpx!important;
}
.recommand-seller{
width:300rpx;
margin-left:30rpx;
}
.recommand-seller-image{
width:100%;
height:200rpx;
border-radius:12rpx;
}
.recommand-seller-info{
width:100%;
height:70rpx;
padding:0 8rpx;
box-sizing:border-box;
}
.seller-list{
padding-bottom:120rpx;
}
... ... @@ -42,9 +49,10 @@
border-bottom:1px solid #efeef3;
}
.seller-image{
width:240rpx;
width:260rpx;
height:180rpx;
margin-right:30rpx;
border-radius:12rpx;
}
.seller-book{
height:40rpx;
... ...
Page({
data:{
joiner:[1,2,3,4,5]
}
})
\ No newline at end of file
... ...
{}
\ No newline at end of file
... ...
<view>
<view class="banner-main">
<image src="http://qn.colorcun.com/b.png" class="banner-img"></image>
<view class="banner-mask flex-vl">
<view class="white-font font-bold font36r" style="margin-top:20rpx;">#组队一起遛,组队一起遛</view>
<view class="team-detail">
<view class="white-font font28r font-siny">地址：西安市雁塔区唐城遗址公园</view>
<view class="white-font font28r font-siny">时间：周四 11-01 16:50</view>
</view>
<view class="white-font font26r font-siny team-share flex-cm">分享行程</view>
</view>
</view>
<view class="team-info bg-white">
<view class="team-person flex-lr">
<view class="flex-lm">
<image src="/pages/image/topic3.jpg" class="team-homimg"></image>
<view class="orange-font font28r font-siny">爱喵铲屎官</view>
</view>
<view class="bg-orange white-font flex-cm font24r team-join">参与</view>
</view>
<view class="team-info-content black-font font28r font-siny flex-vl">
<view>相约一起周末遛宠，</view>
<view>晒晒太阳，</view>
<view>打发时间</view>
</view>
<view style="height:20rpx;background:#f7f7f7;"></view>
<view class="gray-deep-font font26r font-siny joiner-count flex-cm">
<view class="joiner-line"></view>
<view style="padding:0 12rpx;">共{{joiner.length+1}}人参与</view>
<view class="joiner-line"></view>
</view>
<view class="joiner-list">
<view class="flex-lr joiner-single">
<view class="flex-lm">
<image src="/pages/image/topic2.jpg" class="joiner-img"></image>
<view class="black-font font26r font-siny">爱喵铲屎官</view>
</view>
<view class="gray-deep-font font26r font-siny">发起者</view>
</view>
<block wx:for="{{joiner}}">
<view class="flex-lr joiner-single">
<view class="flex-lm">
<image src="http://qn.colorcun.com/b.png" class="joiner-img"></image>
<view class="black-font font26r font-siny">橙子小馒头</view>
</view>
<view class="gray-font font26r font-siny">参与者</view>
</view>
</block>
</view>
</view>
</view>
\ No newline at end of file
... ...
.banner-main{
width:100%;
height:400rpx;
position:relative;
}
.banner-img{
width:100%;
height:100%;
}
.banner-mask{
width:100%;
height:100%;
padding:30rpx;
box-sizing:border-box;
background:rgba(0,0,0,.1);
position:absolute;
left:0;
top:0;
}
.team-share{
width:140rpx;
height:46rpx;
border:1px solid #fafafa;
border-radius:23rpx;
position:absolute;
right:40rpx;
bottom:50rpx;
}
.team-info{
width:100%;
min-height:500rpx;
padding:30rpx 0;
box-sizing:border-box;
position:relative;
top:-20rpx;
border-top-left-radius:20rpx;
border-top-right-radius:20rpx;
overflow:hidden;
margin-bottom:30rpx;
}
.team-person{
width:670rpx;
padding:0 14rpx;
padding-bottom:30rpx;
border-bottom:1px solid #efeef3;
box-sizing:border-box;
margin:0 auto;
}
.team-homimg{
width:70rpx;
height:70rpx;
border-radius:50%;
margin-right:14rpx;
}
.team-join{
width:120rpx;
height:50rpx;
border-radius:25rpx;
}
.team-detail{
width:60%;
padding-top:24rpx;
margin-left:40%;
}
.team-detail>view{
margin-top:20rpx;
}
.team-info-content{
width:670rpx;
margin:0 auto;
padding:50rpx 20rpx;
line-height:1.8;
}
.joiner-count{
padding:30rpx 40rpx;
}
.joiner-line{
width:60rpx;
height:1px;
background:#999;
}
.joiner-list{
width:670rpx;
margin:0 auto;
}
.joiner-single{
width:100%;
padding:20rpx 0;
}
.joiner-img{
width:60rpx;
height:60rpx;
border-radius:50%;
margin-right:14rpx;
}
\ No newline at end of file
... ...
... ... @@ -20,5 +20,16 @@ Page({
},
],
pets:[1,2,3,4,5,6]
},
onLoad:function(){
},
onShow:function(){
},
teamdetail:function(){
wx.navigateTo({
url:'t_detail'
})
}
})
\ No newline at end of file
... ...
... ... @@ -21,24 +21,27 @@
</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}}">
<view class="pet-list-single flex-lt" bindtap="teamdetail">
<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}}">
</block>-->
<!--<block wx:if="{{pets.length>4}}">
<view class="gray-deep-font font24r font-siny">等{{pets.length}}人加入</view>
</block>
</view>
</block>-->
<image src="/pages/image/topic3.jpg" style="width:50rpx;height:50rpx;border-radius:50%;margin-right:10rpx;"></image>
<view class="gray-font font24r font-siny">爱喵铲屎官</view>
</view>
<!--<view class="pet-join orange-font font28r flex-cm">参与</view>-->
</view>
</view>
</view>
</block>
<view class="gray-font font26r flex-cm" style="padding:20rpx 0;">已经到底啦~</view>
... ...