店铺图片

parent dff56320
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
class="container" class="container"
:style="`height: {{containerHeight}}px; marginTop: {{containerMargin}}px;`" :style="`height: {{containerHeight}}px; marginTop: {{containerMargin}}px;`"
> >
containerMargin{{ (containerHeight, containerHeight, containerMargin) }} <!-- containerMargin{{ (containerHeight, containerHeight, containerMargin) }} -->
<slot></slot> <slot></slot>
</view> </view>
</view> </view>
......
...@@ -33,9 +33,28 @@ ...@@ -33,9 +33,28 @@
</view> </view>
</view> </view>
</view> </view>
<view class="shop-info-score"></view> <view class="shop-info-right">
<view class="shop-info-score">
<view class="score-text">
<text class="score-num">4.5</text>
<text class="tj">推荐</text>
</view>
<view class="score-icon">
<wd-rate v-model="value" size="22rpx" space="8rpx" :active-color="['#FA5151']" />
</view>
</view>
<view class="shop-business-hours">
<texe>营业时间: 11:00-22:30</texe>
</view>
</view>
</view>
<view class="shop-info-bottom">
<view class="shop-address">
<text class="shop-distance">距您<150米 南明区</text>
<text class="shop-address-detail">南明区后巢乡花果园中环广场3号(M区3栋)一层104 号</text>
</view>
<view class="shop-map-phone"></view>
</view> </view>
<view class="shop-info-bottom"></view>
</view> </view>
</view> </view>
</view> </view>
...@@ -49,6 +68,7 @@ const swiperList = ref([ ...@@ -49,6 +68,7 @@ const swiperList = ref([
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg', 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/capybara.jpg',
'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg', 'https://registry.npmmirror.com/wot-design-uni-assets/*/files/panda.jpg',
]); ]);
const value = ref(4.5);
const handleClick = (e) => { const handleClick = (e) => {
console.log(e); console.log(e);
}; };
...@@ -89,6 +109,8 @@ const onChange = (e) => { ...@@ -89,6 +109,8 @@ const onChange = (e) => {
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
box-sizing: border-box;
padding-bottom: 20rpx;
.shop-info-detail { .shop-info-detail {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -121,11 +143,65 @@ const onChange = (e) => { ...@@ -121,11 +143,65 @@ const onChange = (e) => {
} }
} }
} }
.shop-info-score { .shop-info-right {
box-sizing: border-box; display: flex;
padding: 8rpx; flex-direction: column;
border-radius: 8px; justify-content: space-between;
background: linear-gradient(180deg, #fcdbdb 0%, rgba(255, 255, 255, 0.36) 100%); .shop-info-score {
// max-width: 62 * 2rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-self: end;
padding: 8rpx;
border-radius: 8px;
background: linear-gradient(180deg, #fcdbdb 0%, rgba(255, 255, 255, 0.36) 100%);
.score-text {
display: flex;
justify-content: space-between;
align-items: center;
color: #fa5151;
max-width: 62 * 2rpx;
.score-num {
font-size: 18 * 2rpx;
font-weight: bold;
}
.tj {
font-size: 11 * 2rpx;
color: #fa5151;
margin-left: 8rpx;
}
}
}
.shop-business-hours {
texe {
font-size: 8 * 2rpx;
color: #767676;
}
}
}
}
.shop-info-bottom {
border-top: 2rpx solid #efefef;
width: 100%;
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding: 20rpx 0;
align-items: center;
.shop-address {
display: flex;
flex-direction: column;
max-width: 245 * 2rpx;
.shop-distance {
font-size: 12 * 2rpx;
color: #3d3d3d;
}
.shop-address-detail {
font-size: 11 * 2rpx;
margin-top: 8rpx;
color: #abaaaa;
}
} }
} }
} }
......
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