1
|
<template>
|
1
|
<template>
|
2
|
- <div class="top-box clearfix" v-bind:class='{"top-box-left" : this.$parent.$refs.filter.on}'>
|
2
|
+ <div class="top-box clearfix" v-bind:class='{"top-box-left" : this.$parent.$refs.filter.isVisible,"top-change" : topChange }' v-infinite-scroll="changeTopStatus()">
|
3
|
<span class="icon back" @click="goBack()"></span>
|
3
|
<span class="icon back" @click="goBack()"></span>
|
4
|
<div class="right">
|
4
|
<div class="right">
|
5
|
- <span v-if="shareData.isFav" class="icon" @click="collectShop()"></span>
|
|
|
6
|
- <span v-else class="icon" @click="collectShop()"></span>
|
|
|
7
|
- <span class="icon" @click="goShare()"></span>
|
5
|
+ <span v-if="shareData.isBlkShop" v-show="shareData.isFav" class="icon" @click="collectShop()"></span>
|
|
|
6
|
+ <span v-if="shareData.isBlkShop" v-show="!shareData.isFav" class="icon" @click="collectShop()"></span>
|
|
|
7
|
+ <span v-if="shareData.isBlkShop" class="icon" @click="goShare()"></span>
|
8
|
<span class="icon" @click="showFilter()"></span>
|
8
|
<span class="icon" @click="showFilter()"></span>
|
9
|
</div>
|
9
|
</div>
|
10
|
</div>
|
10
|
</div>
|
|
@@ -13,8 +13,8 @@ |
|
@@ -13,8 +13,8 @@ |
13
|
<style>
|
13
|
<style>
|
14
|
.top-box {
|
14
|
.top-box {
|
15
|
width: 100%;
|
15
|
width: 100%;
|
16
|
- height: 60px;
|
|
|
17
|
- padding: 0 20px;
|
16
|
+ height: 80px;
|
|
|
17
|
+ padding: 10px 20px;
|
18
|
position: fixed;
|
18
|
position: fixed;
|
19
|
top: 60px;
|
19
|
top: 60px;
|
20
|
left: 0;
|
20
|
left: 0;
|
|
@@ -45,6 +45,14 @@ |
|
@@ -45,6 +45,14 @@ |
45
|
.top-box-left {
|
45
|
.top-box-left {
|
46
|
left: -655px;
|
46
|
left: -655px;
|
47
|
}
|
47
|
}
|
|
|
48
|
+
|
|
|
49
|
+ .top-change {
|
|
|
50
|
+ background-color: #fff;
|
|
|
51
|
+ color: #000;
|
|
|
52
|
+ height: 140px;
|
|
|
53
|
+ top: 0;
|
|
|
54
|
+ padding: 70px 20px 10px;
|
|
|
55
|
+ }
|
48
|
</style>
|
56
|
</style>
|
49
|
|
57
|
|
50
|
<script>
|
58
|
<script>
|
|
@@ -53,6 +61,11 @@ |
|
@@ -53,6 +61,11 @@ |
53
|
const tip = require('common/tip');
|
61
|
const tip = require('common/tip');
|
54
|
|
62
|
|
55
|
module.exports = {
|
63
|
module.exports = {
|
|
|
64
|
+ data() {
|
|
|
65
|
+ return {
|
|
|
66
|
+ topChange: false
|
|
|
67
|
+ };
|
|
|
68
|
+ },
|
56
|
props: {
|
69
|
props: {
|
57
|
shareData: {
|
70
|
shareData: {
|
58
|
type: Object
|
71
|
type: Object
|
|
@@ -91,6 +104,15 @@ |
|
@@ -91,6 +104,15 @@ |
91
|
},
|
104
|
},
|
92
|
showFilter() {
|
105
|
showFilter() {
|
93
|
this.$parent.$refs.filter.isVisible = !this.$parent.$refs.filter.isVisible;
|
106
|
this.$parent.$refs.filter.isVisible = !this.$parent.$refs.filter.isVisible;
|
|
|
107
|
+ },
|
|
|
108
|
+ changeTopStatus() {
|
|
|
109
|
+ let topHeight = document.body.scrollTop;
|
|
|
110
|
+
|
|
|
111
|
+ if (topHeight > 100) {
|
|
|
112
|
+ this.topChange = true;
|
|
|
113
|
+ } else {
|
|
|
114
|
+ this.topChange = false;
|
|
|
115
|
+ }
|
94
|
}
|
116
|
}
|
95
|
}
|
117
|
}
|
96
|
};
|
118
|
};
|