提交组件

src/views/AppStoresTable.vue

@@ -0,0 +1,115 @@
+<script>
+export default {
+  name: "AppStoresTable",
+  label: "多店监控",
+  data() {
+    return {
+      stores: [
+        {}, {}, {}, {}, {}
+      ],
+      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="AppStoresTable">
+    <div class="layout">
+      <div class="store" v-for="store in stores" :key="store.id">
+        <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>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.AppStoresTable {
+  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 tr) {
+  background: transparent;
+}
+
+: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;
+  background-image: url("http://10.0.97.209/img/kengee/kengee4.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+
+.title {
+  line-height: 20px;
+  width: fit-content;
+  margin: 24px auto 12px;
+  background-image: url("http://10.0.97.209/img/kengee/kengee5.png");
+  background-repeat: no-repeat;
+  background-size: 100% 2px;
+  background-position: center bottom;
+}
+
+.layout {
+  display: flex;
+  gap: 24px;
+  width: 100%;
+  overflow-x: auto;
+}
+
+.store {
+  width: calc(25% - 18px);
+}
+</style>