From 4366ba42bfaf992d543493cfdee0bd156044bb16 Mon Sep 17 00:00:00 2001
From: Kubbo <390378816@qq.com>
Date: Mon, 17 Jun 2024 23:18:11 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9D=E6=AD=A5=E5=AE=8C=E6=88=90=E7=AC=AC?=
 =?UTF-8?q?=E4=B8=80=E4=B8=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json               |  1 +
 src/App.vue                |  8 +++--
 src/assets/main.css        | 13 +++++++
 src/main.js                |  3 ++
 src/views/AppSpanTable.vue | 72 ++++++++++++++++++++++++++++++++++++--
 5 files changed, 92 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index f72d383..fa1713c 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "element-ui": "^2.15.14",
     "vue": "^2.7.7",
     "vue-router": "^3.5.4"
   },
diff --git a/src/App.vue b/src/App.vue
index d140061..6826bbd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
   <div id="app">
     <div class="flex">
       <apps-nav/>
-      <router-view class="fill"/>
+      <router-view class="fill components"/>
     </div>
   </div>
 </template>
@@ -14,6 +14,10 @@ html, body, #app {
   margin: 0;
   overflow: hidden;
 }
+
+.components {
+  background: #07193D;
+}
 </style>
 <script>
 import AppsNav from "@/components/appsNav.vue";
@@ -21,7 +25,5 @@ import AppsNav from "@/components/appsNav.vue";
 export default {
   name: "App",
   components: {AppsNav},
-
-
 }
 </script>
diff --git a/src/assets/main.css b/src/assets/main.css
index 6327db6..1b373d6 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -27,3 +27,16 @@ a, .green {
 .pointer {
   cursor: pointer;
 }
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+
+.mb-8{
+  margin-bottom: 8px;
+}
+
+.mr-8{
+  margin-right: 8px;
+}
diff --git a/src/main.js b/src/main.js
index 6c78861..2029a4f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,10 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import './assets/main.css'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
 
+Vue.use(ElementUI);
 new Vue({
   router,
   render: (h) => h(App)
diff --git a/src/views/AppSpanTable.vue b/src/views/AppSpanTable.vue
index 17d80ed..92549c4 100644
--- a/src/views/AppSpanTable.vue
+++ b/src/views/AppSpanTable.vue
@@ -1,18 +1,86 @@
 <script>
 export default {
   name: "AppSpanTable",
-  label: "多维表格"
+  label: "多店监控",
+  data() {
+    return {
+      columns: {
+        品类销售情况: [
+          {label: "品类", prop: "categoryName"},
+          {label: "销售额", prop: "sales"},
+          {label: "库存金额", prop: "inventoryAmount"},
+          {label: "同/环比销售额", prop: "compareSales"},
+          {label: "同/环比库存金额", prop: "compareInventoryAmount"},
+          {label: "前四周日军销售额", prop: "averageSales"},
+        ],
+        重点单品情况: [
+          {label: "重点单品", prop: "categoryName"},
+          {label: "当日目标", prop: "sales"},
+          {label: "销售数量", prop: "inventoryAmount"},
+          {label: "库存数量", prop: "compareSales"},
+          {label: "剩余时间预计销售数量", prop: "compareInventoryAmount"},
+          {label: "提醒", prop: "averageSales"},
+        ]
+      },
+    }
+  }
 }
 </script>
 
 <template>
   <section class="AppSpanTable">
-    ASDASD
+    <div class="header" v-text="'郑州朗程康桥店'"/>
+    <el-carousel indicator-position="none" height="250px">
+      <el-carousel-item></el-carousel-item>
+    </el-carousel>
+    <div class="title" v-text="'品类销售情况'"/>
+    <el-table size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
+      <el-table-column v-for="column in columns.品类销售情况" v-bind="column" :key="column.prop"/>
+    </el-table>
+    <div class="title" v-text="'重点单品情况'"/>
+    <el-table size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
+      <el-table-column v-for="column in columns.重点单品情况" v-bind="column" :key="column.prop"/>
+    </el-table>
   </section>
 </template>
 
 <style scoped>
 .AppSpanTable {
+  color: #fff;
+  box-sizing: border-box;
+}
 
+:deep(.tableHeader) {
+  background: rgba(13, 48, 99, 0.6) !important;
+  color: #fff;
+  border-color: transparent !important;
+}
+
+:deep(.el-table) {
+  background: transparent;
+  border-color: transparent;
+}
+
+:deep(.el-table:before) {
+  background: transparent;
+}
+
+:deep(.tableCell) {
+  color: #fff;
+  border-color: transparent;
+}
+
+.header {
+  height: 48px;
+  padding: 8px 0 8px 38px;
+  margin-bottom: 24px;
+  box-sizing: border-box;
+  line-height: 32px;
+}
+
+.title {
+  line-height: 20px;
+  margin: 24px auto 12px;
+  text-align: center;
 }
 </style>