144 lines
2.6 KiB
Plaintext
144 lines
2.6 KiB
Plaintext
<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>
|