优化代码, 移除无用组件
This commit is contained in:
cebgcontract
parent
97e1eba755
commit
e5baaca9d5
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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>
|
||||
@ -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>
|
||||
51
src/components/market/RangeSlider.vue
Normal file
51
src/components/market/RangeSlider.vue
Normal file
@ -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>
|
||||
@ -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>
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user