Browse Source

H5:点单页新增下载app按钮

panyong 3 years ago
parent
commit
beb3ae48d8

BIN
htmldev/dashboard/src/views/sell/aflogo/image/ic_next@2x.png


+ 38 - 5
htmldev/dashboard/src/views/sell/aflogo/index.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="header">
     <div class="wrap">
+      <a :href="downloadLink" class="download-app">
+        <span>下载“听邦APP”存取酒、预定座位、演出计划</span>
+        <img alt="" src="./image/ic_next@2x.png">
+      </a>
       <img alt="" class="logo" src="./image/sell_logo@2x.png">
       <p class="title">AF HOUSE音乐现场</p>
       <p class="outlet-name">
@@ -12,6 +16,8 @@
 </template>
 
 <script>
+import { platform } from '@/utils/platform'
+
 export default {
   name: 'index',
   props: {
@@ -21,6 +27,11 @@ export default {
         return {}
       }
     }
+  },
+  computed: {
+    downloadLink () {
+      return platform.android ? 'https://a.app.qq.com/o/simple.jsp?pkgname=com.tb.tingbang&g_f=1000047' : 'https://apps.apple.com/cn/app/%E5%90%AC%E9%82%A6/id1573430338'
+    }
   }
 }
 </script>
@@ -31,7 +42,6 @@ export default {
   left: 0;
   top: 0;
   width: 375px;
-  height: 107px;
   padding-top: 17px;
 
   &:before {
@@ -41,7 +51,7 @@ export default {
     content: '';
     display: block;
     width: 100%;
-    height: 63px;
+    height: 93px;
     background: linear-gradient(45deg, #000000 0%, #525050 100%);
   }
 
@@ -51,20 +61,43 @@ export default {
     top: 0;
     z-index: 1;
     width: 355px;
-    height: 80px;
-    padding: 16px 0 0 16px;
+    padding: 3px 0 16px;
     margin: 0 auto;
     background: #FFFFFF;
     box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.04);
     border-radius: 8px;
 
+    .download-app {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      width: 98%;
+      padding: 6px 20px 6px 6px;
+      margin: 0 auto 15px;
+      border-radius: 8px 8px 0 0;
+      background: #FCF0E8;
+
+      span {
+        font-size: 14px;
+        color: #E3593B;
+        line-height: 20px;
+      }
+
+      img {
+        height: 12px;
+        margin-left: 16px;
+      }
+    }
+
     .logo {
       display: block;
       width: 130px;
       height: 20px;
+      margin-left: 16px;
     }
 
     .title {
+      padding-left: 16px;
       margin-top: 8px;
       font-size: 14px;
       color: #736F6F;
@@ -75,7 +108,7 @@ export default {
   .outlet-name {
     position: absolute;
     right: 0;
-    top: 16px;
+    top: 52px;
     z-index: 1;
     display: flex;
     align-items: center;

+ 5 - 2
htmldev/dashboard/src/views/sell/goods/index.vue

@@ -253,11 +253,10 @@ export default {
 .goods {
   display: flex;
   position: absolute;
-  top: 107px;
+  top: 139px;
   bottom: 68px;
   width: 100%;
   overflow: hidden;
-  background: #fff;
 
   .menu-wrapper {
     flex: 0 0 100px;
@@ -303,6 +302,10 @@ export default {
 .foods-wrapper {
   flex: 1;
 
+  .food-list {
+    background: #fff;
+  }
+
   .title {
     padding: 10px 0 20px 19px;
     height: 42px;