样式修改

common/styles/global/components.scss

@@ -657,6 +657,16 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 		.segmented-control__item--button,.segmented-control__item--button--last{height: 62rpx;border: 0;border-width: 0!important;border-radius: 8rpx;}
 		.segmented-control__item--button--active .segmented-control__text{color: #fff!important;}
 	}*/
+.ezy-text-tab-box{
+	width: 100%;display: flex;justify-content: space-evenly;flex-shrink: 0;line-height: 1.4;
+	.text-item{
+		width: 25%;color: #333;font-size: 28rpx;text-align: center;
+		position: relative;padding: 12rpx 0;@include single-line-ellipsis}
+	.text-item.active{color: #068aea;}
+	.text-item.active::after{content: '';width: 70%;height: 4rpx;display: block;
+	background-color:#068aea;bottom: 0rpx;left:15%;position: absolute;border-radius: 8rpx;}
+}
+
 
 //视频
 .ezy-video-box{

common/styles/global/pages.scss

@@ -626,12 +626,27 @@
 .ezy-cjdc-xbb-page{
 	width: 100%;height: 100vh;display: flex;flex-direction: column;
 	.xbb-list-box{
-		// flex: 1;overflow-y: auto;
-		display: flex;flex-direction: column;padding-bottom: 32rpx;
+		display: flex;flex-direction: row;flex-wrap: wrap;align-content: flex-start;
+		padding: 32rpx 24rpx;box-sizing: border-box;flex: 1;overflow-y: auto;
+		    
 		.xbb-item-box{
-			
+			width: 48%;font-size: 28rpx;overflow: hidden;
+			background-color: #e4f5fd;border-radius: 16rpx;
+			display: flex;margin: 10rpx 1%;color: #333;
+			.xbb-item-text{flex: 1;text-align: center;padding: 24rpx 0;}
+			.arrow-icon{width: 50rpx;background-color: #ccecfb;position: relative;}
+			.arrow-icon::after{
+				content: '';width: 34rpx;height: 34rpx;@include ezy-no-repeat-cover;display: block;
+				background-image: url("@/static/images/common/jt-up-white-icon.svg");
+				position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(90deg);
+			}
+		}
+		.xbb-item-box:active{
+			background-color: #97dbfe;color: #fff;
+			.arrow-icon{background-color: #43bffd;}
 		}
 	}
+	.xbb-list-no-more{width: 100%;margin-top: 10rpx;}
 }
 
 // 学习大纲
@@ -2359,7 +2374,7 @@
 	.word-view-border{
 		flex: 1;position: relative;background-color: #fff;z-index: 1;margin: 32rpx 24rpx 24rpx;
 		border-radius: 16rpx;box-shadow: 0 0rpx 6rpx rgba(100, 159, 241, 0.3);
-		display: flex;flex-direction: column;
+		display: flex;flex-direction: column;overflow: hidden;
 	}
 	// 选择单词
 	.select-words-box{
@@ -2538,7 +2553,7 @@
 			content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;@include ezy-no-repeat-cover;
 			background-image: url("@/static/images/common/wordView/change-btn.png");z-index: 1;
 		}
-		.change-btn.active text{color: #0f67be;}
+		.change-btn.active text{color: #3d7efe;}
 		.change-btn.active::after{background-image: url("@/static/images/common/wordView/change-btn-a.png");transform: rotate(180deg);}
 		.change-btn:last-child::after{transform: rotate(180deg);}
 		.change-btn.active:last-child::after{transform: unset;}
@@ -2558,7 +2573,7 @@
 		display: flex;justify-content: center;margin-top: 64rpx;
 		.words-item{min-width: 90rpx;height: 120rpx;line-height: 120rpx;font-size: 80rpx;
 			text-align: center;box-sizing: border-box;padding: 0 6rpx;font-weight: bold;
-			border-radius: 8rpx;background-color: #b7e2f5;color: #015fb0;}
+			border-radius: 8rpx;background-color: #dcf7fe;color: #3c7fff;}
 		.words-item + .words-item{margin-left: 12rpx;}
 	}
 	.pin-small-words-box{
@@ -2585,7 +2600,7 @@
 	// 选择单词
 	.pin-words-change-box{
 		margin-bottom: 32rpx;
-		.words-change-item{line-height: 116rpx;border: 1rpx solid #2da8e7;border-bottom: 8rpx solid #41c5ff}
+		.words-change-item{line-height: 116rpx;border: 1rpx solid #a4e6fc;border-bottom: 8rpx solid #a4e6fc;}
 		.words-change-item.disabled{border: 1rpx solid #999;border-bottom: 8rpx solid #ccc;
 		color: #999;background-color: #f0f0f0;}
 	}
@@ -2638,20 +2653,20 @@
 	.xuan-body-box{flex: 1;overflow-y: auto;text-align: center;}
 	.show-words-box{
 		width: 100%;overflow: hidden;word-wrap: break-word;word-break: break-all;
-		color: #015fb0;font-weight: bold;font-size: 76rpx;text-align: center;margin: 64rpx auto 0;
+		color: #3e7fff;font-weight: bold;font-size: 76rpx;text-align: center;margin: 64rpx auto 0;
 		text-shadow:-1rpx -1rpx 0 #fff,1rpx -1rpx 0 #fff,-1rpx 1rpx 0 #fff,1rpx 1rpx 0 #fff;
 	}
 	.select-change-box{
 		flex-shrink: 0;
 		.select-item{
 			width: 600rpx;height: 96rpx;text-align: center;border-radius: 12rpx;font-size: 32rpx;
-			background-color: #fff;border-bottom: 6rpx solid #ddf3fb;line-height: 1.4;color: #333;
+			background-color: #fff;border: 1rpx solid #eef1f6;border-bottom: 6rpx solid #eef1f6;line-height: 1.4;color: #333;
 			display: flex;align-items: center;justify-content: center;margin: 12rpx auto;
 			box-sizing: border-box;padding: 0 10rpx;text-align: left;position: relative;
 			text{@include multi-line-ellipsis(2);}
 		}
 		.select-item.active{
-			background-color: #6bcdff;border-bottom: 6rpx solid #a7e9fd;color: #fff;
+			background-color: #6bcdff;border-color: #a7e9fd;color: #fff;
 		}
 		.select-error::after,.select-right::after{
 			content: '';width: 36rpx;height: 36rpx;display: block;@include ezy-no-repeat-cover;
@@ -2674,12 +2689,12 @@
 	// 答案
 	.words-answer-box{
 		min-width: 420rpx;max-width: 90%;height: 120rpx;line-height: 120rpx;margin: 64rpx auto 0;
-		background-color: #b7e2f5;color: #015fb0;font-size: 72rpx;display: inline-block;overflow: unset;
+		background-color: #dcf7fe;color: #3e7fff;font-size: 72rpx;display: inline-block;overflow: unset;
 		border-radius: 8rpx;padding: 0 10rpx;box-sizing: border-box;font-weight: bold;
-		.uni-input-placeholder.input-placeholder{color: #015fb0;font-size: 64rpx;}
+		.uni-input-placeholder.input-placeholder{color: #3e7fff;font-size: 64rpx;}
 	}
 	// 兼容
-	.words-answer-box::placeholder { color: #015fb0;font-size: 64rpx; }
+	.words-answer-box::placeholder { color: #3e7fff;font-size: 64rpx; }
 	// 回答正确 && 回答错误
 	.words-answer-error-box,.words-answer-right-box{position: relative;}
 	.words-answer-error-box::after,.words-answer-right-box::after{
@@ -2693,11 +2708,12 @@
 	.words-answer-right-box{color: #36c336;}
 	.words-answer-right-box::after{background-image: url("@/static/images/common/wordView/word-right-icon.png");}
 
-	.bei-body-box{flex: 1;overflow-y: auto;}
+	.bei-body-box{flex: 1;overflow-y: auto;margin-bottom: 434rpx;}
 
 	// 键盘
 	.words-keyboard-box{
-		background-color: #e5e8ee;box-sizing: border-box;padding: 24rpx 0;
+		position: absolute;bottom: 0;left: 0;right: 0;
+		background-color: #eef1f6;box-sizing: border-box;padding: 24rpx 0;
 		// position: absolute;bottom: -10rpx;left: -10rpx;right: -10rpx;
 		.keyboard-row{display: flex;justify-content: space-between;
 		box-sizing: border-box;padding: 0 32rpx;margin-bottom: 12rpx;}
@@ -2705,7 +2721,7 @@
 			width: 56rpx;height: 90rpx;line-height: 90rpx;text-align: center;
 			background-color: #fff;color:#000;border-radius: 6rpx;font-size: 46rpx;
 			border-bottom:6rpx solid #e2e2e2;box-sizing: border-box;}
-		.keyboard-button.active{background-color: #b7e2f5;color:#015fb0;border-bottom:6rpx solid #41c5ff;}
+		.keyboard-button.active{background-color: #dcf7fe;color:#3c7fff;border-bottom:6rpx solid #a4e6fc;}
 		.del-btn::after{
 			content: '';width: 46rpx;height: 46rpx;display: block;margin: 22rpx auto;
 		background-image: url("@/static/images/common/wordView/del-btn.svg");@include ezy-no-repeat-cover;}
@@ -2713,11 +2729,11 @@
 			width: 100%;height: 77rpx;line-height: 77rpx;
 			padding: 0 32rpx;display: flex;margin: 16rpx auto 0;
 		}
-		.big-btn{width: 120rpx;background-color: #fff;color:#000;margin-right: 6px;border-radius: 8rpx;}
-		.big-btn.active{color: #005ea1;}
+		.big-btn{width: 120rpx;background-color: #fff;border-bottom:6rpx solid #e2e2e2;color:#000;margin-right: 6px;border-radius: 8rpx;}
+		.big-btn.active{color: #2c9cfe;font-weight: bolder;}
 		.bei-confirm-btn{
-			background-color: transparent;color: #fff;
-			background-color: #4897d7;border-radius: 8rpx;flex: 1;
+			background-color: transparent;color: #fff;border-radius: 8rpx;flex: 1;
+			background-color: #2c9cfe;border-bottom:6rpx solid #0285fb;
 		}
 	}
 	@media (max-height: 800px) {

pages/chanpinXuanze/cp4/banben.vue

@@ -4,53 +4,54 @@
       <view class="nav-bar-icon" @click="handleBack"></view>
       <view class="nav-bar-title">选择版本-L6</view>
     </view>
+	<view class="ezy-page-body">
+		<view class="ezy-text-tab-box">
+		  <view class="text-item active" @click="data.isShangce = true">上册</view>
+		  <view class="text-item" @click="data.isShangce = false">下册</view>
+		</view>
+		<template v-if="data.isShangce">
+		  <template v-if="data.banbenList.length">
+			  <view class="xbb-list-box">
+				 <ezyActiveVue class="ezy-list-item-active xbb-item-box" v-for="item in data.banbenList" :key="item.id"
+					 @aclick="handleSelect(item)">
+					<text class="xbb-item-text">{{item.name}}</text>
+					<icon class="arrow-icon"></icon>
+				 </ezyActiveVue> 
+				 <view class="ezy-no-more xbb-list-no-more">没有更多</view>
+			  </view>
+		  </template>
+		  <template v-else>
+			<view class="shiti-frame-box">
+			  <view class="ezy-no-sj">
+				<icon></icon>
+				<text>暂无数据</text>
+			  </view>
+			</view>
+		  </template>
+		</template>
 
-    <view>
-      <view @click="data.isShangce = true">上册</view>
-      <view @click="data.isShangce = false">下册</view>
-    </view>
-
-    <view v-if="data.isShangce" class="ezy-page-body">
-      <template v-if="data.banbenList.length">
-		  <view class="xbb-list-box">
-			 <ezyActiveVue class="ezy-list-item-active xbb-item-box" v-for="item in data.banbenList" :key="item.id"
-			     @aclick="handleSelect(item)">
-			 	<text class="book-text">{{item.name}}</text>
-			 	<icon class="arrow-icon"></icon>
-			 </ezyActiveVue> 
-		  </view>
-		<view class="ezy-no-more">没有更多</view>
-      </template>
-      <template v-else>
-        <view class="shiti-frame-box">
-          <view class="ezy-no-sj">
-            <icon></icon>
-            <text>暂无数据</text>
-          </view>
-        </view>
-      </template>
-    </view>
-
-    <view v-else class="ezy-page-body">
-      <template v-if="data.banbenList2.length">
-        <view class="xbb-list-box">
-          <ezyActiveVue class="ezy-list-item-active xbb-item-box" v-for="item in data.banbenList" :key="item.id"
-                        @aclick="handleSelect(item)">
-            <text class="book-text">{{item.name}}</text>
-            <icon class="arrow-icon"></icon>
-          </ezyActiveVue>
-        </view>
-        <view class="ezy-no-more">没有更多</view>
-      </template>
-      <template v-else>
-        <view class="shiti-frame-box">
-          <view class="ezy-no-sj">
-            <icon></icon>
-            <text>暂无数据</text>
-          </view>
-        </view>
-      </template>
-    </view>
+		<template v-else>
+		  <template v-if="data.banbenList2.length">
+			<view class="xbb-list-box">
+			  <ezyActiveVue class="ezy-list-item-active xbb-item-box" v-for="item in data.banbenList" :key="item.id"
+							@aclick="handleSelect(item)">
+				<text class="xbb-item-text">{{item.name}}</text>
+				<icon class="arrow-icon"></icon>
+			  </ezyActiveVue>
+			  <view class="ezy-no-more xbb-list-no-more">没有更多</view>
+			</view>
+			
+		  </template>
+		  <template v-else>
+			<view class="shiti-frame-box">
+			  <view class="ezy-no-sj">
+				<icon></icon>
+				<text>暂无数据</text>
+			  </view>
+			</view>
+		  </template>
+		</template>
+	</view>
   </view>
 </template>