优化代码, 移除无用组件
This commit is contained in:
parent
97e1eba755
commit
e5baaca9d5
@ -36,33 +36,34 @@ export default class FilterItem extends Vue {
|
|||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
margin-bottom: 1em;
|
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>
|
</style>
|
||||||
|
@ -19,7 +19,7 @@ import { Component, Vue } from 'vue-property-decorator'
|
|||||||
export default class extends Vue {}
|
export default class extends Vue {}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@import '@/scss/tooltip.scss';
|
@import '../../scss/tooltip.scss';
|
||||||
.container {
|
.container {
|
||||||
width: 3.3em;
|
width: 3.3em;
|
||||||
height: 4.375em;
|
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">
|
<div class="filter-header">
|
||||||
<img class="icon"
|
<img class="icon"
|
||||||
@click = "hideFilter"
|
@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">
|
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>
|
||||||
<div class="root">
|
<div class="root">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<span class="label">FILTERS</span
|
<span class="label">FILTERS</span>
|
||||||
><button class="button">CLEAR ALL</button>
|
<button class="button">CLEAR ALL</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="one-block">
|
<div class="one-block">
|
||||||
@ -43,6 +44,7 @@
|
|||||||
<div class="arrow">
|
<div class="arrow">
|
||||||
<img
|
<img
|
||||||
class="icon"
|
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"
|
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}"
|
:class="{'collapsed': !skinShow}"
|
||||||
@click="skinShow=!skinShow"
|
@click="skinShow=!skinShow"
|
||||||
@ -65,6 +67,7 @@
|
|||||||
<div class="arrow">
|
<div class="arrow">
|
||||||
<img
|
<img
|
||||||
class="icon"
|
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"
|
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}"
|
:class="{'collapsed': !classShow}"
|
||||||
@click="classShow=!classShow"
|
@click="classShow=!classShow"
|
||||||
@ -87,6 +90,7 @@
|
|||||||
<div class="arrow">
|
<div class="arrow">
|
||||||
<img
|
<img
|
||||||
class="icon"
|
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"
|
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}"
|
:class="{'collapsed': !levelShow}"
|
||||||
@click="levelShow=!levelShow"
|
@click="levelShow=!levelShow"
|
||||||
@ -94,46 +98,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content" :class="{'collapsed': !levelShow}">
|
<div class="content" :class="{'collapsed': !levelShow}">
|
||||||
<range-number-slider></range-number-slider>
|
<range-slider></range-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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="one-block">
|
<div class="one-block">
|
||||||
<div class="slider-section no-bottom-line">
|
<div class="slider-section no-bottom-line">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
@ -141,6 +110,7 @@
|
|||||||
<div class="arrow">
|
<div class="arrow">
|
||||||
<img
|
<img
|
||||||
class="icon"
|
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"
|
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}"
|
:class="{'collapsed': !priceShow}"
|
||||||
@click="priceShow=!priceShow"
|
@click="priceShow=!priceShow"
|
||||||
@ -166,14 +136,12 @@
|
|||||||
import { Component, Vue } from 'vue-property-decorator'
|
import { Component, Vue } from 'vue-property-decorator'
|
||||||
import FilterItem from '@/components/market/FilterItem.vue'
|
import FilterItem from '@/components/market/FilterItem.vue'
|
||||||
import SelectSection from '@/components/market/SelectSection.vue'
|
import SelectSection from '@/components/market/SelectSection.vue'
|
||||||
import RangeNumberSlider from '@/components/market/RangeNumberSlider.vue'
|
import RangeSlider from '@/components/market/RangeSlider.vue'
|
||||||
import RangeMarkSlider from '@/components/market/RangeMarkSlider.vue'
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
name: 'SearchPanel',
|
name: 'SearchPanel',
|
||||||
components: {
|
components: {
|
||||||
RangeMarkSlider,
|
RangeSlider,
|
||||||
RangeNumberSlider,
|
|
||||||
SelectSection,
|
SelectSection,
|
||||||
FilterItem
|
FilterItem
|
||||||
|
|
||||||
@ -187,6 +155,12 @@ export default class extends Vue {
|
|||||||
battleShow = true
|
battleShow = true
|
||||||
priceShow = true
|
priceShow = true
|
||||||
levelShow = true
|
levelShow = true
|
||||||
|
private value = [4, 8]
|
||||||
|
private marks = {
|
||||||
|
0: '0h',
|
||||||
|
10: '10h'
|
||||||
|
}
|
||||||
|
|
||||||
hideFilter() {
|
hideFilter() {
|
||||||
this.$emit('filter-show', false)
|
this.$emit('filter-show', false)
|
||||||
}
|
}
|
||||||
@ -200,39 +174,39 @@ export default class extends Vue {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
padding: 2.5em;
|
padding: 2.5em;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
.root{
|
||||||
.searchPanel .root {
|
display: flex;
|
||||||
display: flex;
|
flex-direction: column;
|
||||||
flex-direction: column;
|
cursor: default;
|
||||||
cursor: default;
|
.header{
|
||||||
}
|
display: flex;
|
||||||
.searchPanel .root .header {
|
flex-direction: row;
|
||||||
display: flex;
|
padding: 0.75em 0;
|
||||||
flex-direction: row;
|
border-bottom: 1px solid #5b3dcb;
|
||||||
padding: 0.75em 0;
|
width: 100%;
|
||||||
border-bottom: 1px solid #5b3dcb;
|
.label{
|
||||||
width: 100%;
|
display: flex;
|
||||||
}
|
flex: 1;
|
||||||
.searchPanel .root .header .label {
|
font-size: 0.875em;
|
||||||
display: flex;
|
color: white;
|
||||||
flex: 1;
|
}
|
||||||
font-size: 0.875em;
|
.button{
|
||||||
color: white;
|
display: flex;
|
||||||
}
|
background: none;
|
||||||
.searchPanel .root .header .button {
|
border: none;
|
||||||
display: flex;
|
outline: none;
|
||||||
background: none;
|
font-weight: bold;
|
||||||
border: none;
|
font-size: 0.875em;
|
||||||
outline: none;
|
color: #a346ec;
|
||||||
font-weight: bold;
|
cursor: pointer;
|
||||||
font-size: 0.875em;
|
}
|
||||||
color: #a346ec;
|
}
|
||||||
cursor: pointer;
|
}
|
||||||
}
|
.content{
|
||||||
.searchPanel .content {
|
display: flex;
|
||||||
display: flex;
|
flex-direction: column;
|
||||||
flex-direction: column;
|
width: 100%;
|
||||||
width: 100%;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-section {
|
.filter-section {
|
||||||
@ -240,113 +214,115 @@ export default class extends Vue {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
padding: 1em 0;
|
padding: 1em 0;
|
||||||
border-bottom: 1px solid #5b3dcb;
|
border-bottom: 1px solid #5b3dcb;
|
||||||
}
|
.header{
|
||||||
.filter-section .header {
|
display: flex;
|
||||||
display: flex;
|
flex-direction: row;
|
||||||
flex-direction: row;
|
border-bottom: none!important;
|
||||||
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 {
|
.slider-section {
|
||||||
border-bottom: 1px solid #5b3dcb;
|
border-bottom: 1px solid #5b3dcb;
|
||||||
}
|
&.no-bottom-line {
|
||||||
.slider-section.no-bottom-line {
|
border-bottom: none!important;
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
.header {
|
||||||
/* Firefox */
|
border-bottom: none!important;
|
||||||
&[type='number'] {
|
.arrow{
|
||||||
-moz-appearance: textfield;
|
.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 {
|
/* Chrome, Safari, Edge, Opera */
|
||||||
outline: none;
|
&::-webkit-outer-spin-button,
|
||||||
border-color: #9a77ff;
|
&::-webkit-inner-spin-button {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Firefox */
|
||||||
|
&[type='number'] {
|
||||||
|
-moz-appearance: textfield;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #9a77ff;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.filter-btn {
|
.filter-btn {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -364,10 +340,10 @@ export default class extends Vue {
|
|||||||
background-color: black;
|
background-color: black;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
.root {
|
||||||
.searchPanel .root {
|
margin-bottom: 140px;
|
||||||
margin-bottom: 140px;
|
margin-top: 76px;
|
||||||
margin-top: 76px;
|
}
|
||||||
}
|
}
|
||||||
.filter-btn{
|
.filter-btn{
|
||||||
width: 100vw;
|
width: 100vw;
|
||||||
@ -386,10 +362,7 @@ export default class extends Vue {
|
|||||||
.btnApply {
|
.btnApply {
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
padding: 20px 0;
|
padding: 20px 0;
|
||||||
margin-top: 40px;
|
margin: 40px 24px 45px;
|
||||||
margin-bottom: 45px;
|
|
||||||
margin-left: 24px;
|
|
||||||
margin-right: 24px;
|
|
||||||
height: 55px;
|
height: 55px;
|
||||||
span {
|
span {
|
||||||
font-size: 1.125em;
|
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>
|
</style>
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import App from './App.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 'element-ui/lib/theme-chalk/index.css'
|
||||||
import router from './router'
|
import router from './router'
|
||||||
import store from './store'
|
import store from './store'
|
||||||
@ -9,6 +9,7 @@ import VueYouTubeEmbed from 'vue-youtube-embed'
|
|||||||
|
|
||||||
// Vue.use(ElementUI)
|
// Vue.use(ElementUI)
|
||||||
Vue.use(Loading.directive)
|
Vue.use(Loading.directive)
|
||||||
|
Vue.use(Slider)
|
||||||
|
|
||||||
Vue.use(VueYouTubeEmbed)
|
Vue.use(VueYouTubeEmbed)
|
||||||
Vue.use(VueClipboard)
|
Vue.use(VueClipboard)
|
||||||
|
@ -22,10 +22,6 @@ module.exports = {
|
|||||||
path.resolve(__dirname, 'src/styles/_mixins.scss')
|
path.resolve(__dirname, 'src/styles/_mixins.scss')
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
// sitemap: {
|
|
||||||
// baseURL: 'https://cebg.games',
|
|
||||||
// routes
|
|
||||||
// }
|
|
||||||
},
|
},
|
||||||
chainWebpack(config) {
|
chainWebpack(config) {
|
||||||
// provide the app's title in html-webpack-plugin's options list so that
|
// provide the app's title in html-webpack-plugin's options list so that
|
||||||
|
Loading…
x
Reference in New Issue
Block a user