diff --git a/src/assets/assets-product-1.svg b/src/assets/assets-product-1.svg index 29e97f0..07c105e 100644 --- a/src/assets/assets-product-1.svg +++ b/src/assets/assets-product-1.svg @@ -1,5 +1,7 @@ - - - + + + \ No newline at end of file diff --git a/src/assets/assets-product-2.svg b/src/assets/assets-product-2.svg index 827c8bf..f6a13ac 100644 --- a/src/assets/assets-product-2.svg +++ b/src/assets/assets-product-2.svg @@ -1,5 +1,7 @@ - - - + + + \ No newline at end of file diff --git a/src/assets/assets-product-3.svg b/src/assets/assets-product-3.svg index a3d461b..96f8c0e 100644 --- a/src/assets/assets-product-3.svg +++ b/src/assets/assets-product-3.svg @@ -1,5 +1,7 @@ - - - + + + \ No newline at end of file diff --git a/src/assets/assets-product-4.svg b/src/assets/assets-product-4.svg index 7ac1abc..6005e4c 100644 --- a/src/assets/assets-product-4.svg +++ b/src/assets/assets-product-4.svg @@ -1,5 +1,7 @@ - - - + + + \ No newline at end of file diff --git a/src/components/product-card/index.vue b/src/components/product-card/index.vue index 755734e..cb3c21d 100644 --- a/src/components/product-card/index.vue +++ b/src/components/product-card/index.vue @@ -103,22 +103,19 @@ const handleClickDelete = (product: CardProductType) => { min-height: 140px; &--name { - margin-bottom: 8px; - font-size: 16px; - font-weight: 400; + margin-bottom: var(--td-comp-margin-s); + font: var(--td-font-title-medium); color: var(--td-text-color-primary); } &--desc { color: var(--td-text-color-secondary); - font-size: 12px; - line-height: 20px; + font: var(--td-font-body-small); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - height: 40px; } } } diff --git a/src/components/result/index.vue b/src/components/result/index.vue index 91e1da2..4234f60 100644 --- a/src/components/result/index.vue +++ b/src/components/result/index.vue @@ -74,7 +74,6 @@ const dynamicComponent = computed(() => { flex-direction: column; align-items: center; justify-content: center; - padding: 24px; } &-bg-img { @@ -84,14 +83,13 @@ const dynamicComponent = computed(() => { &-title { font-style: normal; - margin-top: 8px; + margin-top: var(--td-comp-margin-l); color: var(--td-text-color-primary); font: var(--td-font-title-large); - font-weight: 500; } &-tip { - margin: 8px 0 32px; + margin: var(--td-comp-margin-s) 0 var(--td-comp-margin-xxxl); font: var(--td-font-body-medium); color: var(--td-text-color-secondary); } diff --git a/src/pages/dashboard/detail/index.vue b/src/pages/dashboard/detail/index.vue index 27b3606..666e94b 100644 --- a/src/pages/dashboard/detail/index.vue +++ b/src/pages/dashboard/detail/index.vue @@ -25,11 +25,11 @@ :default-value="LAST_7_DAYS" theme="primary" mode="date" - style="width: 240px" + style="width: 248px" @change="onMaterialChange" /> -
+
@@ -48,12 +48,12 @@ :default-value="LAST_7_DAYS" theme="primary" mode="date" - style="display: inline-block; margin-right: 8px; width: 240px" + style="display: inline-block; margin-right: var(--td-comp-margin-s); width: 248px" @change="onSatisfyChange" /> 导出数据 -
+
diff --git a/src/pages/detail/advanced/components/Product.vue b/src/pages/detail/advanced/components/Product.vue index 9df2816..d7128c9 100644 --- a/src/pages/detail/advanced/components/Product.vue +++ b/src/pages/detail/advanced/components/Product.vue @@ -8,13 +8,13 @@ {{ data.subtitle }}
- + {{ data.size }} - + {{ data.cpu }} - + {{ data.memory }}
@@ -54,50 +54,43 @@ export default defineComponent({ diff --git a/src/pages/detail/advanced/constants.ts b/src/pages/detail/advanced/constants.ts index 01b832a..c8bb0fb 100644 --- a/src/pages/detail/advanced/constants.ts +++ b/src/pages/detail/advanced/constants.ts @@ -79,7 +79,7 @@ export const BASE_INFO_DATA = [ export const TABLE_COLUMNS_DATA = [ { - width: 300, + width: 280, ellipsis: true, colKey: 'index', title: '申请号', @@ -99,14 +99,14 @@ export const TABLE_COLUMNS_DATA = [ title: '产品编号', }, { - width: 200, + width: 160, ellipsis: true, colKey: 'purchaseNum', title: '采购数量', sorter: (a, b) => a.purchaseNum - b.purchaseNum, }, { - width: 200, + width: 160, ellipsis: true, colKey: 'adminName', title: '申请部门', @@ -131,7 +131,7 @@ export const TABLE_COLUMNS_DATA = [ export const PRODUCT_LIST = [ { name: 'MacBook Pro 2021', - subTitle: 'MacBook Pro 2021', + subtitle: '苹果公司（Apple Inc. ）', size: '13.3 英寸', cpu: 'Apple M1', memory: 'RAM 16GB', @@ -141,7 +141,7 @@ export const PRODUCT_LIST = [ }, { name: 'Surface Laptop Go', - subTitle: '微软（Microsoft Corporation）', + subtitle: '微软（Microsoft Corporation）', size: '12.4 英寸', cpu: 'Core i7', memory: 'RAM 16GB', diff --git a/src/pages/detail/advanced/index.less b/src/pages/detail/advanced/index.less index 4cf9e92..0a6714d 100644 --- a/src/pages/detail/advanced/index.less +++ b/src/pages/detail/advanced/index.less @@ -2,55 +2,72 @@ .detail-advanced { :deep(.t-card) { - padding: 8px; + 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-size: 20px; - font-weight: 500; + font: var(--td-font-title-large); + font-weight: 400; } .advanced-card { margin-top: 0 !important; .card-title-default { - margin-bottom: 12px; + margin-bottom: var(--td-comp-margin-m); } } } +.container-base-margin-top { + :deep(.t-card__body) { + margin-top: var(--td-comp-margin-xxxl); + } + + :deep(.t-text-ellipsis) { + width: auto; + } +} + .product-block-container { .t-col-xl-4 + .t-col-xl-4 { @media (max-width: @screen-lg-max) { .operator-gap { - margin: 16px 0 0 0; + margin: var(--td-comp-margin-l) 0 0 0; } } } .product-add { width: 100%; - height: 256px; + height: 240px; display: flex; align-items: center; justify-items: center; - padding: 20px 10px 24px 20px; border: dashed 1px var(--td-component-border); - border-radius: 3px; + border-radius: var(--td-radius-medium); .product-sub-icon { - background: var(--td-brand-color-1); + background: var(--td-brand-color-focus); color: var(--td-brand-color); - font-size: 33px; - padding: 8px; + font-size: var(--td-comp-size-xxxl); + padding: calc(var(--td-comp-size-xxxl) - var(--td-comp-size-xl)); border-radius: 100%; } .product-sub { - font-size: 14px; + font: var(--td-font-body-medium); color: var(--td-text-color-secondary); margin: 0 auto; text-align: center; - line-height: 22px; display: flex; flex-direction: column; align-items: center; @@ -58,7 +75,7 @@ svg { rect { - fill: var(--td-brand-color-1); + fill: var(--td-brand-color-light); } path { @@ -68,7 +85,7 @@ } span { - padding-top: 12px; + padding-top: var(--td-comp-margin-xxl); } } } diff --git a/src/pages/detail/advanced/index.vue b/src/pages/detail/advanced/index.vue index 1e862c1..806a2ee 100644 --- a/src/pages/detail/advanced/index.vue +++ b/src/pages/detail/advanced/index.vue @@ -59,6 +59,7 @@ :data="data" :pagination="pagination" :hover="true" + :stripe="true" row-key="index" size="large" @sort-change="sortChange" @@ -67,14 +68,21 @@ diff --git a/src/pages/detail/base/index.less b/src/pages/detail/base/index.less index 3c302f4..c0524f1 100644 --- a/src/pages/detail/base/index.less +++ b/src/pages/detail/base/index.less @@ -1,15 +1,24 @@ .detail-base { :deep(.t-card) { - padding: 8px; + 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-size: 20px; - font-weight: 500; + font: var(--td-font-title-large); + font-weight: 400; } &-info-steps { - padding-top: 12px; + padding-top: var(--td-comp-margin-xl); } } @@ -17,19 +26,19 @@ column-count: 2; .info-item { - padding: 12px 0; + padding-top: var(--td-comp-margin-xxl); display: flex; color: var(--td-text-color-primary); h1 { - width: 200px; + 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: 100px; + width: 80px; } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { @@ -41,7 +50,7 @@ overflow: hidden; white-space: nowrap; text-overflow: ellipsis; - margin-left: 24px; + margin-left: var(--td-comp-margin-xxl); } i { @@ -49,11 +58,11 @@ width: 8px; height: 8px; border-radius: var(--td-radius-circle); - background: var(--td-success-color-5); + background: var(--td-success-color); } .inProgress { - color: var(--td-success-color-5); + color: var(--td-success-color); } .pdf { @@ -81,7 +90,7 @@ } span { - margin-left: 24px; + margin-left: var(--td-comp-margin-xxl); } i { @@ -89,11 +98,11 @@ width: 8px; height: 8px; border-radius: var(--td-radius-circle); - background: var(--td-success-color-5); + background: var(--td-success-color); } .green { - color: var(--td-success-color-5); + color: var(--td-success-color); } .blue { diff --git a/src/pages/detail/deploy/constants.ts b/src/pages/detail/deploy/constants.ts index 58c30d0..7dd3a1f 100644 --- a/src/pages/detail/deploy/constants.ts +++ b/src/pages/detail/deploy/constants.ts @@ -83,20 +83,20 @@ export const BASE_INFO_DATA = [ export const TABLE_COLUMNS = [ { - width: '448', + width: '280', ellipsis: true, colKey: 'name', title: '项目名称', sorter: (a, b) => a.name.substr(10) - b.name.substr(10), }, { - width: '448', + width: '280', ellipsis: true, colKey: 'adminName', title: '管理员', }, { - width: '448', + width: '280', className: 'test', ellipsis: true, colKey: 'updateTime', diff --git a/src/pages/detail/deploy/index.vue b/src/pages/detail/deploy/index.vue index 9a31118..6c5de62 100644 --- a/src/pages/detail/deploy/index.vue +++ b/src/pages/detail/deploy/index.vue @@ -28,6 +28,7 @@ :data="data" :pagination="pagination" :hover="true" + :stripe="true" row-key="index" @sort-change="sortChange" @change="rehandleChange" @@ -204,12 +205,25 @@ const deleteClickOp = (e) => { .detail-deploy { :deep(.t-card) { - padding: 8px; + padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); + } + + :deep(.t-card__header) { + padding: 0; + } + + :deep(.t-card__body) { + padding: 0; + margin-top: var(--td-comp-margin-xxl); } :deep(.t-card__title) { - font-size: 20px; - font-weight: 500; + font: var(--td-font-title-large); + font-weight: 400; + } + + :deep(.t-text-ellipsis) { + width: auto; } } diff --git a/src/pages/detail/secondary/index.less b/src/pages/detail/secondary/index.less index 9d8a4c7..87f1b08 100644 --- a/src/pages/detail/secondary/index.less +++ b/src/pages/detail/secondary/index.less @@ -1,7 +1,7 @@ .secondary-notification { background-color: var(--td-bg-color-container); - border-radius: var(--td-radius-default); - padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl); + border-radius: var(--td-radius-medium); + padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); .t-tabs__content { padding-top: 0; @@ -13,7 +13,8 @@ .t-list-item { cursor: pointer; - padding: 13px 24px 13px 0; + padding: var(--td-comp-paddingTB-l) 0; + transition: .2s linear; &:hover { background-color: var(--td-bg-color-container-hover); @@ -33,6 +34,10 @@ } } + :deep(.t-tag) { + margin-right: var(--td-comp-margin-l); + } + .t-tag.t-size-s { margin-right: var(--td-comp-margin-s); margin-left: 0; @@ -40,25 +45,25 @@ } .content { - font-family: PingFangSC-Medium; - font-size: 14px; + font: var(--td-font-body-medium); color: var(--td-text-color-placeholder); text-align: left; - line-height: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .unread { - color: var(--td-brand-color); + color: var(--td-text-color-primary); } .msg-action { display: none; + margin-right: var(--td-comp-margin-xxl); + transition: .2s linear; .set-read-icon { - margin-right: 24px; + margin-right: var(--td-comp-margin-l); } } diff --git a/src/pages/detail/secondary/index.vue b/src/pages/detail/secondary/index.vue index f0f6cc4..87dd913 100644 --- a/src/pages/detail/secondary/index.vue +++ b/src/pages/detail/secondary/index.vue @@ -6,7 +6,7 @@

- + {{ item.type }} {{ item.content }} diff --git a/src/pages/form/base/index.less b/src/pages/form/base/index.less index 05f3a54..ba71225 100644 --- a/src/pages/form/base/index.less +++ b/src/pages/form/base/index.less @@ -3,13 +3,14 @@ align-items: center; justify-content: center; background-color: var(--td-bg-color-container); - padding: 0 32px 134px; + border-radius: var(--td-radius-medium) var(--td-radius-medium) 0 0; + padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl) 80px var(--td-comp-paddingLR-xxl); @media (max-width: @screen-sm-max) { - padding: 0 32px 67px; + padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl) 80px var(--td-comp-paddingLR-xl); .form-basic-container-title { - margin: 32px 0 32px; + margin: 0 0 var(--td-comp-margin-xxxl) 0; } } @@ -17,10 +18,14 @@ width: 676px; .form-basic-container-title { - font-size: 20px; - line-height: 24px; + font: var(--td-font-title-large); + font-weight: 400; color: var(--td-text-color-primary); - margin: 64px 0 32px; + margin: var(--td-comp-margin-xxl) 0 var(--td-comp-margin-xl) 0; + } + + .form-title-gap { + margin: calc(var(--td-comp-margin-xxl) * 2) 0 var(--td-comp-margin-xl) 0; } } } @@ -30,11 +35,12 @@ display: flex; align-items: center; justify-content: center; - padding-top: 30px; - padding-bottom: 28px; - background-color: var(--td-bg-color-component); - border-bottom-left-radius: 3px; - border-bottom-right-radius: 3px; + padding-top: var(--td-comp-paddingLR-xl); + padding-bottom: var(--td-comp-paddingLR-xl); + background-color: var(--td-bg-color-secondarycontainer); + border-bottom-left-radius: var(--td-radius-medium); + border-bottom-right-radius: var(--td-radius-medium); + border-top: 1px solid var(--td-component-stroke); .form-submit-sub { width: 676px; diff --git a/src/pages/form/base/index.vue b/src/pages/form/base/index.vue index ceddbb8..43ea727 100644 --- a/src/pages/form/base/index.vue +++ b/src/pages/form/base/index.vue @@ -15,7 +15,7 @@ - + @@ -115,7 +115,7 @@ - +

- 提交 + 确认提交 取消
diff --git a/src/pages/form/step/index.less b/src/pages/form/step/index.less index 36cd6b8..93b54e4 100644 --- a/src/pages/form/step/index.less +++ b/src/pages/form/step/index.less @@ -1,35 +1,21 @@ .form-step-container { background-color: var(--td-bg-color-container); + padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); + border-radius: var(--td-radius-medium); .t-card { - padding: 8px; + :deep(.t-card__body) { + padding: 0; + } } } .rule-tips { - margin: 8px 24px 0; + margin-top: var(--td-comp-margin-xxxl); } -.step-container { - padding: 8px 24px 0; -} .step-form { - padding: 24px; + margin-top: var(--td-comp-margin-xxxl); } -.step-form-4 { - padding: 66px 0 90px 0; - text-align: center; - > .t-icon { - margin-bottom: 16px; - } - > .text { - font-size: 20px; - font-weight: 500; - margin-bottom: 8px; - } - > .button-group { - margin-top: 32px; - } -} diff --git a/src/pages/form/step/index.vue b/src/pages/form/step/index.vue index e608054..8c97a8c 100644 --- a/src/pages/form/step/index.vue +++ b/src/pages/form/step/index.vue @@ -3,11 +3,11 @@
- - - - - + + + + + diff --git a/src/pages/list/base/constants.ts b/src/pages/list/base/constants.ts index 9b30626..f156271 100644 --- a/src/pages/list/base/constants.ts +++ b/src/pages/list/base/constants.ts @@ -5,39 +5,39 @@ export const COLUMNS: PrimaryTableCol[] = [ { title: '合同名称', align: 'left', - width: 300, + width: 320, colKey: 'name', fixed: 'left', }, - { title: '合同状态', colKey: 'status', width: 200 }, + { title: '合同状态', colKey: 'status', width: 160 }, { title: '合同编号', - width: 200, + width: 160, ellipsis: true, colKey: 'no', }, { title: '合同类型', - width: 200, + width: 160, ellipsis: true, colKey: 'contractType', }, { title: '合同收付类型', - width: 200, + width: 160, ellipsis: true, colKey: 'paymentType', }, { title: '合同金额 (元)', - width: 200, + width: 160, ellipsis: true, colKey: 'amount', }, { align: 'left', fixed: 'right', - width: 200, + width: 160, colKey: 'op', title: '操作', }, diff --git a/src/pages/list/base/index.vue b/src/pages/list/base/index.vue index 9446c00..e028596 100644 --- a/src/pages/list/base/index.vue +++ b/src/pages/list/base/index.vue @@ -10,7 +10,7 @@
@@ -193,17 +193,26 @@ const headerAffixedTop = computed( .trend-container { display: flex; align-items: center; - margin-left: 8px; + margin-left: var(--td-comp-margin-s); + } +} + +.list-card-container { + padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); + + :deep(.t-card__body) { + padding: 0; } } .left-operation-container { - padding: 6px 0; - margin-bottom: 16px; + display: flex; + align-items: center; + margin-bottom: var(--td-comp-margin-xxl); .selected-count { display: inline-block; - margin-left: 8px; + margin-left: var(--td-comp-margin-l); color: var(--td-text-color-secondary); } } diff --git a/src/pages/list/card/index.vue b/src/pages/list/card/index.vue index 5d921b6..71bf036 100644 --- a/src/pages/list/card/index.vue +++ b/src/pages/list/card/index.vue @@ -5,7 +5,7 @@
@@ -15,7 +15,7 @@ @@ -22,24 +22,21 @@ export default { align-items: center; height: 75vh; &-icon { - font-size: 64px; + font-size: var(--td-comp-size-xxxxl); color: var(--td-text-color-secondary); } &-title { - margin-top: 16px; - font-size: 20px; + margin-top: var(--td-comp-margin-xxl); + font: var(--td-font-title-large); color: var(--td-text-color-primary); text-align: center; - line-height: 22px; - font-weight: 500; } &-describe { - margin: 8px 0 32px; - font-size: 14px; + margin: var(--td-comp-margin-s) 0 var(--td-comp-margin-xxxl); + font: var(--td-font-body-medium); color: var(--td-text-color-secondary); - line-height: 22px; } } diff --git a/src/pages/result/maintenance/index.vue b/src/pages/result/maintenance/index.vue index d9befbf..99a801e 100644 --- a/src/pages/result/maintenance/index.vue +++ b/src/pages/result/maintenance/index.vue @@ -1,6 +1,6 @@ diff --git a/src/pages/result/success/index.vue b/src/pages/result/success/index.vue index c209dd0..238dd21 100644 --- a/src/pages/result/success/index.vue +++ b/src/pages/result/success/index.vue @@ -4,8 +4,8 @@
项目已创建成功
可以联系负责人分发应用
- 返回首页 查看进度 + 返回首页
@@ -23,24 +23,21 @@ export default { height: 75vh; &-icon { - font-size: 64px; + font-size: var(--td-comp-size-xxxxl); color: var(--td-success-color); } &-title { - margin-top: 16px; - font-size: 20px; + margin-top: var(--td-comp-margin-xxl); + font: var(--td-font-title-large); color: var(--td-text-color-primary); text-align: center; - line-height: 22px; - font-weight: 500; } &-describe { - margin: 8px 0 32px; - font-size: 14px; - color: var(--td-text-color-primary); - line-height: 22px; + margin: var(--td-comp-margin-s) 0 var(--td-comp-margin-xxxl); + font: var(--td-font-body-medium); + color: var(--td-text-color-secondary); } } diff --git a/src/pages/user/index.less b/src/pages/user/index.less index 3be9ed5..dc7d558 100644 --- a/src/pages/user/index.less +++ b/src/pages/user/index.less @@ -1,50 +1,53 @@ :deep(.t-card__title) { - font-size: 20px; - font-weight: 500; + font: var(--td-font-title-large); + font-weight: 400; } .user-left-greeting { - padding: 28px 32px; - line-height: 28px; - font-size: 20px; + padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); + font: var(--td-font-title-large); background: var(--td-bg-color-container); color: var(--td-text-color-primary); text-align: left; - border-radius: var(--td-radius-default); + border-radius: var(--td-radius-medium); display: flex; justify-content: space-between; align-items: center; .regular { - margin-right: 15px; - font-size: 14px; + margin-left: var(--td-comp-margin-xl); + font: var(--td-font-body-medium); } .logo { - width: 180px; + width: 168px; } } .user-info-list { - margin-top: 16px; + margin-top: var(--td-comp-margin-l); + padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); .content { width: 90%; } + :deep(.t-card__header) { + padding: 0; + } + + :deep(.t-card__body) { + padding: 0; + } + .contract { - width: 340px; - height: 88px; - border-radius: var(--td-radius-default); - margin: 8px 0; &-title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - line-height: 24px; - margin: 20px 0 6px; - font-size: 14px; + margin: var(--td-comp-margin-xxxl) 0 var(--td-comp-margin-l); + font: var(--td-font-body-medium); color: var(--td-text-color-placeholder); } @@ -52,9 +55,8 @@ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; - line-height: 40px; - font-size: 14px; - color: var(--td-text-color-secondary); + font: var(--td-font-body-medium); + color: var(--td-text-color-primary); } } @@ -64,23 +66,25 @@ } .user-intro { - padding: 32px 24px; + padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); background: var(--td-brand-color); - border-radius: var(--td-radius-default); + border-radius: var(--td-radius-medium); color: var(--td-text-color-primary); + :deep(.t-card__body) { + padding: 0; + } + .name { - line-height: 37px; - font-size: 20px; - margin-top: 36px; - color: #fff; + font: var(--td-font-title-large); + margin-top: var(--td-comp-margin-xxxl); + color: var(--td-text-color-anti); } .position { - line-height: 24px; - font-size: 14px; - margin-top: 8px; - color: #fff; + font: var(--td-font-body-medium); + margin-top: var(--td-comp-margin-s); + color: var(--td-text-color-anti); } .user-info { @@ -106,41 +110,82 @@ } .product-container { - margin-top: 16px; - border-radius: var(--td-radius-default); + margin-top: var(--td-comp-margin-l); + border-radius: var(--td-radius-medium); + 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; + } .content { width: 100%; - margin: 24px 0 12px; + margin: var(--td-comp-margin-xxxl) 0 0; } .logo { - width: 48px; + width: var(--td-comp-size-xxl); } } .content-container { - margin-top: 16px; + margin-top: var(--td-comp-margin-l); background: var(--td-bg-color-container); - border-radius: var(--td-radius-default); -} + border-radius: var(--td-radius-medium); + padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl); -.user-team { - margin-top: 16px; + :deep(.t-card__header) { + padding: 0; + } + + :deep(.t-card__body) { + padding: 0; + } - .t-list-item { - padding: 15px 0; - - .t-list-item__meta-avatar { - height: 50px; - width: 50px; - margin: 0 24px 0 0; - } - - .t-list-item__meta-description { - display: inline-block; - color: rgb(0 0 0 / 40%); - font-size: 14px; + .card-padding-no { + margin-top: var(--td-comp-margin-xxxl); + :deep(.t-card__body) { + margin-top: var(--td-comp-margin-xxl); + } + } +} + +.user-team { + margin-top: var(--td-comp-margin-l); + 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; + } + + .t-list-item { + margin-top: var(--td-comp-margin-xxl); + padding: 0; + + :deep(.t-list-item__meta-avatar) { + height: var(--td-comp-size-xxl); + width: var(--td-comp-size-xxl); + margin-right: var(--td-comp-margin-xxl); + } + + :deep(.t-list-item__meta-title) { + margin: 0 0 var(--td-comp-margin-xs); + } + + :deep(.t-list-item__meta-description) { + display: inline-block; + color: var(--td-text-color-placeholder); + font: var(--td-font-body-medium); } } } diff --git a/src/pages/user/index.vue b/src/pages/user/index.vue index a54eee0..da01507 100644 --- a/src/pages/user/index.vue +++ b/src/pages/user/index.vue @@ -12,7 +12,7 @@