From 64dc085c9201f180aa630463204b7fff7e648eae Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Thu, 23 Dec 2021 14:52:29 +0800
Subject: [PATCH] 样式更改
---
src/styles/mobile/popup.scss | 92 ++++++++++++++++++++++++++++++++++------------
1 files changed, 68 insertions(+), 24 deletions(-)
diff --git a/src/styles/mobile/popup.scss b/src/styles/mobile/popup.scss
index eece555..616965e 100644
--- a/src/styles/mobile/popup.scss
+++ b/src/styles/mobile/popup.scss
@@ -3,6 +3,7 @@
align-items: center;
justify-content: center;
}
+
//随地图移动弹窗
#mobile-map_popup_content {
//弹窗
@@ -11,32 +12,29 @@
z-index: 100;
left: -1000px;
box-sizing: border-box;
+
#mobilePopup {
width: 70%;
left: 1000px;
position: absolute;
height: auto;
// background-color: #fff;
- background-image: linear-gradient(
- // 135deg,
- // #28bbf06c 50%,
+ background-image: linear-gradient( // 135deg,
+ // rgba(40,187,240, 0.5) 50%,
// transparent 50%
- #28bbf06c 35px,
- #28bbf06c 35px,
- #28bbf06c calc(100% - 34px),
- transparent calc(100% - 34px)
- ),
- linear-gradient(
- // -45deg,
- // #28bbf06c 50.1%,
+ rgba(40, 187, 240, 0.5) 35px,
+ rgba(40, 187, 240, 0.5) 35px,
+ rgba(40, 187, 240, 0.5) calc(100% - 34px),
+ transparent calc(100% - 34px)),
+ linear-gradient( // -45deg,
+ // rgba(40,187,240, 0.5) 50.1%,
// transparent 50%
transparent 35px,
- #28bbf06c 35px,
- #28bbf06c calc(100% - 0px),
- transparent calc(100% - 0px)
- );
- // background-image: linear-gradient(135deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50%, transparent 50%),
- // linear-gradient(-45deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50.1%, transparent 50%);
+ rgba(40, 187, 240, 0.5) 35px,
+ rgba(40, 187, 240, 0.5) calc(100% - 0px),
+ transparent calc(100% - 0px));
+ // background-image: linear-gradient(135deg, transparent 30px, rgba(40,187,240, 0.5) 30px, rgba(40,187,240, 0.5) 50%, transparent 50%),
+ // linear-gradient(-45deg, transparent 30px, rgba(40,187,240, 0.5) 30px, rgba(40,187,240, 0.5) 50.1%, transparent 50%);
border-radius: 10px;
position: relative;
@@ -46,7 +44,7 @@
width: 100%;
height: 35px;
// background-image: linear-gradient(135deg, transparent 25px, #29baf1 25px);
- background-image: linear-gradient(#29baf1a1, #29baf1a1);
+ background-image: linear-gradient(rgba(41,186,241, 0.5), rgba(41,186,241, 0.5));
// background-image: linear-gradient(#29baf1, #28bbf0);
// background-color: #f7f7f7;
@@ -61,15 +59,17 @@
line-height: 20px;
box-sizing: border-box;
}
+
.mobilelabel-content {
width: 100%;
height: auto;
+
// 内容样式
.mobile-popup-imgs-heard {
.mobile-popup-imgs-h-close {
width: 35px;
height: 34px;
- // background-image: linear-gradient(#29baf1a1, #29baf1a1);
+ // background-image: linear-gradient(rgba(41,186,241, 0.5), rgba(41,186,241, 0.5));
// background-image: linear-gradient(#29baf1, #28bbf0);
// background-color: #f7f7f7;
background-color: transparent;
@@ -78,36 +78,44 @@
border-radius: 100px;
right: 0;
top: 0;
+
.icon {
color: #fff;
font-size: 25px;
}
}
+
width: 100%;
padding: 10px;
text-align: justify;
letter-spacing: 1px;
box-sizing: border-box;
+
img {
margin-left: calc(50% - 35px);
width: 70px;
height: 70px;
}
+
//内容显示
$centerFontSize: 13px;
+
.mobileBig-center-our {
width: 100%;
height: auto;
font-size: $centerFontSize;
+
.mobileBig-center {
width: 100%;
min-height: 30px;
border-bottom: 1px solid #f7f7f7;
@extend .centersFlex;
+
.m-c-title {
color: #fff;
width: 21%;
}
+
.m-c-center {
width: 79%;
// text-indent: 2em;
@@ -116,6 +124,7 @@
line-height: 25px;
}
}
+
.mobileBig-center-introduce {
width: 100%;
height: auto;
@@ -125,6 +134,7 @@
}
}
}
+
.mobile-popup-control {
width: 100%;
height: 20px;
@@ -134,24 +144,26 @@
border-radius: 0 0 10px 10px;
display: flex;
align-items: center;
- background-image: linear-gradient(#29baf1a1, #29baf1a1);
+ background-image: linear-gradient(rgba(41,186,241, 0.5), rgba(41,186,241, 0.5));
// background-image: linear-gradient(#29baf1, #28bbf0);
justify-content: center;
position: relative;
+
&::before {
content: "";
width: 0px;
height: 0px;
- // background-image: linear-gradient(#29baf1a1, #29baf1a1);
+ // background-image: linear-gradient(rgba(41,186,241, 0.5), rgba(41,186,241, 0.5));
border-top: 8px solid transparent;
- border-bottom: 8px solid #19b3f0a1;
+ border-bottom: 8px solid rgba(25,179,240, 0.5);
border-left: 8px solid transparent;
- border-right: 8px solid #19b3f0a1;
+ border-right: 8px solid rgba(25,179,240, 0.5);
position: absolute;
bottom: -8px;
left: calc(50% - 8px);
transform: rotate(45deg);
}
+
.mobilePopupOurOnce_r_d_in {
color: #fff;
}
@@ -162,18 +174,22 @@
//地图基础样式更改
$controllerw: 35px !important;
+
#mobile-viewer-container {
+
// 继承类
.flexCenter {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
+
// 比例尺
.dc-distance-legend {
right: 5px !important;
left: auto !important;
}
+
// 缩放控制
.dc-zoom-controller {
width: 32px !important;
@@ -188,9 +204,11 @@
// border-bottom: 1px solid #ebebeb;
margin-bottom: 49px !important;
}
+
div:nth-child(2) {
display: none !important;
}
+
// div:nth-child(3) {
// // border-top: 1px solid #ebebeb;
// }
@@ -203,26 +221,31 @@
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;
@@ -237,6 +260,7 @@
width: 100% !important;
height: 100% !important;
@extend .flexCenter;
+
.el-icon-s-flag.icon {
position: relative;
top: 4px;
@@ -256,6 +280,7 @@
/*滚动条的背景颜色*/
}
}
+
//地图固定弹窗
#mobile-map_content_content-fixed {
position: fixed;
@@ -266,6 +291,7 @@
left: 5%;
background-color: #fff;
border-radius: 10px;
+
//关闭按钮
.mobiletitle-close-fixed {
width: 30px;
@@ -276,10 +302,12 @@
position: absolute;
right: 10px;
top: 2px;
+
.icon {
font-size: 20px;
}
}
+
//标题样式
.mobiletitle-fixed {
width: 100%;
@@ -291,6 +319,7 @@
align-items: center;
box-sizing: border-box;
}
+
// 内容样式
.mobile-popup-imgs-heard-fixed {
width: 100%;
@@ -299,19 +328,23 @@
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;
@@ -319,6 +352,7 @@
}
}
}
+
.mobile-popup-control-fixed {
width: 100%;
height: 35px;
@@ -327,6 +361,7 @@
display: flex;
align-items: center;
justify-content: space-around;
+
.m-p-c-f-once {
.mobilePopupOurOnce_r_d_in-gan {
position: relative;
@@ -345,12 +380,14 @@
height: 100%;
background-color: #fff;
z-index: 300;
+
.m_p_heard {
width: 100%;
height: 50px;
background-image: linear-gradient(#29baf1, #28bbf0);
border-bottom: 1px solid rgba(82, 209, 255, 0.774);
color: #fff;
+
// background-color: #a40000;
.m_p_h_break {
position: absolute;
@@ -361,22 +398,26 @@
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);
@@ -400,6 +441,7 @@
// transparent 100%
// );
box-sizing: border-box;
+
.m_p_c_tableIn {
width: 100%;
height: 100%;
@@ -407,6 +449,7 @@
overflow-x: hidden;
overflow-y: auto;
}
+
// .el-divider__text {
// background-image: linear-gradient(#29baf1, #28bbf0) !important;
// color: #fff !important;
@@ -430,8 +473,9 @@
//左侧弹窗全景图片变小
.mobile-way-entitys-box {
$size: 30px;
+
img {
width: $size;
height: $size;
}
-}
+}
\ No newline at end of file
--
Gitblit v1.9.3