Skip to content

A
ai_web_page_prod
Commit 3de978fb by lei
Options

1

parent c6f6da79
Showing with 119 additions and 55 deletions
src/components/custom/TTable.vue
...@@ -12,8 +12,8 @@ ...@@ -12,8 +12,8 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Table as TTable } from 'tdesign-vue-next'; import { Table as TTable } from "tdesign-vue-next";
import { ref } from 'vue'; import { ref } from "vue";
const props = defineProps<{ const props = defineProps<{
columns: any[]; columns: any[];
list: any[]; list: any[];
...@@ -21,4 +21,43 @@ const props = defineProps<{ ...@@ -21,4 +21,43 @@ const props = defineProps<{
const loading = ref(false); const loading = ref(false);
</script> </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 @@ ...@@ -12,13 +12,13 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import Header from './header.vue'; import Header from "./header.vue";
import { useRoute } from 'vue-router'; import { useRoute } from "vue-router";
const route = useRoute(); const route = useRoute();
</script> </script>
<style lang="less"> <style lang="less">
@import '@/style/flex.less'; @import "@/style/flex.less";
.custom-layout { .custom-layout {
height: 100%; height: 100%;
.dj(); .dj();
...@@ -33,6 +33,8 @@ const route = useRoute(); ...@@ -33,6 +33,8 @@ const route = useRoute();
margin: 0 auto; margin: 0 auto;
max-width: 1597px; max-width: 1597px;
box-sizing: border-box; box-sizing: border-box;
min-width: 90vw;
padding: 0 30px;
} }
} }
} }
......
src/pages/CreationRecord/components/MappingRecord.vue
<template> <template>
<CustomTTable :columns="columns" :list="RecordList.list"></CustomTTable> <CustomTTable
class="mapping-record-table"
:columns="columns"
:list="RecordList.list"
></CustomTTable>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import CustomTTable from '@/components/custom/TTable.vue'; import CustomTTable from "@/components/custom/TTable.vue";
import { reactive } from 'vue'; import { reactive } from "vue";
const RecordList = reactive({ const RecordList = reactive({
// 绘图列表 // 绘图列表
list: [], list: [],
...@@ -12,27 +16,40 @@ const RecordList = reactive({ ...@@ -12,27 +16,40 @@ const RecordList = reactive({
// 绘图记录 // 绘图记录
const columns = [ const columns = [
{ {
title: '账号', title: "产品",
colKey: 'name', colKey: "name",
}, },
{ {
title: '套餐', title: "详细",
colKey: 'packages', colKey: "packages",
align: 'center', align: "center",
className: 'n_quantity', className: "n_quantity",
}, },
{ {
title: '状况', title: "尺寸",
colKey: 'n_funds', colKey: "n_funds",
align: 'center', align: "center",
className: 'n_funds', className: "n_funds",
}, },
{ {
title: '到期时间', title: "数量",
colKey: 'operation', colKey: "operation",
align: 'right', align: "right",
},
{
title: "图片",
colKey: "img",
align: "center",
},
{
title: "下载",
colKey: "download",
align: "right",
}, },
]; ];
</script> </script>
<style lang="less"></style> <style lang="less">
.mapping-record-table {
}
</style>
src/pages/CreationRecord/index.vue
...@@ -11,26 +11,28 @@ ...@@ -11,26 +11,28 @@
>{{ item.label }}</span >{{ item.label }}</span
> >
</div> </div>
<div v-show="DefaultTable == 'img'"> <div class="real-table-parent">
<MappingRecord></MappingRecord> <div v-show="DefaultTable == 'img'">
</div> <MappingRecord></MappingRecord>
<template v-if="is_first">
<div v-show="DefaultTable == 'text'">
<CustomTTable
:columns="columns2"
:list="RecordList.textlist"
></CustomTTable>
</div> </div>
</template> <template v-if="is_first">
<div v-show="DefaultTable == 'text'">
<CustomTTable
:columns="columns2"
:list="RecordList.textlist"
></CustomTTable>
</div>
</template>
</div>
</div> </div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import CustomTTable from '@/components/custom/TTable.vue'; import CustomTTable from "@/components/custom/TTable.vue";
import MappingRecord from './components/MappingRecord.vue'; import MappingRecord from "./components/MappingRecord.vue";
import { reactive, ref } from 'vue'; import { reactive, ref } from "vue";
// 默认展示绘图记录 // 默认展示绘图记录
const DefaultTable = ref<'img' | 'text'>('img'); const DefaultTable = ref<"img" | "text">("img");
const is_first = ref(false); const is_first = ref(false);
const RecordList = reactive({ const RecordList = reactive({
...@@ -41,37 +43,37 @@ const RecordList = reactive({ ...@@ -41,37 +43,37 @@ const RecordList = reactive({
}); });
const label_list = [ const label_list = [
{ {
label: '绘图记录', label: "绘图记录",
value: 'img', value: "img",
}, },
{ {
label: '文案记录', label: "文案记录",
value: 'text', value: "text",
}, },
]; ];
// 文案记录 // 文案记录
const columns2 = [ const columns2 = [
{ {
title: '账号', title: "账号",
colKey: 'name', colKey: "name",
}, },
{ {
title: '套餐', title: "套餐",
colKey: 'packages', colKey: "packages",
align: 'center', align: "center",
className: 'n_quantity', className: "n_quantity",
}, },
{ {
title: '状况', title: "状况",
colKey: 'n_funds', colKey: "n_funds",
align: 'center', align: "center",
className: 'n_funds', className: "n_funds",
}, },
{ {
title: '到期时间', title: "到期时间",
colKey: 'operation', colKey: "operation",
align: 'right', align: "right",
}, },
]; ];
const changeTable = (item: any) => { const changeTable = (item: any) => {
...@@ -81,7 +83,7 @@ const changeTable = (item: any) => { ...@@ -81,7 +83,7 @@ const changeTable = (item: any) => {
</script> </script>
<style lang="less"> <style lang="less">
@import '@/style/variables.less'; @import "@/style/variables.less";
.custom-creation-record { .custom-creation-record {
margin-top: @page-margin-top; margin-top: @page-margin-top;
.label-box { .label-box {
...@@ -100,5 +102,9 @@ const changeTable = (item: any) => { ...@@ -100,5 +102,9 @@ const changeTable = (item: any) => {
margin-left: 12px; margin-left: 12px;
} }
} }
.real-table-parent {
background-color: #2d2d2d;
padding: 20px 40px;
}
} }
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment