diff --git a/src/assets/images/eventBg.png b/src/assets/images/eventBg.png
new file mode 100644
index 0000000..17294d0
Binary files /dev/null and b/src/assets/images/eventBg.png differ
diff --git a/src/assets/images/frame.png b/src/assets/images/frame.png
new file mode 100644
index 0000000..4ca828d
Binary files /dev/null and b/src/assets/images/frame.png differ
diff --git a/src/assets/images/undefinedBg.png b/src/assets/images/undefinedBg.png
new file mode 100644
index 0000000..ff0832f
Binary files /dev/null and b/src/assets/images/undefinedBg.png differ
diff --git a/src/view/smartPage.vue b/src/view/smartPage.vue
index 3e2d9da..3d985de 100644
--- a/src/view/smartPage.vue
+++ b/src/view/smartPage.vue
@@ -14,7 +14,7 @@
                 </div>
                 <!-- 当前值班人员 -->
                 <div class="nowWork">
-                    <p class="titleText" text="当前值班人员" style="font-family: maleGod;">
+                    <p class="titleText" text="当前值班人员" style="font-family: maleGod;font-size: 14px;">
                         当前值班人员
                     </p>
                     <div class="work-items">
@@ -34,7 +34,7 @@
                 </div>
                 <!-- 中午值班人员 -->
                 <div class="wuWork">
-                    <p class="titleText" text="中午值班人员" style="font-family: maleGod;">
+                    <p class="titleText" text="中午值班人员" style="font-family: maleGod;font-size: 14px;">
                         中午值班人员
                     </p>
                     <div class="work-items">
@@ -83,14 +83,31 @@
                 </div>
                 <!-- 交办的任务 -->
                 <div class="my-notice">
-                    <p class="titleText" text="我交办的任务" style="font-family: maleGod">
+                    <p class="titleText" text="我交办的任务"
+                        style="font-family: maleGod;margin-bottom: 10px;font-size: 14px;">
                         我交办的任务
                     </p>
+                    <div class="myBox">
+                        <div class="noticeBg" v-for="(s, i) in myNotice1">
+                            <section>
+                                <p :class="'p' + i">{{ s.num }}</p>
+                                <p class="name1">{{ s.name }}</p>
+                            </section>
+                        </div>
+                    </div>
                 </div>
                 <div class="jiao-notice">
-                    <p class="titleText" text="我承办的任务" style="font-family: maleGod">
+                    <p class="titleText" text="我承办的任务" style="font-family: maleGod;margin:10px 0 10px;font-size: 14px;">
                         我承办的任务
                     </p>
+                    <div class="myBox">
+                        <div class="noticeBg" v-for="(s, i) in myNotice2">
+                            <section>
+                                <p :class="'p' + i">{{ s.num }}</p>
+                                <p class="name1">{{ s.name }}</p>
+                            </section>
+                        </div>
+                    </div>
                 </div>
 
 
@@ -102,7 +119,34 @@
                         服务
                     </p>
                 </div>
+                <div class="service-event">
+                    <div class="event-item" v-for="(s, i) in serviceList" :key="i">
+                        <p class="event-title">{{ s.name }}</p>
+                        <p>
+                            <span :class="'span' + i">{{ s.num }}</span>
+                            <span class="unit">件</span>
+                        </p>
+                    </div>
+                </div>
+                <p class="titleText" text="疑似不规范的行为" style="font-family: maleGod;margin:10px 0 10px;font-size: 14px;">
+                    疑似不规范的行为
+                </p>
+                <!-- 画面 -->
+                <div class="service-frame">
+                    <div class="frame-item" v-for="(s, i) in serviceFrame">
+                        <div class="frame">
 
+                        </div>
+                        <div class="frame-cont">
+                            <ul>
+                                <li>{{ s.time }}</li>
+                                <li>{{ s.adress }}</li>
+                                <li style="color:#ebad22">{{ s.statu1 }}</li>
+                                <li style="color:#0e745c">{{ s.statu2 }}</li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
             </div>
 
         </div>
@@ -116,6 +160,43 @@ export default {
     },
     data() {
         return {
+            // 服务画面
+            serviceFrame: [
+                {
+                    time: '2023-02-03 16:23',
+                    adress: '国网雨花营业厅',
+                    statu1: '离岗异常',
+                    statu2: '已办理'
+                },
+                {
+                    time: '2023-02-03 16:23',
+                    adress: '国网雨花营业厅',
+                    statu1: '离岗异常',
+                    statu2: '已办理'
+                },
+                {
+                    time: '2023-02-03 16:23',
+                    adress: '国网雨花营业厅',
+                    statu1: '离岗异常',
+                    statu2: '已办理'
+                }
+            ],
+            // 服务情况事件
+            serviceList: [
+                {
+                    name: '已响应事件',
+                    num: 4
+                },
+                {
+                    name: '未响应事件',
+                    num: 0
+                },
+                {
+                    name: '累计未响应事件',
+                    num: 0
+                }
+            ],
+            // 
             workTime: '',
             config: {
                 header: ['排名', '业务类型', '占比'],
@@ -168,7 +249,7 @@ export default {
             // 我承办的任务
             myNotice2: [{
                 name: '任务总数',
-                num:2,
+                num: 2,
             },
             {
                 name: '已完成',
@@ -326,10 +407,136 @@ export default {
     // 右边内容
     .notice {
         height: 31.6%;
+
+        .my-notice,
+        .jiao-notice {
+            width: 100%;
+            height:41%;
+            .myBox {
+                display: flex;
+                justify-content: space-around;
+            }
+
+            .p0 {
+                color: #40accd;
+            }
+
+            .noticeBg>section>p:nth-child(1) {
+                font-size: 18px;
+                font-family: maleGod;
+            }
+
+            .noticeBg {
+                background-image: url(../assets/images/notice-item.png);
+                background-size: 100% 100%;
+                width: 123px;
+                height: 68px;
+                text-align: center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+
+                .name1 {
+                    color: #f8fcfd;
+                    font-size: 14px;
+                    margin-top: 5px;
+                }
+
+                .p1 {
+                    color: #54b441
+                }
+
+                .p2 {
+                    color: #b8894b;
+                }
+            }
+        }
+
     }
 
     .service {
         height: 67.5%;
+
+        .service-event {
+            display: flex;
+            justify-content: space-around;
+
+            .event-item>p:nth-child(2) {
+                text-align: center;
+                font-size: 26px;
+
+            }
+
+            .event-item {
+                background-image: url(../assets/images/eventBg.png);
+                width: 116px;
+                height: 73px;
+                padding: 8px;
+                position: relative;
+                box-sizing: border-box;
+                font-size: 14px;
+                color: #f8fcfd;
+
+                .unit {
+                    position: absolute;
+                    bottom: 15px;
+                    right: 10px;
+                    font-size: 14px;
+                }
+
+                .span0,
+                .span1,
+                .span2 {
+                    font-family: maleGod;
+                    color: #40accd
+                }
+            }
+
+        }
+
+        .service-frame {
+            width: 100%;
+            height: calc(100% - 148px);
+
+            .frame-item {
+                background-image: url(../assets/images/undefinedBg.png);
+                background-size: 100% 100%;
+                height: 30%;
+                margin-bottom: 13px;
+                padding: 10px 15px 10px;
+                box-sizing: border-box;
+                width: 100%;
+                display: flex;
+
+                .frame {
+                    background-image: url(../assets/images/frame.png);
+                    background-size: 100% 100%;
+                    height: 100%;
+                    width: 173px;
+                }
+
+                .frame-cont {
+                    // width: calc(100% - 203px);
+                    width:calc(100% - 173px);
+                    ul {
+                        width:100%;
+                        height:100%;
+                        
+                        li{
+                            padding-left:30px;
+                            padding-top:12px;
+                            box-sizing:border-box;
+                            height:22%;
+                            display:flex;
+                            // margin-top:2px;
+                            align-items:center;
+                            font-size:14px;
+                            color:#fff;
+                        }
+                    }
+                }
+            }
+        }
     }
 }