From 46c620066f5196527c266cee6cd094e3c71b98cf Mon Sep 17 00:00:00 2001
From: guanqb <18720758508@163.com>
Date: Wed, 28 Dec 2022 08:48:05 +0800
Subject: [PATCH] 样式
---
src/components/map/components/mapPopup.vue | 295 ++++++++++++++++++++++++++++++-----------------------------
1 files changed, 150 insertions(+), 145 deletions(-)
diff --git a/src/components/map/components/mapPopup.vue b/src/components/map/components/mapPopup.vue
index bd5cc5d..5a02564 100644
--- a/src/components/map/components/mapPopup.vue
+++ b/src/components/map/components/mapPopup.vue
@@ -150,158 +150,163 @@
width: calc(100% - 120px);
}
}
-}
-.divForms-dom {
- position: fixed;
- left: 0;
- z-index: 1 !important;
-}
-.box {
- width: 100%;
- height: 100%;
- transform: translate(0, 25%);
-}
-.divForms .arrow {
- position: absolute;
- bottom: 40%;
- left: 0;
- width: 45px;
- height: 2px;
- transform: rotate(-45deg) translate(5px, -15px);
- background-color: #28bbf0;
-}
+ .divForms-dom {
+ position: fixed;
+ left: 0;
+ z-index: 1 !important;
+ }
+ .box {
+ width: 100%;
+ height: 100%;
+ transform: translate(0, 25%);
+ }
-.divForms-theme .area {
- background-image: linear-gradient(
+ .divForms .arrow {
+ position: absolute;
+ bottom: 40%;
+ left: 0;
+ width: 45px;
+ height: 2px;
+ transform: rotate(-45deg) translate(5px, -15px);
+ background-color: #28bbf0;
+ }
+
+ .divForms-theme .area {
+ background-image: linear-gradient(
+ 135deg,
+ transparent 30px,
+ #1831a79a 30px,
+ #3f487ba6 50%,
+ transparent 50%
+ ),
+ linear-gradient(
+ -45deg,
+ transparent 30px,
+ #1831a79a 30px,
+ #3f487ba6 50.1%,
+ transparent 50%
+ );
+ }
+
+ .divForms .area {
+ position: relative;
+ min-width: 320px;
+ }
+
+ .divForms-wrap {
+ position: relative;
+ overflow: hidden;
+ padding: 30px;
+ }
+
+ .divForms-theme .b-b,
+ .divForms-theme .b-b-r,
+ .divForms-theme .b-l,
+ .divForms-theme .b-r,
+ .divForms-theme .b-t,
+ .divForms-theme .b-t-l {
+ background-color: #1831a7;
+ box-shadow: 0 0 10px 2px #1831a7;
+ }
+
+ .divForms .b-t {
+ position: absolute;
+ top: 0;
+ left: 44px;
+ right: 0;
+ height: 1px;
+ z-index: 10;
+ }
+
+ .divForms .b-r {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 44px;
+ width: 1px;
+ z-index: 10;
+ }
+
+ .divForms .b-l {
+ position: absolute;
+ top: 44px;
+ left: 0;
+ bottom: 0;
+ width: 1px;
+ z-index: 10;
+ }
+
+ .divForms .b-b {
+ position: absolute;
+ left: 0;
+ right: 44px;
+ bottom: 0;
+ height: 1px;
+ z-index: 10;
+ }
+
+ .divForms .b-b-r {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 1px;
+ height: 62px;
+ transform: rotate(45deg) translate(-52px, 22px);
+ z-index: 10;
+ }
+
+ .divForms .b-t-l {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 1px;
+ height: 62px;
+ transform: rotate(45deg) translate(52px, -22px);
+ z-index: 10;
+ }
+
+ .divForms .label-wrap {
+ padding: 0 12px;
+ color: #fff;
+ font-size: 16px;
+ white-space: nowrap;
+ overflow: hidden;
+ }
+
+ .divForms-theme .title {
+ background-image: linear-gradient(
135deg,
- transparent 30px,
- #1831a79a 30px,
- #3f487ba6 50%,
- transparent 50%
- ),
- linear-gradient(
- -45deg,
- transparent 30px,
- #1831a79a 30px,
- #3f487ba6 50.1%,
- transparent 50%
+ transparent 25px,
+ #1c309e9a 25px
);
-}
+ }
-.divForms .area {
- position: relative;
- min-width: 320px;
-}
+ .divForms .title {
+ margin-top: 20px;
+ padding: 0 12px 0 30px;
+ height: 36px;
+ line-height: 36px;
+ position: relative;
+ }
-.divForms-wrap {
- position: relative;
- overflow: hidden;
- padding: 30px;
-}
+ .divForms .label-content {
+ padding: 4px 0;
+ }
-.divForms-theme .b-b,
-.divForms-theme .b-b-r,
-.divForms-theme .b-l,
-.divForms-theme .b-r,
-.divForms-theme .b-t,
-.divForms-theme .b-t-l {
- background-color: #1831a7;
- box-shadow: 0 0 10px 2px #1831a7;
-}
+ .divForms-theme .arrow,
+ .divForms-theme .title::before {
+ background-color: #1c309e;
+ }
-.divForms .b-t {
- position: absolute;
- top: 0;
- left: 44px;
- right: 0;
- height: 1px;
- z-index: 10;
-}
-
-.divForms .b-r {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 44px;
- width: 1px;
- z-index: 10;
-}
-
-.divForms .b-l {
- position: absolute;
- top: 44px;
- left: 0;
- bottom: 0;
- width: 1px;
- z-index: 10;
-}
-
-.divForms .b-b {
- position: absolute;
- left: 0;
- right: 44px;
- bottom: 0;
- height: 1px;
- z-index: 10;
-}
-
-.divForms .b-b-r {
- position: absolute;
- bottom: 0;
- right: 0;
- width: 1px;
- height: 62px;
- transform: rotate(45deg) translate(-52px, 22px);
- z-index: 10;
-}
-
-.divForms .b-t-l {
- position: absolute;
- top: 0;
- left: 0;
- width: 1px;
- height: 62px;
- transform: rotate(45deg) translate(52px, -22px);
- z-index: 10;
-}
-
-.divForms .label-wrap {
- padding: 0 12px;
- color: #fff;
- font-size: 16px;
- white-space: nowrap;
- overflow: hidden;
-}
-
-.divForms-theme .title {
- background-image: linear-gradient(135deg, transparent 25px, #1c309e9a 25px);
-}
-
-.divForms .title {
- margin-top: 20px;
- padding: 0 12px 0 30px;
- height: 36px;
- line-height: 36px;
- position: relative;
-}
-
-.divForms .label-content {
- padding: 4px 0;
-}
-
-.divForms-theme .arrow,
-.divForms-theme .title::before {
- background-color: #1c309e;
-}
-
-.divForms .title::before {
- content: '';
- position: absolute;
- bottom: -4px;
- left: 0;
- right: 0;
- z-index: 10;
- height: 2px;
+ .divForms .title::before {
+ content: '';
+ position: absolute;
+ bottom: -4px;
+ left: 0;
+ right: 0;
+ z-index: 10;
+ height: 2px;
+ }
}
</style>
\ No newline at end of file
--
Gitblit v1.9.3