diff --git a/fuintAdmin_zt/src/assets/images/banner.png b/fuintAdmin_zt/src/assets/images/banner.png
new file mode 100644
index 000000000..d6bc4752b
Binary files /dev/null and b/fuintAdmin_zt/src/assets/images/banner.png differ
diff --git a/fuintAdmin_zt/src/assets/images/l-one.png b/fuintAdmin_zt/src/assets/images/l-one.png
new file mode 100644
index 000000000..99cdb837a
Binary files /dev/null and b/fuintAdmin_zt/src/assets/images/l-one.png differ
diff --git a/fuintAdmin_zt/src/assets/images/l-three.png b/fuintAdmin_zt/src/assets/images/l-three.png
new file mode 100644
index 000000000..41b7a5b69
Binary files /dev/null and b/fuintAdmin_zt/src/assets/images/l-three.png differ
diff --git a/fuintAdmin_zt/src/assets/images/l-two.png b/fuintAdmin_zt/src/assets/images/l-two.png
new file mode 100644
index 000000000..bb3e71dbb
Binary files /dev/null and b/fuintAdmin_zt/src/assets/images/l-two.png differ
diff --git a/fuintAdmin_zt/src/views/Service/index.vue b/fuintAdmin_zt/src/views/Service/index.vue
index 608e20d16..6e5f18f4c 100644
--- a/fuintAdmin_zt/src/views/Service/index.vue
+++ b/fuintAdmin_zt/src/views/Service/index.vue
@@ -1,177 +1,67 @@
 <template>
     <div class="app-container">
-      <el-card >
-        <el-row :gutter="24">
-          <el-form ref="queryParams" :model="queryParams" label-width="40px">
-          <el-col :span="4">
-
-              <el-form-item label="名称">
-                <el-input v-model="queryParams.storeName"></el-input>
-              </el-form-item>
-
-          </el-col>
-          <el-col :span="4">
-
-              <el-form-item label="状态">
-                <el-select v-model="queryParams.status" placeholder="店铺状态">
-                  <el-option label="启用" value="qy"></el-option>
-                  <el-option label="禁用" value="jy"></el-option>
-                </el-select>
-              </el-form-item>
-
-          </el-col>
-          <!-- <el-col :span="4">
-
-              <el-form-item label="套餐">
-                <el-select v-model="form.region" placeholder="店铺套餐">
-                  <el-option label="店铺套餐一" value="shanghai"></el-option>
-                  <el-option label="店铺套餐二" value="beijing"></el-option>
-                </el-select>
-              </el-form-item>
-
-          </el-col> -->
-          <!-- <el-col :span="6">
-
-              <el-form-item label="时间">
-                <el-date-picker
-                  v-model="value1"
-                  type="daterange"
-                  range-separator="至"
-                  start-placeholder="开始日期"
-                  end-placeholder="结束日期">
-                </el-date-picker>
-              </el-form-item>
-
-          </el-col> -->
-            <el-col :span="4">
-              <el-button type="primary" icon="el-icon-search" @click="getlist()">搜索</el-button>
-              <el-button type="" icon="el-icon-refresh" @click="res()">重置</el-button>
-
-
-            </el-col>
-
-          </el-form>
-
-        </el-row>
-
-      </el-card>
-      <el-card style="margin-top: 20px" v-for="(item,index) in arrlist" :key="index">
-        <div slot="header" class="clearfix">
-          <span>{{item.storeName || ''}}</span>
-<!--          <el-button style="float: right; padding: 3px 0" type="text">进入</el-button>-->
+        <div class="bannser">
+          <img src="../../assets/images/banner.png" alt="" >
         </div>
-        <div class="box-wrap">
-          <div class="zong-box" v-for="(items,index) in item.storeList" :key="index" >
-            <div class="pur-box" @click="godetails(items.id)">
-              <el-tag type="success" v-if="items.status=='qy'">启用</el-tag>
-              <el-tag type="danger" v-else>禁用</el-tag>
-              <div class="disper-box">
-                <div class="box-img">
-                <img v-if="items.logo" :src="imagePath + items.logo" style="width: 96px;height: 96px">
-                <img v-else src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png" style="width: 96px;height: 96px">
-                </div>
-                <div >
-                  <div class="title">{{items.name || ''}}</div>
-                  <div class="box-hui">
-                    <div>注册时间：</div>
-                    <div>{{    items.createTime.substring(0,10) || ''}}</div>
-                  </div>
-                  <div class="box-hui">
-                    <div>联系人：</div>
-                    <div>{{items.contact || '暂无'}}</div>
-                  </div>
-                  <div class="box-hui">
-                    <div>联系电话：</div>
-                    <div>{{items.phone || '暂无'}}</div>
-                  </div>
-                </div>
-              </div>
-
+      <div class="b-bs">
+        <div class="left-box">
+          <div class="san-box">
+            <div>
+              <img src="../../assets/images/l-one.png" style="width: 80px;height: 80px">
             </div>
-            <div class="hui-bottom">
-                <div>
-                  <div class="shang-biao">{{item.storeList.length || 0}}</div>
-                  <div class="xia-biao">创建门店数（个）</div>
-                </div>
-              <div>
-                <!-- <div class="shang-biao">{{ items.userNum}}</div> -->
-                <div class="shang-biao">{{ items.userNum}}</div>
-                <div class="xia-biao">会员数（人）</div>
-              </div>
-              <div>
-                <div class="shang-biao">{{  items.orderNum}}</div>
-                <div class="xia-biao">支付订单（笔）</div>
-              </div>
+            <div>
+              <div class="r-title">568</div>
+              <div class="r-size">合作油站总数</div>
+            </div>
+          </div>
+          <div class="san-box" style="background: linear-gradient( 90deg, #FFDC9B 0%, #FFC154 100%);">
+            <div>
+              <img src="../../assets/images/l-two.png" style="width: 80px;height: 80px">
+            </div>
+            <div>
+              <div class="r-title">568</div>
+              <div class="r-size">合作油站总数</div>
+            </div>
+          </div>
+          <div class="san-box" style="background: linear-gradient( 90deg, #9CDCA0 0%, #5BC557 100%);">
+            <div>
+              <img src="../../assets/images/l-three.png" style="width: 80px;height: 80px">
+            </div>
+            <div>
+              <div class="r-title">568</div>
+              <div class="r-size">合作油站总数</div>
             </div>
           </div>
-
         </div>
-      </el-card>
+        <div class="right-box">
+          <div class="title_">
+            <div>通知中心</div>
+            <div style="font-size: 12px;color: #BBBBBB;display: flex;align-items: center">更多 <i class="el-icon-arrow-right"></i> </div>
+          </div>
+          <div class="hang_" v-for="(item,index) in 4" :key="index" >【到期提醒】百业兴智慧油站系统将于2024年07月10日到期...</div>
+        </div>
+      </div>
+      <div class="b-bs">
+        <div class="left-box-t">  </div>
+        <div class="right-box-t">  </div>
+      </div>
     </div>
 </template>
 
 <script>
-  import { Storelist,getUserNumApi,
-getOrderNumApi  } from "@/api/service/service";
+
   export default {
-    name: 'service',
-    dicts: ['zhzt'],
+
     data(){
       return{
-        form: {
-          name: '',
-          region: '',
-          date1: '',
-          date2: '',
-          delivery: false,
-          type: [],
-          resource: '',
-          desc: ''
-        },
+        form: {},
         imagePath: process.env.VUE_APP_SERVER_URL,
 
-        arrlist:[],
-        value1:'',
-        queryParams: {
-          storeName: '',
-          status: '',
-          pageNo: 1,
-          pageSize: 10,
-
-        },
       }
     },
-    async mounted() {
-      await this.getlist()
-    },
+
     methods:{
-      async getlist(){
-        await Storelist(this.queryParams).then(res=>{
-          console.log(res)
-          this.arrlist = res.data.records
-        })
-      },
 
-      res() {
-        this.queryParams= {
-          storeName: '',
-          status: '',
-          pageNo: 1,
-          pageSize: 10,
-
-        }
-
-        this.getlist()
-      },
-      godetails(id){
-        this.$router.push({
-          path:'/Service/details',
-          query:{
-           id:id
-          }
-        })
-
-      },
     }
 
   }
@@ -183,84 +73,105 @@ getOrderNumApi  } from "@/api/service/service";
     width: 100%;
     height: 100%;
     /* height: 100vh; */
-    background: white;
+    background: #f4f5f9;
   }
-.ding-top{
+.bannser{
   width: 100%;
+  height: 230px;
+  border-radius: 8px;
+  overflow: hidden;
+  img{
+    width: 100%;
+    height: 100%;
+  }
+
+}
+.b-bs{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 20px;
+}
+.left-box{
+  background: #FFFFFF;
+  border-radius: 10px 10px 10px 10px;
+  border: 1px solid #FFFFFF;
+  height: 192px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   box-sizing: border-box;
+  padding: 15px;
+}
+.left-box-t{
+  box-sizing: border-box;
+  padding: 15px;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #FFFFFF;
+  height: 380px;
 
 }
-  .box-dis{
-    display: flex;
-    align-items: center;
-  }
-
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
+.right-box{
+  width: 435px;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #FFFFFF;
+  height: 192px;
+  box-sizing: border-box;
+  padding: 15px;
 }
-.clearfix:after {
-  clear: both
+.right-box-t{
+  width: 435px;
+  border-radius: 8px;
+  background: #fff;
+  border: 1px solid #FFFFFF;
+  height: 380px;
+  box-sizing: border-box;
+  padding: 15px;
 }
-.box-wrap{
+.san-box{
+  width: 360px;
+  height: 150px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  background: linear-gradient( 90deg, #70CAFD 0%, #02AAFE 100%);
+  margin: 15px 0px;
+  margin-right: 15px;
+  box-sizing: border-box;
+  padding: 20px 40px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.r-title{
+  font-weight: bold;
+  font-size: 42px;
+  color: #FFFFFF;
+  text-align: center;
+}
+.r-size{
+  font-size: 14px;
+  color: #FFFFFF;
+}
+.title_{
+  font-size: 16px;
+  color: #333333;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   width: 100%;
-    display: flex;
-    flex-wrap: wrap;
 }
-  .zong-box{
-    width: 18%;
-    overflow: hidden;
-    border-radius: 8px;
-    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
-    margin-bottom: 30px;
-    margin-right: 30px;
-  }
-  .pur-box{
-    width: 100%;
-    padding: 10px;
-
-  }
-  .disper-box{
-    display: flex;
-    margin-top: 10px;
-  }
-  .box-img{
-    width: 96px;
-    height: 96px;
-    border-radius: 8px;
-    overflow: hidden;
-    margin-right: 10px;
-  }
-  .box-hui{
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    color: #99a9bf;
-    margin-top: 4px;
-  }
-  .title{
-    font-size: 18px;
-    font-weight: bold;
-  }
-  .hui-bottom{
-    width: 100%;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    background: #fafafc;
-    padding: 20px 10px;
-  }
-  .shang-biao{
-    font-size: 16px;
-    font-weight: bold;
-    width: 100%;
-    text-align: center;
-  }
-  .xia-biao{
-    width: 100%;
-    text-align: center;
-    font-size: 12px;
-  }
+.hang_{
+  width: 100%;
+  white-space: nowrap;   //不换行
+  overflow: hidden;       //超出部分隐藏
+  text-overflow: ellipsis;    //文本溢出显示省略号
+  font-size: 14px;
+  color: #777777;
+  margin: 14px auto;
+  overflow: auto;
+}
 </style>