shuibei_share/pages/index/index.vue

<template>
	<view id="app">
		<view class="container">
			<!-- 应用头部信息 -->
			<view class="app-header">
				<view class="app-icon">
					<text class="fas fa-book">水贝商城</text>
					<view class="official-badge">官方</view>
				</view>
				<!-- <view class="app-info">
					<view class="app-title">
						<view class="app-name">水贝商城</view>
						
					</view>
					<view class="app-stats">
						<view class="rating">
							
							4.56分
						</view>
						<view>1.9亿次下载</view>
					</view>
					<view class="app-stats">
						124.55MB
					</view>
				</view> -->
			</view>

			<!-- 下载选项 -->
			<view class="download-options">
				
			
				<view class="download-option option-primary" @click="downloadFrom('应用宝')">
					<view class="option-icon">
						<text class="fas fa-shield-alt"></text>
					</view>
					<view class="option-content">
						<view class="option-title">通过应用宝下载</view>
						<view class="option-desc">腾讯应用宝下载，人工智能保证安全</view>
						<view class="option-tag">无病毒</view>
						<view class="option-tag">免广告骚扰</view>
					</view>
				</view>

				<view class="download-option" @click="downloadFrom('第三方浏览器')">
					<view class="option-icon">
						<text class="fas fa-globe"></text>
					</view>
					<view class="option-content">
						<view class="option-title">通过第三方浏览器下载</view>
						<view class="option-desc">无法确认是否存在安全隐患</view>
						<view class="option-warning">请注意安全风险</view>
					</view>
				</view>
			</view>

			<!-- 应用详情 -->
			<view class="app-details">
				<view class="detail-item">
					<view class="detail-label">运营者：</view>
					<view class="detail-value">神州通誉软件</view>
				</view>
				<view class="detail-item">
					<view class="detail-label">开发者：</view>
					<view class="detail-value">神州通誉软件</view>
				</view>
				<view class="detail-item">
					<view class="detail-label">版本：</view>
					<view class="detail-value">1.0.0</view>
				</view>
			</view>

			<!-- 底部信息 -->
			<view class="footer">
				<view class="footer-links">
					<span class="footer-link">权限</span>
					<span class="footer-link">隐私</span>
					<span class="footer-link">功能</span>
					<span class="footer-link">备案</span>
				</view>
				<view>腾讯应用宝</view>
				<view>该服务由应用宝技术提供</view>
			</view>
		</view>


	</view>
</template>

<script setup>
	const downloadFrom = (source) => {
		// window.location.href = 'shuibei://';

		// window.open("appmarket://details?id=com.tencent.mm")
		// alert(111)
		// const systemInfo = uni.getSystemInfoSync();
		window.location.href= "https://a.app.qq.com/o/simple.jsp?pkgname=com.lucky.luckyclient"
		if (source === '应用宝') {

		} else {

		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
		color: #333;
		line-height: 1.6;
		padding: 20rpx;
		font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	}

	.container {
		background: #fff;
		border-radius: 24rpx;
		overflow: hidden;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.05);
		height: 100vh;
        padding-top: 60px;
		box-sizing: border-box;
	}

	/* 应用头部信息 */
	.app-header {
		// display: flex;
		padding: 40rpx;
		border-bottom: 1rpx solid #eee;
	}

	.app-icon {
		width: 160rpx;
		height: 160rpx;
		border-radius: 32rpx;
		background: linear-gradient(45deg, #ff2442, #ff2c53);
		display: flex;
		align-items: center;
		justify-content: center;
		// margin-right: 30rpx;
		margin: 0 auto;
		box-shadow: 0 8rpx 20rpx rgba(255, 36, 66, 0.2);
		position: relative;

		.official-badge {
			position: absolute;
			top: -15rpx;
			right: -15rpx;
		}
	}

	.app-icon text {
		font-size: 36rpx;
		color: white;
	}

	.app-info {
		flex: 1;
	}

	.app-title {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.app-name {
		font-size: 44rpx;
		font-weight: 700;
		margin-right: 16rpx;
	}

	.official-badge {
		background: #3875e9;
		color: white;
		font-size: 24rpx;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
	}

	.app-stats {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
		color: #666;
		font-size: 28rpx;
	}

	.rating {
		color: #ff9c27;
		margin-right: 30rpx;
	}

	/* 下载选项 */
	.download-options {
		padding: 40rpx;
	}

	.download-option {
		// border: 1rpx solid #eee;
		border-radius: 24rpx;
		padding: 5rpx;
		margin-bottom: 30rpx;
		display: flex;
		align-items: center;
		cursor: pointer;
		transition: all 0.2s;
		// padding-left:80rpx;
	}

	// .download-option:hover {
	// 	transform: translateY(-4rpx);
	// 	box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.05);
	// }

	.option-primary {
		// border-color: #ff2442;
		// background: rgba(255, 36, 66, 0.03);
	}

	.option-icon {
		width: 80rpx;
		height: 80rpx;
		background: #f5f5f5;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 30rpx;
	}

	.option-primary .option-icon {
		background: rgba(255, 36, 66, 0.1);
		color: #ff2442;
	}

	.option-content {
		flex: 1;
	}

	.option-title {
		font-weight: 600;
		margin-bottom: 8rpx;
		font-size: 26rpx;
	}

	.option-desc {
		font-size: 26rpx;
		color: #666;
	}

	.option-tag {
		background: rgba(56, 117, 233, 0.1);
		color: #3875e9;
		font-size: 24rpx;
		padding: 4rpx 16rpx;
		border-radius: 8rpx;
		margin-top: 10rpx;
		display: inline-block;
	}

	.option-warning {
		color: #f5a623;
		font-size: 24rpx;
		margin-top: 10rpx;
	}

	/* 应用详情 */
	.app-details {
		padding:0 150rpx;
		border-top: 1rpx solid #eee;
		// padding-left:80rpx;
	}

	.detail-item {
		display: flex;
		// margin-bottom: 24rpx;
		font-size: 22rpx;
	}

	.detail-label {
		width: 160rpx;
		color: #666;
	}

	.detail-value {
		flex: 1;
		color: #333;
	}

	/* 底部信息 */
	.footer {
		text-align: center;
		padding: 10rpx;
		color: #999;
		font-size: 26rpx;
		border-top: 1rpx solid #eee;
		position: absolute;
		bottom: 0px;
		left: 23%;
	}

	.footer-links {
		display: flex;
		justify-content: center;
		margin-bottom: 20rpx;
	}

	.footer-link {
		margin: 0 20rpx;
		color: #3875e9;
	}

	/* 下载按钮 */
	.download-btn {
		display: block;
		background: #ff2442;
		color: white;
		text-align: center;
		padding: 30rpx;
		border-radius: 24rpx;
		font-weight: 600;
		margin-top: 40rpx;
		cursor: pointer;
		transition: all 0.2s;
		font-size: 32rpx;
	}

	.download-btn:hover {
		background: #e61a36;
		transform: translateY(-4rpx);
		box-shadow: 0 8rpx 24rpx rgba(255, 36, 66, 0.3);
	}
</style>