Skip to content

Commit

Permalink
fix: style bug (#408)
Browse files Browse the repository at this point in the history 
* fix: style bug

* fix: style bug

* fix: list style bug

* fix: form page style bug

* fix: detail style bug

* fix: result style bug

* fix: user style bug
  • Loading branch information
@Wen1kang
Wen1kang committed Feb 8, 2023
1 parent 77b6927 commit e70bac6
Show file tree
Hide file tree
Showing 31 changed files with 386 additions and 275 deletions.
8 changes: 5 additions & 3 deletions src/assets/assets-product-1.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 5 additions & 3 deletions src/assets/assets-product-2.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 5 additions & 3 deletions src/assets/assets-product-3.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 5 additions & 3 deletions src/assets/assets-product-4.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 3 additions & 6 deletions src/components/product-card/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
Expand Down
6 changes: 2 additions & 4 deletions src/components/result/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,6 @@ const dynamicComponent = computed(() => {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
}
&-bg-img {
Expand All @@ -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);
}
Expand Down
8 changes: 4 additions & 4 deletions src/pages/dashboard/detail/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,11 @@
:default-value="LAST_7_DAYS"
theme="primary"
mode="date"
style="width: 240px"
style="width: 248px"
@change="onMaterialChange"
/>
</template>
<div id="lineContainer" style="width: 100%; height: 410px" />
<div id="lineContainer" style="width: 100%; height: 412px" />
</t-card>
</t-col>
<t-col :xs="12" :xl="3">
Expand All @@ -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"
/>
<t-button class="card-date-button"> 导出数据 </t-button>
</template>
<div id="scatterContainer" style="width: 100%; height: 330px" />
<div id="scatterContainer" style="width: 100%; height: 434px" />
</t-card>
</div>
</template>
Expand Down
75 changes: 44 additions & 31 deletions src/pages/detail/advanced/components/Product.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@
{{ data.subtitle }}
</div>
<div class="operator-title-tags">
<t-tag class="operator-title-tag" theme="success" size="small">
<t-tag class="operator-title-tag" theme="success" size="medium">
{{ data.size }}
</t-tag>
<t-tag class="operator-title-tag" size="small">
<t-tag class="operator-title-tag" size="medium">
{{ data.cpu }}
</t-tag>
<t-tag class="operator-title-tag" size="small">
<t-tag class="operator-title-tag" size="medium">
{{ data.memory }}
</t-tag>
</div>
Expand Down Expand Up @@ -54,50 +54,43 @@ export default defineComponent({
</script>

<style lang="less" scoped>
.operator-gap {
margin-left: 20px;
}
.operator-block {
position: relative;
background-color: var(--td-bg-color-container);
border: 1px solid var(--td-component-border);
border-radius: 3px;
border-radius: var(--td-radius-medium);
.operator-content {
padding: 20px 32px 24px 32px;
height: 256px;
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
height: 240px;
.operator-title-icon {
background: var(--td-brand-color-1);
background: var(--td-brand-color-focus);
color: var(--td-brand-color);
font-size: 56px;
padding: 14px;
font-size: var(--td-comp-size-xxxl);
padding: calc(var(--td-comp-size-xxxl) - var(--td-comp-size-xl));
border-radius: 100%;
}
.operator-title {
margin-bottom: 25px;
margin-bottom: var(--td-comp-margin-xxl);
position: relative;
h1 {
display: inline-block;
font-weight: 500;
font-size: 24px;
font: var(--td-font-title-large);
color: var(--td-text-color-primary);
}
&-subtitle {
display: block;
font-weight: 400;
font-size: 14px;
width: 60%;
font: var(--td-font-body-medium);
color: var(--td-text-color-placeholder);
}
&-tag {
margin-right: 4px;
margin-top: 8px;
margin-right: var(--td-comp-margin-s);
margin-top: var(--td-comp-margin-l);
margin-left: unset;
border: unset;
}
Expand All @@ -110,7 +103,7 @@ export default defineComponent({
svg {
circle {
fill: var(--td-brand-color-2);
fill: var(--td-brand-color-focus);
}
path {
Expand All @@ -121,21 +114,21 @@ export default defineComponent({
.operator-item {
position: relative;
padding-top: 8px;
padding-bottom: 8px;
padding-bottom: var(--td-comp-margin-xxl);
display: flex;
align-items: center;
justify-content: space-between;
&-info {
display: inline-block;
width: 60%;
width: 80%;
text-align: left;
font-size: 14px;
font: var(--td-font-body-medium);
color: var(--td-text-color-placeholder);
}
&-icon {
position: absolute;
bottom: 8px;
right: 0;
font-size: var(--td-comp-size-xxxs);
}
}
}
Expand All @@ -148,14 +141,34 @@ export default defineComponent({
.t-progress--thin {
display: unset;
:deep(.t-progress__info) {
margin-left: 0;
}
}
&-percentage {
position: absolute;
bottom: 15px;
right: 32px;
bottom: var(--td-comp-margin-l);
right: var(--td-comp-paddingLR-xl);
color: var(--td-text-color-placeholder);
}
.operator-progress {
display: unset;
:deep(.t-progress__bar) {
border-radius: 0px 0px var(--td-radius-medium) var(--td-radius-medium);
}
:deep(.t-progress__inner) {
border-radius: 0px 0px 0px var(--td-radius-medium);
}
:deep(.t-progress__info) {
margin-left: 0;
}
}
}
}
</style>
10 changes: 5 additions & 5 deletions src/pages/detail/advanced/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export const BASE_INFO_DATA = [

export const TABLE_COLUMNS_DATA = [
{
width: 300,
width: 280,
ellipsis: true,
colKey: 'index',
title: '申请号',
Expand All @@ -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: '申请部门',
Expand All @@ -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',
Expand All @@ -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',
Expand Down
Loading

0 comments on commit e70bac6

Please sign in to comment.