diff --git a/src/api/system/index.js b/src/api/system/index.js
new file mode 100644
index 0000000..6290c61
--- /dev/null
+++ b/src/api/system/index.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+// 查询首页基本信息
+
+export function informationStatistics(query) {
+  return request({
+    url: '/system/homeStatistics/informationStatistics',
+    method: 'get',
+    params: query
+  })
+}
+// 查询首页今日概述
+export function summaryToday(query) {
+    return request({
+      url: '/system/homeStatistics/summaryToday',
+      method: 'get',
+      params: query
+    })
+  }
+
diff --git a/src/views/index.vue b/src/views/index.vue
index f5ff6d3..a0321bf 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -1,5 +1,49 @@
 <template>
   <div class="app-container home">
+    <div class="homes">
+      <div class="count" @click="goodsCount">
+        <div class="el-icon-picture-outline icons"></div>
+        <div class="counts">{{List.goodsCount}}</div>
+        <div class="total">商品总数量</div>
+      </div>
+      <div class="count member" @click="patientCount">
+        <div class="el-icon-user-solid icons"></div>
+        <div class="counts">{{List.patientCount}}</div>
+        <div class="total">会员总数量</div>
+      </div>
+      <div class="count order" @click="appointmentOrderCount">
+        <div class="el-icon-shopping-cart-2 icons"></div>
+        <div class="counts">{{List.appointmentOrderCount}}</div>
+        <div class="total">预约订单总数量</div>
+      </div>
+      <div class="count shop"  @click="goodsOrderCount">
+        <div class="el-icon-s-data icons"></div>
+        <div class="counts">{{List.goodsOrderCount}}</div>
+        <div class="total">商品订单总数量</div>
+      </div>
+    </div>
+    <div class="today">
+      <!-- 今日概括 -->
+        <div class="todayitem">
+        今日上架商品数量
+        <span>{{summaryTodayList.goodsCount}}</span>
+      </div>
+       <div class="todayitem">
+        今日新增会员数
+        <span>{{summaryTodayList.patientCount}}</span>
+      </div>
+      <div class="todayitem">
+        今日订单数
+        <span>{{summaryTodayList.orderCount}}</span>
+      </div>
+      <div class="todayitem">
+        今日交易额
+        <span>{{summaryTodayList.totalPrice}}</span>
+      </div>
+     
+    
+    </div>
+
     <!-- <el-row :gutter="20">
       <el-col :sm="24" :lg="12" style="padding-left: 20px">
         <h2>新医路后台管理框架</h2>
@@ -61,91 +105,183 @@
 </template>
 
 <script>
+import {
+  informationStatistics,
+  summaryToday
+} from "@/api/system/index";
 export default {
   name: "index",
   data() {
     return {
+      queryParams: {
+        goodsCount: null,
+        patientCount: null,
+        orderCount: null,
+        storeCount: null,
+      },
+      // 基本信息查询
+      List:[],
+      // 概述查询
+      summaryTodayList:[],
       // 版本号
       version: "0.0.1",
     };
   },
+  created() {
+    this.getList();
+  },
   methods: {
+    goodsCount() {
+      this.$router.push('/Shopping/operateGoodsInfo');
+    },
+    patientCount(){
+       this.$router.push('/patient/patientArchives');
+    },
+    appointmentOrderCount(){
+      this.$router.push('/order/order');
+    },
+    goodsOrderCount(){
+       this.$router.push('/order/goodsOrder');
+    },
+
+    getList() {
+      informationStatistics(this.queryParams).then((response) => {
+        console.log(response)
+        this.List = response.data;
+
+      });
+      summaryToday(this.queryParams).then((response) => {
+        console.log(response)
+        this.summaryTodayList = response.data;
+
+      });
+    },
     goTarget(href) {
       window.open(href, "_blank");
     },
+
   },
 };
 </script>
 
 <style scoped lang="scss">
+.count {
+  color: white;
+  width: 30%;
+  background-image: linear-gradient(
+    109.6deg,
+    rgba(255, 113, 113, 0.6) 11.2%,
+    #ff7171 100.2%
+  );
+  transition: 0.35s;
+  -webkit-box-shadow: 1px 3px 12px rgb(255 113 113 / 30%);
+  height: 84px;
+  border-radius: 0.4em;
+  font-weight: 700;
+  margin-right: 20px;
+}
+.count:hover {
+  cursor: pointer;
+  -webkit-transform: translateY(-10px);
+  transform: translateY(-10px);
+  z-index: 99;
+}
+.member {
+  background-image: linear-gradient(
+    109.6deg,
+    rgba(255, 170, 113, 0.6) 11.2%,
+    #ffaa71 100.2%
+  );
+  -webkit-box-shadow: 1px 3px 12px rgb(255 170 113 / 30%);
+  box-shadow: 1px 3px 12px rgb(255 170 113 / 30%);
+}
+.order {
+  background-image: linear-gradient(
+    109.6deg,
+    rgba(147, 181, 225, 0.6) 11.2%,
+    #93b5e1 100.2%
+  );
+  -webkit-box-shadow: 1px 3px 12px rgb(147 181 225 / 30%);
+  box-shadow: 1px 3px 12px rgb(147 181 225 / 30%);
+}
+.shop {
+  background-image: linear-gradient(
+    109.6deg,
+    rgba(132, 140, 207, 0.6) 11.2%,
+    #848ccf 100.2%
+  );
+  -webkit-box-shadow: 1px 3px 12px rgb(132 140 207 / 30%);
+  box-shadow: 1px 3px 12px rgb(132 140 207 / 30%);
+}
+.counts {
+  margin-top: 20px;
+  margin-left: 35%;
+  line-height: 1;
+  font-size: 21px;
+}
+.total {
+  margin-top: 5px;
+  margin-left: 35%;
+  font-size: 13px;
+}
+.icons {
+  // display:inline-block;
+  margin-top: 30px;
+  margin-left: 35px;
+  position: absolute;
+  font-size: 31px;
+  // font-family: Ionicons;
+  // speak: none;
+  // font-style: normal;
+  // font-weight: 400;
+  // font-variant: normal;
+  // text-transform: none;
+  // text-rendering: optimizeLegibility;
+  // line-height: 1;
+  // -webkit-font-smoothing: antialiased;
+  // -moz-osx-font-smoothing: grayscale;
+  // vertical-align: -0.125em;
+  // text-align: center;
+}
+.today {
+  // background: #ff7171;
+  // padding: 0 30px;
+  width: 100%;
+  height: 300px;
+  display: flex;
+
+  margin-top: 10px;
+  margin-left: -10px;
+}
+.todayitem {
+  transition: 0.35s;
+  margin: 10px;
+  width: 30%;
+  height: 100px;
+  margin-bottom: 20px;
+  border-radius: 0.4em;
+  font-weight: 700;
+  background: hsla(0, 0%, 92.2%, 0.5333333333333333);
+  padding: 20px;
+  span {
+    display: block;
+    color: #ff5c58;
+    font-size: 21px;
+  }
+}
+.todayitem:hover {
+  cursor: pointer;
+  -webkit-transform: translateY(-10px);
+  transform: translateY(-10px);
+  z-index: 99;
+}
 .home {
-  // display: flex;
-  // justify-content: center;
-  // align-items: center;
   height: 100%;
   width: 100%;
   background-size: cover;
-  // margin-top: 300px;
-  //  background-image: url("../assets/images/mian.png");
-  // blockquote {
-  //   padding: 10px 20px;
-  //   margin: 0 0 20px;
-  //   font-size: 17.5px;
-  //   border-left: 5px solid #eee;
-  // }
-  // hr {
-  //   margin-top: 20px;
-  //   margin-bottom: 20px;
-  //   border: 0;
-  //   border-top: 1px solid #eee;
-  // }
-  // .col-item {
-  //   margin-bottom: 20px;
-  // }
-
-  // ul {
-  //   padding: 0;
-  //   margin: 0;
-  // }
-
-  // font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  // font-size: 13px;
-  // color: #676a6c;
-  // overflow-x: hidden;
-
-  // ul {
-  //   list-style-type: none;
-  // }
-
-  // h4 {
-  //   margin-top: 0px;
-  // }
-
-  // h2 {
-  //   margin-top: 10px;
-  //   font-size: 26px;
-  //   font-weight: 100;
-  // }
-
-  // p {
-  //   margin-top: 10px;
-
-  //   b {
-  //     font-weight: 700;
-  //   }
-  // }
-
-  // .update-log {
-  //   ol {
-  //     display: block;
-  //     list-style-type: decimal;
-  //     margin-block-start: 1em;
-  //     margin-block-end: 1em;
-  //     margin-inline-start: 0;
-  //     margin-inline-end: 0;
-  //     padding-inline-start: 40px;
-  //   }
-  // }
+}
+.homes {
+  display: flex;
 }
 </style>