wap订座-登录

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

@@ -1,13 +1,126 @@
 <template>
-  <div>座位列表</div>
+  <div class="af-container">
+    <!--头部-->
+    <div class="header">
+      <div class="store-name">
+        <p>
+          <img src="./image/icon_music@2x.png" alt="">
+          <span>星桥店</span>
+        </p>
+      </div>
+      <div class="open-time">
+        <p>
+          <img src="./image/icon_time@2x.png" alt="">
+          <span>11:00-01:00开放预订</span>
+        </p>
+      </div>
+    </div>
+    <!--预约日期-->
+    <!--座位类型列表-->
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'index'
+  name: 'index',
+  components: {},
+  data () {
+    return {
+      Matchs: [
+        {
+          id: 1,
+          week: '今日',
+          date: '04/27'
+        },
+        {
+          id: 2,
+          week: '周三',
+          date: '04/28'
+        },
+        {
+          id: 3,
+          week: '周四',
+          date: '04/29'
+        },
+        {
+          id: 4,
+          week: '周五',
+          date: '04/30'
+        }
+
+      ],
+      listData: []
+    }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
+.af-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .header {
+    width: 100%;
+    padding: 59px 0 25px 0;
+    background: url("./image/header@2x.png") center top/100% 100% no-repeat;
+  }
+
+  .store-name, .open-time {
+    display: flex;
+    padding-left: 20px;
+  }
+
+  .store-name {
+    p {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 118px;
+      height: 36px;
+      background: linear-gradient(86deg, #F0E1E2 0%, #DDC5C0 100%);
+      border-radius: 18px;
+    }
+
+    img {
+      width: 20px;
+      height: 20px;
+    }
 
+    span {
+      margin-left: 8px;
+      font-size: 18px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #1F1E1E;
+      line-height: 25px;
+      letter-spacing: 1px;
+    }
+  }
+
+  .open-time {
+    margin-top: 13px;
+
+    p {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    img {
+      width: 14px;
+      height: 14px;
+    }
+
+    span {
+      font-size: 14px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 20px;
+      letter-spacing: 1px;
+    }
+  }
+}
 </style>