attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 首页vchart媒体查询

Browse Source
This commit is contained in:
wang_fan_w 2024-05-26 16:13:45 +08:00
parent fecc1f5be0
commit 6047a22d33
5 changed files with 75 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/style/index.scss
View File

@ -3,6 +3,7 @@
@import "./global-style.scss";
@import "./loading-page.scss";
@import "./card-animation.scss";
@import "./media/media.scss";
* {
margin: 0;
padding: 0;

16
src/style/media/index.scss Normal file
View File

@ -0,0 +1,16 @@
/* 栅格布局 (媒体查询的变量)
* 参考：https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Media_queries
* $xs: >= 0px;
* $sm: >= 576px;
* $md: >= 768px;
* $lg: >= 992px;
* $xl: >= 1200px;
* $xxl: >= 1600px;
*/
$xs: 0px;
$sm: 576px;
$md: 768px;
$lg: 992px;
$xl: 1200px;
$xxl: 1600px;

44
src/style/media/layout.scss Normal file
View File

@ -0,0 +1,44 @@
@import "./index.scss";
// 页面宽度 大于 0px 小于 992px;
@media screen and (min-width: $xs) and (max-width: $lg) {
.sell-histogram {
width: 100%;
height: 400px;
padding-bottom: $padding;
}
.monthly-analysis {
width: 100%;
height: 400px;
padding-bottom: $padding;
}
}
// 页面宽度 大于 992px 小于 1600px;
@media screen and (min-width: $lg) and (max-width: $xxl) {
.sell-histogram {
width: 100%;
height: 400px;
padding-bottom: $padding;
}
.monthly-analysis {
width: 100%;
height: 400px;
padding-bottom: $padding;
}
}
// 页面宽度 大于 1600px;
@media screen and (min-width: $xxl) {
.sell-histogram {
width: calc(100% - 600px - $padding);
height: 400px;
padding-bottom: $padding;
}
.monthly-analysis {
margin-left: $padding;
width: 600px;
height: 400px;
padding-bottom: $padding;
}
}

1
src/style/media/media.scss Normal file
View File

@ -0,0 +1 @@
@import "./layout.scss";

24
src/views/home/components/data-box.vue
View File

@ -27,6 +27,7 @@ import MonthlyAnalysis from "@/views/home/components/monthly-analysis.vue";
margin-top: calc($padding * 2);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.data-title {
font-size: $font-size-body-3;
color: $color-text-1;
@ -36,16 +37,17 @@ import MonthlyAnalysis from "@/views/home/components/monthly-analysis.vue";
color: $color-text-2;
margin-left: $margin-text;
}
.sell-histogram {
width: calc(100% - 600px - $padding);
height: 400px;
padding-bottom: $padding;
}
.monthly-analysis {
margin-left: $padding;
width: 600px;
height: 400px;
padding-bottom: $padding;
}
// .sell-histogram {
// // width: calc(100% - 600px - $padding);
// width: 100%;
// height: 400px;
// padding-bottom: $padding;
// }
// .monthly-analysis {
// margin-left: $padding;
// width: 100%;
// height: 400px;
// padding-bottom: $padding;
// }
}
</style>