diff --git a/src/common/css.css b/src/common/css.css
index c419c7a..1ad2719 100644
--- a/src/common/css.css
+++ b/src/common/css.css
@@ -759,6 +759,13 @@ input,textarea,button{
     line-height: 70rpx;
 }
 
+.blur {
+    background-color: rgba(255, 255, 255, 0.2); /* 半透明背景 */
+    backdrop-filter: blur(10px); /* 背景模糊 */
+    -webkit-backdrop-filter: blur(10px); /* 兼容老版本 Safari */
+}
+
+
 
 
 
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 96d54b6..1482fce 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -1,340 +1,372 @@
 <template>
-	<view class="home">
-		<!-- <page-head title="待排查任务" :warnNum='1' :isFixed="true" :isRight="true"></page-head> -->
-		<!-- 轮播图 -->
-		<view class="swiper-container">
-			<swiper :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500">
-				<swiper-item v-for="(item, index) in swiperList" :key="index">
-					<image :src="item.imgurl" class="swiper-image"></image>
-				</swiper-item>
-			</swiper>
-		</view>
-		<view class="data">
-			<view class="left">
-				<image src="/static/home/pend.png" mode="" class="pend"></image>
-			</view>
-			<view class="right">
-			 <view class="imgBox">
-			 	<image src="/static/home/month.png" mode="" class="img" ></image>
-			 </view>	
-			 <view class="imgBox">
-			 	<image src="/static/home/finish.png" mode="" class="img"></image>
-			 </view>
-			</view>
-			
-		</view>
-
-		<view class="knowContent" @click="goToKnowledge">
-			<image src="/static/know.png" mode="" class="know"></image>
-		</view>
-		<view class="pendding">
-			待办任务
-		</view>
-		<view class="ListBox">
-			<view class="ListItem"  v-for="(item,index) in data" @click="handleDetail(item)">
-				<view class="isTime" :style="{ backgroundColor: item.isTime == 0 ? '#cc2936' : '#e68a0b' }">{{item.isTime==0?'超期':'临期'}} </view>
-				<image :src="item.imgurl" mode="" class="car"></image>
-				<view class="textBox">
-				  <view class="toptext">
-				  	{{item.title}}
-				  </view>
-				  <view class="bottomText">
-				  	 <text class="paicha">{{item.paicha}} </text> 
-					 <text>{{item.createTime}}</text>
-				  </view>
-				</view>
-			</view>
-		</view>
-	</view>
+  <view id="page">
+    <view class="header">
+      <view class="title">道路交通安全隐患</view>
+      <view class="title">排查助手</view>
+      <view class="desc">洞察隐患  智能守护  科技之眼照亮安全之路</view>
+      <view class="total Flex Flex_C_S-B PositionR">
+        <view class="left Flex">
+          <view class="info">
+            <view class="name">待办</view>
+            <view class="number">42</view>
+          </view>
+          <image style="width: 160rpx" mode="widthFix" src="../../static/image/need.png" class="need"></image>
+          <view class="bottom PositionA Flex Flex_C_S-A TextCenter blur">
+            <view class="item Flex_C_S-Center">
+              <text>超期</text>
+              <text style="margin-left: 10rpx">17</text>
+            </view>
+            <view class="item Flex_C_S-Center">
+              <text>临期</text>
+              <text style="margin-left: 10rpx">25</text>
+            </view>
+          </view>
+        </view>
+        <view class="right">
+          <view class="current_mouth Flex Flex_C_S-B blur">
+            <image style="width: 80rpx" mode="widthFix" src="../../static/image/mouth.png" class="video"></image>
+            <text class="name">本月上报</text>
+            <text class="number">18</text>
+          </view>
+          <view class="finish Flex Flex_C_S-B blur">
+            <image style="width: 80rpx" mode="widthFix" src="../..//static/image/finish.png" class="video"></image>
+            <text class="name">已完成</text>
+            <text class="number">12800</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="con">
+      <text>交通隐患排查知识库</text>
+    </view>
+    <view class="Width100 Box BorderBox">
+      <view class="list_title">待办任务</view>
+      <view class="Content MarginAuto BorderBox">
+        <no-data v-if="isEmpty" />
+        <view v-else class="List Width100 BorderBox">
+          <view class="Unit FontBold BorderBox Width100 MarginT_30rpx BG_FFFFFF"
+                v-for="item in list" :key='item.id' @click='handleClick(item)'>
+            <image class="imgleft" :src="item.imgurl" mode="widthFix"></image>
+            <view class="right">
+              <view class="title">{{ item.title }}</view>
+              <view class="type">
+                <text>排查</text>
+                <text>超期2天</text>
+              </view>
+            </view>
+            <view class="trapezoidal">
+              超期
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				title: '下拉刷新 + 加载更多',
-				data:  [{     //window.PCRWList || 
-						id: 12121212,
-						title: 'G228火炬路与S503岙东路',
-						roadCode: 123,
-						roadName: 'G228火炬路与S503岙东路',
-						imgurl: '/static/car.png',
-						createTime: '超期2天',  //2024-10-05
-						deptName: '支队级',
-						sessionId: 12121212,
-						paicha:"排查",
-						isTime:0
-					},
-					{ //window.PCRWList ||
-						id: 37020017407,
-						title: '金水路与合川路事故多发点段',
-						roadCode: 123,
-						roadName: '金水路与合川路',
-						imgurl: '/static/car.png',
-						createTime: '剩余2天',
-						deptName: '支队级',
-						sessionId: 37020017407,
-						paicha:"排查",
-						isTime:1
-					},
-					{
-						id: 37020017404,
-						title: '金水路与合川路事故多发点段',
-						roadCode: 123,
-						roadName: '金水路与合川路',
-						imgurl: '/static/car.png',
-						createTime: '超期2天',
-						deptName: '支队级',
-						sessionId: 37020017404,
-						paicha:"排查",
-						isTime:1
-					},
-				],
-				loadMoreText: "加载中...",
-				showLoadMore: false,
-				max: 0,
-				swiperList: [{
-						imgurl: '/static/banner/1.jpg'
-					},
-					{
-						imgurl: '/static/banner/2.jpg'
-					},
-					{
-						imgurl: '/static/banner/3.jpg'
-					},
-					{
-						imgurl: '/static/banner/4.jpg'
-					}
-				]
-			}
-		},
-		onLoad() {
-			this.initData();
-		},
+import NoData from "../../components/no-data/index.vue";
+export default {
+  // 组件
+  components: {
+    NoData
+  },
+  data() {
+    return {
+      // 公用的js
+      bgUrl1: '', // 登录信息背景图
+      list: [
+        {
+          id: 1,
+          title: 'G228火炬路与S503岙东路路',
+          roadCode: 123,
+          roadName: 'G228火炬路与S503岙东路',
+          imgurl: '/static/imge.png',
+          createTime: '2024-10-05',
+          deptName: '支队级',
+          sessionId: 12121212
+        },
+        {
+          id: 2,
+          title: 'G228火炬路与S503岙东路路',
+          roadCode: 123,
+          roadName: 'G228火炬路与S503岙东路',
+          imgurl: '/static/imge.png',
+          createTime: '2024-10-05',
+          deptName: '支队级',
+          sessionId: 12121212
+        },
+        {
+          id: 3,
+          title: 'G228火炬路与S503岙东路路',
+          roadCode: 123,
+          roadName: 'G228火炬路与S503岙东路',
+          imgurl: '/static/imge.png',
+          createTime: '2024-10-05',
+          deptName: '支队级',
+          sessionId: 12121212
+        },
+        {
+          id: 4,
+          title: 'G228火炬路与S503岙东路路',
+          roadCode: 123,
+          roadName: 'G228火炬路与S503岙东路',
+          imgurl: '/static/imge.png',
+          createTime: '2024-10-05',
+          deptName: '支队级',
+          sessionId: 12121212
+        },
+        {
+          id: 5,
+          title: 'G228火炬路与S503岙东路路',
+          roadCode: 123,
+          roadName: 'G228火炬路与S503岙东路',
+          imgurl: '/static/imge.png',
+          createTime: '2024-10-05',
+          deptName: '支队级',
+          sessionId: 12121212
+        },
+      ],
+      isEmpty: false,
+      isMore: true,
+      page: 1,
+      tab: 1
+    }
+  },
+  // 页面加载
+  onLoad(e) {
+    this.getList()
+  },
+  // 计算属性
+  computed: {},
+  // 方法
+  methods: {
+    getList() {
+      let datas = {
+        limit: 10,
+        page: 1,
+      }
+      // this.$request.globalRequest('/xxxxxxxx', datas, 'GET').then(res => {
+      // 	if (res.code == 0) {
+      // 		if (res.data.total === 0) {
+      // 			this.isEmpty = true;
+      // 			return false
+      // 		}
+      // 		this.list.push(...res.data.list)
+      // 		if (this.list.length >= res.data.total) {
+      // 			this.isMore = false
+      // 		}
+      // 	} else {
+      // 		this.$.toast(res.msg)
+      // 	}
+      // })
+    },
+    handleClick(row) {
+      console.log(row)
+    },
+    // 跳转页面
+    skipPage(even) {
+      // this.$.open(even)
+    },
+  },
+  onReady() {},
+  // 页面卸载
+  onUnload() {
 
-		onUnload() {
-			// this.max = 0,
-			// 	this.data = [],
-			// 	this.loadMoreText = "加载更多",
-			// 	this.showLoadMore = false;
-		},
-		onReachBottom() {
-			// console.log("onReachBottom");
-			// if (this.max > 40) {
-			// 	this.loadMoreText = "没有更多数据了!"
-			// 	return;
-			// }
-			// this.showLoadMore = true;
-			// setTimeout(() => {
-			// 	this.setListData();
-			// }, 300);
-		},
-		onPullDownRefresh() {
-			console.log('onPullDownRefresh');
-			this.initData();
-		},
-		methods: {
-			goToKnowledge() {
-				uni.navigateTo({
-					url: '/pages/home/knowledge'
-				})
-			},
-			initData() {
-				// setTimeout(() => {
-				// 	this.max = 0;
-				// 	this.data = [];
-				// 	let data = [];
-				// 	this.max += 20;
-				// 	for (var i = this.max - 19; i < this.max + 1; i++) {
-				// 		data.push(i)
-				// 	}
-				// 	this.data = this.data.concat(data);
-				// 	uni.stopPullDownRefresh();
-				// }, 300);
-			},
-			setListData() {
-				// let data = [];
-				// this.max += 10;
-				// for (var i = this.max - 9; i < this.max + 1; i++) {
-				// 	data.push(i)
-				// }
-				// this.data = this.data.concat(data);
-			},
-			// 跳转到详情页
-			handleDetail(item) {
-				this.$store.commit('setItemMessage', item)
-				uni.navigateTo({
-					// url: `/pages/home/detail?params=${encodeURIComponent(JSON.stringify(item))}`
-					url: '/pages/home/detail'
-				})
-			}
-		}
-	}
+  },
+  // 触发下拉刷新
+  onPullDownRefresh() {
+    // 延迟关闭刷新动画
+    setTimeout(() => {
+      uni.stopPullDownRefresh();
+    }, 1500);
+  },
+  // 页面上拉触底事件的处理函数
+  onReachBottom() {
+    if (this.isMore) {
+      this.page++
+      this.getList()
+    }
+  },
+}
 </script>
 
-<style scoped lang="scss">
-	.home {
-		width: 100%;
-		.data{
-			display:flex;
-			background-color: #e6ecf4;
-			height:300rpx;
-		    padding:10rpx 10rpx 20rpx 10px;
-			.left{
-			 flex:1;
-			 height: 300rpx;
-			 .pend{
-				 width:100%;
-				 height:300rpx;
-				 border-radius:10rpx;
-				 over-flow:hidden;
-				 // margin:0 5rpx;
-			 }
-			}
-			.right{
-			 flex:1;
-			 display:flex; 
-	         flex-direction: column;
-			 justify-content: space-between;
-			.imgBox{
-			  width: 100%;
-			  height:100%;		   
-			  .img{
-				margin:0 5rpx;
-				height:140rpx;
-				width: 100%; 
-				border-radius:10rpx;
-				over-flow:hidden;
-			  }
-			}
-			}
-		}
-        .knowContent{	
-			 height:268rpx;	
-			 // width: 100%;
-			  padding:0 10rpx;			 
-			  background-color: #e6ecf4;
-			 
-		.know{
-			width:100%;
-			height:220rpx;	
-			border-radius:20rpx;
-			overflow: hidden;
-		}	 
-		}
-		.pendding {
-			// margin:30rpx 0 ;
-			font-size: 40rpx;
-			height:85rpx;
-			line-height: 85rpx;
-			padding-left:20rpx;
-		    background-color: #e6ecf4;
-			
-		} 
-	     .ListBox{
-			 background-color: #e6ecf4;
-			 .ListItem{
-			  height:180rpx;
-			  background-color: #fff;
-			  display:flex;
-			  margin:13rpx 0;
-			  align-items:center;
-			  padding:20rpx;
-			  position:relative;
-			  .isTime{
-			 	position:absolute;
-			 	right:0;
-			 	top:-5rpx;
-			 	width: 100rpx;
-			 	height:45rpx;
-			 	color:#fff;
-			 	display: flex;
-			 	justify-content: center;
-			 	font-size:32rpx
-			 	// background-color: #fff;
-			  }
-			 .car{
-			  width: 200rpx;
-			  height:160rpx
-			 }
-			 .textBox{
-			 	padding-left:30rpx;
-			 	.toptext{
-			 		font-size:35rpx;
-			 		font-weight:600;
-			 		margin-bottom:20rpx
-			 	}
-			 	.bottomText{
-			 		.paicha{
-			 			margin-right:30rpx
-			 		}
-			 	}
-			 }
-			  
-			 }
-		 }
-		.imgleft {
-			width: 80rpx;
-			margin-right: 20rpx;
-			max-height: 100%;
-		}
-
-		.swiper-container {
-			width: 100%;
-			// height: 300rpx; // 
-			// margin-top: 20rpx; // 
-			// background-color: #2663bf
-		}
-
-		.swiper-image {
-			width: 100%;
-			height: 300rpx;
-			// object-fit: cover;
-
-		}
+<style>
+</style>
+<style lang="scss" scoped>
+page {
+  background: #F6F8FA;
+}
 
-		.uni-padding-wrap {
-			height: 60vh;
-			.uni-list-item{
-			margin:20px 0;	
-			height:190rpx
-			}
-		}
+.header {
+  background: url("../../static/image/home_bg.png") no-repeat;
+  background-size: cover;
+  height: 500rpx;
+  color: #FFFFFF;
+  padding:60rpx 20rpx 20rpx;
+  .title {
+    font-family: Tensentype MeiHeiJ, Tensentype MeiHeiJ;
+    font-weight: bold;
+    font-size: 24px;
+    line-height: 28px;
+    letter-spacing: 2px;
+    text-shadow: 0px 4px 0px rgba(255,255,255,0.16);
+    text-align: left;
+    font-style: normal;
+    text-transform: none;
+  }
+  .desc {
+    margin-top: 20rpx;
+  }
+  .total {
+    margin-top: 40rpx;
+    .number {
+      font-size: 20px;
+      font-weight: bold;
+      color: #363F4D;
+    }
+    .name {
+      font-size: 16px;
+      color: #363F4D;
+      font-weight: bold;
+    }
+    .left {
+      width: 40%;
+      height: 100%;
+      padding: 20rpx 20rpx 70rpx;
+      border-radius: 10rpx;
+      background: linear-gradient( 180deg, #F0D9B4 0%, #F6F6F6 100%);
+      overflow: hidden;
+      .info {
+        padding-left: 20rpx;
+        padding-top: 20rpx;
+        flex: 1;
+        .number {
+          font-size: 20px;
+        }
+        .name {
+          font-size: 18px;
+        }
+      }
+      .bottom {
+        bottom: 0;
+        border-radius:0 0 10rpx 10px;
+        width: calc(36% + 40rpx);
+        left: 0;
+        font-size: 16px;
+        text-align: center;
+        height: 80rpx;
+        line-height: 80rpx;
+        color: #363F4D;
+      }
+    }
+    .right {
+      flex: 1;
+      padding:0 20rpx;
+      margin-left: 20rpx;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .current_mouth {
+        margin-bottom: 20rpx;
+      }
+      .current_mouth,.finish {
+        flex: 1;
+        border-radius: 10rpx;
+        padding: 20rpx;
+        width: 100%;
+      }
+    }
 
-		.content {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
+  }
+}
 
-			.title {
-				font-size: 32rpx;
-				width: 100%;
-				text-overflow: ellipsis;
-				overflow: hidden;
-				white-space: nowrap;
-			}
+.img {
+  width: 40rpx;
+  height: 40rpx;
+  margin-left: 30rpx;
+}
+.trapezoidal {
+  position: relative;
+  display: inline-block;
+  min-width: 2em;
+  text-align: center;
+  padding: 3rpx 20rpx 3rpx 18rpx;
+}
 
-			.bottom {
-				display: flex;
+.trapezoidal::before,
+.trapezoidal::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0%;
+  width: 100%;
+  height: 100%;
+  border-radius: 0rpx 0 0 0;
+  background: #FF1111;
+  z-index: -1;
+  transform-origin: bottom;
+  transform: skew(18deg);
+  border: 0rpx solid #333;
+  box-sizing: border-box;
+}
 
-				.text {
-					margin-right: 20rpx;
-				}
-			}
-		}
+.trapezoidal::after {
+  left: auto;
+  right: 0;
+  transform: skew(-0deg);
+  border-radius: 0 0rpx 0 0;
+  background-color: #FF1111;
+  border-left: 0 none;
+}
+.list_title {
+  font-size: 20px;
+  background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
+  border-radius: 24px 24px 0px 0px;
+  padding: 20rpx 30rpx 0;
+}
 
-		.right {
-			height: 100%;
-			display: flex;
-			align-items: center;
-			margin-left: 10px;
+.Box {
+  .Content {
+    width: calc(100% - 48rpx);
+    padding-bottom: 100rpx;
+  }
 
-			.btn {
-				width: 120rpx;
-				height: 70rpx;
-				line-height: 70rpx;
-				font-size: 28rpx;
-			}
-		}
-	}
-</style>
\ No newline at end of file
+  .Unit {
+    padding: 24rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    position: relative;
+    box-shadow: 1px 1px 3px #ccc;
+    .trapezoidal {
+      position: absolute;
+      top: -4px;
+      right: 0;
+      color: #ffffff;
+      font-size: 14px;
+      font-weight: normal;
+      z-index: 1;
+    }
+    image {
+      width: 140rpx;
+    }
+    .right {
+      flex: 1;
+      padding-left: 30rpx;
+      .title {
+        font-size: 16px;
+      }
+      .type {
+        font-size: 14px;
+        color: #666;
+        font-weight: normal;
+        text {
+          margin-right: 20rpx;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/pages/investigation/index.vue b/src/pages/investigation/index.vue
index 986f634..88d1641 100644
--- a/src/pages/investigation/index.vue
+++ b/src/pages/investigation/index.vue
@@ -10,15 +10,15 @@
 			<view class="tab">
 				<view class="tab-item" :class="tab === 1 ? 'active' : ''" @click='tab = 1'>
 					<text>待办</text>
-					<text>200</text>
+					<text class="number">200</text>
 				</view>
 				<view class="tab-item" :class="tab === 2 ? 'active' : ''" @click='tab = 2'>
 					<text>正在办理</text>
-					<text>480</text>
+					<text class="number">480</text>
 				</view>
 				<view class="tab-item" :class="tab === 3 ? 'active' : ''" @click='tab = 3'>
 					<text>已完成</text>
-					<text>182</text>
+					<text class="number">182</text>
 				</view>
 			</view>
 			<view class="Content MarginAuto BorderBox">
@@ -220,7 +220,6 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-around;
-		font-weight: bold;
 		font-size: 16px;
 		height: 44px;
 		background: #ffffff;
@@ -233,25 +232,33 @@
 			line-height: 41px;
 			padding: 0 30rpx 0 30rpx;
 			border-bottom: 3px solid #fff;
+      display: flex;
+      align-items: center;
 			&.active {
 				color: rgb(60, 109, 195);
 				border-color: rgb(60, 109, 195);
 			}
+      .number {
+        font-weight: bold;
+        font-size: 18px;
+        margin-left: 10rpx;
+      }
 		}
 	}
 
 	.Box {
 		.Content {
-			width: calc(100% - 64rpx);
+			width: calc(100% - 48rpx);
 			padding-bottom: 100rpx;
 		}
 
 		.Unit {
-			padding: 36rpx;
+			padding: 24rpx;
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
 			position: relative;
+      box-shadow: 1px 1px 3px #ccc;
 			.trapezoidal {
 				position: absolute;
 				top: -4px;
@@ -262,7 +269,7 @@
 				z-index: 1;
 			}
 			image {
-				width: 160rpx;
+				width: 140rpx;
 			}
 			.right {
 				flex: 1;
diff --git a/src/static/image/finish.png b/src/static/image/finish.png
new file mode 100644
index 0000000..b830788
Binary files /dev/null and b/src/static/image/finish.png differ
diff --git a/src/static/image/home_bg.png b/src/static/image/home_bg.png
new file mode 100644
index 0000000..c1edad1
Binary files /dev/null and b/src/static/image/home_bg.png differ
diff --git a/src/static/image/mouth.png b/src/static/image/mouth.png
new file mode 100644
index 0000000..5fe53e2
Binary files /dev/null and b/src/static/image/mouth.png differ
diff --git a/src/static/image/need.png b/src/static/image/need.png
new file mode 100644
index 0000000..e054b9a
Binary files /dev/null and b/src/static/image/need.png differ