You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
1.5 KiB
90 lines
1.5 KiB
<template> |
|
<view class="pageTitle-box" :class="isFixed ? 'showPageTitle' : ''" |
|
:style="{'padding-top':navTopHeight + 'px',height:navHeight*2+ 'px'}"> |
|
<view class="top-logo acea-row row-center" |
|
:style="'top:' + menuTop + 'px;height:' + menuHeight + 'px;line-height: ' + menuHeight + 'px;'"> |
|
{{title}} |
|
</view> |
|
</view> |
|
</template> |
|
|
|
<script> |
|
const app = getApp(); |
|
export default { |
|
props: { |
|
isFixed: { |
|
type: Boolean, |
|
default: false |
|
}, |
|
title: { |
|
type: String , |
|
default: '' |
|
} |
|
}, |
|
data() { |
|
return { |
|
menuHeight: app.globalData.menuHeight, |
|
navHeight: app.globalData.navHeight, |
|
menuTop: app.globalData.menuTop, |
|
navTopHeight: app.globalData.navTopHeight, |
|
}; |
|
}, |
|
methods:{ |
|
|
|
} |
|
} |
|
</script> |
|
|
|
<style lang="less"> |
|
|
|
.pageTitle-box { |
|
width: 100%; |
|
position: fixed; |
|
top: 0; |
|
z-index: 99; |
|
color: #fff; |
|
transition: all .5s; |
|
} |
|
|
|
.showPageTitle { |
|
background: #fff; |
|
color: #000000 !important; |
|
opacity: 1; |
|
font-weight: normal; |
|
.top-logo { |
|
color: #000; |
|
} |
|
} |
|
.page-top-box { |
|
width: 100%; |
|
position: fixed; |
|
top: 0; |
|
left: 0; |
|
z-index: 99; |
|
background: #fff; |
|
padding: 0 30rpx 20rpx; |
|
box-shadow: 0px -6px 20px rgba(0, 0, 0, 0.11); |
|
.top-box { |
|
.top-box-l { |
|
font-size: 32rpx; |
|
color: #000; |
|
font-weight: 500; |
|
|
|
image { |
|
width: 26rpx; |
|
height: 30rpx; |
|
display: block; |
|
margin-right: 10rpx; |
|
} |
|
} |
|
} |
|
} |
|
.top-logo { |
|
position: absolute; |
|
width: 100%; |
|
color: #fff; |
|
font-weight: 600; |
|
font-size: 32rpx; |
|
transition: all .5s cubic-bezier(.25, .5, .5, .9); |
|
} |
|
</style>
|
|
|