订座-列表tab

htmldev/dashboard/src/views/place/list/index.vue

@@ -16,26 +16,55 @@
       </div>
     </div>
     <!--预约日期-->
-    <!--座位类型列表-->
-    <van-tabs>
+    <van-tabs
+      class="af-van-tab"
+      :background="'transparent'"
+      :ellipsis="false"
+      v-model="active"
+      @change="handleChange"
+      ref="afTabs">
       <van-tab
         v-for="(item, index) in placeList"
-        :title="'标签 ' + index"
         :key="index">
-        内容 {{ index }}
+        <template #title>
+          <p class="week">{{ item.week }}</p>
+          <p class="date">{{ item.date }}</p>
+        </template>
+        <div class="place-list">
+          <div class="left">
+            <p class="name">12人卡座（舞台中间）</p>
+            <p class="des">卡座台费2800元</p>
+          </div>
+          <div class="right" v-if="false">
+            <p class="price">¥ 1000</p>
+            <p class="btn-wrap">
+              <span class="btn">立即预订</span>
+              <van-icon name="arrow" size="12px"/>
+            </p>
+          </div>
+          <!--座位被定完-->
+          <div class="sell-out">
+            <img src="./image/sell_out@2x.png" alt="">
+            <div>
+              <p class="price disabled">¥ 1000</p>
+              <p class="sell-des">已订满</p>
+            </div>
+          </div>
+        </div>
       </van-tab>
     </van-tabs>
   </div>
 </template>
 
 <script>
-import { Tabs, Tab } from 'vant'
+import { Tabs, Tab, Icon } from 'vant'
 
 export default {
   name: 'index',
   components: {
     'van-tabs': Tabs,
-    'van-tab': Tab
+    'van-tab': Tab,
+    'van-icon': Icon
   },
   data () {
     return {
@@ -55,29 +84,67 @@ export default {
           week: '周四',
           date: '04/29'
         },
+        {
+          id: 4,
+          week: '周五',
+          date: '04/30'
+        },
+        {
+          id: 2,
+          week: '周三',
+          date: '04/28'
+        },
+        {
+          id: 3,
+          week: '周四',
+          date: '04/29'
+        },
         {
           id: 4,
           week: '周五',
           date: '04/30'
         }
-
       ],
+      active: 0,
       listData: []
     }
+  },
+  async mounted () {
+    await this.$nextTick()
+  },
+  methods: {
+    handleChange () {}
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .af-container {
+  position: relative;
+  left: 0;
+  top: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
 
+  &:before {
+    position: absolute;
+    left: 0;
+    top: 0;
+    content: '';
+    display: block;
+    width: 100%;
+    height: 240px;
+    background: url("./image/header@2x.png") center top/100% 100% no-repeat;
+  }
+
   .header {
+    position: relative;
+    left: 0;
+    top: 0;
+    z-index: 1;
     width: 100%;
     padding: 59px 0 25px 0;
-    background: url("./image/header@2x.png") center top/100% 100% no-repeat;
   }
 
   .store-name, .open-time {
@@ -136,4 +203,140 @@ export default {
     }
   }
 }
+
+.af-van-tab {
+  position: relative;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+  margin-top: 28px;
+
+  .week {
+    font-size: 18px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #FFFFFF;
+    line-height: 25px;
+    letter-spacing: 1px;
+  }
+
+  .date {
+    margin-top: 4px;
+    font-size: 12px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #FFFFFF;
+    line-height: 17px;
+    letter-spacing: 1px;
+  }
+
+  ::v-deep .van-tabs__wrap {
+    height: 60px;
+
+    .van-tabs__nav--complete {
+      padding-left: 0;
+      padding-right: 0;
+
+      .van-tab {
+        width: 93px;
+      }
+
+      .van-tabs__line {
+        width: 93px;
+      }
+    }
+  }
+
+  ::v-deep .van-tabs__content {
+    padding-bottom: 60px;
+  }
+}
+
+.place-list {
+  position: relative;
+  left: 0;
+  top: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 22px 20px;
+  border-bottom: 1px solid #EBEBEB;
+
+  .name {
+    font-size: 18px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #1F1E1E;
+    line-height: 25px;
+    letter-spacing: 1px;
+  }
+
+  .des {
+    margin-top: 6px;
+    font-size: 12px;
+    color: #736F6F;
+    line-height: 17px;
+    letter-spacing: 1px;
+  }
+
+  .price {
+    font-size: 24px;
+    font-weight: bold;
+    color: #D32323;
+    line-height: 28px;
+    letter-spacing: 1px;
+
+    &.disabled {
+      color: #CCC6C6;
+    }
+  }
+
+  .btn-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 3px;
+  }
+
+  .btn {
+    font-size: 12px;
+    color: #1F1E1E;
+    line-height: 17px;
+    letter-spacing: 1px;
+    margin-right: 4px;
+  }
+
+  .sell-out {
+    position: absolute;
+    top: 8px;
+    right: 20px;
+    z-index: 1;
+
+    img {
+      width: 80px;
+      height: 74px;
+    }
+
+    div {
+      position: absolute;
+      left: 0;
+      top: 13px;
+      z-index: 1;
+
+      p {
+        white-space: nowrap;
+      }
+    }
+
+    .sell-des {
+      margin-top: 3px;
+      font-size: 12px;
+      color: #D32323;
+      line-height: 17px;
+      letter-spacing: 1px;
+      text-align: right;
+    }
+  }
+}
 </style>