diff --git a/src/assets/images/pictureOnMap/kaishi.png b/src/assets/images/pictureOnMap/kaishi.png
new file mode 100644
index 0000000..2a620ac
--- /dev/null
+++ b/src/assets/images/pictureOnMap/kaishi.png
Binary files differ

diff --git a/src/assets/images/pictureOnMap/kaishi.png b/src/assets/images/pictureOnMap/kaishi.png
new file mode 100644
index 0000000..2a620ac
--- /dev/null
+++ b/src/assets/images/pictureOnMap/kaishi.png
Binary files differ
diff --git a/src/assets/images/pictureOnMap/zanting.png b/src/assets/images/pictureOnMap/zanting.png
new file mode 100644
index 0000000..6f35e40
--- /dev/null
+++ b/src/assets/images/pictureOnMap/zanting.png
Binary files differ

diff --git a/src/assets/images/pictureOnMap/kaishi.png b/src/assets/images/pictureOnMap/kaishi.png
new file mode 100644
index 0000000..2a620ac
--- /dev/null
+++ b/src/assets/images/pictureOnMap/kaishi.png
Binary files differ
diff --git a/src/assets/images/pictureOnMap/zanting.png b/src/assets/images/pictureOnMap/zanting.png
new file mode 100644
index 0000000..6f35e40
--- /dev/null
+++ b/src/assets/images/pictureOnMap/zanting.png
Binary files differ
diff --git a/src/views/pictureOnMap/page/FloodControlAndDrainage/Jianceyujin/MonitoringWarningRigh/component/RainsIntervalBtn.vue b/src/views/pictureOnMap/page/FloodControlAndDrainage/Jianceyujin/MonitoringWarningRigh/component/RainsIntervalBtn.vue
index ec6db86..de9d5a1 100644
--- a/src/views/pictureOnMap/page/FloodControlAndDrainage/Jianceyujin/MonitoringWarningRigh/component/RainsIntervalBtn.vue
+++ b/src/views/pictureOnMap/page/FloodControlAndDrainage/Jianceyujin/MonitoringWarningRigh/component/RainsIntervalBtn.vue
@@ -96,52 +96,43 @@
 }
 .nf-timeline {
   position: fixed;
-  bottom: 50px;
+  bottom: 20px;
   left: 50%;
   z-index: 100;
   transform: translateX(-50%);
   width: 980px;
   /* height: 200px; */
-  min-height: 80px;
+  min-height: 66px;
   padding: 0px 10px;
   justify-content: flex-start !important;
   align-items: flex-start !important;
+  background: linear-gradient(90deg, rgba(10,36,121,0.8) 0%, rgba(1,28,71,0.6) 100%);
+border-radius: 6px;
+border: 1px solid;
+border-image: linear-gradient(0deg, #47AFFF, #47AFFF) 10 10;
 }
 
 .nf-timeline-buttom {
-  width: 40px;
-  height: 40px;
-  border: 3px solid rgba(12, 89, 165, 1);
-  margin-top: -8px;
+  width: 22px;
+  height: 23px;
+background: url("@/assets/images/pictureOnMap/zanting.png") no-repeat center;
+      background-size: 100% 100%;
+  margin-top: 10px;
   cursor: pointer;
-  border-radius: 100%;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
 }
 
-.nf-timeline-buttom > div {
-  width: 50%;
-  height: 50%;
-  border: 1px solid rgba(12, 89, 165, 1);
-  background: rgba(12, 89, 165, 1);
-  transition: all 0.2s ease-in;
-}
 
-.nf-timeline-play > div {
-  border-top: 8px solid transparent;
-  border-bottom: 8px solid transparent;
-  border-left: 13px solid rgba(12, 89, 165, 1);
-  border-right: 8px solid transparent;
-  background: transparent;
-  /*left: 50%;*/
-  transform: translateX(25%);
-  /*border: 0px solid transparent !important;*/
-  /*border-left: 40px solid rgba(12,89,165,1) !important;*/
+
+.nf-timeline-play {
+   background: url("@/assets/images/pictureOnMap/kaishi.png") no-repeat center;
+      background-size: 100% 100%;
 }
 
 .nf-timeline-list {
   width: calc(100% - 40px);
   height: 80%;
   padding-left: 20px;
+  margin-top: 10px;
 }
 
 .nf-timeline-item {
@@ -155,15 +146,14 @@
   width: 20px;
   height: 20px;
   border-radius: 100%;
-  border: 2px solid rgba(192, 196, 204, 1);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
-  color: rgba(192, 196, 204, 1);
-  cursor: pointer;
+  background: #4D74B0;
+border-radius: 50%;
+  /* cursor: pointer; */
 }
 
 .node-check > .nf-timeline-item-node {
-  border: 2px solid rgba(12, 89, 165, 1) !important;
-  color: rgba(12, 89, 165, 1) !important;
+  background: #00FCFF;
+border-radius: 50%;
 }
 
 .nf-timeline-item-node > span {
@@ -176,13 +166,13 @@
   width: calc(100% - 20px);
   position: relative;
   top: 9px;
-  background: rgba(192, 196, 204, 1);
+  background: #4D74B0;
 }
 
 .nf-timeline-item-line > div {
   height: 100%;
   width: 0;
-  background: rgba(12, 89, 165, 1);
+  background: #00FCFF;
 }
 
 .flex-row {