修改大屏展示样式错乱问题

src/styles/global.scss

@@ -4,8 +4,13 @@
     margin:0;
     box-sizing: border-box;
 }
-html,body{
+html {
+    height: 100%;
+    font-size: 100px;
+}
+body{
     height:100%;
+    font-size: 16px;
 }
 ul,li {
     list-style: none;

src/views/Home.vue

@@ -1047,7 +1047,7 @@ body {
 .nav {
   z-index: 99;
   width: 100%;
-  height: 88px;
+  height: 0.6rem;
   background-image: url('../assets/img/gisdemo/top.png');
   background-size: cover;
   position: absolute;
@@ -1062,10 +1062,10 @@ body {
 /* 标志信息 */
 .mark {
   /* width: 120px; */
-  height: 30px;
-  margin-left: 10px;
+  height: 0.3rem;
+  margin-left: 0.1rem;
   list-style: none;
-  font-size: 14px;
+  font-size: 0.14rem;
   color: #fff;
   background-color: rgba(51, 51, 51, 0.576);
   display: flex;
@@ -1074,112 +1074,106 @@ body {
 }
 .markItem {
   width: 100%;
-  margin: 0 10px;
+  margin: 0 0.1rem;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .markImg {
-  width: 20px;
-  height: 20px;
-  margin-left: 10px;
+  width: 0.18rem;
+  height: 0.18rem;
+  margin-left: 0.1rem;
 }
 /*  */
 .markBox {
   position: absolute;
-  bottom: 10px;
-  left: 10px;
+  bottom: 0.1rem;
+  left: 0.1rem;
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
 }
 /* 色带 */
 .colorMark {
-  /* height: 50px; */
-  padding: 10px;
+  padding: 0.1rem;
   color: #333;
-  font-size: 12px;
+  font-size: 0.12rem;
   background-color: rgb(249, 251, 253);
 }
 .colorMain {
-  margin-top: 4px;
+  margin-top: 0.04rem;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: flex-start;
 }
 .colorMain .colorImg {
-  height: 14px;
-  width: 180px;
+  height: 0.14rem;
+  width: 1.6rem;
   background-image: url("../assets/img/gisdemo/color.png");
   background-size: contain;
 }
 .colorValue {
-  height: 20;
-  width: 180px;
+  height: 0.15rem;
+  width: 1.6rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 /* 菜单 */
 #rightSide {
-  width: 200px;
+  width: 2rem;
   position: absolute;
-  top: 120px;
-  right: 10px;
+  top: 1.2rem;
+  right: 0.1rem;
 }
 .controlTitle {
-  width: 200px;
-  height: 40px;
-  padding-left: 20px;
-  font-size: 16px;
+  width: 2rem;
+  height: 0.4rem;
+  padding-left: 0.2rem;
+  font-size: 0.16rem;
   font-weight: 600;
   color: #333;
-  /* background-image: url('../assets/img/gisdemo/quality.png'); */
-  /* background-size: cover; */
   background-color: #fff;
-  line-height: 40px;
+  line-height: 0.4rem;
   text-align: start;
 }
 .el-menu {
-  width: 200px;
+  width: 2rem;
   overflow: hidden;
 }
 /deep/ .el-menu-item-group {
   padding: 0;
   background-color: #eeeeee;
-  font-size: 10px;
+  font-size: 0.1rem;
   color: #666666;
 }
 
 /deep/ .el-menu-item {
-  padding-left: 40px !important;
-  font-size: 12px;
+  padding-left: 0.4rem !important;
+  font-size: 0.12rem;
   position: relative;
 }
 /deep/ .el-menu-item-group .el-submenu__title {
   font-weight: 400;
-  font-size: 12px;
-  padding-left: 40px !important;
+  font-size: 0.12rem;
+  padding-left: 0.4rem !important;
 }
 /deep/.el-menu-item-group .el-submenu .el-menu .el-menu-item {
-  padding-left: 50px !important;
+  padding-left: 0.5rem !important;
 }
 /deep/ .el-submenu__title {
-  height: 40px;
-  line-height: 40px;
-  padding: 20px !important;
+  height: 0.4rem;
+  line-height: 0.4rem;
+  padding: 0.2rem !important;
   display: flex;
   align-items: center;
   font-weight: 600;
 }
-.el-menu-item:focus, .el-menu-item:hover {
-    outline: 0;
-    background-color: #e0e8f0;
-}
+
 /deep/.el-menu-item-group .el-menu-item-group__title {
-  padding-left: 25px !important;
-  font-size: 13px;
+  padding-left: 0.25rem !important;
+  font-size: 0.13rem;
   color: #333;
 }
 .el-menu-item.is-active {
@@ -1190,31 +1184,29 @@ body {
 }
 .refcheck {
   height: 100%;
-  margin-left: 8px;
-  /* display: block; */
-  line-height: 50px;
+  margin-left: 0.08rem;
+  line-height: 0.5rem;
 }
 /* 数据统计弹框 */
 .chart {
-  width: 380px;
-  padding: 10px;
+  width: 3.6rem;
   position: absolute;
-  top: 80px;
-  left: 10px;
+  top: 0.8rem;
+  left: 0.1rem;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: flex-start;
 }
 .chartBtn {
-  width: 80px;
-  height: 22px;
+  width: 0.8rem;
+  height: 0.22rem;
   background-image: url('../assets/img/gisdemo/head-date.png');
   background-size: cover;
 }
 .chartBox {
   width: 100%;
-  margin-top: 4px;
+  margin-top: 0.04rem;
   display: flex;
   flex-direction: column;
   justify-content: space-around;
@@ -1223,14 +1215,14 @@ body {
 }
 .cancelChart {
   width: 100%;
-  padding: 10px 20px 0 0;
-  font-size: 16px;
+  padding: 0.1rem 0.2rem 0 0;
+  font-size: 0.16rem;
   color: rgba(51, 51, 51, 0.822);
   text-align: end;
 }
 .closeBtn {
-  width: 14px;
-  height: 14px;
+  width: 0.14rem;
+  height: 0.14rem;
   cursor: pointer;
 }
 .chartContent {
@@ -1238,7 +1230,7 @@ body {
 }
 .pointChart {
   position: relative;
-  padding-bottom: 20px;
+  padding-bottom: 0.2rem;
 }
 .chooseParams {
   width: 90%;
@@ -1248,30 +1240,30 @@ body {
   align-items: center;
 }
 .parmasItem {
-  width: 55px;
-  height: 23px;
-  margin-bottom: 10px;
+  width: 0.55rem;
+  height: 0.23rem;
+  margin-bottom: 0.1rem;
   background-color: #eeeeee;
   display: flex;
   justify-content: space-around;
   align-items: center;
   color: #000;
-  font-size: 12px;
-  line-height: 23px;
+  font-size: 0.12rem;
+  line-height: 0.23rem;
 
 }
 .utils {
-  font-size: 12px;
+  font-size: 0.12rem;
   color: #666;
   text-align: start;
-  padding-left: 40px;
+  padding-left: 0.4rem;
 }
 .pointId {
-  font-size: 12px;
+  font-size: 0.12rem;
   color: #666;
   position: absolute;
-  bottom: 20px;
-  right: 30px;
+  bottom: 0.2rem;
+  right: 0.3rem;
 }
 .placeChart {
   width: 100%;
@@ -1284,38 +1276,38 @@ body {
 .placeTitle {
   width: 100%;
   text-align: start;
-  padding-left: 20px;
-  margin-bottom: 10px;
-  font-size: 14px;
+  padding-left: 0.2rem;
+  margin-bottom: 0.1rem;
+  font-size: 0.14rem;
   font-weight: 600;
   color: #000;
 }
 
 /* 弹出框 */
 .showPopupPoint {
-  width: 220px;
-  height: 160px;
-  padding: 10px;
+  width: 2.2rem;
+  height: 1.6rem;
+  padding: 0.1rem;
   background-color: rgb(255, 255, 255);
 }
 .showPopupPlace {
-  width: 220px;
-  height: 140px;
-  padding: 10px;
+  width: 2.2rem;
+  height: 1.4rem;
+  padding: 0.1rem;
   background-color: rgb(255, 255, 255);
 }
 .showPopupOutlet {
-  width: 220px;
-  height: 230px;
-  padding: 10px;
+  width: 2.2rem;
+  height: 2.5rem;
+  padding: 0.1rem;
   background-color: rgb(255, 255, 255);
 }
 /* 底图 */
 #changeMap {
-  width: 240px;
+  width: 2.4rem;
   position: absolute;
-  bottom: 10px;
-  right: 10px;
+  bottom: 0.1rem;
+  right: 0rem;
   display: flex;
   justify-content: space-around;
   align-items: center;
@@ -1324,37 +1316,37 @@ body {
   display: flex;
 }
 .mapText {
-  width: 60px;
-  height: 24px;
+  width: 0.6rem;
+  height: 0.24rem;
   color: #333333;
-  font-size: 12px;
+  font-size: 0.12rem;
   font-weight: 600;
-  line-height: 24px;
+  line-height: 0.24rem;
   background-color: #ffffff;
   cursor: pointer;
 }
 .unaMap {
-  width: 90px;
-  height: 24px;
+  width: 0.9rem;
+  height: 0.24rem;
   color: #333333;
-  font-size: 12px;
+  font-size: 0.12rem;
   font-weight: 600;
-  line-height: 24px;
+  line-height: 0.24rem;
   background-color: #ffffff;
   cursor: pointer;
 }
 .google {
-  margin-left: -16px;
+  margin-left: -0.16rem;
 }
 #changeMap input {
   display: none;
 }
 /* 土地占比图例信息 */
 #landmark {
-  max-width: 600px;
+  max-width: 5.5rem;
   list-style: none;
   position: absolute;
-  bottom: 10px;
+  bottom: 0.1rem;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
@@ -1363,18 +1355,18 @@ body {
   align-content: flex-start;
   color: #000;
   background-color: #eeeeee;
-  font-size: 12px;
+  font-size: 0.12rem;
 }
 .landItem {
-  margin: 10px;
+  margin: 0.1rem;
   display: flex;
   justify-content: space-around;
   align-items: center;
 }
 .landItem .landcolor {
-  width: 10px;
-  height: 10px;
-  margin-left: 10px;
+  width: 0.1rem;
+  height: 0.1rem;
+  margin-left: 0.1rem;
 }
 
 /* 高亮显示 */
@@ -1395,13 +1387,13 @@ body {
 }
 .mapActive {
   color: #fff;
-  font-size: 12px;
+  font-size: 0.12rem;
   background-color: #0091FF;
 }
 .pointParamsActive {
-  height: 23px;
+  height: 0.23rem;
   color: #fff;
-  font-size: 12px;
+  font-size: 0.12rem;
   background: #0091FF;
 }
 

src/views/leftCompoents/landUse.vue

@@ -38,7 +38,7 @@ export default {
       container: "landUse",
       //   autoFit: true,
       width: 350,
-      height: 230,
+      height: 250,
       padding: [0, 40, 10, 40],
     });
     chart.data(data);
@@ -50,7 +50,7 @@ export default {
     });
     chart.coordinate("theta", {
       radius: 0.55,
-      innerRadius: 0.7,
+      innerRadius: 0.6,
     });
     chart.tooltip({
       showTitle: false,

src/views/leftCompoents/outletComponents.vue

@@ -56,11 +56,11 @@ export default {
       justify-content: flex-start;
       align-items: flex-start;
       color: #333;
-      font-size: 14px;
+      font-size: 0.14rem;
     }
     .popupNav {
       width: 100%;
-      padding: 0 10px;
+      padding: 0 0.1rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -68,13 +68,13 @@ export default {
     #outletComponents .title {
       text-align: start;
       color: #000;
-      font-size: 14px;
+      font-size: 0.14rem;
       font-weight: 600;
     }
     #outletComponents .paramsList {
       width: 100%;
-      margin: 10 auto;
-      padding: 0 10px;
+      margin: 0.1rem auto;
+      padding: 0 0.1rem;
       list-style: none;
       display: flex;
       flex-direction: column;
@@ -83,7 +83,7 @@ export default {
     }
     .value {
       width: 100%;
-      margin-top: 8px;
+      margin-top: 0.08rem;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
@@ -93,12 +93,12 @@ export default {
       text-align: start;
     }
     .imgtitle {
-      margin: 8px 0px;
-      font-size: 14px;
+      margin: 0.08rem 0px;
+      font-size: 0.14rem;
     }
     .closePopup {
-      width: 12px;
-      height: 12px;
+      width: 0.12rem;
+      height: 0.12rem;
       cursor: pointer;
     }
     .outletImg {
@@ -106,6 +106,6 @@ export default {
       height: auto;
     }
     .lon {
-      margin-bottom: 8px;
+      margin-bottom: 0.08rem;
     }
 </style>

src/views/leftCompoents/placeComponent.vue

@@ -49,12 +49,12 @@ export default {
       justify-content: flex-start;
       align-items: flex-start;
       color: #333;
-      font-size: 14px;
+      font-size: 0.14rem;
     }
     .popupNav {
       width: 100%;
-      height: 30px;
-      padding: 0 10px;
+      height: 0.3rem;
+      padding: 0 0.1rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -62,13 +62,13 @@ export default {
     #placeComponent .title {
       text-align: start;
       color: #000;
-      font-size: 14px;
+      font-size: 0.14rem;
       font-weight: 600;
     }
 
     #placeComponent .paramsList {
       width: 100%;
-      margin-left: 10px;
+      margin-left: 0.1rem;
       list-style: none;
       display: flex;
       flex-direction: column;
@@ -77,7 +77,7 @@ export default {
     }
     #placeComponent .placeValue {
       width: 100%;
-      margin-top: 8px;
+      margin-top: 0.08rem;
       text-align: start;
     }
     .closePopup {

src/views/leftCompoents/popupComponents.vue

@@ -58,23 +58,23 @@ export default {
       justify-content: flex-start;
       align-items: flex-start;
       color: #333;
-      font-size: 14px;
+      font-size: 0.14rem;
     }
     .popupNav {
       width: 100%;
-      padding: 0 10px;
+      padding: 0 0.1rem;
       display: flex;
       justify-content: space-between;
       align-items: center;
     }
     #popupComponents .title {
       color: #000;
-      font-size: 14px;
+      font-size: 0.14rem;
       font-weight: 600;
     }
     #popupComponents .paramsList {
       width: 100%;
-      margin-left: 10px;
+      margin-left: 0.1rem;
       list-style: none;
       display: flex;
       flex-direction: column;
@@ -83,7 +83,7 @@ export default {
     }
     .value {
       width: 80%;
-      margin-top: 8px;
+      margin-top: 0.08rem;
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
@@ -92,14 +92,14 @@ export default {
       text-align: start;
     }
     .upImg {
-      width: 10px;
-      height: 14px;
+      width: 0.1rem;
+      height: 0.14rem;
       background-image: url('../../assets/img/gisdemo/up.png');
       background-size: cover;
     }
     .closePopup {
-      width: 12px;
-      height: 12px;
+      width: 0.12rem;
+      height: 0.12rem;
       cursor: pointer;
     }
 </style>