diff --git a/src/pages/msgCenter/assets/rang.png b/src/pages/msgCenter/assets/rang.png
new file mode 100644
index 0000000..f5428c2
Binary files /dev/null and b/src/pages/msgCenter/assets/rang.png differ
diff --git a/src/pages/msgCenter/assets/warn.png b/src/pages/msgCenter/assets/warn.png
new file mode 100644
index 0000000..4583b3b
Binary files /dev/null and b/src/pages/msgCenter/assets/warn.png differ
diff --git a/src/pages/msgCenter/index.scss b/src/pages/msgCenter/index.scss
new file mode 100644
index 0000000..68430b0
--- /dev/null
+++ b/src/pages/msgCenter/index.scss
@@ -0,0 +1,49 @@
+.cont{
+    padding: 10px 15px ;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    margin-top: 25px;
+    border-radius: 15px;
+    justify-content: space-between;
+    box-shadow:
+    0 10px 6px -6px #ccc,  /* bottom shadow */  
+    0 -10px 6px -6px #ccc,  /* top shadow */  
+    10px 0 6px -6px #ccc,  /* right shadow */  
+    -10px 0 6px -6px #ccc; /* left shadow */  
+    ;
+    .right{
+        width: 80%;
+        height: 100%;
+        padding: 15px 10px;
+        .right-top{
+            display: flex;
+            margin-bottom: 15px;
+            align-items: center;
+            justify-content: space-between;
+            .top-left{
+                font-weight: 700;
+            }
+            .top-right{
+                font-size: 30px;
+                color: #c1c1c1;
+            }
+        }
+        .warn{
+            color:#f7cc73;
+            font-size:30px;
+        }
+        .rang{
+            color:red;
+            font-size:30px;
+        }
+    }
+}
+.main{
+    margin: auto;
+    display: flex;
+    width: 93%;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+}
\ No newline at end of file
diff --git a/src/pages/msgCenter/index.tsx b/src/pages/msgCenter/index.tsx
new file mode 100644
index 0000000..461988e
--- /dev/null
+++ b/src/pages/msgCenter/index.tsx
@@ -0,0 +1,99 @@
+import { View,Image } from "@tarojs/components"
+import { useState } from "react"
+import warn from './assets/warn.png'
+import rang from './assets/rang.png'
+import './index.scss'
+const MsgCenter = () => {
+    const [selectedMenuId, setSelectedMenuId] = useState('all')
+    let contList=[
+        {
+            title:'土壤EC值预警',
+            time:'2024/3/13 16:30',
+            url:'./assets/rang.png',
+            message:'1号基地土壤EC值低于0.4阈值报警',
+            id:'1'
+        },
+        {
+            title:'棚内温度报警',
+            url:'./assets/rang.png',
+            time:'2024/3/1 10:30',
+            message:'3号棚内温度39度,超过阈值37度,建议打开放风机',
+            id:'1'
+        },
+        {
+            title:'系统通知',
+            url:'./assets/warn.png',
+            time:'2024/3/13 8:30',
+            message:'今日设备巡检结果尚未填报',
+            id:'0'
+        },
+        {
+            title:'虫情预警',
+            url:'./assets/rang.png',
+            time:'2024/3/13 6:30',
+            message:'1号棚内虫害数量接近阈值预警',
+            id:'1'
+        },
+    ]
+    const topMenus = [
+        {
+            id: 'all',
+            title: '全部'
+        },
+        {
+            id: '1',
+            title: '预警'
+        },
+        {
+            id: '2',
+            title: '通知'
+        },
+    ]
+
+    const dataList = [
+        {
+            id: '1',
+        },
+        {
+            id: '2',
+        },
+    ]
+  
+    return (
+        <View>
+            <View className='flex px-2 py-1 border-b-2 border-slate-100' >
+                    {
+                        topMenus.map(item => {
+                            return (
+                                <View
+                                    className={`p-1 px-3 ${selectedMenuId === item.id ? 'text-lime-600 border-b-4 border-lime-800' : ''}`}
+                                    key={item.id}
+                                    onClick={() => setSelectedMenuId(item.id)}
+                                >{ item.title }</View>
+                            )
+                        })
+                    }
+            </View>
+            <View className='main'>
+                {
+                    contList.map((item,index)=>{
+                        return (
+                            <View className='cont' key={index}>
+                                <Image src={item.id=='1'?rang:warn} className='w-12 h-12'></Image>
+                                <View className='right'>
+                                    <View className='right-top'>
+                                        <View className='top-left'>{item.title}</View>
+                                        <View className='top-right'>{item.time}</View>
+                                    </View>
+                                    <View className={item.id=='1'?'rang':'warn'}>{item.message}</View>
+                                </View>
+                            </View>
+                        )
+                    })
+                }
+            </View>
+        </View>
+    )
+}
+
+export default MsgCenter;
\ No newline at end of file