diff --git a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue index dc15099..0ec1107 100644 --- a/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue +++ b/src/views/oneMap/FloodStuationReview/sqhgBottomBox.vue @@ -308,6 +308,67 @@ .timeList { padding: 12px 20px 10px; overflow: hidden; + .colorRadio{ + float: left; + .btn{ + margin-right:20px; + span{ + width: 8px; + height: 8px; + border-radius: 50%; + margin-right: 5px; + } + div{ + width: 42px; + line-height: 22px; + border: 1px solid rgba(0, 191, 253, 0); + border-radius: 4px; + text-align: center; + font-weight: 400; + font-size: 14px; + } + &.blue{ + span{ + background: rgba(0, 191, 253, 1); + } + div{ + border-color:rgba(0, 191, 253, 1); + color:rgba(0, 191, 253, 1); + background: linear-gradient(0deg, #08324F 0%, #0B3360 100%); + } + } + &.yellow{ + span{ + background:rgba(222, 230, 0, 1); + } + div{ + border-color:rgba(222, 230, 0, 1); + color:rgba(222, 230, 0, 1); + background: linear-gradient(0deg, #4F4B06 0%, #4F4E06 98%); + } + } + &.orange{ + span{ + background:rgba(255, 184, 15, 1); + } + div{ + border-color:rgba(255, 184, 15, 1); + color:rgba(255, 184, 15, 1); + background: linear-gradient(0deg, #4F3D06 0%, #4F3D06 98%); + } + } + &.read{ + span{ + background:rgba(255, 26, 26, 1); + } + div{ + border-color:rgba(255, 26, 26, 1); + color:rgba(255, 26, 26, 1); + background: linear-gradient(0deg, #3E0808 0%, #420808 100%); + } + } + } + } } .playIn { height: 100%;