From dbf87bee3fbf8c702287adf61c20a2073c0ad0d8 Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Sat, 22 May 2021 12:27:47 +0800
Subject: [PATCH] 小程序警情地图
---
public/xcxjingqingmap/css/body.css | 81 +++++++++++++------
public/xcxjingqingmap/xcxmap.html | 101 +++++++++++++------------
public/xcxjingqingmap/js/move.js | 2
public/xcxjingqingmap/img/shiping.png | 0
public/xcxjingqingmap/img/huifang.png | 0
5 files changed, 109 insertions(+), 75 deletions(-)
diff --git a/public/xcxjingqingmap/css/body.css b/public/xcxjingqingmap/css/body.css
index 7499c32..f9b7c31 100644
--- a/public/xcxjingqingmap/css/body.css
+++ b/public/xcxjingqingmap/css/body.css
@@ -17,7 +17,8 @@
overflow: hidden;
/* border: solid 1px springgreen; */
}
-.dingwei{
+
+.dingwei {
position: fixed;
width: 38px;
height: 38px;
@@ -32,11 +33,12 @@
align-items: center;
justify-content: center;
}
+
#seedata {
position: fixed;
bottom: 0;
width: 100%;
- height: 60%;
+ height: 70%;
z-index: 400;
background-color: #fff;
/* opacity: 0.9; */
@@ -59,7 +61,8 @@
justify-content: center;
flex-direction: column;
}
-.title-span{
+
+.title-span {
height: 15%;
}
@@ -72,41 +75,67 @@
} */
.main {
- display: flex;
- justify-content: center;
- border-top: 1px solid rgb(138, 138, 138);
-}
-.el-tabs{
- width: 92%;
-}
-.el-tabs__nav-scroll{
- display: flex;
- justify-content: center;
-}
-.f-main{
- /* border: 1px solid springgreen; */
-}
-.f-m-once{
- /* border: 1px solid rgb(194, 142, 0); */
+ width: 95%;
+ margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
- padding: 5px 0 5px 0
+ flex-direction: column;
+ border-top: 1px solid rgb(138, 138, 138);
}
-.f-m-o-title{
+
+.f-m-once {
+ /* border: 1px solid rgb(194, 142, 0); */
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 0 8px 0
+}
+
+.f-m-o-title {
display: flex;
align-items: center;
width: 40%;
}
-.f-m-o-t-img{
+
+.f-m-o-t-img {
width: 30px;
height: 30px;
padding-right: 10px;
}
-.f-m-o-center{
+
+.f-m-o-center {
width: 60%;
}
-.el-divider{
-margin: 0 auto;
-width: 90%;
+
+.el-divider {
+ margin: 0 auto;
+ width: 90%;
+}
+
+.but {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-around;
+ padding-top: 5px;
+}
+
+.butb {
+ width: 80px;
+ height: 80px;
+ border: 1px solid rgb(46, 118, 228);
+ border-radius: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #fff;
+ background-image: linear-gradient(to bottom, #3CA7F4 , #4D7CEE);
+}
+
+.b-b-img {
+ width: 40px;
+ height: 40px;
}
\ No newline at end of file
diff --git a/public/xcxjingqingmap/img/huifang.png b/public/xcxjingqingmap/img/huifang.png
new file mode 100644
index 0000000..0b8d52f
--- /dev/null
+++ b/public/xcxjingqingmap/img/huifang.png
Binary files differ
diff --git a/public/xcxjingqingmap/img/shiping.png b/public/xcxjingqingmap/img/shiping.png
new file mode 100644
index 0000000..3e32230
--- /dev/null
+++ b/public/xcxjingqingmap/img/shiping.png
Binary files differ
diff --git a/public/xcxjingqingmap/js/move.js b/public/xcxjingqingmap/js/move.js
index 8db422b..11b5fbe 100644
--- a/public/xcxjingqingmap/js/move.js
+++ b/public/xcxjingqingmap/js/move.js
@@ -88,7 +88,7 @@
var chous = Math.abs(that.__yy - that.__sy) > that.__wy / 8;
}
if (chous) {
- that.changeDomPosition(0, 0, (parseFloat(that.__wy / 10) * 3.999));//改变位置
+ that.changeDomPosition(0, 0, (parseFloat(that.__wy / 10) * 2.999));//改变位置
// that.getDomPosition();//抬起获取dom位置/持续停留使用
that.state = 'down';
$('#map').css("height", (index, value) => {//改变地图高度
diff --git a/public/xcxjingqingmap/xcxmap.html b/public/xcxjingqingmap/xcxmap.html
index fc540c3..04d0cba 100644
--- a/public/xcxjingqingmap/xcxmap.html
+++ b/public/xcxjingqingmap/xcxmap.html
@@ -59,54 +59,59 @@
<div class="title-span"> </div>
</div>
<div class="main">
- <el-tabs v-model="activeName" @tab-click="handleClick">
- <el-tab-pane label="警情信息" name="first">
- <div class="f-main">
- <div class="f-m-once">
- <div class="f-m-o-title">
- <img class="f-m-o-t-img" src="./img/ren.png" alt="">
- 使用方:</div>
- <div class="f-m-o-center">{{seedata.deptName}}</div>
- </div>
- <div class="f-m-once">
- <div class="f-m-o-title">
- <img class="f-m-o-t-img" src="./img/ren.png" alt="">
- 接警人:</div>
- <div class="f-m-o-center">{{seedata.alarmPeople}}</div>
- </div>
- <div class="f-m-once">
- <div class="f-m-o-title">
- <img class="f-m-o-t-img" src="./img/dianhua.png" alt="">
- 联系电话:</div>
- <div class="f-m-o-center">{{seedata.phoneNumber}}</div>
- </div>
- <el-divider></el-divider>
- <div class="f-m-once">
- <div class="f-m-o-title">
- <img class="f-m-o-t-img" src="./img/shijian.png" alt="">
- 报警时间:</div>
- <div class="f-m-o-center">{{seedata.alarmTime}}</div>
- </div>
- <div class="f-m-once">
- <div class="f-m-o-title">
- <img class="f-m-o-t-img" src="./img/leixing.png" alt="">
- 报警类型:</div>
- <div class="f-m-o-center">{{seedata.alarmType}}</div>
- </div>
- <el-divider></el-divider>
- <div class="f-m-once">
- <div class="f-m-o-title">
- <img class="f-m-o-t-img" src="./img/beizhu.png" alt="">
- 备注:</div>
- <div class="f-m-o-center">{{seedata.bz}}</div>
- </div>
- </div>
- </el-tab-pane>
- <!-- <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane> -->
- <!-- <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
- <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane> -->
- </el-tabs>
- <!-- {{seedata.jd}}-{{seedata.wd}} -->
+ <div class="f-m-once">
+ <div class="f-m-o-title">
+ <img class="f-m-o-t-img" src="./img/ren.png" alt="">
+ 使用方:
+ </div>
+ <div class="f-m-o-center">{{seedata.deptName}}</div>
+ </div>
+ <div class="f-m-once">
+ <div class="f-m-o-title">
+ <img class="f-m-o-t-img" src="./img/ren.png" alt="">
+ 接警人:
+ </div>
+ <div class="f-m-o-center">{{seedata.alarmPeople}}</div>
+ </div>
+ <div class="f-m-once">
+ <div class="f-m-o-title">
+ <img class="f-m-o-t-img" src="./img/dianhua.png" alt="">
+ 联系电话:
+ </div>
+ <div class="f-m-o-center">{{seedata.phoneNumber}}</div>
+ </div>
+ <el-divider></el-divider>
+ <div class="f-m-once">
+ <div class="f-m-o-title">
+ <img class="f-m-o-t-img" src="./img/shijian.png" alt="">
+ 报警时间:
+ </div>
+ <div class="f-m-o-center">{{seedata.alarmTime}}</div>
+ </div>
+ <div class="f-m-once">
+ <div class="f-m-o-title">
+ <img class="f-m-o-t-img" src="./img/leixing.png" alt="">
+ 报警类型:
+ </div>
+ <div class="f-m-o-center">{{seedata.alarmType}}</div>
+ </div>
+ <el-divider></el-divider>
+ <div class="f-m-once">
+ <div class="f-m-o-title">
+ <img class="f-m-o-t-img" src="./img/beizhu.png" alt="">
+ 备注:
+ </div>
+ <div class="f-m-o-center">{{seedata.bz}}</div>
+ </div>
+ <div class="but">
+ <div class="buta">
+ <img class="b-b-img" src="./img/shiping.png" alt="">
+ </div>
+ <div class="butb">结果反馈</div>
+ <div class="butc">
+ <img class="b-b-img" src="./img/huifang.png" alt="">
+ </div>
+ </div>
</div>
</div>
</div>
--
Gitblit v1.9.3