Browse Source

🎨 feat<任务管理>:合并展示-计划销售额样式修改

xinyan 9 months ago
parent
commit
7348c548ed

+ 48 - 38
src/views/reportManage/dataCenter/combinedDisplay/components/tableData/planInfo.vue

@@ -159,47 +159,50 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-card class=" my-3 mx-8 p-0">
-    <div class="flex gap-1.5 justify-between mx-2 items-center">
-      <Selector ref="selectorRef" @update:updateData="updateDataChange" />
-      <div class="demo-date-picker">
-        <div class="block">
-          <span class="demonstration">年份:</span>
-          <el-date-picker
-              v-model="currentYear"
-              :disabled-date="disabledDate"
-              placeholder="Pick a year"
-              style="width: 150px"
-              type="year"
-              @change="getList"
-          />
+  <div class="px-3.5">
+    <el-card body-style="padding: 10px" class="mb-3.5 mt-3.5">
+      <div class="custom-card-style flex gap-1.5 justify-between my-1.5 mx-2"
+           style="display: flex; align-items: center;height: 52px; ">
+        <Selector ref="selectorRef" @update:updateData="updateDataChange" />
+        <div class="demo-date-picker">
+          <div class="block">
+            <span class="demonstration">年份:</span>
+            <el-date-picker
+                v-model="currentYear"
+                :disabled-date="disabledDate"
+                placeholder="Pick a year"
+                style="width: 150px"
+                type="year"
+                @change="getList"
+            />
+          </div>
         </div>
       </div>
-    </div>
-  </el-card>
-  <el-card class="mx-8">
+    </el-card>
+    <el-card class="mt-3">
     <slot name="table-header"></slot>
-    <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" :row-style="rowStyle"
-              v-bind="gridOptions"
-              v-on="gridEvents">
-      <template #toolbar_tools>
-        <div class="pr-2.5">
-          <el-tooltip content="下载表格" placement="top">
-            <vxe-button circle icon="vxe-icon-download" @click="handleExport"></vxe-button>
-          </el-tooltip>
-        </div>
-      </template>
-      <template #platformNumber_default="{ row }">
-        <div class="font-semibold">{{ row.platformNumber }}</div>
-      </template>
-      <template #platformName_default="{ row }">
-        <div class="font-semibold" style="color: #164285">{{ row.platformName }}</div>
-      </template>
-      <template #brandName_default="{ row }">
-        {{ row.brandName }}
-      </template>
-    </vxe-grid>
-  </el-card>
+      <vxe-grid ref="xGrid" :cell-style="cellStyle" :header-cell-style="headerCellStyle" :row-style="rowStyle"
+                v-bind="gridOptions"
+                v-on="gridEvents">
+        <template #toolbar_tools>
+          <div class="pr-2.5">
+            <el-tooltip content="下载表格" placement="top">
+              <vxe-button circle icon="vxe-icon-download" @click="handleExport"></vxe-button>
+            </el-tooltip>
+          </div>
+        </template>
+        <template #platformNumber_default="{ row }">
+          <div class="font-semibold">{{ row.platformNumber }}</div>
+        </template>
+        <template #platformName_default="{ row }">
+          <div class="font-semibold" style="color: #164285">{{ row.platformName }}</div>
+        </template>
+        <template #brandName_default="{ row }">
+          {{ row.brandName }}
+        </template>
+      </vxe-grid>
+    </el-card>
+  </div>
 </template>
 
 <style scoped>
@@ -228,4 +231,11 @@ onMounted(() => {
   padding-left: 5px !important;
   padding-right: 0 !important;
 }
+
+.el-card {
+  border: none;
+  border-radius: 12px;
+  background-color: #fff;
+  box-shadow: 0px 0px 12px rgba(51, 89, 181, 0.16);
+}
 </style>