CN-1612 feat: 将页面中<style>标签内的样式移到scss文件中

13 files changed, 1411 insertions, 1333 deletions

diff --git a/src/Login.vue b/src/Login.vue
index d17265af..1cc5554f 100644
--- a/src/Login.vue
+++ b/src/Login.vue
@@ -2,14 +2,11 @@
   <div class="logins">
     <div class="inside">
       <div class="title">
-        <img src="../public/images/logo-title.svg" />
+        <img src="../public/images/logo-title.svg" alt=""/>
       </div>
       <el-form class="login__box">
         <el-form-item>
-          <el-input
-              class="login--input login__input"
-            v-model="username"
-          >
+          <el-input class="login--input login__input" v-model="username">
             <template #prefix>
               <i class="cn-icon cn-icon-user2"></i>
             </template>
@@ -21,7 +18,7 @@
               prefix-icon="Lock"
               type="password"
               @keyup.enter="login"
-            v-model="pin"
+              v-model="pin"
           ></el-input>
         </el-form-item>
         <el-form-item>
@@ -32,14 +29,13 @@
               :class="{'login-btn__license-error':licenseStatus !== 0}"
               @click="login"
               @keyup.enter="login"
-              style="font-size: 16px;"
           >Login
           </el-button>
         </el-form-item>
         <el-form-item v-if="licenseStatus !== 0">
-          <div class="license-error-msg">{{licenseStatusErrMsg}}</div>
+          <div class="license-error-msg">{{ licenseStatusErrMsg }}</div>
           <div class="license-file">
-            <button style="position: relative;" class="license__btn margin-r-20" @click.prevent="downloadFile" @keyup.enter="login">
+            <button class="license__btn margin-r-20" @click.prevent="downloadFile" @keyup.enter="login">
               <i class="cn-icon-download1 cn-icon margin-r-6"></i><span>Download c2v file</span>
             </button>
             <el-upload :action="`${baseUrl}sys/license/upload`"
@@ -53,7 +49,7 @@
                        :on-change="fileChange"
                        :on-success="uploadSuccess"
                        :on-error="uploadError">
-              <button style="position: relative;" class="license__btn" @click.prevent="">
+              <button class="license__btn" @click.prevent="">
                 <i class="cn-icon-upload1 cn-icon margin-r-6"></i><span>Upload license</span>
               </button>
             </el-upload>
@@ -74,6 +70,7 @@ import dayjs from 'dayjs'
 import _ from 'lodash'
 import utc from 'dayjs/plugin/utc'
 import { ref } from 'vue'
+
 dayjs.extend(utc)
 
 export default {
@@ -160,7 +157,7 @@ export default {
       }, error => {
         const $self = this
         const reader = new FileReader()
-        reader.onload = function (event) {
+        reader.onload = function () {
           const responseText = reader.result
           const exception = JSON.parse(responseText)
           if (exception.message) {
@@ -176,13 +173,13 @@ export default {
       if (file.status !== 'ready') return
       if (!_.endsWith(file.name, '.xml')) {
         this.fileList = []
-        this.$message.error('Only support '+ this.fileTypeLimit + ' files')
+        this.$message.error('Only support ' + this.fileTypeLimit + ' files')
       } else {
         this.fileList = fileList.slice(-1)
         this.$refs.licenseUpload.submit()
       }
     },
-    uploadSuccess (response) {
+    uploadSuccess () {
       this.$message.success('Success')
       this.licenseStatus = 1
     },
@@ -234,7 +231,7 @@ export default {
     this.queryAppearance()
     this.checkLicenseStatus()
   },
-  setup (props) {
+  setup () {
     const { currentRoute } = useRouter()
     return {
       loginSuccessPath: currentRoute.value.query.redirect,
@@ -246,156 +243,8 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style>
 .logins {
-  background-color: #000C18;
-  background-size: auto;
-  background-repeat: round;
   background-image: url('../public/images/bg.png');
-  display: flex;
-  height: 100%;
-  justify-content: center;
-  align-items: center;
-}
-
-:deep .el-input__inner {
-  //background-color: #0B325C !important;
-  border: none;
-  //border-radius: 0px;
-  //border-bottom: 1px solid #295688;
-  font-size: 14px;
-  //line-height: 14px;
-}
-:deep .el-input__inner:hover {
-  border-color: #295688;
-}
-:deep .el-input__inner:focus {
-  border-color: #295688;
-}
-.el-button--primary:hover, .el-button--primary:focus, .el-button--primary:active {
-  background: #21B4ED;
-  border-color: #21B4ED;
-  color: #FFFFFF;
-}
-:deep .el-loading-mask {
-  background-color: transparent;
-}
-:deep input {
-  -webkit-text-fill-color: rgba(231,234,237, .8) !important;
-  transition: background-color 500000000000000000s ease-in-out 0s !important;
-  caret-color: #fff ;
-  font-size: 14px;
-}
-.inside {
-  width: 414px;
-  height: fit-content;/*524*/
-  background: #0B325C;
-  border: 1px solid rgba(103,179,245,0.65);
-  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.38);
-  border-radius: 4px;
-}
-.inside {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-.inside > div {
-  display: block;
-}
-
-.title {
-  margin-top: 65px;
-  margin-bottom: 44px;
-  text-align: center;
-}
-.title > img {
-  height: 135px;
-}
-.login__box {
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-  .is-disabled {
-    background: #21B4ED;
-    color: #FFFFFF;
-    opacity: 0.6;
-  }
-  .license-error-msg {
-    color:#c73249;
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    height:40px;
-    width: 100%;
-  }
-  .license-file {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    .license__btn {
-      height: 40px;
-      padding-left:10px;
-      padding-right:10px;
-      min-width: 74px;
-      color: white;
-      background-color: #21B4ED;
-      border: none;
-      border-radius: 4px;
-      outline: none;
-      font-size: 14px;
-      cursor: pointer;
-      transition: background-color linear .2s, color linear .1s;
-    }
-  }
-}
-:deep .el-form-item {
-  width: 334px;
-}
-:deep .el-input__prefix {
-  color: #6DBBFF;
-}
-:deep .el-input__prefix i {
-  width: 17px;
-  font-size: 17px;
-}
-.login__box .el-form-item:nth-child(3){
-  margin-bottom: 0px;
-}
-.login--button {
-  background: #21B4ED;
-  border-radius: 4px;
-  border: 0;
-  font-weight: 400;
-  font-size: 16px;
-  color: #FFFFFF;
-  line-height: 22px;
-  width: 334px;
-  height: 52px;
-  margin-top: 25px;
-  margin-bottom:65px;
-}
-.login-btn__license-error {
-  margin-top: 25px;
-  margin-bottom: 10px;
-  height:40px;
-}
-.login--input {
-  :deep .el-input__wrapper {
-    background-color: rgb(11, 50, 92) !important;
-    box-shadow: none !important;
-    //border-bottom: 1px solid rgba(103,179,245,0.65);
-    border-bottom: 1px solid #295688;
-    border-radius: 0;
-    height: 40px;
-    line-height: 40px;
-    font-size: 14px;
-    padding: 1px 4px 2px 5px;
-  }
-
-  :deep .el-input__wrapper.is-focus {
-    box-shadow: none !important;
-  }
 }
 </style>
diff --git a/src/assets/css/components/components/common/login.scss b/src/assets/css/components/components/common/login.scss
new file mode 100644
index 00000000..29ea43b8
--- /dev/null
+++ b/src/assets/css/components/components/common/login.scss
@@ -0,0 +1,154 @@
+$color-white: var(--el-color-white);
+$border-radius: var(--el-fill-color-blank);
+$color-btn: #21B4ED;
+$color-bg: #0B325C;
+$color-input-icon: #6DBBFF;
+$color-input-border: #295688;
+
+.logins {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background-color: var(--el-color-black);
+  background-size: auto;
+  background-repeat: round;
+  //background-image: url("../public/images/bg.png");
+
+  .el-input__inner {
+    border: none;
+    font-size: 14px;
+  }
+
+  .el-loading-mask {
+    background-color: transparent;
+  }
+
+  input {
+    font-size: 14px;
+    -webkit-text-fill-color: rgba(231, 234, 237, .8) !important;
+    transition: background-color 500000000000000000s ease-in-out 0s !important;
+    caret-color: $color-white;
+  }
+
+  .inside {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width: 414px;
+    height: fit-content;
+    border: 1px solid rgba(103, 179, 245, 0.65);
+    background: $color-bg;
+    border-radius: $border-radius;
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.38);
+
+    .title {
+      margin-top: 65px;
+      margin-bottom: 44px;
+      text-align: center;
+
+      img {
+        height: 135px;
+      }
+    }
+
+    .login__box {
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      align-items: center;
+
+      .is-disabled {
+        color: $color-white;
+        background: $color-btn;
+        opacity: 0.6;
+      }
+
+      .license-error-msg {
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        width: 100%;
+        height: 40px;
+        color: var(--el-color-error);
+      }
+
+      .license-file {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+
+        .license__btn {
+          position: relative;
+          min-width: 74px;
+          height: 40px;
+          padding-left: 10px;
+          padding-right: 10px;
+          border: none;
+          background-color: $color-btn;
+          color: $color-white;
+          font-size: 14px;
+          border-radius: $border-radius;
+          outline: none;
+          cursor: pointer;
+          transition: background-color linear .2s, color linear .1s;
+        }
+      }
+    }
+
+    .el-form-item {
+      width: 334px;
+    }
+
+    .el-input__prefix {
+      color: $color-input-icon;
+    }
+
+    .el-input__prefix i {
+      width: 17px;
+      font-size: 17px;
+    }
+
+    .login__box .el-form-item:nth-child(3) {
+      margin-bottom: 0;
+    }
+
+    .login--button {
+      width: 334px;
+      height: 52px;
+      line-height: 22px;
+      margin-top: 25px;
+      margin-bottom: 65px;
+      border: 0;
+      background: $color-btn;
+      color: $color-white;
+      font-size: 16px;
+      font-weight: 400;
+      border-radius: $border-radius;
+    }
+
+    .login-btn__license-error {
+      height: 40px;
+      margin-top: 25px;
+      margin-bottom: 10px;
+    }
+
+    .login--input {
+      .el-input__wrapper {
+        height: 40px;
+        line-height: 40px;
+        padding: 1px 4px 2px 5px;
+        border-bottom: 1px solid $color-input-border;
+        background-color: $color-bg;
+        font-size: 14px;
+        border-radius: 0;
+        box-shadow: none;
+      }
+
+      .el-input__wrapper.is-focus {
+        box-shadow: none !important;
+      }
+    }
+  }
+}
diff --git a/src/assets/css/components/components/common/simple-loading.scss b/src/assets/css/components/components/common/simple-loading.scss
new file mode 100644
index 00000000..098b63ef
--- /dev/null
+++ b/src/assets/css/components/components/common/simple-loading.scss
@@ -0,0 +1,191 @@
+$color-loading: #3c76cc;
+
+.simple-loading {
+  position: absolute;
+  z-index: 1;
+
+  &.simple-loading--top, &.simple-loading--top-start, &.simple-loading--top-end, &.simple-loading--left-start, &.simple-loading--right-start {
+    top: 2px
+  }
+
+  &.simple-loading--bottom, &.simple-loading--bottom-start, &.simple-loading--bottom-end, &.simple-loading--left-end, &.simple-loading--right-end {
+    bottom: 2px;
+  }
+
+  &.simple-loading--left, &.simple-loading--top-start, &.simple-loading--bottom-start, &.simple-loading--left-start, &.simple-loading--left-end {
+    left: 2px
+  }
+
+  &.simple-loading--right, &.simple-loading--top-end, &.simple-loading--bottom-end, &.simple-loading--right-start, &.simple-loading--right-end {
+    right: 2px;
+  }
+
+  &.simple-loading--top, &.simple-loading--bottom {
+    left: 50%;
+  }
+
+  &.simple-loading--left, &.simple-loading--right {
+    top: 50%;
+  }
+
+  &.simple-loading--top {
+    .simple-loading__box {
+      transform: translateX(-50%);
+    }
+  }
+
+  &.simple-loading--left {
+    .simple-loading__box {
+      transform: translateY(-50%);
+    }
+  }
+
+  &.simple-loading--top-end, &.simple-loading--right-start {
+    .simple-loading__box {
+      transform: translateX(-100%);
+    }
+  }
+
+  &.simple-loading--right {
+    .simple-loading__box {
+      transform: translate(-100%, -50%);
+    }
+  }
+
+  &.simple-loading--bottom-start, &.simple-loading--left-end {
+    .simple-loading__box {
+      transform: translateY(-100%);
+    }
+  }
+
+  &.simple-loading--bottom {
+    .simple-loading__box {
+      transform: translate(-50%, -100%);
+    }
+  }
+
+  &.simple-loading--bottom-end, &.simple-loading--right-end {
+    .simple-loading__box {
+      transform: translate(-100%, -100%);
+    }
+  }
+
+  &.simple-loading--center {
+    left: 50%;
+    top: 50%;
+
+    .simple-loading__box {
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  @keyframes simple-loading__inner {
+    0% {
+      opacity: 1
+    }
+    100% {
+      opacity: 0
+    }
+  }
+
+  .simple-loading__box {
+    position: absolute;
+    display: inline-block;
+    overflow: hidden;
+    background: transparent;
+
+    &.simple-loading--default {
+      width: 27px;
+      height: 27px;
+
+      .simple-loading__inner {
+        div {
+          width: 6px;
+          height: 6px;
+          border-radius: 3px / 3px;
+          transform-origin: 3px 13px;
+        }
+      }
+    }
+
+    &.simple-loading--small {
+      width: 20px;
+      height: 20px;
+
+      .simple-loading__inner {
+        div {
+          width: 5px;
+          height: 5px;
+          border-radius: 3px / 3px;
+          transform-origin: 0 9px;
+        }
+      }
+    }
+
+    .simple-loading__inner {
+      width: 100%;
+      height: 100%;
+      position: relative;
+      transform: translateZ(0) scale(1);
+      backface-visibility: hidden;
+      transform-origin: 0 0;
+
+      div {
+        left: 10px;
+        top: 0;
+        position: absolute;
+        animation: simple-loading__inner linear 1s infinite;
+        background: $color-loading;
+        box-sizing: content-box;
+      }
+
+      div:nth-child(1) {
+        transform: rotate(0deg);
+        animation-delay: -0.875s;
+        background: $color-loading;
+      }
+
+      div:nth-child(2) {
+        transform: rotate(45deg);
+        animation-delay: -0.75s;
+        background: $color-loading;
+      }
+
+      div:nth-child(3) {
+        transform: rotate(90deg);
+        animation-delay: -0.625s;
+        background: $color-loading;
+      }
+
+      div:nth-child(4) {
+        transform: rotate(135deg);
+        animation-delay: -0.5s;
+        background: $color-loading;
+      }
+
+      div:nth-child(5) {
+        transform: rotate(180deg);
+        animation-delay: -0.375s;
+        background: $color-loading;
+      }
+
+      div:nth-child(6) {
+        transform: rotate(225deg);
+        animation-delay: -0.25s;
+        background: $color-loading;
+      }
+
+      div:nth-child(7) {
+        transform: rotate(270deg);
+        animation-delay: -0.125s;
+        background: $color-loading;
+      }
+
+      div:nth-child(8) {
+        transform: rotate(315deg);
+        animation-delay: 0s;
+        background: $color-loading;
+      }
+    }
+  }
+}
diff --git a/src/assets/css/components/components/common/time-line.scss b/src/assets/css/components/components/common/time-line.scss
new file mode 100644
index 00000000..4b74dd97
--- /dev/null
+++ b/src/assets/css/components/components/common/time-line.scss
@@ -0,0 +1,49 @@
+.time-line {
+  width: 100%;
+  height: 40px !important;
+  padding: 0 6px;
+  position: relative;
+
+  .time-line-slider {
+    position: absolute;
+    width: calc(100% - 16px);
+    height: 40px;
+    top: -6px;
+
+    .el-slider__runway {
+      padding: 0 6px;
+      height: 40px;
+      background-color: rgba(0, 0, 0, 0);
+      margin: 0;
+
+      .el-slider__bar {
+        background-color: rgba(0, 0, 0, 0);
+      }
+
+      .el-slider__button-wrapper {
+        width: 10px;
+        height: 10px;
+        margin-top: 7px;
+      }
+
+      .el-slider__button {
+        width: 0;
+        height: 0;
+        border-color: var(--el-color-black) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
+        border-style: solid;
+        border-width: 8px 8px 0 8px;
+        background-color: rgba(0, 0, 0, 0);
+        border-radius: 0;
+      }
+    }
+  }
+
+  .time-line-container {
+    height: 40px;
+    line-height: 40px;
+    background-color: rgba(255, 255, 255, 0.50);
+    display: flex;
+    justify-content: space-between;
+    padding: 0 6px;
+  }
+}
diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss
index deb46747..6a7456d3 100644
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -78,5 +78,12 @@
 @import "views/detections/detection-table";
 @import "views/detections/detection-create/detection-form";
 @import "views/detections/detection-create/detection-form-setting";
+@import "views/detections/detection-create/detection-history";
 
 @import "views/entityExplorer/helper-info";
+
+@import "./components/common/time-line";
+@import "./components/common/login";
+@import "./components/common/simple-loading";
+
+@import "views/location/location";
diff --git a/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss b/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss
index b2423899..ae1a5046 100644
--- a/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss
+++ b/src/assets/css/components/views/charts2/entityDetailSubscriberMap.scss
@@ -1,4 +1,12 @@
 $text-color-primary: var(--el-text-color-primary);
+$color-white: var(--el-color-white);
+$color-inactive: var(--el-color-info-light-5);
+$color-regular: var(--el-text-color-regular);
+$color-text-primary: var(--el-text-color-primary);
+$color-human: #233447; // 以下是颜色暂无替代的
+$color-base-station: #585B5F;
+$color-circle: #DE3434;
+$color-highlight: #CC4444;
 
 .subscriber-map {
   height: 100%;
@@ -6,6 +14,7 @@ $text-color-primary: var(--el-text-color-primary);
   svg {
     fill: var(--el-fill-color-blank);
   }
+
   .subscriber-map-header {
     height: 34px;
     padding-bottom: 10px;
@@ -20,6 +29,7 @@ $text-color-primary: var(--el-text-color-primary);
       overflow: hidden;
     }
   }
+
   .subscriber-map-body {
     position: relative;
     border: 1px solid var(--el-border-color-light);
@@ -33,6 +43,7 @@ $text-color-primary: var(--el-text-color-primary);
       .maplibregl-canvas:focus-visible {
         outline: none;
       }
+
       .map-marker {
         display: flex;
         align-items: center;
@@ -50,7 +61,7 @@ $text-color-primary: var(--el-text-color-primary);
         }
 
         &.map-marker--human {
-          background-color: #233447;
+          background-color: $color-human;
           cursor: pointer;
 
           svg {
@@ -58,34 +69,38 @@ $text-color-primary: var(--el-text-color-primary);
             height: 14px;
           }
         }
+
         &.map-marker--base-station {
-          background-color: #585B5F;
+          background-color: $color-base-station;
 
           svg {
             width: 12px;
             height: 12px;
           }
         }
+
         &.map-marker--hover {
           width: 30px;
           height: 30px;
-          border: 2px solid var(--el-color-white);
+          border: 2px solid $color-white;
           z-index: 2;
 
           &.map-marker--human svg {
             width: 21px;
             height: 21px;
           }
+
           &.map-marker--base-station svg {
             width: 18px;
             height: 18px;
           }
         }
+
         &.map-marker--highlight {
           width: 30px;
           height: 30px;
-          border: 2px solid var(--el-color-white);
-          background-color: rgb(204,68,68);
+          border: 2px solid $color-white;
+          background-color: $color-highlight;
           z-index: 3;
 
           svg {
@@ -94,6 +109,7 @@ $text-color-primary: var(--el-text-color-primary);
           }
         }
       }
+
       .map-tracking-marker {
         width: 36px;
         height: 36px;
@@ -101,7 +117,7 @@ $text-color-primary: var(--el-text-color-primary);
         align-items: center;
         justify-content: center;
         animation: pulse 2s infinite;
-        background-color: rgba(204,68,68,0.50);
+        background-color: rgba(204, 68, 68, 0.50);
         border-radius: 50%;
 
         .tracking-marker__inner-circle {
@@ -110,7 +126,7 @@ $text-color-primary: var(--el-text-color-primary);
           display: flex;
           align-items: center;
           justify-content: center;
-          background-color: rgba(204,68,68,0.80);
+          background-color: rgba(204, 68, 68, 0.80);
           border-radius: 50%;
 
           svg {
@@ -120,6 +136,7 @@ $text-color-primary: var(--el-text-color-primary);
         }
       }
     }
+
     .panel-chart__no-data {
       height: calc(100% - 46px);
     }
@@ -142,6 +159,7 @@ $text-color-primary: var(--el-text-color-primary);
           .subscriber__body {
             padding: 0 12px;
             margin-top: -10px;
+
             .body__item {
               display: flex;
 
@@ -152,10 +170,11 @@ $text-color-primary: var(--el-text-color-primary);
                 font-size: 12px;
                 color: $text-color-primary;
               }
+
               .item__value {
                 font-size: 12px;
                 font-weight: bold;
-                color: #233447;
+                color: $color-human;
               }
             }
 
@@ -170,9 +189,11 @@ $text-color-primary: var(--el-text-color-primary);
                 height: 38px;
                 line-height: 38px;
               }
+
               .item-record__info {
 
               }
+
               .item-record__timeline {
                 margin-left: 6px;
 
@@ -187,20 +208,24 @@ $text-color-primary: var(--el-text-color-primary);
 
                   .el-timeline-item {
                     padding-bottom: 0;
+
                     .el-timeline-item__tail {
-                      border-left: 2px dotted #cccccc;
+                      border-left: 2px dotted $color-inactive;
                       margin-left: 2px;
                     }
+
                     .el-timeline-item__node--normal {
-                      background-image: radial-gradient(#DE3434 20%, transparent);
-                      outline: #F7F7F7 solid 6px;
+                      background-image: radial-gradient($color-circle 20%, transparent);
+                      outline: var(--cn-bg-color-lighter) solid 6px;
                       margin-left: 2px;
                     }
                   }
+
                   .el-timeline-item:last-child {
                     padding-bottom: 0;
                   }
                 }
+
                 .timeline__info {
                   display: flex;
                   padding-bottom: 10px;
@@ -208,56 +233,63 @@ $text-color-primary: var(--el-text-color-primary);
                   .timeline__info--circle {
                     display: flex;
                     flex-direction: column;
+
                     .info__circle {
                       width: 17px;
                       height: 17px;
                       margin-left: -2px;
                       border-radius: 50%;
-                      background-image: radial-gradient(#DE3434 20%, transparent);
-                      outline: rgba(222,52,52,0.30) solid 4px;
+                      background-image: radial-gradient($color-circle 20%, transparent);
+                      outline: rgba(222, 52, 52, 0.30) solid 4px;
                       margin-top: 2px;
                     }
+
                     .info__line {
-                      border-left: 2px #cccccc dotted;
+                      border-left: 2px $color-inactive dotted;
                       height: 34px;
                       margin-left: 6px;
                       transition: all var(--el-transition-duration-fast);
                     }
                   }
+
                   .timeline__info--item {
                     padding-left: 13px;
                     display: flex;
                     flex-direction: column;
                     font-size: 12px;
-                    color: #666666;
+                    color: $color-regular;
 
                     .info--item__value {
-                      color: #333;
+                      color: $color-text-primary;
                       font-weight: 500;
                       margin-left: 4px;
                     }
                   }
                 }
+
                 .timeline__item {
                   display: flex;
                   flex-direction: column;
                   font-size: 12px;
-                  color: #666666;
+                  color: $color-regular;
 
                   .item__value {
-                    color: #333;
+                    color: $color-text-primary;
                     font-weight: 500;
                     margin-left: 4px;
                   }
                 }
+
                 .item-record__btn, .item-record__btn-disabled {
                   padding-right: 6px;
                   cursor: pointer;
                   text-align: center;
                 }
+
                 .item-record__btn-disabled {
                   cursor: no-drop;
                 }
+
                 .scroll-view {
                   width: 100%;
                   height: 604px;
@@ -272,15 +304,17 @@ $text-color-primary: var(--el-text-color-primary);
                     .item-circle {
                       display: flex;
                       flex-direction: column;
+
                       .circle-circle {
                         width: 10px;
                         height: 10px;
                         margin-left: 2px;
                         border-radius: 50%;
-                        background-color: #DE3434;
+                        background-color: $color-circle;
                       }
+
                       .circle-line {
-                        border-left: 2px #cccccc dotted;
+                        border-left: 2px $color-inactive dotted;
                         height: 34px;
                         margin-left: 6px;
                         margin-top: 6px;
@@ -292,16 +326,17 @@ $text-color-primary: var(--el-text-color-primary);
                       display: flex;
                       flex-direction: column;
                       font-size: 12px;
-                      color: #666666;
+                      color: $color-regular;
                       padding-left: 16px;
 
                       .item__value {
-                        color: #333;
+                        color: $color-text-primary;
                         font-weight: 500;
                         margin-left: 4px;
                       }
                     }
                   }
+
                   .scroll-list {
                     position: absolute;
                     top: 0;
@@ -319,10 +354,10 @@ $text-color-primary: var(--el-text-color-primary);
 
   .subscriber-map-point-tooltip {
     position: fixed;
-    background-color: white;
+    background-color: $color-white;
     width: 200px;
-    border: 1px solid #C5C5C5;
-    box-shadow: -1px 1px 10px -1px rgba(205,205,205,0.85);
+    border: 1px solid var(--el-border-color-light);
+    box-shadow: -1px 1px 10px -1px rgba(205, 205, 205, 0.85);
     border-radius: 2px;
 
     .subscriber-map-point-tooltip__time {
@@ -331,6 +366,7 @@ $text-color-primary: var(--el-text-color-primary);
       color: $text-color-primary;
       font-weight: bold;
     }
+
     .subscriber-map-point-tooltip__coordinates {
       padding: 0 10px 10px;
 
@@ -340,8 +376,9 @@ $text-color-primary: var(--el-text-color-primary);
         .coordinate__label {
           width: 115px;
           font-size: 12px;
-          color: #575757;
+          color: $color-regular;
         }
+
         .coordinate__value {
           font-size: 12px;
           color: $text-color-primary;
@@ -350,10 +387,11 @@ $text-color-primary: var(--el-text-color-primary);
       }
     }
   }
+
   .geo-analysis__hexagon-tooltip {
     position: fixed;
-    background-color: rgba(255,255,255,0.80);
-    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
+    background-color: rgba(255, 255, 255, 0.80);
+    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5);
     border-radius: 2px;
     min-width: 185px;
     z-index: 3;
@@ -362,25 +400,28 @@ $text-color-primary: var(--el-text-color-primary);
     }*/
     &.geo-analysis__hexagon-tooltip--human {
       .icon__box {
-        background-color: #233447;
+        background-color: $color-human;
       }
     }
+
     &.geo-analysis__hexagon-tooltip--base-station {
       .icon__box {
-        background-color: #585B5F;
+        background-color: $color-base-station;
       }
+
       .hexagon-tooltip__body {
         .body__item .item__label {
           width: 140px;
         }
       }
     }
+
     .hexagon-tooltip__header {
       position: relative;
       display: flex;
       flex-direction: column;
       padding: 10px 0 10px 63px;
-      color: white;
+      color: $color-white;
 
       .header__icon {
         position: absolute;
@@ -396,13 +437,16 @@ $text-color-primary: var(--el-text-color-primary);
           border-radius: 50%;
         }
       }
+
       .header__title {
         font-size: 16px;
       }
+
       .header__content {
         font-size: 14px;
       }
     }
+
     .hexagon-tooltip__body {
       padding: 8px 18px;
 
@@ -417,9 +461,10 @@ $text-color-primary: var(--el-text-color-primary);
           width: 8px;
           height: 8px;
           border-radius: 50%;
-          background-color: #DE3434;
+          background-color: $color-circle;
         }
       }
+
       .body__item {
         display: flex;
 
@@ -430,12 +475,14 @@ $text-color-primary: var(--el-text-color-primary);
           font-size: 12px;
           color: $text-color-primary;
         }
+
         .item__value {
           font-size: 12px;
           font-weight: bold;
-          color: #233447;
+          color: $color-human;
         }
       }
+
       .body__tracking {
         padding-top: 6px;
         font-size: 12px;
diff --git a/src/assets/css/components/views/detections/detection-create/detection-history.scss b/src/assets/css/components/views/detections/detection-create/detection-history.scss
new file mode 100644
index 00000000..33b88c34
--- /dev/null
+++ b/src/assets/css/components/views/detections/detection-create/detection-history.scss
@@ -0,0 +1,73 @@
+.history-top-key {
+  width: 396px;
+  height: 520px;
+
+  .el-drawer__body {
+    border: 1px var(--el-border-color-light) solid;
+  }
+
+  .key-header {
+    height: 41px;
+    background: var(--cn-bg-color-lighter);
+    box-shadow: 0 1px 0 0 var(--el-border-color-light);
+    border-radius: 2px 2px 0 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 12px;
+    font-family: NotoSansHans-Medium;
+    font-size: 14px;
+    color: var(--el-text-color-primary);
+    font-weight: 500;
+
+    i {
+      font-size: 12px;
+      color: var(--el-text-color-regular);
+      cursor: pointer;
+    }
+  }
+
+  .key-search {
+    margin-left: 12px;
+    margin-top: 6px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .key-search-icon {
+      font-size: 13px;
+      color: var(--el-color-info);
+    }
+
+    .key-refresh {
+      margin: 0 10px;
+      color: var(--el-color-business);
+      font-size: 14px;
+      height: 28px;
+      line-height: 28px;
+      cursor: pointer;
+    }
+  }
+
+  .key-total {
+    margin: 10px 12px;
+    font-family: NotoSansSChineseRegular;
+    font-size: 14px;
+    color: var(--el-color-info);
+    line-height: 21px;
+    font-weight: 400;
+
+    .key-total-number {
+      color: var(--el-text-color-regular);
+      margin-left: 4px;
+    }
+  }
+
+  .el-table .key-click-row {
+    background: var(--el-border-color-extra-light) !important;
+  }
+
+  .chart-error__setting {
+    line-height: 0;
+  }
+}
diff --git a/src/assets/css/components/views/location/location.scss b/src/assets/css/components/views/location/location.scss
new file mode 100644
index 00000000..549abf7c
--- /dev/null
+++ b/src/assets/css/components/views/location/location.scss
@@ -0,0 +1,836 @@
+$color-white: var(--el-color-white);
+$color-business: var(--el-color-business);
+$color-inactive: var(--el-color-info-light-5);
+$color-regular: var(--el-text-color-regular);
+$color-text-primary: var(--el-text-color-primary);
+$color-primary: var(--el-color-primary);
+$color-human: #233447; // 以下是颜色暂无替代的
+$color-circle: #DE3434;
+$color-base-station: #585B5F;
+$color-search-follow: #6f6f6e;
+$color-highlight: #CC4444;
+
+.geo-analysis {
+  display: flex;
+  flex-direction: column;
+  padding: 0 20px 20px;
+  position: relative;
+
+  .location-tabs {
+    .traceTracking-tabs_label {
+      display: flex;
+      flex-display: row;
+
+      .traceTracking-num {
+        margin-top: 5px;
+        border-radius: 10px;
+        font-size: 12px;
+        color: $color-white;
+        font-weight: 500;
+        height: 20px;
+        width: fit-content;
+        min-width: 20px;
+        padding: 0 5px 0 5px;
+        line-height: 20px;
+        text-align: center;
+        background: var(--el-color-danger);
+      }
+    }
+  }
+
+  svg {
+    fill: $color-white;
+  }
+
+  .maplibregl-canvas:focus-visible {
+    outline: none;
+  }
+
+  .geo-tools {
+    position: absolute;
+    display: flex;
+    top: 11px;
+    right: 20px;
+
+    .location__select {
+      width: 250px;
+      margin-right: 10px;
+
+      .location__select-empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 40px;
+        padding: 10px 0;
+        color: var(--el-color-info);
+        font-size: 12px;
+        text-align: center;
+
+        .padding-t-10 {
+          padding-top: 10px;
+        }
+      }
+    }
+
+    .el-select .el-input__inner {
+      cursor: text;
+    }
+
+    .el-select .el-input .el-select__caret {
+      cursor: text;
+    }
+
+    .panel__time {
+      display: flex;
+    }
+
+    .el-select {
+      .search-active {
+        float: left;
+        border-radius: 3px;
+        width: 6px;
+        height: 6px;
+        margin-right: 10px;
+        position: relative;
+        top: 50%;
+        transform: translateY(-50%);
+        text-align: center;
+      }
+
+      .search-value {
+        font-size: 14px;
+        margin-right: 20px;
+      }
+
+      .search-id {
+        color: var(--el-color-info);
+      }
+
+      .search-follow__icon {
+        position: absolute;
+        top: 50%;
+        right: 10px;
+        transform: translateY(-50%);
+        color: $color-search-follow;
+        margin-right: 10px;
+        text-align: center;
+
+        i {
+          font-size: 12px;
+        }
+      }
+
+      .search-content {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        justify-content: center;
+      }
+
+      .active-icon {
+        background: $color-business;
+      }
+
+      .inactive-icon {
+        background: $color-inactive;
+      }
+
+      .search-select {
+        max-height: 250px;
+      }
+
+      .search-select .el-scrollbar__wrap {
+        max-height: 250px;
+        overflow-y: auto;
+      }
+
+      .el-select-dropdown .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view.el-select-dropdown__list .el-select-dropdown__item {
+        position: relative;
+        height: 48px;
+        line-height: 16px;
+      }
+    }
+  }
+
+  .el-tabs {
+    .el-tabs__header {
+      margin-bottom: 0;
+    }
+
+    .el-tabs__nav-wrap::after {
+      height: 0;
+    }
+
+    .el-tabs__active-bar {
+      height: 3px;
+      background-color: $color-primary;
+      bottom: 1px;
+    }
+
+    .el-tabs__item {
+      &.is-active {
+        color: $color-primary;
+      }
+
+      height: 50px;
+      line-height: 50px;
+      font-size: 20px;
+      color: $color-text-primary;
+    }
+  }
+
+  .geo-analysis__container {
+    height: calc(100% - 50px);
+    display: flex;
+    position: relative;
+
+    .analysis-map {
+      flex: 1;
+      position: relative;
+
+      #analysisMap {
+        border-radius: 2px;
+        height: 100%;
+        width: 100%;
+      }
+
+      .maplibregl-ctrl-bottom-right {
+        top: 0;
+        left: 0;
+        bottom: unset;
+        right: unset;
+      }
+
+      .map-marker {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        cursor: default;
+        padding: 0;
+        transition: height .1s linear, width .1s linear;
+
+        svg {
+          transition: height .1s linear, width .1s linear;
+          fill: $color-white;
+        }
+
+        &.map-marker--human {
+          background-color: $color-human;
+          cursor: pointer;
+
+          svg {
+            width: 14px;
+            height: 14px;
+          }
+        }
+
+        &.map-marker--base-station {
+          background-color: $color-base-station;
+
+          svg {
+            width: 12px;
+            height: 12px;
+          }
+        }
+
+        &.map-marker--hover {
+          width: 30px;
+          height: 30px;
+          border: 2px solid $color-white;
+          z-index: 2;
+
+          &.map-marker--human svg {
+            width: 21px;
+            height: 21px;
+          }
+
+          &.map-marker--base-station svg {
+            width: 18px;
+            height: 18px;
+          }
+        }
+
+        &.map-marker--highlight {
+          width: 30px;
+          height: 30px;
+          border: 2px solid $color-white;
+          background-color: $color-highlight;
+          z-index: 3;
+
+          svg {
+            width: 21px;
+            height: 21px;
+          }
+        }
+      }
+
+      .map-tracking-marker {
+        width: 36px;
+        height: 36px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        animation: pulse 2s infinite;
+        background-color: rgba(204, 68, 68, 0.50);
+        border-radius: 50%;
+
+        .tracking-marker__inner-circle {
+          width: 25px;
+          height: 25px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          background-color: rgba(204, 68, 68, 0.80);
+          border-radius: 50%;
+
+          svg {
+            width: 20px;
+            height: 20px;
+          }
+        }
+      }
+    }
+
+    .map-time-line {
+      position: absolute;
+      bottom: 0;
+      left: -6px;
+      width: calc(100% - 318px);
+    }
+
+    .analysis-statistics {
+      width: 330px;
+      overflow-y: auto;
+      padding-right: 5px;
+
+      .analysis-statistics__chart {
+        margin: 0 0 10px 20px;
+        height: 148px;
+        background: rgba(113, 113, 113, 0.06);
+        border: 1px solid var(--el-border-color-light);
+        border-radius: 4px;
+        position: relative;
+
+        .chart__header {
+          padding: 8px 0 0 10px;
+          color: $color-text-primary;
+          font-size: 16px;
+        }
+
+        .chart__body {
+          display: flex;
+          flex-direction: row;
+          width: 100%;
+          height: calc(100% - 32px);
+
+          .chart__legend {
+            width: calc(60% - 22px);
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+
+            .legend-item {
+              display: flex;
+              flex-direction: row;
+              justify-content: left;
+              align-items: center;
+              padding-top: 2px;
+              padding-bottom: 2px;
+
+              .legend-icon {
+                width: 16px;
+                height: 6px;
+                border-radius: 2px;
+                margin-right: 10px;
+              }
+
+              .legend-range {
+                margin-right: 40px;
+                width: 54px;
+                font-family: Helvetica;
+                font-size: 12px;
+                color: $color-regular;
+                line-height: 12px;
+                font-weight: 400;
+              }
+
+              .legend-count {
+                font-family: Helvetica;
+                font-size: 12px;
+                color: $color-text-primary;
+                line-height: 12px;
+                font-weight: 400;
+              }
+            }
+          }
+        }
+
+        .chart__statistics {
+          display: flex;
+          height: 20px;
+          padding-left: 10px;
+
+          .statistics-number {
+            margin-right: 8px;
+            color: $color-text-primary;
+            font-size: 16px;
+            line-height: 22px;
+          }
+
+          .statistics-trend {
+            padding: 0 10px;
+            background: var(--el-color-success);
+            border-radius: 10px;
+            text-align: center;
+            font-size: 12px;
+            color: $color-white;
+          }
+        }
+
+        .chart__drawing {
+          height: 100%;
+          width: calc(40% + 12px);
+          margin-right: 10px;
+        }
+
+        .chart-line__drawing {
+          height: calc(100% - 32px);
+        }
+
+        #activeSubscribersChart {
+          height: calc(100% - 52px);
+        }
+      }
+
+      .analysis-statistics__title {
+        position: relative;
+        margin-bottom: 10px;
+        padding-left: 20px;
+        font-size: 16px;
+        color: $color-text-primary;
+      }
+
+      .analysis-statistics__no-tracking-tip {
+        padding: 0 20px;
+        cursor: pointer;
+        color: $color-primary;
+        text-decoration: underline;
+      }
+
+      .analysis-statistics__subscribers {
+        padding-left: 20px;
+
+        .analysis-statistics__subscriber {
+          margin-bottom: 10px;
+
+          &:last-of-type {
+            margin-bottom: 0;
+          }
+
+          &.analysis-statistics__subscriber--active {
+            border: 1px solid $color-business;
+            box-shadow: 0 1px 3px 0 $color-business;
+          }
+
+          background-color: var(--cn-bg-color-lighter);
+          border: 1px solid var(--el-border-color-light);
+          border-radius: 2px;
+
+          .subscriber__header {
+            background-color: $color-business;
+
+            &.subscriber__header-inactive {
+              background-color: $color-inactive;
+            }
+          }
+
+          .subscriber__header {
+            position: relative;
+            flex-direction: column;
+            padding: 6px 0 0 70px;
+            color: $color-white;
+            height: 58px;
+
+            .header__icon {
+              position: absolute;
+              left: 20px;
+              top: 14px;
+
+              .icon__box {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 30px;
+                width: 30px;
+                background-color: $color-human;
+                border-radius: 50%;
+              }
+            }
+
+            .header__right {
+              display: flex;
+              flex-direction: row;
+              justify-content: space-between;
+
+              .header-msisdn {
+                display: flex;
+                flex-direction: column;
+
+                .header__title {
+                  font-size: 16px;
+                }
+
+                .header__content {
+                  font-size: 14px;
+                }
+              }
+
+              .header__operation {
+                display: flex;
+                flex-direction: row;
+                align-items: center;
+
+                .trajectory-text {
+                  margin-right: 12px;
+                  font-family: Helvetica-Bold;
+                  font-size: 12px;
+                  color: $color-human;
+                  font-weight: 700;
+                  cursor: pointer;
+
+                  i {
+                    font-size: 12px !important;
+                    font-weight: bolder;
+                    margin-right: 3px;
+                    color: $color-human;
+                  }
+                }
+
+                .cancel-follow {
+                  margin-right: 14px;
+
+                  i {
+                    cursor: pointer;
+                    font-size: 8px;
+                  }
+                }
+              }
+            }
+          }
+
+          .subscriber__body {
+            padding: 10px 18px;
+
+            .body__item {
+              display: flex;
+
+              .item__label {
+                padding-right: 10px;
+                text-align: right;
+                width: 60px;
+                font-size: 12px;
+                color: $color-text-primary;
+              }
+
+              .item__value {
+                font-size: 12px;
+                font-weight: bold;
+                color: $color-human;
+              }
+            }
+
+            .body-item-record {
+              margin-top: 10px;
+
+              .item-record__header {
+                font-family: Helvetica;
+                font-size: 16px;
+                color: $color-text-primary;
+                font-weight: 400;
+                height: 38px;
+                line-height: 38px;
+              }
+
+              .item-record__info {
+
+              }
+
+              .item-record__timeline {
+                margin-left: 6px;
+
+                .el-timeline {
+                  padding-left: 0;
+                  //min-height: 300px;
+                  height: 300px;
+                  overflow: auto;
+
+                  &.el-timeline--hide {
+                  }
+
+                  .el-timeline-item {
+                    padding-bottom: 0;
+
+                    .el-timeline-item__tail {
+                      border-left: 2px dotted $color-inactive;
+                      margin-left: 2px;
+                    }
+
+                    .el-timeline-item__node--normal {
+                      background-image: radial-gradient($color-circle 20%, transparent);
+                      outline: var(--cn-bg-color-lighter) solid 6px;
+                      margin-left: 2px;
+                    }
+                  }
+
+                  .el-timeline-item:last-child {
+                    padding-bottom: 0;
+                  }
+                }
+
+                .timeline__info {
+                  display: flex;
+                  padding-bottom: 10px;
+
+                  .timeline__info--circle {
+                    display: flex;
+                    flex-direction: column;
+
+                    .info__circle {
+                      width: 17px;
+                      height: 17px;
+                      margin-left: -2px;
+                      border-radius: 50%;
+                      background-image: radial-gradient($color-circle 20%, transparent);
+                      outline: rgba(222, 52, 52, 0.30) solid 4px;
+                      margin-top: 2px;
+                    }
+
+                    .info__line {
+                      border-left: 2px $color-inactive dotted;
+                      height: 34px;
+                      margin-left: 6px;
+                      transition: all 0.2s;
+                    }
+                  }
+
+                  .timeline__info--item {
+                    padding-left: 13px;
+                    display: flex;
+                    flex-direction: column;
+                    font-size: 12px;
+                    color: $color-regular;
+
+                    .info--item__value {
+                      color: $color-text-primary;
+                      font-weight: 500;
+                      margin-left: 4px;
+                    }
+                  }
+                }
+
+                .timeline__item {
+                  display: flex;
+                  flex-direction: column;
+                  font-size: 12px;
+                  color: $color-regular;
+
+                  .item__value {
+                    color: $color-text-primary;
+                    font-weight: 500;
+                    margin-left: 4px;
+                  }
+                }
+
+                .item-record__btn, .item-record__btn-disabled {
+                  padding-right: 6px;
+                  cursor: pointer;
+                  text-align: center;
+                }
+
+                .item-record__btn-disabled {
+                  cursor: no-drop;
+                }
+
+                .scroll-view {
+                  width: 100%;
+                  height: 300px;
+                  overflow-y: scroll;
+                  position: relative;
+
+                  .scroll__item {
+                    width: 100%;
+                    height: 58px;
+                    display: flex;
+
+                    .item-circle {
+                      display: flex;
+                      flex-direction: column;
+
+                      .circle-circle {
+                        width: 10px;
+                        height: 10px;
+                        margin-left: 2px;
+                        border-radius: 50%;
+                        background-color: $color-circle;
+                      }
+
+                      .circle-line {
+                        border-left: 2px $color-inactive dotted;
+                        height: 34px;
+                        margin-left: 6px;
+                        margin-top: 6px;
+                        transition: all 0.2s;
+                      }
+                    }
+
+                    .item-content {
+                      display: flex;
+                      flex-direction: column;
+                      font-size: 12px;
+                      color: $color-regular;
+                      padding-left: 16px;
+
+                      .item__value {
+                        color: $color-text-primary;
+                        font-weight: 500;
+                        margin-left: 4px;
+                      }
+                    }
+                  }
+
+                  .scroll-list {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    cursor: pointer;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .geo-analysis__hexagon-tooltip {
+    position: fixed;
+    background-color: rgba(255, 255, 255, 0.80);
+    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.5);
+    border-radius: 2px;
+    min-width: 185px;
+    z-index: 3;
+
+    /*&.geo-analysis__hexagon-tooltip--hexagon {
+    }*/
+    &.geo-analysis__hexagon-tooltip--human {
+      .icon__box {
+        background-color: $color-human;
+      }
+    }
+
+    &.geo-analysis__hexagon-tooltip--base-station {
+      .icon__box {
+        background-color: $color-base-station;
+      }
+
+      .hexagon-tooltip__body {
+        .body__item .item__label {
+          width: 140px;
+        }
+      }
+    }
+
+    .hexagon-tooltip__header {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      padding: 10px 0 10px 63px;
+      color: $color-white;
+
+      .header__icon {
+        position: absolute;
+        left: 14px;
+        top: 16px;
+
+        .icon__box {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 32px;
+          width: 32px;
+          border-radius: 50%;
+        }
+      }
+
+      .header__title {
+        font-size: 16px;
+      }
+
+      .header__content {
+        font-size: 14px;
+      }
+    }
+
+    .hexagon-tooltip__body {
+      padding: 8px 18px;
+
+      .body__timeline {
+        display: flex;
+        flex-direction: row;
+        padding: 3px 0;
+
+        .timeline-symbol {
+          margin-top: 6px;
+          margin-right: 6px;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background-color: $color-circle;
+        }
+      }
+
+      .body__item {
+        display: flex;
+
+        .item__label {
+          padding-right: 10px;
+          text-align: right;
+          width: 60px;
+          font-size: 12px;
+          color: $color-text-primary;
+        }
+
+        .item__value {
+          font-size: 12px;
+          font-weight: bold;
+          color: $color-human;
+        }
+      }
+
+      .body__tracking {
+        padding-top: 6px;
+        font-size: 12px;
+        color: $color-business;
+        text-decoration: underline;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  70% {
+    opacity: 0.6;
+  }
+  100% {
+    opacity: 1;
+  }
+}
diff --git a/src/components/common/SimpleLoading.vue b/src/components/common/SimpleLoading.vue
index f60e6acd..0aacb96c 100644
--- a/src/components/common/SimpleLoading.vue
+++ b/src/components/common/SimpleLoading.vue
@@ -74,168 +74,3 @@ export default {
   }
 }
 </script>
-<style lang="scss">
-.simple-loading {
-  position: absolute;
-  z-index: 1;
-
-  &.simple-loading--top, &.simple-loading--top-start, &.simple-loading--top-end, &.simple-loading--left-start, &.simple-loading--right-start {
-    top: 2px
-  }
-  &.simple-loading--bottom, &.simple-loading--bottom-start, &.simple-loading--bottom-end, &.simple-loading--left-end, &.simple-loading--right-end {
-    bottom: 2px;
-  }
-  &.simple-loading--left, &.simple-loading--top-start, &.simple-loading--bottom-start, &.simple-loading--left-start, &.simple-loading--left-end {
-    left: 2px
-  }
-  &.simple-loading--right, &.simple-loading--top-end, &.simple-loading--bottom-end, &.simple-loading--right-start, &.simple-loading--right-end {
-    right: 2px;
-  }
-  &.simple-loading--top, &.simple-loading--bottom {
-    left: 50%;
-  }
-  &.simple-loading--left, &.simple-loading--right {
-    top: 50%;
-  }
-  &.simple-loading--top {
-    .simple-loading__box {
-      transform: translateX(-50%);
-    }
-  }
-  &.simple-loading--left {
-    .simple-loading__box {
-      transform: translateY(-50%);
-    }
-  }
-  &.simple-loading--top-end, &.simple-loading--right-start {
-    .simple-loading__box {
-      transform: translateX(-100%);
-    }
-  }
-  &.simple-loading--right {
-    .simple-loading__box {
-      transform: translate(-100%, -50%);
-    }
-  }
-  &.simple-loading--bottom-start, &.simple-loading--left-end {
-    .simple-loading__box {
-      transform: translateY(-100%);
-    }
-  }
-  &.simple-loading--bottom {
-    .simple-loading__box {
-      transform: translate(-50%, -100%);
-    }
-  }
-  &.simple-loading--bottom-end, &.simple-loading--right-end {
-    .simple-loading__box {
-      transform: translate(-100%, -100%);
-    }
-  }
-  &.simple-loading--center {
-    left: 50%;
-    top: 50%;
-
-    .simple-loading__box {
-      transform: translate(-50%, -50%);
-    }
-  }
-
-  @keyframes simple-loading__inner {
-    0% { opacity: 1 }
-    100% { opacity: 0 }
-  }
-
-  .simple-loading__box {
-    position: absolute;
-    display: inline-block;
-    overflow: hidden;
-    background: transparent;
-
-    &.simple-loading--default {
-      width: 27px;
-      height: 27px;
-
-      .simple-loading__inner {
-        div {
-          width: 6px;
-          height: 6px;
-          border-radius: 3px / 3px;
-          transform-origin: 3px 13px;
-        }
-      }
-    }
-
-    &.simple-loading--small {
-      width: 20px;
-      height: 20px;
-
-      .simple-loading__inner {
-        div {
-          width: 5px;
-          height: 5px;
-          border-radius: 3px / 3px;
-          transform-origin: 0 9px;
-        }
-      }
-    }
-    .simple-loading__inner {
-      width: 100%;
-      height: 100%;
-      position: relative;
-      transform: translateZ(0) scale(1);
-      backface-visibility: hidden;
-      transform-origin: 0 0;
-
-      div {
-        left: 10px;
-        top: 0;
-        position: absolute;
-        animation: simple-loading__inner linear 1s infinite;
-        background: #3c76cc;
-        box-sizing: content-box;
-      }
-      div:nth-child(1) {
-        transform: rotate(0deg);
-        animation-delay: -0.875s;
-        background: #3c76cc;
-      }
-      div:nth-child(2) {
-        transform: rotate(45deg);
-        animation-delay: -0.75s;
-        background: #3c76cc;
-      }
-      div:nth-child(3) {
-        transform: rotate(90deg);
-        animation-delay: -0.625s;
-        background: #3c76cc;
-      }
-      div:nth-child(4) {
-        transform: rotate(135deg);
-        animation-delay: -0.5s;
-        background: #3c76cc;
-      }
-      div:nth-child(5) {
-        transform: rotate(180deg);
-        animation-delay: -0.375s;
-        background: #3c76cc;
-      }
-      div:nth-child(6) {
-        transform: rotate(225deg);
-        animation-delay: -0.25s;
-        background: #3c76cc;
-      }
-      div:nth-child(7) {
-        transform: rotate(270deg);
-        animation-delay: -0.125s;
-        background: #3c76cc;
-      }
-      div:nth-child(8) {
-        transform: rotate(315deg);
-        animation-delay: 0s;
-        background: #3c76cc;
-      }
-    }
-  }
-}
-</style>
diff --git a/src/components/common/TimeLine.vue b/src/components/common/TimeLine.vue
index ef096812..50727ae2 100644
--- a/src/components/common/TimeLine.vue
+++ b/src/components/common/TimeLine.vue
@@ -236,62 +236,3 @@ export default {
   }
 }
 </script>
-
-<style scoped lang="scss">
-.time-line {
-  width: 100%;
-  height: 40px !important;
-  padding: 0 6px;
-  position: relative;
-
-  .time-line-slider {
-    position: absolute;
-    width: calc(100% - 16px);
-    height: 40px;
-    top: -6px;
-
-    :deep .el-slider__runway {
-      //width: calc(100% - 18px);
-      padding: 0 6px;
-      height: 40px;
-      background-color: rgba(0, 0, 0, 0);
-      margin: 0;
-
-      .el-slider__bar {
-        background-color: rgba(0, 0, 0, 0);
-      }
-      .el-slider__button-wrapper {
-        width: 10px;
-        height: 10px;
-        margin-top: 7px;
-      }
-
-      .el-slider__button {
-        width: 0;
-        height: 0;
-        border-color: #000 rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
-        border-style: solid;
-        border-width: 8px 8px 0 8px;
-        background-color: rgba(0, 0, 0, 0);
-        border-radius: 0;
-      }
-    }
-  }
-
-  .time-line-container {
-    height: 40px;
-    line-height: 40px;
-    background-color: rgba(255, 255, 255, 0.50);
-    //background-color: rgb(89, 173, 201);
-    display: flex;
-    justify-content: space-between;
-    padding: 0 6px;
-
-    .test-line {
-      width: 1px;
-      height: 40px;
-      background-color: #000;
-    }
-  }
-}
-</style>
diff --git a/src/components/common/collapse.vue b/src/components/common/collapse.vue
deleted file mode 100644
index 433786d7..00000000
--- a/src/components/common/collapse.vue
+++ /dev/null
@@ -1,112 +0,0 @@
-<template>
-  <transition
-      :name="transitionName"
-      @before-enter="collapseBeforeEnter"
-      @enter="collapseEnter"
-      @after-enter="collapseAfterEnter"
-      @before-leave="collapseBeforeLeave"
-      @leave="collapseLeave"
-      @after-leave="collapseAfterLeave">
-    <slot></slot>
-  </transition>
-</template>
-
-<script>
-/**
- * 元素折叠过度效果
- */
-export default {
-  name: 'CollapseTransition',
-  props: {
-    transitionName: {
-      type: String,
-      default: 'collapse-transition'
-    }
-  },
-  data () {
-    return {
-      oldPaddingTop: '',
-      oldPaddingBottom: '',
-      oldOverflow: ''
-    }
-  },
-  methods: {
-    collapseBeforeEnter (el) {
-      // console.log('11, collapseBeforeEnter')
-      this.oldPaddingBottom = el.style.paddingBottom
-      this.oldPaddingTop = el.style.paddingTop
-      // 过渡效果开始前设置元素的maxHeight为0，让元素maxHeight有一个初始值
-      el.style.paddingTop = '0'
-      el.style.paddingBottom = '0'
-      el.style.maxHeight = '0'
-    },
-    collapseEnter (el, done) {
-      // console.log('22, collapseEnter')
-      this.oldOverflow = el.style.overflow
-      const elHeight = el.scrollHeight
-      // 过渡效果进入后将元素的maxHeight设置为元素本身的高度，将元素maxHeight设置为auto不会有过渡效果
-      if (elHeight > 0) {
-        el.style.maxHeight = elHeight + 'px'
-      } else {
-        el.style.maxHeight = '0'
-      }
-      el.style.paddingTop = this.oldPaddingTop
-      el.style.paddingBottom = this.oldPaddingBottom
-
-      el.style.overflow = 'hidden'
-      const onTransitionDone = function () {
-        done()
-        el.removeEventListener('transitionend', onTransitionDone, false)
-        el.removeEventListener('transitioncancel', onTransitionDone, false)
-      }
-      // 绑定元素的transition完成事件，在transition完成后立即完成vue的过度动效
-      el.addEventListener('transitionend', onTransitionDone, false)
-      el.addEventListener('transitioncancel', onTransitionDone, false)
-    },
-    collapseAfterEnter (el) {
-      // 过渡效果完成后恢复元素的maxHeight
-      el.style.maxHeight = ''
-      el.style.overflow = this.oldOverflow
-    },
-
-    collapseBeforeLeave (el) {
-      this.oldPaddingBottom = el.style.paddingBottom
-      this.oldPaddingTop = el.style.paddingTop
-      this.oldOverflow = el.style.overflow
-
-      el.style.maxHeight = el.scrollHeight + 'px'
-      el.style.overflow = 'hidden'
-    },
-    collapseLeave (el, done) {
-      if (el.scrollHeight !== 0) {
-        el.style.maxHeight = '0'
-        el.style.paddingBottom = '0'
-        el.style.paddingTop = '0'
-      }
-      const onTransitionDone = function () {
-        done()
-        el.removeEventListener('transitionend', onTransitionDone, false)
-        el.removeEventListener('transitioncancel', onTransitionDone, false)
-      }
-      // 绑定元素的transition完成事件，在transition完成后立即完成vue的过度动效
-      el.addEventListener('transitionend', onTransitionDone, false)
-      el.addEventListener('transitioncancel', onTransitionDone, false)
-    },
-    collapseAfterLeave (el) {
-      el.style.maxHeight = ''
-      el.style.overflow = this.oldOverflow
-      el.style.paddingBottom = this.oldPaddingBottom
-      el.style.paddingTop = this.oldPaddingTop
-
-      this.oldOverflow = this.oldPaddingBottom = this.oldPaddingTop = ''
-    }
-  }
-}
-</script>
-
-<style lang="scss">
-.collapse-transition-enter-active,
-.collapse-transition-leave-active {
-  transition: height .3s ease-in-out, padding .3s ease-in-out, max-height .3s ease-in-out;
-}
-</style>
diff --git a/src/components/table/detection/HistoryTopKeys.vue b/src/components/table/detection/HistoryTopKeys.vue
index 01fc4e6f..e633f573 100644
--- a/src/components/table/detection/HistoryTopKeys.vue
+++ b/src/components/table/detection/HistoryTopKeys.vue
@@ -49,7 +49,7 @@
           </el-table-column>
 
           <template v-slot:empty >
-            <chart-error v-if="showError" :content="errorMsg" style="line-height: 0" />
+            <chart-error v-if="showError" :content="errorMsg" class="chart-error__setting" />
           </template>
         </el-table>
       </div>
@@ -183,74 +183,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss">
-.history-top-key {
-  width: 396px;
-  height: 520px;
-
-  .el-drawer__body {
-    border: 1px #E2E5EC solid;
-  }
-}
-.key-header {
-  height: 41px;
-  background: #F7F7F7;
-  box-shadow: 0 1px 0 0 rgba(226,229,236,1);
-  border-radius: 2px 2px 0 0;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 12px;
-  font-family: NotoSansHans-Medium;
-  font-size: 14px;
-  color: #353636;
-  font-weight: 500;
-
-  i {
-    font-size: 12px;
-    color: #575757;
-    cursor: pointer;
-  }
-}
-
-.key-search {
-  margin-left: 12px;
-  margin-top: 6px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-
-  .key-search-icon {
-    font-size: 13px;
-    color: #999999;
-  }
-
-  .key-refresh {
-    margin: 0 10px;
-    color: #38ACD2;
-    font-size: 14px;
-    height: 28px;
-    line-height: 28px;
-    cursor: pointer;
-  }
-}
-
-.key-total {
-  margin: 10px 12px;
-  font-family: NotoSansSChineseRegular;
-  font-size: 14px;
-  color: #999999;
-  line-height: 21px;
-  font-weight: 400;
-
-  .key-total-number {
-    color: #666666;
-    margin-left: 4px;
-  }
-}
-
-.el-table .key-click-row {
-  background: #F5F7FA !important;
-}
-</style>
diff --git a/src/views/location/Index.vue b/src/views/location/Index.vue
index 1ec94562..4b465711 100644
--- a/src/views/location/Index.vue
+++ b/src/views/location/Index.vue
@@ -31,7 +31,7 @@
               @visible-change="visibleChange"
               :remote-method="dropDownSearch"
               v-select-load-more="onLoadMore"
-              style="margin-right: 10px; width:250px;"
+              class="location__select"
       >
         <el-option
                 v-for="item in searchValueListShow"
@@ -41,7 +41,7 @@
           <span class="search-active" :class="item.active === 1 ? 'active-icon' : 'inactive-icon'"></span>
           <div class="search-content">
             <span class="search-value">{{ item.phoneNumber }}</span>
-            <span class="" style="color: #999;">ID&nbsp;&nbsp;{{ item.subscriberId }}</span>
+            <span class="search-id">ID&nbsp;&nbsp;{{ item.subscriberId }}</span>
           </div>
           <span class="search-follow__icon" @click.stop="followSubscribers(item)">
             <i class="cn-icon-follow-fill cn-icon" v-if="item.follow === 1"></i>
@@ -49,10 +49,10 @@
           </span>
         </el-option>
         <template #empty>
-          <div v-if="loading.searchLoading" style="height:40px;padding:10px 0;text-align: center;color:#909399;font-size:12px;display:flex;align-items: center;justify-content: center;">
-            <simple-loading style="padding-top:10px;" size="small" placement="top" :loading="loading.searchLoading" ></simple-loading>
+          <div v-if="loading.searchLoading" class="location__select-empty">
+            <simple-loading class="padding-t-10" size="small" placement="top" :loading="loading.searchLoading" ></simple-loading>
           </div>
-          <div v-else-if="emptyTip !== ''" style="height:40px;padding:10px 0;text-align: center;color:#909399;font-size:12px;display:flex;align-items: center;justify-content: center;">
+          <div v-else-if="emptyTip !== ''" class="location__select-empty">
             {{emptyTip}}
           </div>
         </template>
@@ -265,8 +265,8 @@
                       </div>
 
                       <div :class="trackingSubscriberRecordMap[subscriber.subscriberId].length === 1 ? 'item-record__btn-disabled' : 'item-record__btn'" @click.stop="clickTrackBlock(index)">
-                        <span v-if="!subscriber.show"><i class="cn-icon cn-icon-down2" :style="trackingSubscriberRecordMap[subscriber.subscriberId].length === 1 ? 'color: #C0C4CC' : ''"></i></span>
-                        <span v-if="subscriber.show"><i class="cn-icon cn-icon-up2" :style="trackingSubscriberRecordMap[subscriber.subscriberId].length === 1 ? 'color: #C0C4CC' : ''"></i></span>
+                        <span v-if="!subscriber.show"><i class="cn-icon cn-icon-down2" :style="trackingSubscriberRecordMap[subscriber.subscriberId].length === 1 ? 'color: var(var(--el-color-info-light-5))' : ''"></i></span>
+                        <span v-if="subscriber.show"><i class="cn-icon cn-icon-up2" :style="trackingSubscriberRecordMap[subscriber.subscriberId].length === 1 ? 'color: var(var(--el-color-info-light-5)' : ''"></i></span>
                       </div>
                     </div>
                   </template>
@@ -1582,7 +1582,7 @@ export default {
         color[2] = color[2].split(']')[0]
         return `rgba(${color.join(',')},.8)`
       } else if (this.tooltip.type === this.tooltipType.human) {
-        return '#38ACD2'
+        return 'var(--el-color-business)'
       } else if (this.tooltip.type === this.tooltipType.baseStation) {
         return '#233447'
       }
@@ -1747,724 +1747,3 @@ export default {
   }
 }
 </script>
-<style lang="scss">
-.geo-analysis {
-  display: flex;
-  flex-direction: column;
-  padding: 0 20px 20px;
-  position: relative;
-  .location-tabs  {
-    .traceTracking-tabs_label {
-      display:flex;
-      flex-display: row;
-      .traceTracking-num {
-        margin-top: 5px;
-        border-radius: 10px;
-        font-size: 12px;
-        color: #FFFFFF;
-        font-weight: 500;
-        height: 20px;
-        width: fit-content;
-        min-width: 20px;
-        padding:0 5px 0 5px;
-        line-height: 20px;
-        text-align: center;
-        background: #E26154;
-      }
-    }
-  }
-
-  svg {
-    fill: #fff;
-  }
-
-  .maplibregl-canvas:focus-visible {
-    outline: none;
-  }
-  .geo-tools {
-    position: absolute;
-    display: flex;
-    top: 11px;
-    right: 20px;
-    .el-select .el-input__inner {
-      cursor: text;
-    }
-    .el-select .el-input .el-select__caret {
-      cursor: text;
-    }
-    .panel__time {
-      display: flex;
-    }
-    .el-select {
-      .search-active {
-        float: left;
-        border-radius: 3px;
-        width: 6px;
-        height: 6px;
-        margin-right: 10px;
-        position:relative;
-        top:50%;
-        transform: translateY(-50%);
-        text-align:center;
-      }
-      .search-value {
-        font-size: 14px;
-        margin-right:20px;
-      }
-      .search-follow__icon {
-        position: absolute;
-        top: 50%;
-        right: 10px;
-        transform: translateY(-50%);
-        color: #6f6f6e;
-        margin-right: 10px;
-        text-align: center;
-        i {
-          font-size: 12px;
-        }
-      }
-      .search-content {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-        justify-content: center;
-      }
-      .active-icon {
-        background: #38ACD2;
-      }
-      .inactive-icon {
-        background: #CCCCCC;
-      }
-      .search-select {
-        max-height: 250px;
-      }
-      .search-select .el-scrollbar__wrap{
-        max-height: 250px;
-        overflow-y: auto;
-      }
-      .el-select-dropdown .el-scrollbar .el-select-dropdown__wrap .el-scrollbar__view.el-select-dropdown__list .el-select-dropdown__item {
-        position: relative;
-        height: 48px;
-        line-height: 16px;
-      }
-    }
-  }
-  .el-tabs {
-    .el-tabs__header {
-      margin-bottom: 0;
-    }
-    .el-tabs__nav-wrap::after {
-      height: 0;
-    }
-    .el-tabs__active-bar {
-      height: 3px;
-      background-color: #046eca;
-      bottom: 1px;
-    }
-    .el-tabs__item {
-      &.is-active {
-        color: #046eca;
-      }
-      height: 50px;
-      line-height: 50px;
-      font-size: 20px;
-      color: #353636;
-    }
-  }
-
-  .geo-analysis__container {
-    height: calc(100% - 50px);
-    display: flex;
-    position: relative;
-
-    .analysis-map {
-      flex: 1;
-      position: relative;
-
-      #analysisMap {
-        border-radius: 2px;
-        height: 100%;
-        width: 100%;
-      }
-      .maplibregl-ctrl-bottom-right {
-        top: 0;
-        left: 0;
-        bottom: unset;
-        right: unset;
-      }
-      .map-marker {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        cursor: default;
-        padding: 0;
-        transition: height .1s linear, width .1s linear;
-
-        svg {
-          transition: height .1s linear, width .1s linear;
-          fill: #fff;
-        }
-
-        &.map-marker--human {
-          background-color: #233447;
-          cursor: pointer;
-
-          svg {
-            width: 14px;
-            height: 14px;
-          }
-        }
-        &.map-marker--base-station {
-          background-color: #585B5F;
-
-          svg {
-            width: 12px;
-            height: 12px;
-          }
-        }
-        &.map-marker--hover {
-          width: 30px;
-          height: 30px;
-          border: 2px solid rgba(255,255,255,1);
-          z-index: 2;
-
-          &.map-marker--human svg {
-            width: 21px;
-            height: 21px;
-          }
-          &.map-marker--base-station svg {
-            width: 18px;
-            height: 18px;
-          }
-        }
-        &.map-marker--highlight {
-          width: 30px;
-          height: 30px;
-          border: 2px solid #fff;
-          background-color: rgb(204,68,68);
-          z-index: 3;
-
-          svg {
-            width: 21px;
-            height: 21px;
-          }
-        }
-      }
-      .map-tracking-marker {
-        width: 36px;
-        height: 36px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        animation: pulse 2s infinite;
-        background-color: rgba(204,68,68,0.50);
-        border-radius: 50%;
-
-        .tracking-marker__inner-circle {
-          width: 25px;
-          height: 25px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          background-color: rgba(204,68,68,0.80);
-          border-radius: 50%;
-
-          svg {
-            width: 20px;
-            height: 20px;
-          }
-        }
-      }
-    }
-    .map-time-line {
-      position: absolute;
-      bottom: 0;
-      left: -6px;
-      width: calc(100% - 318px);
-    }
-    .analysis-statistics {
-      width: 330px;
-      overflow-y: auto;
-      padding-right: 5px;
-
-      .analysis-statistics__chart {
-        margin: 0 0 10px 20px;
-        height: 148px;
-        background: rgba(113,113,113,0.06);
-        border: 1px solid rgba(226,229,236,1);
-        border-radius: 4px;
-        position: relative;
-
-        .chart__header {
-          padding: 8px 0 0 10px;
-          color: #353636;
-          font-size: 16px;
-        }
-        .chart__body {
-          display:flex;
-          flex-direction:row;
-          width:100%;
-          height:calc(100% - 32px);
-          .chart__legend {
-            width:calc(60% - 22px);
-            height: 100%;
-            display:flex;
-            flex-direction:column;
-            justify-content: center;
-            .legend-item {
-              display:flex;
-              flex-direction:row;
-              justify-content: left;
-              align-items: center;
-              padding-top:2px;
-              padding-bottom:2px;
-              .legend-icon {
-                width:16px;
-                height:6px;
-                border-radius: 2px;
-                margin-right:10px;
-              }
-              .legend-range {
-                margin-right:40px;
-                width:54px;
-                font-family: Helvetica;
-                font-size: 12px;
-                color: #575757;
-                line-height: 12px;
-                font-weight: 400;
-              }
-              .legend-count {
-                font-family: Helvetica;
-                font-size: 12px;
-                color: #353636;
-                line-height: 12px;
-                font-weight: 400;
-              }
-            }
-          }
-        }
-        .chart__statistics {
-          display: flex;
-          height: 20px;
-          padding-left: 10px;
-
-          .statistics-number {
-            margin-right: 8px;
-            color: #353636;
-            font-size: 16px;
-            line-height: 22px;
-          }
-          .statistics-trend {
-            padding: 0 10px;
-            background: #7E9F54;
-            border-radius: 10px;
-            text-align: center;
-            font-size: 12px;
-            color: white;
-          }
-        }
-        .chart__drawing {
-          height: 100%;
-          width:calc(40% + 12px);
-          margin-right:10px;
-        }
-        .chart-line__drawing {
-          height: calc(100% - 32px);
-        }
-        #activeSubscribersChart {
-          height: calc(100% - 52px);
-        }
-      }
-      .analysis-statistics__title {
-        position: relative;
-        margin-bottom: 10px;
-        padding-left: 20px;
-        font-size: 16px;
-        color: #353636;
-      }
-      .analysis-statistics__no-tracking-tip {
-        padding: 0 20px;
-        cursor: pointer;
-        color: #046eca;
-        text-decoration: underline;
-      }
-      .analysis-statistics__subscribers {
-        padding-left: 20px;
-
-        .analysis-statistics__subscriber {
-          margin-bottom: 10px;
-
-          &:last-of-type {
-            margin-bottom: 0;
-          }
-          &.analysis-statistics__subscriber--active {
-            border: 1px solid #38acd2;
-            box-shadow: 0 1px 3px 0 #38acd2;
-          }
-
-          background-color: #F7F7F7;
-          border: 1px solid rgb(226,229,236);
-          border-radius: 2px;
-
-          .subscriber__header {
-            background-color: #38ACD2;
-
-            &.subscriber__header-inactive {
-              background-color: #CCCCCC;
-            }
-          }
-
-          .subscriber__header {
-            position: relative;
-            flex-direction: column;
-            padding: 6px 0 0 70px;
-            color: white;
-            height: 58px;
-
-            .header__icon {
-              position: absolute;
-              left: 20px;
-              top: 14px;
-
-              .icon__box {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                height: 30px;
-                width: 30px;
-                background-color: #233447;
-                border-radius: 50%;
-              }
-            }
-            .header__right {
-              display:flex;
-              flex-direction: row;
-              justify-content: space-between;
-              .header-msisdn {
-                display:flex;
-                flex-direction: column;
-                .header__title {
-                  font-size: 16px;
-                }
-                .header__content {
-                  font-size: 14px;
-                }
-              }
-              .header__operation {
-                display:flex;
-                flex-direction: row;
-                align-items: center;
-
-                .trajectory-text {
-                  margin-right:12px;
-                  font-family: Helvetica-Bold;
-                  font-size: 12px;
-                  color: #233447;
-                  font-weight: 700;
-                  cursor: pointer;
-
-                  i {
-                    font-size: 12px !important;
-                    font-weight: bolder;
-                    margin-right:3px;
-                    color: #233447;
-                  }
-                }
-                .cancel-follow {
-                  margin-right:14px;
-                  i {
-                    cursor: pointer;
-                    font-size:8px;
-                  }
-                }
-              }
-            }
-          }
-          .subscriber__body {
-            padding: 10px 18px;
-            .body__item {
-              display: flex;
-
-              .item__label {
-                padding-right: 10px;
-                text-align: right;
-                width: 60px;
-                font-size: 12px;
-                color: #353636;
-              }
-              .item__value {
-                font-size: 12px;
-                font-weight: bold;
-                color: #233447;
-              }
-            }
-
-            .body-item-record {
-              margin-top: 10px;
-
-              .item-record__header {
-                font-family: Helvetica;
-                font-size: 16px;
-                color: #353636;
-                font-weight: 400;
-                height: 38px;
-                line-height: 38px;
-              }
-              .item-record__info {
-
-              }
-              .item-record__timeline {
-                margin-left: 6px;
-
-                .el-timeline {
-                  padding-left: 0;
-                  //min-height: 300px;
-                  height: 300px;
-                  overflow: auto;
-
-                  &.el-timeline--hide {
-                  }
-
-                  .el-timeline-item {
-                    padding-bottom: 0;
-                    .el-timeline-item__tail {
-                      border-left: 2px dotted #cccccc;
-                      margin-left: 2px;
-                    }
-                    .el-timeline-item__node--normal {
-                      background-image: radial-gradient(#DE3434 20%, transparent);
-                      outline: #F7F7F7 solid 6px;
-                      margin-left: 2px;
-                    }
-                  }
-                  .el-timeline-item:last-child {
-                    padding-bottom: 0;
-                  }
-                }
-                .timeline__info {
-                  display: flex;
-                  padding-bottom: 10px;
-
-                  .timeline__info--circle {
-                    display: flex;
-                    flex-direction: column;
-                    .info__circle {
-                      width: 17px;
-                      height: 17px;
-                      margin-left: -2px;
-                      border-radius: 50%;
-                      background-image: radial-gradient(#DE3434 20%, transparent);
-                      outline: rgba(222,52,52,0.30) solid 4px;
-                      margin-top: 2px;
-                    }
-                    .info__line {
-                      border-left: 2px #cccccc dotted;
-                      height: 34px;
-                      margin-left: 6px;
-                      transition: all 0.2s;
-                    }
-                  }
-                  .timeline__info--item {
-                    padding-left: 13px;
-                    display: flex;
-                    flex-direction: column;
-                    font-size: 12px;
-                    color: #666666;
-
-                    .info--item__value {
-                      color: #333;
-                      font-weight: 500;
-                      margin-left: 4px;
-                    }
-                  }
-                }
-                .timeline__item {
-                  display: flex;
-                  flex-direction: column;
-                  font-size: 12px;
-                  color: #666666;
-
-                  .item__value {
-                    color: #333;
-                    font-weight: 500;
-                    margin-left: 4px;
-                  }
-                }
-                .item-record__btn, .item-record__btn-disabled {
-                  padding-right: 6px;
-                  cursor: pointer;
-                  text-align: center;
-                }
-                .item-record__btn-disabled {
-                  cursor: no-drop;
-                }
-                .scroll-view {
-                  width: 100%;
-                  height: 300px;
-                  overflow-y: scroll;
-                  position: relative;
-
-                  .scroll__item {
-                    width: 100%;
-                    height: 58px;
-                    display: flex;
-
-                    .item-circle {
-                      display: flex;
-                      flex-direction: column;
-                      .circle-circle {
-                        width: 10px;
-                        height: 10px;
-                        margin-left: 2px;
-                        border-radius: 50%;
-                        background-color: #DE3434;
-                      }
-                      .circle-line {
-                        border-left: 2px #cccccc dotted;
-                        height: 34px;
-                        margin-left: 6px;
-                        margin-top: 6px;
-                        transition: all 0.2s;
-                      }
-                    }
-
-                    .item-content {
-                      display: flex;
-                      flex-direction: column;
-                      font-size: 12px;
-                      color: #666666;
-                      padding-left: 16px;
-
-                      .item__value {
-                        color: #333;
-                        font-weight: 500;
-                        margin-left: 4px;
-                      }
-                    }
-                  }
-                  .scroll-list {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    cursor: pointer;
-                  }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .geo-analysis__hexagon-tooltip {
-    position: fixed;
-    background-color: rgba(255,255,255,0.80);
-    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.5);
-    border-radius: 2px;
-    min-width: 185px;
-    z-index: 3;
-
-    /*&.geo-analysis__hexagon-tooltip--hexagon {
-    }*/
-    &.geo-analysis__hexagon-tooltip--human {
-      .icon__box {
-        background-color: #233447;
-      }
-    }
-    &.geo-analysis__hexagon-tooltip--base-station {
-      .icon__box {
-        background-color: #585B5F;
-      }
-      .hexagon-tooltip__body {
-        .body__item .item__label {
-          width: 140px;
-        }
-      }
-    }
-    .hexagon-tooltip__header {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      padding: 10px 0 10px 63px;
-      color: white;
-
-      .header__icon {
-        position: absolute;
-        left: 14px;
-        top: 16px;
-
-        .icon__box {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          height: 32px;
-          width: 32px;
-          border-radius: 50%;
-        }
-      }
-      .header__title {
-        font-size: 16px;
-      }
-      .header__content {
-        font-size: 14px;
-      }
-    }
-    .hexagon-tooltip__body {
-      padding: 8px 18px;
-
-      .body__timeline {
-        display: flex;
-        flex-direction: row;
-        padding: 3px 0;
-
-        .timeline-symbol {
-          margin-top: 6px;
-          margin-right: 6px;
-          width: 8px;
-          height: 8px;
-          border-radius: 50%;
-          background-color: #DE3434;
-        }
-      }
-      .body__item {
-        display: flex;
-
-        .item__label {
-          padding-right: 10px;
-          text-align: right;
-          width: 60px;
-          font-size: 12px;
-          color: #353636;
-        }
-        .item__value {
-          font-size: 12px;
-          font-weight: bold;
-          color: #233447;
-        }
-      }
-      .body__tracking {
-        padding-top: 6px;
-        font-size: 12px;
-        color: #38ACD2;
-        text-decoration: underline;
-        cursor: pointer;
-      }
-    }
-  }
-}
-@keyframes pulse {
-  0% {
-    opacity: 1;
-  }
-  70% {
-    opacity: 0.6;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-</style>