changetags

src/pages/video.vue

@@ -1,5 +1,5 @@
 <template>
-	<main>
+	<main v-if="finishloading">
 
 
 		<!-- 视频容器 -->
@@ -87,6 +87,10 @@
 	<!-- Findmore -->
 	<!-- <Findmore /> -->
 
+	<view v-else class="loading-container">
+		<text>页面加载中...</text>
+	</view>
+
 </template>
 
 <script setup>
@@ -104,6 +108,9 @@ const formatDate = common.formatDate
 
 const videoData = reactive({})
 
+// 资源加载状态
+const finishloading = ref(false)
+
 // 折叠展开状态
 const isExpanded = ref(false)
 // const videoRef = ref(null)
@@ -268,6 +275,10 @@ onLoad(() => {
 					data.likesum = data.likeCount || 0
 					data.commentsum = data.commentCount || 0
 					data.sharesum = data.shareCount || 0
+					// 标记资源加载完成
+					finishloading.value = true
+
+
 
 					// 最后用data覆盖整个videoData
 					Object.assign(videoData, data)
@@ -304,9 +315,10 @@ onLoad(() => {
 main {
 	display: flex;
 	flex-direction: column;
-	position: relative;
+	/* position: relative; */
 	max-width: 430px;
-	max-height: 980px;
+	height: 100vh;
+	/* max-height: 980px; */
 	margin: 0 auto;
 }
 
@@ -320,8 +332,9 @@ main {
 	position: relative;
 	width: 100%;
 	max-width: 430px;
-	height: 100vh;
-	max-height: 980px;
+	height: 100%;
+	/* height: 100vh; */
+	/* max-height: 980px; */
 	flex-shrink: 0;
 	margin: 0 auto;
 	display: flex;
@@ -330,9 +343,9 @@ main {
 
 video {
 	width: 100%;
-	height: 100%;
+	/* height: 100%; */
 	min-height: 680px;
-	object-fit: cover;
+	object-fit: contain;
 	display: flex;
 	flex-direction: column;
 	margin: 0 auto;
@@ -572,4 +585,11 @@ video {
 .uni-video-cover-play-button::after {
 	content: '\ea24';
 }
+
+.loading-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100vh;
+}
 </style>