初步完成第一个

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"
   },

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>

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;
+}

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)

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>