|
1
|
<template>
|
1
|
<template>
|
|
2
|
- <div class="header-wrap" :class="class">
|
|
|
|
3
|
- <div class="header">
|
|
|
|
4
|
- <div class="header-left">
|
2
|
+ <div class="blk-header-wrap" :class="class">
|
|
|
|
3
|
+ <div class="blk-header">
|
|
|
|
4
|
+ <div class="blk-header-left">
|
|
5
|
<slot name="left">
|
5
|
<slot name="left">
|
|
6
|
<i class="icon icon-left" @click="goBack"></i>
|
6
|
<i class="icon icon-left" @click="goBack"></i>
|
|
7
|
</slot>
|
7
|
</slot>
|
|
8
|
</div>
|
8
|
</div>
|
|
9
|
- <div class="header-right">
|
9
|
+ <div class="blk-header-right">
|
|
10
|
<slot name="right"></slot>
|
10
|
<slot name="right"></slot>
|
|
11
|
</div>
|
11
|
</div>
|
|
12
|
- <div class="header-main">
|
|
|
|
13
|
- <span class="header-title">{{title}}</span>
|
12
|
+ <div class="blk-header-main">
|
|
|
|
13
|
+ <span class="blk-header-title">{{title}}</span>
|
|
14
|
</div>
|
14
|
</div>
|
|
15
|
</div>
|
15
|
</div>
|
|
16
|
- <div class="header-gap"></div>
|
16
|
+ <div class="blk-header-gap"></div>
|
|
17
|
</div>
|
17
|
</div>
|
|
18
|
</template>
|
18
|
</template>
|
|
19
|
<script>
|
19
|
<script>
|
|
@@ -29,7 +29,7 @@ |
|
@@ -29,7 +29,7 @@ |
|
29
|
};
|
29
|
};
|
|
30
|
</script>
|
30
|
</script>
|
|
31
|
<style>
|
31
|
<style>
|
|
32
|
- .header {
|
32
|
+ .blk-header {
|
|
33
|
box-sizing: content-box;
|
33
|
box-sizing: content-box;
|
|
34
|
position: fixed;
|
34
|
position: fixed;
|
|
35
|
top: 0;
|
35
|
top: 0;
|
|
@@ -47,12 +47,12 @@ |
|
@@ -47,12 +47,12 @@ |
|
47
|
color: #000;
|
47
|
color: #000;
|
|
48
|
|
48
|
|
|
49
|
.icon,
|
49
|
.icon,
|
|
50
|
- .header-title {
|
50
|
+ .blk-header-title {
|
|
51
|
vertical-align: middle;
|
51
|
vertical-align: middle;
|
|
52
|
}
|
52
|
}
|
|
53
|
}
|
53
|
}
|
|
54
|
|
54
|
|
|
55
|
- .header-main {
|
55
|
+ .blk-header-main {
|
|
56
|
display: block;
|
56
|
display: block;
|
|
57
|
text-align: center;
|
57
|
text-align: center;
|
|
58
|
margin-left: auto;
|
58
|
margin-left: auto;
|
|
@@ -62,11 +62,11 @@ |
|
@@ -62,11 +62,11 @@ |
|
62
|
text-overflow: ellipsis;
|
62
|
text-overflow: ellipsis;
|
|
63
|
}
|
63
|
}
|
|
64
|
|
64
|
|
|
65
|
- .header-left {
|
65
|
+ .blk-header-left {
|
|
66
|
float: left;
|
66
|
float: left;
|
|
67
|
}
|
67
|
}
|
|
68
|
|
68
|
|
|
69
|
- .header-right {
|
69
|
+ .blk-header-right {
|
|
70
|
float: right;
|
70
|
float: right;
|
|
71
|
|
71
|
|
|
72
|
.icon {
|
72
|
.icon {
|
|
@@ -74,17 +74,17 @@ |
|
@@ -74,17 +74,17 @@ |
|
74
|
}
|
74
|
}
|
|
75
|
}
|
75
|
}
|
|
76
|
|
76
|
|
|
77
|
- .header-gap {
|
77
|
+ .blk-header-gap {
|
|
78
|
height: 100px;
|
78
|
height: 100px;
|
|
79
|
background-color: transparent;
|
79
|
background-color: transparent;
|
|
80
|
}
|
80
|
}
|
|
81
|
|
81
|
|
|
82
|
.app.ios {
|
82
|
.app.ios {
|
|
83
|
- .header {
|
83
|
+ .blk-header {
|
|
84
|
padding-top: 60px;
|
84
|
padding-top: 60px;
|
|
85
|
}
|
85
|
}
|
|
86
|
|
86
|
|
|
87
|
- .header-gap {
|
87
|
+ .blk-header-gap {
|
|
88
|
height: calc(70 + 60 + 10)px;
|
88
|
height: calc(70 + 60 + 10)px;
|
|
89
|
}
|
89
|
}
|
|
90
|
}
|
90
|
}
|
