From d3133c10fce3e6480416a5f0ce9525521db77818 Mon Sep 17 00:00:00 2001 From: yuzongping <835949940@qq.com> Date: Mon, 16 Jun 2025 16:55:17 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/header/index.html | 2 +- src/components/header/index.js | 2 +- src/components/legend/icon.png | Bin 0 -> 298 bytes src/components/legend/index.html | 27 +++++ src/components/legend/index.js | 42 ++++++++ src/components/legend/index.scss | 137 ++++++++++++++++++++++++ src/components/legend/index.vue | 3 + src/components/legend/light.png | Bin 0 -> 2781 bytes src/components/pannel/index.scss | 6 +- src/views/property/main-gis/index.html | 8 ++ src/views/property/main-gis/index.js | 35 +++++- src/views/property/main-gis/index.scss | 30 ++++++ src/views/resources/main-gis/index.html | 8 ++ src/views/resources/main-gis/index.js | 38 ++++++- src/views/resources/main-gis/index.scss | 30 ++++++ 15 files changed, 357 insertions(+), 11 deletions(-) create mode 100644 src/components/legend/icon.png create mode 100644 src/components/legend/index.html create mode 100644 src/components/legend/index.js create mode 100644 src/components/legend/index.scss create mode 100644 src/components/legend/index.vue create mode 100644 src/components/legend/light.png diff --git a/src/components/header/index.html b/src/components/header/index.html index 32b0e22..fc499b7 100644 --- a/src/components/header/index.html +++ b/src/components/header/index.html @@ -4,6 +4,6 @@

{{title}}

-
+
\ No newline at end of file diff --git a/src/components/header/index.js b/src/components/header/index.js index 7955a01..74b4e8c 100644 --- a/src/components/header/index.js +++ b/src/components/header/index.js @@ -28,7 +28,7 @@ export default { created () { }, methods: { - back () { + goback () { this.$router.go(-1) } } diff --git a/src/components/legend/icon.png b/src/components/legend/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..aee23d05b047a5f4ddcb5e5108c69892c13b17ec GIT binary patch literal 298 zcmV+_0oDGAP)Px#)1-!X*wik#;*J4PDpHqEGT?jWmv z&dAx9_Y;;eUVuC&;03fGXOyOt-ZR_+Q&wg*q~q<{Y(++-G8D2l5tc-gjh1WvYx0u7~010I(lJpDk@9?f0=>}Q>T wTX}!IBwv4D0HBhFGP^-aABzx9L9Tk|4QK3R<-`TM_5c6?07*qoM6N<$f_CzC@c;k- literal 0 HcmV?d00001 diff --git a/src/components/legend/index.html b/src/components/legend/index.html new file mode 100644 index 0000000..87364fa --- /dev/null +++ b/src/components/legend/index.html @@ -0,0 +1,27 @@ +
+
+
+
+
+
+
+
+ +

{{title}}

+
+
+ +
+
+ +
+
+
+ +
+
+
+
+
+
+
\ No newline at end of file diff --git a/src/components/legend/index.js b/src/components/legend/index.js new file mode 100644 index 0000000..1385e39 --- /dev/null +++ b/src/components/legend/index.js @@ -0,0 +1,42 @@ +export default { + props: { + // 定义标题 + title: { + type: String, + default: '图例' + }, + bkClass: { + type: String, + default: 'bk_normal' + }, + // 定义跳转页面url + uri: { + type: String, + default: '' + }, + // 定义组件高度 + height: { + type: String, + default: '210' + }, + // 定义组件高度 + width: { + type: String, + default: '134' + } + }, + computed: { + style: function () { + return { + height: this.height + 'px', + width: this.width + 'px' + }; + } + }, + data () { + return { + }; + }, + methods: { + } +}; diff --git a/src/components/legend/index.scss b/src/components/legend/index.scss new file mode 100644 index 0000000..107bead --- /dev/null +++ b/src/components/legend/index.scss @@ -0,0 +1,137 @@ +.pannel { + box-sizing: border-box; + display: flex; + flex-direction: column; + + // 頭部區域 + .header_box { + position: relative; + height: 35px; + overflow: visible !important; + + .top_line { + display: flex; + justify-content: space-between; + // background-color: rgba(22, 60, 114, 1); + background: linear-gradient(0deg, rgba(49, 129, 246, 0.66) 0% RGBA(40, 99, 183, 1) 100%); + width: 100%; + height: 2px; + + .left_sign { + height: 2px; + width: 13px; + background-color: rgba(53, 143, 255, 1); + } + + .right_sign { + height: 2px; + width: 13px; + background-color: rgba(53, 143, 255, 1); + } + } + + .header { + margin-top: 2px; + height: 32px; + background: linear-gradient(90deg, RGBA(18, 45, 83, 1) 0% RGBA(40, 99, 183, 1) 50%); + + .title_bk { + // font-style: italic; + font-weight: 600; + height: 50px; + margin-left: 20px; + line-height: 32px; + text-align: center; + + .icon { + display: block; + background: url('./icon.png'); + background-size: 100% 100%; + width: 18px; + height: 18px; + } + + p { + margin-left: 30px; + } + } + + .more { + margin-right: 20px; + } + } + + .light { + position: absolute; + bottom: -15px; + left: 30px; + background: url('./light.png'); + background-size: 100% 100%; + width: 280px; + height: 30px; + animation: lightmove 4s infinite; + } + } + + // 内容区域 + .body { + margin: 2px; + padding: 10px; + width: 100%; + position: relative; + flex: 1; + background-color: rgba(11, 28, 58, 1); + overflow: hidden; + + .bottom_line { + position: absolute; + left: 0; + right: 0; + bottom: 0; + display: flex; + justify-content: space-between; + background-color: rgba(22, 60, 114, 1); + width: 100%; + height: 2px; + + .left_sign { + height: 2px; + width: 13px; + background-color: rgba(53, 143, 255, 1); + } + + .right_sign { + height: 2px; + width: 13px; + background-color: rgba(53, 143, 255, 1); + } + } + + div { + width: 100%; + height: 100%; + } + } +} + +@keyframes lightmove { + + /* 动画关键帧 */ + 0% { + opacity: 1; + transform: translateX(0px); + /* 样式 */ + } + + 50% { + opacity: 0.2; + transform: translateX(170px); + } + + /* 。。。 */ + 100% { + opacity: 1; + transform: translateX(0px); + /* 样式 */ + } +} \ No newline at end of file diff --git a/src/components/legend/index.vue b/src/components/legend/index.vue new file mode 100644 index 0000000..5ca257a --- /dev/null +++ b/src/components/legend/index.vue @@ -0,0 +1,3 @@ +