fix

src/components/market/HeroLevel.vue

@@ -1,19 +1,21 @@
 <template>
   <div class="root">
-    <img class="logo"
+    <img
-                                         src="data:image/svg+xml,%3csvg width='71' height='64' viewBox='0 0 71 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg filter='url(%23filter0_d)'%3e %3cpath d='M4.75 42.4667L12.7348 0H49.75L66.25 12.5L57.8258 56H18.3712L4.75 42.4667Z' fill='%2307011D'/%3e %3c/g%3e %3cdefs%3e %3cfilter id='filter0_d' x='0.75' y='0' width='69.5' height='64' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e %3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e %3cfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e %3cfeOffset dy='4'/%3e %3cfeGaussianBlur stdDeviation='2'/%3e %3cfeComposite in2='hardAlpha' operator='out'/%3e %3cfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3e %3cfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3e %3cfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3e %3c/filter%3e %3c/defs%3e %3c/svg%3e">
+      class="logo"
+      src="data:image/svg+xml,%3csvg width='71' height='64' viewBox='0 0 71 64' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg filter='url(%23filter0_d)'%3e %3cpath d='M4.75 42.4667L12.7348 0H49.75L66.25 12.5L57.8258 56H18.3712L4.75 42.4667Z' fill='%2307011D'/%3e %3c/g%3e %3cdefs%3e %3cfilter id='filter0_d' x='0.75' y='0' width='69.5' height='64' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e %3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e %3cfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3e %3cfeOffset dy='4'/%3e %3cfeGaussianBlur stdDeviation='2'/%3e %3cfeComposite in2='hardAlpha' operator='out'/%3e %3cfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0'/%3e %3cfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow'/%3e %3cfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow' result='shape'/%3e %3c/filter%3e %3c/defs%3e %3c/svg%3e"
+    />
     <span class="level">LEVEL</span>
-    <span class="value">1</span></div>
+    <span class="value">1</span>
+  </div>
 </template>
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue } from "vue-property-decorator";
 
 @Component({
-  name: 'HeroLevel',
+  name: "HeroLevel",
-  components: {}
+  components: {},
 })
-export default class extends Vue {
+export default class extends Vue {}
-}
 </script>
 <style lang="scss" scoped>
 .root {

src/components/mobile/main/Herofilter.vue

@@ -1,18 +1,5 @@
 <template>
   <div class="containers">
-    <!-- <div class="filter"></div>
-      <div class="search-content">
-        <div class="search-input">
-          <el-input
-            prefix-icon="el-icon-search"
-            v-model="hero"
-            :maxlength="24"
-            placeholder="Search Name or Tokenid"
-          ></el-input>
-        </div>
-        <div class="search-btn" @click="searchClear"></div>
-      </div>
-      <div class="seach-input"></div> -->
     <div class="job-content">
       <div class="job">
         <img src="../../../assets/market/filter-left/job.png" alt="" />
@@ -20,13 +7,8 @@
       <div class="job-options">
         <div class="job-item" v-for="(item, i) in jobList" :key="i">
           <div class="job-status" @click="jobStatus(item)">
-            <img
+            <img v-if="item.jobType === true" :src="item.jobImg" alt="" />
-              
+            <img v-else :src="item.disImg" alt="" />
-              v-if="item.jobType === true"
-              :src="item.jobImg"
-              alt=""
-            />
-            <img  v-else :src="item.disImg" alt="" />
           </div>
         </div>
       </div>
@@ -35,7 +17,11 @@
       <div class="level-item">
         <div class="btn-bg">Quility</div>
         <div class="level-slider">
-          <div><Slider :max="15" :min="0" :value="7"></Slider></div>
+          <div class="slider">
+            <!-- <el-slider :min="0" height="190" :max="15" v-model="value2">
+            </el-slider> -->
+            <Slider :min="0" :max="15" v-model="value"></Slider>
+          </div>
           <div class="slider-number">
             <div>0</div>
             <div>15</div>
@@ -45,7 +31,10 @@
       <div class="level-item">
         <div class="btn-bg">2</div>
         <div class="level-slider">
-          <div><Slider :max="15" :min="0" :value="7"></Slider></div>
+          <div class="slider">
+            <!-- <el-slider height="190" :min="0" :max="15" v-model="value" /> -->
+            <Slider :min="0" :max="15" v-model="value2"></Slider>
+          </div>
           <div class="slider-number">
             <div>0</div>
             <div>15</div>
@@ -55,7 +44,10 @@
       <div class="level-item">
         <div class="btn-bg">3</div>
         <div class="level-slider">
-          <div><Slider :max="15" :min="0" :value="7"></Slider></div>
+          <div class="slider">
+            <!-- <el-slider height="190" :min="0" :max="15" v-model="value3" /> -->
+            <Slider :min="0" :max="15" v-model="value3"></Slider>
+          </div>
           <div class="slider-number">
             <div>0</div>
             <div>15</div>
@@ -87,7 +79,7 @@
 </template>
 
 <script>
-import Slider from "../../market/Slider.vue";
+import Slider from "./Slider.vue";
 export default {
   components: {
     Slider,
@@ -96,6 +88,9 @@ export default {
     return {
       hero: "",
       priceMin: "",
+      value2: 7,
+      value3: 7,
+      value: 7,
       priceMax: "",
       jobList: [
         {
@@ -129,6 +124,9 @@ export default {
       ],
     };
   },
+  mounted() {
+    // document.getElementsByClassName("el-slider__button")[0].childNodes[0].nodeValue = "跳转";
+  },
   methods: {
     jobStatus(item) {
       this.jobList[item.id].jobType = !this.jobList[item.id].jobType;
@@ -149,6 +147,7 @@ export default {
   width: 734px;
   height: 1428px;
   background: rgba(26, 40, 57, 0.86);
+  transition: transform linear 0.2s, opacity linear 0.2s;
   border-radius: 40px;
   margin-top: 49px;
   margin-bottom: 14px;
@@ -157,9 +156,10 @@ export default {
     margin-top: 16px;
     margin-left: 16px;
     height: 58px;
-    // background: url("../../../assets/market/filter-left/filter-bg.png")
+  }
-    //   no-repeat;
+  .slider {
-    // background-size: 100% 100%;
+    width: 600px;
+    height: 19px;
   }
   .search-content {
     display: flex;
@@ -208,7 +208,7 @@ export default {
         .job-status {
           width: 139px;
           height: 151px;
-          img{
+          img {
             width: 100%;
           }
         }
@@ -234,7 +234,7 @@ export default {
       margin: 0 auto;
       cursor: pointer;
       text-align: center;
-      margin-bottom: 10px;
+      margin-bottom: 70px;
       line-height: 90px;
       height: 90px;
       background: url("../../../assets/market/filter-left/btn-bg.png") no-repeat;
@@ -251,7 +251,7 @@ export default {
     margin-left: 23px;
     display: flex;
     flex-direction: column;
-     align-items: center;
+    align-items: center;
     .price-btn {
       width: 271px;
       font-size: 24px;
@@ -295,6 +295,7 @@ export default {
       width: 633px;
       height: 73px;
       justify-content: flex-start;
+      align-items: center;
       ::v-deep .el-input__inner {
         background: transparent;
         height: 60px;
@@ -308,7 +309,7 @@ export default {
     }
     .boder {
       margin-top: 15px;
-      width: 20px;
+      width: 45px;
       margin-right: 11px;
       margin-left: 11px;
       background: #ffffff;
@@ -329,4 +330,23 @@ export default {
     line-height: 33px !important;
   }
 }
+
+::v-deep .el-slider__bar {
+  background: transparent;
+  height: 19px !important;
+}
+::v-deep .el-slider__runway {
+  height: 19px !important;
+}
+::v-deep .el-slider__button {
+  width: 77px;
+  height: 34px;
+  opacity: 0;
+  border: none;
+  background: url("../../../assets/market/filter-left/tips.png") no-repeat;
+  background-size: contain;
+}
+</style>
+<style>
+
 </style>

src/components/mobile/main/Slider.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="my-slider">
+    <div class="my-slider__tooltip" :style="style">
+      <div class="my-slider__tooltip-wrapper">
+        {{ slider }}
+      </div>
+    </div>
+    <el-slider
+      v-model="slider"
+      :format-tooltip="(value) => `${value}`"
+      :show-tooltip="false"
+      :min="min"
+      :max="max"
+      @input="input"
+    ></el-slider>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MySlider",
+  model: {
+    prop: "value",
+    event: "change",
+  },
+  props: {
+    value: {
+      type: Number,
+      default: 100,
+    },
+    min: {
+      type: Number,
+      default: 0,
+    },
+    max: {
+      type: Number,
+      default: 100,
+    },
+  },
+  data() {
+    return {
+      slider: this.value,
+    };
+  },
+  watch: {
+    value(newValue) {
+      this.slider = newValue;
+    },
+  },
+  computed: {
+    style() {
+      const length = this.max - this.min,
+        progress = this.slider - this.min,
+        left = (progress / length) * 100;
+      return {
+        paddingLeft: `${left}%`,
+      };
+    },
+  },
+  methods: {
+    input(value) {
+      this.$emit("change", value);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.my-slider {
+  position: relative;
+  .my-slider__tooltip {
+    position: absolute;
+    top: 6px;
+    z-index: 999;
+    text-align: left;
+    .my-slider__tooltip-wrapper {
+      width: 7.5vw;
+      height: 3.6vw;
+      font-size: 0.6rem;
+      color: #2bcced;
+      text-align: center;
+      background: url("../../../assets/market/filter-left/tips.png") no-repeat;
+      background-size: 100% 100%;
+      transform: translateX(-50%);
+      top: -50%;
+    }
+  }
+}
+</style>

src/components/mobile/main/WeaponModal.vue

@@ -163,18 +163,18 @@
               <div class="hero-item hero-item-hp">
                 <div class="item">
                   <div class="item-img">
-                    <img src="../../../assets/market/hero/hp.png" alt="" />
+                    <img src="../../../assets/market/hero/attack.png" alt="" />
                   </div>
-                  <div>HP</div>
+                  <div>ATTACK</div>
                 </div>
                 <div>9999</div>
               </div>
               <div class="hero-item hero-item-attack">
                 <div class="item">
                   <div class="item-img">
-                    <img src="../../../assets/market/hero/attack.png" alt="" />
+                    <img src="../../../assets/market/weapon/range.png" alt="" />
                   </div>
-                  <div>TTACK</div>
+                  <div>RANGE</div>
                 </div>
                 <div>1234.56</div>
               </div>
@@ -182,13 +182,31 @@
               <div class="hero-item hero-item-def">
                 <div class="item">
                   <div class="item-img">
-                    <img src="../../../assets/market/hero/def.png" alt="" />
+                    <img src="../../../assets/market/weapon/rate.png" alt="" />
                   </div>
-                  <div>DEFENCE</div>
+                  <div>REAT</div>
                 </div>
                 <div>1234.56</div>
               </div>
               <div class="hero-item hero-item-cri">
+                <div class="item">
+                  <div class="item-img">
+                    <img src="../../../assets/market/weapon/clip.png" alt="" />
+                  </div>
+                  <div>CLIP</div>
+                </div>
+                <div>99.99%</div>
+              </div>
+              <div class="hero-item hero-item-criDam">
+                <div class="item">
+                  <div class="item-img">
+                    <img src="../../../assets/market/weapon/reload.png" alt="" />
+                  </div>
+                  <div>RELOAD</div>
+                </div>
+                <div>99.99%</div>
+              </div>
+              <div class="hero-item hero-item-dodge">
                 <div class="item">
                   <div class="item-img">
                     <img src="../../../assets/market/hero/cri.png" alt="" />
@@ -197,39 +215,31 @@
                 </div>
                 <div>99.99%</div>
               </div>
-              <div class="hero-item hero-item-criDam">
-                <div class="item">
-                  <div class="item-img">
-                    <img src="../../../assets/market/hero/criDam.png" alt="" />
-                  </div>
-                  <div>CRI DAMAGE</div>
-                </div>
-                <div>99.99%</div>
-              </div>
-              <div class="hero-item hero-item-dodge">
-                <div class="item">
-                  <div class="item-img">
-                    <img src="../../../assets/market/hero/dodge.png" alt="" />
-                  </div>
-                  <div>DODGE</div>
-                </div>
-                <div>99.99%</div>
-              </div>
               <div class="hero-item hero-item-reduces">
                 <div class="item">
                   <div class="item-img">
-                    <img src="../../../assets/market/hero/reduces.png" alt="" />
+                    <img src="../../../assets/market/hero/criDam.png" alt="" />
                   </div>
                   <div>RUDUCE</div>
                 </div>
                 <div>99.99%</div>
               </div>
+             
               <div class="hero-item hero-item-speed">
                 <div class="item">
                   <div class="item-img">
-                    <img src="../../../assets/market/hero/speed.png" alt="" />
+                    <img   src="../../../assets/market/weapon/brain.png" alt="" />
                   </div>
-                  <div>SPEED</div>
+                  <div> BRAIN LIFE PCT</div>
+                </div>
+                <div>6</div>
+              </div>
+              <div class="hero-item hero-item-speed">
+                <div class="item">
+                  <div class="item-img">
+                    <img src="../../../assets/market/weapon/bulletSpeed.png" alt="" />
+                  </div>
+                  <div>BULLET SPEED</div>
                 </div>
                 <div>6</div>
               </div>
@@ -636,25 +646,28 @@ export default {
           }
         }
         .hero-item-hp {
-          margin-bottom: 23px;
+          margin-bottom: 17px;
         }
         .hero-item-attack {
-          margin-bottom: 23px;
+          margin-bottom: 17px;
         }
         .hero-item-def {
-          margin-bottom: 23px;
+          margin-bottom: 17px;
         }
         .hero-item-cri {
-          margin-bottom: 23px;
+          margin-bottom: 17px;
         }
         .hero-item-criDam {
-          margin-bottom: 23px;
+          margin-bottom: 17px;
         }
         .hero-item-dodge {
-          margin-bottom: 23px;
+          margin-bottom: 17px;
         }
         .hero-item-reduces {
-          margin-bottom: 23px;
+          margin-bottom: 17px;
+        }
+        .hero-item-speed{
+          margin-bottom: 17px;
         }
       }
 

src/views/mobile/Market.vue

@@ -5,11 +5,20 @@
       <div class="filter" @click="handFilter">
         <img src="../../assets/mobile/market/hero/fiter.png" alt="" />
       </div>
-      <div class="search"></div>
+      <div class="search">
-      <div class="clear">
+        <el-input
+          prefix-icon="el-icon-search"
+          v-model="hero"
+          :maxlength="24"
+          placeholder="Search Name or Tokenid"
+        ></el-input>
+      </div>
+      <div class="clear" @click="handClear">
         <img src="../../assets/mobile/market/hero/clear.png" alt="" />
       </div>
-      <Herofilter  v-show="isFiters"  class="filter-modal"></Herofilter>
+      <Transition>
+        <Herofilter v-show="isFiters" class="filter-modal"></Herofilter
+      ></Transition>
     </div>
     <div class="tab">
       <div
@@ -17,7 +26,6 @@
         v-for="(s, i) in types"
         :key="i"
         :class="{ active: s.id === curId }"
-       
       >
         <img @click="onClickItem(s)" :src="s.Image" alt="" width="162px" />
       </div>
@@ -56,6 +64,7 @@ import HeroList from "../../components/mobile/main/HeroList.vue";
 import WeaponList from "../../components/mobile/main/WeaponList";
 import ChipList from "../../components/mobile/main/ChipList";
 import Herofilter from "../../components/mobile/main/Herofilter.vue";
+import MySlider from "@/components/mobile/main/Slider.vue";
 export default {
   components: {
     mobileHeader,
@@ -63,12 +72,14 @@ export default {
     HeroList,
     Herofilter,
     WeaponList,
-    ChipList
+    ChipList,
+    MySlider,
   },
   data() {
     return {
       curId: 0,
-      isFiters:false,
+      hero: "",
+      isFiters: false,
       types: [
         { id: 0, Image: require("../../assets/mobile/market/hero.png") },
         { id: 1, Image: require("../../assets/mobile/market/weapon.png") },
@@ -104,7 +115,10 @@ export default {
       this.curId = s.id;
     },
     handFilter(s) {
-      this.isFiters = !this.isFiters
+      this.isFiters = !this.isFiters;
+    },
+    handClear() {
+      this.hero = "";
     },
   },
 };
@@ -118,17 +132,28 @@ $item-size: 22px;
   // height: 100vh;
   background: url("../../assets/mobile/market/bg.png") no-repeat;
   .search {
-    width: 500px;
+    width: 575px;
     height: 81px;
     background: #ffffff;
     border-radius: 20px 10px 10px 20px;
+    ::v-deep .el-input__inner {
+      background: transparent;
+      height: 81px;
+      // padding-left: 60px;
+      color: #474545;
+      border: none;
+    }
+    ::v-deep .el-input__inner::placeholder {
+      color: #c1c1c1;
+      // text-align: center;
+    }
+    ::v-deep .el-input__icon {
+      line-height: 79px !important;
+    }
+    ::v-deep .el-input__prefix {
+      left: 55px;
+    }
   }
-  //   .container .search[data-v-7077e23f] {
-  //     width: 46.296296vw;
-  //     height: 7.5vw;
-  //     background: #ffffff;
-  //     border-radius: 1.851852vw 0.925926vw 0.925926vw 1.851852vw;
-  // }
   .filter {
     width: 255px;
     height: 81px;
@@ -154,13 +179,13 @@ $item-size: 22px;
   .filter-top {
     display: flex;
     padding-top: 145px;
-    margin-left: 45px;
+    margin-left: 25px;
     justify-content: flex-start;
     position: relative;
-    .filter-modal{
+    .filter-modal {
-     position: absolute;
+      position: absolute;
-     top: 202px;
+      top: 202px;
-     left:-11px ;
+      left: 0;
       z-index: 1;
     }
   }
@@ -252,5 +277,30 @@ $item-size: 22px;
       font-size: $item-size;
     }
   }
+
+  // .v-enter-active,
+  // .v-leave-active {
+  //   transition: opacity 0.5s ease;
+  // }
+
+  // .v-enter-from,
+  // .v-leave-to {
+  //   opacity: 0;
+  // }
+
+  .v-enter-from,
+  .v-leave-to {
+    opacity: 0;
+  }
+
+  .v-enter-active,
+  .v-leave-active {
+    transition: opacity 0.5s ease;
+  }
+
+  .v-enter-to,
+  .v-leave-from {
+    opacity: 1;
+  }
 }
 </style>