样式开发

common/styles/global/components.scss

@@ -74,6 +74,51 @@ view{box-sizing: border-box;}
   background-position: $position;background-size: contain;background-repeat: no-repeat;
 }
 
+/***** 标题栏  *****/
+// 三个元素
+.phone-navBar-box{
+	display: flex;align-items: center;justify-content: space-between;background-color: #fff;
+	padding: calc(20rpx + var(--status-bar-height)) 20rpx 20rpx;box-sizing: border-box;position: relative;
+	.nav-bar-icon{
+		width: 24rpx;height: 38rpx;
+		background-image: url("@/static/images/common/nav-bar-jt.svg");@include ezy-no-repeat-cover();
+	}
+	.nav-bar-title{font-size: 36rpx;color: #333;}
+	// 考试数字
+	.nav-bar-other{
+		font-size: 30rpx;color: #fff;margin-right: 2%;
+		.key-note{color: #ffff01;}
+	}
+	// 文字按钮
+	.text-btn{font-size: 26rpx;color: #666;padding-top: 4rpx;box-sizing: border-box;}
+	// 图标
+	.nav-bar-icon-box{
+		.nav-bar-right-icon{font-size: 42rpx;color: #666;}
+		.nav-bar-right-icon + .nav-bar-right-icon{margin-left: 24rpx;}
+	}
+}
+// 两个元素 
+.icon-title-navBar-box{
+	background-color: #fff;box-sizing: border-box;
+	.icon-title-box{display: flex;align-items: center;justify-content: center;padding:10rpx 10rpx 20rpx;position: relative;}
+	.nav-bar-title{
+		font-size: 32rpx;height: 64rpx;line-height: 64rpx;color: #333;max-width: 70%;
+	}
+	.nav-bar-icon{
+		width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: 24rrpx;
+		background-image: url("@/static/images/common/nav-bar-jt.svg");@include ezy-no-repeat-cover();
+	}
+	.bar-ml10{margin-left: 10rpx;}
+	.nav-bar-btn{font-size: 24rpx;position: absolute;right: 20rpx;
+			line-height: 50rpx;border-radius: 8rpx;padding: 0 10rpx;}
+}
+
+// 仅一个返回按钮
+.phone-nav-bar-icon{width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: var(--status-bar-height);
+		background-image: url("@/static/images/common/nav-bar-jt.svg");@include ezy-no-repeat-cover();
+	}
+
+
 /***** 富文本处理  *****/
 @mixin ezy-rich-text() {
 	white-space: pre-wrap;text-align: justify;

common/styles/global/pages.scss

@@ -35,7 +35,60 @@
 			.remember-checkbox-group{font-size: 28rpx;}
 		}
 	}
-	
+
+// 首页
+.lli-index-page {
+		padding:0 24rpx;background: #FCFBFC;min-height: 100vh;
+
+		// banner
+		.index-imgbox {
+			text-align: center;width: 100%;
+			.index-banner-img {width: 702rpx;height: 242rpx;display: inline-block;border-radius: 4px;}
+		}
+
+		//meul-box
+		.index-meul-box {
+			.lli-grid-item {
+				flex: 1;
+				/* #ifndef APP-NVUE */
+				display: flex;
+				/* #endif */
+				flex-direction: column;align-items: center;justify-content: center;padding: 15px 0;
+			}
+
+			.grid-item-image {width: 99rpx;height: 113rpx;}
+
+			.grid-item-text {font-size: 24rpx;color: $uni-text-color;}
+
+			.grid-dot {position: absolute;top: 5px;right: 15px;}
+		}
+
+		// title-box
+		.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-sub-title {font-size: 24rpx;color: #9c9c9c;font-weight: normal;cursor: pointer;}
+		}
+
+		// card
+		.lli-card-box {width: 100%;display: flex;justify-content: space-between;flex-wrap: wrap;margin-bottom: 8px;cursor: pointer;}
+
+		.lli-card-item {
+			width: 49%;flex: unset;border-radius: 20rpx;background-color: #ffffff;
+			padding: 12rpx 12rpx 0!important;box-sizing: border-box;margin-bottom: 20rpx!important;
+			.lli-card-image {max-width: 100%;height: 180rpx;border-radius: 8rpx;}
+			.custom-cover {max-width: 100%;height: 180rpx;border-radius: 8rpx;overflow: hidden;position: relative;}
+			.cover-content {position: absolute;bottom: 0;left: 0;padding: 0 12rpx;
+			background: rgba(0, 0, 0, 0.29);color: #fff;font-size: 22rpx;border-radius: 0 12rpx 0 12rpx;}
+
+			.lli-card-name {font-size: 28rpx;line-height: 36rpx;color: #565656;margin: 20rpx 0;display: -webkit-box;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
+		}
+	}
+		
 // 我的
 .mobile-my-page{
 	width:100%;overflow: auto;background: #F3F5F7;padding-bottom: 135rpx;

components/custom-navbar/custom-navbar.vue

@@ -1,14 +1,14 @@
 <template>
-  <view class="custom-nav">
-	  <view v-if="showBackBtn" @click="handleBack">返回</view>
-    <!-- 状态栏填充（兼容刘海屏） -->
-    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
-    <!-- 标题区域 -->
-    <view class="nav-content">
-      <view class="nav-title" :style="{fontSize: titleSize + 'px', color: titleColor}">
-        {{ title }}
-      </view>
-    </view>
+  <view class="icon-title-navBar-box">
+	  <!-- 状态栏填充（兼容刘海屏） -->
+	  <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
+	  <view class="icon-title-box">
+		  <view class="nav-bar-icon" v-if="showBackBtn" @click="handleBack"></view>
+		  <!-- 标题区域 -->
+		  <view class="nav-bar-title" :style="{fontSize: titleSize + 'px', color: titleColor}">
+			{{ title }}
+		  </view>
+	  </view>
   </view>
 </template>
 

pages.json

@@ -9,14 +9,13 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "首页"
+				"navigationStyle": "custom"
 			}
 		},
 		{
 			"path" : "pages/exam/index",
-			"style" :
-			{
-				"navigationBarTitleText" : "考试"
+			"style": {
+				"navigationStyle": "custom"
 			}
 		},
 		{
@@ -84,9 +83,8 @@
 		},
 		{
 			"path" : "pages/exam/exam",
-			"style" : 
-			{
-				"navigationBarTitleText" : ""
+			"style": {
+				"navigationStyle": "custom"
 			}
 		},
 		{

pages/exam/exam.vue

@@ -1,10 +1,6 @@
 <template>
 	<view class="phone-kaoshi-page">
-		<!-- 导航区域 -->
-		<!-- <view class="icon-title-bjcolor-navBar-box">
-			<text class="nav-bar-title">{{data.ksName}}</text>
-		</view> -->
-		<customNavbarVue :show-back-btn="true" @back="handleBack"></customNavbarVue>
+		<customNavbarVue :title="data.ksName" :show-back-btn="true" @back="handleBack"></customNavbarVue>
 		<!-- 第一行 -->
 		<view class="kaoshi-page-title">
 			<view v-if="activeSt" class="title-types">{{dlName}}</view>

pages/index/index.vue

@@ -1,5 +1,6 @@
 <template>
 	<view class="lli-index-page">
+		<customNavbarVue title="首页"></customNavbarVue>
 		<!-- banner -->
 		<view class="index-imgbox">
 			<img :src="banners||defaultbanners" class="index-banner-img" />
@@ -64,6 +65,7 @@
 </template>
 
 <script setup>
+	import customNavbarVue from "@/components/custom-navbar/custom-navbar.vue";
 	import {
 		kaoShiApply,
 		getClientKaoshiInfo
@@ -282,143 +284,3 @@
 		})
 	}
 </script>
-
-<style lang="scss">
-	.lli-index-page {
-		padding: 24rpx;
-		background: #FCFBFC;
-		min-height: 100vh;
-
-		// banner
-		.index-imgbox {
-			text-align: center;
-			width: 100%;
-
-			.index-banner-img {
-				width: 702rpx;
-				height: 242rpx;
-				display: inline-block;
-				border-radius: 4px;
-			}
-		}
-
-		//meul-box
-		.index-meul-box {
-			.lli-grid-item {
-				flex: 1;
-				/* #ifndef APP-NVUE */
-				display: flex;
-				/* #endif */
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
-				padding: 15px 0;
-			}
-
-			.grid-item-image {
-				width: 99rpx;
-				height: 113rpx;
-			}
-
-			.grid-item-text {
-				font-size: 24rpx;
-				color: $uni-text-color;
-			}
-
-			.grid-dot {
-				position: absolute;
-				top: 5px;
-				right: 15px;
-			}
-		}
-
-		// title-box
-		.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-sub-title {
-				font-size: 24rpx;
-				color: #9c9c9c;
-				font-weight: normal;
-				cursor: pointer;
-			}
-		}
-
-		// card
-		.lli-card-box {
-			width: 100%;
-			display: flex;
-			justify-content: space-between;
-			flex-wrap: wrap;
-			margin-bottom: 8px;
-			cursor: pointer;
-		}
-
-		.lli-card-item {
-			width: 49%;
-			flex: unset;
-			border-radius: 20rpx;
-			background-color: #ffffff;
-			padding: 12rpx 12rpx 0!important;
-			box-sizing: border-box;
-			margin-bottom: 20rpx!important;
-
-			.lli-card-image {
-				max-width: 100%;
-				height: 180rpx;
-				border-radius: 8rpx;
-			}
-
-			.custom-cover {
-				max-width: 100%;
-				height: 180rpx;
-				border-radius: 8rpx;
-				overflow: hidden;
-				position: relative;
-			}
-
-			.cover-content {
-				position: absolute;
-				bottom: 0;
-				left: 0;
-				padding: 0 12rpx;
-				background: rgba(0, 0, 0, 0.29);
-				color: #fff;
-				font-size: 22rpx;
-				border-radius: 0 12rpx 0 12rpx;
-			}
-
-			.lli-card-name {
-				font-size: 28rpx;
-				line-height: 36rpx;
-				color: #565656;
-				margin: 20rpx 0;
-				display: -webkit-box;
-				-webkit-line-clamp: 2;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				-webkit-box-orient: vertical;
-			}
-		}
-	}
-</style>