| | |
|---|
| | | <template> |
|---|
| | | <view class="custombar" :style="{height:statusbarHeight + navHeight +'px'}"> |
|---|
| | | <view class="status_bar" :style="{height:statusbarHeight+'px'}"></view> |
|---|
| | | <view class="nav_bar" :style="{height:navHeight +'px'}"> |
|---|
| | | <view class="title"> |
|---|
| | | <text>{{Title}}</text> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </view> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <template>
|
|---|
| | | <view
|
|---|
| | | class="custombar"
|
|---|
| | | :style="{ height: statusbarHeight + navHeight + 'px' }"
|
|---|
| | | >
|
|---|
| | | <view class="status_bar" :style="{ height: statusbarHeight + 'px' }"></view>
|
|---|
| | | <view class="nav_bar" :style="{ height: navHeight + 'px' }">
|
|---|
| | | <view class="title">
|
|---|
| | | <text>{{ Title }}</text>
|
|---|
| | | </view>
|
|---|
| | | </view>
|
|---|
| | | </view>
|
|---|
| | | </template>
|
|---|
| | | |
|---|
| | | <script>
|
|---|
| | | import { mapState } from 'vuex'
|
|---|
| | | |
|---|
| | | export default { |
|---|
| | | props: {
|
|---|
| | | Title: {
|
|---|
| | | type: String,
|
|---|
| | | default: ''
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | computed: {
|
|---|
| | | ...mapState(['statusbarHeight', 'navHeight'])
|
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | | <style lang="less" scoped> |
|---|
| | | .custombar{
|
|---|
| | | position: sticky;
|
|---|
| | | top: 0rpx;
|
|---|
| | | left: 0;
|
|---|
| | | width: 100%;
|
|---|
| | | z-index: 999;
|
|---|
| | | height: 45px;
|
|---|
| | | background-color: #ffffff; |
|---|
| | | .nav_bar{
|
|---|
| | | position: relative;
|
|---|
| | | z-index: 999; |
|---|
| | | .return{
|
|---|
| | | position: absolute;
|
|---|
| | | transform: translateY(-50%);
|
|---|
| | | width: 40rpx;
|
|---|
| | | height: 40rpx;
|
|---|
| | | top: 50%;
|
|---|
| | | left: 30rpx;
|
|---|
| | | z-index: 99;
|
|---|
| | | } |
|---|
| | | .title{
|
|---|
| | | position: relative;
|
|---|
| | | transform: translate(-50%, -50%);
|
|---|
| | | left: 50%;
|
|---|
| | | top: 50%;
|
|---|
| | | font-size: 0;
|
|---|
| | | padding-left: 30rpx;
|
|---|
| | | box-sizing: border-box; |
|---|
| | | text{
|
|---|
| | | font-size: 36rpx;
|
|---|
| | | font-family: PingFangSC-Medium, PingFang SC;
|
|---|
| | | font-weight: 500;
|
|---|
| | | color: #111111;
|
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | } |
|---|
| | | import { mapState } from 'vuex'
|
|---|
| | |
|
|---|
| | | export default {
|
|---|
| | | props: {
|
|---|
| | | Title: {
|
|---|
| | | type: String,
|
|---|
| | | default: ''
|
|---|
| | | }
|
|---|
| | | },
|
|---|
| | | computed: {
|
|---|
| | | ...mapState(['statusbarHeight', 'navHeight'])
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | </script>
|
|---|
| | | |
|---|
| | | <style lang="less" scoped>
|
|---|
| | | .custombar {
|
|---|
| | | position: sticky;
|
|---|
| | | top: 0rpx;
|
|---|
| | | left: 0;
|
|---|
| | | width: 100%;
|
|---|
| | | z-index: 999;
|
|---|
| | | height: 45px;
|
|---|
| | | background-color: #ffffff;
|
|---|
| | | .nav_bar {
|
|---|
| | | position: relative;
|
|---|
| | | z-index: 999;
|
|---|
| | | .return {
|
|---|
| | | position: absolute;
|
|---|
| | | transform: translateY(-50%);
|
|---|
| | | width: 40rpx;
|
|---|
| | | height: 40rpx;
|
|---|
| | | top: 50%;
|
|---|
| | | left: 30rpx;
|
|---|
| | | z-index: 99;
|
|---|
| | | }
|
|---|
| | | .title {
|
|---|
| | | position: relative;
|
|---|
| | | transform: translate(-50%, -50%);
|
|---|
| | | left: 50%;
|
|---|
| | | top: 50%;
|
|---|
| | | font-size: 0;
|
|---|
| | | padding-left: 30rpx;
|
|---|
| | | box-sizing: border-box;
|
|---|
| | | text {
|
|---|
| | | font-size: 36rpx;
|
|---|
| | | font-family: PingFangSC-Medium, PingFang SC;
|
|---|
| | | font-weight: 600;
|
|---|
| | | color: #111111;
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | }
|
|---|
| | | </style> |
|---|
