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 +++++++++++++++++----
src/views/equipmentManagement/equipmentList/components/FormList.vue | 3 +
src/components/IndexHeader.vue | 22 ++++++-----
src/views/equipmentManagement/equipmentList/index.vue | 2
4 files changed, 49 insertions(+), 20 deletions(-)
diff --git a/src/components/IndexHeader.vue b/src/components/IndexHeader.vue
index a5b8d50..e6f9bca 100644
--- a/src/components/IndexHeader.vue
+++ b/src/components/IndexHeader.vue
@@ -265,13 +265,14 @@
.right {
position: relative;
display: flex;
+ justify-content: flex-end;
align-items: center;
.el-input ::v-deep {
input {
- height: 62px;
+ height: 50px;
width: 180px;
- background-color: rgba(255, 255, 255, 0.5);
+ background-color: rgba(255, 255, 255, 0.05) !important;
border: none;
border-radius: 0;
color: #fff;
@@ -282,13 +283,14 @@
}
.el-input__suffix {
- padding-top: 23px;
- padding-right: 23px;
+ padding-top: 17px;
+ padding-right: 19px;
}
-
- .search {
- color: #fff;
- cursor: pointer;
+ .iconList {
+ .search {
+ color: #fff !important;
+ cursor: pointer;
+ }
}
}
@@ -313,8 +315,8 @@
}
.userImg {
- height: 48px;
- width: 48px;
+ height: 28px;
+ width: 28px;
margin: 0 20px;
}
}
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 {
diff --git a/src/views/equipmentManagement/equipmentList/components/FormList.vue b/src/views/equipmentManagement/equipmentList/components/FormList.vue
index 85fb0fb..0e97e60 100644
--- a/src/views/equipmentManagement/equipmentList/components/FormList.vue
+++ b/src/views/equipmentManagement/equipmentList/components/FormList.vue
@@ -455,7 +455,8 @@
<style scoped lang="scss">
.FormList {
- width: 1280px;
+ // width: 100%;
+ min-width: 1280px;
// padding: 0 24px;
// background: #36b24a;
background-color: #1f2a3e;
diff --git a/src/views/equipmentManagement/equipmentList/index.vue b/src/views/equipmentManagement/equipmentList/index.vue
index 94d3a99..9031f0e 100644
--- a/src/views/equipmentManagement/equipmentList/index.vue
+++ b/src/views/equipmentManagement/equipmentList/index.vue
@@ -42,7 +42,7 @@
padding-bottom: 24px;
.breadcrumb {
padding: 24px 0;
- width: 1280px;
+ width: 95%;
// background-color: #34405a;
margin: 0 auto;
display: flex;
--
Gitblit v1.8.0