crypto/bemarket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改市场页面

Browse Source
This commit is contained in:
cebgcontract 2022-03-10 15:30:55 +08:00
parent d3296d87dc
commit cfcc36af55
9 changed files with 34 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/market/arrow-down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 377 B

11
src/components/market/Pagination.vue
View File

@ -3,7 +3,7 @@
<div class="paginationWrapper"> <div class="paginationWrapper">
<button type="button" class="pageItem"> <button type="button" class="pageItem">
<img <img
src="data:image/svg+xml,%3csvg width='8' height='14' viewBox='0 0 8 14' fill='white' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33337 13.4001L0.933375 7.0001L7.33337 0.600098' /%3e %3c/svg%3e" src="data:image/svg+xml,%3csvg width='36' height='36' viewBox='0 0 8 14' fill='%2346E0F4' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33337 13.4001L0.933375 7.0001L7.33337 0.600098' /%3e %3c/svg%3e"
/> />
</button> </button>
<div class="center"> <div class="center">
@ -16,7 +16,7 @@
</div> </div>
<button type="button" class="pageItem"> <button type="button" class="pageItem">
<img <img
src="data:image/svg+xml,%3csvg width='8' height='14' viewBox='0 0 8 14' fill='white' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33337 13.4001L0.933375 7.0001L7.33337 0.600098' /%3e %3c/svg%3e" src="data:image/svg+xml,%3csvg width='36' height='36' viewBox='0 0 8 14' fill='%2346E0F4' xmlns='http://www.w3.org/2000/svg'%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33337 13.4001L0.933375 7.0001L7.33337 0.600098' /%3e %3c/svg%3e"
class="icNext" class="icNext"
/> />
</button> </button>
@ -71,7 +71,7 @@ export default class extends Vue {}
/* Chrome, Safari, Edge, Opera */ /* Chrome, Safari, Edge, Opera */
/* Firefox */ /* Firefox */
color: #ffffff; color: #ffffff;
border: 1px solid #44197a; border: 1px solid #46E0F4;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
display: -webkit-box; display: -webkit-box;
@ -134,7 +134,7 @@ export default class extends Vue {}
height: 32px; height: 32px;
min-width: 32px; min-width: 32px;
border-radius: 5px; border-radius: 5px;
background-color: #3b2885; background-color: unset;
font-weight: bolder; font-weight: bolder;
font-size: 14px; font-size: 14px;
line-height: 22px; line-height: 22px;
@ -142,7 +142,6 @@ export default class extends Vue {}
} }
.pageItem:hover { .pageItem:hover {
background-color: #44197a;
} }
.pageItem:focus { .pageItem:focus {
@ -150,7 +149,7 @@ export default class extends Vue {}
} }
.active { .active {
background-color: #a346ec; background-color: #46E0F4;
} }
.icNext { .icNext {

6
src/components/market/SearchPanel.vue
View File

@ -29,7 +29,7 @@
import { Component, Prop, Vue } from 'vue-property-decorator' import { Component, Prop, Vue } from 'vue-property-decorator'
import FilterItem from '@/components/market/filters/FilterItem.vue' import FilterItem from '@/components/market/filters/FilterItem.vue'
import SelectSection from '@/components/market/filters/SelectSection.vue' import SelectSection from '@/components/market/filters/SelectSection.vue'
import RangeSlider, { ISliderCfg } from '@/components/market/RangeSlider.vue' import RangeSlider, { ISliderCfg } from '@/components/market/filters/RangeSlider.vue'
import CheckList, { ICheckData } from '@/components/market/filters/CheckList.vue' import CheckList, { ICheckData } from '@/components/market/filters/CheckList.vue'
import SliderSection from '@/components/market/filters/SliderSection.vue' import SliderSection from '@/components/market/filters/SliderSection.vue'
import RangeInput from '@/components/market/filters/RangeSection.vue' import RangeInput from '@/components/market/filters/RangeSection.vue'
@ -312,7 +312,7 @@ export default class extends Vue {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
padding: 0.75em 0; padding: 0.75em 0;
border-bottom: 1px solid #5b3dcb; border-bottom: 1px solid #51529D;
width: 100%; width: 100%;
.label{ .label{
display: flex; display: flex;
@ -327,7 +327,7 @@ export default class extends Vue {
outline: none; outline: none;
font-weight: bold; font-weight: bold;
font-size: 0.875em; font-size: 0.875em;
color: #a346ec; color: #46E0F4;
cursor: pointer; cursor: pointer;
} }
} }

17
src/components/market/SortSelect.vue
View File

@ -5,8 +5,9 @@
<img <img
draggable="false" draggable="false"
:class="{'iconUp': dropShow}" :class="{'iconUp': dropShow}"
src="data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3crect width='24' height='24' rx='5' fill='%23A346EC' /%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.8001 9.59985L12.0001 14.3999L7.20013 9.59985' fill='white' /%3e %3c/svg%3e" src='@/assets/market/arrow-down.png'
@click = "dropShow=!dropShow" @click = "dropShow=!dropShow"
alt="arrow down"
/> />
</div> </div>
<div class="dropdown" :class="{'hide': !dropShow}" > <div class="dropdown" :class="{'hide': !dropShow}" >
@ -56,8 +57,12 @@ export default class extends Vue {
box-sizing: border-box; box-sizing: border-box;
width: 14.5em; width: 14.5em;
padding: 1em 1.5em; padding: 1em 1.5em;
background-color: #261858; background-color: #36275B;
border-radius: 0.375em; border-radius: 0.375em;
img{
width: 18px;
height: 18px;
}
} }
.sort-select .iconUp { .sort-select .iconUp {
@ -109,9 +114,8 @@ export default class extends Vue {
opacity: 1; opacity: 1;
overflow: hidden; overflow: hidden;
max-height: 37.5em; max-height: 37.5em;
background-color: #261858; background-color: #36275B;
border-radius: 0.25em; border-radius: 0.25em;
padding: 0.75em 0;
width: 14.5em; width: 14.5em;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
@ -125,10 +129,13 @@ export default class extends Vue {
font-weight: lighter; font-weight: lighter;
font-size: 1.125em; font-size: 1.125em;
color: white; color: white;
&:not(:last-child) {
border-bottom: 1px solid #5D58B2;
}
} }
.dropdown .item:hover { .dropdown .item:hover {
color: #a346ec; color: #46E0F4;
} }
.dropdown.hide { .dropdown.hide {

4
src/components/market/filters/CheckList.vue
View File

@ -69,7 +69,7 @@ export default class CheckList extends Vue {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1em 0; padding: 1em 0;
border-bottom: 1px solid #5b3dcb; border-bottom: 1px solid #51529D;
.header{ .header{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -79,7 +79,7 @@ export default class CheckList extends Vue {
flex: 1; flex: 1;
font-weight: bold; font-weight: bold;
font-size: 0.875em; font-size: 0.875em;
color: rgba(188, 173, 242, 1); color: #928EAE;
} }
.arrow { .arrow {
display: flex; display: flex;

4
src/components/market/filters/FilterItem.vue
View File

@ -51,8 +51,8 @@ export default class FilterItem extends Vue {
display: flex; display: flex;
width: 1.5em; width: 1.5em;
height: 1.5em; height: 1.5em;
background-color: #5b39bc; background-color: #46E0F4;
border: 0.0625em solid #5b39bc; border: 0.0625em solid #46E0F4;
border-radius: 0.25em; border-radius: 0.25em;
justify-content: center; justify-content: center;
align-items: center; align-items: center;

6
src/components/market/filters/RangeSection.vue
View File

@ -39,7 +39,7 @@ export default class RangeInput extends Vue {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1em 0; padding: 1em 0;
border-bottom: 1px solid #5b3dcb; border-bottom: 1px solid #51529D;
&.no-bottom-line { &.no-bottom-line {
border-bottom: none!important; border-bottom: none!important;
} }
@ -52,7 +52,7 @@ export default class RangeInput extends Vue {
flex: 1; flex: 1;
font-weight: bold; font-weight: bold;
font-size: 0.875em; font-size: 0.875em;
color: rgba(188, 173, 242, 1); color: #928EAE;
} }
.arrow{ .arrow{
display: flex; display: flex;
@ -88,7 +88,7 @@ export default class RangeInput extends Vue {
} }
.input { .input {
padding: 0.5em; padding: 0.5em;
border: 0.0625em solid #5b39bc; border: 0.0625em solid #51529D;
box-sizing: border-box; box-sizing: border-box;
border-radius: 0.25em; border-radius: 0.25em;
font-size: inherit; font-size: inherit;

8
src/components/market/RangeSlider.vue → src/components/market/filters/RangeSlider.vue
View File

@ -50,16 +50,16 @@ export default class RangeSlider extends Vue {
height: 62px; height: 62px;
margin-top: -20px; margin-top: -20px;
.el-slider__runway{ .el-slider__runway{
background-color: #382873; background-color: #161C48;
.el-slider__bar{ .el-slider__bar{
background-color: #5b39bc; background-color: #46E0F4;
} }
.el-slider__stop{ .el-slider__stop{
background-color: #5b39bc; background-color: #46E0F4;
} }
.el-slider__button-wrapper{ .el-slider__button-wrapper{
.el-slider__button{ .el-slider__button{
background-color: #5b39bc; background-color: #46E0F4;
border: none; border: none;
} }
} }

6
src/components/market/filters/SliderSection.vue
View File

@ -23,7 +23,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator' import { Component, Prop, Vue } from 'vue-property-decorator'
import RangeSlider, { ISliderCfg } from '@/components/market/RangeSlider.vue' import RangeSlider, { ISliderCfg } from '@/components/market/filters/RangeSlider.vue'
@Component({ @Component({
name: 'SliderSection', name: 'SliderSection',
@ -44,7 +44,7 @@ export default class SliderSection extends Vue {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 1em 0; padding: 1em 0;
border-bottom: 1px solid #5b3dcb; border-bottom: 1px solid #51529D;
&.no-bottom-line { &.no-bottom-line {
border-bottom: none!important; border-bottom: none!important;
} }
@ -57,7 +57,7 @@ export default class SliderSection extends Vue {
flex: 1; flex: 1;
font-weight: bold; font-weight: bold;
font-size: 0.875em; font-size: 0.875em;
color: rgba(188, 173, 242, 1); color: #928EAE;
} }
.arrow{ .arrow{
display: flex; display: flex;