Initial commit of akmon project

pages/test/popup-date-picker-portal-test.uvue

@@ -0,0 +1,187 @@
+<template>
+	<view class="test-container">
+		<view class="header">
+			<text class="title">Portal日期选择器测试</text>
+		</view>
+		
+		<view class="content">
+			<view class="nav-section">
+				<button @click="goToComparison" class="nav-btn">
+					<text>查看Portal vs 原始方式对比</text>
+				</button>
+			</view>
+			
+			<view class="test-section">
+				<text class="section-title">Portal版本日期选择器</text>
+				<popup-date-picker-portal 
+					v-model:value="testDate"
+					placeholder="选择测试日期"
+					title="测试日期选择"
+					theme="dark"
+					@change="onDateChange"
+				/>
+				<text v-if="testDate" class="selected-date">选中日期: {{ testDate }}</text>
+			</view>
+			
+			<view class="test-section">
+				<text class="section-title">原版日期选择器（z-index问题）</text>
+				<popup-date-picker 
+					v-model:value="testDate2"
+					placeholder="选择测试日期"
+					title="测试日期选择"
+					theme="light"
+					@change="onDateChange2"
+				/>
+				<text v-if="testDate2" class="selected-date">选中日期: {{ testDate2 }}</text>
+			</view>
+			
+			<view class="high-z-element">
+				<text class="high-z-text">高z-index元素 (z-index: 50000)</text>
+			</view>
+			
+			<view class="medium-z-element">
+				<text class="medium-z-text">中等z-index元素 (z-index: 10000)</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="uts">
+	import PopupDatePicker from '@/components/popup-date-picker/popup-date-picker.uvue'
+	import PopupDatePickerPortal from '@/components/popup-date-picker/popup-date-picker-portal.uvue'
+	
+	export default {
+		components: {
+			PopupDatePicker,
+			PopupDatePickerPortal
+		},
+		
+		data() {
+			return {
+				testDate: '',
+				testDate2: ''
+			}
+		},
+		
+		methods: {
+			onDateChange(date: string) {
+				console.log('Portal版本日期选择:', date)
+			},
+			
+			onDateChange2(date: string) {
+				console.log('原版日期选择:', date)
+			},
+			
+			goToComparison() {
+				uni.navigateTo({
+					url: '/pages/test/portal-vs-original-test'
+				})
+			}
+		}
+	}
+</script>
+
+<style>	.test-container {
+		height: 100vh;
+		background-image: linear-gradient(to bottom right, #667eea, #764ba2);
+		padding: 40rpx;
+	}
+	
+	.header {
+		margin-bottom: 40rpx;
+		align-items: center;
+	}
+	
+	.title {
+		font-size: 40rpx;
+		font-weight: bold;
+		color: white;
+		text-align: center;
+	}
+	
+	.content {
+		flex: 1;
+	}
+	
+	.nav-section {
+		margin-bottom: 30rpx;
+		align-items: center;
+	}
+	
+	.nav-btn {
+		padding: 25rpx 40rpx;
+		background: rgba(255, 255, 255, 0.2);
+		border: none;
+		border-radius: 15rpx;
+		font-size: 28rpx;
+		color: white;
+		font-weight: 400;
+	}
+	
+	.nav-btn:active {
+		background: rgba(255, 255, 255, 0.3);
+	}
+	
+	.test-section {
+		background: rgba(255, 255, 255, 0.1);
+		border-radius: 20rpx;
+		padding: 30rpx;
+		margin-bottom: 30rpx;
+		backdrop-filter: blur(10rpx);
+	}
+	
+	.section-title {
+		font-size: 32rpx;
+		color: white;
+		margin-bottom: 20rpx;
+		font-weight: 400;
+	}
+	
+	.selected-date {
+		margin-top: 20rpx;
+		font-size: 28rpx;
+		color: rgba(255, 255, 255, 0.9);
+	}
+	
+	.high-z-element {
+		position: fixed;
+		top: 200rpx;
+		right: 50rpx;
+		width: 300rpx;
+		height: 100rpx;
+		background: #FF6B6B;
+		z-index: 50000;
+		border-radius: 15rpx;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 10rpx 30rpx rgba(255, 107, 107, 0.3);
+	}
+	
+	.high-z-text {
+		color: white;
+		font-size: 24rpx;
+		font-weight: bold;
+		text-align: center;
+	}
+	
+	.medium-z-element {
+		position: fixed;
+		top: 350rpx;
+		right: 50rpx;
+		width: 250rpx;
+		height: 80rpx;
+		background: #4ECDC4;
+		z-index: 10000;
+		border-radius: 15rpx;
+		align-items: center;
+		justify-content: center;
+		box-shadow: 0 10rpx 30rpx rgba(78, 205, 196, 0.3);
+	}
+	
+	.medium-z-text {
+		color: white;
+		font-size: 22rpx;
+		font-weight: bold;
+		text-align: center;
+	}
+</style>