数学岛改版

common/styles/global/pages.scss

@@ -236,65 +236,84 @@
 }
 	
 //地图页	
-.ezy-study-page{
+.ezy-shuxue-study-page{
 	width:100%;height: 100vh;min-height:1400rpx;background-color: #43c1f6;display: flex;flex-direction: column;
-	background-image: url("@/static/images/study/study-page-bj.png");@include ezy-no-repeat-cover(top);
+	background-image: url("@/static/images/study/shuxue/study-shuxue-bj.png");@include ezy-no-repeat-cover(top);
 	box-sizing: border-box;padding-top:var(--status-bar-height);justify-content: center;position: relative;
 	.study-school-year{
-		width: 237rpx;height: 73rpx;line-height:68rpx;background-image: url("@/static/images/study/school-year-bj.png");
-		color: #fff;@include ezy-no-repeat-cover;padding-left: 75rpx;font-size: 28rpx;font-weight: 600;
+		width: 285rpx;height: 69rpx;line-height:65rpx;background-image: url("@/static/images/study/shuxue/school-year-bj.png");
+		color: #fff;@include ezy-no-repeat-cover;padding-left: 78rpx;font-size: 30rpx;font-weight: 600;
 		position: absolute;left: 20rpx;top:var(--status-bar-height);
 	}
 	.ezy-study-wrap{
-		width:750rpx;height:1394rpx;background-image: url("@/static/images/study/study-wrap-bj.gif");
+		width:750rpx;height:1394rpx;background-image: url("@/static/images/study/shuxue/study-wrap-bj.gif");
 		@include ezy-no-repeat-cover;position: relative;margin: 0 auto;
 	}
 	.chapter-box{
 		width: 150rpx;text-align: center;font-weight: 800;color: #5c1a11;
-		font-size: 32rpx;position: absolute;top:136rpx;left:330rpx;
+		font-size: 32rpx;position: absolute;top:122rpx;left:330rpx;
 	}
 	.chapter-title-box{
-		width: 268rpx;text-align: center;font-weight: 800;color: #fbb030;@include single-line-ellipsis;
-		font-size: 32rpx;position: absolute;top:190rpx;left:270rpx;
+		width: 325rpx;height: 80rpx;text-align: center;font-weight: 800;color: #fbb030;
+		position: absolute;top:170rpx;left:240rpx;white-space: pre-wrap;
 	}
-	.brand-item{box-sizing: border-box;font-size: 28rpx;color: #fff;text-align: center;font-weight: 600;position: relative;}
-	.brand-content{width: 85%;margin: 0 auto;@include single-line-ellipsis;}
-	.brand-icon,.brand-lock{
+	.chapter-small-title-box{line-height: 2;font-size: 38rpx;}
+	.chapter-middle-title-box{line-height: 2.2;font-size: 34rpx;}
+	.chapter-big-title-box{line-height: 1.2;font-size: 32rpx;}
+	
+	// brand-content
+	.brand-content{margin: 0 auto;@include single-line-ellipsis;}
+	.brand-icon,.brand-lock,.brand-finish-icon{
 		width: 70rpx;height: 70rpx;@include ezy-no-repeat-cover;
 		position: absolute;top: -30rpx;left: 50%;transform: translateX(-50%);}
 	.brand-icon{
 		font-size: 36rpx;font-weight: 600;color: #ff6501;line-height: 70rpx;
-		background-image: url("@/static/images/catalog/number-bj.png");
+		background-image: url("@/static/images/study/shuxue/number-bj.png");
 		}
-	.brand-lock{background-image: url("@/static/images/catalog/lock-bj.png");
-	display: flex;justify-content: center;}
+	.brand-lock{background-image: url("@/static/images/study/shuxue/lock-bj.png");display: flex;justify-content: center;}
 	.brand-lock::before{
 		content: '';width: 38rpx;height: 45rpx;display: block;@include ezy-no-repeat-cover;
-		background-image: url("@/static/images/catalog/lock-img.png");margin-top: 10rpx;
-	}
-	.brand-item:nth-child(1){
-		width: 298rpx;height: 144rpx;@include ezy-no-repeat-cover;
-		padding: 40rpx 0 10rpx;position: absolute;top:320rpx;right:60rpx;
-		background-image: url("@/static/images/catalog/chang-pai-disabled.png");
-		
-	}
-	.brand-item.brand-active:nth-child(1){background-image: url("@/static/images/catalog/chang-pai-active.png");}
-	.brand-item:nth-child(2){
-		width: 231rpx;height: 147rpx;@include ezy-no-repeat-cover;
-		padding: 40rpx 0 10rpx;position: absolute;top:540rpx;left:75rpx;
-		background-image: url("@/static/images/catalog/duan-pai-disabled.png");
+		background-image: url("@/static/images/study/shuxue/lock-img.png");margin-top: 10rpx;
 	}
-	.brand-item:nth-child(3){
-		width: 298rpx;height: 144rpx;@include ezy-no-repeat-cover;
-		padding: 40rpx 0 10rpx;position: absolute;top:692rpx;right:90rpx;
-		background-image: url("@/static/images/catalog/chang-pai-disabled.png");
-	}
-	.brand-item:nth-child(4){
-		width: 185rpx;height: 121rpx;@include ezy-no-repeat-cover;
-		padding: 16rpx 10rpx 10rpx 10rpx;position: absolute;top:1112rpx;right:140rpx;
-		background-image: url("@/static/images/catalog/ceshi-pai.png");
-		.brand-lock{left: 0;top: -30rpx;}
+	.brand-finish-icon{background-image: url("@/static/images/study/dao-finish-icon.png");}
+	
+	// animal
+	.animal-img{width:48rpx;height: 68rpx;@include ezy-no-repeat-cover;position: absolute;left: 28%;top: 48%;}
+	.dan-img{background-image: url("@/static/images/study/animal-img1.png");}
+	.xiao-e-img{background-image: url("@/static/images/study/animal-img2.png");}
+	.zhong-e-img{background-image: url("@/static/images/study/animal-img3.png");}
+	.da-e-img{background-image: url("@/static/images/study/animal-img4.png");}
+	
+	// brand-item
+	.brand-item{box-sizing: border-box;font-size: 24rpx;color: #fff;text-align: center;
+	font-weight: 600;position: relative;position: absolute;@include ezy-no-repeat-cover;}
+	.small-brand-item{width: 231rpx;height: 147rpx;padding: 40rpx 0 10rpx;
+		background-image: url("@/static/images/study/shuxue/duan-pai-disabled.png");
+		.brand-content{width: 90%;}
+	}
+	.small-brand-item.brand-active{background-image: url("@/static/images/study/shuxue/duan-pai-active.png");}
+	.big-brand-item{
+		width: 307.69rpx;height: 141.35rpx;padding: 40rpx 0 10rpx;
+		background-image: url("@/static/images/study/shuxue/chang-pai-disabled.png");
+		.brand-content{width: 94%;}
+	}
+	.big-brand-item.brand-active{background-image: url("@/static/images/study/shuxue/chang-pai-active.png");}
+	.ceshi-brand-item{
+			width: 185rpx;height: 121rpx;@include ezy-no-repeat-cover;
+			padding: 16rpx 10rpx 10rpx 10rpx;position: absolute;top:1112rpx;right:140rpx;
+			background-image: url("@/static/images/study/shuxue/ceshi-pai.png");
+		.brand-lock,.brand-icon{left: 0;top: -30rpx;}
 	}
+	
+	// brand-item
+	.small-brand-item:nth-child(1){top:330rpx;right:70rpx;}
+	.small-brand-item:nth-child(2){top:540rpx;left:75rpx;}
+	.small-brand-item:nth-child(3){top:692rpx;right:110rpx;}
+	.small-brand-item:nth-child(4){top:1040rpx;right:140rpx}
+	.big-brand-item:nth-child(1){top:328rpx;right:40rpx;}
+	.big-brand-item:nth-child(2){top:540rpx;left:20rpx;}
+	.big-brand-item:nth-child(3){top:692rpx;right:80rpx;}
+	.big-brand-item:nth-child(4){top:1050rpx;right:110rpx;}
 	@media (max-height: 800px) {
 		// 0.92
 		.ezy-study-wrap{width: 690rpx;height: 1284rpx;}

pages/study/index.vue

@@ -1,6 +1,4 @@
 <template>
-	<view class="ezy-study-page">
-		{{currentProduct}}
 		<shuxueZhangjie v-if="currentProduct ==1" @clickGradeTerm="clickGradeTerm" @onLeft="onLeft" @onRight="onRight"
 			@handleCheckCatalogue="handleCheckCatalogue" @listClick="listClick" :options="infoData">
 		</shuxueZhangjie>
@@ -11,9 +9,7 @@
 		<egg-dialog ref="eggDialogRef" @eggBtn="eggBtn"></egg-dialog>
 		<catalogue ref="catalogueRef" @change-zhang="handleChangeZhang"></catalogue>
 		<CustomTabBar :cardId="cardId" :nianji="nianji" :zhangId="zhangId"></CustomTabBar>
-				<tip-small-dialog ref="goPayDialogRef" @confirm-btn="goPayPage" :content="tipContent"></tip-small-dialog>
-	</view>
-
+		<tip-small-dialog ref="goPayDialogRef" @confirm-btn="goPayPage" :content="tipContent"></tip-small-dialog>
 </template>
 <script setup>
 	import {

pages/study/product/shuxue.vue

@@ -1,37 +1,37 @@
 <template>
-	<view>
+	<view class="ezy-shuxue-study-page">
 		<view class="study-school-year" @click="clickGradeTerm">{{gradeTerm}}</view>
 		<view class="ezy-study-wrap" @touchstart="onTouchStart" @touchend="onTouchEnd">
 			<view class="chapter-box" @click="handleCheckCatalogue">{{options.numberStr}}</view>
-			<view class="chapter-title-box">{{options.zhangName}}</view>
+			<view @click="handleCheckCatalogue" :class="getTitleClass(options.zhangName)">{{getZhangName(options.zhangName)}}</view>
 			<view>
-			
+				<!-- 小岛 -->
 				<view class="brand-item" v-for="(item, index) in options.jieList" :key="item.jieId"
-					@click="listClick(item, index)" :class="getClass(options.jieList,index)">
-					<view v-if="isVip === 'VIP'" class="brand-icon">
-						{{ item.number }}
-						<view v-if="item.daeFlag">
-						<template v-if="growthType ==0">蛋</template>
-						<template v-if="growthType ==1">小鹅</template>
-						<template v-if="growthType ==2">中鹅</template>
-						<template v-if="growthType ==3">大鹅</template>
-						</view>
-						<view class="brand-content">
-							{{ item.jieName }}
-						</view>
+					@click="listClick(item, index)" :class="getClass(options.jieList,index,isVip)">
+					<view v-if="isVip === 'VIP'">
+						<!-- 序号 -->
+						<view class="brand-icon" v-if="item.studyFlag===0">{{ item.number }}</view>
+						<!-- 星星 -->
+						<view class="brand-finish-icon" v-if="item.studyFlag===1"></view>
+						<!-- 动物类型 -->
+						<view v-if="item.daeFlag && growthType ==0" class="animal-img dan-img"></view>
+						<view v-if="item.daeFlag && growthType ==1" class="animal-img xiao-e-img"></view>
+						<view v-if="item.daeFlag && growthType ==2" class="animal-img zhong-e-img"></view>
+						<view v-if="item.daeFlag && growthType ==3" class="animal-img da-e-img"></view>
+						<!-- 节名称 -->
+						<view class="brand-content">{{ item.jieName }}</view>
 					</view>
 					<view v-if="isVip !== 'VIP'">
+						<!-- 序号或锁 -->
 						<view v-if="item.number ==1" class="brand-icon">{{ item.number }}</view>
-						<view v-if="item.number !=1" class="brand-lock">{{ item.number }}</view>
-						<view v-if="item.daeFlag">
-						<template v-if="growthType ==0">蛋</template>
-						<template v-if="growthType ==1">小鹅</template>
-						<template v-if="growthType ==2">中鹅</template>
-						<template v-if="growthType ==3">大鹅</template>
-						</view>
-						<view class="brand-content">
-							{{ item.jieName }}
-						</view>
+						<view v-if="item.number !=1" class="brand-lock"></view>
+						<!-- 动物类型 -->
+						<view v-if="item.daeFlag && growthType ==0" class="animal-img dan-img"></view>
+						<view v-if="item.daeFlag && growthType ==1" class="animal-img xiao-e-img"></view>
+						<view v-if="item.daeFlag && growthType ==2" class="animal-img zhong-e-img"></view>
+						<view v-if="item.daeFlag && growthType ==3" class="animal-img da-e-img"></view>
+						<!-- 节名称 -->
+						<view class="brand-content"> {{ item.jieName }} </view>
 					</view>
 				</view>
 			</view>
@@ -86,24 +86,68 @@
 	function listClick(data) {
 		$emit('listClick', data);
 	}
-
-	function getClass (data,index){
-		// 节 4个  且最后一个为单元测试
-		if(data.length ==4 && data[data.length -1].jieName =='单元测试'){
-			// if(data[index].jieName.length){
-			// 		return  'class1'  
-			// }else{
-			// 		return  'class2'  
-			// }
+	// 获取章name
+	function getZhangName(data){
+		if(data.length <=9){
+			return data
+		}else{
+			return getZhangContent(data);
+		}
+	}
+	
+	// 章换行显示
+	function getZhangContent(data){
+		console.log(data.length,'data.length');
+		let length = data.length;
+		// 初始将字符串平分成两半
+		let halfLength = Math.floor(length / 2); 
 		
+		// 插入换行符
+		let firstLine = data.slice(0, halfLength);
+		let secondLine = data.slice(halfLength);
+		console.log(firstLine + '\n' + secondLine,'firstLine + + secondLine');
+		return firstLine + '\n' + secondLine;
+	}
+	
+	// 章class
+	function getTitleClass(data){
+		console.log(data.length,'getTitleClass');
+		if(data.length <=5){
+			return 'chapter-title-box chapter-small-title-box'
+		}else if(data.length <=9){
+			return 'chapter-title-box chapter-middle-title-box'
+		}else if(data.length >9){
+			return 'chapter-title-box chapter-big-title-box'
+		}
+	}
+	
+	// 获取节class
+	function getClass (data,index,isVip){
+		console.log(data,index,isVip,'data,index,isVip');
+		let brandActive = '';
+		if(isVip==='VIP'){
+			brandActive = 'brand-active';
+		}else{
+			brandActive = '';
+		}
+		let indexLast = data.length -1;
+		// 判断最后一个为名称是否为单元测试，是单元测试则返回ceshi-jie
+		if(index===indexLast && data[data.length -1].jieName =='单元测试'){
+			return 'ceshi-brand-item' +' '+ brandActive;
+		}else{
+			return getJieClass(data,index,brandActive)
+		}
+	}
+	// 根据获取节字数获取class
+	function getJieClass(data,index,active){
+		let itemJieName = data[index].jieName.length;
+		if(itemJieName > 7){
+			return 'big-brand-item' +' '+ active;
 		}else{
-			// if(data[index].jieName.length){
-			// 		return  'class3'  
-			// }else{
-			// 		return  'class4'  
-			// }
+			return 'small-brand-item' +' '+ active;
 		}
 	}
+	
 	function translateData(data) {
 		return gradeMapping[data.nianji] + termMapping[data.cardId]
 	}