修改网球时间预约界面

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;
         }
     }
+        
+    .tag-block {
+        display: flex;
+        justify-content: space-between;
     }
 
-.split-line {
+    .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;
-    margin-top: 12rpx;
-    margin-bottom: 28rpx;
+        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 {
@@ -731,4 +849,5 @@ page {
         line-height: 42rpx;
     }
 }
+
 </style>