修改网球时间预约界面

bundle/reserve/details.vue

@@ -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;
         }
     }
-}
         
-.split-line {
+    .tag-block {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .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;
-    background-color: #F6F7F9;
+        border-radius: 100%;
-    margin-top: 12rpx;
+        background: #F7F7F7;
-    margin-bottom: 28rpx;
+        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,32 +727,32 @@ page {
     align-items: center;
 }
 
-  .box {
+.box {
     border-radius: 16rpx;
     padding: 32rpx 30rpx;
     margin: 0 30rpx;
-    }
+}
 
-    .title {
+.title {
     font-size: 32rpx;
     color: #303133;
     line-height: 44rpx;
     margin-bottom: 28rpx;
-    }
+}
 
-    .desc {
+.desc {
     font-weight: 500;
     font-size: 26rpx;
     color: #303133;
     line-height: 48rpx;
     margin-bottom: 16rpx;
-    }
+}
 
-    .desc:last-child {
+.desc:last-child {
     margin-bottom: 0;
-    }
+}
 
-    .current {
+.current {
     position: absolute;
     left: 0;
     top: 38rpx;
@@ -642,30 +760,30 @@ page {
     height: 32rpx;
     background-color: #365A9A;
     border-radius: 4rpx;
-    }
+}
 
-    .dot {
+.dot {
     width: 8rpx;
     height: 8rpx;
     background: #6A6363;
     margin-right: 12rpx;
-    }
+}
 
-    .mt20 {
+.mt20 {
     margin-top: 20rpx;
-    }
+}
 
-    .desc2 {
+.desc2 {
     display: flex;
     align-items: center;
     margin-bottom: 16rpx;
-    }
+}
 
-    .desc2:last-child {
+.desc2:last-child {
     margin-bottom: 0;
-    }
+}
 
-    .price {
+.price {
     position: fixed;
     bottom: 0;
     left: 0;
@@ -688,9 +806,9 @@ page {
         line-height: 34rpx;
     }
 
-    }
+}
 
-    .price-btn {
+.price-btn {
     width: 368rpx;
     height: 90rpx;
     line-height: 90rpx;
@@ -699,9 +817,9 @@ page {
     border-radius: 8rpx;
     font-size: 32rpx;
     color: #FFF;
-    }
+}
 
-    .bill-info {
+.bill-info {
     border-radius: 16rpx;
     margin: 32rpx 30rpx 22rpx;
     padding: 48rpx 30rpx 30rpx;
@@ -730,5 +848,6 @@ page {
         color: #303133;
         line-height: 42rpx;
     }
-    }
+}
+
 </style>