table ui

@@ -33,7 +33,7 @@ Page({
   },
   onShow: function () {
     this.setData({
-      height: getApp().system.windowHeight - 55
+      height: getApp().system.windowHeight - 65
     })
   },
   changedesk: function (e) {

 <nav>选择桌位</nav>
 <!--桌位状态-->
-<view class="flex-lr" style="border-top:1rpx solid #E0E0E0">
+<view class="disks flex-lr">
+    <!--
     <view class="menus" style="height: {{height}}px; overflow-y: auto;overflow-x: hidden;align-self:flex-start ">
         <view class="menus-item flex-cc {{item.name==menu_active_id?'active':''}}"
               wx:for="{{desklist}}" wx:key="desklist.key"
@@ -9,6 +10,15 @@
             <view class="hip" wx:if="{{item.chenkNum>0}}">{{item.chenkNum}}</view>
         </view>
     </view>
+    -->
+    <view class="menus Medium" style="height: {{height}}px;">
+        <view class="menu flex-cc {{menu_active_id==item.name?'active':''}}"
+              wx:for="{{desklist}}" wx:key="desklist.key"
+              bindtap="switchMenu" data-id="{{item.name}}">
+            <view class="menu-text">{{item.name}}</view>
+            <view class="last-num {{item.list_num>0?'':'full'}}">{{item.list_num>0?'余'+item.list_num:'满座'}}</view>
+        </view>
+    </view>
     <view style="height: {{height-80}}px;overflow-y: auto;padding-bottom: 160rpx;overflow-x: hidden;width: 100%;">
         <block wx:for="{{desklist}}" wx:key="desklist.key">
             <orderDesk list="{{item.list}}" checkedTids="{{opt.checked_tids}}"

-view{
-    line-height:1.2;
+.disks{
+    width: 100%;
+    background-color: #fefefe;
+    border-top:1rpx solid #E0E0E0;
 }
-.other-info{
-    width:100%;
-    height:220rpx;
-    padding:20rpx 0;
-    box-sizing:border-box;
+.disks .menus,.disks .items{
+    overflow-y: auto;
 }
-.selected-time{
-    width:375rpx;
-    height:100%;
-    border-right:1px solid #efeef3;
-    box-sizing:border-box;
-}
-.actual-time{
-    margin-top:10rpx;
+.disks .menus{
+    background-color: #f5f5f5;
+    width: 168rpx;
+    min-width: 168rpx;
+    color: #999999;
 }
-.cut{
-    width:100%;
-    height:4px;
-    background:#efeef3;
+.disks .menu{
+    height: 160rpx;
+    border-left: 4rpx solid #F5F5F5;
+    border-bottom: 1rpx solid #fefefe;
+    position: relative;
 }
-
-
-
-.desk-type{
-    width:680rpx;
-    padding:40rpx 0 20rpx;
-    margin:0 auto;
+.disks .menu.active{
+    background-color: #fefefe;
+    border-left: 4rpx solid #199095;
+    color: #199095;
+}
+.disks .menu-text{
+    font-size: 30rpx;
+    width: 120rpx;
+    margin: 0 auto;
+    max-height: 84rpx;
+    line-height: 42rpx;
+    overflow: hidden;
 }
-.desk-type-single{
-    width:160rpx;
-    height:60rpx;
-    border:1px solid #199095;
-    border-radius:30rpx;
-    background:#EBF8F8;
+.disks .items{
+    width: 100%;
 }
-.desk-type-single-active{
-    background:#199095;
+.disks .items-disks{
+    margin: 0 auto;
+    width: 570rpx;
+    padding-bottom: 80rpx;
 }
-
-.desk-list{
-    width:100%;
+.disks .menu .last-num{
+    position: absolute;
+    left: -4rpx;
+    top:0rpx;
+    width: 78rpx;
+    height: 30rpx;
+    line-height: 30rpx;
+    font-size: 24rpx;
+    color: #FEFEFE;
+    background-color: #61A5D1;
+    text-align: center;
+    border-radius: 0 30rpx 30rpx 0;
 }
-.desk-region{
-    width:680rpx;
-    padding-top:40rpx;
-    margin:0 auto;
+.disks .menu .last-num.full{
+    background-color: #999999;
 }
 
 .confirm-button{
@@ -61,43 +68,4 @@ view{
 }
 .confirm-button-active{
     background:#199095;
-}
-
-.menus{
-    width: 168rpx;
-    min-width: 168rpx;
-    background-color: #F5F5F5;
-}
-.menus-item{
-    width: 168rpx;
-    height: 158rpx;
-    line-height: 158rpx;
-    font-size: 34rpx;
-    border: 1rpx solid #E0E0E0;
-    border-top-width: 0;
-    border-left-width: 0;
-    position: relative;
-}
-.menus-item.active{
-    background-color: #FEFEFE;
-}
-.menus-item .name{
-    width: 140rpx;
-    max-height: 96rpx;
-    line-height: 48rpx;
-    overflow: hidden;
-    text-align: center;
-}
-.menus-item .hip{
-    background-color: #f00;
-    width: 40rpx;
-    height: 40rpx;
-    position: absolute;
-    border-radius: 50%;
-    color: #fefefe;
-    text-align: center;
-    line-height: 40rpx;
-    font-size: 22rpx;
-    top:10rpx;
-    right: 10rpx;
 }
\ No newline at end of file