|
|
@@ -1,18 +1,18 @@
|
|
|
<template>
|
|
|
<view class="layout-container">
|
|
|
<!-- 顶部填充区 -->
|
|
|
- <view :style="{height: safeAreaStore.statusBarHeight+'px'}"></view>
|
|
|
+ <view :style="statusBarStyle"></view>
|
|
|
|
|
|
<!-- 顶部胶囊区 -->
|
|
|
- <view class="capsule-box"
|
|
|
- :style="{
|
|
|
- height: safeAreaStore.capsuleBarHeight+'px',
|
|
|
- width: safeAreaStore.capsuleBarLeft+'px',
|
|
|
- 'padding-top': safeAreaStore.capsuleBarMarginTop+'px',
|
|
|
- 'padding-bottom': safeAreaStore.capsuleBarMarginBottom+'px'}">
|
|
|
- <uni-icons type="back" color="#406CE7"></uni-icons>
|
|
|
- <uni-icons type="home" color="#406CE7"></uni-icons>
|
|
|
- <!-- <slot name="capsule"></slot> -->
|
|
|
+ <view class="capsule-box" :style="capsuleBarStyle">
|
|
|
+ <view class="icon-wrap" v-if="showBack || showHome">
|
|
|
+ <view v-if="showBack" class="icon-box" :style="iconBoxStyle" @click="goBackPage">
|
|
|
+ <uni-icons type="back" color="#FFFFFF" :size="iconSize"></uni-icons>
|
|
|
+ </view>
|
|
|
+ <view v-if="showHome" class="icon-box" :style="iconBoxStyle" @click="goIndexPage">
|
|
|
+ <uni-icons type="home" color="#FFFFFF" :size="iconSize"></uni-icons>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
|
|
|
<!-- 内容区 -->
|
|
|
@@ -21,14 +21,92 @@
|
|
|
</view>
|
|
|
|
|
|
<!-- 底部填充区 -->
|
|
|
- <view :style="{height: safeAreaStore.bottomHeight+'px'}"></view>
|
|
|
+ <view :style="bottomBoxStyle"></view>
|
|
|
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
+ import { computed, ref } from 'vue';
|
|
|
import { useSafeAreaStore } from '@/stores/safeArea.js';
|
|
|
+ import router from '@/common/constants/router';
|
|
|
+
|
|
|
+ defineProps({
|
|
|
+ showHome: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ showBack: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 安全区
|
|
|
+ */
|
|
|
const safeAreaStore = useSafeAreaStore();
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 状态栏样式
|
|
|
+ */
|
|
|
+ const statusBarStyle = computed(() => {
|
|
|
+ return {
|
|
|
+ height: safeAreaStore.statusBarHeight+'px'
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 胶囊区样式
|
|
|
+ */
|
|
|
+ const capsuleBarStyle = computed(() => {
|
|
|
+ return {
|
|
|
+ height: safeAreaStore.capsuleBarHeight+'px',
|
|
|
+ width: safeAreaStore.capsuleBarLeft+'px',
|
|
|
+ 'padding-top': safeAreaStore.capsuleBarMarginTop+'px',
|
|
|
+ 'padding-bottom': safeAreaStore.capsuleBarMarginBottom+'px'
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 图标容器样式
|
|
|
+ */
|
|
|
+ const iconBoxStyle = computed(() => {
|
|
|
+ return {
|
|
|
+ width: safeAreaStore.capsuleBarContentHeight-5+'px',
|
|
|
+ height: safeAreaStore.capsuleBarContentHeight-5+'px'
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 图标大小
|
|
|
+ */
|
|
|
+ const iconSize = computed(() => safeAreaStore.capsuleBarContentHeight-10);
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 底部填充区样式
|
|
|
+ */
|
|
|
+ const bottomBoxStyle = computed(() => {
|
|
|
+ return {
|
|
|
+ height: safeAreaStore.bottomHeight+'px'
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 返回主页
|
|
|
+ */
|
|
|
+ const goIndexPage = () => {
|
|
|
+ uni.reLaunch({
|
|
|
+ url: router.INDEX_URL
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 返回上一页
|
|
|
+ */
|
|
|
+ const goBackPage = () => {
|
|
|
+ uni.navigateBack();
|
|
|
+ };
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -41,6 +119,27 @@
|
|
|
.capsule-box {
|
|
|
padding-left: 24rpx;
|
|
|
padding-right: 24rpx;
|
|
|
+
|
|
|
+ .icon-wrap {
|
|
|
+ display: flex;
|
|
|
+ justify-content: left;
|
|
|
+ height: 100%;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .icon-box {
|
|
|
+ margin-left: 16rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ opacity: 0.2;
|
|
|
+ background: rgba(0, 0, 0, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-box:first-child {
|
|
|
+ margin-left: 0rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
.content-box {
|
