样式测试

common/styles/global/components.scss

@@ -1,14 +1,28 @@
 /******************** 这里放组件样式 ********************/
 	
-/***** 项目中组件 *****/
-// view
+/***** view *****/
 view{box-sizing: border-box;}
 
-// 对齐方式
-.lli-tl{text-align: left;}
-.lli-tc{text-align: center;}
-.lli-tr{text-align: right;}
-
+/***** 对齐方式 *****/
+.ezy-tl{text-align: left;}
+.ezy-tc{text-align: center;}
+.ezy-tr{text-align: right;}
 
+/***** 状态栏 *****/
+.ezy-status-bar{height: var(--status-bar-height);width: 100%;background-color: red;}
 
+/***** 页面高度 *****/
+//标题栏
+$titleBar-page: calc(100vh - var(--status-bar-height));
+//tabBar
+$titleBar-page: calc(100vh - 50px);
+//标题栏 + tabBar
+$titleBar-tabBar-page: calc(100vh - var(--status-bar-height) - 50px);
 
+/***** 模拟标题栏 *****/
+.ezy-title-bar {
+	height: calc(44px + env(safe-area-inset-top));
+    position: fixed;top: var(--status-bar-height);left: var(--window-left);right: var(--window-right);
+    background-color: rgb(248, 248, 248);color: rgb(0, 0, 0);box-sizing: border-box;
+	display: flex;align-items: center;justify-content: center;overflow: hidden;z-index: 998;
+  }

common/styles/global/pages.scss

@@ -1,4 +1,5 @@
 /***** 这里放页面样式 *****/
+// 登录页
 .mobile-login-page {
 		width: 100%;
 		height: 100%;
@@ -10,7 +11,7 @@
 		.login-top {
 			height: 540rpx;
 			background-size: cover;
-			background-image: url("../static/images/login/login-bj-sj.png");
+			background-image: url("@/static/images/login/login-bj-sj.png");
 			// logo
 
 		}
@@ -83,4 +84,23 @@
 
 			}
 		}
+	}
+	
+	.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;
+			margin-top: 44px;flex: 1;
+			// bottom: calc(var(--window-bottom) + 10px);
+			}
+			.bottom-word{
+				position: absolute;bottom: 0;margin-top: 0;
+			}
 	}

pages.json

@@ -44,7 +44,7 @@
 			"path" : "pages/score/index",
 			"style" :
 			{
-				"navigationBarTitleText" : "成绩"
+				  "navigationStyle": "custom"
 			}
 		}
 	],

pages/index/index.vue

@@ -202,7 +202,7 @@
 	.lli-index-title-box{
 		margin: 44rpx 0 32rpx;display: flex;justify-content: space-between;align-items: center;
 		.index-title{font-size: 32rpx;color: #333;font-weight: 800;display: inline-flex;align-items: center;}
-		.index-title:before{content:'';width: 3px;height: 30rpx;background: $uni-primary;margin-right: 8px;display: block;}
+		.index-title:before{content:'';width: 3px;height: 30rpx;margin-right: 8px;display: block;}
 		.index-sub-title{font-size: 24rpx;color: #9c9c9c;font-weight: normal;cursor: pointer;}
 	}
 	

pages/score/index.vue

@@ -1,6 +1,14 @@
 <template>
 	<view class="lli-develop-expect-page">
-		开发中，敬请期侍！
+		<!-- 这里状态栏 -->
+		<view class="ezy-status-bar"></view>
+		<view class="ezy-title-bar">
+		    <!-- 导航栏内容 -->
+		    <view class="title">页面标题</view>
+		  </view>
+		  <text>开发中，敬请期侍！</text>
+		
+		<text class="bottom-word">底部文字测试！</text>
 	</view>
 </template>
 
@@ -18,5 +26,19 @@
 </script>
 
 <style>
-
+  .ezy-title-bar {
+    position: fixed;
+    top: var(--status-bar-height);
+    left: var(--window-left);
+    right: var(--window-right);
+    height: calc(44px + env(safe-area-inset-top));
+    background-color: rgb(248, 248, 248);
+    color: rgb(0, 0, 0);
+	box-sizing: border-box;
+	z-index: 998;
+	display: flex;
+	overflow: hidden;
+	align-items: center;
+	justify-content: center;
+  }
 </style>