feat(mobile-h5): show non-prod env stripe on home

Render a short local/test banner above the green header
so the active APP_ENV is obvious before WeChat upload.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zlwuandCursor committed 2026-10-11 10:09:21 +08:00
1 parent 7a6d804cfa
commit 3018d05bc4
1 file changed
+35
+35
View File
@@ -1,5 +1,12 @@
<template>
<view class="page-shell">
<view
v-if="envBanner.show"
class="env-banner"
:class="'env-banner--' + envBanner.tone"
>
<text class="env-banner__text">{{ envBanner.label }}</text>
</view>
<view class="home-header">
<view class="home-header__top">
<view class="brand">中科兴皖 · 移动工作台</view>
@@ -86,6 +93,7 @@
</template>
<script>
import { ENV_BANNER } from '../../utils/config.js'
import MenuGrid from '../../components/MenuGrid.vue'
import VanEmpty from '../../components/van-empty/van-empty.vue'
import {
@@ -125,6 +133,7 @@
components: { MenuGrid, VanEmpty },
data() {
return {
envBanner: ENV_BANNER,
userName: '',
postName: '',
deptName: '',
@@ -280,4 +289,30 @@
transform: translateY(-10rpx);
}
}
.env-banner {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 12rpx 24rpx;
box-sizing: border-box;
}
.env-banner__text {
font-size: 22rpx;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.3;
}
.env-banner--local {
background: #f59e0b;
color: #451a03;
}
.env-banner--test {
background: #3b82f6;
color: #eff6ff;
}
</style>