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