mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-22 18:46:36 +08:00
feat: replace detail page code with t-descriptions (#707)
* feat: 使用描述组件对详情页代码升级 * feat: 使用描述组件对个人中心代码升级 * chore: update version
This commit is contained in:
悠静萝莉
GitHub
parent
5616edbea0
commit
5637f54c34
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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,18 +112,19 @@
|
|||
<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>
|
||||
<span
|
||||
:class="{
|
||||
['inProgress']: item.type && item.type.value === 'inProgress',
|
||||
['pdf']: item.type && item.type.value === 'pdf',
|
||||
}"
|
||||
>
|
||||
<i v-if="item.type && item.type.key === 'contractStatus'" />
|
||||
{{ item.value }}
|
||||
</span>
|
||||
</div>
|
||||
<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',
|
||||
['pdf']: item.type && item.type.value === 'pdf',
|
||||
}"
|
||||
>
|
||||
<i v-if="item.type && item.type.key === 'contractStatus'" />
|
||||
{{ item.value }}
|
||||
</span>
|
||||
</t-descriptions-item>
|
||||
</t-descriptions>
|
||||
</div>
|
||||
</template>
|
||||
</t-dialog>
|
||||
|
|
|
|||
|
|
@ -1,112 +1,28 @@
|
|||
.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;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: var(--td-comp-margin-xxl);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
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);
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: var(--td-radius-circle);
|
||||
background: var(--td-success-color);
|
||||
}
|
||||
|
||||
.inProgress {
|
||||
color: var(--td-success-color);
|
||||
color: var(--td-success-color);
|
||||
}
|
||||
|
||||
.pdf {
|
||||
color: var(--td-brand-color);
|
||||
color: var(--td-brand-color);
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
</t-col>
|
||||
</t-row>
|
||||
<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 }}
|
||||
</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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user