diff --git a/components/shop/shop.js b/components/shop/shop.js index 722c487..f249660 100644 --- a/components/shop/shop.js +++ b/components/shop/shop.js @@ -1,3 +1,5 @@ +const imgurl = require("../../utils/imgurl"); + Component({ properties: { mallList: { @@ -7,6 +9,7 @@ Component({ }, data: { + telJpgUrl: imgurl.teljpg.url, list: [], // 广场、商户列表 mallNum: 0, // 适用商户数量 }, @@ -68,7 +71,13 @@ Component({ this.setData({ list: arr }) - } + }, + + phone(e) { + tt.makePhoneCall({ + phoneNumber: e.target.dataset.merchantlinkphone + }); + }, }, ready() { diff --git a/components/shop/shop.less b/components/shop/shop.less index 8e4c696..75a94dd 100644 --- a/components/shop/shop.less +++ b/components/shop/shop.less @@ -2,6 +2,7 @@ display: block; height: auto; margin-top: 15rpx; + margin-bottom: 15rpx; background-color: #fff; .header { @@ -38,11 +39,14 @@ } .body { - border-bottom: 10rpx solid #f4f5f9; + // border-bottom: 10rpx solid #f4f5f9; .mall { + display: flex; + justify-content: space-between; + align-items: center; margin-top: 15rpx; - margin-bottom: 15rpx; + // margin-bottom: 15rpx; padding-left: 25rpx; padding-right: 65rpx; @@ -62,38 +66,42 @@ font-size: 28rpx; } } - } - .goExpand { - text-align: center; - font-size: 25rpx; - color: #a6a6a6; + .goExpand { + font-size: 25rpx; + color: #a6a6a6; - .rightArrowDown { - position: relative; - left: 50%; - transform: translate(-50%); - display: block; - width: 14rpx; - transform: rotate(90deg); - } + .text { + display: inline-block; + margin-right: 20rpx; + } - .rightArrowUp { - position: relative; - left: 50%; - transform: translate(-50%); - display: block; - width: 14rpx; - transform: rotate(-90deg); + .rightArrowDown { + display: inline-block; + position: relative; + top: 5rpx; + width: 14rpx; + transform: rotate(90deg); + } + + .rightArrowUp { + display: inline-block; + position: relative; + top: 5rpx; + width: 14rpx; + transform: rotate(-90deg); + } } } + + .shop { .posi { /* position: relative; */ width: 100%; background: #FFF; - margin-bottom: 20rpx; + margin-bottom: 5rpx; .posi_logo { position: relative; @@ -120,7 +128,7 @@ font-size: 32rpx; color: #333; letter-spacing: 0; - width: 500rpx; + width: 400rpx; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -129,7 +137,7 @@ .shopVoList { white-space: nowrap !important; overflow-y: scroll; - height: 90rpx !important; + height: 60rpx !important; width: 360rpx; font-size: 16px; color: #333; @@ -163,10 +171,10 @@ .certificationBox { position: absolute; - right: 30rpx; + right: 80rpx; top: 0; bottom: 0; - margin: auto; + // margin: auto; .certificationImg { width: 50rpx; @@ -204,7 +212,19 @@ height: 40rpx; } } + + .dividerInside { + width: 100%; + height: 5rpx; + background-color: #DCDFE6; + } } } + + .divider { + width: 100%; + height: 12rpx; + background-color: #f4f5f9; + } } } \ No newline at end of file diff --git a/components/shop/shop.ttml b/components/shop/shop.ttml index d233458..c57e84f 100644 --- a/components/shop/shop.ttml +++ b/components/shop/shop.ttml @@ -7,26 +7,29 @@ - - - {{item.mallName}} - - - - - - {{item.merchantVoList.length+'家门店适用'}} - - - + + + {{item.mallName}} + + + + + + {{item.merchantVoList.length+'家门店适用'}} + + + + + + - + + + \ No newline at end of file diff --git a/components/shop/shop.ttss b/components/shop/shop.ttss index cc6f0f5..eb8603f 100644 --- a/components/shop/shop.ttss +++ b/components/shop/shop.ttss @@ -2,6 +2,7 @@ display: block; height: auto; margin-top: 15rpx; + margin-bottom: 15rpx; background-color: #fff; } .components .header { @@ -33,12 +34,11 @@ width: 14rpx; margin: 24rpx 30rpx 0 10rpx; } -.components .body { - border-bottom: 10rpx solid #f4f5f9; -} .components .body .mall { + display: flex; + justify-content: space-between; + align-items: center; margin-top: 15rpx; - margin-bottom: 15rpx; padding-left: 25rpx; padding-right: 65rpx; } @@ -56,24 +56,25 @@ .components .body .mall .mallItem .title { font-size: 28rpx; } -.components .body .goExpand { - text-align: center; +.components .body .mall .goExpand { font-size: 25rpx; color: #a6a6a6; } -.components .body .goExpand .rightArrowDown { +.components .body .mall .goExpand .text { + display: inline-block; + margin-right: 20rpx; +} +.components .body .mall .goExpand .rightArrowDown { + display: inline-block; position: relative; - left: 50%; - transform: translate(-50%); - display: block; + top: 5rpx; width: 14rpx; transform: rotate(90deg); } -.components .body .goExpand .rightArrowUp { +.components .body .mall .goExpand .rightArrowUp { + display: inline-block; position: relative; - left: 50%; - transform: translate(-50%); - display: block; + top: 5rpx; width: 14rpx; transform: rotate(-90deg); } @@ -81,7 +82,7 @@ /* position: relative; */ width: 100%; background: #FFF; - margin-bottom: 20rpx; + margin-bottom: 5rpx; } .components .body .shop .posi .posi_logo { position: relative; @@ -103,7 +104,7 @@ font-size: 32rpx; color: #333; letter-spacing: 0; - width: 500rpx; + width: 400rpx; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; @@ -111,7 +112,7 @@ .components .body .shop .posi .posi_logo .shopVoList { white-space: nowrap !important; overflow-y: scroll; - height: 90rpx !important; + height: 60rpx !important; width: 360rpx; font-size: 16px; color: #333; @@ -140,10 +141,9 @@ } .components .body .shop .posi .posi_logo .certificationBox { position: absolute; - right: 30rpx; + right: 80rpx; top: 0; bottom: 0; - margin: auto; } .components .body .shop .posi .posi_logo .certificationBox .certificationImg { width: 50rpx; @@ -175,3 +175,13 @@ width: 40rpx; height: 40rpx; } +.components .body .shop .posi .dividerInside { + width: 100%; + height: 5rpx; + background-color: #DCDFE6; +} +.components .body .divider { + width: 100%; + height: 12rpx; + background-color: #f4f5f9; +}