mobile_h5/card/pages/index/detail.vue

<template>
	<view class="body">
		<view class="content uni-column">
			<view class="top uni-column">
				<view class="topbar uni-row">
					<image mode="aspectFit" class="topbar-back" @click="btnBack" src="/static/default/back.png"></image>
					<text class="mcName">详情页面</text>
					<view class="topbar-right"></view>
				</view>
				<view class="top-main uni-column">
					<text class="top-title">这里是详情页面的标题</text>
					<text class="top-desc">这里是详情页面的描述内容，展示详细信息。</text>
				</view>
			</view>
			<view class="main uni-column">
				<view class="info-box">
					<text class="info-text">欢迎来到详情页！</text>
					<text class="info-subtext">这是一个全屏展示的页面。</text>
				</view>
				<button class="btnStart" @click="btnAction">执行操作</button>
			</view>
		</view>
	</view>
</template>

<script>
	import tools from '../../common/tools';
	import Bridge from '../../sdk/bridge'; // 使用 SDK Bridge
	import {
		ossUrl
	} from '../../common/api';

	export default {
		data() {
			return {
				queryObj: {},
				queryString: "",
			}
		},
		onLoad(query) {
			this.queryObj = query;
			this.queryString = tools.objectToQueryString(this.queryObj);
			console.log("Detail Page Loaded", query);
		},
		methods: {
			btnBack() {
				// 返回首页或关闭当前 WebView
				// Bridge.back(); // 或者使用兼容的 tools.appAction
				const url = `action://to_home/`;
				Bridge.appAction(url);
			},
			btnAction() {
				uni.showToast({
					title: '点击了按钮',
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #f5f5f5;
	}

	.top {
		width: 100%;
		height: 400rpx;
		padding-top: 40px; /* 适配状态栏 */
		background: linear-gradient(180deg, #178bff 0%, #004d9b 100%);
		color: white;
	}

	.topbar {
		width: 92%;
		padding: 0 4%;
		height: 88rpx;
		align-items: center;
		justify-content: space-between;
	}

	.topbar-back {
		width: 40rpx;
		height: 40rpx;
	}

	.mcName {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.topbar-right {
		width: 40rpx; 
	}

	.top-main {
		flex: 1;
		justify-content: center;
		align-items: center;
	}

	.top-title {
		font-size: 48rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.top-desc {
		font-size: 28rpx;
		opacity: 0.8;
	}

	.main {
		flex: 1;
		width: 92%;
		margin: 0 auto;
		margin-top: -40rpx; /* 上移覆盖 */
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;
		padding: 40rpx;
		box-sizing: border-box;
		justify-content: space-between;
	}

	.info-box {
		align-items: center;
	}

	.info-text {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
	}

	.info-subtext {
		font-size: 26rpx;
		color: #666;
	}

	.btnStart {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		background-color: #178bff;
		color: white;
		border-radius: 45rpx;
		font-size: 32rpx;
		margin-bottom: 40rpx;
	}
</style>