罗世杰：feat&fix：修复notice处的bug，完成商铺展示列表

components/SearchShopListItem/SearchShopListItem.vue

@@ -0,0 +1,103 @@
+<template>
+	<view class="list-border">
+		<view class="list-container">
+			<view class="text-area">
+				<text>{{shopInfo.title}}</text>
+				<view class="pos-and-sqr">
+						<view>
+							<text>{{shopInfo.sqr}}m2</text>
+						</view>
+						<view>
+							<text>{{shopInfo.uname}}</text>
+						</view>
+						<view>
+							<text>{{shopInfo.phoneNum}}</text>
+						</view>
+					</view>
+				<view class="rent-and-date">
+					<text>{{shopInfo.category}}</text>
+					<text>发布日期：{{shopInfo.pos}}</text>
+					<text>发布日期：{{shopInfo.date}}</text>
+				</view>
+			</view>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			shopInfo: {
+				type:Object,
+				default(){
+					return {
+						title: '寻找旺铺,200平米左右，寻找旺铺,200平米左右寻找旺铺,200平米左右寻找旺铺,200平米左右',
+						price: 5000,
+						date: '2023-11-02',
+						phoneNum: 13348946108,
+						pos: '锦江区',
+						category: '餐饮美食',
+						uname: '王先生',
+						sqr: 200
+					}
+				}
+			},
+			
+			
+		},
+		data() {
+			return {
+				
+			}
+			
+		},
+		computed: {
+			
+		}
+	}
+</script>
+
+<style lang="scss">
+	.list-border {
+		margin: 10px 0;
+		padding: 10px;
+		background-color: #fff;
+		border-radius: 7px;
+		box-shadow: 0 1px 2px 0 rgba(224, 224, 224, 0.50);
+		.list-container {
+			display: flex;
+			height: 80px;
+			margin-bottom: 5px;			
+			font-size: 12px;
+		}
+		.text-area {
+			margin-left: 10px;
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			> text {
+				font-size: 14px;
+			}
+			.pos-and-sqr {
+				display: flex;
+				text {
+					margin-right: 24px;
+					color: #359867;
+				}
+			}
+			.rent-and-date {
+				text {
+					margin-right: 6px;
+					color: #CC3333;
+				}
+			}
+		}
+		.list-ads {
+			border-top: 1px solid #f7f7f7;
+			padding-top: 5px;
+			display: flex;
+			justify-content: space-between;
+		}
+	}
+</style>

components/ShowShopList/ShowShopList.vue

@@ -8,6 +8,9 @@
 </template>
 
 <script>
+	/**
+	 * @property {Array}    shopInfoList     对象数组，（带图片）需要展示的商铺列表
+	 */
 	export default {
 		name:"ShowShopList",
 		data() {
@@ -24,15 +27,19 @@
 							imageUrl: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg',
 							title: '琴行铺面转让',
 							promotionNum: 23,
-							price: 5000,
-							date: '2023-11-02'
+							price: 6000,
+							date: '2023-11-02',
+							pos: '锦江区',
+							sqr: 100
 						},
 						{
 							imageUrl: 'https://alifei01.cfp.cn/creative/vcg/800/new/VCG41175510742.jpg',
 							title: '琴行铺面转让',
 							promotionNum: 28,
-							price: 8000,
-							date: '2023-11-02'
+							price: 5000,
+							date: '2023-11-02',
+							pos: '锦江区',
+							sqr: 200
 						}
 					]
 				}

components/ShowShopListItem/ShowShopListItem.vue

@@ -5,13 +5,19 @@
 				<u-image width="80px" height="80px" :src="shopInfo.imageUrl" radius="8px"></u-image>
 			</view>
 			<view class="text-area">
-				<text>{{shopInfo.title}}</text>
+				<text style="font-weight: 500;">{{shopInfo.title}}</text>
 				<view class="pos-and-sqr">
 						<view>
-							<text>锦江区</text>
+							<view>
+								<u-image src="/static/shoplist/sy_icon_lbdw.png" width="12px" height="15px"></u-image>
+							</view>
+							<text>{{shopInfo.pos}}</text>
 						</view>
 						<view>
-							<text>200m2</text>
+							<view>
+								<u-image src="/static/shoplist/sy_icon_lbpm.png" width="12px" height="15px"></u-image>
+							</view>
+							<text>{{shopInfo.sqr}}m2</text>
 						</view>
 					</view>
 				<view class="rent-and-date">
@@ -32,6 +38,9 @@
 </template>
 
 <script>
+	/**
+	 * @property shopInfo {Object}  传入商铺对象数据
+	 */
 	export default {
 		props: {
 			shopInfo: {
@@ -42,7 +51,9 @@
 						title: '琴行铺面转让',
 						promotionNum: 23,
 						price: 5000,
-						date: '2023-11-02'
+						date: '2023-11-02',
+						pos: '锦江区',
+						sqr: 200
 					}
 				}
 			},
@@ -63,7 +74,7 @@
 
 <style lang="scss" scoped>
 	.list-border {
-		margin-top: 10px;
+		margin: 10px 0;
 		padding: 10px;
 		background-color: #fff;
 		border-radius: 7px;
@@ -71,7 +82,7 @@
 		.list-container {
 			display: flex;
 			height: 80px;
-			margin-bottom: 5px;			
+			margin-bottom: 10px;			
 			font-size: 12px;
 		}
 		.text-area {
@@ -85,12 +96,20 @@
 			.pos-and-sqr {
 				display: flex;
 				text {
-					margin-right: 6px;
 					color: #359867;
+					line-height: 12px;
+				}
+				>view {
+					margin-right: 24px;
+					display: flex;
+					>view {
+						margin-right: 4px;
+					}
 				}
 			}
 			.rent-and-date {
 				text {
+					font-weight: 500;
 					margin-right: 6px;
 					color: #CC3333;
 				}

pages/index/HomeNoticeBar.vue

@@ -0,0 +1,52 @@
+<template>
+	<view class="news-box-bg">
+		<view class="hot-news-img">
+			<u-image src="/static/shoplist/sy_icon_zxzx.png" width='55px' height='22px'/>
+		</view>
+		<view class="news-box">
+			<u-notice-bar
+				:text="text"
+				bgColor="#fff"
+				customStyle="width:70vw"
+				color="#232323"
+				icon=" "
+			/>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	/**
+	 * @property @property {String} 需要显示的消息 
+	 */
+	export default {
+		props: {
+			text: {
+				type: String,
+				default() {
+					return '寒雨连江夜入吴 平明送客楚山孤 洛阳亲友如相问 一片冰心在玉壶'
+				}
+			}
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	.news-box-bg {
+		display: flex;
+		border-radius: 8px;
+		background-color: #fff;
+		box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
+		
+		.hot-news-img {
+			margin-left: 6px;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+		}
+		
+		
+	}
+	
+</style>

pages/index/index.vue

@@ -3,21 +3,24 @@
 		<InputAndSwiper></InputAndSwiper>
 		<view class="home-content">
 			<HomeNavCard></HomeNavCard>
-			<view class="news-box"><u-notice-bar :text="newsTextLists" bgColor="#fff"></u-notice-bar></view>
-			<ShowShopList></ShowShopList>
+			<HomeNoticeBar></HomeNoticeBar>
+			<ShowShopList/>
+			<SearchShopListItem></SearchShopListItem>
+			<SearchShopListItem></SearchShopListItem>
 		</view>
 		<TabBar :current-page="0"></TabBar>
 	</view>
 </template>
 
 <script>
+	import HomeNoticeBar from "./HomeNoticeBar.vue"
 	export default {
 		components: {
-
+			HomeNoticeBar
 		},
 		data() {
 			return {
-				newsTextLists: '寒雨连江夜入吴 平明送客楚山孤 洛阳亲友如相问 一片冰心在玉壶'
+				
 			}
 		},
 		onLoad() {
@@ -37,8 +40,5 @@
 			margin: 0 10px;
 		}
 	}
-	.news-box {
-		border-radius: 8px;
-		box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
-	}
+	
 </style>