diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..7f32e4b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+.vscode
+node_modules
\ No newline at end of file
diff --git a/App.vue b/App.vue
index 99f6e28..1b2489c 100644
--- a/App.vue
+++ b/App.vue
@@ -12,6 +12,7 @@
 	}
 </script>
 
-<style>
+<style lang="scss">
 	/*每个页面公共css */
-</style>
+	@import "uview-ui/index.scss";
+</style>
diff --git a/components/order-item/index.vue b/components/order-item/index.vue
new file mode 100644
index 0000000..1894615
--- /dev/null
+++ b/components/order-item/index.vue
@@ -0,0 +1,81 @@
+<template>
+	<view class="item" @click="toDetailsPage">
+		<image></image>
+		<view class="goods">
+			<view class="status" v-if="cur==4">待处理订单</view>
+			<view class="name u-line-1">心机小黑裙连衣裙赫本风夏季爆款...</view>
+			<view class="info">
+				<view class="num">共一件商品</view>
+				<view class="price">实付<span>￥199.9</span></view>
+			</view>
+		</view>
+	</view>
+</template>
+<script>
+export default {
+	data() {
+		return {}
+	},
+	props: {
+		cur: [Number, String]
+	},
+	methods: {
+		toDetailsPage() {
+			console.log(1)
+			uni.navigateTo({
+				url: '/pages/index/details'
+			});
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+.item {
+	margin: 0 auto 20rpx;
+	width: 690rpx;
+	height: 220rpx;
+	background: rgba(255,255,255,1);
+	border-radius: 10rpx;
+	padding: 30rpx;
+	display: flex; 
+	align-items: center;
+	> image {
+		width: 160rpx;
+		height: 160rpx;
+		flex-shrink: 0;
+		margin-right: 25rpx;
+		background-color: aqua;
+	}
+	.goods {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: center;
+		.status {
+			align-self: flex-end;
+			font-size: 26rpx;
+			color: rgba(255,49,49,1);
+			margin-bottom: 30rpx;
+		}
+		.name {
+			width: 439rpx;
+			font-size: 28rpx;
+			color: rgba(51,51,51,1);
+			margin-bottom: 30rpx;
+		}
+		.info {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			font-size: 26rpx;
+			color: rgba(102,102,102,1);
+			.price {
+				margin-left: 10rpx;
+				> span {
+					color: #FF780F;
+				}
+			}
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/main.js b/main.js
index 0656173..f32c60f 100644
--- a/main.js
+++ b/main.js
@@ -1,6 +1,9 @@
 import Vue from 'vue'
 import App from './App'
 
+import uView from "uview-ui";
+Vue.use(uView);
+
 Vue.config.productionTip = false
 
 App.mpType = 'app'
@@ -8,4 +11,4 @@ App.mpType = 'app'
 const app = new Vue({
     ...App
 })
-app.$mount()
+app.$mount()
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..34b1f21
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,13 @@
+{
+  "name": "demingshangjia",
+  "version": "1.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "uview-ui": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/uview-ui/-/uview-ui-1.3.3.tgz",
+      "integrity": "sha512-aDXZCptHhBCzuPujX9QyCV26y2dX7WgNpm3VX9+6fxoeA6eA8s4CneNTh5jrsKzPrUYbbEs9TSqmN7zIN3a9xQ=="
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..572e046
--- /dev/null
+++ b/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "demingshangjia",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "dependencies": {
+    "uview-ui": "^1.3.3"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "http://git.luyuan.tk/luyuan/demingshangjia.git"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/pages.json b/pages.json
index bf32f65..15cf7df 100644
--- a/pages.json
+++ b/pages.json
@@ -1,9 +1,29 @@
 {
-	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
+	"easycom": {
+		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
+	},
+	"pages": [
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "德铭阳光在线",
+				"app-plus": {
+                    "titleNView": {
+						"backgroundColor": "#FFFFFF",
+                        "titleColor": "#333333"
+					}
+				}
+			}
+		},
+		{
+			"path": "pages/index/details",
+			"style": {
+				"navigationBarTitleText": "订单详情",
+				"app-plus": {
+                    "titleNView": {
+                        "titleColor": "#333333"
+					}
+				}
 			}
 		}
 	],
@@ -13,4 +33,4 @@
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
 	}
-}
+}
diff --git a/pages/index/details.vue b/pages/index/details.vue
new file mode 100644
index 0000000..56b63e0
--- /dev/null
+++ b/pages/index/details.vue
@@ -0,0 +1,243 @@
+<template>
+	<view class="details">
+		<view class="goods-info">
+			<image></image>
+			<view class="info-right">
+				<view class="name u-line-1">心机小黑裙连衣裙赫本风夏季爆款...</view>
+				<view class="info">
+					<view class="num">共一件商品</view>
+					<view class="price">实付<span>￥199.9</span></view>
+				</view>
+			</view>
+		</view>
+		<view class="user-info">
+			<view class="info-title">收件人信息</view>
+			<view class="info-container">
+				<view>
+					<view class="title">姓名</view>
+					<view class="value">李先生</view>
+				</view>
+				<view>
+					<view class="title">手机号</view>
+					<view class="value">123456789</view>
+				</view>
+				<view>
+					<view class="title">收货地址</view>
+					<view class="value u-line-1">山东省临沂市兰山区XX路XX小区XX楼xx单元</view>
+				</view>
+			</view>
+		</view>
+		<view class="delivery">
+			<view class="title">派送方式</view>
+			<view class="methods">
+				<view :class="{active: cur==0}" @click="cur=0">人工送达</view>
+				<view :class="{active: cur==1}" @click="cur=1">指派外部骑手</view>
+			</view>
+			<view class="methods">
+				<view :class="{active: cur==0}" @click="cur=0">快递</view>
+				<view :class="{active: cur==1}" @click="cur=1">骑手</view>
+			</view>
+			<view class="btn">确认</view>
+		</view>
+		<u-popup v-model="show" mode="center" border-radius="10" class="delivery-popup">
+			<view class="title">骑手信息</view>
+			<view class="input-info">
+				<input type="text" placeholder="请输入您的姓名" v-model="name" />
+				<input type="text" placeholder="请输入您的手机号" v-model="phone" />
+				<input type="text" placeholder="请输入您的公司名称" v-model="company" />
+			</view>
+			<view class="btn">确认</view>
+		</u-popup>
+		<u-popup v-model="show" mode="center" border-radius="10" class="delivery-popup">
+			<view class="title">填写快递单号</view>
+			<view class="input-info">
+				<input type="text" placeholder="请输入快递单号" v-model="express" />
+			</view>
+			<view class="btn">确认</view>
+		</u-popup>
+	</view>
+</template>
+<script>
+export default {
+	data() {
+		return {
+			cur: Number,
+			show: false,
+			name: '',
+			phone: '',
+			company: ''
+		}
+	},
+	watch: {
+		cur(value) {
+			if(value == 1) {
+				this.show = true;
+			}
+		}
+	},
+	methods: {
+		showPopup() {
+			console.log(this.show);
+			
+			this.show = true;
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+.details {
+	display: flex;
+	flex-direction: column;
+	min-height: calc(100vh - var(--window-top));
+	background-color: #ECECEC;
+	.goods-info {
+		background-color: #FFFFFF;
+		padding: 30rpx;
+		display: flex;
+		align-items: center;
+		margin: 2rpx 0 20rpx;
+		> image {
+			width: 160rpx;
+			height: 160rpx;
+			border-radius: 10rpx;
+			flex-shrink: 0;
+			margin-right: 26rpx;
+			background-color: aqua;
+		}
+		.info-right {
+			.name {
+				width: 439rpx;
+				font-size: 28rpx;
+				color: rgba(51,51,51,1);
+				margin-bottom: 30rpx;
+			}
+			.info {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				font-size: 26rpx;
+				color: rgba(102,102,102,1);
+				.price {
+					margin-left: 10rpx;
+					> span {
+						color: #FF780F;
+					}
+				}
+			}	
+		}
+	}
+	.user-info {
+		.info-title {
+			font-size: 30rpx;
+			font-weight: 500;
+			color: rgba(51,51,51,1);
+			height: 88rpx;
+			background-color: #FFFFFF;
+			margin-bottom: 2rpx;
+			padding: 30rpx;
+		}
+		.info-container {
+			padding: 0 30rpx;
+			background-color: #FFFFFF;
+			margin-bottom: 20rpx;
+			> view {
+				height: 88rpx;
+				display: flex;
+				align-items: center;
+				color: rgba(51,51,51,1);
+				&:not(:last-child) {
+					border-bottom: 2rpx solid #ECECEC;
+				}
+				.title {
+					width: 150rpx;
+					font-size: 30rpx;
+					margin-right: 10rpx;
+				}
+				.value {
+					font-size: 26rpx;
+				}
+			}
+		}
+	}
+	.delivery {
+		flex: 1;
+		background-color: #FFFFFF;
+		padding: 30rpx;
+		position: relative;
+		.title {
+			font-size: 30rpx;
+			font-weight: 500;
+			color: rgba(51,51,51,1);
+			margin-bottom: 30rpx;
+		}
+		.methods {
+			display: flex;
+			flex-wrap: wrap;
+			> view {
+				font-size: 30rpx;
+				color: rgba(0,0,51,1);
+				width: 335rpx;
+				height: 80rpx;
+				border: 1rpx solid rgba(236,236,236,1);
+				background: rgba(236,236,236,1);
+				border-radius: 6rpx;
+				text-align: center;
+				line-height: 80rpx;
+				margin-bottom: 20rpx;
+				&:nth-child(2n-1) {
+					margin-right: 20rpx;
+				}
+			}
+			.active {
+				border: 1rpx solid #FF780F;
+				color: #FF780F;
+				background: #FFF1E6;
+			}
+		}
+		.btn {
+			position: absolute;
+			bottom: 40rpx;
+			left: 50%;
+			transform: translate(-50%, 0);
+			width: 690rpx;
+			height: 98rpx;
+			background: rgba(255,120,15,1);
+			border-radius: 49rpx;
+			font-size: 36rpx;
+			color: rgba(255,255,255,1);
+			text-align: center;
+			line-height: 98rpx;
+		}
+	}
+	.delivery-popup {
+		.title {
+			width: 420rpx;
+			font-size: 30rpx;
+			font-weight: 500;
+			color: rgba(51,51,51,1);
+			text-align: center;
+			line-height: 88rpx;
+			border-bottom: 2rpx solid #ECECEC;
+		}
+		.input-info {
+			> input {
+				font-size: 26rpx;
+				line-height: 88rpx;
+				padding: 30rpx;
+				border-bottom: 2rpx solid #ECECEC;
+			}
+		}
+		.btn {
+			margin: 20rpx auto;
+			width: 200rpx;
+			height: 60rpx;
+			background: rgba(255,120,15,1);
+			border-radius: 30rpx;
+			font-size: 28rpx;
+			color: rgba(255,255,255,1);
+			line-height: 60rpx;
+			text-align: center;
+		}
+	}
+}
+</style>
\ No newline at end of file
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 4ca2b92..0709aff 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -1,52 +1,144 @@
 <template>
-	<view class="content">
-		<image class="logo" src="/static/logo.png"></image>
-		<view class="text-area">
-			<text class="title">{{title}}</text>
+	<view class="home">
+		<view class="image-swiper">
+			<u-swiper :list="imageList" mode="dot" border-radius="20"></u-swiper>
+		</view>
+		<view class="tab-swiper">
+			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" active-color="#FF780F" inactive-color="#333333" font-size="26" height="98" :show-bar="false" swiperWidth="750" gutter="52"></u-tabs-swiper>
+		</view>
+		<swiper :current="swiperCurrent" @animationfinish="animationfinish">
+			<swiper-item class="swiper-item">
+				<scroll-view scroll-y style="height: 100%;width: 100%;" class="order-list">
+					<view v-for="(item, index) in 5" :key="index">
+						<OrderItem :cur="current"></OrderItem>
+					</view>
+				</scroll-view>
+			</swiper-item>
+			<swiper-item class="swiper-item">
+				<scroll-view scroll-y style="height: 100%;width: 100%;">
+					<view v-for="(item, index) in 5" :key="index">
+						<OrderItem :cur="current"></OrderItem>
+					</view>
+				</scroll-view>
+			</swiper-item>
+			<swiper-item class="swiper-item">
+				<scroll-view scroll-y style="height: 100%;width: 100%;">
+					<view v-for="(item, index) in 5" :key="index">
+						<OrderItem :cur="current"></OrderItem>
+					</view>
+				</scroll-view>
+			</swiper-item>
+			<swiper-item class="swiper-item">
+				<scroll-view scroll-y style="height: 100%;width: 100%;">
+					{{ current }}
+				</scroll-view>
+			</swiper-item>
+			<swiper-item class="swiper-item">
+				<scroll-view scroll-y style="height: 100%;width: 100%;">
+					<view v-for="(item, index) in 5" :key="index">
+						<OrderItem :cur="current"></OrderItem>
+					</view>
+				</scroll-view>
+			</swiper-item>
+			<swiper-item class="swiper-item">
+				<scroll-view scroll-y style="height: 100%;width: 100%;">
+					<view v-for="(item, index) in 15" :key="index">
+						<OrderItem :cur="current"></OrderItem>
+					</view>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+		<view class="release-btn">
+			<image src="/static/home/1.png"></image>
+			<view class="text">发布</view>
 		</view>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				title: 'Hello'
-			}
-		},
-		onLoad() {
-
-		},
-		methods: {
-
+import OrderItem from '@/components/order-item/index'
+export default {
+	data() {
+		return {
+			list: [{
+				name: '全部订单'
+			}, {
+				name: '试穿订单'
+			}, {
+				name: '待处理订单'
+			}, {
+				name: '投诉骑手'
+			}, {
+				name: '已完成订单'
+			}, {
+				name: '退货订单'
+			}],
+			imageList: [
+				{}, {}, {}
+			],
+			current: 0,
+			swiperCurrent: 0,
 		}
-	}
-</script>
+	},
+	components: {
+		OrderItem
+	},
+	onLoad() {
 
-<style>
-	.content {
+	},
+	methods: {
+		tabsChange(index) {
+			this.swiperCurrent = index;
+		},
+		animationfinish(e) {
+			let current = e.detail.current;
+			// this.$refs.uTabs.setFinishCurrent(current);
+			this.swiperCurrent = current;
+			this.current = current;
+		},
+	}
+}
+</script>
+<style lang="scss" scoped>
+.home {
+	min-height: calc(100vh - var(--window-top));
+	background-color: #ECECEC;
+	display: flex;
+	flex-direction: column;
+	> uni-swiper {
+		flex: 1;
+	}
+	.image-swiper {
+		background-color: #ffffff;
+		padding: 0 30rpx 16rpx;
+	}
+	.tab-swiper {
+		margin: 2rpx 0 20rpx 0;
+	}
+	.release-btn {
+		position: fixed;
+		bottom: 475rpx;
+		right: 30rpx;
+		width: 100rpx;
+		height: 100rpx;
+		background: rgba(255,120,15,1);
+		box-shadow: 0rpx 6rpx 6rpx 0rpx rgba(255,120,15,0.22);
+		border-radius: 50%;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
+		> image {
+			width: 36rpx;
+			height: 36rpx;
+			flex-shrink: 0;
+			margin-bottom: 2rpx;
+			background-color: aqua;
+		}
+		.text {
+			font-size: 20rpx;
+			color: rgba(255,255,255,1);
+		}
 	}
-
-	.logo {
-		height: 200rpx;
-		width: 200rpx;
-		margin-top: 200rpx;
-		margin-left: auto;
-		margin-right: auto;
-		margin-bottom: 50rpx;
-	}
-
-	.text-area {
-		display: flex;
-		justify-content: center;
-	}
-
-	.title {
-		font-size: 36rpx;
-		color: #8f8f94;
-	}
-</style>
+}
+</style>
\ No newline at end of file
diff --git a/static/image/home/1.png b/static/image/home/1.png
new file mode 100644
index 0000000..0623933
Binary files /dev/null and b/static/image/home/1.png differ
diff --git a/static/image/tabbar/hoem2.png b/static/image/tabbar/hoem2.png
new file mode 100644
index 0000000..293986f
Binary files /dev/null and b/static/image/tabbar/hoem2.png differ
diff --git a/uni.scss b/uni.scss
index 09ffb46..10bd7db 100644
--- a/uni.scss
+++ b/uni.scss
@@ -12,6 +12,8 @@
  * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
  */
 
+ @import 'uview-ui/theme.scss';
+
 /* 颜色变量 */
 
 /* 行为相关颜色 */