学习地图页面第一版

common/styles/global/components.scss

@@ -11,6 +11,14 @@ view{box-sizing: border-box;}
 /***** 状态栏 *****/
 .ezy-status-bar{height: var(--status-bar-height);width: 100%;background-color: red;}
 
+/***** 超出省略 *****/
+// 文本超出省略号显示 (一行)
+@mixin single-line-ellipsis() {text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;white-space: nowrap;word-break: break-all;}
+
+// 文本超出省略号显示 (多行)
+@mixin multi-line-ellipsis($rows: 3){-webkit-line-clamp:$rows;text-overflow: ellipsis;-o-text-overflow: ellipsis;overflow: hidden;word-wrap: break-word;display: -webkit-box;white-space: normal !important;-webkit-box-orient: vertical;}
+
+
 /***** 页面高度 *****/
 /*  #ifdef  H5  */
 //标题栏

common/styles/global/pages.scss

@@ -172,10 +172,12 @@
 		width: 277rpx;height: 87rpx;line-height: 82rpx;margin: 2% 0;
 		background-image: url("@/static/images/grade/grades-bj.png");@include ezy-no-repeat-cover;
 		text-align: center;font-size: 36rpx;color: #fff;font-weight: 800;
+		-webkit-text-stroke: 1rpx #003466; 
+				text-stroke: 1rpx #003466; 
 	}
 	// -webkit-text-stroke: 1.6rpx #ac5300;text-stroke: 1.6rpx #ac5300; 
 	.grade-item.active{
-		color: #fff;
+		color: #fff;-webkit-text-stroke: 1.6rpx #ac5300;text-stroke: 1.6rpx #ac5300; 
 		background-image: url("@/static/images/grade/grades-a-bj.png");
 	}
 	.grade-line{width: 90%;height: 4rpx;border-top: 4rpx dashed #7cbeee;margin: 5% auto 4%;}
@@ -229,16 +231,62 @@
 	width:100%;height:100vh;
 	background-color: #43c1f6;
 	background-image: url("@/static/images/study/study-page-bj.png");@include ezy-no-repeat-cover(top);
-	position: relative;min-height: 1394rpx;
-	padding:var(--status-bar-height) var(--window-right) 0 var(--window-left);box-sizing: border-box;z-index: 1;
+	position: relative;min-height: 1394rpx;padding-top:calc(1% + var(--status-bar-height));
+    box-sizing: border-box;z-index: 1;
+	.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;margin: 1% 0 0 3%; 
+		font-size: 32rpx;
+	}
 	.ezy-study-wrap{
 		width:100%;height:1394rpx;background-image: url("@/static/images/study/study-wrap-bj.png");@include ezy-no-repeat-cover;
 		position: absolute;bottom: 4%;z-index: 2;
 	}
-	.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;position: absolute;top: 1%;left: 3%;z-index: 3;
-		font-size: 32rpx;
+	.chapter-box{
+		width: 150rpx;text-align: center;font-weight: 800;color: #5c1a11;
+		position: absolute;top: 126rpx;left: 330rpx;font-size: 32rpx;
+	}
+	.chapter-title-box{
+		width: 268rpx;text-align: center;font-weight: 800;color: #fbb030;
+		position: absolute;top: 180rpx;left: 270rpx;font-size: 32rpx;
+	}
+	.brand-item{position: absolute;box-sizing: border-box;font-size: 28rpx;color: #fff;text-align: center;font-weight: 600;}
+	.brand-content{width: 100%;@include single-line-ellipsis;}
+	.brand-icon,.brand-lock{
+		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");
+		}
+	.brand-lock{background-image: url("@/static/images/catalog/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;
+		right: 60rpx;top: 320rpx;padding: 40rpx 4rpx 10rpx 12rpx;
+		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;
+		left: 55rpx;top: 512rpx;padding: 40rpx 0 10rpx 16rpx;
+		background-image: url("@/static/images/catalog/duan-pai-disabled.png");
+	}
+	.brand-item:nth-child(3){
+		width: 298rpx;height: 144rpx;@include ezy-no-repeat-cover;
+		right: 85rpx;bottom: 560rpx;padding: 40rpx 4rpx 10rpx 12rpx;
+		background-image: url("@/static/images/catalog/chang-pai-disabled.png");
+	}
+	.brand-item:nth-child(4){
+		width: 185rpx;height: 121rpx;@include ezy-no-repeat-cover;
+		right: 160rpx;bottom: 160rpx;padding: 16rpx 16rpx 10rpx 24rpx;
+		background-image: url("@/static/images/catalog/ceshi-pai.png");
+		.brand-lock{left: 0;top: -30rpx;}
 	}
 }
 

pages/study/index.vue

@@ -2,15 +2,17 @@
 	<view class="ezy-study-page">
 		<view class="study-school-year">{{gradeTerm}}</view>
 		<view class="ezy-study-wrap">
-			<view class="chapter-box" @click="handleCheckCatalogue">
-				{{infoData.numberStr}}
+			<view class="chapter-box" @click="handleCheckCatalogue">{{infoData.numberStr}}</view>
+			<view class="chapter-title-box">{{infoData.zhangName}}</view>
+			<view>
+				<view class="brand-item" v-for="(item,index) in infoData.jieList" :key="index" @click="listClick(item)"
+				:class= "index ==0?'brand-active':''">
+				<view class="brand-icon" v-if="index ==0">1</view>
+				<view class="brand-lock" v-else></view>
+				<view class="brand-content">{{item.jieName}}</view>
+				</view>
 			</view>
-			<view class="chapter-title-box">
-				{{infoData.zhangName}}
-			</view>
-			<!-- :class= index ==1?'亮+无锁头':'暗+锁头' -->
-			<view class="brand" v-for="(item,index) in infoData.jieList" :key="index" @click="listClick(item)">
-				{{item.jieName}}</view>
+			
 		</view>
 
 		<!-- <uni-button  style="margin-top: 200px;display: block;" @click="goKaoshi">goKaoshi</uni-button>