This commit is contained in:
huangjinming 2023-01-05 13:36:26 +08:00
parent db6f750c40
commit 09f2639117
6 changed files with 46 additions and 120 deletions

View File

@ -23,8 +23,6 @@
<div class="btn-bg">Quility</div>
<div class="level-slider">
<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">
@ -33,32 +31,7 @@
</div>
</div>
</div>
<!-- <div class="level-item">
<div class="btn-bg">2</div>
<div class="level-slider">
<div class="slider">
<Slider :min="0" :max="15" v-model="value2"></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 class="slider">
<Slider :min="0" :max="15" v-model="value3"></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>

View File

@ -6,6 +6,7 @@
prefix-icon="el-icon-search"
v-model="value"
:maxlength="24"
@input="search"
placeholder="Search Name or Tokenid"
></el-input>
</div>
@ -57,6 +58,10 @@ export default {
};
},
methods: {
search() {
this.$emit("handSearch",this.value);
console.log('handSearch');
},
handClear() {},
handFilter() {
this.nftNumber = !this.nftNumber;

View File

@ -23,8 +23,6 @@
<div class="btn-bg">Quility</div>
<div class="level-slider">
<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">
@ -37,7 +35,6 @@
<div class="btn-bg">Level</div>
<div class="level-slider">
<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">
@ -50,7 +47,6 @@
<div class="btn-bg">durability</div>
<div class="level-slider">
<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">
@ -89,7 +85,7 @@ import PropertySelect from "./PropertySelect.vue";
export default {
components: {
Slider,
PropertySelect
PropertySelect,
},
data() {
return {

View File

@ -18,47 +18,7 @@
@handSelect="handHeroSelect"
></PropertySelect>
</div>
<div class="level-filter">
<!-- <div class="level-item">
<div class="btn-bg">Quility</div>
<div class="level-slider">
<div class="slider">
<Slider :min="0" :max="15" v-model="value"></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 class="slider">
<Slider :min="0" :max="15" v-model="value2"></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 class="slider">
<Slider :min="0" :max="15" v-model="value3"></Slider>
</div>
<div class="slider-number">
<div>0</div>
<div>15</div>
</div>
</div>
</div> -->
</div>
<div class="level-filter"></div>
<div class="price">
<div class="price-btn" @click="priceFilter">Price</div>
<div class="price-bottom">
@ -88,7 +48,7 @@ import PropertySelect from "./PropertySelect.vue";
export default {
components: {
Slider,
PropertySelect
PropertySelect,
},
data() {
return {
@ -113,7 +73,6 @@ export default {
jobImg: require("../../../assets/market/filter-left/guardian.png"),
disImg: require("../../../assets/market/filter-left/guardian-disabled.png"),
},
],
};
},
@ -347,4 +306,3 @@ export default {
background-size: contain;
}
</style>

View File

@ -1,17 +1,6 @@
<template>
<div class="containers">
<div class="job-content">
<!-- <div class="job">
<img 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 class="job-status" @click="jobStatus(item)">
<img v-if="item.jobType === true" :src="item.jobImg" alt="" />
<img v-else :src="item.disImg" alt="" />
</div>
</div>
</div> -->
<PropertySelect
:options="options"
:selectValue="selectValue"
@ -23,8 +12,6 @@
<div class="btn-bg">Quility</div>
<div class="level-slider">
<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">
@ -37,7 +24,6 @@
<div class="btn-bg">2</div>
<div class="level-slider">
<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">
@ -50,7 +36,6 @@
<div class="btn-bg">3</div>
<div class="level-slider">
<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">

View File

@ -1,7 +1,7 @@
<template>
<div class="container">
<mobile-header current-section="market"></mobile-header>
<FilterTop :nftType="nftType"></FilterTop>
<FilterTop :nftType="nftType" @handSearch="handSearch"></FilterTop>
<NftTypeBar
:nftType="nftType"
:sortOptions="sortOptions"
@ -23,6 +23,7 @@ import mobileHeader from "@/components/mobile/main/MobileHeader.vue";
import { queryShellNftList } from "@/api/Market";
import { AppModule } from "@/store/modules/app";
import { UserModule } from "@/store/modules/user";
import { debounce } from "@/utils/formatAddress";
import NftTypeBar from "@/components/mobile/main/NftTypeBar.vue";
import MobileFooter from "@/components/mobile/main/MobileFooter.vue";
import HeroList from "@/components/mobile/main/HeroList.vue";
@ -48,6 +49,7 @@ export default {
hero: "",
isType: "market",
nftList: [],
debounce: null,
priceFilter: "0|10000",
isFiters: false,
totalPage: 1,
@ -67,31 +69,31 @@ export default {
{ id: 3, name: "CHIP" },
{ id: 4, name: "PIECE" },
],
sortOptions:[
{
value: "1|1",
label: "Recently",
},
{
value: "2|1",
label: "Highest",
},
{
value: "2|0",
label: "Lowest",
},
{
value: "3|1",
label: "Quality",
},
{
value: "4|1",
label: "Level",
},
{
value: "5|1",
label: "Energy",
},
sortOptions: [
{
value: "1|1",
label: "Recently",
},
{
value: "2|1",
label: "Highest",
},
{
value: "2|0",
label: "Lowest",
},
{
value: "3|1",
label: "Quality",
},
{
value: "4|1",
label: "Level",
},
{
value: "5|1",
label: "Energy",
},
],
value: "",
};
@ -109,6 +111,11 @@ export default {
}
},
},
created() {
this.debounce = debounce(() => {
this.getHeroNftList();
}, 1500);
},
methods: {
onClickItem(s) {
this.nftType = s.id;
@ -122,6 +129,10 @@ export default {
handFilter(s) {
this.isFiters = !this.isFiters;
},
handSearch(value) {
this.searchFilters =value;
this.debounce()
},
handClear() {
this.hero = "";
},
@ -167,11 +178,9 @@ export default {
</script>
<style lang="scss" scoped>
.container {
width: 100vw;
// height: 100vh;
background: url("../../assets/mobile/market/bg.png") no-repeat;
}
</style>