From 05b0f6104cc5e1ac06c8d1f553bbc3e32f6e6521 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 01 Nov 2024 10:43:02 +0800
Subject: [PATCH] 布局容器样式调整
---
/dev/null | 22 --
src/styles/base/fontStyle.scss | 27 ++
src/styles/base/index.scss | 114 ++++++++++
src/styles/base/heightStyle.scss | 79 +++++++
src/styles/base/widthStyle.scss | 71 ++++++
src/styles/base/flexStyle.scss | 69 ++++++
src/styles/base/marginStyle.scss | 152 +++++++++++++
src/views/survey/components/box/publicContent.vue | 2
src/views/layout/index.vue | 8
src/views/survey/components/box/fireTrend.vue | 13
src/views/survey/components/rightContainer.vue | 25 -
src/styles/base/paddingStyle.scss | 51 ++++
12 files changed, 574 insertions(+), 59 deletions(-)
diff --git a/src/styles/base/container.scss b/src/styles/base/container.scss
deleted file mode 100644
index 280a03b..0000000
--- a/src/styles/base/container.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-* {
- margin: 0;
- padding: 0;
- list-style: none;
-}
-
-html,
-body {
- width: 100%;
- height: 100%;
- overflow: hidden;
-}
-
-#app {
- width: 100%;
- height: 100%;
- overflow: hidden;
-}
-
-.cursor-p {
- cursor: pointer;
-}
\ No newline at end of file
diff --git a/src/styles/base/flexStyle.scss b/src/styles/base/flexStyle.scss
new file mode 100644
index 0000000..7f203c1
--- /dev/null
+++ b/src/styles/base/flexStyle.scss
@@ -0,0 +1,69 @@
+.flex {
+ display: flex;
+}
+
+.flex-1 {
+ flex: 1;
+}
+
+.flex-2 {
+ flex: 2;
+}
+
+.flex-3 {
+ flex: 3;
+}
+
+.flex-4 {
+ flex: 4;
+}
+
+.flex-5 {
+ flex: 5;
+}
+
+.flex-6 {
+ flex: 6;
+}
+
+.flex-8 {
+ flex: 8;
+}
+
+.a-i-c {
+ align-items: center;
+}
+
+.flex_base {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.j-c-s-a {
+ justify-content: space-around;
+}
+
+.j-c-s-b {
+ justify-content: space-between;
+}
+
+.j-c-c {
+ justify-content: center;
+}
+
+.f-d-c {
+ flex-direction: column;
+}
+
+.j-c-f-s {
+ justify-content: flex-start;
+}
+
+.j-c-f-e {
+ justify-content: flex-end;
+}
+
+.flex-wrap {
+ flex-wrap: wrap;
+}
\ No newline at end of file
diff --git a/src/styles/base/fontStyle.scss b/src/styles/base/fontStyle.scss
new file mode 100644
index 0000000..f9e4ba7
--- /dev/null
+++ b/src/styles/base/fontStyle.scss
@@ -0,0 +1,27 @@
+.f-13 {
+ font-size: 13px;
+}
+
+.f-14 {
+ font-size: 14px;
+}
+
+.f-16 {
+ font-size: 16px;
+}
+
+.f-18 {
+ font-size: 18px;
+}
+
+.f-20 {
+ font-size: 20px;
+}
+
+.f-24 {
+ font-size: 24px;
+}
+
+.f-44 {
+ font-size: 44px;
+}
\ No newline at end of file
diff --git a/src/styles/base/heightStyle.scss b/src/styles/base/heightStyle.scss
new file mode 100644
index 0000000..1d74920
--- /dev/null
+++ b/src/styles/base/heightStyle.scss
@@ -0,0 +1,79 @@
+.h0 {
+ height: 0;
+}
+
+.h20 {
+ height: 20%;
+}
+
+.h24 {
+ height: 24%;
+}
+
+.h25 {
+ height: 25%;
+}
+
+.h30 {
+ height: 30%;
+}
+
+.h35 {
+ height: 35%;
+}
+
+.h40 {
+ height: 40%;
+}
+
+.h42 {
+ height: 42%;
+}
+
+.h44 {
+ height: 44%;
+}
+
+.h45 {
+ height: 45%;
+}
+
+.h46 {
+ height: 46%;
+}
+
+.h50 {
+ height: 50%;
+}
+
+.h58 {
+ height: 58%;
+}
+
+.h60 {
+ height: 60%;
+}
+
+.h70 {
+ height: 70%;
+}
+
+.h-60-m-t-16 {
+ height: calc(60% - 16px);
+}
+
+.h100 {
+ height: 100%;
+}
+
+.h-px-36 {
+ height: 36px;
+}
+
+.min-h50 {
+ min-height: 50%;
+}
+
+.min-h100 {
+ min-height: 100%;
+}
\ No newline at end of file
diff --git a/src/styles/base/index.scss b/src/styles/base/index.scss
index 54b25fe..5027faf 100644
--- a/src/styles/base/index.scss
+++ b/src/styles/base/index.scss
@@ -1,2 +1,112 @@
-@use './container.scss'as *;
-@use './dc-base.scss'as *;
\ No newline at end of file
+@use './flexStyle.scss';
+@use './marginStyle.scss';
+@use './paddingStyle.scss';
+@use './widthStyle.scss';
+@use './heightStyle.scss';
+@use './fontStyle.scss';
+@use './dc-base.scss';
+
+.ol-attribution {
+ display: none;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ box-sizing: border-box;
+ scrollbar-color: #BFBFBF rgb(255, 255, 255);
+ // scrollbar-width: thin;
+}
+
+html,
+body,
+#app {
+ width: 100%;
+ height: 100%;
+}
+
+::-webkit-scrollbar {
+ width: 6px;
+ height: 6px;
+ background-color: none;
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: #BFBFBF;
+ border-radius: 3px;
+}
+
+::-webkit-scrollbar-track {
+ background-color: rgb(255, 255, 255);
+}
+
+.content-center {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ margin: auto;
+}
+
+.b-r-4 {
+ border-radius: 4px;
+}
+
+.b-r-6 {
+ border-radius: 6px;
+}
+
+.b-r-20 {
+ border-radius: 20px;
+}
+
+.b-c-w {
+ background-color: #fff;
+}
+
+.cursor-p {
+ cursor: pointer;
+}
+
+.f-c-black {
+ color: #000;
+}
+
+.overflow-h {
+ overflow: hidden;
+}
+
+.relative {
+ position: relative;
+}
+
+.b-s-b {
+ box-sizing: border-box;
+}
+
+.text-align-l {
+ text-align: left
+}
+
+.pointer-auto {
+ pointer-events: auto;
+}
+
+.nowrap-ellipsis-hidden {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+
+//去除输入框type为number的箭头
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+ -webkit-appearance: none !important;
+}
+
+/* 在Firefox浏览器下 */
+input[type="number"] {
+ -moz-appearance: textfield !important;
+}
\ No newline at end of file
diff --git a/src/styles/base/marginStyle.scss b/src/styles/base/marginStyle.scss
new file mode 100644
index 0000000..a97ea23
--- /dev/null
+++ b/src/styles/base/marginStyle.scss
@@ -0,0 +1,152 @@
+.around-m-5 {
+ margin: 0 5px;
+}
+
+.around-m-20 {
+ margin: 0 20px;
+}
+
+.around-m-22 {
+ margin: 0 22px;
+}
+
+.up-down-m-10 {
+ margin-top: 10px;
+ margin-bottom: 10px;
+}
+
+.m-all-10 {
+ margin: 10px;
+}
+
+.m-all-20 {
+ margin: 20px;
+}
+
+.mt-0 {
+ margin-top: 0;
+}
+
+.mt-4 {
+ margin-top: 4px;
+}
+
+.mt-6 {
+ margin-top: 6px;
+}
+
+.mt-8 {
+ margin-top: 8px !important;
+}
+
+.mt-9 {
+ margin-top: 9px;
+}
+
+.mt--10 {
+ margin-top: -10px;
+}
+
+.mt-10 {
+ margin-top: 10px;
+}
+
+.mt-16 {
+ margin-top: 16px;
+}
+
+.mt-20 {
+ margin-top: 20px;
+}
+
+.mt-55 {
+ margin-top: 55px;
+}
+
+.ml-0 {
+ margin-left: 0;
+}
+
+.ml--1 {
+ margin-left: -1px;
+}
+
+.ml-4 {
+ margin-left: 4px;
+}
+
+.ml--5 {
+ margin-left: -5px;
+}
+
+.ml-5 {
+ margin-left: 5px;
+}
+
+.ml-6 {
+ margin-left: 6px;
+}
+
+.ml-8 {
+ margin-left: 8px;
+}
+
+.ml-10 {
+ margin-left: 10px;
+}
+
+.ml-15 {
+ margin-left: 15px;
+}
+
+.ml-16 {
+ margin-left: 16px;
+}
+
+.ml-20 {
+ margin-left: 20px;
+}
+
+.ml-22 {
+ margin-left: 22px;
+}
+
+.ml-30 {
+ margin-left: 30px;
+}
+
+.ml-150 {
+ margin-left: 150px;
+}
+
+.mr--1 {
+ margin-right: -1px;
+}
+
+.mr-6 {
+ margin-right: 6px;
+}
+
+.mr-10 {
+ margin-right: 10px;
+}
+
+.mr-20 {
+ margin-right: 20px;
+}
+
+.mr-30 {
+ margin-right: 30px;
+}
+
+.mb-10 {
+ margin-bottom: 10px;
+}
+
+.mb-20 {
+ margin-bottom: 20px;
+}
+
+.mb-30 {
+ margin-bottom: 30px;
+}
\ No newline at end of file
diff --git a/src/styles/base/paddingStyle.scss b/src/styles/base/paddingStyle.scss
new file mode 100644
index 0000000..e5e4302
--- /dev/null
+++ b/src/styles/base/paddingStyle.scss
@@ -0,0 +1,51 @@
+.around-p-10 {
+ padding: 0 10px;
+}
+
+.around-p-20 {
+ padding: 0 20px;
+}
+
+.p-all-6 {
+ padding: 6px;
+}
+
+.p-all-8 {
+ padding: 8px;
+}
+
+.p-all-10 {
+ padding: 10px;
+}
+
+.p-all-16 {
+ padding: 16px;
+}
+
+.p-all-20 {
+ padding: 20px;
+}
+
+.pt-0 {
+ padding-top: 0px;
+}
+
+.pt-10 {
+ padding-top: 10px;
+}
+
+.pt-16 {
+ padding-top: 16px;
+}
+
+.pt-20 {
+ padding-top: 20px;
+}
+
+.pl-1 {
+ padding-left: 1px;
+}
+
+.pr-1 {
+ padding-right: 1px;
+}
\ No newline at end of file
diff --git a/src/styles/base/widthStyle.scss b/src/styles/base/widthStyle.scss
new file mode 100644
index 0000000..91ce2f8
--- /dev/null
+++ b/src/styles/base/widthStyle.scss
@@ -0,0 +1,71 @@
+.w0 {
+ width: 0;
+}
+
+.w12 {
+ width: 12%;
+}
+
+.w25 {
+ width: 25%;
+}
+
+.w32 {
+ width: 32%;
+}
+
+.w30 {
+ width: 30%;
+}
+
+.w36 {
+ width: 36%;
+}
+
+.w38 {
+ width: 38%;
+}
+
+.w40 {
+ width: 40%;
+}
+
+.w50 {
+ width: 50%;
+}
+
+.w56 {
+ width: 56%;
+}
+
+.w60 {
+ width: 60%;
+}
+
+.w62 {
+ width: 62%;
+}
+
+.w64 {
+ width: 64%;
+}
+
+.w68 {
+ width: 68%;
+}
+
+.w85 {
+ width: 85%;
+}
+
+.w100 {
+ width: 100%;
+}
+
+.w-60px {
+ width: 60px;
+}
+
+.w-70px {
+ width: 70px;
+}
\ No newline at end of file
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
index 9380212..6456295 100644
--- a/src/views/layout/index.vue
+++ b/src/views/layout/index.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2022-08-18 16:18:24
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2024-10-30 11:25:44
+ * @LastEditTime: 2024-11-01 10:37:23
* @FilePath: \bigScreen\src\views\layout\index.vue
* @Description:
*
@@ -117,9 +117,9 @@
.main-container {
position: absolute;
- top: 68px;
- left: 50px;
- right: 50px;
+ top: 40px;
+ left: 40px;
+ right: 40px;
bottom: 40px;
}
}
diff --git a/src/views/survey/components/box/fireTrend.vue b/src/views/survey/components/box/fireTrend.vue
index 4c78ed6..af85115 100644
--- a/src/views/survey/components/box/fireTrend.vue
+++ b/src/views/survey/components/box/fireTrend.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2023-03-13 14:54:26
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2024-11-01 09:41:25
+ * @LastEditTime: 2024-11-01 10:28:42
* @FilePath: \bigScreen\src\views\survey\components\box\fireTrend.vue
* @Description:
*
@@ -45,7 +45,7 @@
<template>
<public-content>
<template #content>
- <div class="box-content">
+ <div class="box-content w100 h100 flex f-d-c">
<div>
<div class="search-container">
<input type="text" v-model="searchQuery" placeholder="请输入企业名称" class="search-input" />
@@ -77,11 +77,8 @@
}
.data-content-list {
- height: 50%;
- overflow: scroll;
- // 隐藏滚动条
- scrollbar-width: none;
- text-indent: 1em;
+ flex: 1;
+ overflow-y: auto;
}
.search-input {
@@ -113,8 +110,6 @@
padding: 5px 0;
background-color: #747bff;
justify-content: space-between;
- // 超过高度自动显示滚动条
- overflow-y: auto;
border-radius: 5px;
}
</style>
\ No newline at end of file
diff --git a/src/views/survey/components/box/publicContent.vue b/src/views/survey/components/box/publicContent.vue
index 37f1ccd..f247dd4 100644
--- a/src/views/survey/components/box/publicContent.vue
+++ b/src/views/survey/components/box/publicContent.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2023-03-13 14:54:26
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2024-11-01 09:43:11
+ * @LastEditTime: 2024-11-01 10:35:55
* @FilePath: \bigScreen\src\views\survey\components\box\publicContent.vue
* @Description:
*
diff --git a/src/views/survey/components/rightContainer.vue b/src/views/survey/components/rightContainer.vue
index 8e917dd..963b61e 100644
--- a/src/views/survey/components/rightContainer.vue
+++ b/src/views/survey/components/rightContainer.vue
@@ -2,7 +2,7 @@
* @Author: shuishen 1109946754@qq.com
* @Date: 2023-03-10 15:27:59
* @LastEditors: shuishen 1109946754@qq.com
- * @LastEditTime: 2024-10-26 14:49:05
+ * @LastEditTime: 2024-11-01 10:42:13
* @FilePath: \bigScreen\src\views\survey\components\rightContainer.vue
* @Description:
*
@@ -17,7 +17,7 @@
<template>
<div class="right-container">
- <div class="fire-source box">
+ <div class="h0 fire-source box">
<title-box>
<template #titleName>
园区简介
@@ -36,7 +36,7 @@
</div> -->
- <div class="occur-statistics box">
+ <div class="h0 occur-statistics box">
<title-box>
<template #titleName>
企业名录
@@ -61,29 +61,12 @@
height: 100%;
pointer-events: auto;
- .box {
- margin-top: 20px;
-
- .header {
- height: 32px;
- background: url(/img/bg/sub-title.png) no-repeat;
- }
- }
-
.fire-source {
flex: 3;
}
.occur-statistics {
- flex: 3;
- }
-
- .fire-trend {
- flex: 4;
- }
-
- .box:first-child {
- margin-top: 0;
+ flex: 2;
}
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3