diff --git a/css/index.scss b/css/index.scss
new file mode 100644
index 0000000..5dd296f
--- /dev/null
+++ b/css/index.scss
@@ -0,0 +1,4 @@
+	
+:root{
+	--tabs-bottom-bar-color:blue
+}
\ No newline at end of file
diff --git a/pages.json b/pages.json
index bb54b2f..7374747 100644
--- a/pages.json
+++ b/pages.json
@@ -1,10 +1,14 @@
 {
 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
 		{
-			"path" : "pages/login/login",
-			"style" : 
-			{
-				"navigationStyle":"custom"
+			"path": "pages/Repair/Repair",
+			"style": {
+				"navigationBarTitleText": "报修管理"
+			}
+		}, {
+			"path": "pages/login/login",
+			"style": {
+				"navigationStyle": "custom"
 			}
 		},
 		{
@@ -30,8 +34,16 @@
 			"style": {
 				"navigationBarTitleText": "个人资料"
 			}
+		},
+		{
+			"path" : "pages/Repair/RepairDetail",
+			"style" : 
+			{
+				"navigationBarTitleText" : "报修详情"
+			}
 		}
-		
+
+
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
@@ -44,14 +56,18 @@
 		"selectedColor": "#03A8F6",
 		"borderStyle": "black",
 		"backgroundColor": "#FFFFFF",
-		"list": [
-			{
+		"list": [{
 				"pagePath": "pages/Workbench/Workbench",
 				"iconPath": "static/tabbar/workbench.png",
 				"selectedIconPath": "static/tabbar/workbench._select.png",
 				"text": "工作台"
 			},
 			{
+				"pagePath": "pages/Repair/Repair",
+				"iconPath": "static/tabbar/message.png",
+				"selectedIconPath": "static/tabbar/message_select.png",
+				"text": "报修"
+			}, {
 				"pagePath": "pages/Message/Message",
 				"iconPath": "static/tabbar/message.png",
 				"selectedIconPath": "static/tabbar/message_select.png",
@@ -66,4 +82,4 @@
 		]
 	},
 	"uniIdRouter": {}
-}
+}
\ No newline at end of file
diff --git a/pages/Message/Message.vue b/pages/Message/Message.vue
index c0e7658..b23795e 100644
--- a/pages/Message/Message.vue
+++ b/pages/Message/Message.vue
@@ -5,16 +5,7 @@
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-
-			}
-		},
-		methods: {
-
-		}
-	}
+	
 </script>
 
 <style lang="scss">
diff --git a/pages/Repair/Repair.vue b/pages/Repair/Repair.vue
new file mode 100644
index 0000000..14bde45
--- /dev/null
+++ b/pages/Repair/Repair.vue
@@ -0,0 +1,228 @@
+<template>
+	<view class="container">
+		<view class="container-nav">
+			<view class="container-tabs">
+				<view class="container-tab" v-for="item in activeList" :key="item.index" @click="active=item.index">
+					<view style="width: 130rpx;" :class="{active:item.index==active}">{{item.text}}</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="container-card">
+			<view class="container-card-item" @click="handleJump">
+				<view class="container-top" >
+					<view class="container-tag" style="background-color:  #f5ab4c;" v-if="active==1">未处理</view>
+					<view class="container-tag" style="background-color:  #06cc76;" v-else-if="active==2">处理中</view>
+					<view class="container-tag" style="background-color: #ff5842;" v-else-if="active==3">已取消</view>
+					<view class="container-tag" style="background-color:  #0e7ff5" v-else>已完工</view>
+					<view class="container-bh">BX1356351685</view>
+				</view>
+				<view class="container-body">
+					<view class="container-body-item">
+						<view class="container-body-left">报修人：</view>
+						<view class="container-body-right">张三三</view>
+					</view>
+					<view class="container-body-item">
+						<view class="container-body-left">保修内容：</view>
+						<view class="container-body-right">机器故障</view>
+					</view>
+					<view class="container-body-item">
+						<view class="container-body-left">维修人员：</view>
+						<view class="container-body-right">张三三</view>
+					</view>
+					<view class="container-body-item">
+						<view class="container-body-left">维修单号：</view>
+						<view class="container-body-right">wu15654185652</view>
+					</view>
+				</view>
+
+				<image src="@/static/line.svg" class="container-line"></image>
+
+				<view class="container-bottom">
+					<view class="container-bottom-left">2023.08.08 22:40:23</view>
+					<view class="container-bottom-right" v-if="active==1">去指派</view>
+					<view class="container-bottom-right" v-else-if="active==2">中止任务</view>
+	
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		ref,
+		watch
+	} from 'vue';
+	// 状态
+	const active = ref(1)
+	// 文字显示
+
+	const statusText = (item) => {
+		switch (item) {
+			case 1:
+				return '未处理';
+			case 2:
+				return '处理中';
+			case 3:
+				return '已取消';
+			case 4:
+				return '已完成';
+		}
+	}
+
+	const activeList = [{
+			"index": 1,
+			"text": "未处理"
+		},
+		{
+			"index": 2,
+			"text": "处理中"
+		},
+		{
+			"index": 3,
+			"text": "已取消"
+		},
+		{
+			"index": 4,
+			"text": "已完成"
+		}
+	]
+
+	const handleChangeActive = () => {
+		console.log(active.value)
+	}
+	
+	const handleJump = ()=>{
+		uni.navigateTo({
+			url:'/pages/Repair/RepairDetail'
+		})
+	}
+</script>
+
+<style lang="scss">
+	$globalWidth: 650rpx;
+	$buttonColor: #0e7ff5;
+
+
+
+
+	.container {
+		display: flex;
+		background: -webkit-linear-gradient(270deg,
+				rgba(227, 239, 249, 1) 0%,
+				rgba(245, 245, 247, 1) 100%);
+		flex-direction: column;
+		/* align-items: center; */
+		width: 100%;
+		height: 100vh;
+
+		align-items: center;
+
+	}
+
+	.container-nav {
+		width: 100%;
+		background-color: white;
+		height: 80rpx;
+		transition: all 0.3s;
+
+		.container-tabs {
+			width: 100%;
+			height: 100%;
+			display: flex;
+
+		}
+
+		.container-tab {
+			width: 25%;
+			height: 100%;
+			line-height: 80rpx;
+			text-align: center;
+			border-bottom: 4rpx solid transparent;
+			display: flex;
+			justify-content: center;
+
+		}
+
+		.active {
+			color: $buttonColor;
+			border-bottom: 4rpx solid $buttonColor !important;
+		}
+	}
+
+
+	.container-card {
+		width: 100%;
+		margin-top: 40rpx;
+		display: flex;
+		justify-content: center;
+
+		.container-card-item {
+			width: $globalWidth;
+			min-height: 300rpx;
+			border-radius: 20rpx;
+			background-color: white;
+			padding: 20rpx;
+		}
+
+		.container-top {
+			display: flex;
+
+		}
+
+		.container-tag {
+			color: white;
+			width: 120rpx;
+			text-align: center;
+		}
+
+
+		.container-bh {
+			margin-left: 40rpx;
+		}
+
+		.container-body {
+			margin-top: 40rpx;
+
+		}
+
+		.container-body-item {
+			display: flex;
+			font-size: 25rpx;
+			margin-bottom: 10rpx;
+
+			.container-body-left {
+				color: #ccc;
+				width: 140rpx;
+			}
+		}
+
+		.container-line {
+			height: 2px;
+		}
+
+		.container-bottom {
+			margin-top: 20rpx;
+			display: flex;
+			font-size: 25rpx;
+
+			height: 50rpx;
+
+			justify-content: space-between;
+
+			.container-bottom-right {
+				width: 150rpx;
+				height: 50rpx;
+				color: white;
+				background-color: $buttonColor;
+				text-align: center;
+				line-height: 50rpx;
+				border-radius: 30rpx;
+
+			}
+		}
+
+
+	}
+</style>
\ No newline at end of file
diff --git a/pages/Repair/RepairDetail.vue b/pages/Repair/RepairDetail.vue
new file mode 100644
index 0000000..29cdf74
--- /dev/null
+++ b/pages/Repair/RepairDetail.vue
@@ -0,0 +1,170 @@
+<template>
+	<view class="container">
+		<view class="container-card">
+			<view class="container-card-item">
+				<view class="container-card-item-left">设备类型</view>
+				<view class="container-card-item-right">设备类型1</view>
+			</view>
+			<view class="container-card-item">
+				<view class="container-card-item-left">维修状态</view>
+				<view class="container-card-item-right" style="color: #F5AB4C;">未处理</view>
+				<view class="container-card-item-right" style="color: #06cc76;">处理中</view>
+				<view class="container-card-item-right" style="color: #FF5842;">已取消</view>
+				<view class="container-card-item-right" style="color: #0e7ff5 ;">已完工</view>
+			</view>
+			<view class="container-card-item">
+				<view class="container-card-item-left">设备编号</view>
+				<view class="container-card-item-right">ST1234845465</view>
+			</view>
+			<view class="container-card-item">
+				<view class="container-card-item-left">故障现象</view>
+				<view class="container-card-item-right">瓷砖破损</view>
+			</view>
+			<view class="container-card-item">
+				<view class="container-card-item-left">保修时间</view>
+				<view class="container-card-item-right">2023-08-05</view>
+			</view>
+			<view class="container-card-item">
+				<view class="container-card-item-left">报修人</view>
+				<view class="container-card-item-right">张三三</view>
+			</view>
+		</view>
+		
+		<view class="container-card">
+			<view class="container-info">报修信息</view>
+			<view class="container-card-item">
+				<view class="container-card-item-left">报修单号</view>
+				<view class="container-card-item-right">873783783</view>
+			</view>
+			<view class="container-card-item">
+				<view class="container-card-item-left">指定维修人员</view>
+				<view class="container-card-item-right">请选择
+					<image src="@/static/right.png"></image>
+				</view>
+			</view>
+			<view class="container-card-item">
+				<view class="container-card-item-left">维修单号</view>
+				<view class="container-card-item-right">873783783</view>
+			</view>
+			<view class="container-card-item" style="display: block;">
+				<view class="container-card-item-left">中止原因</view>
+				<view class="container-card-item-stop">8737782525252525252525252525252525252525252525252525252525252525252525583783</view>
+			</view>
+		</view>
+		
+		
+		
+		<view class="container-card">
+			<view class="container-info">处理信息</view>
+			<view class="container-card-item">
+				<view class="container-card-item-left">处理时间</view>
+				<view class="container-card-item-right">873783783</view>
+			</view>
+			
+			<view class="container-card-item" style="display: block;">
+				<view class="container-card-item-left">处理意见</view>
+				<view class="container-card-item-stop">8737782525252525252525252525252525252525252525252525252525252525252525583783</view>
+			</view>
+		</view>
+		
+		
+		<view class="container-bottom">
+			<view class="container-finish">完成</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss">
+	$globalWidth: 650rpx;
+	$buttonColor: #0e7ff5;
+	
+	.container {
+		display: flex;
+		background: -webkit-linear-gradient(270deg,
+				rgba(227, 239, 249, 1) 0%,
+				rgba(245, 245, 247, 1) 100%);
+		flex-direction: column;
+		/* align-items: center; */
+		width: 100%;
+		height: calc(100vh - 150rpx);
+		overflow-y: scroll;
+
+		align-items: center;
+
+	}
+	
+	.container-card{
+		width: $globalWidth;
+		border-radius: 20rpx;
+		background-color: white;
+		padding: 20rpx;
+		margin-top: 40rpx;
+		
+		
+	}
+	
+	// 报修信息
+	.container-info{
+		font-size: 35rpx;
+		margin-bottom: 10rpx;
+		width: 140rpx;
+		height: 35rpx;
+		border-bottom: 10rpx solid #b6d8fc;
+		
+	}
+	
+	.container-card-item{
+		display: flex;
+		justify-content: space-between;
+		min-height: 80rpx;
+		font-size: 25rpx;
+		align-items: center;
+		
+		.container-card-item-right{
+			color: #7E848F;
+			display: flex;
+			align-items: center;
+			
+			image{
+				width: 30rpx;
+				height: 30rpx;
+			}
+		}
+		
+		.container-card-item-stop{
+			background-color: #F0F7FF;
+			word-wrap: break-word; 
+			margin-top: 10rpx;
+			padding: 10rpx;
+		}
+		
+		
+	}
+	
+	.container-bottom{
+		height: 150rpx;
+		width: 100%;
+		position: fixed;
+		background-color: white;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		
+		.container-finish{
+			width: $globalWidth;
+			height: 80rpx;
+			border-radius: 40rpx;
+			text-align: center;
+			line-height: 80rpx;
+			color: white;
+			
+			background: $buttonColor;
+		}
+		
+	}
+</style>
\ No newline at end of file
diff --git a/static/line.svg b/static/line.svg
new file mode 100644
index 0000000..c06bb60
--- /dev/null
+++ b/static/line.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="322px" height="2px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -27 -291 )">
+    <path d="M 27 291.5  L 348 291.5  " stroke-width="0.5" stroke="#e2e8f1" fill="none" />
+  </g>
+</svg>
\ No newline at end of file