样式修改

common/styles/global/components.scss

@@ -93,15 +93,25 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 // 两个元素
 .icon-title-navBar-box{
 	display: flex;align-items: center;justify-content: center;
-	padding: 0 20rpx 20rpx;box-sizing: border-box;position: relative;
+	padding: calc(36rpx + var(--status-bar-height)) 20rpx 36rpx;box-sizing: border-box;position: relative;
+	
 	.nav-bar-title{
-		font-size: 36rpx;height: 63rpx;line-height: 63rpx;color: #fff;max-width: 70%;
+		font-size: 36rpx;height: 63rpx;line-height: 63rpx;color: #fff;
+		max-width: 70%;position: relative;z-index: 1;
 	}
 	.nav-bar-icon{
-		width: 24rpx;height: 38rpx;position: absolute;left: 24rpx;top: 12rpx;
+		width: 100rpx;height: 100rpx;display: flex;align-items: center;
+		position: absolute;left: 0;top: calc(14rpx + var(--status-bar-height));z-index: 1;
+	}
+	.nav-bar-icon::before{
+		width: 24rpx;height: 38rpx;content: '';display: block;margin-left: 24rpx;
 		background-image: url("@/static/images/common/navBar-return-btn.png");@include ezy-no-repeat-cover();
 	}
 }
+.icon-title-navBar-box::before{
+	width: 100%;height: 356rpx;content: '';display: block;position: absolute;z-index: 0;top: 0;left: 0;
+	background-image: url("@/static/images/common/page-header-bj.png");@include ezy-no-repeat-cover(top);
+}
 // 仅一个返回按钮
 .ezy-nav-bar-icon{width: 72rpx;height: 63rpx;position: absolute;left: 0;top: var(--status-bar-height);}
 .ezy-nav-bar-icon::after{

pages/chanpinXuanze/index.vue

@@ -1,22 +1,24 @@
 <template>
 	<!-- 返回区域 -->
-		<view>
-			<!-- <view @click="handleBack"></view> -->
-			<view>选课</view>
+		<view class="icon-title-navBar-box">
+			<!-- <view @click="handleBack" class="nav-bar-icon"></view> -->
+			<text class="nav-bar-title">选课</text>
 		</view>
-		<!-- 头部区域 -->
-		<view>
-			<view v-for="item in data.list" :key="item.value" :class="{active: item.value == data.chanpinActiveSelect}" @click="handleSelectChanpin">{{item.name}}</view>
-		</view>
-		<!-- 英语列表 -->
-		<view class="list yingyu" v-if="data.chanpinActiveSelect == 1">
-			
-		</view>
-		<!-- 数学列表 -->
-		<shuxueListVue class="list shuxue" v-if="data.chanpinActiveSelect == 2" :list="data.shuxueList"></shuxueListVue>
-		<!-- 语文列表 -->
-		<view class="list yuwen" v-if="data.chanpinActiveSelect == 3">
-			
+		<view style="position: relative;background-color: #fff;z-index: 1;">
+			<!-- 头部区域 -->
+			<view >
+				<view v-for="item in data.list" :key="item.value" :class="{active: item.value == data.chanpinActiveSelect}" @click="handleSelectChanpin">{{item.name}}</view>
+			</view>
+			<!-- 英语列表 -->
+			<view class="list yingyu" v-if="data.chanpinActiveSelect == 1">
+				
+			</view>
+			<!-- 数学列表 -->
+			<shuxueListVue class="list shuxue" v-if="data.chanpinActiveSelect == 2" :list="data.shuxueList"></shuxueListVue>
+			<!-- 语文列表 -->
+			<view class="list yuwen" v-if="data.chanpinActiveSelect == 3">
+				
+			</view>
 		</view>
 		
 		<CustomTabBar :currentTabNumber="0"></CustomTabBar>