1

src/components/custom/TTable.vue

@@ -12,8 +12,8 @@
 </template>
 
 <script lang="ts" setup>
-import { Table as TTable } from 'tdesign-vue-next';
-import { ref } from 'vue';
+import { Table as TTable } from "tdesign-vue-next";
+import { ref } from "vue";
 const props = defineProps<{
   columns: any[];
   list: any[];
@@ -21,4 +21,43 @@ const props = defineProps<{
 const loading = ref(false);
 </script>
 
-<style lang="less"></style>
+<style lang="less">
+@import "@/style/variables.less";
+.reset-t-table {
+  background-color: transparent;
+  .t-table__content {
+    background-color: transparent;
+  }
+  thead {
+    tr {
+      background-color: transparent;
+      th {
+        border: none;
+        background: #000000;
+        color: white;
+        font-size: @font-size-16;
+        font-weight: 400;
+      }
+      & > :first-child {
+        border-top-left-radius: 8px;
+        border-bottom-left-radius: 8px;
+      }
+      & > :last-child {
+        border-top-right-radius: 8px;
+        border-bottom-right-radius: 8px;
+      }
+    }
+  }
+  tbody {
+    .t-table__empty-row {
+      background-color: transparent;
+      &:hover {
+        background-color: transparent;
+      }
+      .t-table__empty {
+        color: white;
+      }
+    }
+  }
+}
+</style>

src/layout/content.vue

@@ -12,13 +12,13 @@
 </template>
 
 <script lang="ts" setup>
-import Header from './header.vue';
-import { useRoute } from 'vue-router';
+import Header from "./header.vue";
+import { useRoute } from "vue-router";
 const route = useRoute();
 </script>
 
 <style lang="less">
-@import '@/style/flex.less';
+@import "@/style/flex.less";
 .custom-layout {
   height: 100%;
   .dj();
@@ -33,6 +33,8 @@ const route = useRoute();
       margin: 0 auto;
       max-width: 1597px;
       box-sizing: border-box;
+      min-width: 90vw;
+      padding: 0 30px;
     }
   }
 }

src/pages/CreationRecord/components/MappingRecord.vue

 <template>
-  <CustomTTable :columns="columns" :list="RecordList.list"></CustomTTable>
+  <CustomTTable
+    class="mapping-record-table"
+    :columns="columns"
+    :list="RecordList.list"
+  ></CustomTTable>
 </template>
 
 <script lang="ts" setup>
-import CustomTTable from '@/components/custom/TTable.vue';
-import { reactive } from 'vue';
+import CustomTTable from "@/components/custom/TTable.vue";
+import { reactive } from "vue";
 const RecordList = reactive({
   // 绘图列表
   list: [],
@@ -12,27 +16,40 @@ const RecordList = reactive({
 // 绘图记录
 const columns = [
   {
-    title: '账号',
-    colKey: 'name',
+    title: "产品",
+    colKey: "name",
   },
   {
-    title: '套餐',
-    colKey: 'packages',
-    align: 'center',
-    className: 'n_quantity',
+    title: "详细",
+    colKey: "packages",
+    align: "center",
+    className: "n_quantity",
   },
   {
-    title: '状况',
-    colKey: 'n_funds',
-    align: 'center',
-    className: 'n_funds',
+    title: "尺寸",
+    colKey: "n_funds",
+    align: "center",
+    className: "n_funds",
   },
   {
-    title: '到期时间',
-    colKey: 'operation',
-    align: 'right',
+    title: "数量",
+    colKey: "operation",
+    align: "right",
+  },
+  {
+    title: "图片",
+    colKey: "img",
+    align: "center",
+  },
+  {
+    title: "下载",
+    colKey: "download",
+    align: "right",
   },
 ];
 </script>
 
-<style lang="less"></style>
+<style lang="less">
+.mapping-record-table {
+}
+</style>

src/pages/CreationRecord/index.vue

@@ -11,26 +11,28 @@
         >{{ item.label }}</span
       >
     </div>
-    <div v-show="DefaultTable == 'img'">
-      <MappingRecord></MappingRecord>
-    </div>
-    <template v-if="is_first">
-      <div v-show="DefaultTable == 'text'">
-        <CustomTTable
-          :columns="columns2"
-          :list="RecordList.textlist"
-        ></CustomTTable>
+    <div class="real-table-parent">
+      <div v-show="DefaultTable == 'img'">
+        <MappingRecord></MappingRecord>
       </div>
-    </template>
+      <template v-if="is_first">
+        <div v-show="DefaultTable == 'text'">
+          <CustomTTable
+            :columns="columns2"
+            :list="RecordList.textlist"
+          ></CustomTTable>
+        </div>
+      </template>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import CustomTTable from '@/components/custom/TTable.vue';
-import MappingRecord from './components/MappingRecord.vue';
-import { reactive, ref } from 'vue';
+import CustomTTable from "@/components/custom/TTable.vue";
+import MappingRecord from "./components/MappingRecord.vue";
+import { reactive, ref } from "vue";
 // 默认展示绘图记录
-const DefaultTable = ref<'img' | 'text'>('img');
+const DefaultTable = ref<"img" | "text">("img");
 const is_first = ref(false);
 
 const RecordList = reactive({
@@ -41,37 +43,37 @@ const RecordList = reactive({
 });
 const label_list = [
   {
-    label: '绘图记录',
-    value: 'img',
+    label: "绘图记录",
+    value: "img",
   },
   {
-    label: '文案记录',
-    value: 'text',
+    label: "文案记录",
+    value: "text",
   },
 ];
 
 // 文案记录
 const columns2 = [
   {
-    title: '账号',
-    colKey: 'name',
+    title: "账号",
+    colKey: "name",
   },
   {
-    title: '套餐',
-    colKey: 'packages',
-    align: 'center',
-    className: 'n_quantity',
+    title: "套餐",
+    colKey: "packages",
+    align: "center",
+    className: "n_quantity",
   },
   {
-    title: '状况',
-    colKey: 'n_funds',
-    align: 'center',
-    className: 'n_funds',
+    title: "状况",
+    colKey: "n_funds",
+    align: "center",
+    className: "n_funds",
   },
   {
-    title: '到期时间',
-    colKey: 'operation',
-    align: 'right',
+    title: "到期时间",
+    colKey: "operation",
+    align: "right",
   },
 ];
 const changeTable = (item: any) => {
@@ -81,7 +83,7 @@ const changeTable = (item: any) => {
 </script>
 
 <style lang="less">
-@import '@/style/variables.less';
+@import "@/style/variables.less";
 .custom-creation-record {
   margin-top: @page-margin-top;
   .label-box {
@@ -100,5 +102,9 @@ const changeTable = (item: any) => {
       margin-left: 12px;
     }
   }
+  .real-table-parent {
+    background-color: #2d2d2d;
+    padding: 20px 40px;
+  }
 }
 </style>