From 81773ab04fd259e893c2d7f08dbdc9be772d01c4 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Tue, 21 Dec 2021 17:18:45 +0800
Subject: [PATCH] +,请求数据，弹框显示，优化代码长度
---
src/styles/mobile/popup.scss | 310 ++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 280 insertions(+), 30 deletions(-)
diff --git a/src/styles/mobile/popup.scss b/src/styles/mobile/popup.scss
index da0d69d..f7eedc5 100644
--- a/src/styles/mobile/popup.scss
+++ b/src/styles/mobile/popup.scss
@@ -1,7 +1,14 @@
+.centersFlex {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+//随地图移动弹窗
#mobile-map_popup_content {
+ //弹窗
width: 100%;
position: fixed;
- z-index: 99;
+ z-index: 100;
left: -1000px;
box-sizing: border-box;
#mobilePopup {
@@ -12,30 +19,36 @@
background-color: #fff;
border-radius: 10px;
position: relative;
- &::before {
- content: "";
- width: 0px;
- height: 0px;
- border: 8px solid #ebebeb;
- position: absolute;
- bottom: -8px;
- left: calc(50% - 8px);
- transform: rotate(45deg);
- }
+
.mobiletitle {
- width: calc(90% - 1px);
- height: 15px;
+ // width: calc(90% - 1px);
+ width: 100%;
+ height: 35px;
background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
font-size: 14px;
border-radius: 10px 10px 0 0;
padding: 8px 14px;
+ box-sizing: border-box;
}
.mobilelabel-content {
width: 100%;
height: auto;
// 内容样式
.mobile-popup-imgs-heard {
+ .mobile-popup-imgs-h-close {
+ width: 35px;
+ height: 35px;
+ background-color: #f7f7f7;
+ position: absolute;
+ @extend .centersFlex;
+ border-radius: 100px;
+ right: 0;
+ top: 0;
+ .icon {
+ font-size: 25px;
+ }
+ }
width: 100%;
padding: 10px;
text-align: justify;
@@ -44,6 +57,26 @@
img {
width: 70px;
height: 50px;
+ }
+ //内容显示
+ .mobileBig-center-our {
+ width: 100%;
+ height: auto;
+ .mobileBig-center {
+ width: 100%;
+ min-height: 30px;
+ border-bottom: 1px solid #f7f7f7;
+ @extend .centersFlex;
+ .m-c-title {
+ width: 25%;
+ }
+ .m-c-center {
+ width: 75%;
+ // text-indent: 2em;
+ word-wrap: break-word;
+ line-height: 25px;
+ }
+ }
}
}
.mobile-popup-control {
@@ -56,30 +89,247 @@
display: flex;
align-items: center;
justify-content: center;
+ position: relative;
+ &::before {
+ content: "";
+ width: 0px;
+ height: 0px;
+ border: 8px solid #ebebeb;
+ position: absolute;
+ bottom: -8px;
+ left: calc(50% - 8px);
+ transform: rotate(45deg);
+ }
}
}
}
}
-// 比例尺
-.dc-distance-legend {
- right: 5px !important;
- left: auto !important;
-}
-// 缩放控制
-.dc-zoom-controller {
- left: 20px !important;
- top: 20px !important;
- .zoom-in .refresh .zoom-out {
- width: 32px !important;
- height: 32px !important;
- background-color: #c9302c !important;
+//地图基础样式更改
+$controllerw: 35px !important;
+#mobile-viewer-container {
+ // 继承类
+ .flexCenter {
display: flex !important;
align-items: center !important;
justify-content: center !important;
- color: white !important;
- font-size: 22px !important;
- margin-bottom: 12px !important;
- border-radius: 5px !important;
+ }
+ // 比例尺
+ .dc-distance-legend {
+ right: 5px !important;
+ left: auto !important;
+ }
+ // 缩放控制
+ .dc-zoom-controller {
+ width: 32px !important;
+ height: auto !important;
+ left: 20px !important;
+ top: 50px !important;
+ // z-index: 200;
+ background-color: transparent !important;
+ border: 1px solid transparent !important;
+
+ div:nth-child(1) {
+ // border-bottom: 1px solid #ebebeb;
+ margin-bottom: 37px !important;
+ }
+ div:nth-child(2) {
+ display: none !important;
+ }
+ div:nth-child(3) {
+ // border-top: 1px solid #ebebeb;
+ }
+ div {
+ width: $controllerw;
+ height: $controllerw;
+ position: relative !important;
+ left: -1px !important;
+ background-color: #c9302c !important;
+ color: white !important;
+ @extend .flexCenter;
+ border-radius: 5px;
+ svg {
+ width: 20px !important;
+ height: 20px !important;
+ }
+ }
+ }
+ //弹窗标签栏的标签
+ .m_p_center {
+ .el-tabs {
+ width: 100% !important;
+ height: 100% !important;
+ box-sizing: border-box;
+ .el-tabs__nav-scroll {
+ width: 100% !important;
+ @extend .flexCenter;
+ }
+ .el-tabs__content {
+ width: 100% !important;
+ height: calc(100% - 55px) !important;
+ box-sizing: border-box;
+ .el-tab-pane {
+ width: 100% !important;
+ height: 100% !important;
+ }
+ }
+ }
+ }
+
+ //地图底部按钮下拉菜单
+ .m-left-mobileCortrolButtom {
+ .el-dropdown {
+ width: 100% !important;
+ height: 100% !important;
+ @extend .flexCenter;
+ .el-icon-s-flag.icon {
+ position: relative;
+ top: 10px;
+ left: 10px;
+ }
+ }
+ }
+
+ //滚动条
+ /*定义滑块 内阴影+圆角*/
+ ::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ width: 2px !important;
+ /*滚动条的圆角*/
+ -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.9);
+ background-color: #f1f1f1;
+ /*滚动条的背景颜色*/
+ }
+}
+//地图固定弹窗
+#mobile-map_content_content-fixed {
+ position: fixed;
+ width: 90%;
+ height: auto;
+ z-index: 999;
+ bottom: 2%;
+ left: 5%;
+ background-color: #fff;
+ border-radius: 10px;
+ //关闭按钮
+ .mobiletitle-close-fixed {
+ width: 30px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: absolute;
+ right: 10px;
+ top: 2px;
+ .icon {
+ font-size: 20px;
+ }
+ }
+ //标题样式
+ .mobiletitle-fixed {
+ width: 100%;
+ height: 35px;
+ border-radius: 10px 10px 0 0;
+ background-color: #f7f7f7;
+ padding-left: 10px;
+ display: flex;
+ align-items: center;
+ box-sizing: border-box;
+ }
+ // 内容样式
+ .mobile-popup-imgs-heard-fixed {
+ width: 100%;
+ height: auto;
+ padding: 10px;
+ text-align: justify;
+ letter-spacing: 1px;
+ box-sizing: border-box;
+ img {
+ width: 70px;
+ height: 50px;
+ }
+ //内容显示
+ .mobileBig-center-fiexd {
+ width: 100%;
+ height: 30px;
+ @extend .centersFlex;
+ .m-c-f-title {
+ width: 20%;
+ @extend .centersFlex;
+ }
+ .m-c-f-center {
+ @extend .centersFlex;
+ justify-content: space-between;
+ width: 80%;
+ }
+ }
+ }
+ .mobile-popup-control-fixed {
+ width: 100%;
+ height: 35px;
+ border-radius: 0 0 10px 10px;
+ background-color: #f7f7f7;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ .m-p-c-f-once {
+ .mobilePopupOurOnce_r_d_in-gan {
+ position: relative;
+ left: 40%;
+ }
+ }
+ }
+}
+
+//全屏弹窗
+#mobilePopupOur {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: #fff;
+ z-index: 300;
+ .m_p_heard {
+ width: 100%;
+ height: 50px;
+ background-color: #a40000;
+ .m_p_h_break {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 50px;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .icon {
+ font-size: 22px;
+ color: #fff;
+ }
+ }
+ .m_p_h_center {
+ width: 100%;
+ height: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ .el-dropdown-link {
+ color: #fff;
+ }
+ }
+ }
+ .m_p_center {
+ width: 100%;
+ height: calc(100% - 50px);
+ // border: 1px solid red
+ box-sizing: border-box;
+ .m_p_c_tableIn {
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ overflow-x: hidden;
+ overflow-y: auto;
+ }
}
}
--
Gitblit v1.9.3