merge

src/components/market/FilterLeft.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="container">
+    <Herofilter v-if="nftType - 1 == 0"></Herofilter>
+    <Weaponfilter v-else-if="nftType - 1 == 1"></Weaponfilter>
+    <Chipfilter v-else-if="nftType - 1 == 2"></Chipfilter>
+  </div>
+</template>
+
+<script>
+import Herofilter from "@/components/market/filters/Herofilter";
+import Weaponfilter from "@/components/market/filters/Weaponfilter";
+import Chipfilter from "@/components/market/filters/Chipfilter";
+export default {
+  props: ["nftType"],
+  components: {
+    Herofilter,
+    Chipfilter,
+    Weaponfilter,
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 340px;
+//   height: 1170px;
+  border-radius: 30px;
+}
+</style>

src/components/market/SearchResult.vue

@@ -13,7 +13,7 @@
     <!-- <result-no title="COMING SOON." desc=""></result-no> -->
     <card-list v-if="selectIdx -1 == 0"></card-list>
     <DunList v-else-if="selectIdx -1 == 1"></DunList>
-    <ChipList v-else="selectIdx-1 == 2"></ChipList>
+    <ChipList v-else-if="selectIdx-1 == 2"></ChipList>
   </div>
 </template>
 <script lang="ts">

src/components/market/Slider.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="slider" ref="slider">
+    <div class="process" :style="{ width }"></div>
+    <div class="thunk" ref="trunk" :style="{ left }">
+      <div class="block"></div>
+      <div class="tips">
+        <span>{{ scale * 15 }}</span>
+        <i class="fas fa-caret-down"></i>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+/*
+ * min 进度条最小值
+ * max 进度条最大值
+ * v-model 对当前值进行双向绑定实时显示拖拽进度
+ * */
+export default {
+  props: ["min", "max", "value"],
+  data() {
+    return {
+      slider: null, //滚动条DOM元素
+      thunk: null, //拖拽DOM元素
+      per: this.value, //当前值
+    };
+  },
+  //渲染到页面的时候
+  mounted() {
+    this.slider = this.$refs.slider;
+    this.thunk = this.$refs.trunk;
+    var _this = this;
+    this.thunk.onmousedown = function (e) {
+      var width = parseInt(_this.width);
+      var disX = e.clientX;
+      document.onmousemove = function (e) {
+        // value, left, width
+        // 当value变化的时候，会通过计算属性修改left，width
+
+        // 拖拽的时候获取的新width
+        var newWidth = e.clientX - disX + width;
+        // 拖拽的时候得到新的百分比
+        var scale = newWidth / _this.slider.offsetWidth;
+        _this.per = Math.ceil((_this.max - _this.min) * scale + _this.min);
+        _this.per = Math.max(_this.per, _this.min);
+        _this.per = Math.min(_this.per, _this.max);
+        _this.$emit("input", _this.per);
+      };
+      document.onmouseup = function () {
+        document.onmousemove = document.onmouseup = null;
+      };
+      return false;
+    };
+  },
+  computed: {
+    // 设置一个百分比，提供计算slider进度宽度和trunk的left值
+    // 对应公式为  当前值-最小值/最大值-最小值 = slider进度width / slider总width
+    // trunk left =  slider进度width + trunk宽度/2
+    scale() {
+      return (this.per - this.min) / (this.max - this.min);
+    },
+    width() {
+      if (this.slider) {
+        return this.slider.offsetWidth * this.scale + "px";
+      } else {
+        return 0 + "px";
+      }
+    },
+    left() {
+      if (this.slider) {
+        return (
+          this.slider.offsetWidth * this.scale -
+          this.thunk.offsetWidth / 2 +
+          "px"
+        );
+      } else {
+        return 0 + "px";
+      }
+    },
+  },
+};
+</script>
+<style>
+.box {
+  margin: 100px auto 0;
+  width: 80%;
+}
+.clear:after {
+  content: "";
+  display: block;
+  clear: both;
+}
+.slider {
+  position: relative;
+  margin: 20px 0;
+  width: 297px;
+  height: 9px;
+  background: #e4e7ed;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.slider .process {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 112px;
+  height: 10px;
+  border-radius: 5px;
+  background: #fff;
+}
+.slider .thunk {
+  position: absolute;
+  left: 100px;
+  top: -7px;
+  width: 20px;
+  height: 20px;
+}
+.slider .block {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  opacity: 0;
+  border: 2px solid #409eff;
+  background: rgba(255, 255, 255, 1);
+  transition: 0.2s all;
+}
+.slider .tips {
+  position: absolute;
+  left: -7px;
+  bottom: 0px;
+  min-width: 15px;
+  text-align: center;
+  /* padding: 4px 8px; */
+  width: 37px;
+  height: 16px;
+  /* background: #000; */
+  background: url("../../assets/market/filter-left/tips.png") no-repeat;
+  border-radius: 5px;
+  /* height: 24px; */
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 16px;
+  color: #2bcced;
+}
+.slider .tips i {
+  position: absolute;
+  margin-left: -5px;
+  left: 50%;
+  bottom: -9px;
+  font-size: 13px;
+  color: #000;
+}
+.slider .block:hover {
+  transform: scale(1.1);
+  opacity: 0.6;
+  opacity: 0;
+}
+</style>

src/components/market/filters/Chipfilter.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="container">
+        3
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 340px;
+ height: 1170px;
+  margin-top: 49px;
+  margin-left: 41px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 30px;
+}
+</style>

src/components/market/filters/Herofilter.vue

@@ -0,0 +1,309 @@
+<template>
+  <div class="container">
+    <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
+          width="116px"
+          src="../../../assets/market/filter-left/job.png"
+          alt=""
+        />
+      </div>
+      <div class="job-options">
+        <div class="job-item" v-for="(item, i) in jobList" :key="i">
+          <div @click="jobStatus(item)">
+            <img
+              width="66px"
+              v-if="item.jobType === true"
+              :src="item.jobImg"
+              alt=""
+            />
+            <img width="66px" v-else :src="item.disImg" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="level-filter">
+      <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-number">
+            <div>0</div>
+            <div>15</div>
+          </div>
+        </div>
+      </div>
+      <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-number">
+            <div>0</div>
+            <div>15</div>
+          </div>
+        </div>
+      </div>
+      <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-number">
+            <div>0</div>
+            <div>15</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="price">
+      <div class="price-btn" @click="priceFilter">Price</div>
+      <div class="price-bottom">
+        <div class="price-min">
+          <el-input v-model="priceMin" :maxlength="13" placeholder="Min"></el-input>
+        </div>
+        <div class="boder"></div>
+        <div class="price-max">
+          <el-input v-model="priceMax" :maxlength="13" placeholder="Max"></el-input>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Slider from "../../market/Slider.vue";
+export default {
+  components: {
+    Slider,
+  },
+  data() {
+    return {
+      hero: "",
+       priceMin:'',
+       priceMax:'',
+      jobList: [
+        {
+          id: 0,
+          jobname: "raider",
+          jobType: false,
+          jobImg: require("../../../assets/market/filter-left/raider.png"),
+          disImg: require("../../../assets/market/filter-left/raider-disabled.png"),
+        },
+        {
+          id: 1,
+          jobname: "guardian",
+          jobType: true,
+          jobImg: require("../../../assets/market/filter-left/guardian.png"),
+          disImg: require("../../../assets/market/filter-left/guardian-disabled.png"),
+        },
+        {
+          id: 2,
+          jobname: "machinist",
+          jobType: true,
+          jobImg: require("../../../assets/market/filter-left/machinist.png"),
+          disImg: require("../../../assets/market/filter-left/machinist-disabled.png"),
+        },
+        {
+          id: 3,
+          jobname: "medic",
+          jobType: true,
+          jobImg: require("../../../assets/market/filter-left/medic.png"),
+          disImg: require("../../../assets/market/filter-left/medic-disabled.png"),
+        },
+      ],
+    };
+  },
+  methods: {
+    jobStatus(item) {
+      this.jobList[item.id].jobType = !this.jobList[item.id].jobType;
+    },
+    searchClear() {
+      this.hero = "";
+    },
+    priceFilter(){
+        this.priceMin = "";
+        this.priceMax = "";
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 340px;
+  height: 1170px;
+  margin-top: 49px;
+  margin-left: 41px;
+  margin-bottom: 14px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 30px;
+  .filter {
+    width: 308px;
+    margin-top: 16px;
+    margin-left: 16px;
+    height: 58px;
+    background: url("../../../assets/market/filter-left/filter-bg.png")
+      no-repeat;
+    background-size: 100% 100%;
+  }
+  .search-content {
+    display: flex;
+    margin-top: 40px;
+    margin-left: 11px;
+    .search-input {
+      width: 216px;
+      height: 34px;
+      background: url("../../../assets/market/filter-left/search-input.png")
+        no-repeat;
+    }
+    .search-btn {
+      width: 96px;
+      margin-left: 5px;
+      height: 34px;
+      cursor: pointer;
+      background: url("../../../assets/market/filter-left/search-clear.png")
+        no-repeat;
+    }
+  }
+  .job-content {
+    margin-top: 45px;
+    display: flex;
+    margin-left: 15px;
+    margin-right: 19px;
+    flex-direction: column;
+    justify-content: center;
+    .job {
+      text-align: center;
+      cursor: pointer;
+    }
+    .job-options {
+      display: flex;
+      margin-top: 21px;
+      justify-content: space-between;
+      .job-item {
+        cursor: pointer;
+      }
+    }
+  }
+  .level-filter {
+    margin-left: 21px;
+    margin-right: 22px;
+    margin-top: 56px;
+    .level-item {
+      display: flex;
+      flex-direction: column;
+      color: #fff;
+    }
+    .level-slider {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .btn-bg {
+      width: 114px;
+      margin: 0 auto;
+      cursor: pointer;
+      text-align: center;
+      margin-bottom: 10px;
+      line-height: 48px;
+      height: 48px;
+      background: url("../../../assets/market/filter-left/btn-bg.png") no-repeat;
+    }
+    .slider-number {
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+  .price {
+    margin-top: 216px;
+    margin-left: 23px;
+    display: flex;
+    flex-direction: column;
+    // align-items: center;
+    .price-btn {
+      width: 124px;
+      font-size: 24px;
+      font-weight: normal;
+      text-align: center;
+      cursor: pointer;
+      color: #ffffff;
+      height: 47px;
+      margin-left: 85px;
+      margin-bottom: 24px;
+      line-height: 47px;
+      background: url("../../../assets/market/filter-left/btn-bg.png") no-repeat;
+    }
+    .price-min {
+      width: 124px;
+      font-size: 24px;
+      font-weight: normal;
+      text-align: center;
+      color: #ffffff;
+      height: 34px;
+      background: url("../../../assets/market/filter-left/price-btn.png")
+        no-repeat;
+      background-size: 100% 100%;
+    }
+    .price-max {
+      width: 124px;
+      font-size: 24px;
+      font-weight: normal;
+      text-align: center;
+      color: #ffffff;
+      height: 34px;
+      background: url("../../../assets/market/filter-left/price-btn.png")
+        no-repeat;
+      background-size: 100% 100%;
+    }
+    .price-bottom {
+      display: flex;
+      width: 290px;
+      justify-content: flex-start;
+      ::v-deep .el-input__inner {
+        background: transparent;
+        height: 34px;
+        color: #fff;
+        border: none;
+      }
+      ::v-deep .el-input__inner::placeholder {
+        color: #fff;
+        text-align: center;
+      }
+    }
+    .boder {
+      margin-top: 15px;
+      width: 20px;
+      margin-right: 11px;
+      margin-left: 11px;
+      background: #ffffff;
+      height: 2px;
+    }
+  }
+}
+.search-input {
+  ::v-deep .el-input__inner {
+    height: 34px;
+    border-top-left-radius: 14px;
+    border-bottom-left-radius: 14px;
+    border: none;
+    color: #6a6f77;
+    outline: 0;
+  }
+  ::v-deep .el-input__icon {
+    line-height: 33px !important;
+  }
+}
+</style>

src/components/market/filters/Weaponfilter.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="container">
+        2
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 340px;
+  height: 1170px;
+  margin-top: 49px;
+  margin-left: 41px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 30px;
+}
+</style>

src/main.ts

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import '@/styles/index.scss'
 
 import App from './App.vue'
-import { Loading, Message, MessageBox, Notification, Button,Dialog, Slider, Tooltip ,Progress} from 'element-ui'
+import { Loading, Message, MessageBox, Notification, Button,Dialog, Slider, Tooltip ,Progress,Input} from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 import router from './router'
 import store from './store'
@@ -13,6 +13,7 @@ import VueClipboard from 'vue-clipboard2'
 Vue.use(Loading.directive)
 Vue.use(Slider)
 Vue.use(Tooltip)
+Vue.use(Input)
 Vue.use(Button)
 Vue.use(Dialog)
 Vue.use(Progress)

src/views/desktop/Market.vue

@@ -3,7 +3,8 @@
     <top-menu class="desk-top" :current-tab="currentTab"></top-menu>
     <section class="root">
       <div class="container">
-        <search-panel @filter-show="showFilter" :nft-type="nftType" :class="{'show': mobileFilterShow}"></search-panel>
+        <!-- <search-panel @filter-show="showFilter" :nft-type="nftType" :class="{'show': mobileFilterShow}"></search-panel> -->
+        <FilterLeft @filter-show="showFilter"  :nft-type="nftType"></FilterLeft>
         <div class="right-part">
           <nft-type-bar :select-idx="nftType" @nft-type-changed="onNftTypeClicked"></nft-type-bar>
           <search-result @filter-show="showFilter" :select-idx="nftType" :show-sort="true"></search-result>
@@ -17,6 +18,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import SearchPanel from '@/components/market/SearchPanel.vue'
+import FilterLeft from '@/components/market/FilterLeft.vue'
 import SearchResult from '@/components/market/SearchResult.vue'
 import TopMenu from '@/components/market/TopMenu.vue'
 import BaseFooter from '@/components/layout/BaseFooter.vue'
@@ -28,6 +30,7 @@ import NftTypeBar from '@/components/market/NftTypeBar.vue'
     BaseFooter,
     SearchResult,
     SearchPanel,
+    FilterLeft,
     TopMenu
   }
 })
@@ -51,13 +54,13 @@ export default class Market extends Vue {
 .root {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  // align-items: center;
   background-image: url(../../assets/market/bg.png.png);
 }
 .container {
   display: flex;
   flex-direction: row;
-  width: 1440px;
+   width: 1440px;
   max-width: 100%;
   box-sizing: border-box;
   .right-part {
@@ -102,7 +105,11 @@ export default class Market extends Vue {
     text-transform: uppercase;
   }
 }
-
+@media (min-width: 1924px) {
+  .root {
+   align-items: center;
+}
+}
 @media (min-width: 1024px) and (max-width: 1439px) {
   .root {
     font-size: 11px;

src/views/mobile/Market.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="container">
+      移动端
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped>
+  .container{
+    width:100vw;
+    height: 100vh;
+    background: #ffff;
+  }
+</style>