From f20a554bdb24e9dfde9dc6a69d78595944f61d15 Mon Sep 17 00:00:00 2001
From: mark <mark18340872469@163.com>
Date: 星期二, 25 十月 2022 14:53:57 +0800
Subject: [PATCH] 设备管理 样式调整
---
src/views/equipmentManagement/equipmentList/components/Content.vue | 42 ++++++++++++++++++++++++++++++++++--------
1 files changed, 34 insertions(+), 8 deletions(-)
diff --git a/src/views/equipmentManagement/equipmentList/components/Content.vue b/src/views/equipmentManagement/equipmentList/components/Content.vue
index ebc46aa..977dacb 100644
--- a/src/views/equipmentManagement/equipmentList/components/Content.vue
+++ b/src/views/equipmentManagement/equipmentList/components/Content.vue
@@ -81,7 +81,8 @@
this.map = new AMap.Map(`map${status}`, {
//璁剧疆鍦板浘瀹瑰櫒id
zoom: this.zoom, //鍒濆鍖栧湴鍥剧骇鍒�
- center: this.center //鍒濆鍖栧湴鍥句腑蹇冪偣浣嶇疆
+ center: this.center, //鍒濆鍖栧湴鍥句腑蹇冪偣浣嶇疆
+ mapStyle: "amap://styles/macaron" // macaron whitesmoke
})
//鍒濆鍖栨煡璇㈠湴鐞嗕綅缃彃浠�
@@ -114,7 +115,7 @@
`<div class="nodeMarker" id="node${index}}">` +
'<img class="normal" src="/images/equipmentManagement/default.png">' +
'<img class="selected" src="/images/equipmentManagement/select.png">' +
- `<div class="box"> <div class="name">${item.devName}</div> <div class="property">IP鍦板潃: <span class="data">${item.devIp}</span> </div> <div class="property">璁惧浣嶇疆: <span class="data">${item.province}</span></div><div class="property">瀹夎鏃堕棿: <span class="data">${item.installTime}</span></div></div>`
+ `<div class="box"><div class="box-triangle"></div> <div class=box-txt"> <div class="name">${item.devName}</div> <div class="property">IP鍦板潃: <span class="data">${item.devIp}</span> </div> <div class="property">璁惧浣嶇疆: <span class="data">${item.province}</span></div><div class="property">瀹夎鏃堕棿: <span class="data">${item.installTime}</span></div></div></div>`
;("</div>")
let marker = new this.AMap.Marker({
@@ -163,7 +164,8 @@
position: relative;
box-sizing: border-box;
// padding: 20px;
- width: 1280px;
+ width: 95%;
+ min-width: 1280px;
// background-color: #34405a;
margin: 0 auto;
@@ -189,8 +191,10 @@
}
#map,
#mapFull {
- width: 1232px;
- height: 496px;
+ width: 100%;
+ // height: 496px;
+ min-height: 496px;
+ height: 60vh;
border-radius: 8px;
::v-deep .nodeMarker {
@@ -198,13 +202,29 @@
.selected {
display: none;
}
+ .box-triangle {
+ // box-sizing: border-box;
+ // display: none;
+ // position: absolute;
+ position: absolute;
+ top: -15px;
+ left: 115px;
+
+ height: 0px;
+ width: 0px;
+ // background: red;
+ border-bottom: 8px solid #ffffff;
+ border-top: 8px solid transparent;
+ border-left: 8px solid transparent;
+ border-right: 8px solid transparent;
+ }
.box {
box-sizing: border-box;
display: none;
position: absolute;
padding: 20px 10px;
- top: 40px;
+ top: 66px;
left: -100px;
width: 247px;
height: 160px;
@@ -212,9 +232,15 @@
filter: drop-shadow(0px 2px 16px rgba(0, 43, 106, 0.25));
.name {
- margin-bottom: 14px;
- font-weight: bold;
+ opacity: 1;
+ font-family: PingFangSC-Bold;
font-size: 16px;
+ font-weight: normal;
+ line-height: 24px;
+ letter-spacing: 0px;
+ color: #3d3d3d;
+
+ margin-bottom: 14px;
}
.property {
--
Gitblit v1.8.0