|
|
<template>
|
|
|
<div class="header-wrap" :class="class">
|
|
|
<div class="header">
|
|
|
<div class="header-left">
|
|
|
<div class="blk-header-wrap" :class="class">
|
|
|
<div class="blk-header">
|
|
|
<div class="blk-header-left">
|
|
|
<slot name="left">
|
|
|
<i class="icon icon-left" @click="goBack"></i>
|
|
|
</slot>
|
|
|
</div>
|
|
|
<div class="header-right">
|
|
|
<div class="blk-header-right">
|
|
|
<slot name="right"></slot>
|
|
|
</div>
|
|
|
<div class="header-main">
|
|
|
<span class="header-title">{{title}}</span>
|
|
|
<div class="blk-header-main">
|
|
|
<span class="blk-header-title">{{title}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="header-gap"></div>
|
|
|
<div class="blk-header-gap"></div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
...
|
...
|
@@ -29,7 +29,7 @@ |
|
|
};
|
|
|
</script>
|
|
|
<style>
|
|
|
.header {
|
|
|
.blk-header {
|
|
|
box-sizing: content-box;
|
|
|
position: fixed;
|
|
|
top: 0;
|
...
|
...
|
@@ -47,12 +47,12 @@ |
|
|
color: #000;
|
|
|
|
|
|
.icon,
|
|
|
.header-title {
|
|
|
.blk-header-title {
|
|
|
vertical-align: middle;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
.header-main {
|
|
|
.blk-header-main {
|
|
|
display: block;
|
|
|
text-align: center;
|
|
|
margin-left: auto;
|
...
|
...
|
@@ -62,11 +62,11 @@ |
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
.header-left {
|
|
|
.blk-header-left {
|
|
|
float: left;
|
|
|
}
|
|
|
|
|
|
.header-right {
|
|
|
.blk-header-right {
|
|
|
float: right;
|
|
|
|
|
|
.icon {
|
...
|
...
|
@@ -74,17 +74,17 @@ |
|
|
}
|
|
|
}
|
|
|
|
|
|
.header-gap {
|
|
|
.blk-header-gap {
|
|
|
height: 100px;
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
|
|
|
.app.ios {
|
|
|
.header {
|
|
|
.blk-header {
|
|
|
padding-top: 60px;
|
|
|
}
|
|
|
|
|
|
.header-gap {
|
|
|
.blk-header-gap {
|
|
|
height: calc(70 + 60 + 10)px;
|
|
|
}
|
|
|
}
|
...
|
...
|
|