132 lines
2.5 KiB
Vue
132 lines
2.5 KiB
Vue
<template>
|
|
<view class="asset-shell" :style="{ '--asset-shell-side-width': sideWidth }">
|
|
<view class="asset-shell__nav">
|
|
<view class="asset-shell__side">
|
|
<view v-if="backable" class="asset-shell__back" @click="handleBack">
|
|
<image
|
|
class="asset-shell__back-image"
|
|
src="https://imgs.agrimedia.cn/bm-bmt/bacn-icon.png"
|
|
mode="aspectFit"
|
|
></image>
|
|
</view>
|
|
</view>
|
|
<text class="asset-shell__title">{{ title }}</text>
|
|
<view class="asset-shell__side asset-shell__side--right">
|
|
<slot name="right">
|
|
<text
|
|
v-if="rightText"
|
|
class="asset-shell__action"
|
|
@click="$emit('right-click')"
|
|
>
|
|
{{ rightText }}
|
|
</text>
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
<slot />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { refreshCurrentWebviewToken } from "../utils/webview-token";
|
|
|
|
export default {
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
rightText: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
backable: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
sideWidth: {
|
|
type: String,
|
|
default: "120rpx",
|
|
},
|
|
},
|
|
created() {
|
|
refreshCurrentWebviewToken();
|
|
},
|
|
methods: {
|
|
handleBack() {
|
|
if (getCurrentPages().length > 1) {
|
|
uni.navigateBack();
|
|
return;
|
|
}
|
|
|
|
uni.reLaunch({
|
|
url: "/pages/index/index",
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../styles/tokens.scss";
|
|
|
|
.asset-shell {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 20;
|
|
padding: calc(env(safe-area-inset-top) + 20rpx) 14rpx 20rpx;
|
|
background: #191e32;
|
|
}
|
|
|
|
.asset-shell__nav {
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: 48rpx;
|
|
}
|
|
|
|
.asset-shell__side {
|
|
display: flex;
|
|
align-items: center;
|
|
width: var(--asset-shell-side-width);
|
|
flex: 0 0 var(--asset-shell-side-width);
|
|
min-width: 0;
|
|
}
|
|
|
|
.asset-shell__side--right {
|
|
justify-content: flex-end;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.asset-shell__back {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.asset-shell__back-image {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
}
|
|
|
|
.asset-shell__title {
|
|
flex: 1;
|
|
text-align: center;
|
|
font-size: 36rpx;
|
|
font-weight: 500;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.asset-shell__action {
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
color: rgba(232, 239, 255, 0.86);
|
|
}
|
|
</style>
|