From 0f6b31c2d059afad43b3797732d00a5ce4f55809 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 01 Dec 2022 17:35:23 +0800
Subject: [PATCH] 媒体查询
---
src/styles/media/index.scss | 91 +++++++++++++++++++++++++++++++++++++++++++++
src/styles/scssFile.scss | 11 ++++-
src/styles/index.scss | 3 +
3 files changed, 102 insertions(+), 3 deletions(-)
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 4b7dc89..9c7e281 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,4 +2,5 @@
@import "./dc/index.scss";
@import "./icon/index.scss";
@import "./tool/index.scss";
-@import "./element-ui/element-ui.scss";
\ No newline at end of file
+@import "./element-ui/element-ui.scss";
+@import "./media/index.scss";
\ No newline at end of file
diff --git a/src/styles/media/index.scss b/src/styles/media/index.scss
new file mode 100644
index 0000000..a11c7ee
--- /dev/null
+++ b/src/styles/media/index.scss
@@ -0,0 +1,91 @@
+@media screen and (min-width: 1920px) {
+
+ html,
+ body {
+ font-size: 1.44vh;
+
+ #app {
+ width: 100vw;
+ height: 100vh;
+
+ .wrapper {
+ width: 100vw;
+ height: 100vh;
+
+ .main-header {
+ width: 100vw;
+ height: countSizeVh(60, 1080);
+ }
+
+ .main-content {
+
+ .left-container,
+ .right-container {
+ top: countSizeVh(60, 1080);
+ width: countSizeVw(400, 1920);
+ height: calc(100% - countSizeVh(60, 1080));
+
+ .person-box,
+ .case-box,
+ .land-box,
+ .crowd-box {
+ height: countSizeVh(320, 1080);
+ }
+ }
+
+ .bottom-container {
+ left: countSizeVw(400, 1920);
+ width: calc(100% - countSizeVw(400, 1920) * 2);
+ height: countSizeVh(320, 1080);
+ }
+ }
+ }
+ }
+ }
+
+}
+
+@media screen and (min-width: 7296px) {
+
+ html,
+ body {
+ #app {
+ width: 100vw;
+ height: 100vh;
+
+ .wrapper {
+ width: 100vw;
+ height: 100vh;
+
+ .main-header {
+ width: 100vw;
+ height: countSizeVh(135, 2432);
+ }
+
+ .main-content {
+
+ .left-container,
+ .right-container {
+ top: countSizeVh(135, 2432);
+ width: countSizeVw(1520, 7296);
+ height: calc(100% - countSizeVh(135, 2432));
+
+ .person-box,
+ .case-box,
+ .land-box,
+ .crowd-box {
+ height: countSizeVh(720, 2432);
+ }
+ }
+
+ .bottom-container {
+ left: countSizeVw(1520, 7296);
+ width: calc(100% - countSizeVw(1520, 7296) * 2);
+ height: countSizeVh(720, 2432);
+ }
+ }
+ }
+ }
+ }
+
+}
\ No newline at end of file
diff --git a/src/styles/scssFile.scss b/src/styles/scssFile.scss
index 75e52fc..7f9d335 100644
--- a/src/styles/scssFile.scss
+++ b/src/styles/scssFile.scss
@@ -24,6 +24,13 @@
$table-body-tr-2n-color: rgba(8, 56, 185, 0.8);
-@function countSize($size, $vw) {
- @return $size / $vw * 100vh
+
+@function countSizeVw($size, $vw) {
+ @return $size / $vw * 100vw
+}
+
+;
+
+@function countSizeVh($size, $vh) {
+ @return $size / $vh * 100vh
}
\ No newline at end of file
--
Gitblit v1.9.3