fe / yohoblk-wap · Commits

Go to a project

Authored by 陈轩
Commit 83505e317838a3f99665fb2b072f7cbbd9224c35 1 parent 28fcfa3a

fix header

Inline Side-by-side
Showing 4 changed files with 39 additions and 77 deletions
<template>
<div class="blk-header-wrap" :class="class">
<div class="blk-header-wrap" :class="[class, {'is-fixed': fixed}]">
<div class="blk-header">
<div class="blk-header-left">
<slot name="left">
... ... @@ -13,14 +13,19 @@
<span class="blk-header-title">{{title}}</span>
</div>
</div>
<div class="blk-header-gap"></div>
<div class="blk-header-gap" v-if="!fixed"></div>
</div>
</template>
<script>
const yoho = require('yoho');
module.exports = {
props: ['title', 'class'],
props: {
'title': String,
'class': [String, Object, Array],
'fixed': Boolean,
'scrollFix': Boolean
},
methods: {
goBack() {
yoho.goBack({}, function() {}, function() {});
... ... @@ -35,6 +40,10 @@
transition: 0.3s all;
border-bottom: 0;
}
.blk-header-title {
visibility: hidden;
}
}
.blk-header {
box-sizing: content-box;
... ...
... ... @@ -123,7 +123,8 @@
const self = this;
yoho.goAddress({
type: '1'
type: '1',
addressid: this.address.addressId
}, (address) => {
if (address) {
self.$set('address', {
... ... @@ -132,7 +133,7 @@
zipCode: address.zip_code,
mobile: address.mobile,
address: address.address,
consigneeName: address.consignee_name
consignee: address.consignee
});
}
}, () => {
... ...
<template>
<div id="header" class="blk-header-wrap top-box">
<div class="blk-header">
<div class="blk-header-left">
<span class="icon icon-setting" id="setting"></span>
</div>
</div>
</div>
<cheader title="我的" class="ghost" fixed v-ref:header>
<i slot="left" class="icon icon-setting" id="setting"></i>
</cheader>
<div class="my-header">
<a class="user-info auth" id="user-info" href='/me/mydetails'>
<span class="user-avatar" :style="data.headIco ? 'background-image: url(' + data.headIco + ')' : ''"></span>
... ... @@ -80,6 +76,7 @@
const yoho = require('yoho');
const $ = require('jquery');
const interceptClick = require('common/intercept-click');
const cheader = require('component/header.vue');
module.exports = {
data() {
... ... @@ -87,6 +84,9 @@
data: {}
};
},
components: {
cheader
},
methods: {
reload() {
$('#address').off('click', this.addressClick)
... ... @@ -154,6 +154,16 @@
}
});
window.addEventListener('scroll', () => {
let transparent = true;
if (window.scrollY > 20 ) {
transparent = false;
}
this.$refs.header.$el.classList.toggle('ghost', transparent);
});
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
this.reload();
... ... @@ -172,29 +182,6 @@
color: #000;
}
.blk-header {
box-sizing: content-box;
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 210;
padding: 20px 30px;
height: 70px;
max-width: 750px;
margin-left: auto;
margin-right: auto;
line-height: 70px;
font-size: 48px;
background-color: #fff;
border-bottom: 1px solid #eee;
color: #000;
.icon {
vertical-align: middle;
}
}
.top-box {
.blk-header {
background-color: transparent;
... ... @@ -208,15 +195,6 @@
}
}
.blk-header-left {
float: left;
}
.blk-header-gap {
height: calc(70 + 20 * 2 + 1)px;
background-color: transparent;
}
.my-header {
height: 469px;
background: resolve("me/header-bg.png");
... ...
<template>
<cheader :title="title" :class='topClass'>
<cheader :title="title" class="ghost" fixed v-ref:header>
<template slot="right">
<span v-if="shareData.isBlkShop" v-show="shareData.isFav" class="icon" @click="collectShop()">&#xe60d;</span>
<span v-if="shareData.isBlkShop" v-show="!shareData.isFav" class="icon" @click="collectShop()">&#xe60c;</span>
... ... @@ -10,28 +10,9 @@
</template>
<style>
.blk-header-gap {
display: none;
}
.blk-header {
transition: 0.3s all;
}
.top-box {
.blk-header {
background-color: transparent;
color: #fff;
border-bottom: 0;
}
}
.top-change {
.blk-header {
background-color: #fff;
color: #000;
}
}
</style>
<script>
... ... @@ -41,9 +22,7 @@
module.exports = {
data() {
return {
topChange: false
};
return {};
},
props: {
shareData: {
... ... @@ -51,12 +30,6 @@
}
},
computed: {
topClass() {
return {
'top-change': this.topChange || !this.shareData.isBlkShop,
'top-box': true
};
},
title() {
let result = '';
... ... @@ -106,13 +79,14 @@
this.$parent.$refs.filter.isVisible = !this.$parent.$refs.filter.isVisible;
},
changeTopStatus() {
let topChange = true;
let topHeight = document.body.scrollTop;
if (topHeight > 100) {
this.topChange = true;
} else {
this.topChange = false;
}
topChange = false;
}
this.$refs.header.$el.classList.toggle('ghost', topChange);
}
},
created() {
... ...