diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 202a1c2565bd98bd7aefb2eb4629f195e0479e0d..9cbdcf7c542c426e726ca3b0f48b9c75741bdcff 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -7,6 +7,7 @@
- 新增可编辑行示例
- 新增个人页
- 新增表单页
+- 新增详情页
### 🎫 Chores
diff --git a/build/config/lessModifyVars.ts b/build/config/lessModifyVars.ts
index 83cf851479d78189010f116a113eacfd79cc8dbb..73cbc187eeb92dfa5e350956db21f2143756bfa3 100644
--- a/build/config/lessModifyVars.ts
+++ b/build/config/lessModifyVars.ts
@@ -11,8 +11,10 @@ const modifyVars = {
'warning-color': '#EFBD47', // Warning color
'link-color': primaryColor, // Link color
'disabled-color': '#C2C2CC', // Failure color
- 'heading-color': '#2C3A61', // Title color
- 'text-color': '#2C3A61', // Main text color
+ 'heading-color': 'rgba(0, 0, 0, 0.85)', // Title color
+ 'text-color': 'rgba(0, 0, 0, 0.85)', // Main text color
+ // 'heading-color': '#2C3A61', // Title color
+ // 'text-color': '#2C3A61', // Main text color
'text-color-secondary ': '#606266', // Subtext color
'background-color-base': '#F0F2F5', // background color
'font-size-base': '14px', // Main font size
diff --git a/index.html b/index.html
index 5702b863a57f363392a7dbd1bb2a908ddf832ec9..9c9dbbdd9e8685bac9876a7e6f29804705167bcf 100644
--- a/index.html
+++ b/index.html
@@ -62,7 +62,7 @@
display: block;
margin: 20px auto 0 0;
font-size: 30px;
- color: #2c3a61;
+ color: rgba(0, 0, 0, 0.85);
}
diff --git a/public/resource/img/loading.svg b/public/resource/img/loading.svg
index c956a635a58392840a2f4296457b4ff10df0b250..5214fd0cd600d2b14393049dae15303b4bfe0f61 100644
--- a/public/resource/img/loading.svg
+++ b/public/resource/img/loading.svg
@@ -27,7 +27,7 @@
min-width: 100px;
margin-top: 4px;
font-size: 13px;
- color: #2C3A61;
+ color: rgba(0, 0, 0, 0.85);;
text-align: left;
}
diff --git a/src/api/demo/table.ts b/src/api/demo/table.ts
index 2a82768dce086c699ad308d10919af3794c45f6d..1e10c16a110ba0eb976bf6e3d7b94c5775b947c4 100644
--- a/src/api/demo/table.ts
+++ b/src/api/demo/table.ts
@@ -13,5 +13,8 @@ export function demoListApi(params: DemoParams) {
url: Api.DEMO_LIST,
method: 'GET',
params,
+ headers: {
+ ignoreCancelToken: true,
+ },
});
}
diff --git a/src/components/registerGlobComp.ts b/src/components/registerGlobComp.ts
index 85d10cf6f77c0ad131b478d902ae1446399e1f6b..6f278bbd24b251196b2567b383fd79bae73dcb5f 100644
--- a/src/components/registerGlobComp.ts
+++ b/src/components/registerGlobComp.ts
@@ -31,6 +31,7 @@ import {
Steps,
PageHeader,
Result,
+ Empty,
} from 'ant-design-vue';
import { getApp } from '/@/useApp';
@@ -75,5 +76,6 @@ export function registerGlobComp() {
.use(Steps)
.use(PageHeader)
.use(Result)
+ .use(Empty)
.use(Tabs);
}
diff --git a/src/design/ant/index.less b/src/design/ant/index.less
index 13271aae9cce3148449aba341966e386c7a20999..3464c49653c468b250db1709217f9ea8d498eef8 100644
--- a/src/design/ant/index.less
+++ b/src/design/ant/index.less
@@ -7,6 +7,12 @@
width: 100%;
}
+.collapse-container__body {
+ > .ant-descriptions {
+ margin-left: 6px;
+ }
+}
+
// .ant-form-item-label {
// text-align: unset;
// }
diff --git a/src/design/color.less b/src/design/color.less
index 836755ad11a71868b73b193377106bfd2755bdd5..30d82b53d6dbfc2e0ad139d7f38af8dda26141e0 100644
--- a/src/design/color.less
+++ b/src/design/color.less
@@ -111,7 +111,7 @@
// =================================
// Main text color
-@text-color-base: #2c3a61;
+@text-color-base: @text-color;
// Label color
@text-color-call-out: #606266;
diff --git a/src/router/menus/modules/demo/page.ts b/src/router/menus/modules/demo/page.ts
index 7f0a7ef3ce6279e64005136e5603cb4bfdddaac2..6fda9a4cf73e1bd158c98ddfc06acfce6b0062dd 100644
--- a/src/router/menus/modules/demo/page.ts
+++ b/src/router/menus/modules/demo/page.ts
@@ -1,10 +1,3 @@
-/*
- * @description: Do not edit
- * @author: cxiaoting
- * @Date: 2020-11-13 14:00:37
- * @LastEditors: cxiaoting
- * @LastEditTime: 2020-11-13 18:07:11
- */
import type { MenuModule } from '/@/router/types.d';
const menu: MenuModule = {
orderNo: 20,
@@ -36,6 +29,23 @@ const menu: MenuModule = {
},
],
},
+ {
+ path: 'desc',
+ name: '详情页',
+ tag: {
+ content: 'new',
+ },
+ children: [
+ {
+ path: 'basic',
+ name: '基础详情页',
+ },
+ {
+ path: 'high',
+ name: '高级详情页',
+ },
+ ],
+ },
{
path: 'result',
name: '结果页',
diff --git a/src/router/routes/modules/demo/page.ts b/src/router/routes/modules/demo/page.ts
index ac70306f5b3975625d88d0339e1288c31a13633f..b720d4109c1ce9e3f097f8acbdb867b28a63971b 100644
--- a/src/router/routes/modules/demo/page.ts
+++ b/src/router/routes/modules/demo/page.ts
@@ -51,6 +51,34 @@ const page: AppRouteModule = {
],
},
// =============================form end=============================
+ // =============================desc start=============================
+ {
+ path: '/desc',
+ name: 'DescPage',
+ redirect: '/page-demo/desc/basic',
+ meta: {
+ title: '详情页',
+ },
+ children: [
+ {
+ path: 'basic',
+ name: 'DescBasicPage',
+ component: () => import('/@/views/demo/page/desc/basic/index.vue'),
+ meta: {
+ title: '基础详情页',
+ },
+ },
+ {
+ path: 'high',
+ name: 'DescHighPage',
+ component: () => import('/@/views/demo/page/desc/high/index.vue'),
+ meta: {
+ title: '高级详情页',
+ },
+ },
+ ],
+ },
+ // =============================desc end=============================
// =============================result start=============================
{
@@ -81,6 +109,34 @@ const page: AppRouteModule = {
},
// =============================result end=============================
+ // =============================account start=============================
+ {
+ path: '/account',
+ name: 'AccountPage',
+ redirect: '/page-demo/account/setting',
+ meta: {
+ title: '个人页',
+ },
+ children: [
+ {
+ path: 'center',
+ name: 'AccountCenterPage',
+ component: () => import('/@/views/demo/page/account/center/index.vue'),
+ meta: {
+ title: '个人中心',
+ },
+ },
+ {
+ path: 'setting',
+ name: 'AccountSettingPage',
+ component: () => import('/@/views/demo/page/account/setting/index.vue'),
+ meta: {
+ title: '个人设置',
+ },
+ },
+ ],
+ },
+ // =============================account end=============================
// =============================exception start=============================
{
path: '/exception',
@@ -153,35 +209,6 @@ const page: AppRouteModule = {
],
},
// =============================exception end=============================
-
- // =============================account start=============================
- {
- path: '/account',
- name: 'AccountPage',
- redirect: '/page-demo/account/setting',
- meta: {
- title: '个人页',
- },
- children: [
- {
- path: 'center',
- name: 'AccountCenterPage',
- component: () => import('/@/views/demo/page/account/center/index.vue'),
- meta: {
- title: '个人中心',
- },
- },
- {
- path: 'setting',
- name: 'AccountSettingPage',
- component: () => import('/@/views/demo/page/account/setting/index.vue'),
- meta: {
- title: '个人设置',
- },
- },
- ],
- },
- // =============================account end=============================
],
};
diff --git a/src/views/dashboard/analysis/components/GrowCard.vue b/src/views/dashboard/analysis/components/GrowCard.vue
index c8fadcc5254a333f84c916c56d270df0817982af..0fee2ecced88d86cc9afbdc319c59b3a6fb19b33 100644
--- a/src/views/dashboard/analysis/components/GrowCard.vue
+++ b/src/views/dashboard/analysis/components/GrowCard.vue
@@ -69,7 +69,7 @@
font-family: PingFangSC-Regular;
font-size: 16px;
letter-spacing: 0;
- color: #2c3a61;
+ color: @text-color-base;
opacity: 0.7;
}
diff --git a/src/views/dashboard/analysis/components/TaskCard.vue b/src/views/dashboard/analysis/components/TaskCard.vue
index 9ac0089d7384ccd171404815d533ba70184fb77d..49fff6f7ea52473345298c1b418269826ab43dca 100644
--- a/src/views/dashboard/analysis/components/TaskCard.vue
+++ b/src/views/dashboard/analysis/components/TaskCard.vue
@@ -108,7 +108,7 @@
font-family: PingFangSC-Medium;
font-size: 16px;
line-height: 24px;
- color: #2c3a61;
+ color: rgba(0, 0, 0, 0.85);
}
&__desc {
diff --git a/src/views/dashboard/workbench/components/NewsList.vue b/src/views/dashboard/workbench/components/NewsList.vue
index 915b7e98ff9cb0d7bfacbbc4353cd5fbb57f52d3..f0127179a4ba727168f73a5e73612775afac4f25 100644
--- a/src/views/dashboard/workbench/components/NewsList.vue
+++ b/src/views/dashboard/workbench/components/NewsList.vue
@@ -89,7 +89,7 @@
&__title {
font-size: 14px;
line-height: 22px;
- color: #2c3a61;
+ color: rgba(0, 0, 0, 0.85);
}
}
}
diff --git a/src/views/demo/page/desc/basic/data.tsx b/src/views/demo/page/desc/basic/data.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..290d1de2eaab3da883b33aa14c5f8beae55dac67
--- /dev/null
+++ b/src/views/demo/page/desc/basic/data.tsx
@@ -0,0 +1,196 @@
+import { DescItem } from '/@/components/Description/index';
+import { BasicColumn } from '/@/components/Table/src/types/table';
+import Button from '/@/components/Button/index.vue';
+
+import { Badge } from 'ant-design-vue';
+
+export const refundData = {
+ a1: '1000000000',
+ a2: '已取货',
+ a3: '1234123421',
+ a4: '3214321432',
+};
+
+export const personData = {
+ b1: '付小小',
+ b2: '18100000000',
+ b3: '菜鸟仓储',
+ b4: '浙江省杭州市西湖区万塘路18号',
+ b5: '无',
+};
+export const refundSchema: DescItem[] = [
+ {
+ field: 'a1',
+ label: '取货单号',
+ },
+ {
+ field: 'a2',
+ label: '状态',
+ },
+ {
+ field: 'a3',
+ label: '销售单号',
+ },
+ {
+ field: 'a4',
+ label: '子订单',
+ },
+];
+export const personSchema: DescItem[] = [
+ {
+ field: 'b1',
+ label: '用户姓名',
+ },
+ {
+ field: 'b2',
+ label: '联系电话',
+ },
+ {
+ field: 'b3',
+ label: '常用快递',
+ },
+ {
+ field: 'b4',
+ label: '取货地址',
+ },
+ {
+ field: 'b5',
+ label: '备注',
+ },
+];
+
+export const refundTableSchema: BasicColumn[] = [
+ {
+ title: '商品编号',
+ width: 150,
+ dataIndex: 't1',
+ customRender: ({ record }) => {
+ return (
+
+ );
+ },
+ },
+ {
+ title: '商品名称',
+ width: 150,
+ dataIndex: 't2',
+ },
+ {
+ title: '商品条码',
+ width: 150,
+ dataIndex: 't3',
+ },
+ {
+ title: '单价 ',
+ width: 150,
+ dataIndex: 't4',
+ },
+ {
+ title: '数量(件) ',
+ width: 150,
+ dataIndex: 't5',
+ },
+ {
+ title: '金额',
+ width: 150,
+ dataIndex: 't6',
+ },
+];
+export const refundTimeTableSchema: BasicColumn[] = [
+ {
+ title: '时间',
+ width: 150,
+ dataIndex: 't1',
+ },
+ {
+ title: '当前进度',
+ width: 150,
+ dataIndex: 't2',
+ },
+ {
+ title: '状态',
+ width: 150,
+ dataIndex: 't3',
+ customRender: ({ record }) => {
+ return ;
+ },
+ },
+ {
+ title: '操作员ID ',
+ width: 150,
+ dataIndex: 't4',
+ },
+ {
+ title: '耗时',
+ width: 150,
+ dataIndex: 't5',
+ },
+];
+
+export const refundTableData: any[] = [
+ {
+ t1: 1234561,
+ t2: '矿泉水 550ml',
+ t3: '12421432143214321',
+ t4: '2.00',
+ t5: 1,
+ t6: 2.0,
+ },
+ {
+ t1: 1234562,
+ t2: '矿泉水 550ml',
+ t3: '12421432143214321',
+ t4: '2.00',
+ t5: 2,
+ t6: 2.0,
+ },
+ {
+ t1: 1234562,
+ t2: '矿泉水 550ml',
+ t3: '12421432143214321',
+ t4: '2.00',
+ t5: 2,
+ t6: 2.0,
+ },
+ {
+ t1: 1234562,
+ t2: '矿泉水 550ml',
+ t3: '12421432143214321',
+ t4: '2.00',
+ t5: 2,
+ t6: 2.0,
+ },
+];
+
+export const refundTimeTableData: any[] = [
+ {
+ t1: '2017-10-01 14:10',
+ t2: '联系客户',
+ t3: '进行中',
+ t4: '取货员 ID1234',
+ t5: '5mins',
+ },
+ {
+ t1: '2017-10-01 14:10',
+ t2: '取货员出发',
+ t3: '成功',
+ t4: '取货员 ID1234',
+ t5: '5mins',
+ },
+ {
+ t1: '2017-10-01 14:10',
+ t2: '取货员接单',
+ t3: '成功',
+ t4: '系统',
+ t5: '5mins',
+ },
+ {
+ t1: '2017-10-01 14:10',
+ t2: '申请审批通过',
+ t3: '成功',
+ t4: '用户',
+ t5: '1h',
+ },
+];
diff --git a/src/views/demo/page/desc/basic/index.vue b/src/views/demo/page/desc/basic/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..0472ed14a755256793e74f7dc6727c16b8dbb02b
--- /dev/null
+++ b/src/views/demo/page/desc/basic/index.vue
@@ -0,0 +1,100 @@
+
+
+
+
+
diff --git a/src/views/demo/page/desc/high/data.tsx b/src/views/demo/page/desc/high/data.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..ec7a7c39fd170105857b9e8438e68ee44956cbf6
--- /dev/null
+++ b/src/views/demo/page/desc/high/data.tsx
@@ -0,0 +1,65 @@
+import { BasicColumn } from '/@/components/Table/src/types/table';
+
+import { Badge } from 'ant-design-vue';
+
+export const refundTimeTableSchema: BasicColumn[] = [
+ {
+ title: '时间',
+ width: 150,
+ dataIndex: 't1',
+ },
+ {
+ title: '当前进度',
+ width: 150,
+ dataIndex: 't2',
+ },
+ {
+ title: '状态',
+ width: 150,
+ dataIndex: 't3',
+ customRender: ({ record }) => {
+ return ;
+ },
+ },
+ {
+ title: '操作员ID ',
+ width: 150,
+ dataIndex: 't4',
+ },
+ {
+ title: '耗时',
+ width: 150,
+ dataIndex: 't5',
+ },
+];
+
+export const refundTimeTableData: any[] = [
+ {
+ t1: '2017-10-01 14:10',
+ t2: '联系客户',
+ t3: '进行中',
+ t4: '取货员 ID1234',
+ t5: '5mins',
+ },
+ {
+ t1: '2017-10-01 14:10',
+ t2: '取货员出发',
+ t3: '成功',
+ t4: '取货员 ID1234',
+ t5: '5mins',
+ },
+ {
+ t1: '2017-10-01 14:10',
+ t2: '取货员接单',
+ t3: '成功',
+ t4: '系统',
+ t5: '5mins',
+ },
+ {
+ t1: '2017-10-01 14:10',
+ t2: '申请审批通过',
+ t3: '成功',
+ t4: '用户',
+ t5: '1h',
+ },
+];
diff --git a/src/views/demo/page/desc/high/index.vue b/src/views/demo/page/desc/high/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..97c4d6c5ae092b7de73cd82ee3d16ae1798c342c
--- /dev/null
+++ b/src/views/demo/page/desc/high/index.vue
@@ -0,0 +1,117 @@
+
+
+
+
+ 操作一
+ 操作二
+ 主操作
+
+
+
+
+
+
+
+
+ 曲丽丽
+ XX 服务
+ 2017-01-10
+ 12421
+ 2017-07-07 ~ 2017-08-08
+ 请于两个工作日内确认
+
+
+
+
+
+
+
+ Vben
2016-12-12 12:32
+
+
+ Chad
+
+
+
+
+
+
+
+
+ 付小小
+ XX 32943898021309809423
+ 3321944288191034921
+ 18112345678
+
+ 曲丽丽 18100000000 浙江省杭州市西湖区黄姑山路工专路交叉路口
+
+
+
+
+ 111
+ 2017-08-08
+ 725
+ 2017-08-08
+
+
+ 信息组
+
+
+ 林东东
+ 1234567
+ XX公司 - YY部
+ 2017-08-08
+
+ 这段描述很长很长很长很长很长很长很长很长很长很长很长很长很长很长...
+
+
+
+
+
+ Citrullus lanatus (Thunb.) Matsum. et
+ Nakai一年生蔓生藤本;茎、枝粗壮,具明显的棱。卷须较粗..
+
+
+
+
+ 付小小
+ 1234568
+
+
+
+
+
+
+
+
+
+
+
+