Initial commit of akmon project

pages/test/popup-overlay-test.uvue

@@ -0,0 +1,143 @@
+<template>
+	<view class="test-container">
+		<view class="header">
+			<text class="title">弹出层Z-Index测试</text>
+		</view>
+		
+		<view class="content">
+			<view class="test-section">
+				<text class="section-title">日期选择器测试</text>
+				<popup-date-picker 
+					v-model:value="testDate"
+					placeholder="选择测试日期"
+					title="测试日期选择"
+					theme="dark"
+					@change="onDateChange"
+				/>
+				<text v-if="testDate" class="selected-date">选中日期: {{ testDate }}</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'
+	
+	export default {
+		components: {
+			PopupDatePicker
+		},
+		
+		data() {
+			return {
+				testDate: ''
+			}
+		},
+		
+		methods: {
+			onDateChange(date: string) {
+				console.log('日期选择:', date)
+			}
+		}
+	}
+</script>
+
+<style scoped>	.test-container {
+		flex: 1;
+		background-image: linear-gradient(to bottom right, #667eea, #764ba2);
+		min-height: 100vh;
+	}
+
+	.header {
+		padding: 40rpx 30rpx;
+		background: rgba(255, 255, 255, 0.1);
+		backdrop-filter: blur(10px);
+		align-items: center;
+	}
+
+	.title {
+		font-size: 48rpx;
+		font-weight: bold;
+		color: #FFFFFF;
+		text-align: center;
+	}
+
+	.content {
+		flex: 1;
+		padding: 30rpx;
+		background: #F8FAFC;
+		border-radius: 30rpx 30rpx 0 0;
+		margin-top: 20rpx;
+		gap: 30rpx;
+	}
+
+	.test-section {
+		background: #FFFFFF;
+		padding: 30rpx;
+		border-radius: 20rpx;
+		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
+		gap: 20rpx;
+	}
+
+	.section-title {
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #1E293B;
+		margin-bottom: 20rpx;
+	}
+
+	.selected-date {
+		font-size: 28rpx;
+		color: #6366F1;
+		padding: 15rpx;
+		background: rgba(99, 102, 241, 0.1);
+		border-radius: 15rpx;
+		margin-top: 15rpx;
+	}
+
+	.high-z-element {
+		position: fixed;
+		top: 200rpx;
+		right: 30rpx;
+		width: 200rpx;
+		height: 100rpx;
+		background: #EF4444;
+		border-radius: 15rpx;
+		z-index: 50000;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.high-z-text {
+		color: #FFFFFF;
+		font-size: 24rpx;
+		text-align: center;
+	}
+
+	.medium-z-element {
+		position: fixed;
+		top: 320rpx;
+		right: 30rpx;
+		width: 200rpx;
+		height: 100rpx;
+		background: #F59E0B;
+		border-radius: 15rpx;
+		z-index: 10000;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.medium-z-text {
+		color: #FFFFFF;
+		font-size: 24rpx;
+		text-align: center;
+	}
+</style>