update

src/styles/index.scss

@@ -190,9 +190,13 @@ div:focus {
 .bz-card {
   box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
   border-color: rgba(0, 0, 0, .05);
-  padding: 20px;
+  //padding: 20px;
   min-height: 210px;
 
+  .el-card {
+    border: none !important;
+  }
+
   .header {
     border-bottom: 2px solid #E9E9E9;
     padding: 10px;

src/views/bz/consume/index.vue

@@ -1,11 +1,94 @@
 <template>
-  <div class="app-container">文旅消费</div>
+  <div class="app-container">
+    <el-row :gutter="40" class="panel-group">
+      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+        <div class="card-panel" @click="gotoPage(`/api/docs`)">
+          <div class="card-panel-icon-wrapper icon-people">
+            <el-image src="/images/016537@2x.png" class="card-panel-icon" style="height: 60px"/>
+          </div>
+          <div class="card-panel-description">
+            <div class="card-panel-text">
+              月消费总额（元）
+            </div>
+            <count-to :start-val="0" :end-val="78956" :duration="2600" class="card-panel-num"/>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+        <div class="card-panel" @click="gotoPage(`/appKey/index`)">
+          <div class="card-panel-icon-wrapper icon-message">
+            <el-image src="/images/016535@2x.png" class="card-panel-icon" style="height: 60px"/>
+          </div>
+          <div class="card-panel-description">
+            <div class="card-panel-text">
+              月消费次数
+            </div>
+            <count-to :start-val="0" :end-val="15462" :duration="2600" class="card-panel-num"/>
+          </div>
+        </div>
+      </el-col>
+      <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
+        <div class="card-panel" @click="gotoPage(`/place/baseInfo`)">
+          <div class="card-panel-icon-wrapper icon-message">
+            <el-image src="/images/016536@2x.png" class="card-panel-icon" style="height: 60px"/>
+          </div>
+          <div class="card-panel-description">
+            <div class="card-panel-text">
+              人均消费（元）
+            </div>
+            <count-to :start-val="0" :end-val="2036" :duration="2600" class="card-panel-num"/>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
+    <el-row :gutter="40">
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="bz-card">
+          <el-card shadow="never">
+            <div slot="header" class="clearfix">
+              <span>消费监测</span>
+            </div>
+          </el-card>
+        </div>
+      </el-col>
+
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="bz-card">
+          <el-card shadow="never">
+            <div slot="header" class="clearfix">
+              <span>舆情监测</span>
+            </div>
+          </el-card>
+        </div>
+      </el-col>
+
+      <el-col :xs="24" :sm="24" :lg="8">
+        <div class="bz-card">
+          <el-card shadow="never">
+            <div slot="header" class="clearfix">
+              <span>应急指挥调度</span>
+            </div>
+          </el-card>
+        </div>
+      </el-col>
+    </el-row>
+    <div style="height: 32px"></div>
+    <div class="bz-card">
+      <el-card shadow="never">
+        <div slot="header" class="clearfix">
+          <span>消费监测</span>
+        </div>
+      </el-card>
+    </div>
+  </div>
 </template>
 
 <script>
+import CountTo from 'vue-count-to'
 
 export default {
-  components: {},
+  components: { CountTo },
   data() {
     return {}
   },

src/views/bz/monitor/index.vue

@@ -56,19 +56,23 @@
     </el-row>
     <el-row :gutter="40">
       <el-col :xs="24" :sm="24" :lg="18">
-        <div style="box-shadow: 4px 4px 40px rgba(0, 0, 0, .05); border-color: rgba(0, 0, 0, .05); padding: 20px;height: 280px">
-          <el-tabs v-model="activeName">
-            <el-tab-pane label="游客来源地" name="first"></el-tab-pane>
-            <el-tab-pane label="客流趋势" name="second"></el-tab-pane>
-            <el-tab-pane label="车流趋势" name="third"></el-tab-pane>
-          </el-tabs>
+        <div class="bz-card">
+          <el-card shadow="never">
+            <el-tabs v-model="activeName">
+              <el-tab-pane label="游客来源地" name="first"></el-tab-pane>
+              <el-tab-pane label="客流趋势" name="second"></el-tab-pane>
+              <el-tab-pane label="车流趋势" name="third"></el-tab-pane>
+            </el-tabs>
+          </el-card>
         </div>
       </el-col>
       <el-col :xs="24" :sm="24" :lg="6">
         <div class="bz-card">
-          <div class="header">
-            交通监测
-          </div>
+          <el-card shadow="never">
+            <div slot="header" class="clearfix">
+              <span>交通监测</span>
+            </div>
+          </el-card>
         </div>
       </el-col>
     </el-row>
@@ -76,158 +80,165 @@
     <el-row :gutter="40">
       <el-col :xs="24" :sm="24" :lg="8">
         <div class="bz-card">
-          <div class="header">
-            消费监测
-          </div>
-          <el-row>
-            <el-col span="12">
-              <el-row>
-                <el-col span="10">
-                  <el-image src="/images/16531@2x.png" class="image"/>
-                </el-col>
-                <el-col span="14">
-                  <p>￥25863.50</p>
-                  <p>景区消费</p>
-                </el-col>
-              </el-row>
-            </el-col>
-            <el-col span="12">
-              <el-row>
-                <el-col span="10">
-                  <el-image src="/images/16536@2x.png" class="image"/>
-                </el-col>
-                <el-col span="14">
-                  <p>￥25863.50</p>
-                  <p>文化场馆</p>
-                </el-col>
-              </el-row>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col span="12">
-              <el-row>
-                <el-col span="10">
-                  <el-image src="/images/16537@2x.png" class="image"/>
-                </el-col>
-                <el-col span="14">
-                  <p>￥25863.50</p>
-                  <p>餐馆消费</p>
-                </el-col>
-              </el-row>
-            </el-col>
-            <el-col span="12">
-              <el-row>
-                <el-col span="10">
-                  <el-image src="/images/16538@2x.png" class="image"/>
-                </el-col>
-                <el-col span="14">
-                  <p>￥25863.50</p>
-                  <p>体育场馆消费</p>
-                </el-col>
-              </el-row>
-            </el-col>
-          </el-row>
+          <el-card shadow="never">
+            <div slot="header" class="clearfix">
+              <span>消费监测</span>
+            </div>
+            <el-row>
+              <el-col span="12">
+                <el-row>
+                  <el-col span="10">
+                    <el-image src="/images/16531@2x.png" class="image"/>
+                  </el-col>
+                  <el-col span="14">
+                    <p>￥25863.50</p>
+                    <p>景区消费</p>
+                  </el-col>
+                </el-row>
+              </el-col>
+              <el-col span="12">
+                <el-row>
+                  <el-col span="10">
+                    <el-image src="/images/16536@2x.png" class="image"/>
+                  </el-col>
+                  <el-col span="14">
+                    <p>￥25863.50</p>
+                    <p>文化场馆</p>
+                  </el-col>
+                </el-row>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col span="12">
+                <el-row>
+                  <el-col span="10">
+                    <el-image src="/images/16537@2x.png" class="image"/>
+                  </el-col>
+                  <el-col span="14">
+                    <p>￥25863.50</p>
+                    <p>餐馆消费</p>
+                  </el-col>
+                </el-row>
+              </el-col>
+              <el-col span="12">
+                <el-row>
+                  <el-col span="10">
+                    <el-image src="/images/16538@2x.png" class="image"/>
+                  </el-col>
+                  <el-col span="14">
+                    <p>￥25863.50</p>
+                    <p>体育场馆消费</p>
+                  </el-col>
+                </el-row>
+              </el-col>
+            </el-row>
+          </el-card>
         </div>
       </el-col>
 
       <el-col :xs="24" :sm="24" :lg="8">
         <div class="bz-card">
-          <div class="header">
-            舆情监测
-          </div>
-          <el-row>
-            <el-col span="12">
-              <el-row>
-                <el-col span="10">
-                  <el-image src="/images/16541@2x.png" class="image"/>
-                </el-col>
-                <el-col span="14">
-                  <p>24685</p>
-                  <p>好评</p>
-                </el-col>
-              </el-row>
-            </el-col>
-            <el-col span="12">
-              <el-row>
-                <el-col span="10">
-                  <el-image src="/images/16542@2x.png" class="image"/>
-                </el-col>
-                <el-col span="14">
-                  <p>23</p>
-                  <p>差评</p>
-                </el-col>
-              </el-row>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col span="12">
-              <el-row>
-                <el-col span="10">
-                  <el-image src="/images/16540@2x.png" class="image"/>
-                </el-col>
-                <el-col span="14">
-                  <p>12</p>
-                  <p>五星餐厅</p>
-                </el-col>
-              </el-row>
-            </el-col>
-            <el-col span="12">
-              <el-row>
-                <el-col span="10">
-                  <el-image src="/images/16539@2x.png" class="image"/>
-                </el-col>
-                <el-col span="14">
-                  <p>256</p>
-                  <p>四星餐厅</p>
-                </el-col>
-              </el-row>
-            </el-col>
-          </el-row>
+          <el-card shadow="never">
+            <div slot="header" class="clearfix">
+              <span>舆情监测</span>
+            </div>
+            <el-row>
+              <el-col span="12">
+                <el-row>
+                  <el-col span="10">
+                    <el-image src="/images/16541@2x.png" class="image"/>
+                  </el-col>
+                  <el-col span="14">
+                    <p>24685</p>
+                    <p>好评</p>
+                  </el-col>
+                </el-row>
+              </el-col>
+              <el-col span="12">
+                <el-row>
+                  <el-col span="10">
+                    <el-image src="/images/16542@2x.png" class="image"/>
+                  </el-col>
+                  <el-col span="14">
+                    <p>23</p>
+                    <p>差评</p>
+                  </el-col>
+                </el-row>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col span="12">
+                <el-row>
+                  <el-col span="10">
+                    <el-image src="/images/16540@2x.png" class="image"/>
+                  </el-col>
+                  <el-col span="14">
+                    <p>12</p>
+                    <p>五星餐厅</p>
+                  </el-col>
+                </el-row>
+              </el-col>
+              <el-col span="12">
+                <el-row>
+                  <el-col span="10">
+                    <el-image src="/images/16539@2x.png" class="image"/>
+                  </el-col>
+                  <el-col span="14">
+                    <p>256</p>
+                    <p>四星餐厅</p>
+                  </el-col>
+                </el-row>
+              </el-col>
+            </el-row>
+          </el-card>
         </div>
       </el-col>
 
       <el-col :xs="24" :sm="24" :lg="8">
+
         <div class="bz-card">
-          <div class="header">
-            应急指挥调度
-          </div>
-          <el-row>
-            <el-col span="12">
-              <el-row>
-                <el-col span="10">
-                  <el-image src="/images/16546@2x.png" class="image"/>
-                </el-col>
-                <el-col span="14">
-                  <p>24685</p>
-                  <p>应急事件</p>
-                </el-col>
-              </el-row>
-            </el-col>
-            <el-col span="12">
-              <el-row>
-                <el-col span="10">
-                  <el-image src="/images/16547@2x.png" class="image"/>
-                </el-col>
-                <el-col span="14">
-                  <p>23</p>
-                  <p>应急预案</p>
-                </el-col>
-              </el-row>
-            </el-col>
-          </el-row>
-          <el-row>
-            <el-col span="12">
-              <el-row>
-                <el-col span="10">
-                  <el-image src="/images/16545@2x.png" class="image"/>
-                </el-col>
-                <el-col span="14">
-                  <p>12</p>
-                  <p>已处理应急事件</p>
-                </el-col>
-              </el-row>
-            </el-col>
-          </el-row>
+          <el-card shadow="never">
+            <div slot="header" class="clearfix">
+              <span>应急指挥调度</span>
+            </div>
+            <el-row>
+              <el-col span="12">
+                <el-row>
+                  <el-col span="10">
+                    <el-image src="/images/16546@2x.png" class="image"/>
+                  </el-col>
+                  <el-col span="14">
+                    <p>24685</p>
+                    <p>应急事件</p>
+                  </el-col>
+                </el-row>
+              </el-col>
+              <el-col span="12">
+                <el-row>
+                  <el-col span="10">
+                    <el-image src="/images/16547@2x.png" class="image"/>
+                  </el-col>
+                  <el-col span="14">
+                    <p>23</p>
+                    <p>应急预案</p>
+                  </el-col>
+                </el-row>
+              </el-col>
+            </el-row>
+            <el-row>
+              <el-col span="12">
+                <el-row>
+                  <el-col span="10">
+                    <el-image src="/images/16545@2x.png" class="image"/>
+                  </el-col>
+                  <el-col span="14">
+                    <p>12</p>
+                    <p>已处理应急事件</p>
+                  </el-col>
+                </el-row>
+              </el-col>
+            </el-row>
+          </el-card>
         </div>
       </el-col>
     </el-row>