common/styles/global/components.scss

@@ -778,7 +778,7 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 
 // 单词列表item
 .word-list-item{
-		display: flex;margin-bottom: 24rpx;
+		display: flex;margin-bottom: 24rpx;box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
 		background-color: #fff;border-radius:14rpx;overflow: hidden;
 		.item-word{
 			width: 43%;margin: 16rpx 0 0 16rpx;line-height: 1.4;flex-shrink: 0;
@@ -802,7 +802,7 @@ $titleBar-tabBar-page: calc(100vh - var(--status-bar-height));
 		}
 	}
 .word-list-item.active{
-	background-color: #edf9ff;
+	background-color: #edf9ff;box-shadow: 0 2rpx 8rpx rgba(6, 138, 234, 0.2);
 	.item-arrow{
 		background-color: #cdecfb;
 		icon{background-image: url("@/static/images/common/jt-up-white-icon.svg");transform: rotate(90deg);}

common/styles/global/pages.scss

@@ -2311,25 +2311,33 @@
 
 // 单词列表页
 .word-list-page{
-	width: 100%;height: 100vh;background-color: #00c5fe;position: relative;
+	width: 100%;height: 100vh;position: relative;
 	padding-top:var(--status-bar-height);display: flex;flex-direction: column;
-	@include ezy-no-repeat-cover(bottom);
-	.ezy-border-body{
-		width: 94%;height: calc(100vh - 230rpx - var(--status-bar-height));margin: 3% 3%;display: flex;flex-direction: column;
-		background-color: rgba(255, 255, 255, 0.6);border-radius:0 0 8rpx 8rpx;}
+	.word-body-box{padding: 42rpx 0 0;}
 	.word-list-swiper-box{
-		height: calc(100vh - 256rpx - var(--status-bar-height));overflow-y: auto;
+		height: calc(100vh - 230rpx - var(--status-bar-height));overflow-y: auto;
 		.word-list-swiper-item{display: flex;flex-direction: column;}
 	}
-	.word-title-box{
-		display: flex;flex-shrink: 0;width: 100%;overflow:hidden ;
-		line-height: 1.4;box-sizing: border-box;border-bottom: 1rpx dashed #068aea;
-		.title-item{
-			width: 25%;color: #068aea;font-size: 28rpx;text-align: center;
-			position: relative;padding: 12rpx 0;@include single-line-ellipsis}
-		.title-item.active{font-weight: bold;}
-		.title-item.active::after{content: '';width: 70%;height: 8rpx;display: block;
-		background-color:#068aea;bottom: 0rpx;left:15%;position: absolute;border-radius: 8rpx;}
+	.word-tab-box{
+		display: flex;align-items: center;flex-shrink: 0;width: 100%;overflow:hidden;
+		box-sizing: border-box;border-bottom: 1rpx dashed #068aea;padding: 0 0 16rpx;
+		.tab-item-list{flex: 1;display: flex;flex-wrap: nowrap;flex-direction: row;overflow-x: auto;margin: 0 4rpx;}
+		// @include single-line-ellipsis
+		.tab-item{
+			min-width: 148rpx;margin: 10rpx 4rpx;border-radius: 36rpx;
+			border: 1rpx solid #ddd;font-size: 28rpx;text-align: center;
+			position: relative;padding: 16rpx 0;color: #333;line-height: 1;
+			box-shadow: 0 2rpx 8rpx transparent;}
+		.word-jt{width: 50rpx;height: 80rpx;position: relative;flex-shrink: 0;}
+		.word-jt::before{content: '';width:32rpx;height: 32rpx;@include ezy-no-repeat-contain;
+		display:block;background-image: url("@/static/images/common/xbb-item-jt.png");
+		position: absolute;top: 24rpx;
+		}
+		.word-jt.disabled::before{background-image: url("@/static/images/common/xbb-item-jt-white.png");}
+		.jt-left::before{left: 12rpx;transform: rotate(180deg);}
+		.jt-right::before{right: 12rpx;}
+		.tab-item.active{font-weight: bold;background-color: #409eff;border: 1rpx solid #409eff;
+		color: #fff;box-shadow: 0 4rpx 8rpx rgba(6, 138, 234, 0.5);}
 	}
 	.word-list-body{flex: 1;overflow-y: auto;box-sizing: border-box;padding: 0 24rpx;}
 	.no-word-box{font-size: 28rpx;color: #666;flex: 1;display: flex;align-items: center;justify-content: center;}

pages/chaojidanci/wordList/wordList.vue

@@ -4,31 +4,35 @@
       <view @click="goBack" class="nav-bar-icon"></view>
       <text class="nav-bar-title">{{ listData.title || "" }}</text>
     </view>
-    <view class="ezy-tab-border">
+    <view class="ezy-page-body word-body-box">
       <view
-        class="word-title-box"
+        class="word-tab-box"
         v-if="listData.danyuanNumberList && listData.danyuanNumberList.length > 0"
       >
-        <!-- @click="handleTitleClick(item)"-->
-        <view
-          :id="'item-' + item.danyuanId"
-          class="title-item"
-          v-for="(item, index) in listData.danyuanNumberList"
-          :key="item.danyuanId"
-          :class="{ active: listData.activeIndex == index }"
-          v-show="
-            isTargetInSameGroup(
-              listData.danyuanNumberList,
-              listData.danyuanNumberList[listData.activeIndex],
-              item.danyuanId,
-            )
-          "
-        >
-          Unit{{ item.number }}</view
-        >
+	  <!-- disabled-->
+		<icon class="word-jt jt-left"/>
+		<view class="tab-item-list">
+			<!-- active -->
+			<ezyActiveVue
+			  :id="'item-' + item.danyuanId"
+			  class="ezy-btn-active tab-item"
+			  v-for="(item, index) in listData.danyuanNumberList"
+			  :key="item.danyuanId"
+			  :class="{ active: listData.activeIndex == index }"
+			  v-show="
+			    isTargetInSameGroup(
+			      listData.danyuanNumberList,
+			      listData.danyuanNumberList[listData.activeIndex],
+			      item.danyuanId,
+			    )
+			  "
+			>
+			  Unit{{ item.number }}</ezyActiveVue>
+		</view>
+		<!-- disabled-->
+		<icon class="word-jt jt-right"/>
       </view>
 
-      <view class="ezy-border-body">
         <swiper
           class="word-list-swiper-box"
           :indicator-dots="false"
@@ -98,7 +102,6 @@
             <view class="no-word-box" v-else> 暂无单词 </view>
           </swiper-item>
         </swiper>
-      </view>
     </view>
 	<tip-small-dialog ref="goPayDialogRef" @confirm-btn="goPayPage" :content="tipContent"></tip-small-dialog>
   </view>