Skip to content

S
store-system
Commit e502266a authored by 燕南天's avatar 燕南天
Browse files
Options

商家详情添加联系方式

parent e1d74d5a
Hide whitespace changes
Inline Side-by-side
Showing with 81 additions and 29 deletions
2code/web/h5_pro/src/views/shopDetails/index.vue
View file @ e502266a
<template> <template>
<div class="page-wrapper"> <div class="page-wrapper">
<c-header title="商家详情"></c-header> <c-header title="商家详情"></c-header>
<div class="shop-main-infro"> <div class="shop-main-infro">
<div class="shop-name">{{shopData.storeName}}</div> <div class="img" :style="{'background-image':`url(${shopData.storeHomePic})`}"></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="infro-wrapper">
<div class="address">{{shopData.province}} {{shopData.cityName}} {{shopData.county}} {{shopData.storePosition}}</div> <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> </div>
<s-infro-content title="商家详情" :data="shopData.storeDetails" type='1'></s-infro-content>
<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>
<s-infro-content title="在线员工" type='2'> <s-infro-content title="在线员工" type='2'>
<div class="employee-wrapper" v-if="workerData"> <div class="employee-wrapper" v-if="workerData">
...@@ -72,35 +92,50 @@ export default { ...@@ -72,35 +92,50 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
@r:100rem; @r:100rem;
.shop-main-infro{ .shop-main-infro{
padding:30/@r; position: relative;
.shop-name{ margin-bottom: 20/@r;
font-size: 40/@r; .img{
color: #333; height: 500/@r;
font-weight: 700 background: #dedede;
} background-size: cover;
.brief{ background-position: center center;
font-size: 32/@r;
color: #666;
margin-top: 10/@r;
} }
.address{ .infro-wrapper{
font-size: 24/@r; position: absolute;
color: #666; width: 100%;
margin-top: 10/@r; left: 0;
} bottom: 0;
.infro{ padding: 10/@r 30/@r;
font-size: 24/@r; background: rgba(0, 0, 0, .5);
color: #999;
margin: 10/@r; .shop-name{
i{ font-size: 36/@r;
color: #de4b4b; color: #fff;
vertical-align: -4/@r; font-weight: 700
}
&.icon-xiaofei{ .brief{
margin-left: 20/@r; font-size: 32/@r;
color: #fff;
}
.address{
font-size: 24/@r;
color: #fff;
}
.infro{
margin: 4/@r 0;
font-size: 24/@r;
color: #fff;
i{
color: #fff;
vertical-align: -4/@r;
&.icon-xiaofei{
margin-left: 20/@r;
}
} }
} }
} }
} }
.employee-wrapper{ .employee-wrapper{
...@@ -156,5 +191,22 @@ export default { ...@@ -156,5 +191,22 @@ export default {
margin-top: 150/@r; 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> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment