canrd-outside / order-erp-front · Commits

Commit 7a000366b92b942727dd2cd7c0aec193f8c1a7b0

Authored by vben
1 parent 0b6110a8

feat(desc-page): add desc page demo

Inline Side-by-side
Showing 17 changed files with 573 additions and 44 deletions
CHANGELOG.zh_CN.md
  View file @7a00036
... ... @@ -7,6 +7,7 @@
7 7 - 新增可编辑行示例
8 8 - 新增个人页
9 9 - 新增表单页
  10 +- 新增详情页
10 11  
11 12 ### 🎫 Chores
12 13  
... ...
build/config/lessModifyVars.ts
  View file @7a00036
... ... @@ -11,8 +11,10 @@ const modifyVars = {
11 11 'warning-color': '#EFBD47', // Warning color
12 12 'link-color': primaryColor, // Link color
13 13 'disabled-color': '#C2C2CC', // Failure color
14   - 'heading-color': '#2C3A61', // Title color
15   - 'text-color': '#2C3A61', // Main text color
  14 + 'heading-color': 'rgba(0, 0, 0, 0.85)', // Title color
  15 + 'text-color': 'rgba(0, 0, 0, 0.85)', // Main text color
  16 + // 'heading-color': '#2C3A61', // Title color
  17 + // 'text-color': '#2C3A61', // Main text color
16 18 'text-color-secondary ': '#606266', // Subtext color
17 19 'background-color-base': '#F0F2F5', // background color
18 20 'font-size-base': '14px', // Main font size
... ...
index.html
  View file @7a00036
... ... @@ -62,7 +62,7 @@
62 62 display: block;
63 63 margin: 20px auto 0 0;
64 64 font-size: 30px;
65   - color: #2c3a61;
  65 + color: rgba(0, 0, 0, 0.85);
66 66 }
67 67 </style>
68 68 </head>
... ...
public/resource/img/loading.svg
  View file @7a00036
... ... @@ -27,7 +27,7 @@
27 27 min-width: 100px;
28 28 margin-top: 4px;
29 29 font-size: 13px;
30   - color: #2C3A61;
  30 + color: rgba(0, 0, 0, 0.85);;
31 31 text-align: left;
32 32 }
33 33 </style>
... ...
src/api/demo/table.ts
  View file @7a00036
... ... @@ -13,5 +13,8 @@ export function demoListApi(params: DemoParams) {
13 13 url: Api.DEMO_LIST,
14 14 method: 'GET',
15 15 params,
  16 + headers: {
  17 + ignoreCancelToken: true,
  18 + },
16 19 });
17 20 }
... ...
src/components/registerGlobComp.ts
  View file @7a00036
... ... @@ -31,6 +31,7 @@ import {
31 31 Steps,
32 32 PageHeader,
33 33 Result,
  34 + Empty,
34 35 } from 'ant-design-vue';
35 36 import { getApp } from '/@/useApp';
36 37  
... ... @@ -75,5 +76,6 @@ export function registerGlobComp() {
75 76 .use(Steps)
76 77 .use(PageHeader)
77 78 .use(Result)
  79 + .use(Empty)
78 80 .use(Tabs);
79 81 }
... ...
src/design/ant/index.less
  View file @7a00036
... ... @@ -7,6 +7,12 @@
7 7 width: 100%;
8 8 }
9 9  
  10 +.collapse-container__body {
  11 + > .ant-descriptions {
  12 + margin-left: 6px;
  13 + }
  14 +}
  15 +
10 16 // .ant-form-item-label {
11 17 // text-align: unset;
12 18 // }
... ...
src/design/color.less
  View file @7a00036
... ... @@ -111,7 +111,7 @@
111 111 // =================================
112 112  
113 113 // Main text color
114   -@text-color-base: #2c3a61;
  114 +@text-color-base: @text-color;
115 115  
116 116 // Label color
117 117 @text-color-call-out: #606266;
... ...
src/router/menus/modules/demo/page.ts
  View file @7a00036
1   -/*
2   - * @description: Do not edit
3   - * @author: cxiaoting
4   - * @Date: 2020-11-13 14:00:37
5   - * @LastEditors: cxiaoting
6   - * @LastEditTime: 2020-11-13 18:07:11
7   - */
8 1 import type { MenuModule } from '/@/router/types.d';
9 2 const menu: MenuModule = {
10 3 orderNo: 20,
... ... @@ -37,6 +30,23 @@ const menu: MenuModule = {
37 30 ],
38 31 },
39 32 {
  33 + path: 'desc',
  34 + name: '详情页',
  35 + tag: {
  36 + content: 'new',
  37 + },
  38 + children: [
  39 + {
  40 + path: 'basic',
  41 + name: '基础详情页',
  42 + },
  43 + {
  44 + path: 'high',
  45 + name: '高级详情页',
  46 + },
  47 + ],
  48 + },
  49 + {
40 50 path: 'result',
41 51 name: '结果页',
42 52 tag: {
... ...
src/router/routes/modules/demo/page.ts
  View file @7a00036
... ... @@ -51,6 +51,34 @@ const page: AppRouteModule = {
51 51 ],
52 52 },
53 53 // =============================form end=============================
  54 + // =============================desc start=============================
  55 + {
  56 + path: '/desc',
  57 + name: 'DescPage',
  58 + redirect: '/page-demo/desc/basic',
  59 + meta: {
  60 + title: '详情页',
  61 + },
  62 + children: [
  63 + {
  64 + path: 'basic',
  65 + name: 'DescBasicPage',
  66 + component: () => import('/@/views/demo/page/desc/basic/index.vue'),
  67 + meta: {
  68 + title: '基础详情页',
  69 + },
  70 + },
  71 + {
  72 + path: 'high',
  73 + name: 'DescHighPage',
  74 + component: () => import('/@/views/demo/page/desc/high/index.vue'),
  75 + meta: {
  76 + title: '高级详情页',
  77 + },
  78 + },
  79 + ],
  80 + },
  81 + // =============================desc end=============================
54 82  
55 83 // =============================result start=============================
56 84 {
... ... @@ -81,6 +109,34 @@ const page: AppRouteModule = {
81 109 },
82 110 // =============================result end=============================
83 111  
  112 + // =============================account start=============================
  113 + {
  114 + path: '/account',
  115 + name: 'AccountPage',
  116 + redirect: '/page-demo/account/setting',
  117 + meta: {
  118 + title: '个人页',
  119 + },
  120 + children: [
  121 + {
  122 + path: 'center',
  123 + name: 'AccountCenterPage',
  124 + component: () => import('/@/views/demo/page/account/center/index.vue'),
  125 + meta: {
  126 + title: '个人中心',
  127 + },
  128 + },
  129 + {
  130 + path: 'setting',
  131 + name: 'AccountSettingPage',
  132 + component: () => import('/@/views/demo/page/account/setting/index.vue'),
  133 + meta: {
  134 + title: '个人设置',
  135 + },
  136 + },
  137 + ],
  138 + },
  139 + // =============================account end=============================
84 140 // =============================exception start=============================
85 141 {
86 142 path: '/exception',
... ... @@ -153,35 +209,6 @@ const page: AppRouteModule = {
153 209 ],
154 210 },
155 211 // =============================exception end=============================
156   -
157   - // =============================account start=============================
158   - {
159   - path: '/account',
160   - name: 'AccountPage',
161   - redirect: '/page-demo/account/setting',
162   - meta: {
163   - title: '个人页',
164   - },
165   - children: [
166   - {
167   - path: 'center',
168   - name: 'AccountCenterPage',
169   - component: () => import('/@/views/demo/page/account/center/index.vue'),
170   - meta: {
171   - title: '个人中心',
172   - },
173   - },
174   - {
175   - path: 'setting',
176   - name: 'AccountSettingPage',
177   - component: () => import('/@/views/demo/page/account/setting/index.vue'),
178   - meta: {
179   - title: '个人设置',
180   - },
181   - },
182   - ],
183   - },
184   - // =============================account end=============================
185 212 ],
186 213 };
187 214  
... ...
src/views/dashboard/analysis/components/GrowCard.vue
  View file @7a00036
... ... @@ -69,7 +69,7 @@
69 69 font-family: PingFangSC-Regular;
70 70 font-size: 16px;
71 71 letter-spacing: 0;
72   - color: #2c3a61;
  72 + color: @text-color-base;
73 73 opacity: 0.7;
74 74 }
75 75  
... ...
src/views/dashboard/analysis/components/TaskCard.vue
  View file @7a00036
... ... @@ -108,7 +108,7 @@
108 108 font-family: PingFangSC-Medium;
109 109 font-size: 16px;
110 110 line-height: 24px;
111   - color: #2c3a61;
  111 + color: rgba(0, 0, 0, 0.85);
112 112 }
113 113  
114 114 &__desc {
... ...
src/views/dashboard/workbench/components/NewsList.vue
  View file @7a00036
... ... @@ -89,7 +89,7 @@
89 89 &__title {
90 90 font-size: 14px;
91 91 line-height: 22px;
92   - color: #2c3a61;
  92 + color: rgba(0, 0, 0, 0.85);
93 93 }
94 94 }
95 95 }
... ...
src/views/demo/page/desc/basic/data.tsx 0 → 100644
  View file @7a00036
  1 +import { DescItem } from '/@/components/Description/index';
  2 +import { BasicColumn } from '/@/components/Table/src/types/table';
  3 +import Button from '/@/components/Button/index.vue';
  4 +
  5 +import { Badge } from 'ant-design-vue';
  6 +
  7 +export const refundData = {
  8 + a1: '1000000000',
  9 + a2: '已取货',
  10 + a3: '1234123421',
  11 + a4: '3214321432',
  12 +};
  13 +
  14 +export const personData = {
  15 + b1: '付小小',
  16 + b2: '18100000000',
  17 + b3: '菜鸟仓储',
  18 + b4: '浙江省杭州市西湖区万塘路18号',
  19 + b5: '无',
  20 +};
  21 +export const refundSchema: DescItem[] = [
  22 + {
  23 + field: 'a1',
  24 + label: '取货单号',
  25 + },
  26 + {
  27 + field: 'a2',
  28 + label: '状态',
  29 + },
  30 + {
  31 + field: 'a3',
  32 + label: '销售单号',
  33 + },
  34 + {
  35 + field: 'a4',
  36 + label: '子订单',
  37 + },
  38 +];
  39 +export const personSchema: DescItem[] = [
  40 + {
  41 + field: 'b1',
  42 + label: '用户姓名',
  43 + },
  44 + {
  45 + field: 'b2',
  46 + label: '联系电话',
  47 + },
  48 + {
  49 + field: 'b3',
  50 + label: '常用快递',
  51 + },
  52 + {
  53 + field: 'b4',
  54 + label: '取货地址',
  55 + },
  56 + {
  57 + field: 'b5',
  58 + label: '备注',
  59 + },
  60 +];
  61 +
  62 +export const refundTableSchema: BasicColumn[] = [
  63 + {
  64 + title: '商品编号',
  65 + width: 150,
  66 + dataIndex: 't1',
  67 + customRender: ({ record }) => {
  68 + return (
  69 + <Button type="link" size="small">
  70 + {() => record.t1}
  71 + </Button>
  72 + );
  73 + },
  74 + },
  75 + {
  76 + title: '商品名称',
  77 + width: 150,
  78 + dataIndex: 't2',
  79 + },
  80 + {
  81 + title: '商品条码',
  82 + width: 150,
  83 + dataIndex: 't3',
  84 + },
  85 + {
  86 + title: '单价 ',
  87 + width: 150,
  88 + dataIndex: 't4',
  89 + },
  90 + {
  91 + title: '数量（件） ',
  92 + width: 150,
  93 + dataIndex: 't5',
  94 + },
  95 + {
  96 + title: '金额',
  97 + width: 150,
  98 + dataIndex: 't6',
  99 + },
  100 +];
  101 +export const refundTimeTableSchema: BasicColumn[] = [
  102 + {
  103 + title: '时间',
  104 + width: 150,
  105 + dataIndex: 't1',
  106 + },
  107 + {
  108 + title: '当前进度',
  109 + width: 150,
  110 + dataIndex: 't2',
  111 + },
  112 + {
  113 + title: '状态',
  114 + width: 150,
  115 + dataIndex: 't3',
  116 + customRender: ({ record }) => {
  117 + return <Badge status="success" text={record.t3} />;
  118 + },
  119 + },
  120 + {
  121 + title: '操作员ID ',
  122 + width: 150,
  123 + dataIndex: 't4',
  124 + },
  125 + {
  126 + title: '耗时',
  127 + width: 150,
  128 + dataIndex: 't5',
  129 + },
  130 +];
  131 +
  132 +export const refundTableData: any[] = [
  133 + {
  134 + t1: 1234561,
  135 + t2: '矿泉水 550ml',
  136 + t3: '12421432143214321',
  137 + t4: '2.00',
  138 + t5: 1,
  139 + t6: 2.0,
  140 + },
  141 + {
  142 + t1: 1234562,
  143 + t2: '矿泉水 550ml',
  144 + t3: '12421432143214321',
  145 + t4: '2.00',
  146 + t5: 2,
  147 + t6: 2.0,
  148 + },
  149 + {
  150 + t1: 1234562,
  151 + t2: '矿泉水 550ml',
  152 + t3: '12421432143214321',
  153 + t4: '2.00',
  154 + t5: 2,
  155 + t6: 2.0,
  156 + },
  157 + {
  158 + t1: 1234562,
  159 + t2: '矿泉水 550ml',
  160 + t3: '12421432143214321',
  161 + t4: '2.00',
  162 + t5: 2,
  163 + t6: 2.0,
  164 + },
  165 +];
  166 +
  167 +export const refundTimeTableData: any[] = [
  168 + {
  169 + t1: '2017-10-01 14:10',
  170 + t2: '联系客户',
  171 + t3: '进行中',
  172 + t4: '取货员 ID1234',
  173 + t5: '5mins',
  174 + },
  175 + {
  176 + t1: '2017-10-01 14:10',
  177 + t2: '取货员出发',
  178 + t3: '成功',
  179 + t4: '取货员 ID1234',
  180 + t5: '5mins',
  181 + },
  182 + {
  183 + t1: '2017-10-01 14:10',
  184 + t2: '取货员接单',
  185 + t3: '成功',
  186 + t4: '系统',
  187 + t5: '5mins',
  188 + },
  189 + {
  190 + t1: '2017-10-01 14:10',
  191 + t2: '申请审批通过',
  192 + t3: '成功',
  193 + t4: '用户',
  194 + t5: '1h',
  195 + },
  196 +];
... ...
src/views/demo/page/desc/basic/index.vue 0 → 100644
  View file @7a00036
  1 +<template>
  2 + <div>
  3 + <a-page-header title="基础详情页" :ghost="false" />
  4 +
  5 + <div class="m-5 desc-wrap">
  6 + <Description
  7 + size="middle"
  8 + title="退款申请"
  9 + :bordered="false"
  10 + :column="3"
  11 + :data="refundData"
  12 + :schema="refundSchema"
  13 + />
  14 + <a-divider />
  15 + <Description
  16 + size="middle"
  17 + title="用户信息"
  18 + :bordered="false"
  19 + :column="3"
  20 + :data="personData"
  21 + :schema="personSchema"
  22 + />
  23 + <a-divider />
  24 +
  25 + <BasicTable @register="registerRefundTable" />
  26 + <a-divider />
  27 + <BasicTable @register="registerTimeTable" />
  28 + </div>
  29 + </div>
  30 +</template>
  31 +<script lang="ts">
  32 + import { defineComponent } from 'vue';
  33 + import { Description } from '/@/components/Description/index';
  34 + import { BasicTable, useTable } from '/@/components/Table';
  35 +
  36 + import {
  37 + refundSchema,
  38 + refundData,
  39 + personSchema,
  40 + personData,
  41 + refundTableSchema,
  42 + refundTimeTableSchema,
  43 + refundTableData,
  44 + refundTimeTableData,
  45 + } from './data';
  46 + export default defineComponent({
  47 + components: { Description, BasicTable },
  48 + setup() {
  49 + const [registerRefundTable] = useTable({
  50 + title: '退货商品',
  51 + dataSource: refundTableData,
  52 + columns: refundTableSchema,
  53 + pagination: false,
  54 + showIndexColumn: false,
  55 + scroll: { y: 300 },
  56 + showSummary: true,
  57 + summaryFunc: handleSummary,
  58 + });
  59 +
  60 + const [registerTimeTable] = useTable({
  61 + title: '退货进度',
  62 + columns: refundTimeTableSchema,
  63 + pagination: false,
  64 + dataSource: refundTimeTableData,
  65 + showIndexColumn: false,
  66 + scroll: { y: 300 },
  67 + });
  68 +
  69 + function handleSummary(tableData: any[]) {
  70 + let totalT5 = 0;
  71 + let totalT6 = 0;
  72 + tableData.forEach((item) => {
  73 + totalT5 += item.t5;
  74 + totalT6 += item.t6;
  75 + });
  76 + return [
  77 + {
  78 + t1: '总计',
  79 + t5: totalT5,
  80 + t6: totalT6,
  81 + },
  82 + ];
  83 + }
  84 + return {
  85 + registerRefundTable,
  86 + registerTimeTable,
  87 + refundSchema,
  88 + refundData,
  89 + personSchema,
  90 + personData,
  91 + };
  92 + },
  93 + });
  94 +</script>
  95 +<style lang="less" scoped>
  96 + .desc-wrap {
  97 + padding: 16px;
  98 + background: #fff;
  99 + }
  100 +</style>
... ...
src/views/demo/page/desc/high/data.tsx 0 → 100644
  View file @7a00036
  1 +import { BasicColumn } from '/@/components/Table/src/types/table';
  2 +
  3 +import { Badge } from 'ant-design-vue';
  4 +
  5 +export const refundTimeTableSchema: BasicColumn[] = [
  6 + {
  7 + title: '时间',
  8 + width: 150,
  9 + dataIndex: 't1',
  10 + },
  11 + {
  12 + title: '当前进度',
  13 + width: 150,
  14 + dataIndex: 't2',
  15 + },
  16 + {
  17 + title: '状态',
  18 + width: 150,
  19 + dataIndex: 't3',
  20 + customRender: ({ record }) => {
  21 + return <Badge status="success" text={record.t3} />;
  22 + },
  23 + },
  24 + {
  25 + title: '操作员ID ',
  26 + width: 150,
  27 + dataIndex: 't4',
  28 + },
  29 + {
  30 + title: '耗时',
  31 + width: 150,
  32 + dataIndex: 't5',
  33 + },
  34 +];
  35 +
  36 +export const refundTimeTableData: any[] = [
  37 + {
  38 + t1: '2017-10-01 14:10',
  39 + t2: '联系客户',
  40 + t3: '进行中',
  41 + t4: '取货员 ID1234',
  42 + t5: '5mins',
  43 + },
  44 + {
  45 + t1: '2017-10-01 14:10',
  46 + t2: '取货员出发',
  47 + t3: '成功',
  48 + t4: '取货员 ID1234',
  49 + t5: '5mins',
  50 + },
  51 + {
  52 + t1: '2017-10-01 14:10',
  53 + t2: '取货员接单',
  54 + t3: '成功',
  55 + t4: '系统',
  56 + t5: '5mins',
  57 + },
  58 + {
  59 + t1: '2017-10-01 14:10',
  60 + t2: '申请审批通过',
  61 + t3: '成功',
  62 + t4: '用户',
  63 + t5: '1h',
  64 + },
  65 +];
... ...
src/views/demo/page/desc/high/index.vue 0 → 100644
  View file @7a00036
  1 +<template>
  2 + <div>
  3 + <a-page-header title="单号：234231029431" class="high-desc">
  4 + <template #extra>
  5 + <a-button key="3"> 操作一 </a-button>
  6 + <a-button key="2"> 操作二 </a-button>
  7 + <a-button key="1" type="primary"> 主操作 </a-button>
  8 + </template>
  9 + <template #footer>
  10 + <a-tabs default-active-key="1">
  11 + <a-tab-pane key="1" tab="详情" />
  12 + <a-tab-pane key="2" tab="规则" />
  13 + </a-tabs>
  14 + </template>
  15 + <a-descriptions size="small" :column="2">
  16 + <a-descriptions-item label="创建人"> 曲丽丽 </a-descriptions-item>
  17 + <a-descriptions-item label="订购产品"> XX 服务 </a-descriptions-item>
  18 + <a-descriptions-item label="创建时间"> 2017-01-10 </a-descriptions-item>
  19 + <a-descriptions-item label="关联单据"> <a>12421</a> </a-descriptions-item>
  20 + <a-descriptions-item label="生效日期"> 2017-07-07 ~ 2017-08-08 </a-descriptions-item>
  21 + <a-descriptions-item label="备注"> 请于两个工作日内确认 </a-descriptions-item>
  22 + </a-descriptions>
  23 + </a-page-header>
  24 +
  25 + <div class="m-5 desc-wrap">
  26 + <a-card title="流程进度" :bordered="false">
  27 + <a-steps :current="1" progress-dot size="small">
  28 + <a-step title="创建项目">
  29 + <template #description> <div>Vben</div> <p>2016-12-12 12:32</p> </template>
  30 + </a-step>
  31 + <a-step title="部门初审">
  32 + <template #description> <p>Chad</p> </template>
  33 + </a-step>
  34 + <a-step title="财务复核" />
  35 + <a-step title="完成" />
  36 + </a-steps>
  37 + </a-card>
  38 +
  39 + <a-card title="用户信息" :bordered="false" class="mt-5">
  40 + <a-descriptions :column="3">
  41 + <a-descriptions-item label="用户姓名"> 付小小 </a-descriptions-item>
  42 + <a-descriptions-item label="会员卡号"> XX 32943898021309809423 </a-descriptions-item>
  43 + <a-descriptions-item label="身份证"> 3321944288191034921 </a-descriptions-item>
  44 + <a-descriptions-item label="联系方式"> 18112345678 </a-descriptions-item>
  45 + <a-descriptions-item label="联系地址" :span="2">
  46 + 曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口
  47 + </a-descriptions-item>
  48 + </a-descriptions>
  49 +
  50 + <a-descriptions title="信息组" :column="3">
  51 + <a-descriptions-item label="某某数据"> 111 </a-descriptions-item>
  52 + <a-descriptions-item label="该数据更新时间"> 2017-08-08 </a-descriptions-item>
  53 + <a-descriptions-item label="某某数据"> 725 </a-descriptions-item>
  54 + <a-descriptions-item label="该数据更新时间"> 2017-08-08 </a-descriptions-item>
  55 + </a-descriptions>
  56 +
  57 + <h4>信息组</h4>
  58 + <a-card title="多层级信息组">
  59 + <a-descriptions title="组名称" :column="3">
  60 + <a-descriptions-item label="负责人"> 林东东 </a-descriptions-item>
  61 + <a-descriptions-item label="角色码"> 1234567 </a-descriptions-item>
  62 + <a-descriptions-item label="所属部门"> XX公司 - YY部 </a-descriptions-item>
  63 + <a-descriptions-item label="过期时间"> 2017-08-08 </a-descriptions-item>
  64 + <a-descriptions-item label="描述" :span="2">
  65 + 这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...
  66 + </a-descriptions-item>
  67 + </a-descriptions>
  68 + <a-divider />
  69 + <a-descriptions title="组名称" :column="1">
  70 + <a-descriptions-item label="学名">
  71 + Citrullus lanatus (Thunb.) Matsum. et
  72 + Nakai一年生蔓生藤本；茎、枝粗壮，具明显的棱。卷须较粗..
  73 + </a-descriptions-item>
  74 + </a-descriptions>
  75 + <a-divider />
  76 + <a-descriptions title="组名称" :column="1">
  77 + <a-descriptions-item label="负责人"> 付小小 </a-descriptions-item>
  78 + <a-descriptions-item label="角色码"> 1234568 </a-descriptions-item>
  79 + </a-descriptions>
  80 + </a-card>
  81 + </a-card>
  82 + <a-card title="用户近半年来电记录" class="my-5">
  83 + <a-empty />
  84 + </a-card>
  85 + <BasicTable @register="registerTimeTable" />
  86 + </div>
  87 + </div>
  88 +</template>
  89 +<script lang="ts">
  90 + import { defineComponent } from 'vue';
  91 + import { Description } from '/@/components/Description/index';
  92 + import { BasicTable, useTable } from '/@/components/Table';
  93 +
  94 + import { refundTimeTableSchema, refundTimeTableData } from './data';
  95 + export default defineComponent({
  96 + components: { Description, BasicTable },
  97 + setup() {
  98 + const [registerTimeTable] = useTable({
  99 + title: '退货进度',
  100 + columns: refundTimeTableSchema,
  101 + pagination: false,
  102 + dataSource: refundTimeTableData,
  103 + showIndexColumn: false,
  104 + scroll: { y: 300 },
  105 + });
  106 +
  107 + return {
  108 + registerTimeTable,
  109 + };
  110 + },
  111 + });
  112 +</script>
  113 +<style lang="less" scoped>
  114 + .high-desc {
  115 + background: #fff;
  116 + }
  117 +</style>
... ...