You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

203 lines
4.0 KiB
Vue

<template>
<view class="shopItem">
<view class="left">
<image class="shopIcon" :src="shopIcon"></image>
</view>
<view class="right">
<text class="shopTitle">{{shopName}}</text>
<view class="secondPart">
<u-rate :count="count" v-model="value" allowHalf="true"></u-rate>
<text class="rateValue">{{value}}</text>
<text class="sales">月售 {{sales}}</text>
</view>
<view class="thridPart">
<view class="label1">
<image src="https://files.hecrab.com/crab-net/cloud-store-list-1.png" mode="aspectFit"></image>
<text>验蟹师品质保</text>
</view>
<view class="label2">
<image src="https://files.hecrab.com/crab-net/cloud-store-list-2.png" mode="aspectFit"></image>
<text>一件代发</text>
</view>
<view class="label3">
<image src="https://files.hecrab.com/crab-net/cloud-store-list-3.png" mode="aspectFit"></image>
<text>批发</text>
</view>
</view>
<view class="shopCommodity" >
<view class="shopCommodityCon" v-for="(item) in 10">
<image src="https://wx3.sinaimg.cn/large/006upAuggy1hs44n9w981j30u00u0te3.jpg"></image>
<text> susu福福 </text>
<view class="price"> 0.60 </view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
props:{
shopName:{
type:String,
required:true
},
shopIcon:{
type:String,
required:true
},
value:{
type:Number,
required:true
},
},
data(){
return{
count: 5,
sales:28773,
value:this.value,
}
}
}
</script>
<style lang="scss">
.shopItem{
width: 678rpx;
height: 396rpx;
background: #FFFFFF;
border-radius: 20rpx;
padding: 16rpx;
margin: 0 auto;
display: flex;
margin-bottom: 20rpx;
}
.shopIcon{
width: 144rpx;
height: 144rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 20rpx 20rpx;
border: 2rpx solid rgba(0,0,0,0.1);
}
.right{
margin-left: 12rpx;
width: 490rpx;
height: 364rpx;
.shopTitle{
font-size: 32rpx;
font-weight: 600;
}
.secondPart{
width: 490rpx;
height: 34rpx;
border-radius: 0rpx 0rpx 0rpx 0rpx;
display: flex;
margin-top: 16rpx;
position: relative;
.rateValue{
font-weight: 400;
font-size: 24rpx;
color: #FF480B;
line-height: 34rpx;
margin-left: 4rpx;
}
.sales{
text-align: center;
position: absolute;
right: 0;
font-weight: 400;
font-size: 24rpx;
color: #999999;
line-height: 34rpx;
}
}
.thridPart{
width: 492rpx;
height: 42rpx;
margin-top: 18rpx;
display: flex;
justify-content: space-between;
.label1{
width: 204rpx;
border-radius: 8rpx 8rpx 8rpx 8rpx;
border: 2rpx solid rgba(155,118,56,0.3);
display: flex;
justify-content: center;
>image{
width: 32rpx;
height: 32rpx;
}
>text{
font-weight: 500;
font-size: 24rpx;
color: #9B7638;
margin-left: 2rpx;
}
}
.label2{
width: 156rpx;
border-radius: 12rpx;
border: 2rpx solid rgba(6,115,237,0.3);
display: flex;
justify-content: center;
>image{
width: 32rpx;
height: 32rpx;
}
>text{
font-weight: 500;
font-size: 24rpx;
color: #0673ED;
margin-left: 2rpx;
}
}
.label3{
width: 108rpx;
border-radius: 8rpx;
border: 2rpx solid rgba(249,64,64,0.3);
display: flex;
justify-content: center;
>image{
width: 32rpx;
height: 32rpx;
}
>text{
font-weight: 500;
font-size: 24rpx;
color: #F94040;
margin-left: 2rpx;
}
}
}
.shopCommodity{
margin-top: 20rpx;
display: flex;
overflow-x: auto;
.shopCommodityCon{
width: 120rpx;
margin-right: 20rpx;
>image{
width: 120rpx;
height: 120rpx;
}
>text{
font-weight: 300;
font-size: 24rpx;
color: #999999;
}
.price{
font-weight: 500;
font-size: 24rpx;
color: #FF3C26;
&::before {
content: "¥";
font-size: 20rpx;
color: #FF3C26;
}
}
}
}
}
</style>