提交组件

src/views/AppSelect.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-select v-model="value" placeholder="品类" size="small">
+    <el-option
+        v-for="item in options"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+    </el-option>
+  </el-select>
+</template>
+
+<script>
+export default {
+  name: "AppSelect",
+  label: "下拉菜单",
+  data() {
+    return {
+      options: [],
+      value: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+:deep(.el-input__inner) {
+  background: linear-gradient(180deg, rgba(12, 53, 111, 0) 0%, #0C356F 100%);
+  border: 1px solid #1760AE;
+}
+</style>

src/views/AppStoresTable.vue

@@ -1,9 +1,12 @@
 <script>
 export default {
-  name: "AppSpanTable",
+  name: "AppStoresTable",
   label: "多店监控",
   data() {
     return {
+      stores: [
+        {}, {}, {}, {}, {}
+      ],
       columns: {
         品类销售情况: [
           {label: "品类", prop: "categoryName"},
@@ -28,24 +31,28 @@ export default {
 </script>
 
 <template>
-  <section class="AppSpanTable">
+  <section class="AppStoresTable">
-    <div class="header" v-text="'郑州朗程康桥店'"/>
+    <div class="layout">
-    <el-carousel indicator-position="none" height="250px">
+      <div class="store" v-for="store in stores" :key="store.id">
-      <el-carousel-item></el-carousel-item>
+        <div class="header" v-text="'郑州朗程康桥店'"/>
-    </el-carousel>
+        <el-carousel indicator-position="none" height="250px">
-    <div class="title" v-text="'品类销售情况'"/>
+          <el-carousel-item></el-carousel-item>
-    <el-table size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
+        </el-carousel>
-      <el-table-column v-for="column in columns.品类销售情况" v-bind="column" :key="column.prop"/>
+        <div class="title" v-text="'品类销售情况'"/>
-    </el-table>
+        <el-table size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
-    <div class="title" v-text="'重点单品情况'"/>
+          <el-table-column v-for="column in columns.品类销售情况" v-bind="column" :key="column.prop"/>
-    <el-table size="mini" header-cell-class-name="tableHeader" cell-class-name="tableCell" max-height="275px">
+        </el-table>
-      <el-table-column v-for="column in columns.重点单品情况" v-bind="column" :key="column.prop"/>
+        <div class="title" v-text="'重点单品情况'"/>
-    </el-table>
+        <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>
-.AppSpanTable {
+.AppStoresTable {
   color: #fff;
   box-sizing: border-box;
 }
@@ -56,6 +63,10 @@ export default {
   border-color: transparent !important;
 }
 
+:deep(.el-table tr) {
+  background: transparent;
+}
+
 :deep(.el-table) {
   background: transparent;
   border-color: transparent;
@@ -76,11 +87,29 @@ export default {
   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;
-  text-align: center;
+  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>