xcx

package-lock.json

@@ -1034,6 +1034,14 @@
         "tweetnacl": "0.14.5"
       }
     },
+    "better-scroll": {
+      "version": "1.12.6",
+      "resolved": "https://registry.npmjs.org/better-scroll/-/better-scroll-1.12.6.tgz",
+      "integrity": "sha512-blo8gDgoJKJphhdNeklkSNT6pWrQvNk+sZ9q9yDo7dQXJZj8aKAMJdSJp+cwU0pxNTtScaYkxYT8yJ5ZttAN/w==",
+      "requires": {
+        "babel-runtime": "6.26.0"
+      }
+    },
     "big.js": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",

src/module/user/mainPage/coffeeIndex/index.vue

@@ -1,6 +1,45 @@
 <template>
-  <div class="mainPage">
-    城咖啡
+  <div class="mainPage flex-v">
+    <div class="top flex-h">
+      <i class="iconfont icon-dingwei"></i>
+      <span>南京</span>
+      <a>请选择</a>
+      <div class="flex-item">
+        <span>Alise您好！</span>
+      </div>
+    </div>
+    <div class="content flex-item">
+      <div>
+        <div class="flex-h">
+          <div class="flex-item">
+            <ul class="areaList">
+              <li v-for="(item,index) in 10" :key="index">
+                <div class="title">
+                  <i class="iconfont icon-yinchenglogo"></i>
+                  <span>悦见山区域一</span>
+                </div>
+                <ul class="subAreaList flex-h">
+                  <li class="flex-item flex-h" v-for="(subItem,subIndex) in 10" :key="subIndex">
+                    <i class="iconfont icon-yinchenglogo"></i>
+                    <div class="itemNo">
+                      <a>
+                        <div class="centerLabel" v-html="returnNo(subIndex)"></div>
+                      </a>
+                    </div>
+                    <div class="flex-item">
+                      <div>
+                        <span>案场一号桌</span>
+                        <a>选择点单</a>
+                      </div>
+                    </div>
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -10,20 +49,27 @@ export default {
   name: '',
   data () {
     return {
-      
+
     }
   },
   computed: {
-    
+
   },
   components: {
-    
+
   },
   created () {
-    
+
   },
   methods: {
-    
+    returnNo (index) { // 返回桌号
+      index = String(index + 1)
+      let aHtml = ''
+      for (var n = 0; n < index.length; n++) {
+        aHtml += '<i class="iconfont icon-' + index.substring(n, n + 1) + '" style="display: inline-block;font-size: .13rem;color: #666;"></i>'
+      }
+      return index.length > 1 ? aHtml : '<i class="iconfont icon-0" style="display: inline-block;font-size: .13rem;color: #666;"></i>' + aHtml
+    },
   }
 }
 </script>

src/module/user/mainPage/coffeeIndex/page.scss

@@ -0,0 +1,154 @@
+.mainPage{
+  .top{
+    align-items: center;
+    background: rgba(0, 0, 0, .3);
+    padding: .05rem 0;
+    &>*{
+      margin-left: .05rem;
+      line-height: .2rem;
+      font-size: .12rem;
+      color: #fff;
+    }
+    i{
+      font-size: .15rem;
+    }
+    a{
+      color: #fb6b2f;
+      text-decoration: underline;
+      margin-left: .1rem;
+    }
+    &>*:first-child{
+      margin-left: .2rem;
+    }
+    &>div{
+      text-align: right;
+      margin-right: .2rem;
+      font-size: 0;
+      span{
+        font-size: .12rem;
+        color: #fff;
+      }
+    }
+  }
+  .content{
+    &>div{
+      width: 100%;
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      overflow-y: scroll;
+      -webkit-overflow-scrolling: touch;
+      transform: translateZ(0);
+      -webkit-transform: translateZ(0);
+      &>div.flex-h{
+        &>div{
+          margin: 0 .2rem;
+          position: relative;
+          overflow: visible;
+          .areaList{
+            &:last-child{
+              margin-bottom: .2rem;
+            }
+            .title{
+              font-size: 0;
+              white-space: nowrap;
+              margin-top: .22rem;
+              *{
+                line-height: .26rem;
+                font-size: .14rem;
+              }
+              i{
+                color: red;
+                margin-right: .05rem;
+              }
+            }
+            .subAreaList{
+              position: relative;
+              overflow: visible;
+              flex-wrap: wrap;
+              -webkit-flex-wrap: wrap;
+              &>li{
+                position: relative;
+                overflow: hidden;
+                border-radius: .06rem;
+                background: #fff;
+                padding: .15rem 0;
+                box-shadow: 0 0 .1rem .01rem rgba(0, 0, 0, .1);
+                min-width: 40%;
+                margin-top: .2rem;
+                align-items: center;
+                &:nth-child(2n){
+                  margin-left: .2rem;
+                }
+                &>i{
+                  display: inline-block;
+                  position: absolute;
+                  right: .1rem;
+                  top: .05rem;
+                  font-size: .36rem;
+                  z-index: 1;
+                  color: rgba(255, 0, 0, .1);
+                }
+                .itemNo{
+                  width: .44rem;
+                  position: relative;
+                  overflow: hidden;
+                  margin-left: .15rem;
+                  z-index: 2;
+                  a{
+                    width: 100%;
+                    display: block;
+                    padding-bottom: 100%;
+                    box-sizing: border-box;
+                    border: .01rem solid #eee;
+                    border-radius: 100%;
+                    position: relative;
+                    overflow: hidden;
+                    div{
+                      width: 100%;
+                      text-align: center;
+                      font-size: 0;
+                      white-space: nowrap;
+                      i{
+                        display: inline-block;
+                        font-size: .13rem;
+                        color: #666;
+                      }
+                    }
+                  }
+                }
+                &>div.flex-item{
+                  margin: 0 .1rem;
+                  position: relative;
+                  overflow: hidden;
+                  z-index: 2;
+                  &>div{
+                    width: 100%;
+                    position: relative;
+                    overflow: hidden;
+                    span{
+                      width: 100%;
+                      display: block;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                      white-space: nowrap;
+                      font-size: .13rem;
+                      color: #666;
+                      line-height: .24rem;
+                    }
+                    a{
+                      line-height: .22rem;
+                      color: #fb6b2f;
+                      font-size: .13rem;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/module/user/user.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" charset="utf-8" />
-  <link rel="stylesheet" href="//at.alicdn.com/t/font_775069_198sg7n0wo1.css">
+  <link rel="stylesheet" href="//at.alicdn.com/t/font_775069_mdkkdwmio2.css">
   <title>城的空间</title>
 </head>
 <body>