wangxiaowei/xiuhuwangqiu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改网球时间预约界面

Browse Source
This commit is contained in:
wangxiaowei
2025-12-04 18:22:22 +08:00
parent f59ed2e36d
commit a5a81f869e
1 changed files with 244 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

369
bundle/reserve/details.vue
View File

@ -129,7 +129,39 @@
<!-- 网球场——场馆信息 -->
<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"
:style="currentTab === item.type ? 'background-color: #F0F5FF; color: #365A9A;' : ''"
@tap="handleChangeTab(item)" >
@ -163,7 +195,7 @@
</view>
<view class="line"></view>
</view>
</view>
</view> -->
</view>
<!-- 篮球场——场馆信息 -->
@ -526,21 +558,107 @@ page {
border-radius: 6rpx;
}
}
}
.tag-block {
display: flex;
justify-content: space-between;
}
.split-line {
height: 20rpx;
background-color: #F6F7F9;
margin-top: 12rpx;
margin-bottom: 28rpx;
.tag-title {
font-weight: 500;
font-size: 32rpx;
color: #303133;
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 {
overflow-x: auto;
background: #fff;
/* 隐藏滚动条，兼容主流浏览器 */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.tab-bar {
@ -609,126 +727,127 @@ page {
align-items: center;
}
.box {
border-radius: 16rpx;
padding: 32rpx 30rpx;
margin: 0 30rpx;
.box {
border-radius: 16rpx;
padding: 32rpx 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 {
font-size: 32rpx;
.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: 44rpx;
margin-bottom: 28rpx;
line-height: 42rpx;
}
.desc {
font-weight: 500;
font-size: 26rpx;
.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: 48rpx;
margin-bottom: 16rpx;
line-height: 42rpx;
}
}
.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>