修改网球时间预约界面
This commit is contained in:
wangxiaowei
@ -129,7 +129,39 @@
|
|||||||
|
|
||||||
<!-- 网球场——场馆信息 -->
|
<!-- 网球场——场馆信息 -->
|
||||||
<view class="info-block mx-30rpx" v-if="typeId == 1">
|
<view class="info-block mx-30rpx" v-if="typeId == 1">
|
||||||
<view class="d-f">
|
<view class="tag-block">
|
||||||
|
<view class="tag-title">立即预定</view>
|
||||||
|
<view class="tag">
|
||||||
|
<view class="tag1">可预约</view>
|
||||||
|
<view class="tag2">已选中</view>
|
||||||
|
<view class="tag3">不可约</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="date-block">
|
||||||
|
<view class="">
|
||||||
|
<view class="date1-block">
|
||||||
|
<view class="date1-block-item bg-f7f7f7">
|
||||||
|
<view class="">周三</view>
|
||||||
|
<view class="">12/03</view>
|
||||||
|
</view>
|
||||||
|
<view class="date1-block-item bg-365A9A text-fff">
|
||||||
|
<view class="">周三</view>
|
||||||
|
<view class="">12/03</view>
|
||||||
|
</view>
|
||||||
|
<view class="date1-block-item bg-f7f7f7">
|
||||||
|
<view class="">周三</view>
|
||||||
|
<view class="">12/03</view>
|
||||||
|
</view>
|
||||||
|
<view class="date1-block-item bg-f7f7f7">
|
||||||
|
<view class="">周三</view>
|
||||||
|
<view class="">12/03</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
</view>
|
||||||
|
<!-- <view class="d-f">
|
||||||
<view class="tab" v-for="(item, index) in tab" :key="index"
|
<view class="tab" v-for="(item, index) in tab" :key="index"
|
||||||
:style="currentTab === item.type ? 'background-color: #F0F5FF; color: #365A9A;' : ''"
|
:style="currentTab === item.type ? 'background-color: #F0F5FF; color: #365A9A;' : ''"
|
||||||
@tap="handleChangeTab(item)" >
|
@tap="handleChangeTab(item)" >
|
||||||
@ -163,7 +195,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="line"></view>
|
<view class="line"></view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view> -->
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 篮球场——场馆信息 -->
|
<!-- 篮球场——场馆信息 -->
|
||||||
@ -526,21 +558,107 @@ page {
|
|||||||
border-radius: 6rpx;
|
border-radius: 6rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
.tag-block {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
.split-line {
|
.tag-title {
|
||||||
height: 20rpx;
|
font-weight: 500;
|
||||||
background-color: #F6F7F9;
|
font-size: 32rpx;
|
||||||
margin-top: 12rpx;
|
color: #303133;
|
||||||
margin-bottom: 28rpx;
|
line-height: 44rpx;
|
||||||
|
padding-top: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag1, .tag2, .tag3 {
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 34rpx;
|
||||||
|
color: #909399;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag1::before {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
border-radius: 100%;
|
||||||
|
background: #F7F7F7;
|
||||||
|
border: 2rpx solid #E9ECF4;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag2::before {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
border-radius: 100%;
|
||||||
|
background: #365A9A;
|
||||||
|
border: 2rpx solid #365A9A;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tag3::before {
|
||||||
|
content: " ";
|
||||||
|
display: block;
|
||||||
|
width: 20rpx;
|
||||||
|
height: 20rpx;
|
||||||
|
border-radius: 100%;
|
||||||
|
background: #D4DAE6;
|
||||||
|
border: 2rpx solid #D4DAE6;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-303133 {
|
||||||
|
color: #303133;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-fff {
|
||||||
|
color: #fff
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-f7f7f7 {
|
||||||
|
background-color: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-365A9A {
|
||||||
|
background-color: #365A9A;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bg-D4DAE6 {
|
||||||
|
background-color: #D4DAE6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.date1-block {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
|
||||||
|
.date1-block-item {
|
||||||
|
width: 128rpx;
|
||||||
|
height: 100rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-bar-scroll {
|
.tab-bar-scroll {
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
/* 隐藏滚动条，兼容主流浏览器 */
|
|
||||||
scrollbar-width: none; /* Firefox */
|
|
||||||
-ms-overflow-style: none; /* IE 10+ */
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-bar {
|
.tab-bar {
|
||||||
@ -609,126 +727,127 @@ page {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box {
|
.box {
|
||||||
border-radius: 16rpx;
|
border-radius: 16rpx;
|
||||||
padding: 32rpx 30rpx;
|
padding: 32rpx 30rpx;
|
||||||
margin: 0 30rpx;
|
margin: 0 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #303133;
|
||||||
|
line-height: 44rpx;
|
||||||
|
margin-bottom: 28rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #303133;
|
||||||
|
line-height: 48rpx;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 38rpx;
|
||||||
|
width: 8rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
background-color: #365A9A;
|
||||||
|
border-radius: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
width: 8rpx;
|
||||||
|
height: 8rpx;
|
||||||
|
background: #6A6363;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mt20 {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc2 {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc2:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
.line {
|
||||||
|
height: 2rpx;
|
||||||
|
background: #E5E5E5;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.price-block {
|
||||||
font-size: 32rpx;
|
margin: 42rpx 22rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-detail {
|
||||||
|
color: #365A9A;
|
||||||
|
font-size: 24rpx;
|
||||||
|
line-height: 34rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.price-btn {
|
||||||
|
width: 368rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
line-height: 90rpx;
|
||||||
|
text-align: center;
|
||||||
|
background: #365A9A;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
font-size: 32rpx;
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bill-info {
|
||||||
|
border-radius: 16rpx;
|
||||||
|
margin: 32rpx 30rpx 22rpx;
|
||||||
|
padding: 48rpx 30rpx 30rpx;
|
||||||
|
|
||||||
|
.title1 {
|
||||||
|
font-size: 30rpx;
|
||||||
color: #303133;
|
color: #303133;
|
||||||
line-height: 44rpx;
|
line-height: 42rpx;
|
||||||
margin-bottom: 28rpx;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.desc {
|
.title2 {
|
||||||
font-weight: 500;
|
margin-top: 12rpx;
|
||||||
font-size: 26rpx;
|
font-weight: 400;
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #909399;
|
||||||
|
line-height: 34rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
border: 2rpx solid #F6F7F9;
|
||||||
|
margin: 34rpx 0 30rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title3 {
|
||||||
|
font-size: 30rpx;
|
||||||
color: #303133;
|
color: #303133;
|
||||||
line-height: 48rpx;
|
line-height: 42rpx;
|
||||||
margin-bottom: 16rpx;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.desc:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.current {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 38rpx;
|
|
||||||
width: 8rpx;
|
|
||||||
height: 32rpx;
|
|
||||||
background-color: #365A9A;
|
|
||||||
border-radius: 4rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot {
|
|
||||||
width: 8rpx;
|
|
||||||
height: 8rpx;
|
|
||||||
background: #6A6363;
|
|
||||||
margin-right: 12rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mt20 {
|
|
||||||
margin-top: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desc2 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 16rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desc2:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background-color: #fff;
|
|
||||||
|
|
||||||
.line {
|
|
||||||
height: 2rpx;
|
|
||||||
background: #E5E5E5;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-block {
|
|
||||||
margin: 42rpx 22rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-detail {
|
|
||||||
color: #365A9A;
|
|
||||||
font-size: 24rpx;
|
|
||||||
line-height: 34rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.price-btn {
|
|
||||||
width: 368rpx;
|
|
||||||
height: 90rpx;
|
|
||||||
line-height: 90rpx;
|
|
||||||
text-align: center;
|
|
||||||
background: #365A9A;
|
|
||||||
border-radius: 8rpx;
|
|
||||||
font-size: 32rpx;
|
|
||||||
color: #FFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bill-info {
|
|
||||||
border-radius: 16rpx;
|
|
||||||
margin: 32rpx 30rpx 22rpx;
|
|
||||||
padding: 48rpx 30rpx 30rpx;
|
|
||||||
|
|
||||||
.title1 {
|
|
||||||
font-size: 30rpx;
|
|
||||||
color: #303133;
|
|
||||||
line-height: 42rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title2 {
|
|
||||||
margin-top: 12rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #909399;
|
|
||||||
line-height: 34rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.line {
|
|
||||||
border: 2rpx solid #F6F7F9;
|
|
||||||
margin: 34rpx 0 30rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title3 {
|
|
||||||
font-size: 30rpx;
|
|
||||||
color: #303133;
|
|
||||||
line-height: 42rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
Reference in New Issue
Block a user