diff --git a/src/App.vue b/src/App.vue
index 61dc1be..d8656bc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,10 +3,6 @@
 </template>
 
 <style>
-/* a {
-	color: rgba(37, 99, 235);
-} */
-
 p {
 	padding: 0 10px;
 }
diff --git a/src/components/Heads.vue b/src/components/Heads.vue
index 81e96e1..352b705 100644
--- a/src/components/Heads.vue
+++ b/src/components/Heads.vue
@@ -37,7 +37,6 @@
           message: '原始密码不能为空',
           trigger: 'blur',
         },
-
       ]"
 				>
 					<el-input v-model="state.dynamicValidateForm.password" />
diff --git a/src/components/front/carousel.vue b/src/components/front/carousel.vue
new file mode 100644
index 0000000..f837f67
--- /dev/null
+++ b/src/components/front/carousel.vue
@@ -0,0 +1,34 @@
+<template>
+	<el-row>
+		<el-col :span="24">
+			<el-carousel :height="height" motion-blur>
+				<el-carousel-item v-for="item in state.item" :key="item">
+					<el-image  :src="item.img" fit="fill" />
+				</el-carousel-item>
+			</el-carousel>
+		</el-col>
+	</el-row>
+</template>
+<script setup lang="ts">
+import { reactive } from 'vue'
+
+const props = defineProps({
+	height: {
+		type: String,
+		default: '300px',
+	},
+})
+const state = reactive({
+	item:[
+		{img:"https://img2.epetbar.com/2024-12/31/10/973909536cb5d8845253a118bd2ace20.jpg?x-oss-process=style/water"},
+		{img:"https://img2.epetbar.com/2024-12/31/10/973909536cb5d8845253a118bd2ace20.jpg?x-oss-process=style/water"},
+		{img:"https://img2.epetbar.com/2024-12/31/10/973909536cb5d8845253a118bd2ace20.jpg?x-oss-process=style/water"},
+		{img:"https://img2.epetbar.com/2024-12/31/10/973909536cb5d8845253a118bd2ace20.jpg?x-oss-process=style/water"},
+	]
+})
+</script>
+<style scoped>
+:deep(.el-image){
+	border-radius: 10px;
+}
+</style>
diff --git a/src/components/front/info-bottom.vue b/src/components/front/info-bottom.vue
new file mode 100644
index 0000000..1692b4f
--- /dev/null
+++ b/src/components/front/info-bottom.vue
@@ -0,0 +1,57 @@
+<!--详情底部-->
+<template>
+	<el-row :gutter="20">
+		<el-col :span="14">
+			<!--评论区-->
+			<div class="comment"  v-for="item in state.commentList">
+				<el-row :gutter="20">
+					<el-col :span="3">{{ item.userName }}</el-col>
+					<el-col :span="6">
+						<span class="time">
+				{{item.createTime}}
+						</span>
+					</el-col>
+				</el-row>
+				<div class="content">
+					{{ item.content }}
+				</div>
+					<el-divider />
+				</div>
+		</el-col>
+		<!--热门-->
+		<el-col :span="10">
+			<item2></item2>
+		</el-col>
+	</el-row>
+</template>
+<script setup lang="ts">
+import Item2 from '~/components/front/item2.vue'
+const  state =reactive(<any>{
+	commentList:[
+		{userName:"小人",content:"的电影影视作品,影片的导演是凯莉",createTime:"2024-09-30 23:15:50"},
+		{userName:"小人",content:"的电影影视作品,影片的导演是凯莉",createTime:"2024-09-30 23:15:50"},
+		{userName:"小人",content:"的电影影视作品,影片的导演是凯莉",createTime:"2024-09-30 23:15:50"},
+		{userName:"小人",content:"的电影影视作品,影片的导演是凯莉",createTime:"2024-09-30 23:15:50"},
+		{userName:"小人",content:"的电影影视作品,影片的导演是凯莉",createTime:"2024-09-30 23:15:50"},
+	]
+})
+</script>
+<style scoped>
+.comment{
+	color: #666;
+	font-size: 13px;
+	word-wrap: break-word;
+	.content{
+		padding-top: 15px;
+	}
+	.time{
+		color: #aaa;
+	}
+}
+:deep(.el-image){
+	border-radius: 10px;
+	height: 420px;
+	margin-left: 30px;
+
+}
+</style>
diff --git a/src/components/front/info-top.vue b/src/components/front/info-top.vue
new file mode 100644
index 0000000..f1987a5
--- /dev/null
+++ b/src/components/front/info-top.vue
@@ -0,0 +1,150 @@
+<!--详情 顶部-->
+<template>
+	<el-row :gutter="20" class="info">
+		<el-col :span="10">
+<!--			详情图片-->
+			<el-image  :src="state.info.url" fit="contain" />
+		</el-col>
+		<el-col :span="14">
+<!--			标题-->
+			<h1>{{state.info.title}}</h1>
+<!--			简介-->
+			<div class="introduction">
+			{{state.info.introduction}}
+			</div>
+			<!--标签-->
+			<div class="tag">
+				<el-tag v-for="tag in state.info.tags" :key="tag">{{tag}}</el-tag>
+			</div>
+			<!--操作-->
+			<div class="operate">
+				<!--        加入购物车-->
+<!--				<el-button type="primary" @click="handleCart">加入购物车</el-button>-->
+        <!--        立即购买-->
+        <el-button type="primary" @click="handleBuy">立即购买</el-button>
+				<!--        收藏-->
+				<el-button type="primary" @click="handleFavorite">
+					{{state.isFavorite?'已收藏':'收藏'}}
+				</el-button>
+			</div>
+		</el-col>
+	</el-row>
+<!--	抽屉-->
+	<el-drawer
+		v-model="buyDrawer"
+		title="购买"
+	>
+		<el-form
+			ref="buyFormRef"
+			style="max-width: 600px"
+			:model="state.buyForm"
+			label-width="auto"
+			label-position="top"
+		>
+			<el-form-item prop="title"	label="商品名称"	>
+				<el-input disabled v-model="state.buyForm.title" />
+			</el-form-item>
+
+			<el-form-item prop="title"	label="商品单价"	>
+				<el-input disabled v-model="state.buyForm.price" />
+			</el-form-item>
+
+			<el-form-item prop="total"	label="购买数量"	>
+				<el-input-number
+					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-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'
+import type { FormInstance } from 'element-plus'
+
+const buyDrawer = ref(false)
+
+const formRef = ref<FormInstance>()
+const  state =reactive(<any>{
+	info:{
+		id:1122334545,
+		title:"粉色羽绒服女冬季长款过膝2024新款韩版宽松加厚白鸭绒面包服外套",
+		url: 'https://img2.epetbar.com/common/upload/commonfile/2020/011/13/150904_705255.jpg@!300w-c',
+		introduction:"毒液：最后一舞是一部评分7.0的电影影视作品,影片的导演是凯莉·马塞尔 ，是由汤姆·哈迪 切瓦特·埃加福 朱诺·坦普尔 斯蒂芬·格拉汉姆  主演的动作 科幻 惊悚 冒险 科幻片 类型作品，毒液和埃迪（汤姆·哈迪 Tom Hardy 饰）迎来至暗时刻。一边是人类神秘组织的穷追猛打，一边是外星共生体大军入侵地球，他们一心同体，花式解锁海陆空作战新形态。面对两边的疯狂追捕，这对亡命搭档将被迫做出毁灭性决定，为他们的最后一舞拉下帷幕。",
+		tags:["面包服","外套"],
+		price: 129.00,
+    stock: 99,
+	},
+	buyForm:{
+		id:null,
+		title:"",
+		quantity:1,
+		total:0
+	}
+})
+
+/**
+ * 购买按钮提交
+ * @param formEl
+ */
+const buySubmitForm = (formEl: FormInstance | undefined) => {
+	if (!formEl) return
+	formEl.validate((valid) => {
+		if (valid) {
+			console.log('submit!')
+		} else {
+			console.log('error submit!')
+		}
+	})
+}
+
+
+/**
+ * 购买按钮
+ */
+const handleBuy = () => {
+	buyDrawer.value = true
+	state.buyForm.title = state.info.title
+	state.buyForm.id = state.info.id
+	state.buyForm.price = state.info.price
+	state.buyForm.total = state.info.price * state.buyForm.quantity
+}
+const handleChange = () => {
+		state.buyForm.total = state.info.price * state.buyForm.quantity
+}
+</script>
+<style scoped>
+.info{
+	background: linear-gradient(to bottom, #dfe8f6, #e0e0e0); /* 清新渐变背景 */
+	background-color: #fdfdfe;
+	height: 500px;
+  padding: 20px;
+	h1{
+		color: #11192d;
+		font-size: 20px;
+		font-weight: 600;
+		margin-bottom: 20px;
+	}
+	.introduction{
+		font-size: 14px;
+		text-indent: 2em;
+		margin-bottom: 20px;
+	}
+	.tag{
+		margin-bottom: 20px;
+	}
+}
+:deep(.el-image){
+	border-radius: 10px;
+	height: 420px;
+	margin-left: 30px;
+
+}
+
+</style>
diff --git a/src/components/front/item.vue b/src/components/front/item.vue
new file mode 100644
index 0000000..e583ec3
--- /dev/null
+++ b/src/components/front/item.vue
@@ -0,0 +1,99 @@
+<!--商品-->
+<template>
+	<el-row>
+		<el-col :span="24">
+			<el-space wrap>
+				<el-card
+					v-for="i in 5" :key="i"
+					class="box-card"
+					@click="to()"
+					shadow="hover" >
+<!--					图片-->
+					<el-image  src="https://img2.epetbar.com/common/upload/commonfile/2020/03/20/0104650_205628.jpg" fit="fill" />
+<!--					标题-->
+					<div class="item-title ">澳大利亚原装进口自然馈赠Natures Gift 牛肉配方成犬粮 18kg</div>
+<!--					价格&& 评分-->
+					<div class="price-box">
+						<span class="price-now ft16 " style="line-height: 1">¥998.00</span>
+						<span class="ft14 c999 price-old" style="line-height: 1">¥1098.00</span>
+					</div>
+				</el-card>
+			</el-space>
+		</el-col>
+	</el-row>
+
+<!--	<el-row  class="pagination-container">-->
+	<el-row v-if="isPage" class="pagination-container">
+		<el-col :span="24">
+			<el-pagination
+				background
+				layout="prev, pager, next"
+				@current-change="handleCurrentChange"
+				:total="1000" />
+		</el-col>
+	</el-row>
+
+
+</template>
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const props = defineProps({
+	isPage: {
+		type: Boolean,
+		default: false,
+	},
+})
+
+
+const handleCurrentChange = (val: number) => {
+	console.log(`current page: ${val}`)
+}
+
+const to = () => {
+	router.push("/front/info")
+}
+</script>
+<style scoped>
+.box-card{
+	cursor: pointer;
+	width: 232px;
+	height: 300px
+}
+:deep(.el-image){
+	display: block;
+	width: 170px;
+	height: 180px;
+	margin: 0 auto;
+	margin-bottom: 20px;
+}
+.item-title{
+	color: #333;
+	font-size: 14px;
+	width: 164px;
+	margin: 0 auto 8px auto;
+	line-height: 1;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+.price-box{
+	text-align: center;
+	font-size: 16px;
+}
+.price-now{
+	color: #FF0000;
+	padding-right: 10px;
+}
+.ft16 {
+	font-size: 16px;
+}
+.ft14 {
+	font-size: 14px;
+}
+
+.pagination-container{
+	padding-top: 10px;
+}
+
+</style>
diff --git a/src/components/front/item2.vue b/src/components/front/item2.vue
new file mode 100644
index 0000000..a89768c
--- /dev/null
+++ b/src/components/front/item2.vue
@@ -0,0 +1,71 @@
+<!--商品展示风格2-->
+<template>
+	<el-row>
+		<el-col :span="24">
+			<el-space wrap>
+				<el-card
+					v-for="i in 5" :key="i"
+					class="box-card"
+					@click="to()"
+					shadow="hover" >
+					<!--图片-->
+					<img class="img"  src="https://img2.epetbar.com/common/upload/commonfile/2020/03/20/0104650_205628.jpg" fit="fill" />
+					<!--					标题-->
+					<div class="item-title ">澳大利亚原装进口自然馈赠Natures Gift 牛肉配方成犬粮 18kg</div>
+<!--					价格&& 评分-->
+					<div class="price-box">
+						<span class="price-now ft16 " >¥998.00</span>
+						<span class="ft14 c999 price-old" >¥1098.00</span>
+					</div>
+				</el-card>
+			</el-space>
+		</el-col>
+	</el-row>
+</template>
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const to = () => {
+	router.push("/front/info")
+}
+</script>
+<style scoped>
+.box-card{
+	cursor: pointer;
+	width: 232px;
+	height: 300px;
+	border-radius: 10px;
+
+}
+.img{
+	display: block;
+	width: 170px;
+	height: 180px;
+	margin: 0 auto;
+	margin-bottom: 20px;
+}
+.item-title{
+	color: #333;
+	font-size: 14px;
+	width: 164px;
+	margin: 0 auto 8px auto;
+	line-height: 1;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	overflow: hidden;
+}
+.price-box{
+	text-align: center;
+	font-size: 16px;
+}
+.price-now{
+	color: #FF0000;
+	padding-right: 10px;
+}
+.ft16 {
+	font-size: 16px;
+}
+.ft14 {
+	font-size: 14px;
+}
+</style>
diff --git a/src/components/nav/Navigation1.vue b/src/components/nav/Navigation1.vue
index e29f7eb..6f295de 100644
--- a/src/components/nav/Navigation1.vue
+++ b/src/components/nav/Navigation1.vue
@@ -12,8 +12,10 @@
 				router
 			>
 				<el-menu-item
+					class="nav-name"
 					v-for="r of getFrontList()" :key="r.path"
-					:index="r.path">{{ r.name }}
+					:index="r.path">
+					{{ r.name }}
 				</el-menu-item>
 			</el-menu>
 		</el-col>
@@ -42,8 +44,8 @@
 import { getFrontList } from '~/utils/utils'
 import { useRouter } from 'vue-router'
 import { logoutFront } from '~/api/user/frontUserApi'
-
 const router = useRouter()
+
 const activeIndex = ref('1')
 const handleSelect = (key: string, keyPath: string[]) => {
 	console.log(key, keyPath)
@@ -59,16 +61,19 @@ const logout = () => {
 }
 </script>
 <style scoped>
-
 :deep(.el-menu--horizontal) {
 	border-bottom: none;
 }
-
 h6 {
 	font-weight: 700;
 	font-size: 16px;
 	padding-top: 15px;
 	letter-spacing: 0.5px;
 }
-
+.nav-name{
+	font-size: 16px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  color: #303133;
+}
 </style>
diff --git a/src/layouts/front.vue b/src/layouts/front.vue
index f3a6d2f..0ccbb12 100644
--- a/src/layouts/front.vue
+++ b/src/layouts/front.vue
@@ -6,8 +6,10 @@
 			<el-header>
 			<nav-navigation1></nav-navigation1>
 			</el-header>
-			<el-main>
-				<router-view></router-view>
+			<el-main class="main">
+				<div class="container">
+					<router-view></router-view>
+				</div>
 			</el-main>
 		</el-container>
 	</div>
@@ -19,6 +21,14 @@
 <style scoped>
 
 
-
+.main{
+	width: 100%;
+	height: calc(100vh - 60px);
+	background-color: #f3f3f4;
+}
+.container{
+	width: 1200px;
+	margin: 0 auto;
+}
 
 </style>
diff --git a/src/main.ts b/src/main.ts
index f0368dd..5bb6ef4 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -2,14 +2,11 @@
 import '@unocss/reset/tailwind-compat.css' // unocss reset
 import 'virtual:uno.css'
 import 'virtual:unocss-devtools'
-
 // 你自定义的 css
 import './styles/main.css'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
-
-
 import App from './App.vue'
 const app = createApp(App)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
diff --git a/src/pages/front/index.vue b/src/pages/front/index.vue
index 5f291c4..c0f01ff 100644
--- a/src/pages/front/index.vue
+++ b/src/pages/front/index.vue
@@ -1,8 +1,24 @@
 <template>
-我是前台
+	<!--轮播图-->
+	<el-row :gutter="20">
+		<el-col :span="12">
+			<div class="h-350px">
+				<carousel></carousel>
+			</div>
+		</el-col>
+		<el-col :span="12">
+			<div class="h-350px">
+				<carousel></carousel>
+			</div>
+		</el-col>
+	</el-row>
+	<!--	推荐商品列表-->
+	<item></item>
 </template>
 <script setup lang="ts">
 
+import Carousel from '~/components/front/carousel.vue'
+import Item from '~/components/front/item.vue'
 </script>
 
 <style scoped>
diff --git a/src/pages/front/info/index.vue b/src/pages/front/info/index.vue
new file mode 100644
index 0000000..41d2417
--- /dev/null
+++ b/src/pages/front/info/index.vue
@@ -0,0 +1,31 @@
+<!--详情内容-->
+<template>
+<!--	顶部内容-->
+	<el-row>
+		<el-col :span="24">
+			<info-top></info-top>
+		</el-col>
+	</el-row>
+	<div class="h-30px"></div>
+	<el-row>
+		<el-col :span="24">
+			<info-bottom></info-bottom>
+		</el-col>
+	</el-row>
+
+</template>
+<script setup lang="ts">
+
+import InfoTop from '~/components/front/info-top.vue'
+import InfoBottom from '~/components/front/info-bottom.vue'
+</script>
+<style scoped>
+
+</style>
+<route lang="json">
+{
+"meta": {
+"layout": "front"
+}
+}
+</route>
diff --git a/src/pages/front/list/index.vue b/src/pages/front/list/index.vue
new file mode 100644
index 0000000..bd9452a
--- /dev/null
+++ b/src/pages/front/list/index.vue
@@ -0,0 +1,20 @@
+<!--商品列表-->
+<template>
+<!--搜索等-->
+	<!--	推荐商品列表-->
+	<item is-page=true></item>
+</template>
+<script setup lang="ts">
+import Item from '~/components/front/item.vue'
+</script>
+
+<style scoped>
+
+</style>
+<route lang="json">
+{
+"meta": {
+"layout": "front"
+}
+}
+</route>
diff --git a/src/pages/index.vue b/src/pages/index.vue
new file mode 100644
index 0000000..aeaa333
--- /dev/null
+++ b/src/pages/index.vue
@@ -0,0 +1,37 @@
+<template>
+	<!--轮播图-->
+	<el-row :gutter="20">
+		<el-col :span="12">
+			<div class="h-350px">
+				<carousel></carousel>
+			</div>
+		</el-col>
+		<el-col :span="12">
+			<div class="h-350px">
+				<carousel></carousel>
+			</div>
+		</el-col>
+	</el-row>
+
+
+<!--	推荐商品列表-->
+	<item></item>
+
+
+</template>
+<script setup lang="ts">
+
+import Carousel from '~/components/front/carousel.vue'
+import Item from '~/components/front/item.vue'
+</script>
+
+<style scoped>
+
+</style>
+<route lang="json">
+{
+"meta": {
+"layout": "front"
+}
+}
+</route>
diff --git a/src/pages/login.vue b/src/pages/login.vue
index 0ad6415..b8912df 100644
--- a/src/pages/login.vue
+++ b/src/pages/login.vue
@@ -42,7 +42,6 @@ import { useRouter } from 'vue-router'
 import { loginAdmin } from '~/api/user/adminUserApi'
 import { getUuid } from '~/utils/utils'
 import { loginFront } from '~/api/user/frontUserApi'
-
 const router = useRouter()
 const state = reactive({
 	role: false,
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index ebfb10f..537e82a 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -9,8 +9,7 @@ export const getUuid = (): string => {
 	});
 };
 
-
-export const getFrontList = () => {
+export const getAdminList = () => {
 	const routes = [
 		{
 			"path": "/admin/",
@@ -40,3 +39,19 @@ export const getFrontList = () => {
 	]
 	return routes;
 }
+export const getFrontList = () => {
+	const routes = [
+		{
+			"path": "/front/",
+			"name": "首页",
+			"icon": "House",
+		},
+		{
+			"path": "/front/list",
+			"name": "更多好物",
+			"icon": "House",
+		},
+
+	]
+	return routes;
+}