260720

2026-07-20 11:56:02 +08:00
commit 2dcae4165b
176 changed files with 34633 additions and 0 deletions
--- a/components/common-hero/common-hero.vue
+++ b/components/common-hero/common-hero.vue
@@ -0,0 +1,195 @@
+<template>
+	<view class="hero-section" :style="heroStyle">
+<!--		<view class="hero-bg hero-bg-left"></view>-->
+<!--		<view class="hero-bg hero-bg-right"></view>-->
+
+		<view class="navbar" :style="navbarStyle">
+			<view class="navbar-inner">
+				<view class="navbar-left" v-if="showBack">
+					<view class="nav-back-btn" @tap="handleBack">
+						<uv-icon name="arrow-left" color="#101214" size="22"></uv-icon>
+					</view>
+				</view>
+
+				<view class="navbar-title">{{ title }}</view>
+				<view class="navbar-right-placeholder"></view>
+			</view>
+		</view>
+		<view class="navbar-spacer" :style="{ height: navbarHeight + 'px' }"></view>
+
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+	const TAB_BAR_PATHS = ['/pages/index/index', '/pages/assistant/index', '/pages/mine/index']
+
+	export default {
+		name: 'CommonHero',
+		props: {
+			title: {
+				type: String,
+				default: ''
+			},
+			useImageBg: {
+				type: Boolean,
+				default: false
+			},
+			backgroundImage: {
+				type: String,
+				default: '/static/indexBg.jpg'
+			},
+      reduceTop: {
+        type: Number,
+        default: 0
+      }
+		},
+		data() {
+			return {
+				statusBarHeight: 0,
+				currentRoute: ''
+			}
+		},
+		computed: {
+			showBack() {
+				return TAB_BAR_PATHS.indexOf(this.currentRoute) === -1
+			},
+			navbarHeight() {
+				return this.statusBarHeight + uni.upx2px(88) - uni.upx2px(this.reduceTop)
+			},
+			navbarStyle() {
+				return {
+					paddingTop: `${this.statusBarHeight}px`
+				}
+			},
+			heroStyle() {
+				if (this.useImageBg) {
+					return {
+						backgroundImage: `url('${this.backgroundImage}')`,
+						backgroundSize: 'cover',
+						backgroundPosition: 'center top',
+						backgroundRepeat: 'no-repeat'
+					}
+				}
+				return {
+					background: 'linear-gradient(180deg, #f7fbff 0%, #d9f0ff 44%, #f4fbff 100%)'
+				}
+			}
+		},
+		mounted() {
+			const { statusBarHeight = 0 } = uni.getSystemInfoSync()
+			this.statusBarHeight = statusBarHeight
+			const pages = getCurrentPages()
+			const currentPage = pages[pages.length - 1]
+			const route = currentPage && currentPage.route ? currentPage.route : ''
+			this.currentRoute = route ? `/${route}` : ''
+		},
+		methods: {
+			handleBack() {
+				const pages = getCurrentPages()
+				if (pages.length > 1) {
+					uni.navigateBack({
+						delta: 1
+					})
+					return
+				}
+				uni.switchTab({
+					url: '/pages/index/index'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.hero-section {
+		position: relative;
+		//padding: 0 0 30rpx;
+		overflow: hidden;
+    backgroud: url('@/static/indexBg.jpg');
+	}
+
+	.hero-bg {
+		position: absolute;
+		border-radius: 50%;
+		filter: blur(8rpx);
+		opacity: 0.9;
+    backgroud: url('@/static/indexBg.jpg');
+	}
+
+	.hero-bg-left {
+		top: 84rpx;
+		left: -30rpx;
+		width: 300rpx;
+		height: 200rpx;
+		background: radial-gradient(circle, rgba(197, 237, 255, 0.95) 0%, rgba(197, 237, 255, 0) 72%);
+	}
+
+	.hero-bg-right {
+		top: 46rpx;
+		right: -40rpx;
+		width: 360rpx;
+		height: 260rpx;
+		background: radial-gradient(circle, rgba(184, 231, 255, 0.92) 0%, rgba(184, 231, 255, 0) 72%);
+	}
+
+	.navbar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 100;
+		padding-left: 28rpx;
+		padding-right: 20rpx;
+		background: rgba(255, 255, 255, 0.72);
+		backdrop-filter: blur(18rpx);
+		-webkit-backdrop-filter: blur(18rpx);
+		box-shadow: 0 10rpx 28rpx rgba(65, 105, 135, 0.08);
+	}
+
+	.navbar-inner {
+		height: 88rpx;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.navbar-left {
+		width: 72rpx;
+		height: 72rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.nav-back-btn {
+		width: 72rpx;
+		height: 72rpx;
+		border-radius: 24rpx;
+		background: rgba(255, 255, 255, 0.72);
+		box-shadow: 0 8rpx 18rpx rgba(115, 164, 196, 0.14);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.navbar-title {
+		flex: 1;
+		font-size: 28rpx;
+		font-weight: 700;
+		color: #101214;
+		letter-spacing: 2rpx;
+		text-align: center;
+	}
+
+	.navbar-spacer {
+		width: 100%;
+	}
+
+	.navbar-right-placeholder {
+		width: 72rpx;
+		height: 72rpx;
+		flex-shrink: 0;
+		opacity: 0;
+	}
+</style>