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.
206 lines
4.0 KiB
Vue
206 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-top: 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{
|
|
width: 506rpx;
|
|
height: 196rpx;
|
|
margin-top: 20rpx;
|
|
display: flex;
|
|
overflow-x: auto;
|
|
.shopCommodityCon{
|
|
width: 120rpx;
|
|
height: 196rpx;
|
|
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> |