From e5baaca9d5583c3563cf8c82030b8545fac6a5dd Mon Sep 17 00:00:00 2001
From: cebgcontract <99630598+cebgcontract@users.noreply.github.com>
Date: Thu, 3 Mar 2022 15:53:10 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E4=BB=A3=E7=A0=81,=20?=
 =?UTF-8?q?=E7=A7=BB=E9=99=A4=E6=97=A0=E7=94=A8=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/market/FilterItem.vue        |  57 +--
 src/components/market/HeroClass.vue         |   2 +-
 src/components/market/RangeMarkSlider.vue   | 253 -------------
 src/components/market/RangeNumberSlider.vue | 188 ----------
 src/components/market/RangeSlider.vue       |  51 +++
 src/components/market/SearchPanel.vue       | 375 ++++++++++----------
 src/main.ts                                 |   3 +-
 vue.config.js                               |   4 -
 8 files changed, 276 insertions(+), 657 deletions(-)
 delete mode 100644 src/components/market/RangeMarkSlider.vue
 delete mode 100644 src/components/market/RangeNumberSlider.vue
 create mode 100644 src/components/market/RangeSlider.vue

diff --git a/src/components/market/FilterItem.vue b/src/components/market/FilterItem.vue
index 92232e8..cab97f1 100644
--- a/src/components/market/FilterItem.vue
+++ b/src/components/market/FilterItem.vue
@@ -36,33 +36,34 @@ export default class FilterItem extends Vue {
   flex-direction: row;
   cursor: pointer;
   margin-bottom: 1em;
+  .label{
+    margin-left: 1em;
+  }
+  span {
+    font-weight: bold;
+    font-size: 1em;
+    color: white;
+  }
+  .check-box{
+    display: flex;
+    width: 1.5em;
+    height: 1.5em;
+    background-color: #5b39bc;
+    border: 0.0625em solid #5b39bc;
+    border-radius: 0.25em;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.3s;
+    &.hide{
+      background-color: transparent;
+    }
+    .check{
+      transition: opacity 0.3s;
+      &.hide{
+        opacity: 0;
+      }
+    }
+  }
 }
-.filter-item .label{
-  margin-left: 1em;
-}
-.filter-item span{
-  font-weight: bold;
-  font-size: 1em;
-  color: white;
-}
-.check-box{
-  display: flex;
-  width: 1.5em;
-  height: 1.5em;
-  background-color: #5b39bc;
-  border: 0.0625em solid #5b39bc;
-  border-radius: 0.25em;
-  justify-content: center;
-  align-items: center;
-  transition: all 0.3s;
-}
-.check-box.hide{
-  background-color: transparent;
-}
-.check-box .check {
-  transition: opacity 0.3s;
-}
-.check-box .check.hide{
-  opacity: 0;
-}
+
 </style>
diff --git a/src/components/market/HeroClass.vue b/src/components/market/HeroClass.vue
index dabb1ba..8790eeb 100644
--- a/src/components/market/HeroClass.vue
+++ b/src/components/market/HeroClass.vue
@@ -19,7 +19,7 @@ import { Component, Vue } from 'vue-property-decorator'
 export default class extends Vue {}
 </script>
 <style lang="scss" scoped>
-@import '@/scss/tooltip.scss';
+@import '../../scss/tooltip.scss';
 .container {
   width: 3.3em;
   height: 4.375em;
diff --git a/src/components/market/RangeMarkSlider.vue b/src/components/market/RangeMarkSlider.vue
deleted file mode 100644
index e573a1a..0000000
--- a/src/components/market/RangeMarkSlider.vue
+++ /dev/null
@@ -1,253 +0,0 @@
-<template>
-  <div class="range-mark-slider">
-    <div class="curMinContainer">
-      <input
-        type="range"
-        min="1"
-        max="10"
-        class="thumb thumbLeft"
-        value="1"
-      /><span class="minCursor" style="left: 0%">⬢</span
-    ><span class="minIndicator" style="left: 0%">H</span>
-    </div>
-    <div class="curMaxContainer">
-      <input
-        type="range"
-        min="1"
-        max="10"
-        class="thumb thumbRight"
-        value="10"
-      /><span class="maxCursor" style="left: 100%">⬢</span
-    ><span
-      class="maxIndicator atMaxIndicator"
-      style="left: 100%"
-    >SS</span
-    >
-    </div>
-    <div class="slider">
-      <div class="sliderTrack"></div>
-      <div
-        class="sliderRange"
-        style="left: 0%; width: 100%"
-      ></div>
-      <div class="slideMarkDot">
-                            <span class="markDot inRangeDot"></span
-                            ><span class="markDot inRangeDot"></span
-      ><span class="markDot inRangeDot"></span
-      ><span class="markDot inRangeDot"></span
-      ><span class="markDot inRangeDot"></span
-      ><span class="markDot inRangeDot"></span
-      ><span class="markDot inRangeDot"></span
-      ><span class="markDot inRangeDot"></span
-      ><span class="markDot inRangeDot"></span
-      ><span class="markDot inRangeDot"></span>
-      </div>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
-
-@Component({
-  name: 'RangeMarkSlider',
-  components: {
-  }
-})
-export default class extends Vue {}
-</script>
-<style lang="scss" scoped>
-.range-mark-slider {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  position: relative;
-  margin-bottom: 42px;
-  width: 96%;
-  margin-left: 7px;
-  /* For Chrome browsers */
-  /* For Firefox browsers */
-}
-
-.range-mark-slider .curMinContainer {
-  position: absolute;
-  width: 100%;
-}
-
-.range-mark-slider .curMinContainer .thumbLeft {
-  z-index: 4;
-}
-
-.range-mark-slider .curMinContainer .minCursor {
-  position: absolute;
-  color: #5b39bc;
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
-  text-align: center;
-  font-size: 20px;
-  top: -13px;
-  z-index: 3;
-}
-
-.range-mark-slider .curMinContainer .minIndicator {
-  position: absolute;
-  width: 100%;
-  top: 20px;
-  color: #dee2e6;
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
-  text-align: center;
-}
-
-.range-mark-slider .curMaxContainer {
-  position: absolute;
-  width: 100%;
-}
-
-.range-mark-slider .curMaxContainer .thumbRight {
-  z-index: 4;
-}
-
-.range-mark-slider .curMaxContainer .maxCursor {
-  position: absolute;
-  color: #5b39bc;
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
-  text-align: center;
-  font-size: 20px;
-  top: -13px;
-  z-index: 3;
-}
-
-.range-mark-slider .curMaxContainer .maxIndicator {
-  position: absolute;
-  width: 100%;
-  top: 20px;
-  color: #dee2e6;
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
-  text-align: center;
-}
-
-.range-mark-slider .curMaxContainer .atMaxIndicator {
-  -webkit-transform: translateX(calc(-100% + 5px));
-  transform: translateX(calc(-100% + 5px));
-  text-align: right;
-}
-
-.range-mark-slider .thumb {
-  position: absolute;
-  height: 0;
-  width: 100%;
-  max-width: 300px;
-  outline: none;
-  top: -2px;
-  left: -2px;
-  cursor: pointer;
-}
-
-.range-mark-slider .overlapped {
-  z-index: 4;
-}
-
-.range-mark-slider .thumb,
-.range-mark-slider .thumb::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
-.range-mark-slider .thumb::-webkit-slider-thumb {
-  background-color: transparent;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  height: 50px;
-  width: 20px;
-  margin-top: 4px;
-  pointer-events: all;
-  position: relative;
-}
-
-.range-mark-slider .thumbLeft::-webkit-slider-thumb {
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
-}
-
-.range-mark-slider .thumbRight::-webkit-slider-thumb {
-  -webkit-transform: translateX(50%);
-  transform: translateX(50%);
-}
-
-.range-mark-slider .thumbLeft::-moz-range-thumb {
-  transform: translateX(-50%);
-}
-
-.range-mark-slider .thumbRight::-moz-range-thumb {
-  transform: translateX(50%);
-}
-
-.range-mark-slider .thumb::-moz-range-thumb {
-  background-color: #5b39bc;
-  background-color: transparent;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  height: 14px;
-  width: 14px;
-  margin-top: 4px;
-  pointer-events: all;
-  position: relative;
-}
-
-.range-mark-slider .slider {
-  position: relative;
-  width: 100%;
-}
-
-.range-mark-slider .slider > * {
-  position: absolute;
-}
-
-.range-mark-slider .slider .sliderRange {
-  background-color: #5b39bc;
-  z-index: 2;
-  border-radius: 3px;
-  height: 4px;
-}
-
-.range-mark-slider .slider .sliderTrack {
-  background-color: #382873;
-  width: 100%;
-  height: 4px;
-}
-
-.range-mark-slider .slider .slideMarkDot {
-  width: calc(100% + 10px);
-  height: 0px;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-  -ms-flex-pack: justify;
-  justify-content: space-between;
-  margin-left: -6px;
-  top: -3px;
-}
-
-.range-mark-slider .slider .slideMarkDot .markDot {
-  height: 10px;
-  width: 10px;
-  background-color: #382873;
-  border-radius: 50%;
-  display: inline-block;
-}
-
-.range-mark-slider .slider .slideMarkDot .inRangeDot {
-  background-color: #5b39bc;
-}
-</style>
diff --git a/src/components/market/RangeNumberSlider.vue b/src/components/market/RangeNumberSlider.vue
deleted file mode 100644
index 9605bda..0000000
--- a/src/components/market/RangeNumberSlider.vue
+++ /dev/null
@@ -1,188 +0,0 @@
-<template>
-  <div class="range-number-slider">
-    <div class="curMinContainer">
-      <input
-        type="range"
-        min="0"
-        max="11"
-        class="thumb thumbLeft"
-        value="0"
-      /><span class="minCursor" style="left: 0%">⬢</span
-    ><span class="minIndicator" style="left: 0%">0</span>
-    </div>
-    <div class="curMaxContainer">
-      <input
-        type="range"
-        min="0"
-        max="11"
-        class="thumb thumbRight"
-        value="11"
-      /><span class="maxCursor" style="left: 100%">⬢</span
-    ><span
-      class="maxIndicator atMaxIndicator"
-      style="left: 100%"
-    >11</span
-    >
-    </div>
-    <div class="slider">
-      <div class="sliderTrack"></div>
-      <div
-        class="sliderRange"
-        style="left: 0%; width: 100%"
-      ></div>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
-
-@Component({
-  name: 'RangeNumberSlider',
-  components: {
-  }
-})
-export default class extends Vue {}
-</script>
-<style lang="scss" scoped>
-.range-number-slider {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  margin-bottom: 42px;
-  width: 96%;
-  margin-left: 7px;
-}
-.range-number-slider .curMinContainer {
-  position: absolute;
-  width: 100%;
-}
-.range-number-slider .curMinContainer .thumbLeft{
-  z-index: 4;
-}
-.range-number-slider .curMinContainer .minCursor{
-  position: absolute;
-  color: #5b39bc;
-  transform: translateX(-50%);
-  text-align: center;
-  font-size: 20px;
-  top: -13px;
-  z-index: 3;
-}
-.range-number-slider .curMinContainer .minIndicator{
-  position: absolute;
-  width: 100%;
-  top: 20px;
-  color: #dee2e6;
-  transform: translateX(-50%);
-  text-align: center;
-}
-.range-number-slider .curMaxContainer {
-  position: absolute;
-  width: 100%;
-}
-.range-number-slider .curMaxContainer .thumbRight{
-  z-index: 4;
-}
-.range-number-slider .curMaxContainer .maxCursor{
-  position: absolute;
-  color: #5b39bc;
-  transform: translateX(-50%);
-  text-align: center;
-  font-size: 20px;
-  top: -13px;
-  z-index: 3;
-}
-.range-number-slider .curMaxContainer .maxIndicator{
-  position: absolute;
-  width: 100%;
-  top: 20px;
-  color: #dee2e6;
-  transform: translateX(-50%);
-  text-align: center;
-}
-.range-number-slider .curMaxContainer .atMaxIndicator {
-  transform: translateX(calc(-100% + 5px));
-  text-align: right;
-}
-.range-number-slider .slider{
-  position: relative;
-  width: 100%;
-}
-.range-number-slider .slider > * {
-  position: absolute;
-}
-.range-number-slider .slider .sliderRange{
-  background-color: #5b39bc;
-  z-index: 2;
-  border-radius: 3px;
-  height: 4px;
-}
-.range-number-slider .slider .sliderTrack {
-  background-color: #382873;
-  width: 100%;
-  height: 4px;
-}
-
-.range-number-slider .thumb {
-  position: absolute;
-  height: 0;
-  width: 100%;
-  max-width: 300px;
-  outline: none;
-  top: -2px;
-  left: -2px;
-  cursor: pointer;
-}
-
-.range-number-slider .overlapped {
-  z-index: 4;
-}
-
-.range-number-slider .thumb,
-.range-number-slider .thumb::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  -webkit-tap-highlight-color: transparent;
-}
-
-/* For Chrome browsers */
-.range-number-slider .thumb::-webkit-slider-thumb {
-  background-color: transparent;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  height: 50px;
-  width: 20px;
-  margin-top: 4px;
-  pointer-events: all;
-  position: relative;
-}
-
-.range-number-slider .thumbLeft::-webkit-slider-thumb {
-  transform: translateX(-50%);
-}
-.range-number-slider .thumbRight::-webkit-slider-thumb {
-  transform: translateX(50%);
-}
-
-.range-number-slider .thumbLeft::-moz-range-thumb {
-  transform: translateX(-50%);
-}
-.range-number-slider .thumbRight::-moz-range-thumb {
-  transform: translateX(50%);
-}
-
-/* For Firefox browsers */
-.range-number-slider .thumb::-moz-range-thumb {
-  background-color: #5b39bc;
-  background-color: transparent;
-  border: none;
-  border-radius: 50%;
-  cursor: pointer;
-  height: 14px;
-  width: 14px;
-  margin-top: 4px;
-  pointer-events: all;
-  position: relative;
-}
-</style>
diff --git a/src/components/market/RangeSlider.vue b/src/components/market/RangeSlider.vue
new file mode 100644
index 0000000..629eb26
--- /dev/null
+++ b/src/components/market/RangeSlider.vue
@@ -0,0 +1,51 @@
+<template>
+  <div class="">
+    <el-slider
+      v-model="value"
+      range
+      show-stops
+      :marks="marks"
+      :max="10">
+    </el-slider>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component({
+  name: 'RangeSlider',
+  components: {
+  }
+})
+export default class RangeSlider extends Vue {
+  private value = [4, 8]
+  private marks = {
+    0: '0h',
+    10: '10h'
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>
+<style lang="scss">
+.el-slider {
+  height: 62px;
+  margin-top: -20px;
+  .el-slider__runway{
+    background-color: #382873;
+    .el-slider__bar{
+      background-color: #5b39bc;
+    }
+    .el-slider__stop{
+      background-color: #5b39bc;
+    }
+    .el-slider__button-wrapper{
+      .el-slider__button{
+        background-color: #5b39bc;
+        border: none;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/market/SearchPanel.vue b/src/components/market/SearchPanel.vue
index b29b9a9..f5deb0a 100644
--- a/src/components/market/SearchPanel.vue
+++ b/src/components/market/SearchPanel.vue
@@ -3,12 +3,13 @@
     <div class="filter-header">
       <img class="icon"
            @click = "hideFilter"
+           alt="filter header"
            src="data:image/svg+xml,%3csvg width='12' height='20' viewBox='0 0 12 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M10.5 19L1.5 10L10.5 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e">
     </div>
     <div class="root">
       <div class="header">
-                <span class="label">FILTERS</span
-                ><button class="button">CLEAR ALL</button>
+        <span class="label">FILTERS</span>
+        <button class="button">CLEAR ALL</button>
       </div>
       <div class="content">
         <div class="one-block">
@@ -43,6 +44,7 @@
               <div class="arrow">
                 <img
                   class="icon"
+                  alt="icon"
                   src="data:image/svg+xml,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.8334 1.08337L7.00008 6.91671L1.16675 1.08337' stroke='white' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e"
                   :class="{'collapsed': !skinShow}"
                   @click="skinShow=!skinShow"
@@ -65,6 +67,7 @@
               <div class="arrow">
                 <img
                   class="icon"
+                  alt=""
                   src="data:image/svg+xml,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.8334 1.08337L7.00008 6.91671L1.16675 1.08337' stroke='white' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e"
                   :class="{'collapsed': !classShow}"
                   @click="classShow=!classShow"
@@ -87,6 +90,7 @@
               <div class="arrow">
                 <img
                   class="icon"
+                  alt=""
                   src="data:image/svg+xml,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.8334 1.08337L7.00008 6.91671L1.16675 1.08337' stroke='white' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e"
                   :class="{'collapsed': !levelShow}"
                   @click="levelShow=!levelShow"
@@ -94,46 +98,11 @@
               </div>
             </div>
             <div class="content" :class="{'collapsed': !levelShow}">
-              <range-number-slider></range-number-slider>
-            </div>
-          </div>
-        </div>
-        <div class="one-block">
-          <div class="slider-section">
-            <div class="header">
-              <span class="label">TROPHY CLASS</span>
-              <div class="arrow">
-                <img
-                  class="icon"
-                  src="data:image/svg+xml,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.8334 1.08337L7.00008 6.91671L1.16675 1.08337' stroke='white' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e"
-                  :class="{'collapsed': !trophyShow}"
-                  @click="trophyShow=!trophyShow"
-                />
-              </div>
-            </div>
-            <div class="content" :class="{'collapsed': !trophyShow}">
-              <range-mark-slider></range-mark-slider>
-            </div>
-          </div>
-        </div>
-        <div class="one-block">
-          <div class="slider-section">
-            <div class="header">
-              <span class="label">BATTLE</span>
-              <div class="arrow">
-                <img
-                  class="icon"
-                  src="data:image/svg+xml,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.8334 1.08337L7.00008 6.91671L1.16675 1.08337' stroke='white' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e"
-                  :class="{'collapsed': !battleShow}"
-                  @click="battleShow=!battleShow"
-                />
-              </div>
-            </div>
-            <div class="content" :class="{'collapsed': !battleShow}">
-              <range-mark-slider></range-mark-slider>
+              <range-slider></range-slider>
             </div>
           </div>
         </div>
+
         <div class="one-block">
           <div class="slider-section no-bottom-line">
             <div class="header">
@@ -141,6 +110,7 @@
               <div class="arrow">
                 <img
                   class="icon"
+                  alt=""
                   src="data:image/svg+xml,%3csvg width='14' height='8' viewBox='0 0 14 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M12.8334 1.08337L7.00008 6.91671L1.16675 1.08337' stroke='white' stroke-linecap='round' stroke-linejoin='round' /%3e %3c/svg%3e"
                   :class="{'collapsed': !priceShow}"
                   @click="priceShow=!priceShow"
@@ -166,14 +136,12 @@
 import { Component, Vue } from 'vue-property-decorator'
 import FilterItem from '@/components/market/FilterItem.vue'
 import SelectSection from '@/components/market/SelectSection.vue'
-import RangeNumberSlider from '@/components/market/RangeNumberSlider.vue'
-import RangeMarkSlider from '@/components/market/RangeMarkSlider.vue'
+import RangeSlider from '@/components/market/RangeSlider.vue'
 
 @Component({
   name: 'SearchPanel',
   components: {
-    RangeMarkSlider,
-    RangeNumberSlider,
+    RangeSlider,
     SelectSection,
     FilterItem
 
@@ -187,6 +155,12 @@ export default class extends Vue {
   battleShow = true
   priceShow = true
   levelShow = true
+  private value = [4, 8]
+  private marks = {
+    0: '0h',
+    10: '10h'
+  }
+
   hideFilter() {
     this.$emit('filter-show', false)
   }
@@ -200,39 +174,39 @@ export default class extends Vue {
   max-width: 100%;
   padding: 2.5em;
   box-sizing: border-box;
-}
-.searchPanel .root {
-  display: flex;
-  flex-direction: column;
-  cursor: default;
-}
-.searchPanel .root .header {
-  display: flex;
-  flex-direction: row;
-  padding: 0.75em 0;
-  border-bottom: 1px solid #5b3dcb;
-  width: 100%;
-}
-.searchPanel .root .header .label {
-  display: flex;
-  flex: 1;
-  font-size: 0.875em;
-  color: white;
-}
-.searchPanel .root .header .button {
-  display: flex;
-  background: none;
-  border: none;
-  outline: none;
-  font-weight: bold;
-  font-size: 0.875em;
-  color: #a346ec;
-  cursor: pointer;
-}
-.searchPanel .content {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
+  .root{
+    display: flex;
+    flex-direction: column;
+    cursor: default;
+    .header{
+      display: flex;
+      flex-direction: row;
+      padding: 0.75em 0;
+      border-bottom: 1px solid #5b3dcb;
+      width: 100%;
+      .label{
+        display: flex;
+        flex: 1;
+        font-size: 0.875em;
+        color: white;
+      }
+      .button{
+        display: flex;
+        background: none;
+        border: none;
+        outline: none;
+        font-weight: bold;
+        font-size: 0.875em;
+        color: #a346ec;
+        cursor: pointer;
+      }
+    }
+  }
+  .content{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
 }
 
 .filter-section {
@@ -240,113 +214,115 @@ export default class extends Vue {
   flex-direction: column;
   padding: 1em 0;
   border-bottom: 1px solid #5b3dcb;
-}
-.filter-section .header {
-  display: flex;
-  flex-direction: row;
-  border-bottom: none!important;
+  .header{
+    display: flex;
+    flex-direction: row;
+    border-bottom: none!important;
+    .label {
+      display: flex;
+      flex: 1;
+      font-weight: bold;
+      font-size: 0.875em;
+      color: rgba(188, 173, 242, 1);
+    }
+    .arrow {
+      display: flex;
+      .icon {
+        transform: rotate(180deg);
+        transition: all 0.3s;
+        &.collapsed{
+          transform: rotate(0deg);
+        }
+      }
+    }
+  }
+  .content {
+    transition: all 0.3s;
+    display: flex;
+    flex-direction: column;
+    opacity: 1;
+    margin-top: 1.5em;
+    &.collapsed{
+      opacity: 0;
+      overflow: hidden;
+      height: 0;
+      margin-top: 0;
+    }
+    .row{
+      display: flex;
+      flex-direction: column;
+    }
+  }
 }
 
-.filter-section .header .label {
-  display: flex;
-  flex: 1;
-  font-weight: bold;
-  font-size: 0.875em;
-  color: rgba(188, 173, 242, 1);
-}
-.filter-section .header .arrow {
-  display: flex;
-}
-.filter-section .header .arrow .icon {
-  transform: rotate(180deg);
-  transition: all 0.3s;
-}
-.filter-section .header .arrow .icon.collapsed{
-  transform: rotate(0deg);
-}
-.filter-section .content {
-  transition: all 0.3s;
-  display: flex;
-  flex-direction: column;
-  opacity: 1;
-  margin-top: 1.5em;
-}
-.filter-section .content.collapsed{
-  opacity: 0;
-  overflow: hidden;
-  height: 0;
-  margin-top: 0;
-}
-.filter-section .content .row{
-  display: flex;
-  flex-direction: column;
-}
 .slider-section {
   border-bottom: 1px solid #5b3dcb;
-}
-.slider-section.no-bottom-line {
-  border-bottom: none!important;
-}
-.slider-section .header {
-  border-bottom: none!important;
-}
-.slider-section .content {
-  margin-top: 1.5em;
-  transition: all 0.3s;
-}
-
-.slider-section .content.collapsed{
-  opacity: 0;
-  overflow: hidden;
-  height: 0;
-  margin-top: 0;
-}
-.slider-section .header .arrow .icon {
-  transform: rotate(180deg);
-  transition: all 0.3s;
-}
-.slider-section .header .arrow .icon.collapsed{
-  transform: rotate(0deg);
-}
-.slider-section .content.range-input {
-  transition: all 0.3s;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 1.5em;
-  color: #ffffff;
-  font-size: 0.875em;
-  line-height: 1.43;
-  font-weight: bold;
-}
-.slider-section .content .input {
-  padding: 0.5em;
-  border: 0.0625em solid #5b39bc;
-  box-sizing: border-box;
-  border-radius: 0.25em;
-  font-size: inherit;
-  color: inherit;
-  background: transparent;
-  min-width: 7.375em;
-
-  /* Chrome, Safari, Edge, Opera */
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  &.no-bottom-line {
+    border-bottom: none!important;
   }
-
-  /* Firefox */
-  &[type='number'] {
-    -moz-appearance: textfield;
+  .header {
+    border-bottom: none!important;
+    .arrow{
+      .icon {
+        transform: rotate(180deg);
+        transition: all 0.3s;
+        &.collapsed{
+          transform: rotate(0deg);
+        }
+      }
+    }
   }
+  .content {
+    margin-top: 1.5em;
+    transition: all 0.3s;
+    &.collapsed{
+      opacity: 0;
+      overflow: hidden;
+      height: 0;
+      margin-top: 0;
+    }
+    &.range-input {
+      transition: all 0.3s;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 1.5em;
+      color: #ffffff;
+      font-size: 0.875em;
+      line-height: 1.43;
+      font-weight: bold;
+    }
+    .input {
+      padding: 0.5em;
+      border: 0.0625em solid #5b39bc;
+      box-sizing: border-box;
+      border-radius: 0.25em;
+      font-size: inherit;
+      color: inherit;
+      background: transparent;
+      min-width: 7.375em;
 
-  &:focus {
-    outline: none;
-    border-color: #9a77ff;
+      /* Chrome, Safari, Edge, Opera */
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      /* Firefox */
+      &[type='number'] {
+        -moz-appearance: textfield;
+      }
+
+      &:focus {
+        outline: none;
+        border-color: #9a77ff;
+      }
+    }
   }
 }
+
 .filter-btn {
   display: none;
 }
@@ -364,10 +340,10 @@ export default class extends Vue {
     background-color: black;
     overflow-y: scroll;
     display: none;
-  }
-  .searchPanel .root {
-    margin-bottom: 140px;
-    margin-top: 76px;
+    .root {
+      margin-bottom: 140px;
+      margin-top: 76px;
+    }
   }
   .filter-btn{
     width: 100vw;
@@ -386,10 +362,7 @@ export default class extends Vue {
   .btnApply {
     line-height: inherit;
     padding: 20px 0;
-    margin-top: 40px;
-    margin-bottom: 45px;
-    margin-left: 24px;
-    margin-right: 24px;
+    margin: 40px 24px 45px;
     height: 55px;
     span {
       font-size: 1.125em;
@@ -418,4 +391,42 @@ export default class extends Vue {
     }
   }
 }
+.el-slider {
+  .el-slider__input {
+    margin-top: 0;
+  }
+  .el-slider__runway {
+    height: 32px;
+    margin-top: 0;
+    margin-bottom: 0 !important;
+    background-color: #FFFFFF;
+    border: 1px solid #DCDFE6;
+    .el-slider__bar {
+      height: 31px;
+    }
+    .el-slider__button-wrapper {
+      top: 0;
+      height: 32px;
+      .el-slider__button {
+        width: 4px;
+        height: 31px;
+        border-radius: 0;
+        background: #FFFFFF;
+        border: solid 2px #0068A5;
+      }
+    }
+    .el-slider__stop {
+      width: 1px;
+      height: 31px;
+      border-radius: 0;
+      background-color: #DCDFE6;
+    }
+    .el-slider__marks-text {
+      color: #717171;
+      margin-top: 0;
+      transform: translateX(-115%);
+    }
+  }
+}
+
 </style>
diff --git a/src/main.ts b/src/main.ts
index 05a007b..e6d3508 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import App from './App.vue'
-import { Loading, Message, MessageBox, Notification } from 'element-ui'
+import { Loading, Message, MessageBox, Notification, Slider } from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import router from './router'
 import store from './store'
@@ -9,6 +9,7 @@ import VueYouTubeEmbed from 'vue-youtube-embed'
 
 // Vue.use(ElementUI)
 Vue.use(Loading.directive)
+Vue.use(Slider)
 
 Vue.use(VueYouTubeEmbed)
 Vue.use(VueClipboard)
diff --git a/vue.config.js b/vue.config.js
index d27d609..b7a3822 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -22,10 +22,6 @@ module.exports = {
         path.resolve(__dirname, 'src/styles/_mixins.scss')
       ]
     }
-    // sitemap: {
-    //   baseURL: 'https://cebg.games',
-    //   routes
-    // }
   },
   chainWebpack(config) {
     // provide the app's title in html-webpack-plugin's options list so that