样式测试

common/styles/global/components.scss

@@ -12,12 +12,24 @@ view{box-sizing: border-box;}
 .ezy-status-bar{height: var(--status-bar-height);width: 100%;background-color: red;}
 
 /***** 页面高度 *****/
+/*  #ifdef  H5  */
 //标题栏
 $titleBar-page: calc(100vh - var(--status-bar-height));
 //tabBar
-$titleBar-page: calc(100vh - 50px);
+$titleBar-page: calc(100vh - var(--window-bottom));
 //标题栏 + tabBar
-$titleBar-tabBar-page: calc(100vh - var(--status-bar-height) - 50px);
+$titleBar-tabBar-page: calc(100vh - var(--status-bar-height) - var(--window-bottom));
+/*  #endif  */
+
+/*  #ifdef  APP-PLUS  */
+//标题栏
+$titleBar-page: calc(100vh - var(--status-bar-height));
+//tabBar
+$titleBar-page: 100vh;
+//标题栏 + tabBar
+$titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
+/*  #endif  */
+
 
 /***** 模拟标题栏 *****/
 .ezy-title-bar {

common/styles/global/pages.scss

@@ -86,21 +86,18 @@
 		}
 	}
 	
-	.lli-develop-expect-page{
-		 display: flex;  /* 开启flex布局 */
-		    flex-direction: column; /* 子元素在垂直方向上堆叠 */
-		    justify-content: space-between; /* 子元素在垂直方向上分散对齐 */
-		    align-items: center; /* 子元素在水平方向上居中 */
-		     /* 高度设置为100%，使其充满整个屏幕 */
-			background-color: blue;
-			position: relative;
-			height:$titleBar-tabBar-page;
-		text{
-			background-color: antiquewhite;width: 100%;text-align: center;display: block;
+.lli-develop-expect-page{
+	display: flex;flex-direction: column;justify-content: space-between;align-items: center;
+	background-color: blue;position: relative;height:$titleBar-tabBar-page;
+		.page-content{
+			background-color: #9ed5cf;width: 100%;text-align: center;display: block;
 			margin-top: 44px;flex: 1;
-			// bottom: calc(var(--window-bottom) + 10px);
-			}
-			.bottom-word{
-				position: absolute;bottom: 0;margin-top: 0;
+			span{
+				font-size: 24px;padding: 20px 0;display: block;font-weight: 900;color: #09539a; 
+				-webkit-text-stroke: 1rpx #fff; /* 文字描边（仅webkit内核浏览器支持） */
+				text-stroke: 1rpx #fff; /* 未来可能的标准属性，目前支持有限 */
+				text-shadow: 4px 4px 4px rgba(110, 229, 249, 0.5); /* 文字阴影 */
 			}
+		}
+		.bottom-word{position: absolute;bottom: 0;margin-top: 0;}
 	}

pages/score/index.vue

@@ -6,9 +6,9 @@
 		    <!-- 导航栏内容 -->
 		    <view class="title">页面标题</view>
 		  </view>
-		  <text>开发中，敬请期侍！</text>
+		  <text class="page-content">开发中，敬请期侍！</text>
 		
-		<text class="bottom-word">底部文字测试！</text>
+		<view class="bottom-word">底部文字测试！</view>
 	</view>
 </template>