bemarket/src/views/desktop/Market.vue
2022-03-07 17:31:36 +08:00

134 lines
2.5 KiB
Vue

<template>
<div>
<top-menu class="desk-top" :current-tab="currentTab"></top-menu>
<section class="root">
<div class="container">
<search-panel @filter-show="showFilter" :class="{'show': mobileFilterShow}"></search-panel>
<search-result @filter-show="showFilter" :show-sort="true"></search-result>
</div>
</section>
<base-footer></base-footer>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import SearchPanel from '@/components/market/SearchPanel.vue'
import SearchResult from '@/components/market/SearchResult.vue'
import TopMenu from '@/components/market/TopMenu.vue'
import BaseFooter from '@/components/layout/BaseFooter.vue'
@Component({
components: {
BaseFooter,
SearchResult,
SearchPanel,
TopMenu
}
})
export default class Market extends Vue {
mobileFilterShow = false
currentTab = 'market'
showFilter(val: boolean) {
this.mobileFilterShow = val
}
}
</script>
<style lang="scss" scoped>
@import '../../scss/breakpoints.scss';
.root {
display: flex;
flex-direction: column;
align-items: center;
}
.container {
display: flex;
flex-direction: row;
width: 1440px;
max-width: 100%;
box-sizing: border-box;
}
.mobile-top {
display: none;
}
@include media('<desktop') {
.container {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.searchPanel {
width: 100%;
}
.filterTablet {
padding-top: 40px;
width: 100%;
-webkit-transition: all 0.3s;
transition: all 0.3s;
height: auto;
}
.filterTablet.collapsed {
padding-top: 0;
opacity: 0;
height: 0;
z-index: -1;
overflow: hidden;
}
.searchResult {
padding: 2.5em 4em;
}
.searchResult .wrapper .btnFilter {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
text-transform: uppercase;
}
}
@media (min-width: 1024px) and (max-width: 1439px) {
.root {
font-size: 11px;
}
.root .container {
width: 1024px;
max-width: 100%;
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.root {
font-size: 20px;
}
.container {
width: 768px;
}
}
@media (max-width: 767px) {
.root {
font-size: 11px;
}
}
@media (max-width: 767px) and (max-width: 320px) {
.root {
font-size: 9px;
}
}
@media (max-width: 767px) {
.container {
width: 375px;
}
.searchResult {
padding: 26px 20px;
}
.show{
display: flex!important;
}
}
</style>