Skip to content

Commit 5637f54

Browse files
timi137137timi137137
authored
feat: replace detail page code with t-descriptions (#707)
* feat: 使用描述组件对详情页代码升级 * feat: 使用描述组件对个人中心代码升级 * chore: update version
1 parent 5616edb commit 5637f54

5 files changed

Lines changed: 48 additions & 134 deletions

File tree

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@tencent/tdesign-vue-next-starter",
3-
"version": "0.9.0",
3+
"version": "0.10.0",
44
"type": "module",
55
"scripts": {
66
"dev:mock": "vite --open --mode mock",

‎src/pages/detail/advanced/index.vue‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<template>
22
<div class="detail-advanced">
3-
<t-card :title="$t('pages.detailCard.baseInfo.title')" :bordered="false">
4-
<div class="info-block">
5-
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
6-
<h1>{{ item.name }}</h1>
3+
<t-card :bordered="false">
4+
<t-descriptions :title="$t('pages.detailCard.baseInfo.title')">
5+
<t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
76
<span
87
:class="{
98
['inProgress']: item.type && item.type.value === 'inProgress',
@@ -13,8 +12,8 @@
1312
<i v-if="item.type && item.type.key === 'contractStatus'" />
1413
{{ item.value }}
1514
</span>
16-
</div>
17-
</div>
15+
</t-descriptions-item>
16+
</t-descriptions>
1817
</t-card>
1918

2019
<!-- 发票进度 -->
@@ -113,18 +112,19 @@
113112
<t-dialog v-model:visible="visible" :header="$t('pages.detailCard.baseInfo.title')" @confirm="onConfirm">
114113
<template #body>
115114
<div class="dialog-info-block">
116-
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
117-
<h1>{{ item.name }}</h1>
118-
<span
119-
:class="{
120-
['inProgress']: item.type && item.type.value === 'inProgress',
121-
['pdf']: item.type && item.type.value === 'pdf',
122-
}"
123-
>
124-
<i v-if="item.type && item.type.key === 'contractStatus'" />
125-
{{ item.value }}
126-
</span>
127-
</div>
115+
<t-descriptions :column="1">
116+
<t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
117+
<span
118+
:class="{
119+
['inProgress']: item.type && item.type.value === 'inProgress',
120+
['pdf']: item.type && item.type.value === 'pdf',
121+
}"
122+
>
123+
<i v-if="item.type && item.type.key === 'contractStatus'" />
124+
{{ item.value }}
125+
</span>
126+
</t-descriptions-item>
127+
</t-descriptions>
128128
</div>
129129
</template>
130130
</t-dialog>

‎src/pages/detail/base/index.less‎

Lines changed: 15 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,112 +1,28 @@
1-
.detail-base {
2-
:deep(.t-card) {
3-
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
4-
}
5-
6-
:deep(.t-card__header) {
7-
padding: 0;
8-
margin-bottom: var(--td-comp-margin-m);
9-
}
10-
11-
:deep(.t-card__body) {
12-
padding: 0;
13-
}
14-
15-
:deep(.t-card__title) {
16-
font: var(--td-font-title-large);
17-
font-weight: 400;
18-
}
19-
20-
&-info-steps {
21-
padding-top: var(--td-comp-margin-xl);
22-
}
23-
}
24-
25-
.info-block {
26-
column-count: 2;
27-
28-
.info-item {
29-
padding-top: var(--td-comp-margin-xxl);
30-
display: flex;
31-
color: var(--td-text-color-primary);
32-
33-
h1 {
34-
width: 160px;
35-
font: var(--td-font-body-medium);
36-
color: var(--td-text-color-secondary);
37-
font-weight: normal;
38-
text-align: left;
39-
40-
@media (max-width: @screen-sm-max) {
41-
width: 80px;
42-
}
43-
44-
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
45-
width: 120px;
46-
}
47-
}
48-
1+
.t-descriptions {
492
span {
50-
overflow: hidden;
51-
white-space: nowrap;
52-
text-overflow: ellipsis;
53-
margin-left: var(--td-comp-margin-xxl);
3+
overflow: hidden;
4+
white-space: nowrap;
5+
text-overflow: ellipsis;
6+
margin-left: var(--td-comp-margin-xxl);
547
}
558

569
i {
57-
display: inline-block;
58-
width: 8px;
59-
height: 8px;
60-
border-radius: var(--td-radius-circle);
61-
background: var(--td-success-color);
10+
display: inline-block;
11+
width: 8px;
12+
height: 8px;
13+
border-radius: var(--td-radius-circle);
14+
background: var(--td-success-color);
6215
}
6316

6417
.inProgress {
65-
color: var(--td-success-color);
18+
color: var(--td-success-color);
6619
}
6720

6821
.pdf {
69-
color: var(--td-brand-color);
70-
71-
&:hover {
72-
cursor: pointer;
73-
}
74-
}
75-
}
76-
}
77-
78-
.dialog-info-block {
79-
.info-item {
80-
padding: 12px 0;
81-
display: flex;
82-
83-
h1 {
84-
width: 84px;
85-
font-family: var(--td-font-family);
86-
font-size: 14px;
87-
color: var(--td-text-color-secondary);
88-
text-align: left;
89-
line-height: 22px;
90-
}
91-
92-
span {
93-
margin-left: var(--td-comp-margin-xxl);
94-
}
95-
96-
i {
97-
display: inline-block;
98-
width: 8px;
99-
height: 8px;
100-
border-radius: var(--td-radius-circle);
101-
background: var(--td-success-color);
102-
}
103-
104-
.green {
105-
color: var(--td-success-color);
106-
}
22+
color: var(--td-brand-color);
10723

108-
.blue {
109-
color: var(--td-brand-color);
24+
&:hover {
25+
cursor: pointer;
26+
}
11027
}
111-
}
11228
}

‎src/pages/detail/base/index.vue‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<template>
22
<div class="detail-base">
3-
<t-card :title="$t('pages.detailBase.baseInfo.title')" :bordered="false">
4-
<div class="info-block">
5-
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
6-
<h1>{{ item.name }}</h1>
3+
<t-card :bordered="false">
4+
<t-descriptions :title="$t('pages.detailBase.baseInfo.title')">
5+
<t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
76
<span
87
:class="{
98
['inProgress']: item.type && item.type.value === 'inProgress',
@@ -13,8 +12,8 @@
1312
<i v-if="item.type && item.type.key === 'contractStatus'" />
1413
{{ item.value }}
1514
</span>
16-
</div>
17-
</div>
15+
</t-descriptions-item>
16+
</t-descriptions>
1817
</t-card>
1918

2019
<t-card :title="$t('pages.detailBase.changelog.title')" class="container-base-margin-top" :bordered="false">

‎src/pages/user/index.vue‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,11 @@
1515
<t-icon name="ellipsis" />
1616
</t-button>
1717
</template>
18-
<t-row class="content" justify="space-between">
19-
<t-col v-for="(item, index) in USER_INFO_LIST" :key="index" class="contract" :span="item.span ?? 3">
20-
<div class="contract-title">
21-
{{ $t(item.title) }}
22-
</div>
23-
<div class="contract-detail">
24-
{{ item.content }}
25-
</div>
26-
</t-col>
27-
</t-row>
18+
<t-descriptions :column="4" item-layout="vertical">
19+
<t-descriptions-item v-for="(item, index) in USER_INFO_LIST" :key="index" :label="$t(item.title)">
20+
{{ item.content }}
21+
</t-descriptions-item>
22+
</t-descriptions>
2823
</t-card>
2924

3025
<t-card class="content-container" :bordered="false">
@@ -185,4 +180,8 @@ watch(
185180

186181
<style lang="less" scoped>
187182
@import './index.less';
183+
184+
.t-descriptions {
185+
margin-top: 24px;
186+
}
188187
</style>

0 commit comments

Comments
 (0)