商家详情添加联系方式

2code/web/h5_pro/src/views/shopDetails/index.vue

 <template>
     <div class="page-wrapper">
         <c-header title="商家详情"></c-header>
+
         <div class="shop-main-infro">
+            <div class="img" :style="{'background-image':`url(${shopData.storeHomePic})`}"></div>
+            <div class="infro-wrapper">
                 <div class="shop-name">{{shopData.storeName}}</div>
                 <div class="infro"><i class="iconfont icon-shijian"></i> {{shopData.storeBusinessTimeStart}}-{{shopData.storeBusinessTimeEnd}}    <i class="iconfont icon-xiaofei"></i>{{shopData.consumeInterval}}</div>
                 <div class="address">{{shopData.province}} {{shopData.cityName}} {{shopData.county}} {{shopData.storePosition}}</div>
             </div>
+        </div>
+
+
+        <s-infro-content title="商家二维码" type='2'>
+            <div class="contect-container">
+                <div class="ewm-img">
+                    <img :src="shopData.qrCode" alt="">
+                </div>
+                <!-- <div class="ewm-phone">{{shopData.contactNumber}}</div> -->
+            </div>
+        </s-infro-content>
+
+        <s-infro-content title="商家电话" type='2'>
+            <div class="contect-container">
+                <a :href="'tel:'+shopData.contactNumber">{{shopData.contactNumber}}</a>
+            </div>
+        </s-infro-content>
 
         <s-infro-content title="商家详情" :data="shopData.storeDetails" type='1'></s-infro-content>
         
@@ -72,28 +92,41 @@ export default {
 <style lang="less" scoped>
 @r:100rem;
 .shop-main-infro{
-    padding:30/@r;
+    position: relative;
+    margin-bottom: 20/@r;
+    .img{
+        height: 500/@r;
+        background: #dedede;
+        background-size: cover;
+        background-position: center center;
+    }
+    .infro-wrapper{
+        position: absolute;
+        width: 100%;
+        left: 0;
+        bottom: 0; 
+        padding: 10/@r 30/@r;
+        background: rgba(0, 0, 0, .5);
+
         .shop-name{
-        font-size: 40/@r;
-        color: #333;
+            font-size: 36/@r;
+            color: #fff;
             font-weight: 700
         }
         .brief{
             font-size: 32/@r;
-        color: #666;
-        margin-top: 10/@r;
+            color: #fff;
         }
         .address{
             font-size: 24/@r;
-        color: #666;
-        margin-top: 10/@r;
+            color: #fff;
         }
         .infro{
+            margin: 4/@r 0;
             font-size: 24/@r;
-        color: #999;
-        margin: 10/@r;
+            color: #fff;
             i{
-            color: #de4b4b;
+                color: #fff;
                 vertical-align: -4/@r;
 
                 &.icon-xiaofei{
@@ -101,6 +134,8 @@ export default {
                 }
             }
         }
+    }
+    
 }
 
 .employee-wrapper{
@@ -156,5 +191,22 @@ export default {
     margin-top: 150/@r;
 }
 
+.contect-container{
+    font-size: 32/@r;
+    .ewm-img{
+        width: 300/@r;
+        height: 300/@r;
+        img{
+            width: 100%;
+            height: 100%;
+        }
+    }
+    a{
+        color: #666;
+        font-weight: 700;
+    }
+    
+}
+
 </style>