w-front-end / select_good · Commits

Commit 577d2f0e7fab730628be16e1d83b438d4813e4a8

Authored by 王强
1 parent 14ccdf6b

处理“折扣专区”App内头部遮盖问题~

Inline Side-by-side
Showing 2 changed files with 63 additions and 59 deletions
src/pages/discountList/discountList.less
  View file @577d2f0
... ... @@ -3,57 +3,57 @@
3 3 .discount-list-page {
4 4 background-color: #ffffff;
5 5 min-height: 100vh;
6   - .call-app-box {
7   - position: fixed;
8   - top: 0;
9   - z-index: 100;
10   - }
11   - .back-box {
  6 + .nav-box {
12 7 position: fixed;
13 8 top: 0;
14 9 z-index: 100;
15 10 background-color: #ffffff;
16   - }
17   - .tabs-box {
18   - position: fixed;
19   - top: 0;
20   - z-index: 100;
21   - background-color: #FFFFFF;
22 11 width: 100%;
23 12 height: auto;
24   - border: 1px solid #E5E5E5;
25   - &.is-open-app {
26   - top: 122px;
27   - }
28   - &.is-cnlive {
29   - top: 93px;
  13 + .call-app-box {
  14 + width: 100%;
30 15 }
31   - &.is-hide {
32   - top: 0;
  16 + .back-box {
  17 + background-color: #ffffff;
  18 + width: 100%;
33 19 }
34   - > .box {
35   - display: flex;
36   - justify-content: flex-start;
37   - align-items: center;
38   - margin: 0 auto;
39   - width: 90%;
40   - .tab {
41   - margin-right: 50px;
42   - padding: 23px 0 12px 0;
43   - color: #B4B4B4;
44   - &:last-child {
45   - margin-right: 0;
46   - }
47   - .title {
48   - font-size: 32px;
49   - font-weight: 400;
50   - }
51   - .line {
52   - background-color: transparent;
53   - margin: 6px auto 0 auto;
54   - width: 50px;
55   - height: 4px;
56   - border-radius: 3px;
  20 + .tabs-box {
  21 + background-color: #ffffff;
  22 + width: 100%;
  23 + border: 1px solid #E5E5E5;
  24 + &.is-open-app {
  25 + top: 122px;
  26 + }
  27 + &.is-cnlive {
  28 + top: 93px;
  29 + }
  30 + &.is-hide {
  31 + top: 0;
  32 + }
  33 + > .box {
  34 + display: flex;
  35 + justify-content: flex-start;
  36 + align-items: center;
  37 + margin: 0 auto;
  38 + width: 90%;
  39 + .tab {
  40 + margin-right: 50px;
  41 + padding: 23px 0 12px 0;
  42 + color: #B4B4B4;
  43 + &:last-child {
  44 + margin-right: 0;
  45 + }
  46 + .title {
  47 + font-size: 32px;
  48 + font-weight: 400;
  49 + }
  50 + .line {
  51 + background-color: transparent;
  52 + margin: 6px auto 0 auto;
  53 + width: 50px;
  54 + height: 4px;
  55 + border-radius: 3px;
  56 + }
57 57 }
58 58 }
59 59 }
... ...
src/pages/discountList/discountList.vue
  View file @577d2f0
1 1 <template>
2 2 <div class="discount-list-page" :style="{'backgroundColor': tabs.list[tabs.active].color}">
3 3  
4   - <!-- H5唤起App组件 -->
5   - <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value && $parent.isOpenApp.value"
6   - :callApps="$parent.callApps">
7   - </call-app-box>
8   -
9   - <!-- 后退导航 -->
10   - <back-box class="back-box" :class="{'hide': $route.query.hideBack == true}" :style="'padding-top: ' + $parent.top.value + 'px'" v-if="isCNLive.value" @back="back"
11   - :backs="backs">
12   - </back-box>
13   -
14   - <!-- tab导航 -->
15   - <div class="tabs-box" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'is-hide': $route.query.hideBack == true}" :style="'padding-top: ' + $parent.top.value + 'px'">
16   - <div class="box">
17   - <div class="tab" :style="{'color': (index == tabs.active) ? tab.titleColor : ''}" v-for="(tab, index) in tabs.list" :key="index" @click="request(index)">
18   - <div class="title">{{tab.title}}</div>
19   - <div class="line" :style="{'backgroundColor': (index == tabs.active) ? tab.titleColor : ''}"></div>
  4 + <!-- 导航区域 -->
  5 + <div class="nav-box" :style="'padding-top: ' + $parent.top.value + 'px'">
  6 +
  7 + <!-- H5唤起App组件 -->
  8 + <call-app-box class="call-app-box" ref="callApp" v-if="!isCNLive.value && $parent.isOpenApp.value"
  9 + :callApps="$parent.callApps">
  10 + </call-app-box>
  11 +
  12 + <!-- 后退导航 -->
  13 + <back-box class="back-box" :class="{'hide': $route.query.hideBack == true}" v-if="isCNLive.value" @back="back"
  14 + :backs="backs">
  15 + </back-box>
  16 +
  17 + <!-- tab导航 -->
  18 + <div class="tabs-box" :class="{'is-cnlive': isCNLive.value, 'is-open-app': $parent.isOpenApp.value, 'is-hide': $route.query.hideBack == true}">
  19 + <div class="box">
  20 + <div class="tab" :style="{'color': (index == tabs.active) ? tab.titleColor : ''}" v-for="(tab, index) in tabs.list" :key="index" @click="request(index)">
  21 + <div class="title">{{tab.title}}</div>
  22 + <div class="line" :style="{'backgroundColor': (index == tabs.active) ? tab.titleColor : ''}"></div>
  23 + </div>
20 24 </div>
21 25 </div>
22 26 </div>
... ...