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">
<button type="button" class="pageItem">
<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>
<div class="center">
@ -16,7 +16,7 @@
</div>
<button type="button" class="pageItem">
<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"
/>
</button>
@ -71,7 +71,7 @@ export default class extends Vue {}
/* Chrome, Safari, Edge, Opera */
/* Firefox */
color: #ffffff;
border: 1px solid #44197a;
border: 1px solid #46E0F4;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -webkit-box;
@ -134,7 +134,7 @@ export default class extends Vue {}
height: 32px;
min-width: 32px;
border-radius: 5px;
background-color: #3b2885;
background-color: unset;
font-weight: bolder;
font-size: 14px;
line-height: 22px;
@ -142,7 +142,6 @@ export default class extends Vue {}
}
.pageItem:hover {
background-color: #44197a;
}
.pageItem:focus {
@ -150,7 +149,7 @@ export default class extends Vue {}
}
.active {
background-color: #a346ec;
background-color: #46E0F4;
}
.icNext {

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

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

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

@ -5,8 +5,9 @@
<img
draggable="false"
: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"
alt="arrow down"
/>
</div>
<div class="dropdown" :class="{'hide': !dropShow}" >
@ -56,8 +57,12 @@ export default class extends Vue {
box-sizing: border-box;
width: 14.5em;
padding: 1em 1.5em;
background-color: #261858;
background-color: #36275B;
border-radius: 0.375em;
img{
width: 18px;
height: 18px;
}
}
.sort-select .iconUp {
@ -109,9 +114,8 @@ export default class extends Vue {
opacity: 1;
overflow: hidden;
max-height: 37.5em;
background-color: #261858;
background-color: #36275B;
border-radius: 0.25em;
padding: 0.75em 0;
width: 14.5em;
-webkit-box-sizing: border-box;
box-sizing: border-box;
@ -125,10 +129,13 @@ export default class extends Vue {
font-weight: lighter;
font-size: 1.125em;
color: white;
&:not(:last-child) {
border-bottom: 1px solid #5D58B2;
}
}
.dropdown .item:hover {
color: #a346ec;
color: #46E0F4;
}
.dropdown.hide {

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

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

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

@ -51,8 +51,8 @@ export default class FilterItem extends Vue {
display: flex;
width: 1.5em;
height: 1.5em;
background-color: #5b39bc;
border: 0.0625em solid #5b39bc;
background-color: #46E0F4;
border: 0.0625em solid #46E0F4;
border-radius: 0.25em;
justify-content: 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;
flex-direction: column;
padding: 1em 0;
border-bottom: 1px solid #5b3dcb;
border-bottom: 1px solid #51529D;
&.no-bottom-line {
border-bottom: none!important;
}
@ -52,7 +52,7 @@ export default class RangeInput extends Vue {
flex: 1;
font-weight: bold;
font-size: 0.875em;
color: rgba(188, 173, 242, 1);
color: #928EAE;
}
.arrow{
display: flex;
@ -88,7 +88,7 @@ export default class RangeInput extends Vue {
}
.input {
padding: 0.5em;
border: 0.0625em solid #5b39bc;
border: 0.0625em solid #51529D;
box-sizing: border-box;
border-radius: 0.25em;
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;
margin-top: -20px;
.el-slider__runway{
background-color: #382873;
background-color: #161C48;
.el-slider__bar{
background-color: #5b39bc;
background-color: #46E0F4;
}
.el-slider__stop{
background-color: #5b39bc;
background-color: #46E0F4;
}
.el-slider__button-wrapper{
.el-slider__button{
background-color: #5b39bc;
background-color: #46E0F4;
border: none;
}
}

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

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