|
| xqd
@@ -1,355 +1,345 @@
|
|
|
<template>
|
|
|
- <view
|
|
|
- class="tn-custom-nav-bar-class tn-custom-nav-bar"
|
|
|
- :style="[navBarStyle]"
|
|
|
- >
|
|
|
- <view
|
|
|
- class="tn-custom-nav-bar__bar"
|
|
|
- :class="[barClass]"
|
|
|
- :style="[barStyle]"
|
|
|
- >
|
|
|
- <view v-if="isBack">
|
|
|
- <view v-if="customBack">
|
|
|
- <view
|
|
|
- :style="{
|
|
|
+ <view class="tn-custom-nav-bar-class tn-custom-nav-bar" :style="[navBarStyle]">
|
|
|
+ <view class="tn-custom-nav-bar__bar" :class="[barClass]" :style="[barStyle]">
|
|
|
+ <view v-if="isBack">
|
|
|
+ <view v-if="customBack">
|
|
|
+ <view :style="{
|
|
|
width: customBackStyleInfo.width + 'px',
|
|
|
height: customBackStyleInfo.height + 'px',
|
|
|
marginLeft: customBackStyleInfo.left + 'px'
|
|
|
- }"
|
|
|
- >
|
|
|
- <slot name="back"></slot>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-else class="tn-custom-nav-bar__bar__action" @tap="handlerBack">
|
|
|
- <text class="tn-custom-nav-bar__bar__action--nav-back" :class="[`tn-icon-${backIcon}`]"></text>
|
|
|
- <text class="tn-custom-nav-bar__bar__action--nav-back-text" v-if="backTitle">{{ backTitle }}</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="tn-custom-nav-bar__bar__content" :style="[contentStyle]">
|
|
|
- <slot></slot>
|
|
|
- </view>
|
|
|
- <view>
|
|
|
- <slot name="right"></slot>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ }">
|
|
|
+ <slot name="back"></slot>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-else class="tn-custom-nav-bar__bar__action" @tap="handlerBack">
|
|
|
+ <text class="tn-custom-nav-bar__bar__action--nav-back" :class="[`tn-icon-${backIcon}`]"></text>
|
|
|
+ <text class="tn-custom-nav-bar__bar__action--nav-back-text" v-if="backTitle">{{ backTitle }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tn-custom-nav-bar__bar__content" :style="[contentStyle]">
|
|
|
+ <slot></slot>
|
|
|
+ </view>
|
|
|
+ <view>
|
|
|
+ <slot name="right"></slot>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import componentsColorMixin from '../../libs/mixin/components_color.js'
|
|
|
- export default {
|
|
|
- name: 'tn-nav-bar',
|
|
|
- mixins: [componentsColorMixin],
|
|
|
- props: {
|
|
|
- // 层级
|
|
|
- zIndex: {
|
|
|
- type: Number,
|
|
|
- default: 0
|
|
|
- },
|
|
|
- // 导航栏的高度
|
|
|
- height: {
|
|
|
- type: Number,
|
|
|
- default: 0
|
|
|
- },
|
|
|
- // 高度单位
|
|
|
- unit: {
|
|
|
- type: String,
|
|
|
- default: 'px'
|
|
|
- },
|
|
|
- // 是否显示返回按钮
|
|
|
- isBack: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- // 返回按钮的图标
|
|
|
- backIcon: {
|
|
|
- type: String,
|
|
|
- default: 'left'
|
|
|
- },
|
|
|
- // 返回按钮旁显示的文字
|
|
|
- backTitle: {
|
|
|
- type: String,
|
|
|
- default: '返回'
|
|
|
- },
|
|
|
- // 透明状态栏
|
|
|
- alpha: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- // 是否固定在顶部
|
|
|
- fixed: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- // 是否显示底部阴影
|
|
|
- bottomShadow: {
|
|
|
- type: Boolean,
|
|
|
- default: true
|
|
|
- },
|
|
|
- // 是否自定义返回按钮
|
|
|
- customBack: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- // 返回前回调
|
|
|
- beforeBack: {
|
|
|
- type: Function,
|
|
|
- default: null
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- navBarStyle() {
|
|
|
- let style = {}
|
|
|
- style.height = this.height === 0 ? this.customBarHeight + this.unit : this.height + this.unit
|
|
|
- if (this.fixed) {
|
|
|
- style.position = 'fixed'
|
|
|
- }
|
|
|
- style.zIndex = this.elZIndex
|
|
|
-
|
|
|
- return style
|
|
|
- },
|
|
|
- barClass() {
|
|
|
- let clazz = ''
|
|
|
- if (this.backgroundColorClass) {
|
|
|
- clazz += ` ${this.backgroundColorClass}`
|
|
|
- }
|
|
|
- if (this.fontColorClass) {
|
|
|
- clazz += `${this.fontColorClass}`
|
|
|
- }
|
|
|
- if (this.fixed) {
|
|
|
- clazz += ' tn-custom-nav-bar__bar--fixed'
|
|
|
- }
|
|
|
- if (this.alpha) {
|
|
|
- clazz += ' tn-custom-nav-bar__bar--alpha'
|
|
|
- }
|
|
|
- if (this.bottomShadow) {
|
|
|
- clazz += ' tn-custom-nav-bar__bar--bottom-shadow'
|
|
|
- }
|
|
|
-
|
|
|
- return clazz
|
|
|
- },
|
|
|
- barStyle() {
|
|
|
- let style = {}
|
|
|
- style.height = this.height === 0 ? this.customBarHeight + this.unit : this.height + this.unit
|
|
|
-
|
|
|
- if (this.fixed) {
|
|
|
- style.paddingTop = this.statusBarHeight + 'px'
|
|
|
- }
|
|
|
-
|
|
|
- if(!this.backgroundColorClass) {
|
|
|
- style.backgroundColor = this.backgroundColor !== '' ? this.backgroundColor : '#FFFFFF'
|
|
|
- }
|
|
|
- if (!this.fontColorClass && this.fontColor) {
|
|
|
- style.color= this.fontColor
|
|
|
- }
|
|
|
-
|
|
|
- style.zIndex = this.elZIndex
|
|
|
-
|
|
|
- return style
|
|
|
- },
|
|
|
- contentStyle() {
|
|
|
- let style = {}
|
|
|
- style.top = this.fixed ? this.statusBarHeight + 'px' : '0px'
|
|
|
- style.height = this.height === 0 ? (this.customBarHeight - this.statusBarHeight) + this.unit : this.height + this.unit
|
|
|
- style.lineHeight = style.height
|
|
|
-
|
|
|
- if (this.isBack) {
|
|
|
- if (this.customBack) {
|
|
|
- const width = (this.customBackStyleInfo.width + this.customBackStyleInfo.left) * 2
|
|
|
- style.width = `calc(100% - ${width}px)`
|
|
|
- } else {
|
|
|
- style.width = 'calc(100% - 340rpx)'
|
|
|
- }
|
|
|
- } else {
|
|
|
- style.width = '100%'
|
|
|
- }
|
|
|
-
|
|
|
- return style
|
|
|
- },
|
|
|
- elZIndex() {
|
|
|
- return this.zIndex ? this.zIndex : this.$t.zIndex.navbar
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // 状态栏的高度
|
|
|
- statusBarHeight: 0,
|
|
|
- // 自定义导航栏的高度
|
|
|
- customBarHeight: 0,
|
|
|
- // 自定义返回按钮时，返回容器的宽高边距信息
|
|
|
- customBackStyleInfo: {
|
|
|
- width: 86,
|
|
|
- height: 32,
|
|
|
- left: 15
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- // 获取vuex中的自定义顶栏的高度
|
|
|
- this.updateNavBarInfo()
|
|
|
- },
|
|
|
- created() {
|
|
|
- // 获取胶囊信息
|
|
|
- // #ifdef MP-WEIXIN
|
|
|
- let custom = wx.getMenuButtonBoundingClientRect()
|
|
|
- this.customBackStyleInfo.width = custom.width
|
|
|
- this.customBackStyleInfo.height = custom.height
|
|
|
- this.customBackStyleInfo.left = uni.upx2px(750) - custom.right
|
|
|
- // #endif
|
|
|
- },
|
|
|
- methods: {
|
|
|
- // 更新导航栏的高度
|
|
|
- async updateNavBarInfo() {
|
|
|
- // 获取vuex中的自定义顶栏的高度
|
|
|
- let customBarHeight = this.vuex_custom_bar_height
|
|
|
- let statusBarHeight = this.vuex_status_bar_height
|
|
|
- // 如果获取失败则重新获取
|
|
|
- if (!customBarHeight) {
|
|
|
- try {
|
|
|
- const navBarInfo = await this.$t.updateCustomBar()
|
|
|
- customBarHeight = navBarInfo.customBarHeight
|
|
|
- statusBarHeight = navBarInfo.statusBarHeight
|
|
|
- } catch(e) {
|
|
|
- setTimeout(() => {
|
|
|
- this.updateNavBarInfo()
|
|
|
- }, 10)
|
|
|
- return
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 更新vuex中的导航栏信息
|
|
|
- this && this.$t.vuex('vuex_status_bar_height', statusBarHeight)
|
|
|
- this && this.$t.vuex('vuex_custom_bar_height', customBarHeight)
|
|
|
-
|
|
|
- this.customBarHeight = customBarHeight
|
|
|
- this.statusBarHeight = statusBarHeight
|
|
|
- },
|
|
|
- // 处理返回事件
|
|
|
- async handlerBack() {
|
|
|
- if (this.beforeBack && typeof(this.beforeBack) === 'function') {
|
|
|
- // 执行回调，同时传入索引当作参数
|
|
|
- // 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this
|
|
|
- // 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文
|
|
|
- let beforeBack = this.beforeBack.bind(this.$t.$parent.call(this))()
|
|
|
- // 判断是否返回了Promise
|
|
|
- if (!!beforeBack && typeof beforeBack.then === 'function') {
|
|
|
- await beforeBack.then(res => {
|
|
|
- // Promise返回成功
|
|
|
- this.navBack()
|
|
|
- }).catch(err => {})
|
|
|
- } else if (beforeBack === true) {
|
|
|
- this.navBack()
|
|
|
- }
|
|
|
- } else {
|
|
|
- this.navBack()
|
|
|
- }
|
|
|
- },
|
|
|
- // 返回上一页
|
|
|
- navBack() {
|
|
|
-
|
|
|
- // 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
|
|
|
- const pages = getCurrentPages()
|
|
|
- if (pages && pages.length > 0) {
|
|
|
- const firstPage = pages[0]
|
|
|
- if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/index/index')) {
|
|
|
- uni.reLaunch({
|
|
|
- url: '/pages/index/index'
|
|
|
- })
|
|
|
- } else {
|
|
|
- uni.navigateBack({
|
|
|
- delta: 1
|
|
|
- })
|
|
|
- }
|
|
|
- } else {
|
|
|
- uni.reLaunch({
|
|
|
- url: '/pages/index/index'
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ import componentsColorMixin from '../../libs/mixin/components_color.js'
|
|
|
+ export default {
|
|
|
+ name: 'tn-nav-bar',
|
|
|
+ mixins: [componentsColorMixin],
|
|
|
+ props: {
|
|
|
+ // 层级
|
|
|
+ zIndex: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ // 导航栏的高度
|
|
|
+ height: {
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ // 高度单位
|
|
|
+ unit: {
|
|
|
+ type: String,
|
|
|
+ default: 'px'
|
|
|
+ },
|
|
|
+ // 是否显示返回按钮
|
|
|
+ isBack: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ // 返回按钮的图标
|
|
|
+ backIcon: {
|
|
|
+ type: String,
|
|
|
+ default: 'left'
|
|
|
+ },
|
|
|
+ // 返回按钮旁显示的文字
|
|
|
+ backTitle: {
|
|
|
+ type: String,
|
|
|
+ default: '返回'
|
|
|
+ },
|
|
|
+ // 透明状态栏
|
|
|
+ alpha: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ // 是否固定在顶部
|
|
|
+ fixed: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ // 是否显示底部阴影
|
|
|
+ bottomShadow: {
|
|
|
+ type: Boolean,
|
|
|
+ default: true
|
|
|
+ },
|
|
|
+ // 是否自定义返回按钮
|
|
|
+ customBack: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ // 返回前回调
|
|
|
+ beforeBack: {
|
|
|
+ type: Function,
|
|
|
+ default: null
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ navBarStyle() {
|
|
|
+ let style = {}
|
|
|
+ style.height = this.height === 0 ? this.customBarHeight + this.unit : this.height + this.unit
|
|
|
+ if (this.fixed) {
|
|
|
+ style.position = 'fixed'
|
|
|
+ }
|
|
|
+ style.zIndex = this.elZIndex
|
|
|
+
|
|
|
+ return style
|
|
|
+ },
|
|
|
+ barClass() {
|
|
|
+ let clazz = ''
|
|
|
+ if (this.backgroundColorClass) {
|
|
|
+ clazz += ` ${this.backgroundColorClass}`
|
|
|
+ }
|
|
|
+ if (this.fontColorClass) {
|
|
|
+ clazz += `${this.fontColorClass}`
|
|
|
+ }
|
|
|
+ if (this.fixed) {
|
|
|
+ clazz += ' tn-custom-nav-bar__bar--fixed'
|
|
|
+ }
|
|
|
+ if (this.alpha) {
|
|
|
+ clazz += ' tn-custom-nav-bar__bar--alpha'
|
|
|
+ }
|
|
|
+ if (this.bottomShadow) {
|
|
|
+ clazz += ' tn-custom-nav-bar__bar--bottom-shadow'
|
|
|
+ }
|
|
|
+
|
|
|
+ return clazz
|
|
|
+ },
|
|
|
+ barStyle() {
|
|
|
+ let style = {}
|
|
|
+ style.height = this.height === 0 ? this.customBarHeight + this.unit : this.height + this.unit
|
|
|
+
|
|
|
+ if (this.fixed) {
|
|
|
+ style.paddingTop = this.statusBarHeight + 'px'
|
|
|
+ }
|
|
|
+
|
|
|
+ if (!this.backgroundColorClass) {
|
|
|
+ style.backgroundColor = this.backgroundColor !== '' ? this.backgroundColor : '#FFFFFF'
|
|
|
+ }
|
|
|
+ if (!this.fontColorClass && this.fontColor) {
|
|
|
+ style.color = this.fontColor
|
|
|
+ }
|
|
|
+
|
|
|
+ style.zIndex = this.elZIndex
|
|
|
+
|
|
|
+ return style
|
|
|
+ },
|
|
|
+ contentStyle() {
|
|
|
+ let style = {}
|
|
|
+ style.top = this.fixed ? this.statusBarHeight + 'px' : '0px'
|
|
|
+ style.height = this.height === 0 ? (this.customBarHeight - this.statusBarHeight) + this.unit : this
|
|
|
+ .height + this.unit
|
|
|
+ style.lineHeight = style.height
|
|
|
+
|
|
|
+ if (this.isBack) {
|
|
|
+ if (this.customBack) {
|
|
|
+ const width = (this.customBackStyleInfo.width + this.customBackStyleInfo.left) * 2
|
|
|
+ style.width = `calc(100% - ${width}px)`
|
|
|
+ } else {
|
|
|
+ style.width = 'calc(100% - 340rpx)'
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ style.width = '100%'
|
|
|
+ }
|
|
|
+
|
|
|
+ return style
|
|
|
+ },
|
|
|
+ elZIndex() {
|
|
|
+ return this.zIndex ? this.zIndex : this.$t.zIndex.navbar
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 状态栏的高度
|
|
|
+ statusBarHeight: 0,
|
|
|
+ // 自定义导航栏的高度
|
|
|
+ customBarHeight: 0,
|
|
|
+ // 自定义返回按钮时，返回容器的宽高边距信息
|
|
|
+ customBackStyleInfo: {
|
|
|
+ width: 86,
|
|
|
+ height: 32,
|
|
|
+ left: 15
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // 获取vuex中的自定义顶栏的高度
|
|
|
+ this.updateNavBarInfo()
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // 获取胶囊信息
|
|
|
+ // #ifdef MP-WEIXIN
|
|
|
+ let custom = wx.getMenuButtonBoundingClientRect()
|
|
|
+ this.customBackStyleInfo.width = custom.width
|
|
|
+ this.customBackStyleInfo.height = custom.height
|
|
|
+ this.customBackStyleInfo.left = uni.upx2px(750) - custom.right
|
|
|
+ // #endif
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 更新导航栏的高度
|
|
|
+ async updateNavBarInfo() {
|
|
|
+ // 获取vuex中的自定义顶栏的高度
|
|
|
+ let customBarHeight = this.vuex_custom_bar_height
|
|
|
+ let statusBarHeight = this.vuex_status_bar_height
|
|
|
+ // 如果获取失败则重新获取
|
|
|
+ if (!customBarHeight) {
|
|
|
+ try {
|
|
|
+ const navBarInfo = await this.$t.updateCustomBar()
|
|
|
+ customBarHeight = navBarInfo.customBarHeight
|
|
|
+ statusBarHeight = navBarInfo.statusBarHeight
|
|
|
+ } catch (e) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.updateNavBarInfo()
|
|
|
+ }, 10)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新vuex中的导航栏信息
|
|
|
+ this && this.$t.vuex('vuex_status_bar_height', statusBarHeight)
|
|
|
+ this && this.$t.vuex('vuex_custom_bar_height', customBarHeight)
|
|
|
+
|
|
|
+ this.customBarHeight = customBarHeight
|
|
|
+ this.statusBarHeight = statusBarHeight
|
|
|
+ },
|
|
|
+ // 处理返回事件
|
|
|
+ async handlerBack() {
|
|
|
+ if (this.beforeBack && typeof(this.beforeBack) === 'function') {
|
|
|
+ // 执行回调，同时传入索引当作参数
|
|
|
+ // 在微信，支付宝等环境(H5正常)，会导致父组件定义的函数体中的this变成子组件的this
|
|
|
+ // 通过bind()方法，绑定父组件的this，让this的this为父组件的上下文
|
|
|
+ let beforeBack = this.beforeBack.bind(this.$t.$parent.call(this))()
|
|
|
+ // 判断是否返回了Promise
|
|
|
+ if (!!beforeBack && typeof beforeBack.then === 'function') {
|
|
|
+ await beforeBack.then(res => {
|
|
|
+ // Promise返回成功
|
|
|
+ this.navBack()
|
|
|
+ }).catch(err => {})
|
|
|
+ } else if (beforeBack === true) {
|
|
|
+ this.navBack()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.navBack()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 返回上一页
|
|
|
+ navBack() {
|
|
|
+
|
|
|
+ // 通过判断当前页面的页面栈信息，是否有上一页进行返回，如果没有则跳转到首页
|
|
|
+ const pages = getCurrentPages()
|
|
|
+ if (pages && pages.length > 0) {
|
|
|
+ const firstPage = pages[0]
|
|
|
+ if (pages.length == 1 && (!firstPage.route || firstPage.route != 'pages/robot/index')) {
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages/robot/index'
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.reLaunch({
|
|
|
+ url: '/pages/robot/index'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
-
|
|
|
- .tn-custom-nav-bar {
|
|
|
- display: block;
|
|
|
- position: relative;
|
|
|
-
|
|
|
- &__bar {
|
|
|
- display: flex;
|
|
|
- position: relative;
|
|
|
- align-items: center;
|
|
|
- min-height: 100rpx;
|
|
|
- justify-content: space-between;
|
|
|
- min-height: 0px;
|
|
|
- /* #ifdef MP-WEIXIN */
|
|
|
- padding-right: 220rpx;
|
|
|
- /* #endif */
|
|
|
- /* #ifdef MP-ALIPAY */
|
|
|
- padding-right: 150rpx;
|
|
|
- /* #endif */
|
|
|
- box-shadow: 0rpx 0rpx 0rpx;
|
|
|
- z-index: 9999;
|
|
|
-
|
|
|
- &--fixed {
|
|
|
- position: fixed;
|
|
|
- width: 100%;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
-
|
|
|
- &--alpha {
|
|
|
- background: transparent !important;
|
|
|
- box-shadow: none !important;
|
|
|
- }
|
|
|
-
|
|
|
- &--bottom-shadow {
|
|
|
- box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
|
|
|
- }
|
|
|
-
|
|
|
- &__action {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- height: 100%;
|
|
|
- justify-content: center;
|
|
|
- max-width: 100%;
|
|
|
-
|
|
|
- &--nav-back {
|
|
|
- /* position: absolute; */
|
|
|
- /* top: 50%; */
|
|
|
- /* left: 20rpx; */
|
|
|
- /* margin-top: -15rpx; */
|
|
|
- // width: 25rpx;
|
|
|
- // height: 25rpx;
|
|
|
- margin-left: 20rpx;
|
|
|
- font-size: 38rpx;
|
|
|
- line-height: 100%;
|
|
|
- // border-width: 0 0 4rpx 4rpx;
|
|
|
- // border-color: #000000;
|
|
|
- // border-style: solid;
|
|
|
- // transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
|
|
- }
|
|
|
-
|
|
|
- &--nav-back-text {
|
|
|
- margin-left: 10rpx;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &__content {
|
|
|
- position: absolute;
|
|
|
- text-align: center;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- bottom: 0;
|
|
|
- margin: auto;
|
|
|
- font-size: 32rpx;
|
|
|
- cursor: none;
|
|
|
- // pointer-events: none;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
-</style>
|
|
|
+ .tn-custom-nav-bar {
|
|
|
+ display: block;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &__bar {
|
|
|
+ display: flex;
|
|
|
+ position: relative;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 100rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ min-height: 0px;
|
|
|
+ /* #ifdef MP-WEIXIN */
|
|
|
+ padding-right: 220rpx;
|
|
|
+ /* #endif */
|
|
|
+ /* #ifdef MP-ALIPAY */
|
|
|
+ padding-right: 150rpx;
|
|
|
+ /* #endif */
|
|
|
+ box-shadow: 0rpx 0rpx 0rpx;
|
|
|
+ z-index: 9999;
|
|
|
+
|
|
|
+ &--fixed {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--alpha {
|
|
|
+ background: transparent !important;
|
|
|
+ box-shadow: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--bottom-shadow {
|
|
|
+ box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.05);
|
|
|
+ }
|
|
|
+
|
|
|
+ &__action {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ height: 100%;
|
|
|
+ justify-content: center;
|
|
|
+ max-width: 100%;
|
|
|
+
|
|
|
+ &--nav-back {
|
|
|
+ /* position: absolute; */
|
|
|
+ /* top: 50%; */
|
|
|
+ /* left: 20rpx; */
|
|
|
+ /* margin-top: -15rpx; */
|
|
|
+ // width: 25rpx;
|
|
|
+ // height: 25rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ font-size: 38rpx;
|
|
|
+ line-height: 100%;
|
|
|
+ // border-width: 0 0 4rpx 4rpx;
|
|
|
+ // border-color: #000000;
|
|
|
+ // border-style: solid;
|
|
|
+ // transform: matrix(0.5, 0.5, -0.5, 0.5, 0, 0);
|
|
|
+ }
|
|
|
+
|
|
|
+ &--nav-back-text {
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__content {
|
|
|
+ position: absolute;
|
|
|
+ text-align: center;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ margin: auto;
|
|
|
+ font-size: 32rpx;
|
|
|
+ cursor: none;
|
|
|
+ // pointer-events: none;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
