diff --git a/src/components/front/info-top.vue b/src/components/front/info-top.vue
index 9706974..e2410ab 100644
--- a/src/components/front/info-top.vue
+++ b/src/components/front/info-top.vue
@@ -58,15 +58,14 @@
 					v-model="state.buyForm.quantity" :min="1" :max="10" @change="handleChange" />
 			</el-form-item>
 			<el-form-item prop="title"	label="总价"	>
-				<el-input disabled v-model="state.buyForm.total" />
+				<el-input-number disabled
+					v-model="state.buyForm.total" :min="1"  />
 			</el-form-item>
 			<el-form-item>
 				<el-button type="primary" @click="buySubmitForm(formRef)">确定</el-button>
 			</el-form-item>
 		</el-form>
 	</el-drawer>
-
-
 </template>
 <script setup lang="ts">
 import { reactive } from 'vue'
diff --git a/src/layouts/frontUserInfo.vue b/src/layouts/frontUserInfo.vue
new file mode 100644
index 0000000..caeecd0
--- /dev/null
+++ b/src/layouts/frontUserInfo.vue
@@ -0,0 +1,54 @@
+<!--前端模板-->
+<template>
+	<div class="common-layout">
+		<el-container>
+			<el-header>
+			<nav-navigation1></nav-navigation1>
+			</el-header>
+			<el-main class="main">
+				<div class="container">
+					<el-row :gutter="20">
+						<el-col :span="6">
+							<el-menu
+								default-active=""
+								router
+							>
+								<el-menu-item  v-for="item in state.userMenu" :index="item.path">
+									<span>{{item.name}}</span>
+								</el-menu-item>
+							</el-menu>
+						</el-col>
+						<el-col :span="18">
+							<router-view></router-view>
+						</el-col>
+					</el-row>
+				</div>
+			</el-main>
+		</el-container>
+	</div>
+</template>
+
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+const  state = reactive({
+	userMenu:[
+		{name: '个人中心', path: '/front/user'},
+		{name: '用户订单', path: '/front/user/order'},
+	]
+})
+
+</script>
+<style scoped>
+
+.main{
+	width: 100%;
+	height: calc(100vh - 60px);
+	background-color: #f3f3f4;
+}
+.container{
+	width: 1200px;
+	margin: 0 auto;
+}
+
+</style>
diff --git a/src/pages/front/user/index.vue b/src/pages/front/user/index.vue
new file mode 100644
index 0000000..c9d3cf5
--- /dev/null
+++ b/src/pages/front/user/index.vue
@@ -0,0 +1,90 @@
+<!--用户详情-->
+<template>
+	<el-form
+		ref="formRef"
+		style="max-width: 600px"
+		:model="state.userInfo"
+		label-width="auto"
+
+	>
+		<el-form-item
+			prop="username"
+			label="用户名"
+			:rules="[
+        {
+          required: true,
+          message: '用户名不能为空',
+          trigger: 'blur',
+        },
+
+      ]"
+		>
+			<el-input v-model="state.userInfo.username" />
+		</el-form-item>
+		<el-form-item
+			prop="nickName"
+			label="用户昵称"
+			:rules="[
+        {
+          required: true,
+          message: '用户昵称不能为空',
+          trigger: 'blur',
+        }
+      ]"
+		>
+			<el-input v-model="state.userInfo.nickName" />
+		</el-form-item>
+		<el-form-item
+			prop="password"
+			label="密码"
+			:rules="[
+        {
+          required: true,
+          message: '密码不能为空',
+          trigger: 'blur',
+        },
+      ]"
+		>
+			<el-input v-model="state.userInfo.password" />
+		</el-form-item>
+		<el-form-item>
+			<el-button type="primary" @click="submitForm(formRef)">提交</el-button>
+		</el-form-item>
+	</el-form>
+</template>
+<script setup lang="ts">
+import type { FormInstance } from 'element-plus'
+import { reactive } from 'vue'
+const formRef = ref<FormInstance>()
+const state = reactive({
+	userInfo: {}
+})
+/**
+ * 提交
+ * @param formEl
+ */
+const submitForm = (formEl: FormInstance | undefined) => {
+	if (!formEl) return
+	formEl.validate((valid) => {
+		if (valid) {
+			console.log('submit!')
+		} else {
+			console.log('error submit!')
+		}
+	})
+}
+</script>
+
+
+
+
+<style scoped>
+
+</style>
+<route lang="json">
+{
+"meta": {
+"layout": "frontUserInfo"
+}
+}
+</route>
diff --git a/src/pages/front/user/order.vue b/src/pages/front/user/order.vue
new file mode 100644
index 0000000..d7aa6cb
--- /dev/null
+++ b/src/pages/front/user/order.vue
@@ -0,0 +1,76 @@
+<!--用户详情-->
+<template>
+
+	<el-tabs v-model="state.activeName"  @tab-click="handleClick">
+		<el-tab-pane v-for="status in state.getOrderStatus" :label="status.name" :name="status.status">
+			<el-table
+				:data="state.getList"
+				style="width: 100%"
+			>
+				<el-table-column prop="date" label="Date" width="180" />
+				<el-table-column prop="name" label="Name" width="180" />
+				<el-table-column prop="address" label="Address" />
+				<el-table-column  label="操作" min-width="120">
+					<template #default>
+						<el-button link type="primary" size="small"  v-if="state.activeName == 1">立即付款</el-button>
+						<el-button link type="primary" size="small" v-if="state.activeName == 3">确认收货</el-button>
+						<el-button link type="primary" size="small" v-if="state.activeName == 4">评价</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</el-tab-pane>
+	</el-tabs>
+</template>
+<script setup lang="ts">
+import { reactive } from 'vue'
+const state = reactive({
+	activeName:1,
+	getOrderStatus:[
+		{name:"待付款",status:1},
+		{name:"未发货",status:2},
+		{name:"待收货",status:3},
+		{name:"待评价",status:4},
+	],
+	getList:[
+		{
+			date: '2016-05-03',
+			name: 'Tom',
+			address: 'No. 189, Grove St, Los Angeles',
+		},
+		{
+			date: '2016-05-02',
+			name: 'Tom',
+			address: 'No. 189, Grove St, Los Angeles',
+		},
+		{
+			date: '2016-05-04',
+			name: 'Tom',
+			address: 'No. 189, Grove St, Los Angeles',
+		},
+		{
+			date: '2016-05-01',
+			name: 'Tom',
+			address: 'No. 189, Grove St, Los Angeles',
+		},
+	]
+})
+
+/**
+ * 获取列表数据
+ */
+function getList() {
+
+}
+</script>
+
+
+<style scoped>
+
+</style>
+<route lang="json">
+{
+"meta": {
+"layout": "frontUserInfo"
+}
+}
+</route>