From 670d0922c0627c33129d05611af82f117cef7c9c Mon Sep 17 00:00:00 2001
From: Bowen <mr_lbw@outlook.com>
Date: Wed, 26 Sep 2018 17:40:51 +0800
Subject: [PATCH] feat(analysis-middle): basic layout of analysis__layout

---
 src/components/AnalysisMiddle.vue | 37 +++++++++++++++++++++++++++++++
 src/view/Analysis.vue             | 12 +++++++++-
 2 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 src/components/AnalysisMiddle.vue

diff --git a/src/components/AnalysisMiddle.vue b/src/components/AnalysisMiddle.vue
new file mode 100644
index 0000000..5563b75
--- /dev/null
+++ b/src/components/AnalysisMiddle.vue
@@ -0,0 +1,37 @@
+<template>
+  <el-card class="analysis__middle">
+    <header class="middle__header" slot="header">
+      <span class="middle__header__title">线上热门搜索</span>
+      <el-dropdown class="middle__header__icon">
+        <el-button style="padding: 3px 0" type="text">...</el-button>
+        <el-dropdown-menu slot="dropdown">
+          <el-dropdown-item>操作一</el-dropdown-item>
+          <el-dropdown-item>操作二</el-dropdown-item>
+        </el-dropdown-menu>
+      </el-dropdown>
+    </header>
+    <main class="analysis__middle__main"><slot></slot></main>
+  </el-card>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="sass" scoped>
+
+.analysis
+  &__middle
+    margin-top: 24px
+
+.middle
+  &__header
+    display: flex
+    align-items: center
+
+    &__icon
+      margin-left: auto
+
+</style>
diff --git a/src/view/Analysis.vue b/src/view/Analysis.vue
index 18c73b9..f10b53c 100644
--- a/src/view/Analysis.vue
+++ b/src/view/Analysis.vue
@@ -88,6 +88,14 @@
     <analysis-tab
       :chart-data="totalSalesData"
     ></analysis-tab>
+    <el-row class="analysis__search-sales" :gutter="24">
+      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+        <analysis-middle></analysis-middle>
+      </el-col>
+      <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12">
+        <analysis-middle></analysis-middle>
+      </el-col>
+    </el-row>
   </el-main>
 </template>
 
@@ -97,6 +105,7 @@ import ChartLine from 'COMPONENTS/ChartLine'
 import ChartBar from 'COMPONENTS/ChartBar'
 import MiniProgress from 'COMPONENTS/MiniProgress'
 import AnalysisTab from 'COMPONENTS/AnalysisTab'
+import AnalysisMiddle from 'COMPONENTS/AnalysisMiddle'
 import Trend from 'COMPONENTS/Trend'
 import { mapState, mapActions } from 'vuex'
 import {
@@ -208,7 +217,8 @@ export default {
     ChartLine,
     ChartBar,
     MiniProgress,
-    AnalysisTab
+    AnalysisTab,
+    AnalysisMiddle
   }
 }
 </script>