罗世杰：feat：商铺列表初始化

components/ShowShopListItem/ShowShopListItem.vue

@@ -2,14 +2,29 @@
 	<view class="list-border">
 		<view class="list-container">
 			<view class="shop-list-img">
-				<u-image width="80px" height="80px" :src="imageUrl" border-radius='6px'></u-image>
+				<u-image width="80px" height="80px" :src="imageUrl" radius="8px"></u-image>
+			</view>
+			<view class="text-area">
+				<text>{{title}}</text>
+				<view class="pos-and-sqr">
+					<text>锦江区</text>
+					<text>200m2</text>
+					</view>
+				<view class="rent-and-date">
+					<text>租金{{price}}</text>
+					<text>发布日期{{date}}</text>
+				</view>
 			</view>
 		</view>
-		<view class="list-ads">
-			
+		<view class="list-ads" style="font-size: 14px;">
+			<view>
+				<text>已将该店推给 </text> 
+				<text style="color:#ce3b3b;margin: 0 4px;"> {{promotionNum}} </text> 
+				<text> 位潜在客户</text>
+			</view>
+			<text style="color:#ce3b3b">我也要推广>></text>
 		</view>
 	</view>
-	
 </template>
 
 <script>
@@ -20,6 +35,18 @@
 				default(){
 					return 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg'
 				}
+			},
+			promotionNum:{
+				type:Number,
+				default(){
+					return 23
+				}
+			},
+			title:{
+				type:String,
+				default(){
+					return "琴行铺面转让"
+				}
 			}
 			
 		},
@@ -37,15 +64,31 @@
 
 <style lang="scss" scoped>
 	.list-border {
-		padding: 10px;
-	}
-	.list-container {
-		height: 80px;
-		background-color: #fff;
-		background-color: #000;
 		margin: 10px;
-		.shop-list-img {
-			border-radius: $uni-border-radius-lg;
+		padding: 10px;
+		background-color: #fff;
+		border-radius: 7px;
+		.list-container {
+			display: flex;
+			height: 80px;
+			// background-color: #000;
+			margin-bottom: 5px;
+			.shop-list-img {
+				// border-radius: 8px;
+			}
+		}
+		.text-area {
+			margin-left: 10px;
+			display: flex;
+			flex-direction: column;
+			flex-wrap: wrap;
+		}
+		.list-ads {
+			border-top: 1px solid #f7f7f7;
+			padding-top: 5px;
+			display: flex;
+			justify-content: space-between;
 		}
 	}
+	
 </style>