diff --git a/pages/store/index.vue b/pages/store/index.vue
index ec92705..a6aa604 100644
--- a/pages/store/index.vue
+++ b/pages/store/index.vue
@@ -1,40 +1,334 @@
 <template>
-	<view class="content">
-		store
+	<view class="warpper">
+		<qnHeader class="header">
+			<view class="header-title">店铺首页</view>
+			<view class=""></view>
+		</qnHeader>
+		<view class="top-box">
+			<view class=""><image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image></view>
+			<view class="center">
+				<view class="title">东莞市隆兴纸业有限公司</view>
+				<view class="desc">全部商品 39 &nbsp; | &nbsp;上新 9</view>
+			</view>
+		</view>
+		<view class="search-box">
+			<uni-easyinput
+			  v-model="enterpriseName"
+			  :inputBorder="false"
+			  :clearSize="18"
+			  :placeholderStyle="'font-size:25rpx;text-align: center;font-weight: 400;color: rgba(34,34,34,0.75);'"
+			  placeholder="搜索"
+			  confirmType="search"
+			  type="text"
+			 class="easyinput"
+			 prefixIcon="search"
+			  @input="search"
+			  @confirm="addHistory"
+			/>
+		</view>
+		<scroll-list ref="list" :option="option" @load="upCallback" @refresh="downCallback" style="background-color: #FFFFFF;">
+			<view class="content" v-for="(item, index) in 4" :key="index">
+				<view class="box">
+					<view class="image-box">
+						<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
+					</view>
+					<view class="title">
+						博汇朱雀白卡
+					</view>
+					<view class="desc">
+						<view class="">
+							<image class="icon" src="/static/imgs/store/address-icon.png"></image>
+							<text style="padding-left: 6rpx;">广州市</text>
+							
+						</view>
+						<view class="">
+							库存:9600张
+						</view>
+					</view>
+					<view class="footer">
+						<view class="">
+							<text class="price">¥2300</text>
+							<text class="unit">/吨</text>
+						</view>
+						<view class="btn">
+							马上抢
+						</view>
+					</view>
+				</view>
+				<view class="box">
+					<view class="image-box">
+						<image class="image" src="https://qncloud.oss-cn-shenzhen.aliyuncs.com/ztb_pic/testPic.jfif" mode=""></image>
+					</view>
+					<view class="title">
+						博汇朱雀白卡
+					</view>
+					<view class="desc">
+						<view class="">
+							<image class="icon" src="/static/imgs/store/address-icon.png"></image>
+							<text style="padding-left: 6rpx;">广州市</text>
+							
+						</view>
+						<view class="">
+							库存:9600张
+						</view>
+					</view>
+					<view class="footer">
+						<view class="">
+							<text class="price">¥2300</text>
+							<text class="unit">/吨</text>
+						</view>
+						<view class="btn">
+							马上抢
+						</view>
+					</view>
+				</view>
+			</view>
+		</scroll-list>
 	</view>
 </template>
 
 <script>
-
+	import qnHeader from '@/components/qn-header/qn-header.vue'
 	export default {
-		
+		components: {qnHeader},
+		data() {
+			return {
+				option: {
+					size: 10,
+					auto: true,
+					emptyText: '暂无数据~',
+					background: '#F7F8FA',
+					disabled: false
+				},
+				params: {},
+				pagination: {
+					pageNum: 0, // 初始会执行一次下拉加载
+					pageSize: 10
+				},
+				enterpriseName: '',
+				list: [],
+			}
+		},
+		methods: {
+			getList() {
+				// return new Promise((resolve, reject) => {
+				// 	getDeviceInfo({ ...this.params, ...this.pagination })
+				// 		.then(res => {
+				// 			 res.records.forEach(el => {
+				// 				el.collapse = false
+				// 				el.isShowSelect = false
+				// 			})
+				// 			if (res) {
+				// 				if (this.pagination.pageNum == 1) {
+				// 					this.list = res.records
+				// 				} else {
+				// 					this.list = this.list.concat(res.records)
+				// 				}
+				// 				// this.list = []
+				// 				// this.list = [...this.list, ...[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]]
+				// 				resolve({ list: this.list, total: res.total })
+				// 			}
+				// 		})
+				// 		.catch(err => {
+				// 			reject(err)
+				// 		})
+				// })
+			},
+			downCallback() {
+				this.pagination.pageNum = 1
+				this.getList()
+					.then(({ list, total }) => {
+						this.$refs.list.refreshSuccess({ list, total })
+					})
+					.catch(() => {
+						this.$refs.list.refreshFail()
+					})
+			},
+			upCallback() {
+				this.pagination.pageNum++
+				this.getList()
+					.then(({ list, total }) => {
+						this.$refs.list.loadSuccess({ list, total })
+					})
+					.catch(() => {
+						this.$refs.list.loadFail()
+					})
+			},
+			search() {},
+			addHistory(value) {}
+		}
 	}
 </script>
 
-<style>
-	.content {
+<style lang="scss">
+.warpper {
+	.header {
+		justify-content: space-between;
+		.header-title {
+			font-size: 36rpx;
+			color: #000000;
+			letter-spacing: 0;
+			text-align: center;
+			font-weight: 500;
+		}
+		
+		.right-title {
+			font-size: 28rpx;
+			color: #007aff;
+			text-align: center;
+			line-height: 40rpx;
+			font-weight: 500;
+		}
+	}
+	.top-box {
 		display: flex;
-		flex-direction: column;
+		flex-direction: row;
 		align-items: center;
-		justify-content: center;
+		// justify-content: space-around;
+		height: 180rpx;
+		background: url('/static/imgs/store/store-icon.png') no-repeat;
+		background-size: 100%;
+		.image {
+			width: 100rpx;
+			height: 100rpx;
+			border-radius: 50%;
+			margin-left: 32rpx;
+		}
+		.right {
+			width: 140rpx;
+			
+		}
+		.center {
+			padding-left: 20rpx;
+		}
+		.title {
+			font-size: 34rpx;
+			color: #ffffff;
+			letter-spacing: 2rpx;
+			font-weight: 600;
+			padding-bottom: 12rpx;
+		}
+		.desc {
+			opacity: 0.75;
+			font-size: 28rpx;
+			color: #ffffff;
+			letter-spacing: 0;
+			font-weight: 500;
+			padding-right: 32rpx;
+			padding-top: 12rpx;
+			
+		}
+		.cut {
+			display: flex;
+			align-items: center;
+			font-size: 24rpx;
+			color: #ffffff;
+			letter-spacing: 0;
+			text-align: center;
+			font-weight: 400;
+			.cut-icon {
+				width: 29.42rpx;
+				height: 26.67rpx;
+				margin-left: 10rpx;
+			}
+		}
+		.set {
+			opacity: 0.75;
+			font-size: 28rpx;
+			color: #ffffff;
+			letter-spacing: 0;
+			font-weight: 500;
+			position: relative;
+			top: 39rpx;
+			left: 60rpx;
+		}
 	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
+	.search-box {
 		display: flex;
+		align-items: center;
 		justify-content: center;
+		padding: 0rpx 32rpx;
+		height: 104rpx;
+		background: #FFFFFF;
+		.easyinput {
+			height: 72rpx;
+			background: #F5F6F7;
+			border-radius: 16rpx;
+		}
 	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
+	.content {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		padding: 0rpx 32rpx 20rpx 32rpx;
+		.box {
+			// height: 514rpx;
+			background: #FFFFFF;
+			box-shadow: 0rpx 8rpx 28rpx 0rpx rgba(112,112,112,0.1);
+			border-radius: 10rpx;
+			.image {
+				width: 330rpx;
+				height: 330rpx;
+			}
+			.title {
+				padding: 0rpx 16rpx;
+				font-size: 28rpx;
+				color: #000000;
+				letter-spacing: 0;
+				font-weight: 500;
+				padding-top: 10rpx;
+				
+			}
+			.desc {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+				font-size: 20rpx;
+				color: #333333;
+				letter-spacing: 0;
+				font-weight: 400;
+				padding: 16rpx 16rpx 10rpx 16rpx;
+				.icon {
+					width: 16rpx;
+					height: 16rpx;
+				}
+			}
+			.footer {
+				display: flex;
+				flex-direction: row;
+				justify-content: space-between;
+				align-items: center;
+				padding: 10rpx 16rpx 37rpx 16rpx;
+				.price {
+					font-size: 34rpx;
+					color: #F5222D;
+					letter-spacing: 0;
+					font-weight: 600;
+				}
+				.unit {
+					font-size: 24rpx;
+					color: #F5222D;
+					letter-spacing: 0;
+					text-align: left;
+					font-weight: 400;
+				}
+				.btn {
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					// text-align: center;
+					width: 108rpx;
+					height: 48rpx;
+					background: #FF4849;
+					border-radius: 27rpx;
+					ont-size: 26rpx;
+					color: #FFFFFF;
+					letter-spacing: 0;
+					font-weight: 400;
+				}
+			}
+		}
 	}
+}
 </style>
diff --git a/static/imgs/store/address-icon.png b/static/imgs/store/address-icon.png
new file mode 100644
index 0000000..5184a40
Binary files /dev/null and b/static/imgs/store/address-icon.png differ
diff --git a/static/imgs/store/store-icon.png b/static/imgs/store/store-icon.png
new file mode 100644
index 0000000..d94e257
Binary files /dev/null and b/static/imgs/store/store-icon.png differ