intelligentProject-phone/pages/index/index.vue

<template>
	<div class="main-view">
		<div class="container">
			<div class="logo">
				<image src="/static/logo.png" alt="YXD"></image>
			</div>
			<h1>访问 YXD 智能应用</h1>

			<p class="description">点击下方按钮跳转至浏览器访问 YXD 智能应用平台，体验智能服务。</p>

			<div class="url-display">
				<!-- <i class="fas fa-lock"></i> -->
				<input placeholder="请输入网址" :value="url" />
			</div>

			<button class="access-btn" ref="accessButton" @click="openExternalLink">
				<i class="fas fa-external-link-alt"></i> 立即访问
			</button>

			<!-- <p class="alternative">如果无法自动跳转，请 <a href="https://ws.yuxindazhineng.com/" ref="directLink" @click="handleDirectLinkClick">点击此处直接访问</a></p> -->
		</div>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';

	const url = ref("https://ws.yuxindazhineng.com");
	// 打开外部链接的通用方法
	function openExternalLink() {
		// #ifdef H5
		window.open(url.value, '_blank')
		// #endif

		// #ifdef APP-PLUS
		plus.runtime.openURL(url.value)
		// #endif

		// #ifdef MP-WEIXIN
		uni.setClipboardData({
			data: url.value,
			success: () => {
				uni.showModal({
					content: '链接已复制，请在浏览器中打开',
					showCancel: false
				})
			}
		})
		// #endif
	}

	// 访问按钮点击事件处理
	const handleAccessClick = () => {

		// 模拟短暂延迟，增强用户体验
		setTimeout(() => {
			window.location.href = url.value;
		}, 1000);
	};

	// 直接链接点击事件处理
	const handleDirectLinkClick = (e) => {
		e.preventDefault();
		if (loadingElement.value) {
			loadingElement.value.style.display = 'block';
		}

		setTimeout(() => {
			window.location.href = url.value;
		}, 500);
	};

	// 在组件挂载后执行的操作
	onMounted(() => {
		// 组件挂载后，DOM元素已准备就绪
		console.log('组件已挂载，DOM元素可用');
	});
</script>


<style scoped>
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
	}

	body {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: -1;
		background: linear-gradient(135deg, #0f1419 0, #1a1f2e 100%);
	}

	.main-view {
		z-index: 0;
		min-height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1rem;
		position: relative;
		overflow: hidden;
		background: radial-gradient(ellipse at center, #0f1419 0%, #0a0e1a 70%);
		color: #e8f4f8;
	}

	

	.container {
		display: flex;
		flex-direction: column;
		width: auto;
		height: 90vh;
		max-width: 500px;
		background: rgba(26, 31, 46, .8);
		border: 1px solid rgba(139, 195, 232, 0.2);
		border-radius: 16px;
		overflow: hidden;
		/* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); */
		box-shadow: 0 0 30px rgba(139, 195, 232, 0.5);
		text-align: center;
		/* align-items: center; */
		justify-content: center;
		padding: 40px 30px;
		margin: 10px;
		box-sizing: border-box;
	}

	.logo {
		z-index: 1;
		width: 100px;
		height: 100px;
		margin: 0 auto 25px;
		background: rgba(139, 195, 232, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 40px;
		box-shadow: 0 0 20px rgba(139, 195, 232, 0.3);
		overflow: hidden;
		/* 确保图片不会超出圆形容器 */
		padding: 10px;
		/* 增加内边距，让图片与边缘有间距 */
	}

	.logo image {
		z-index: 2;
		max-width: 100%;
		/* 图片最大宽度不超过容器 */
		max-height: 100%;
		/* 图片最大高度不超过容器 */
		object-fit: contain;
		/* 保持图片比例，完整显示在容器内 */
		display: block;
		/* 去除图片底部可能出现的空白 */
		/* border-radius: 50%;
		box-shadow: 0 0 20px rgba(139, 195, 232, 0.1); */
	}

	/* h1 {
		color: #2c3e50;
		margin-bottom: 15px;
		font-size: 24px;
		background: linear-gradient(135deg, #8bc3e8, #6ba3d6);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		filter: drop-shadow(0 0 5px rgba(74, 139, 194, 0.2));
	} */
	h1 {
		font-size: 2rem;
		font-weight: 700;
		letter-spacing: 2px;
		background: linear-gradient(135deg, #8bc3e8, #6ba3d6);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		background-clip: text;
		/* margin-bottom: 10px; */
		filter: drop-shadow(0 0 5px rgba(74, 139, 194, 0.2));
		text-shadow: 0 0 10px rgba(139, 195, 232, 0.3);
	}

	.description {
		color: #9db4c0;
		font-size: 0.9rem;
		margin: 20px;
	}

	.url-display {
		background: #f8f9fa;
		padding: 15px;
		border-radius: 12px;
		margin-bottom: 25px;
		border: 1px solid #eaeaea;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: #5a6570;
	}

	.access-btn {
		background: linear-gradient(135deg, #8bc3e8, #6ba3d6);
		color: white;
		border: none;
		width: 100%;
		padding: 16px 40px;
		border-radius: 20px;
		font-size: 18px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.3s ease;
		/* box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); */
		box-shadow: 0 0 20px rgba(139, 195, 232, 0.3);
		display: inline-block;
		margin-bottom: 25px;
	}

	.access-btn:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
	}

	.access-btn:active {
		transform: translateY(0);
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
	}

	.access-btn:disabled {
		opacity: 0.7;
		cursor: not-allowed;
		transform: none;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
	}

	.loading-container {
		margin: 20px 0;
		display: none;
	}

	.spinner {
		width: 40px;
		height: 40px;
		border: 4px solid #f3f3f3;
		border-top: 4px solid #3498db;
		border-radius: 50%;
		animation: spin 1s linear infinite;
		margin: 0 auto 15px;
	}

	@keyframes spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.loading-text {
		font-size: 16px;
		color: #7f8c8d;
	}

	.alternative {
		margin-top: 25px;
		padding-top: 20px;
		border-top: 1px solid #eaeaea;
		font-size: 14px;
		color: #7f8c8d;
	}

	.alternative a {
		color: #3498db;
		text-decoration: none;
	}

	.alternative a:hover {
		text-decoration: underline;
	}

	@media (max-width: 600px) {
		.container {
			padding: 30px 20px;
		}

		h1 {
			font-size: 22px;
		}

		.access-btn {
			padding: 14px 30px;
			font-size: 16px;
		}
	}
</style>