样式修改

common/styles/global/pages.scss

@@ -1753,4 +1753,36 @@
 			background-image: url("@/static/images/common/jt-right-black.svg");}
 		}
 	}
-}
+}
+
+// 选择版本
+.select-version-page{
+	width: 100%;height: 100vh;background-color: #00c5fe;position: relative;
+	padding-top:var(--status-bar-height);display: flex;flex-direction: column;
+	@include ezy-no-repeat-cover(bottom);background-image: url("@/static/images/common/ezy-page-bj.png");
+	.ezy-border-body{
+		width: 94%;height: 90vh;margin: 3% 3%;display: flex;flex-direction: column;
+		background-color: rgba(255, 255, 255, 0.6);border-radius:8rpx;}
+	.tab-head-box{
+		height: 82rpx!important;display: flex;flex-shrink: 0;
+		background-color: rgba(255, 255, 255, 0.6);z-index: 3;margin: 20rpx 20rpx 0;
+		box-sizing: border-box;padding: 10rpx 12rpx;border-radius: 8rpx;
+	}
+	.tab-item {
+		width: 50%;height: 62rpx;line-height: 62rpx;
+		text-align: center;font-size: 28rpx;color: #333;
+	}
+	.tab-item.active{background-color: rgb(58, 127, 233);border-color: rgb(58, 127, 233);color: #fff;border-radius: 8rpx;}
+	.select-version-body{flex: 1;overflow-y: auto;}
+	.version-content-box{
+		display: flex;flex-wrap: wrap;
+		.version-item{width: 33.33%;margin: 24rpx 0;}
+	}
+	.select-version-line{width: 90%;height: 4rpx;border-top: 4rpx dashed #7cbeee;margin: 16rpx auto;}
+	.select-version-confirm-btn{
+		width: 644rpx;height: 108rpx;background-color: transparent;flex-shrink: 0;
+		background-image: url("@/static/images/grade/confirm-btn.png");@include ezy-no-repeat-cover;
+	}
+	.select-version-confirm-btn:after{display: none;}
+}
+

pages/selectVersion/selectVersion.vue

@@ -1,31 +1,28 @@
 <template>
-	<view class="grades-terms-page">
+	<view class="select-version-page">
 		<view class="icon-title-navBar-box">
-			<!-- 返回按钮↓ -->
-			<view class="nav-bar-icon" @click="handleBack"></view>
+			<view @click="handleBack" class="nav-bar-icon"></view>
+			<text class="nav-bar-title">请选择教材</text>
 		</view>
-		<view class="grade-item-box">
-			<view :key="item.id" @click="handleTopBottom(item)" v-for="item in data.allList"
-				:class="['grade-item',{active: item.id == data.shangxiaId}]">{{item.lable}}</view>
-		</view>
-		<scroll-view scroll-y="true" class="subject-body" :scroll-into-view="data.scrollTop">
-			<view class="subject-content-box">
-				<!-- 产品 -->
-				<view v-for="item in list" :key="item.id" :id="`s_${item.id}`" @click="handleSelectVersion(item)"
-					:class="[
-						    'subject-item',
-						    item.typeId === 1 && 'subject-jstx-item',
-						    {
-						      'active': item.id == data.shangxiaVersionId
-						    }
-						  ]">
-					<img :src="item.cover" class="subject-item-img" />
-					<view class="subject-item-text"><text>{{item.lable}}</text></view>
+		<view class="ezy-tab-border">
+			<view class="ezy-border-body">
+				<view class="tab-head-box">
+					<view :key="item.id" @click="handleTopBottom(item)" v-for="item in data.allList"
+						:class="['tab-item',{active: item.id == data.shangxiaId}]">{{item.lable}}</view>
 				</view>
+				<scroll-view scroll-y="true" class="select-version-body" :scroll-into-view="data.scrollTop">
+					<view class="version-content-box">
+						<!-- 产品 -->
+						<view v-for="item in list" :key="item.id" :id="`s_${item.id}`" @click="handleSelectVersion(item)"
+							:class="[ 'version-item', {'active': item.id == data.shangxiaVersionId} ]">
+							<view>{{item.lable}}</view>
+						</view>
+					</view>
+				</scroll-view>
+				<view class="select-version-line"></view>
+				<button class="select-version-confirm-btn" @click="handleConfirm"></button>
 			</view>
-		</scroll-view>
-		<view class="grade-line"></view>
-		<button class="grade-confirm-btn" @click="handleConfirm"></button>
+		</view>
 	</view>
 </template>