3 changed files with 269 additions and 1 deletions
@ -0,0 +1,262 @@ |
|||
<template> |
|||
<view class="site-manage"> |
|||
<view class="sm-header"> |
|||
<view class="sh-address"> |
|||
<text>欧轩智能场馆(羽毛球馆永泰店)</text> |
|||
<image></image> |
|||
</view> |
|||
<view class="sh-type"> |
|||
<picker> |
|||
<view class="st-type"> |
|||
<text>羽毛球</text> |
|||
<image></image> |
|||
</view> |
|||
</picker> |
|||
<view class="st-tip">可提前3个小时退</view> |
|||
</view> |
|||
<picker> |
|||
<view class="sh-time">2020年5月16日—2020年5月22日</view> |
|||
</picker> |
|||
</view> |
|||
<scroll-view class="sm-times" scroll-x> |
|||
<view :class="['st-item', i==1?'active':'']" v-for="i in 10" :key="i"> |
|||
<view class="si-txt"> |
|||
<view>今天</view> |
|||
<view>6月10日</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
<view class="sm-venue"> |
|||
<view class="sv-time-interval"> |
|||
<view class="sti-item"></view> |
|||
<view class="sti-item" v-for="i in 10" :key="i">{{i}}:00</view> |
|||
</view> |
|||
<scroll-view class="sti-venue-list" enable-flex scroll-x> |
|||
<view class="svl-list" v-for="i in 10" :key="i"> |
|||
<view class="sl-item">1号馆</view> |
|||
<view class="sl-item" v-for="k in 10" :key="k"> |
|||
<view>¥80</view> |
|||
</view> |
|||
</view> |
|||
</scroll-view> |
|||
</view> |
|||
<view class="sm-fixd-bot"> |
|||
|
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
|
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
@import "~style/public.scss"; |
|||
page{ |
|||
background-color: #fff; |
|||
} |
|||
.site-manage{ |
|||
.sm-header{ |
|||
padding: 0 24upx; |
|||
.sh-address{ |
|||
padding: 24upx 0; |
|||
line-height: 44upx; |
|||
font-weight: 500; |
|||
font-size: 32upx; |
|||
color: #333; |
|||
>image{ |
|||
margin-left: 12upx; |
|||
vertical-align: middle; |
|||
width: 24upx; |
|||
height: 24upx; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
.sh-type{ |
|||
padding: 20upx 0; |
|||
@include centerFlex(space-between); |
|||
.st-type{ |
|||
line-height: 50upx; |
|||
font-size: 36upx; |
|||
font-weight: 500; |
|||
color: #333; |
|||
>image{ |
|||
margin-left: 18upx; |
|||
width: 24upx; |
|||
height: 24upx; |
|||
vertical-align: middle; |
|||
background-color: skyblue; |
|||
} |
|||
} |
|||
.st-tip{ |
|||
flex-shrink: 0; |
|||
max-width: 50%; |
|||
font-size: 24upx; |
|||
line-height: 34upx; |
|||
color: #9b9b9b; |
|||
overflow: hidden; |
|||
white-space: nowrap; |
|||
text-overflow: ellipsis; |
|||
} |
|||
} |
|||
>picker{ |
|||
width: 100%; |
|||
} |
|||
.sh-time{ |
|||
height: 86upx; |
|||
line-height: 82upx; |
|||
text-align: center; |
|||
font-size: 28upx; |
|||
color: #9A9A9D; |
|||
border-top: 2upx solid #D8D8D8; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
} |
|||
} |
|||
.sm-times{ |
|||
height: 120upx; |
|||
border-bottom: 2upx solid #D8D8D8; |
|||
white-space: nowrap; |
|||
.st-item{ |
|||
display: inline-block; |
|||
padding: 0 20upx; |
|||
&.active{ |
|||
.si-txt{ |
|||
>view{ |
|||
color: $themeColor; |
|||
} |
|||
&::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
left: 50%; |
|||
bottom: 0; |
|||
transform: translateX(-50%); |
|||
height: 10upx; |
|||
width: 100%; |
|||
border-radius: 10upx; |
|||
background-color: $themeColor; |
|||
} |
|||
} |
|||
} |
|||
.si-txt{ |
|||
height: 118upx; |
|||
padding-top: 14upx; |
|||
position: relative; |
|||
>view{ |
|||
text-align: center; |
|||
color: #9A9A9D; |
|||
white-space: nowrap; |
|||
&:first-child{ |
|||
line-height: 44upx; |
|||
font-size: 32upx; |
|||
font-weight: 500; |
|||
} |
|||
&+view{ |
|||
line-height: 28upx; |
|||
font-size: 24upx; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.sm-venue{ |
|||
display: flex; |
|||
.sv-time-interval{ |
|||
flex-shrink: 0; |
|||
flex-grow: 0; |
|||
.sti-item{ |
|||
position: relative; |
|||
width: 112upx; |
|||
height: 84upx; |
|||
text-align: center; |
|||
line-height: 84upx; |
|||
font-size: 24upx; |
|||
color: #333; |
|||
border-right: 2upx solid #d8d8d8; |
|||
&::after{ |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 0; |
|||
right: -14upx; |
|||
width: 26upx; |
|||
height: 2upx; |
|||
background-color: #d8d8d8; |
|||
} |
|||
&:first-child,&:last-child{ |
|||
&::after{ |
|||
display: none; |
|||
} |
|||
|
|||
} |
|||
&:first-child{ |
|||
height: 72upx; |
|||
border-right-color: transparent; |
|||
|
|||
} |
|||
} |
|||
} |
|||
.sti-venue-list{ |
|||
width: 630upx; |
|||
flex-grow: 1; |
|||
background-color: #f2f2f7; |
|||
text-align: left; |
|||
white-space: nowrap; |
|||
.svl-list{ |
|||
display: inline-block; |
|||
width: 136upx; |
|||
.sl-item{ |
|||
height: 84upx; |
|||
&:not(:first-child){ |
|||
@include centerFlex(center); |
|||
>view{ |
|||
padding: 0 10upx; |
|||
width: 116upx; |
|||
height: 44upx; |
|||
line-height: 40upx; |
|||
text-align: center; |
|||
border: 2upx solid $themeColor; |
|||
border-radius: 22upx; |
|||
font-size: 28upx; |
|||
color: $themeColor; |
|||
@include textHide(1); |
|||
&.grey{ |
|||
color: #9A9A9D; |
|||
border-color: #D7D7DD; |
|||
background-color: #D7D7DD; |
|||
} |
|||
&.green{ |
|||
color: #FFF; |
|||
border-color: $themeColor; |
|||
background-color: $themeColor; |
|||
} |
|||
&.black{ |
|||
color: #FFF; |
|||
border-color: #333333; |
|||
background-color: #333333; |
|||
} |
|||
} |
|||
} |
|||
&:first-child{ |
|||
height: 72upx; |
|||
|
|||
line-height: 70upx; |
|||
text-align: center; |
|||
font-size: 24upx; |
|||
font-weight: 500; |
|||
border-bottom: 2upx solid #F2F2F7; |
|||
background-color: #fff; |
|||
color: #333; |
|||
@include textHide(1); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.sm-fixd-bot{ |
|||
position: fixed; |
|||
width: 100%; |
|||
|
|||
} |
|||
} |
|||
</style> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue