mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-09-19 18:24:20 +08:00
fix: dashboard&layout style bug (#403)
* fix: style bug * fix: style bug
This commit is contained in:
WenKang
GitHub
parent
57e1e18c77
commit
11f813351b
|
|
@ -33,7 +33,7 @@
|
|||
<t-icon name="help-circle" />
|
||||
</t-button>
|
||||
</t-tooltip>
|
||||
<t-dropdown :min-column-width="135" trigger="click">
|
||||
<t-dropdown :min-column-width="120" trigger="click">
|
||||
<template #dropdown>
|
||||
<t-dropdown-menu>
|
||||
<t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/user/index')">
|
||||
|
|
@ -165,6 +165,10 @@ const navToHelper = () => {
|
|||
top: 0;
|
||||
z-index: 1001;
|
||||
|
||||
:deep(.t-head-menu__inner) {
|
||||
padding-right: var(--td-comp-margin-xl);
|
||||
}
|
||||
|
||||
&-side {
|
||||
left: 232px;
|
||||
right: 0;
|
||||
|
|
@ -188,14 +192,12 @@ const navToHelper = () => {
|
|||
|
||||
:deep(.t-menu__item) {
|
||||
min-width: unset;
|
||||
padding: 0px 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.operations-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 12px;
|
||||
|
||||
.t-popup__reference {
|
||||
display: flex;
|
||||
|
|
@ -204,29 +206,15 @@ const navToHelper = () => {
|
|||
}
|
||||
|
||||
.t-button {
|
||||
margin: 0 8px;
|
||||
&.header-user-btn {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.t-icon {
|
||||
font-size: 20px;
|
||||
&.general {
|
||||
margin-right: 16px;
|
||||
}
|
||||
margin-left: var(--td-comp-margin-l);
|
||||
}
|
||||
}
|
||||
|
||||
.header-operate-left {
|
||||
display: flex;
|
||||
margin-left: 20px;
|
||||
align-items: normal;
|
||||
line-height: 0;
|
||||
|
||||
.collapsed-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
padding-left: var(--td-comp-margin-xl);
|
||||
}
|
||||
|
||||
.header-logo-container {
|
||||
|
|
@ -253,14 +241,10 @@ const navToHelper = () => {
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--td-text-color-primary);
|
||||
.t-icon {
|
||||
margin-left: 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.t-head-menu__inner) {
|
||||
border-bottom: 1px solid var(--td-border-level-1-color);
|
||||
border-bottom: 1px solid var(--td-component-stroke);
|
||||
}
|
||||
|
||||
.t-menu--light {
|
||||
|
|
@ -275,12 +259,6 @@ const navToHelper = () => {
|
|||
.header-user-account {
|
||||
color: rgba(255, 255, 255, 0.55);
|
||||
}
|
||||
.t-button {
|
||||
--ripple-color: var(--td-gray-color-10) !important;
|
||||
&:hover {
|
||||
background: var(--td-gray-color-12) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.operations-dropdown-container-item {
|
||||
|
|
@ -288,20 +266,14 @@ const navToHelper = () => {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.t-icon {
|
||||
margin-right: 8px;
|
||||
:deep(.t-dropdown__item-text) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:deep(.t-dropdown__item) {
|
||||
.t-dropdown__item__content {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
.t-dropdown__item__content__text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
.t-icon {
|
||||
font-size: var(--td-comp-size-xxxs);
|
||||
margin-right: var(--td-comp-margin-s);
|
||||
}
|
||||
|
||||
:deep(.t-dropdown__item) {
|
||||
|
|
@ -315,3 +287,13 @@ const navToHelper = () => {
|
|||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- eslint-disable-next-line vue-scoped-css/enforce-style-type -->
|
||||
<style lang="less">
|
||||
.operations-dropdown-container-item {
|
||||
.t-dropdown__item-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<t-badge :count="unreadMsg.length" :offset="[12, 8]">
|
||||
<t-badge :count="unreadMsg.length" :offset="[4, 4]">
|
||||
<t-button theme="default" shape="square" variant="text">
|
||||
<t-icon name="mail" />
|
||||
</t-button>
|
||||
|
|
@ -190,15 +190,4 @@ const goDetail = () => {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.t-button {
|
||||
margin: 0 8px;
|
||||
|
||||
.t-icon {
|
||||
font-size: 20px;
|
||||
&.general {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -57,16 +57,10 @@ const changeSearchFocus = (value: boolean) => {
|
|||
display: flex;
|
||||
margin-left: 16px;
|
||||
.hover-active {
|
||||
.t-input__inner {
|
||||
background: var(--td-bg-color-secondarycontainer);
|
||||
}
|
||||
.t-icon {
|
||||
color: var(--td-brand-color) !important;
|
||||
}
|
||||
background: var(--td-bg-color-secondarycontainer);
|
||||
}
|
||||
|
||||
.t-icon {
|
||||
font-size: 20px !important;
|
||||
color: var(--td-text-color-primary) !important;
|
||||
}
|
||||
.header-search {
|
||||
|
|
|
|||
|
|
@ -319,7 +319,7 @@ watchEffect(() => {
|
|||
max-height: 78px;
|
||||
padding: 8px;
|
||||
border-radius: var(--td-radius-default);
|
||||
border: 2px solid #e3e6eb;
|
||||
border: 2px solid var(--td-component-border);
|
||||
> .t-radio-button__label {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -176,15 +176,20 @@ const onCurrencyChange = (checkedValues: string[]) => {
|
|||
|
||||
<style lang="less" scoped>
|
||||
.dashboard-chart-card {
|
||||
padding: 8px;
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
|
||||
:deep(.t-card__header) {
|
||||
padding-bottom: 24px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -155,14 +155,23 @@ const onStokeDataChange = (checkedValues: string[]) => {
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:deep(.t-card__body) {
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
}
|
||||
|
||||
.dashboard-overview-card {
|
||||
:deep(.t-card__header) {
|
||||
padding-bottom: 24px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.t-card__title) {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font: var(--td-font-title-large);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
:deep(.t-card__body) {
|
||||
margin-top: var(--td-comp-margin-xxl);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.overview-panel {
|
||||
|
|
@ -171,30 +180,36 @@ const onStokeDataChange = (checkedValues: string[]) => {
|
|||
|
||||
&.export-panel {
|
||||
border-left: none;
|
||||
margin-left: calc(var(--td-comp-margin-xxxl) + var(--td-comp-margin-xxxl));
|
||||
}
|
||||
}
|
||||
|
||||
.inner-card {
|
||||
padding: 24px 0;
|
||||
margin-top: var(--td-comp-margin-s);
|
||||
margin-bottom: var(--td-comp-margin-xxxxl);
|
||||
|
||||
:deep(.t-card__header) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.t-card__body) {
|
||||
margin-top: var(--td-comp-margin-s);
|
||||
}
|
||||
|
||||
&__content {
|
||||
&-title {
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
font: var(--td-font-headline-medium);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 22px;
|
||||
color: var(--td-text-color-placeholder);
|
||||
margin-top: var(--td-comp-margin-xxl);
|
||||
|
||||
.trend-tag {
|
||||
margin-left: 4px;
|
||||
margin-left: var(--td-comp-margin-s);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<t-col :xs="12" :xl="6">
|
||||
<t-card title="销售订单排名" class="dashboard-rank-card" :bordered="false">
|
||||
<template #actions>
|
||||
<t-radio-group default-value="dateVal">
|
||||
<t-radio-group default-value="dateVal" variant="default-filled">
|
||||
<t-radio-button value="dateVal">本周</t-radio-button>
|
||||
<t-radio-button value="monthVal">近三个月</t-radio-button>
|
||||
</t-radio-group>
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
<t-col :xs="12" :xl="6">
|
||||
<t-card title="销售订单排名" class="dashboard-rank-card" :bordered="false">
|
||||
<template #actions>
|
||||
<t-radio-group default-value="dateVal">
|
||||
<t-radio-group default-value="dateVal" variant="default-filled">
|
||||
<t-radio-button value="dateVal">本周</t-radio-button>
|
||||
<t-radio-button value="monthVal">近三个月</t-radio-button>
|
||||
</t-radio-group>
|
||||
|
|
@ -67,15 +67,20 @@ const getRankClass = (index: number) => {
|
|||
|
||||
<style lang="less" scoped>
|
||||
.dashboard-rank-card {
|
||||
padding: 8px;
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
|
||||
:deep(.t-card__header) {
|
||||
padding-bottom: 24px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.t-card__title) {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font: var(--td-font-title-large);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
:deep(.t-card__body) {
|
||||
padding: 0;
|
||||
margin-top: var(--td-comp-margin-xxl);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,24 +4,23 @@
|
|||
<t-card
|
||||
:title="item.title"
|
||||
:bordered="false"
|
||||
:style="{ height: '168px' }"
|
||||
:class="{ 'dashboard-item': true, 'dashboard-item--main-color': index == 0 }"
|
||||
>
|
||||
<div class="dashboard-item-top">
|
||||
<span :style="{ fontSize: `${resizeTime * 36}px` }">{{ item.number }}</span>
|
||||
<span :style="{ fontSize: `${resizeTime * 28}px` }">{{ item.number }}</span>
|
||||
</div>
|
||||
<div class="dashboard-item-left">
|
||||
<div
|
||||
v-if="index === 0"
|
||||
id="moneyContainer"
|
||||
class="dashboard-chart-container"
|
||||
:style="{ width: `${resizeTime * 120}px`, height: `${resizeTime * 66}px` }"
|
||||
:style="{ width: `${resizeTime * 120}px`, height: '100px', marginTop: '-24px' }"
|
||||
></div>
|
||||
<div
|
||||
v-else-if="index === 1"
|
||||
id="refundContainer"
|
||||
class="dashboard-chart-container"
|
||||
:style="{ width: `${resizeTime * 120}px`, height: `${resizeTime * 42}px` }"
|
||||
:style="{ width: `${resizeTime * 120}px`, height: '56px', marginTop: '-24px' }"
|
||||
></div>
|
||||
<span v-else-if="index === 2" :style="{ marginTop: `-24px` }">
|
||||
<usergroup-icon />
|
||||
|
|
@ -114,11 +113,11 @@ const updateContainer = () => {
|
|||
}
|
||||
moneyChart.resize({
|
||||
width: resizeTime.value * 120,
|
||||
height: resizeTime.value * 66,
|
||||
// height: resizeTime.value * 100,
|
||||
});
|
||||
refundChart.resize({
|
||||
width: resizeTime.value * 120,
|
||||
height: resizeTime.value * 42,
|
||||
// height: resizeTime.value * 56,
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -155,15 +154,19 @@ watch(
|
|||
|
||||
<style lang="less" scoped>
|
||||
.dashboard-item {
|
||||
padding: 8px;
|
||||
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl);
|
||||
|
||||
:deep(.t-card__header) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.t-card__footer) {
|
||||
padding-top: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.t-card__title) {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-text-color-secondary);
|
||||
}
|
||||
|
||||
:deep(.t-card__body) {
|
||||
|
|
@ -172,6 +175,9 @@ watch(
|
|||
justify-content: space-between;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin-top: var(--td-comp-margin-s);
|
||||
margin-bottom: var(--td-comp-margin-xxl);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -186,8 +192,8 @@ watch(
|
|||
> span {
|
||||
display: inline-block;
|
||||
color: var(--td-text-color-primary);
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
font: var(--td-font-headline-medium);
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -199,6 +205,7 @@ watch(
|
|||
|
||||
> .t-icon {
|
||||
cursor: pointer;
|
||||
font-size: var(--td-comp-size-xxxs);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -206,26 +213,25 @@ watch(
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 22px;
|
||||
color: var(--td-text-color-placeholder);
|
||||
}
|
||||
|
||||
&-trend {
|
||||
margin-left: 8px;
|
||||
margin-left: var(--td-comp-margin-s);
|
||||
}
|
||||
|
||||
&-left {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 32px;
|
||||
right: 0;
|
||||
|
||||
> span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: var(--td-brand-color-1);
|
||||
width: var(--td-comp-size-xxxl);
|
||||
height: var(--td-comp-size-xxxl);
|
||||
background: var(--td-brand-color-light);
|
||||
border-radius: 50%;
|
||||
|
||||
.t-icon {
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@ export const SALE_COLUMNS: TdBaseTableProps['columns'] = [
|
|||
align: 'center',
|
||||
colKey: 'index',
|
||||
title: '排名',
|
||||
width: 80,
|
||||
width: 70,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
|
|
@ -138,26 +138,20 @@ export const SALE_COLUMNS: TdBaseTableProps['columns'] = [
|
|||
{
|
||||
align: 'center',
|
||||
colKey: 'growUp',
|
||||
width: 100,
|
||||
width: 70,
|
||||
title: '较上周',
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
colKey: 'count',
|
||||
title: '订单量',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
colKey: 'date',
|
||||
width: 140,
|
||||
title: '合同签订日期',
|
||||
width: 70,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
colKey: 'operation',
|
||||
title: '操作',
|
||||
width: 80,
|
||||
width: 70,
|
||||
fixed: 'right',
|
||||
},
|
||||
];
|
||||
|
|
@ -167,7 +161,7 @@ export const BUY_COLUMNS: TdBaseTableProps['columns'] = [
|
|||
align: 'center',
|
||||
colKey: 'index',
|
||||
title: '排名',
|
||||
width: 80,
|
||||
width: 70,
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
|
|
@ -180,26 +174,20 @@ export const BUY_COLUMNS: TdBaseTableProps['columns'] = [
|
|||
{
|
||||
align: 'center',
|
||||
colKey: 'growUp',
|
||||
width: 100,
|
||||
width: 70,
|
||||
title: '较上周',
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
colKey: 'count',
|
||||
title: '订单量',
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
colKey: 'date',
|
||||
width: 140,
|
||||
title: '合同签订日期',
|
||||
width: 70,
|
||||
},
|
||||
{
|
||||
align: 'center',
|
||||
colKey: 'operation',
|
||||
title: '操作',
|
||||
width: 80,
|
||||
width: 70,
|
||||
fixed: 'right',
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -28,7 +28,4 @@ import OutputOverview from './components/OutputOverview.vue';
|
|||
.row-container:not(:last-child) {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
:deep() .t-card__body {
|
||||
padding-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -169,11 +169,20 @@ const onMaterialChange = (value: string[]) => {
|
|||
|
||||
// 统一增加8px;
|
||||
.dashboard-detail-card {
|
||||
padding: 8px;
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
|
||||
:deep(.t-card__header) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.t-card__title) {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font: var(--td-font-title-large);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
:deep(.t-card__body) {
|
||||
padding: 0;
|
||||
margin-top: var(--td-comp-margin-xxl);
|
||||
}
|
||||
|
||||
:deep(.t-card__actions) {
|
||||
|
|
@ -186,11 +195,10 @@ const onMaterialChange = (value: string[]) => {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
height: 170px;
|
||||
padding: 8px;
|
||||
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
|
||||
|
||||
:deep(.t-card__header) {
|
||||
padding-bottom: 8px;
|
||||
:deep(.t-card__description) {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.t-card__body) {
|
||||
|
|
@ -198,7 +206,7 @@ const onMaterialChange = (value: string[]) => {
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding-top: 0;
|
||||
margin-top: var(--td-comp-margin-s);
|
||||
}
|
||||
|
||||
&.dark {
|
||||
|
|
@ -216,9 +224,10 @@ const onMaterialChange = (value: string[]) => {
|
|||
}
|
||||
|
||||
&__number {
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
font: var(--td-font-headline-large);
|
||||
font-weight: 400;
|
||||
color: var(--td-text-color-primary);
|
||||
margin-bottom: var(--td-comp-margin-xxl);
|
||||
}
|
||||
|
||||
&__text {
|
||||
|
|
@ -226,16 +235,18 @@ const onMaterialChange = (value: string[]) => {
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-text-color-placeholder);
|
||||
text-align: left;
|
||||
line-height: 18px;
|
||||
|
||||
.t-icon {
|
||||
font-size: var(--td-comp-size-xxxs);
|
||||
}
|
||||
&-left {
|
||||
display: flex;
|
||||
|
||||
.icon {
|
||||
margin: 0 8px;
|
||||
margin: 0 var(--td-comp-margin-s);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@
|
|||
}
|
||||
|
||||
&-content-layout {
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
|
||||
}
|
||||
|
||||
&-layout {
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user