From 4a37bc2ada7b6818df9e7c90e92781740ec9c9c0 Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Tue, 08 Nov 2022 09:08:02 +0800
Subject: [PATCH] 首页弹窗元素优化

---
 src/styles/base/index.css |  163 ++++++++++++++----------------------------------------
 1 files changed, 42 insertions(+), 121 deletions(-)

diff --git a/src/styles/base/index.css b/src/styles/base/index.css
index 21fb1da..472a690 100644
--- a/src/styles/base/index.css
+++ b/src/styles/base/index.css
@@ -127,24 +127,23 @@
 .phone-details-box .el-dialog .el-dialog__body {
   flex: 1;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-self: flex-start;
+  align-content: flex-start;
 }
 
-.phone-details-box .el-dialog .dialog-side {
+.phone-details-box .el-dialog .el-dialog__body .item {
   display: flex;
+  flex-direction: row;
+  width: calc(50% - 20px);
   height: 36px;
   line-height: 36px;
-}
-
-.phone-details-box .el-dialog .dialog-side > div:nth-of-type(1) {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  margin-right: 10px;
+  margin: 0 10px;
   text-align: left;
 }
 
-.phone-details-box .el-dialog .dialog-side > div:nth-of-type(1) > div:first-child {
+.phone-details-box .el-dialog .el-dialog__body .item > div:first-child {
   width: 100px;
   text-align: justify;
   display: inline-block;
@@ -152,26 +151,7 @@
   margin-right: 20px;
 }
 
-.phone-details-box .el-dialog .dialog-side > div:nth-of-type(1) > div:nth-of-type(2) {
-  width: calc(100% - 120px);
-}
-
-.phone-details-box .el-dialog .dialog-side > div:nth-of-type(2) {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  text-align: left;
-}
-
-.phone-details-box .el-dialog .dialog-side > div:nth-of-type(2) > div:first-child {
-  width: 100px;
-  text-align: justify;
-  display: inline-block;
-  text-align-last: justify;
-  margin-right: 20px;
-}
-
-.phone-details-box .el-dialog .dialog-side > div:nth-of-type(2) > div:nth-of-type(2) {
+.phone-details-box .el-dialog .el-dialog__body .item > div:nth-of-type(2) {
   width: calc(100% - 120px);
 }
 
@@ -194,24 +174,23 @@
 .area-details-box .el-dialog .el-dialog__body {
   flex: 1;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-self: flex-start;
+  align-content: flex-start;
 }
 
-.area-details-box .el-dialog .el-dialog__body .dialog-side {
+.area-details-box .el-dialog .el-dialog__body .item {
   display: flex;
+  flex-direction: row;
+  width: calc(50% - 20px);
   height: 36px;
   line-height: 36px;
-}
-
-.area-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  margin-right: 10px;
+  margin: 0 10px;
   text-align: left;
 }
 
-.area-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) > div:first-child {
+.area-details-box .el-dialog .el-dialog__body .item > div:first-child {
   width: 100px;
   text-align: justify;
   display: inline-block;
@@ -219,26 +198,7 @@
   margin-right: 20px;
 }
 
-.area-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) > div:nth-of-type(2) {
-  width: calc(100% - 120px);
-}
-
-.area-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  text-align: left;
-}
-
-.area-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) > div:first-child {
-  width: 100px;
-  text-align: justify;
-  display: inline-block;
-  text-align-last: justify;
-  margin-right: 20px;
-}
-
-.area-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) > div:nth-of-type(2) {
+.area-details-box .el-dialog .el-dialog__body .item > div:nth-of-type(2) {
   width: calc(100% - 120px);
 }
 
@@ -306,24 +266,23 @@
 .policeSituation-details-box .el-dialog .el-dialog__body {
   flex: 1;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-self: flex-start;
+  align-content: flex-start;
 }
 
-.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side {
+.policeSituation-details-box .el-dialog .el-dialog__body .item {
   display: flex;
+  flex-direction: row;
+  width: calc(50% - 20px);
   height: 36px;
   line-height: 36px;
-}
-
-.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  margin-right: 10px;
+  margin: 0 10px;
   text-align: left;
 }
 
-.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) > div:first-child {
+.policeSituation-details-box .el-dialog .el-dialog__body .item > div:first-child {
   width: 100px;
   text-align: justify;
   display: inline-block;
@@ -331,26 +290,7 @@
   margin-right: 20px;
 }
 
-.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) > div:nth-of-type(2) {
-  width: calc(100% - 120px);
-}
-
-.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  text-align: left;
-}
-
-.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) > div:first-child {
-  width: 100px;
-  text-align: justify;
-  display: inline-block;
-  text-align-last: justify;
-  margin-right: 20px;
-}
-
-.policeSituation-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) > div:nth-of-type(2) {
+.policeSituation-details-box .el-dialog .el-dialog__body .item > div:nth-of-type(2) {
   width: calc(100% - 120px);
 }
 
@@ -360,6 +300,7 @@
   line-height: 36px;
   flex-direction: row;
   text-align: left;
+  margin-left: 10px;
 }
 
 .policeSituation-details-box .el-dialog .el-dialog__body .dialog-content > div:first-child {
@@ -378,7 +319,7 @@
   margin: 0 !important;
   display: flex;
   flex-direction: column;
-  width: 600px;
+  width: 640px;
   height: 400px;
   top: 50%;
   left: 50% !important;
@@ -393,24 +334,23 @@
 .activity-details-box .el-dialog .el-dialog__body {
   flex: 1;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-self: flex-start;
+  align-content: flex-start;
 }
 
-.activity-details-box .el-dialog .el-dialog__body .dialog-side {
+.activity-details-box .el-dialog .el-dialog__body .item {
   display: flex;
+  flex-direction: row;
+  width: calc(50% - 20px);
   height: 36px;
   line-height: 36px;
-}
-
-.activity-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  margin-right: 10px;
+  margin: 0 10px;
   text-align: left;
 }
 
-.activity-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) > div:first-child {
+.activity-details-box .el-dialog .el-dialog__body .item > div:first-child {
   width: 100px;
   text-align: justify;
   display: inline-block;
@@ -418,25 +358,6 @@
   margin-right: 20px;
 }
 
-.activity-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(1) > div:nth-of-type(2) {
-  width: calc(100% - 120px);
-}
-
-.activity-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  text-align: left;
-}
-
-.activity-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) > div:first-child {
-  width: 100px;
-  text-align: justify;
-  display: inline-block;
-  text-align-last: justify;
-  margin-right: 20px;
-}
-
-.activity-details-box .el-dialog .el-dialog__body .dialog-side > div:nth-of-type(2) > div:nth-of-type(2) {
+.activity-details-box .el-dialog .el-dialog__body .item > div:nth-of-type(2) {
   width: calc(100% - 120px);
 }

--
Gitblit v1.9.3