From d5b4b7d316bc6d36a0f2d8bc8df7b3b8b7d0f7fc Mon Sep 17 00:00:00 2001
From: "@QQNZX" <cccccc420590@163.com>
Date: Sat, 25 Nov 2023 09:04:19 +0800
Subject: [PATCH] =?UTF-8?q?11.22=E5=89=8D=E7=AB=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fuintAdmin/src/assets/styles/variables.scss   |   2 +-
 fuintAdmin/src/layout/components/Navbar.vue   |   2 +-
 .../src/layout/components/Sidebar/index.vue   |   5 +-
 .../EventMarketing/cardExchange/index.vue     |   2 +-
 .../EventMarketing/cardFavorable/index.vue    |  21 +-
 .../views/EventMarketing/giftBlock/index.vue  |   1 +
 fuintAdmin/src/views/index.vue                | 160 +++++--------
 .../src/views/indexcomponents/bottomindex.vue | 175 ++++++++++++++
 .../views/indexcomponents/centenrindex.vue    | 193 +++++++++++++++
 .../views/indexcomponents/indexcomponents.vue |  66 +++++
 .../src/views/indexcomponents/topindex.vue    | 226 ++++++++++++++++++
 11 files changed, 740 insertions(+), 113 deletions(-)
 create mode 100644 fuintAdmin/src/views/indexcomponents/bottomindex.vue
 create mode 100644 fuintAdmin/src/views/indexcomponents/centenrindex.vue
 create mode 100644 fuintAdmin/src/views/indexcomponents/indexcomponents.vue
 create mode 100644 fuintAdmin/src/views/indexcomponents/topindex.vue

diff --git a/fuintAdmin/src/assets/styles/variables.scss b/fuintAdmin/src/assets/styles/variables.scss
index 56415887a..b90628738 100644
--- a/fuintAdmin/src/assets/styles/variables.scss
+++ b/fuintAdmin/src/assets/styles/variables.scss
@@ -11,7 +11,7 @@ $panGreen: #30B08F;
 // 默认菜单主题风格
 $base-menu-color:#ffffff;// 菜单全部字体颜色
 $base-menu-color-active:#ffffff;// 父级菜单激活的字体颜色
-$base-menu-background:#1a5982;
+$base-menu-background:#5a91ff;
 $base-logo-title-color: #ffffff;
 
 $base-menu-light-color:#ffffff;
diff --git a/fuintAdmin/src/layout/components/Navbar.vue b/fuintAdmin/src/layout/components/Navbar.vue
index 276302bea..4d6a2b661 100644
--- a/fuintAdmin/src/layout/components/Navbar.vue
+++ b/fuintAdmin/src/layout/components/Navbar.vue
@@ -111,7 +111,7 @@ export default {
   overflow: hidden;
   position: relative;
   background: #144a6e;
-  background-image: url("../../assets/images/bolang.png") ;
+  background-image: url("../../assets/images/kkx.png") ;
   background-size: 100% 100%;
   background-size: cover;
   background-repeat: no-repeat;
diff --git a/fuintAdmin/src/layout/components/Sidebar/index.vue b/fuintAdmin/src/layout/components/Sidebar/index.vue
index 6c6122398..055086649 100644
--- a/fuintAdmin/src/layout/components/Sidebar/index.vue
+++ b/fuintAdmin/src/layout/components/Sidebar/index.vue
@@ -9,14 +9,15 @@
             <el-menu
                 :default-active="activeMenu"
                 :collapse="false"
-                :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
+                        :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
                 text-color="#ffffff"
                 :unique-opened="true"
-                active-text-color="#409eff"
+                active-text-color="#44DABF"
                 :collapse-transition="false"
                 mode="vertical"
                 style="margin-bottom: 80px;"
             >
+
                 <sidebar-item
                     v-for="(route, index) in sidebarRouters"
                     :key="route.path  + index"
diff --git a/fuintAdmin/src/views/EventMarketing/cardExchange/index.vue b/fuintAdmin/src/views/EventMarketing/cardExchange/index.vue
index 11c7d70b1..e8a8fc446 100644
--- a/fuintAdmin/src/views/EventMarketing/cardExchange/index.vue
+++ b/fuintAdmin/src/views/EventMarketing/cardExchange/index.vue
@@ -171,7 +171,7 @@
           <el-input type="textarea" v-model="form.giftName" placeholder="请输入兑换礼品名"></el-input>
         </el-form-item>
         <el-form-item label="卡券有效期" prop="validity">
-          <el-input placeholder="请输入卡券有效期" v-model="form.validity">
+          <el-input type="number" placeholder="请输入卡券有效期" v-model="form.validity">
             <template slot="append">天</template>
           </el-input>
         </el-form-item>
diff --git a/fuintAdmin/src/views/EventMarketing/cardFavorable/index.vue b/fuintAdmin/src/views/EventMarketing/cardFavorable/index.vue
index c52138466..d0d302adf 100644
--- a/fuintAdmin/src/views/EventMarketing/cardFavorable/index.vue
+++ b/fuintAdmin/src/views/EventMarketing/cardFavorable/index.vue
@@ -184,7 +184,7 @@
           <el-radio-group v-model="form.timeType">
 <!--          0   -->
             <el-radio label="0"  style="display: flex;align-items: center" >
-              <div class="h-box"> <span>领券后立即生效，有效期</span>   <el-input placeholder="有效天数" style="width: 200px" v-model="form.validityZero">
+              <div class="h-box"> <span>领券后立即生效，有效期</span>   <el-input placeholder="有效天数" type="number" style="width: 200px" v-model="form.validityZero">
                 <template slot="append">天</template>
               </el-input>  </div>
 
@@ -200,7 +200,7 @@
               placeholder="选择日期">
             </el-date-picker>
                 <span>有效期</span>
-            <el-input placeholder="有效天数" style="width: 200px" v-model="form.validityOne"><template slot="append">天</template></el-input>
+            <el-input type="number"  placeholder="有效天数" style="width: 200px" v-model="form.validityOne"><template slot="append">天</template></el-input>
               </div>
             </el-radio>
 <!--            2-->
@@ -208,7 +208,7 @@
               <div class="h-box">
               领券后第 <el-input style="width: 200px"  placeholder="1" v-model="form.validityDay">
               <template slot="append">天生效</template>
-            </el-input> 有效期 <el-input placeholder="有效天数" style="width: 200px" v-model="form.validityTwo"><template slot="append">天</template></el-input>
+            </el-input> 有效期 <el-input type="number"  placeholder="有效天数" style="width: 200px" v-model="form.validityTwo"><template slot="append">天</template></el-input>
               </div>
             </el-radio>
 
@@ -233,7 +233,7 @@
           </el-time-picker>
         </el-form-item>
         <el-form-item label="可用时段" prop="availablePeriod">
-            <el-checkbox-group v-model="form.availablePeriod">
+            <el-checkbox-group v-model="form.availablePeriod" size="mini" >
               <el-checkbox-button v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox-button>
               <!--            <el-checkbox-button v-for="(item,index) in cities"  :key="index" :label="index">{{item}}</el-checkbox-button>-->
             </el-checkbox-group>
@@ -246,16 +246,18 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="每周可用时段" prop="checkTime" v-if="form.checkDateType ==  'week' ">
-          <el-checkbox-group v-model="form.checkTime">
+          <el-checkbox-group v-model="form.checkTime" size="mini" >
             <el-checkbox-button v-for="city in zhou" :label="city" :key="city">{{city}}</el-checkbox-button>
             <!--            <el-checkbox-button v-for="(item,index) in cities"  :key="index" :label="index">{{item}}</el-checkbox-button>-->
           </el-checkbox-group>
         </el-form-item>
         <el-form-item label="每月可用时段" prop="checkTime" v-if="form.checkDateType ==  'month' " >
-          <el-checkbox-group v-model="form.checkTime">
+          <el-checkbox-group v-model="form.checkTime" size="mini" @input="yueinput" >
             <el-checkbox-button v-for="city in yue" :label="city" :key="city">{{city}}</el-checkbox-button>
+
             <!--            <el-checkbox-button v-for="(item,index) in cities"  :key="index" :label="index">{{item}}</el-checkbox-button>-->
           </el-checkbox-group>
+          <div>每个月的： <span style="color: red;" v-for="(item,index) in lookyue " :key="index">{{item }},</span> 号</div>
         </el-form-item>
 
 <!--        <el-form-item label="排除日期" prop="checkOutTime">-->
@@ -354,12 +356,10 @@
         <el-table-column property="endTime" label="有效期结束"></el-table-column>
         <el-table-column property="status" label="券状态">
           <template slot-scope="scope">
-
             <span v-if="scope.row.status == 0">未使用</span>
             <span v-if="scope.row.status == 1">已使用</span>
             <span v-if="scope.row.status == 2">已过期</span>
           </template>
-
         </el-table-column>
         <el-table-column property="exchangeFrom" label="描述信息"></el-table-column>
       </el-table>
@@ -405,6 +405,7 @@ export default {
       }],
       cities: ['1', '2', '3', '4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24'],
       yue: ['1', '2', '3', '4','5','6','7','8','9','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24','25','26','27','28','29','30','31'],
+      lookyue:[],
       zhou:['周一','周二','周三','周四','周五','周六','周天'],
       oillist:['92#','95#','98#','0#','-10#','LNG','CNG','京92#','京95#','京0#',],
       checkboxGroup1: ['1'],
@@ -530,6 +531,10 @@ export default {
     this.getList();
   },
   methods: {
+    yueinput(e){
+      console.log(e)
+      this.lookyue = e
+    },
     gettongji(){
       let data = {
         pageNum:this.tongji.pageNum,
diff --git a/fuintAdmin/src/views/EventMarketing/giftBlock/index.vue b/fuintAdmin/src/views/EventMarketing/giftBlock/index.vue
index 91d9e1146..bfd2ffc2b 100644
--- a/fuintAdmin/src/views/EventMarketing/giftBlock/index.vue
+++ b/fuintAdmin/src/views/EventMarketing/giftBlock/index.vue
@@ -43,6 +43,7 @@
           <div class="tj-siez">剩余额度</div>
         </el-card>
         <el-card  class="kar" style="cursor: pointer" >
+
           <div class="tj-num"> <el-tag v-if="tjdata.exchangeStatus == 0"  @click="putStatus(1)">启用</el-tag> <el-tag type="info" v-if="tjdata.exchangeStatus == 1 "  @click="putStatus(0)">禁用</el-tag> </div>
           <div class="tj-siez">兑换功能状态</div>
         </el-card>
diff --git a/fuintAdmin/src/views/index.vue b/fuintAdmin/src/views/index.vue
index 54f5b834d..f7beffa1a 100644
--- a/fuintAdmin/src/views/index.vue
+++ b/fuintAdmin/src/views/index.vue
@@ -1,113 +1,23 @@
 <template>
   <div class="app-container">
-      <div class="overview">
-          <div class="title">运营概况 </div>
-          <div class="content" v-loading="loading">
-              <el-row class="line">
-                <el-col class="item" :span="6">
-                   <div class="do">
-                       <svg t="1641957967018" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7597" width="64" height="64"><path d="M917.504 376.832c-20.48 0-36.864 16.384-36.864 36.864v450.56c0 4.096 0 16.384-12.288 28.672-8.192 8.192-16.384 12.288-28.672 12.288H180.224c-20.48 0-40.96-16.384-40.96-40.96V155.648c0-20.48 16.384-40.96 40.96-40.96h344.064c20.48 0 36.864-16.384 36.864-36.864s-16.384-36.864-36.864-36.864H180.224C118.784 40.96 65.536 90.112 65.536 155.648v708.608c0 61.44 49.152 114.688 114.688 114.688h663.552c28.672 0 57.344-12.288 81.92-32.768 28.672-28.672 32.768-65.536 32.768-81.92V409.6c-4.096-16.384-20.48-32.768-40.96-32.768z" fill="#8a8a8a" p-id="7598"></path><path d="M782.336 528.384c0-20.48-20.48-40.96-40.96-40.96H266.24c-24.576 0-40.96 20.48-40.96 40.96v8.192c0 20.48 16.384 40.96 40.96 40.96h475.136c20.48 0 40.96-20.48 40.96-40.96v-8.192zM741.376 712.704H266.24c-24.576 0-40.96 20.48-40.96 40.96v8.192c0 20.48 16.384 40.96 40.96 40.96h475.136c20.48 0 40.96-20.48 40.96-40.96v-8.192c0-20.48-16.384-40.96-40.96-40.96zM584.04864 304.08704l298.43456-262.30784 62.17728 70.73792-298.43456 262.30784zM532.48 413.696l90.112-20.48-61.44-69.632z" fill="#8a8a8a" p-id="7599"></path></svg>
-                       <p class="text">今日新增订单数（笔）</p>
-                       <p class="number">{{ homeData.todayOrder }}</p>
-                   </div>
-                </el-col>
-                <el-col class="item" :span="6">
-                  <div class="do">
-                     <svg t="1641958321700" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10174" width="64" height="64"><path d="M204.8 438.528c-16.896 0-30.72-13.824-30.72-30.72 0-121.088 98.56-219.648 219.648-219.648 16.896 0 30.72 13.824 30.72 30.72s-13.824 30.72-30.72 30.72c-87.296 0-158.208 70.912-158.208 158.208 0 16.896-13.824 30.72-30.72 30.72zM393.728 856.064c-121.088 0-219.648-98.56-219.648-219.648 0-16.896 13.824-30.72 30.72-30.72s30.72 13.824 30.72 30.72c0 87.296 70.912 158.208 158.208 158.208 16.896 0 30.72 13.824 30.72 30.72 0 16.896-13.824 30.72-30.72 30.72zM622.336 856.064c-16.896 0-30.72-13.824-30.72-30.72 0-16.896 13.824-30.72 30.72-30.72 87.296 0 158.208-70.912 158.208-158.208 0-16.896 13.824-30.72 30.72-30.72 16.896 0 30.72 13.824 30.72 30.72 0 121.088-98.56 219.648-219.648 219.648zM811.264 438.528c-16.896 0-30.72-13.824-30.72-30.72 0-87.296-70.912-158.208-158.208-158.208-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72c121.088 0 219.648 98.56 219.648 219.648 0 16.896-13.824 30.72-30.72 30.72z" fill="#8a8a8a" p-id="10175"></path><path d="M684.544 564.224H355.328c-16.896 0-30.72-13.824-30.72-30.72s13.824-30.72 30.72-30.72h329.216c16.896 0 30.72 13.824 30.72 30.72s-13.824 30.72-30.72 30.72z" fill="#8a8a8a" p-id="10176"></path></svg>
-                     <p class="text">今日交易金额（元）</p>
-                     <p class="number">{{ homeData.todayPay ? homeData.todayPay.toFixed(2) : 0.00.toFixed(2) }}</p>
-                  </div>
-                </el-col>
-                <el-col class="item" :span="6">
-                  <div class="do">
-                     <svg t="1641957839736" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6014" width="64" height="64"><path d="M624.6 211.8c58.3 0 105.7 46.3 105.7 103.2s-47.4 103.2-105.7 103.2S518.9 371.9 518.9 315s47.4-103.2 105.7-103.2m0-50c-86 0-155.7 68.6-155.7 153.2s69.7 153.2 155.7 153.2S780.3 399.6 780.3 315s-69.7-153.2-155.7-153.2zM427 314.9c0-24.3 5.9-47.3 16.5-67.7-22.8-19.5-52.9-31.4-85.8-31.4-71.2 0-128.9 55.2-128.9 123.4s57.7 123.4 128.9 123.4c43.2 0 81.4-20.3 104.8-51.6-22.3-26.2-35.5-59.6-35.5-96.1zM297.5 727.2v16.9c0-103.5 72.5-191.8 173.7-226.2-29.2-13.3-62.1-20.9-96.9-20.9h-28.5c-118.6 0-215.6 87.2-215.6 194.7v-13.6c0 56.3-4.5 102.3 57.6 102.3H298c-0.9-16.2-0.5-34.2-0.5-53.2z" p-id="6015" fill="#8a8a8a"></path><path d="M639.4 561c27.9 0 55.1 5.2 80.6 15.4 24.5 9.8 46.6 23.9 65.5 41.7 38.3 36.2 59.4 83.9 59.4 134.5h0.2c0.1 5.1 0.3 10 0.4 14.9 0.4 13 0.8 25.2 0.3 34.9-0.3 4.5-0.7 7.7-1.1 9.8-1.9 0.3-4.8 0.5-8.7 0.5H418.4c-8.1 0-12.1-1.1-13.7-1.6-0.7-1.6-2.3-5.9-3.4-15.6-1.3-11.8-1.3-26.8-1.2-42.8h0.1c0-50.6 21.1-98.3 59.4-134.5 18.9-17.9 40.9-31.9 65.5-41.7 25.5-10.2 52.6-15.4 80.6-15.4h33.7m0-50.1h-33.8c-140.5 0-255.5 108.3-255.5 241.6v-16.9c0 69.8-5.3 127 68.2 127H836c73.6 0 58.9-57.1 58.9-127v16.9c0-133.4-115-241.6-255.5-241.6z" p-id="6016" fill="#8a8a8a"></path><path d="M785.1 706.4c0 10.2-8.4 18.5-18.7 18.5h-37.9v36.4c0 10.2-8.4 18.5-18.7 18.5h-9.4c-10.3 0-18.7-8.3-18.7-18.5v-36.4h-39.8c-10.3 0-18.7-8.3-18.7-18.5v-9.2c0-10.2 8.4-18.5 18.7-18.5h39.8v-40.2c0-10.2 8.4-18.5 18.7-18.5h9.4c10.3 0 18.7 8.3 18.7 18.5v40.2h37.9c10.3 0 18.7 8.3 18.7 18.5v9.2z" p-id="6017" fill="#8a8a8a"></path></svg>
-                     <p class="text">今日新增会员数</p>
-                     <p class="number">{{ homeData.todayUser }}</p>
-                  </div>
-                </el-col>
-                <el-col class="item" :span="6">
-                  <div class="do">
-                     <svg t="1641958094548" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9210" width="64" height="64"><path d="M888.34834 0.000284H127.658773A126.776854 126.776854 0 0 0 0.853475 126.777138v295.82214a126.776854 126.776854 0 0 0 126.805298 126.805298v169.045287a211.313719 211.313719 0 0 0 169.045287 207.075498v46.506653a42.268433 42.268433 0 0 0 84.508421 0V887.466705c0-23.324438-18.91555-42.268433-42.268433-42.268433a126.776854 126.776854 0 0 1-126.776854-126.776854v-169.045286h302.16525a241.3226 241.3226 0 0 0-42.268433 146.63107 42.268433 42.268433 0 1 0 84.536865 0c-1.706666-146.63107 120.433744-146.63107 120.433745-146.63107a42.268433 42.268433 0 0 0 42.268433-42.268433 54.527985 54.527985 0 0 0 0-8.021331 44.799988 44.799988 0 0 0 0-8.021331v-142.421294a48.611542 48.611542 0 0 1 42.268432-52.849763 48.611542 48.611542 0 0 1 42.268433 52.849763v369.777675a126.776854 126.776854 0 0 1-126.805298 126.776854c-23.324438 0-42.239988 18.91555-42.239988 42.268433v84.536865a42.268433 42.268433 0 0 0 84.508421 0v-46.506654a211.313719 211.313719 0 0 0 169.045286-207.075498v-169.045286a126.776854 126.776854 0 0 0 126.805298-126.776854v-295.82214A126.776854 126.776854 0 0 0 888.319895 0.000284z m42.268433 422.627439c0 23.324438-18.91555 42.239988-42.268433 42.239988v-116.195523a132.693296 132.693296 0 0 0-126.776854-137.386629 122.993744 122.993744 0 0 0-105.642637 62.151094 150.015958 150.015958 0 1 0-21.134216 76.060423v115.370635H127.630329c-23.324438 0-42.239988-18.91555-42.239988-42.239988v-295.82214c0-23.352882 18.91555-42.268433 42.268432-42.268433H888.319895c23.324438 0 42.268433 18.91555 42.268433 42.239988v295.82214z m-359.224789-147.91107a63.402649 63.402649 0 1 1-126.776854 0 63.402649 63.402649 0 0 1 126.776854 0z" p-id="9211" fill="#8a8a8a"></path></svg>
-                     <p class="text">今日活跃会员数</p>
-                     <p class="number">{{ homeData.todayActiveUser }}</p>
-                  </div>
-                </el-col>
-              </el-row>
-              <el-row class="line">
-                <el-col class="item second-line" :span="6">
-                  <div class="do">
-                    <svg t="1641957661068" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5770" width="64" height="64"><path d="M261.7 522.6h0.2c19.3 0 35-15.7 35-35s-15.7-35-35-35c-31.9 0-58.8-37.7-58.8-82.4s26.9-82.4 58.8-82.4c19.3 0 35-15.7 35-35s-15.7-35-35-35c-35.4 0-69.5 17.3-93.7 47.5-22.6 28.4-35.1 65.6-35.1 104.9s12.5 76.5 35.1 104.9c0.6 0.8 1.3 1.6 2 2.4-22.9 13.2-43.4 31-61.1 53.2-38.3 48-59.5 111.4-59.5 178.4 0 19.3 15.7 35 35 35s35-15.7 35-35c0-51.2 15.7-99.1 44.1-134.7 26.6-33.3 61.3-51.7 97.7-51.7 0.2 0 0.3-0.1 0.3-0.1zM914.8 530.7c-17.7-22.2-38.2-40-61.1-53.2 0.7-0.8 1.3-1.6 2-2.4 22.6-28.4 35.1-65.6 35.1-104.9s-12.5-76.5-35.1-104.9c-24.1-30.2-58.3-47.5-93.7-47.5-19.3 0-35 15.7-35 35s15.7 35 35 35c31.9 0 58.8 37.7 58.8 82.4s-26.9 82.4-58.8 82.4c-19.3 0-35 15.7-35 35s15.7 35 35 35H762.3c36.4 0 71.1 18.4 97.7 51.7 28.5 35.6 44.1 83.5 44.1 134.7 0 19.3 15.7 35 35 35s35-15.7 35-35c0.2-67-21-130.3-59.3-178.3z" p-id="5771" fill="#8a8a8a"></path><path d="M747.4 541c-30.9-30.8-66.9-54.7-106.1-70.8 40.3-34.7 65.8-86 65.8-143.2 0-104.2-84.8-188.9-188.9-188.9-104.2 0-188.9 84.8-188.9 188.9 0 57 25.4 108.2 65.4 142.9C355.2 486 318.9 510 287.8 541c-61.2 61.1-95.1 142.4-95.5 228.9V850.8c0 19.3 15.7 35 35 35h580.5c19.3 0 35-15.7 35-35v-80.2-0.8c-0.3-86.4-34.2-167.6-95.4-228.8zM518.2 208.1c65.6 0 118.9 53.4 118.9 118.9s-53.4 118.9-118.9 118.9S399.3 392.6 399.3 327s53.4-118.9 118.9-118.9z m254.7 607.8H262.3v-44.6-0.6c0.2-140.5 114.8-254.8 255.3-254.8s255 114.3 255.3 254.8v45.2z" p-id="5772" fill="#8a8a8a"></path></svg>
-                    <p class="text">总会员数</p>
-                    <p class="number">{{ homeData.totalUser }}</p>
-                  </div>
-                </el-col>
-                <el-col class="item second-line" :span="6">
-                  <div class="do">
-                    <svg t="1641969647517" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3586" width="64" height="64"><path d="M128 544h128v288H128zM320 480h128v352H320zM512 320h128v512H512zM704 416h128v416H704z" p-id="3587" fill="#8a8a8a"></path><path d="M576 128L352 352h448L576 128z" p-id="3588" fill="#8a8a8a"></path></svg>
-                    <p class="text">总交易金额（元）</p>
-                    <p class="number">{{ homeData.totalPay ? homeData.totalPay : '0.00'}}</p>
-                  </div>
-                </el-col>
-                <el-col class="item second-line" :span="6">
-                  <div class="do">
-                    <svg t="1641957411945" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4780" width="64" height="64"><path d="M725.504 768C725.290667 768 725.333333 170.709333 725.333333 170.709333L640 170.666667V128h85.376C748.928 128 768 146.986667 768 170.709333v597.248A42.666667 42.666667 0 0 1 725.504 810.666667H170.496C147.029333 810.666667 128 791.68 128 767.957333V170.709333C128 147.114667 147.157333 128 170.624 128H256v42.666667H170.624L170.666667 767.957333 725.504 768z m124.949333-469.333333H810.666667v-42.666667h42.666666c23.573333 0 42.666667 18.986667 42.666667 42.709333v597.248A42.666667 42.666667 0 0 1 853.504 938.666667H298.496A42.453333 42.453333 0 0 1 256 896v-42.666667h42.666667v42.666667l554.666666-0.042667 0.021334-228.416c-0.042667-168.597333-0.021333-368.853333-0.021334-368.853333L850.453333 298.666667zM298.666667 341.333333h298.666666v42.666667H298.666667v-42.666667z m0 128h213.333333v42.666667H298.666667v-42.666667z m0-341.376C298.666667 104.405333 317.802667 85.333333 341.461333 85.333333h213.077334C578.176 85.333333 597.333333 104.490667 597.333333 127.957333v42.752A42.688 42.688 0 0 1 554.538667 213.333333h-213.077334A42.752 42.752 0 0 1 298.666667 170.709333V127.957333z m42.666666 42.752L554.538667 170.666667 554.666667 127.957333 341.461333 128 341.333333 170.709333z" fill="#8a8a8a" p-id="4781"></path></svg>
-                    <p class="text">总订单数</p>
-                    <p class="number">{{ homeData.totalOrder }}</p>
-                  </div>
-                </el-col>
-                <el-col class="item second-line" :span="6">
-                  <div class="do">
-                    <svg t="1641958462543" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13815" width="64" height="64"><path d="M983.696 422.704A480 480 0 1 0 40.72 602.72a469.456 469.456 0 0 0 69.44 172.688 36.4 36.4 0 1 0 60.672-40.24 408.16 408.16 0 0 1 3.664-452.224 400.832 400.832 0 0 1 260.24-171.2 407.136 407.136 0 1 1-112.576 760.288 36.8 36.8 0 0 0-34.352 65.12 477.024 477.024 0 0 0 223.68 54.88 467.984 467.984 0 0 0 89.92-8.784A481.424 481.424 0 0 0 983.712 422.72z" p-id="13816" fill="#8a8a8a"></path><path d="M471.712 579.84h-130.768a36.944 36.944 0 0 0 0 73.888h130.768v116.8a36.944 36.944 0 1 0 73.888 0v-116.8h130.768a36.944 36.944 0 1 0 0-73.888H545.6v-71.664a22.784 22.784 0 0 0-0.736-7.392h131.504a36.944 36.944 0 1 0 0-73.888H341.68a36.944 36.944 0 1 0 0 73.888h131.504a25.152 25.152 0 0 0-0.736 7.392v71.664z" p-id="13817" fill="#8a8a8a"></path><path d="M405.968 383.312a37.104 37.104 0 0 0 52.464-52.464l-79.792-79.792a37.104 37.104 0 1 0-52.464 52.464z" p-id="13818" fill="#8a8a8a"></path><path d="M602.48 383.312l79.792-79.792a37.088 37.088 0 1 0-52.448-52.464l-79.792 79.792a36.576 36.576 0 0 0 0 52.464 37.936 37.936 0 0 0 52.448 0z" p-id="13819" fill="#8a8a8a"></path></svg>
-                    <p class="text">总支付人数</p>
-                    <p class="number">{{ homeData.totalPayUser }}</p>
-                  </div>
-                </el-col>
-              </el-row>
-          </div>
-      </div>
-      <div class="overview">
-          <div class="title">常用功能</div>
-          <div class="content">
-            <el-row class="line home-tools">
-                <el-col class="item no-border" :span="8"><div class="do" @click="toCashier('/cashier/index')"><img class="t-icon" src="@/assets/images/home/pay.png"><div class="text">收银下单</div></div></el-col>
-                <el-col class="item no-border" :span="8"><div class="do" @click="toTarget('/coupon/confirm/index')"><img class="t-icon" src="@/assets/images/home/coupon.png"><div class="text">核销卡券</div></div></el-col>
-                <el-col class="item no-border" :span="8"><div class="do" @click="toTarget('/member/index')"><img class="t-icon" src="@/assets/images/home/member.png"><div class="text">会员管理</div></div></el-col>
-            </el-row>
-            <el-row class="line home-tools">
-                <el-col class="item no-border" :span="8"><div class="do" @click="toTarget('/order/index')"><img class="t-icon" src="@/assets/images/home/order.png"><div class="text">订单管理</div></div></el-col>
-                <el-col class="item no-border" :span="8"><div class="do" @click="toTarget('/coupon/coupon/index')"><img class="t-icon" src="@/assets/images/home/card.png"><div class="text">卡券管理</div></div></el-col>
-                <el-col class="item no-border" :span="8"><div class="do" @click="toTarget('/goods/goods/index')"><img class="t-icon" src="@/assets/images/home/goods.png"><div class="text">商品管理</div></div></el-col>
-            </el-row>
-          </div>
-      </div>
-      <div class="overview">
-        <div class="title">报表统计</div>
-        <div class="content">
-          <el-row>
-            <el-col class="item" :span="12">
-               <commonChart v-if="chartData1.length > 0" :title="chart1.title" :color="chart1.color" :chart-type="chart1.chartType" :head-list="chart1.header" :data-list="chartData1" width="100%" id="chart1" height="400px"/>
-            </el-col>
-            <el-col class="item" :span="12">
-               <commonChart v-if="chartData2.length > 0" :title="chart2.title" :color="chart2.color" :chart-type="chart2.chartType" :head-list="chart2.header" :data-list="chartData2" width="100%" id="chart2" height="400px"/>
-            </el-col>
-          </el-row>
-        </div>
-      </div>
-    <div class="overview">
-    <commonChartwo></commonChartwo>
-    </div>
+    <topindex></topindex>
+    <centenrindex></centenrindex>
+    <bottomindex></bottomindex>
   </div>
 </template>
 
 <script>
 import { getHomeData, getStatisticData } from "@/api/home";
-import commonChart from './components/charts/index'
-import commonChartwo from './components/charts/chartstwo'
+import topindex from "@/views/indexcomponents/topindex.vue";
+import centenrindex from "@/views/indexcomponents/centenrindex.vue";
+import bottomindex from "@/views/indexcomponents/bottomindex.vue";
 export default {
   name: "HomePage",
   components: {
-    commonChart,
-    commonChartwo
+    centenrindex,
+    topindex,
+    bottomindex
+
   },
   data() {
     return {
@@ -171,6 +81,55 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.app-container{
+  height: 100%;
+}
+.top-box{
+  width: 100%;
+  display: flex;
+  align-items: center;
+}
+.top-sl{
+  width: 16%;
+  background: #FFFFFF;
+  border-radius: 8px;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  padding: 15px;
+
+}
+.box-title{
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(0,0,0,0.6);
+}
+.box-size{
+  font-size: 28px;
+  font-weight: 400;
+  color: rgba(0,0,0,0.9);
+  margin-top: 5px;
+  margin-bottom: 15px;
+}
+.box-but{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: rgba(0,0,0,0.6);
+  font-size: 14px;
+}
+.icon-lv{
+  width: 71px;
+  height: 24px;
+  background: #E3F9E9;
+  border-radius: 3px 3px 3px 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #2BA471;
+}
+
    .overview {
        min-height: 270px;
        background: #FFFFFF;
@@ -253,3 +212,4 @@ export default {
    }
 </style>
 
+
diff --git a/fuintAdmin/src/views/indexcomponents/bottomindex.vue b/fuintAdmin/src/views/indexcomponents/bottomindex.vue
new file mode 100644
index 000000000..142f45cb8
--- /dev/null
+++ b/fuintAdmin/src/views/indexcomponents/bottomindex.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="center" >
+    <div class="left-box">
+      <div class="but-box">
+        <div class="hui"><span class="title-hei">各油品销售额</span>   </div>
+
+        <div >
+          <el-radio-group v-model="radio"  size="mini">
+            <el-radio-button label="周"></el-radio-button>
+            <el-radio-button label="月"></el-radio-button>
+            <el-radio-button label="年"></el-radio-button>
+
+          </el-radio-group>
+        </div>
+      </div>
+      <div><span>15天交易金额总计：</span><span class="title-lan">79701</span> <span>元</span></div>
+      <div id="charts" style="width: 100%; height: 400px;"></div>
+    </div>
+    <div class="left-box">
+      <div class="but-box">
+        <div class="hui"><span class="title-hei">油站油品交易笔数</span>  </div>
+        <div >
+          <el-radio-group v-model="radio"  size="mini">
+            <el-radio-button label="周"></el-radio-button>
+            <el-radio-button label="月"></el-radio-button>
+            <el-radio-button label="年"></el-radio-button>
+
+          </el-radio-group>
+        </div>
+      </div>
+      <div><span>15天交易金额总计：</span><span class="title-lan">79701</span> <span>元</span></div>
+      <div id="chartx" style="width: 100%; height: 400px;"></div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import echarts from "echarts";
+
+export default {
+  name: "bottomindex",
+  data(){
+    return{
+      radio:'周'
+    }
+  },
+  mounted() {
+    this.initChart()
+    this.initChartwo()
+  },
+  methods:{
+    initChart() {
+      const chart = echarts.init(document.getElementById('charts'))
+
+      const option = {
+        color: [
+          '#77A8F9',
+          '#86E1BB',
+          '#8195F5',
+        ],
+        xAxis: {
+          type: 'category',
+          data: ['2023.1.1', '2023.2.1', '2023.3.1', '2023.4.1', '2023.5.1', '2023.6.1', '2023.7.1']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [250, 230, 224, 218, 135, 147, 260],
+            type: 'line'
+          },
+          {
+            data: [210, 230, 264, 318, 235, 247, 360],
+
+
+            type: 'line'
+          },
+          {
+            data: [120, 220, 214, 118, 235, 227, 110],
+            type: 'line'
+          }
+        ]
+      };
+
+      chart.setOption(option)
+    },
+    initChartwo() {
+      const chart = echarts.init(document.getElementById('chartx'))
+
+      const option = {
+        color: [
+          '#77A8F9',
+          '#86E1BB',
+          '#8195F5',
+        ],
+        xAxis: {
+          type: 'category',
+          data: ['2023.1.1', '2023.2.1', '2023.3.1', '2023.4.1', '2023.5.1', '2023.6.1', '2023.7.1']
+        },
+        yAxis: {
+          type: 'value'
+        },
+        series: [
+          {
+            data: [250, 230, 224, 218, 135, 147, 140],
+            type: 'line'
+          },
+          {
+            data: [210, 230, 264, 318, 235, 247, 160],
+
+
+            type: 'line'
+          },
+          {
+            data: [120, 220, 214, 118, 235, 227, 110],
+            type: 'line'
+          }
+        ]
+      };
+
+      chart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.center{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px auto;
+}
+.left-box{
+  width: 49%;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  padding: 15px;
+  border-radius: 8px;
+}
+.right-box{
+  width: 28%;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  padding: 15px;
+  border-radius: 8px;
+  height: 455px;
+  overflow: hidden;
+}
+.but-box{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.hui{
+  font-size: 14px;
+  font-weight: 400;
+  color: #999999;
+}
+.title-hei{
+  font-size: 18px;
+  font-weight: bold;
+  color: #1a1a1a;
+}
+.title-lan{
+  font-size: 16px;
+  font-weight: bold;
+  color: #4F6EE3;
+}
+
+</style>
diff --git a/fuintAdmin/src/views/indexcomponents/centenrindex.vue b/fuintAdmin/src/views/indexcomponents/centenrindex.vue
new file mode 100644
index 000000000..ad57e86b8
--- /dev/null
+++ b/fuintAdmin/src/views/indexcomponents/centenrindex.vue
@@ -0,0 +1,193 @@
+<template>
+  <div class="center" >
+    <div class="left-box">
+      <div class="but-box">
+        <div class="hui"><span class="title-hei">各油品销售额</span> <span>15天交易金额总计：</span><span class="title-lan">79701</span> <span>元</span>  </div>
+        <div >
+          <el-radio-group v-model="radio"  size="mini">
+            <el-radio-button label="周"></el-radio-button>
+            <el-radio-button label="月"></el-radio-button>
+            <el-radio-button label="年"></el-radio-button>
+
+          </el-radio-group>
+        </div>
+      </div>
+      <div id="chart" style="width: 100%; height: 400px;"></div>
+    </div>
+    <div class="right-box">
+        <div class="title-hei">员工销售排行</div>
+      <div class="four-box">
+        <div class="pm">排名</div>
+        <div class="mc">员工名称</div>
+        <div class="xs">销售笔数</div>
+        <div class="xse">销售额(万)</div>
+      </div>
+      <div class="four-boxx" v-for="(item,index) in 10" key="index">
+        <div class="pm">{{index+1}}</div>
+        <div class="dis">
+          <div class="touxiang">
+            <img src="../../../src/assets/images/avatar.png" class="touxiang">
+          </div>
+          <div class="name">名字</div>
+        </div>
+        <div class="xs">9999</div>
+        <div class="xse">18975</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import echarts from "echarts";
+
+export default {
+  name: "centenrindex",
+  data(){
+    return{
+      radio:'周'
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods:{
+    initChart() {
+      const chart = echarts.init(document.getElementById('chart'))
+
+      const option = {
+        color: [
+          '#77A8F9',
+          '#86E1BB',
+          '#8195F5',
+          '#d48265',
+          '#91c7ae',
+          '#749f83',
+          '#ca8622',
+          '#bda29a',
+          '#6e7074',
+          '#546570',
+          '#c4ccd3'
+        ],
+        legend: {},
+        tooltip: {},
+        dataset: {
+          source: [
+            ['product', '#92', '#95', '#98'],
+            ['2023.1.1', 50, 85.8, 93.7],
+            ['2023.2.1', 83.1, 73.4, 55.1],
+            ['2023.3.1', 86.4, 65.2, 82.5],
+            ['2023.4.1', 72.4, 53.9, 39.1],
+            ['2023.5.1', 72.4, 53.9, 39.1],
+            ['2023.6.1', 72.4, 53.9, 39.1]
+          ]
+        },
+        xAxis: { type: 'category' },
+        yAxis: {},
+        // Declare several bar series, each will be mapped
+        // to a column of dataset.source by default.
+        series: [{ type: 'bar',  barCategoryGap: '40%' }, { type: 'bar',  barCategoryGap: '40%' }, { type: 'bar',  barCategoryGap: '40%' }]
+      };
+
+      chart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.center{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 10px auto;
+}
+.left-box{
+  width: 70%;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  padding: 15px;
+  border-radius: 8px;
+}
+.right-box{
+  width: 28%;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  padding: 15px;
+  border-radius: 8px;
+  height: 455px;
+  overflow: hidden;
+}
+.but-box{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.hui{
+  font-size: 14px;
+  font-weight: 400;
+  color: #999999;
+}
+.title-hei{
+  font-size: 18px;
+  font-weight: bold;
+  color: #1a1a1a;
+}
+.title-lan{
+  font-size: 16px;
+  font-weight: bold;
+  color: #4F6EE3;
+}
+.four-box{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 16px;
+  font-weight: 400;
+  color: #999999;
+}
+.four-boxx{
+  margin: 10px auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 16px;
+  font-weight: 400;
+  color: #333333;
+}
+.touxiang{
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: #00acac;
+  margin-right: 5px;
+  overflow: hidden;
+}
+.dis{
+  width: 30%;
+  display: flex;
+  align-items: center;
+
+}
+.pm{
+  width: 10%;
+  text-align: center;
+}
+.mc{
+  width: 30%;
+  text-align: left;
+}
+.xs{
+  width: 30%;
+  text-align: left;
+}
+.xs{
+  width: 30%;
+  text-align: center;
+}
+.xse{
+  width: 30%;
+  text-align: right;
+}
+</style>
diff --git a/fuintAdmin/src/views/indexcomponents/indexcomponents.vue b/fuintAdmin/src/views/indexcomponents/indexcomponents.vue
new file mode 100644
index 000000000..a5e13a2f3
--- /dev/null
+++ b/fuintAdmin/src/views/indexcomponents/indexcomponents.vue
@@ -0,0 +1,66 @@
+<template>
+<div class="center" >
+  <div class="left-box">
+    <div id="chart" style="width: 600px; height: 400px;"></div>
+  </div>
+  <div class="right-box"></div>
+</div>
+</template>
+
+<script>
+import echarts from "echarts";
+
+export default {
+  name: "indexcomponents",
+  data(){
+    return{
+
+    }
+  },
+  mounted() {
+    this.initChart()
+  },
+  methods:{
+    initChart() {
+      const chart = echarts.init(document.getElementById('chart'))
+
+      const option = {
+        legend: {},
+        tooltip: {},
+        dataset: {
+          source: [
+            ['product', '2015', '2016', '2017'],
+            ['Matcha Latte', 50, 85.8, 93.7],
+            ['Milk Tea', 83.1, 73.4, 55.1],
+            ['Cheese Cocoa', 86.4, 65.2, 82.5],
+            ['Walnut Brownie', 72.4, 53.9, 39.1],
+            ['Walnut Broswnie', 72.4, 53.9, 39.1]
+          ]
+        },
+        xAxis: { type: 'category' },
+        yAxis: {},
+        // Declare several bar series, each will be mapped
+        // to a column of dataset.source by default.
+        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
+      };
+
+      chart.setOption(option)
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .center{
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .left-box{
+    width: 75%;
+  }
+  .right-box{
+    width: 20%;
+  }
+</style>
diff --git a/fuintAdmin/src/views/indexcomponents/topindex.vue b/fuintAdmin/src/views/indexcomponents/topindex.vue
new file mode 100644
index 000000000..735ca4fbb
--- /dev/null
+++ b/fuintAdmin/src/views/indexcomponents/topindex.vue
@@ -0,0 +1,226 @@
+<template>
+<div>
+  <div class="top-box">
+    <div class="top-sl" >
+      <div class="box-title">
+        <span style="margin-right: 5px">本日流水总额</span>
+        <el-popover
+          placement="top-start"
+          title="标题"
+          width="200"
+          trigger="hover"
+          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+
+          <i class="el-icon-warning-outline"  slot="reference" ></i>
+        </el-popover>
+      </div>
+      <div class="box-size">
+        4023
+      </div>
+      <div class="box-but">
+        <div class="icon-lv">
+          <i class="el-icon-bottom"></i>
+          <span>20.5%</span>
+        </div>
+        <div>环比</div>
+        <div> <i class="el-icon-arrow-right"></i> </div>
+      </div>
+    </div>
+
+    <div class="top-sl" >
+      <div class="box-title">
+        <span style="margin-right: 5px">本日流水总额</span>
+        <el-popover
+          placement="top-start"
+          title="标题"
+          width="200"
+          trigger="hover"
+          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+
+          <i class="el-icon-warning-outline"  slot="reference" ></i>
+        </el-popover>
+      </div>
+      <div class="box-size">
+        4023
+      </div>
+      <div class="box-but">
+        <div class="icon-lv">
+          <i class="el-icon-bottom"></i>
+          <span>20.5%</span>
+        </div>
+        <div>环比</div>
+        <div> <i class="el-icon-arrow-right"></i> </div>
+      </div>
+    </div>
+
+    <div class="top-sl" >
+      <div class="box-title">
+        <span style="margin-right: 5px">本日流水总额</span>
+        <el-popover
+          placement="top-start"
+          title="标题"
+          width="200"
+          trigger="hover"
+          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+
+          <i class="el-icon-warning-outline"  slot="reference" ></i>
+        </el-popover>
+      </div>
+      <div class="box-size">
+        4023
+      </div>
+      <div class="box-but">
+        <div class="icon-lv">
+          <i class="el-icon-bottom"></i>
+          <span>20.5%</span>
+        </div>
+        <div>环比</div>
+        <div> <i class="el-icon-arrow-right"></i> </div>
+      </div>
+    </div>
+
+    <div class="top-sl" >
+      <div class="box-title">
+        <span style="margin-right: 5px">本日流水总额</span>
+        <el-popover
+          placement="top-start"
+          title="标题"
+          width="200"
+          trigger="hover"
+          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+
+          <i class="el-icon-warning-outline"  slot="reference" ></i>
+        </el-popover>
+      </div>
+      <div class="box-size">
+        4023
+      </div>
+      <div class="box-but">
+        <div class="icon-lv">
+          <i class="el-icon-bottom"></i>
+          <span>20.5%</span>
+        </div>
+        <div>环比</div>
+        <div> <i class="el-icon-arrow-right"></i> </div>
+      </div>
+    </div>
+
+    <div class="top-sl" >
+      <div class="box-title">
+        <span style="margin-right: 5px">本日流水总额</span>
+        <el-popover
+          placement="top-start"
+          title="标题"
+          width="200"
+          trigger="hover"
+          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+
+          <i class="el-icon-warning-outline"  slot="reference" ></i>
+        </el-popover>
+      </div>
+      <div class="box-size">
+        4023
+      </div>
+      <div class="box-but">
+        <div class="icon-lv">
+          <i class="el-icon-bottom"></i>
+          <span>20.5%</span>
+        </div>
+        <div>环比</div>
+        <div> <i class="el-icon-arrow-right"></i> </div>
+      </div>
+    </div>
+
+    <div class="top-sl" >
+      <div class="box-title">
+        <span style="margin-right: 5px">本日流水总额</span>
+        <el-popover
+          placement="top-start"
+          title="标题"
+          width="200"
+          trigger="hover"
+          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
+
+          <i class="el-icon-warning-outline"  slot="reference" ></i>
+        </el-popover>
+      </div>
+      <div class="box-size">
+        4023
+      </div>
+      <div class="box-but">
+        <div class="icon-lv">
+          <i class="el-icon-bottom"></i>
+          <span>20.5%</span>
+        </div>
+        <div>环比</div>
+        <div> <i class="el-icon-arrow-right"></i> </div>
+      </div>
+    </div>
+
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  name: "topindex",
+  data(){
+    return{
+
+    }
+  },
+  methods:{
+
+  }
+
+}
+</script>
+
+<style scoped>
+.top-box{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.top-sl{
+  width: 16%;
+  background: #FFFFFF;
+  border-radius: 8px;
+  background: #FFFFFF;
+  box-sizing: border-box;
+  padding: 15px;
+
+}
+.box-title{
+  font-size: 14px;
+  font-weight: 400;
+  color: rgba(0,0,0,0.6);
+}
+.box-size{
+  font-size: 28px;
+  font-weight: 400;
+  color: rgba(0,0,0,0.9);
+  margin-top: 5px;
+  margin-bottom: 15px;
+}
+.box-but{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: rgba(0,0,0,0.6);
+  font-size: 14px;
+}
+.icon-lv{
+  width: 71px;
+  height: 24px;
+  background: #E3F9E9;
+  border-radius: 3px 3px 3px 3px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #2BA471;
+}
+</style>