路径实现

pages/learnPath/learnPath.vue

@@ -22,7 +22,7 @@
 				</view>
 			</view>
 			<view class="end_learn">您的学习之旅已结束</view>
-			<view class="learn">
+			<view :class="dataList.length<=7?'learn':'learn14'">
 				<view v-for="(item,index) in dataList" :key="index">
 					<view @click="showPopup(index)" class="learn_item" :style="{
 								backgroundColor: getColor(item.flag, 0),
@@ -42,6 +42,7 @@
 						{{item.title}}
 					</view>	
 				</view>
+				<view v-if="dataList.length<=7" class="text_start">开启您的学习之旅</view>
 			</view>
 		</view>
 		<u-popup  mode="center" v-if="currentItem !== null" :show="currentItem.show" @close="closePopup">
@@ -105,6 +106,24 @@
 							{left: 344,top: -28},
 						]
 					},
+					'路径图背景全':{
+						positions: [
+							{left: 204,top: 2428},
+							{left: 58,top: 2240},
+							{left: -14,top: 2052},
+							{left: 78,top: 1864},
+							{left: 398,top: 1676},
+							{left: 580,top: 1488},
+							{left: 606,top: 1300},
+							{left: 524,top: 1110},
+							{left: 418,top: 922},
+							{left: 38,top: 734},
+							{left: 42,top: 546},
+							{left: 102,top: 358},
+							{left: 194,top: 170},
+							{left: 400,top: -18},
+						]
+					},
 				},
 				iconAttrsText: {
 					'路径图背景1':{
@@ -120,13 +139,20 @@
 					},
 					'路径图背景全':{
 						positions: [
-							{left: 112,top: 790},
-							{left: 226,top: 652},
-							{left: 86,top: 514},
-							{left: 80,top: 378},
-							{left: 142,top: 240},
-							{left: 250,top: 92},
-							{left: -22,top: -20},
+							{left: 292,top: 2436},
+							{left: 146,top: 2248},
+							{left: 74,top: 2060},
+							{left: 166,top: 1872},
+							{left: -14,top: 1684},
+							{left: 168,top: 1496},
+							{left: 194,top: 1308},
+							{left: 112,top: 1118},
+							{left: 130,top: 930},
+							{left: 126,top: 742},
+							{left: 130,top: 554},
+							{left: 190,top: 366},
+							{left: 282,top: 178},
+							{left: 112,top: -10},
 						]
 					},
 				},
@@ -156,13 +182,12 @@
 		},
 		methods: {
 			goStudy(item){
-				console.log(item,'item')
 				if(item.type == 1){
 					console.log(item,'在线')
-					this.$router.push("/course/studyindex?id=" + item.targetId);
+					uni.navigateTo({url:"/pages/study/courseStudy?id=" + item.targetId});
 				  }else if (item.type == 5) {
 					console.log(item,'考试')
-					this.$router.push("exam/test?id=" + item.targetId);
+					uni.navigateTo({url:"/pages/exam/exam?id=" + item.targetId});
 				  }else{
 					console.log(item,'其他')
 				  }
@@ -320,7 +345,7 @@
 	 .path_body{
 		 background: #FFFFFF;
 		 border-radius: 40rpx 40rpx 0rpx 0rpx;
-		 height: 100vh;
+		 /* height: 100vh; */
 		 .body_header{
 			 display: flex;
 			 justify-content: space-between;
@@ -414,6 +439,75 @@
 		 background-size: 100%;
 		 margin-left: 88rpx;
 		 position: relative;
+		 &::after {
+		 	content: '';
+		 	position: absolute;
+		 	top: -16rpx;
+		 	right: 48rpx;
+		 	background: url("../../static/images/learnpath/plane.png");
+		 	width: 64rpx;
+		 	height: 68rpx;
+		 	background-repeat: no-repeat;
+		 	background-size: 100%;
+		 	z-index: 1000;
+		 }
+		 &::before {
+		 	content: '';
+		 	position: absolute;
+		 	bottom: -6rpx;
+		 	right: -12rpx;
+		 	background: url("../../static/images/learnpath/plane.png");
+			transform: rotateY(180deg);
+		 	width: 64rpx;
+		 	height: 68rpx;
+		 	background-repeat: no-repeat;
+		 	background-size: 100%;
+		 	z-index: 1000;
+		 }
+		 .text_start{
+			 position: absolute;
+			 right: 64rpx;
+			 bottom: 4rpx;
+			 font-weight: 400;
+			 font-size: 28rpx;
+			 color: #387DF7;
+			 line-height: 40rpx;
+			 text-align: left;
+			 font-style: normal;
+		 }
+	 }
+	 .learn14{
+		 width: 680rpx;
+		 height: 2676rpx;
+		 background: url("../../static/images/learnpath/14learn.png") no-repeat;
+		 background-size: 100%;
+		 margin-left: 40rpx;
+		 position: relative;
+		 &::before {
+			 content: '';
+			 position: absolute;
+			 bottom: 38rpx;
+			 left: 340rpx;
+			 background-image: url('../../static/images/learnpath/begin.png');
+			 background-repeat: no-repeat;
+			 background-size: 100%;
+			 width: 300rpx;
+			 height: 90rpx;
+			 z-index: 1000;
+		}
+		&::after {
+			content: '';
+			position: absolute;
+			top: -16rpx;
+			right: 62rpx;
+			background: url("../../static/images/learnpath/plane.png");
+			width: 66rpx;
+			height: 68rpx;
+			background-repeat: no-repeat;
+			background-size: 100%;
+			z-index: 1000;
+		}
+	 }
 	 .learn_item{
 		 width: 64rpx;
 		 height: 64rpx;
@@ -471,6 +565,6 @@
 		 font-weight: 400;
 		 color: #FFFFFF;
 	 }
-	 }
+	 
  }
 </style>