feat: replace detail page code with t-descriptions (#707)

* feat: 使用描述组件对详情页代码升级

* feat: 使用描述组件对个人中心代码升级

* chore: update version
This commit is contained in:
悠静萝莉 2024-04-02 23:21:20 +08:00 committed by GitHub
parent 5616edbea0
commit 5637f54c34
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 48 additions and 134 deletions

View File

@ -1,6 +1,6 @@
{
"name": "@tencent/tdesign-vue-next-starter",
"version": "0.9.0",
"version": "0.10.0",
"type": "module",
"scripts": {
"dev:mock": "vite --open --mode mock",

View File

@ -1,9 +1,8 @@
<template>
<div class="detail-advanced">
<t-card :title="$t('pages.detailCard.baseInfo.title')" :bordered="false">
<div class="info-block">
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
<h1>{{ item.name }}</h1>
<t-card :bordered="false">
<t-descriptions :title="$t('pages.detailCard.baseInfo.title')">
<t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
<span
:class="{
['inProgress']: item.type && item.type.value === 'inProgress',
@ -13,8 +12,8 @@
<i v-if="item.type && item.type.key === 'contractStatus'" />
{{ item.value }}
</span>
</div>
</div>
</t-descriptions-item>
</t-descriptions>
</t-card>
<!-- 发票进度 -->
@ -113,8 +112,8 @@
<t-dialog v-model:visible="visible" :header="$t('pages.detailCard.baseInfo.title')" @confirm="onConfirm">
<template #body>
<div class="dialog-info-block">
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
<h1>{{ item.name }}</h1>
<t-descriptions :column="1">
<t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
<span
:class="{
['inProgress']: item.type && item.type.value === 'inProgress',
@ -124,7 +123,8 @@
<i v-if="item.type && item.type.key === 'contractStatus'" />
{{ item.value }}
</span>
</div>
</t-descriptions-item>
</t-descriptions>
</div>
</template>
</t-dialog>

View File

@ -1,51 +1,4 @@
.detail-base {
:deep(.t-card) {
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
}
:deep(.t-card__header) {
padding: 0;
margin-bottom: var(--td-comp-margin-m);
}
:deep(.t-card__body) {
padding: 0;
}
:deep(.t-card__title) {
font: var(--td-font-title-large);
font-weight: 400;
}
&-info-steps {
padding-top: var(--td-comp-margin-xl);
}
}
.info-block {
column-count: 2;
.info-item {
padding-top: var(--td-comp-margin-xxl);
display: flex;
color: var(--td-text-color-primary);
h1 {
width: 160px;
font: var(--td-font-body-medium);
color: var(--td-text-color-secondary);
font-weight: normal;
text-align: left;
@media (max-width: @screen-sm-max) {
width: 80px;
}
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
width: 120px;
}
}
.t-descriptions {
span {
overflow: hidden;
white-space: nowrap;
@ -73,40 +26,3 @@
}
}
}
}
.dialog-info-block {
.info-item {
padding: 12px 0;
display: flex;
h1 {
width: 84px;
font-family: var(--td-font-family);
font-size: 14px;
color: var(--td-text-color-secondary);
text-align: left;
line-height: 22px;
}
span {
margin-left: var(--td-comp-margin-xxl);
}
i {
display: inline-block;
width: 8px;
height: 8px;
border-radius: var(--td-radius-circle);
background: var(--td-success-color);
}
.green {
color: var(--td-success-color);
}
.blue {
color: var(--td-brand-color);
}
}
}

View File

@ -1,9 +1,8 @@
<template>
<div class="detail-base">
<t-card :title="$t('pages.detailBase.baseInfo.title')" :bordered="false">
<div class="info-block">
<div v-for="(item, index) in BASE_INFO_DATA" :key="index" class="info-item">
<h1>{{ item.name }}</h1>
<t-card :bordered="false">
<t-descriptions :title="$t('pages.detailBase.baseInfo.title')">
<t-descriptions-item v-for="(item, index) in BASE_INFO_DATA" :key="index" :label="item.name">
<span
:class="{
['inProgress']: item.type && item.type.value === 'inProgress',
@ -13,8 +12,8 @@
<i v-if="item.type && item.type.key === 'contractStatus'" />
{{ item.value }}
</span>
</div>
</div>
</t-descriptions-item>
</t-descriptions>
</t-card>
<t-card :title="$t('pages.detailBase.changelog.title')" class="container-base-margin-top" :bordered="false">

View File

@ -15,16 +15,11 @@
<t-icon name="ellipsis" />
</t-button>
</template>
<t-row class="content" justify="space-between">
<t-col v-for="(item, index) in USER_INFO_LIST" :key="index" class="contract" :span="item.span ?? 3">
<div class="contract-title">
{{ $t(item.title) }}
</div>
<div class="contract-detail">
<t-descriptions :column="4" item-layout="vertical">
<t-descriptions-item v-for="(item, index) in USER_INFO_LIST" :key="index" :label="$t(item.title)">
{{ item.content }}
</div>
</t-col>
</t-row>
</t-descriptions-item>
</t-descriptions>
</t-card>
<t-card class="content-container" :bordered="false">
@ -185,4 +180,8 @@ watch(
<style lang="less" scoped>
@import './index.less';
.t-descriptions {
margin-top: 24px;
}
</style>