修改uni-datetime-picker在PC端的显示

App.vue

@@ -35,10 +35,10 @@ export default {
   max-height: 120px !important;
 }
 
-/deep/ .times .uni-date-picker__container {
+.uni-date-picker__container {
   height: 400px !important;
-  z-index: 10000 !important;
-  position: fixed !important;
+  z-index: 50000 !important;
+  position: absolute !important;
 }
 
 /deep/ .uni-pagination__num-tag {

static/css/global.scss

@@ -25,3 +25,7 @@
 .uni-page-body {
 	font-size: 14px;
 }
+
+body {
+	position: relative;
+}
\ No newline at end of file

uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue

@@ -32,7 +32,7 @@
 					<text class="uni-calendar__box-bg-text">{{nowDate.month}}</text>
 				</view>
 
-				<view class="uni-calendar__weeks" style="padding-bottom: 7px;">
+				<view class="uni-calendar__weeks">
 					<view class="uni-calendar__weeks-day">
 						<text class="uni-calendar__weeks-day-text">{{SUNText}}</text>
 					</view>
@@ -685,7 +685,7 @@
 		flex-direction: row;
 		justify-content: center;
 		align-items: center;
-		height: 50px;
+		height: 30px;
 	}
 
 	.uni-calendar__header-mobile {
@@ -791,7 +791,7 @@
 		flex-direction: column;
 		justify-content: center;
 		align-items: center;
-		height: 40px;
+		height: 25px;
 		border-bottom-color: #F5F5F5;
 		border-bottom-style: solid;
 		border-bottom-width: 1px;

uni_modules/uni-datetime-picker/components/uni-datetime-picker/uni-datetime-picker.vue

@@ -27,8 +27,8 @@
 
 		<view v-show="pickerVisible" class="uni-date-mask--pc" @click="close"></view>
 
-		<view v-if="!isPhone" v-show="pickerVisible" ref="datePicker" class="uni-date-picker__container">
-			<view v-if="!isRange" class="uni-date-single--x" :style="pickerPositionStyle">
+		<view v-if="!isPhone" v-show="pickerVisible" ref="datePicker" class="uni-date-picker__container" :style="pickerPositionStyle">
+			<view v-if="!isRange" class="uni-date-single--x">
 				<view class="uni-popper__arrow"></view>
 
 				<view v-if="hasTime" class="uni-date-changed popup-x-header">
@@ -335,6 +335,9 @@
 				// todo
 				return this.isRange ? 653 : 301
 			},
+			datePopupHight(){
+				return 403
+			},
 
 			/**
 			 * for i18n
@@ -384,6 +387,11 @@
 			this.initI18nT()
 			this.platform()
 		},
+		beforeDestroy() {
+			if(!this.isPhone) {
+				document.body.removeChild(this.$refs.datePicker.$el);
+			}
+		},
 		methods: {
 			initI18nT() {
 				const vueI18n = initVueI18n(i18nMessages)
@@ -459,10 +467,12 @@
 					return
 				}
 				const {
-					windowWidth
+					windowWidth,
+					windowHeight
 				} = uni.getSystemInfoSync()
 				this.isPhone = windowWidth <= 1200
 				this.windowWidth = windowWidth
+				this.windowHeight = windowHeight
 			},
 			show() {
 				this.$emit("show")
@@ -479,11 +489,24 @@
 				this.pickerPositionStyle = {
 					top: '10px'
 				}
+				const {
+					windowHeight
+				} = uni.getSystemInfoSync()
 				const dateEditor = uni.createSelectorQuery().in(this).select(".uni-date-editor")
 				dateEditor.boundingClientRect(rect => {
 					if (this.windowWidth - rect.left < this.datePopupWidth) {
 						this.pickerPositionStyle.right = 0
 					}
+					let top = rect.top
+					this.pickerPositionStyle.left = rect.left + 'px'
+					if (windowHeight - rect.top < this.datePopupHight) {
+						// delete this.pickerPositionStyle.top
+						top = (windowHeight - rect.top)
+					}
+					if (top + this.datePopupHight > windowHeight) {
+						top = top - ((top + this.datePopupHight) - windowHeight)
+					}
+					this.pickerPositionStyle.top = top + 'px'
 				}).exec()
 				setTimeout(() => {
 					this.pickerVisible = !this.pickerVisible
@@ -504,7 +527,9 @@
 							}
 						}
 					}
-
+					if(!this.isPhone && this.isFirstShow) {
+						document.body.appendChild(this.$refs.datePicker.$el);
+					}
 				}, 50)
 			},
 			close() {
@@ -893,9 +918,9 @@
 	}
 
 	.uni-date__input {
-		height: 40px;
+		height: 30px;
 		width: 100%;
-		line-height: 40px;
+		line-height: 30px;
 		font-size: 14px;
 	}