chore: 优化样式

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 {
     /*设置相邻单元格的边框间的距离*/