From fe4be0bda02b925804f7fcac5c726cb517317461 Mon Sep 17 00:00:00 2001
From: kiki <lin912305043@gmail.com>
Date: Fri, 2 Jun 2023 16:42:49 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../data-view/components/data-view-table.vue  | 98 +++++++++++--------
 1 file changed, 59 insertions(+), 39 deletions(-)

diff --git a/src/views/data-view/components/data-view-table.vue b/src/views/data-view/components/data-view-table.vue
index 9f4de4e..db1882b 100644
--- a/src/views/data-view/components/data-view-table.vue
+++ b/src/views/data-view/components/data-view-table.vue
@@ -1,47 +1,51 @@
 <template>
-  <div
-    class="data-view-table"
-    :class="['data-view-table' + '--' + size]"
-  >
-    <div
-      class="data-view-table-header"
-      :style="{ backgroundImage: `url(${DataViewTableHeaderBG})` }"
-    >
-      <span class="YouSheBiaoTiHei header-title">{{ title }}</span>
-    </div>
-    <table class="data-view-table-body">
-      <thead>
-      <tr class="data-view-table-body-header">
-        <th
-          class="data-view-table-body-header-item"
-          v-for="(column, index) of columns"
-          :key="column.key"
-          :style="{width: columnSizes[index] + '%'}"
+  <div class="outside">
+    <div class="backdrop">
+      <div
+        class="data-view-table"
+        :class="['data-view-table' + '--' + size]"
+      >
+        <div
+          class="data-view-table-header"
+          :style="{ backgroundImage: `url(${DataViewTableHeaderBG})` }"
         >
-          {{ column.label }}
-        </th>
-      </tr>
-      </thead>
-      <tbody ref="tbody" @mouseout="mouseleave" @mouseover="mouseenter">
-      <tr
-        v-for="(item, index) in data"
-        :key="index"
-        class="data-view-table-body-item"
-        :class="[
+          <span class="YouSheBiaoTiHei header-title">{{ title }}</span>
+        </div>
+        <table class="data-view-table-body">
+          <thead>
+          <tr class="data-view-table-body-header">
+            <th
+              class="data-view-table-body-header-item"
+              v-for="(column, index) of columns"
+              :key="column.key"
+              :style="{width: columnSizes[index] + '%'}"
+            >
+              {{ column.label }}
+            </th>
+          </tr>
+          </thead>
+          <tbody ref="tbody" @mouseout="mouseleave" @mouseover="mouseenter">
+          <tr
+            v-for="(item, index) in data"
+            :key="index"
+            class="data-view-table-body-item"
+            :class="[
           index % 2 === 0 ? 'data-view-table-body-item--odd' : 'data-view-table-body-item--even',
           item.balanceWarning === 1 && 'data-view-table-body-item--warning'
           ]"
-      >
-        <td
-          v-for="(column, index) in columns"
-          :key="column.key"
-          :style="{width: columnSizes[index] + '%'}"
-        >
-          {{ item[column.key] }}
-        </td>
-      </tr>
-      </tbody>
-    </table>
+          >
+            <td
+              v-for="(column, index) in columns"
+              :key="column.key"
+              :style="{width: columnSizes[index] + '%'}"
+            >
+              {{ item[column.key] }}
+            </td>
+          </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -125,9 +129,25 @@ export default {
 </script>
 <style scoped lang="scss">
 
+
+.outside {
+  height: 100%;
+}
+.backdrop {
+  width: 100%;
+  height: 100%;
+  /* 创建渐变色背景 */
+  background-image: linear-gradient(10.29deg, rgba(40, 85, 216, 0.8) 7.69%, rgba(17, 48, 128, 0) 63.53%);;
+  padding-left: 1px;
+  padding-right: 1px;
+  padding-bottom: 1px;
+}
+
 .data-view-table {
+  background-color: #081a2c;
   height: 100%;
   overflow: hidden;
+  background-image: linear-gradient(10.29deg, rgb(56 87 174 / 12%) 7.69%, rgba(17, 48, 128, 0) 63.53%);;
 
   table {
     /*设置相邻单元格的边框间的距离*/