diff --git a/pages/learnPath/learnPath.vue b/pages/learnPath/learnPath.vue index 4cf0bf0..13e3081 100644 --- a/pages/learnPath/learnPath.vue +++ b/pages/learnPath/learnPath.vue @@ -22,7 +22,7 @@ 您的学习之旅已结束 - + 开启您的学习之旅 @@ -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,63 +439,132 @@ background-size: 100%; margin-left: 88rpx; position: relative; - .learn_item{ - width: 64rpx; - height: 64rpx; - position: absolute; - border-radius: 50%; - &:before { - content: ""; - position: absolute; - bottom: 0; - left: 0; - width: 64rpx; - height: 64rpx; - clip: rect(16px 64px 32px 16px); - background: inherit; - transform: rotate(45deg); - } - - .icon { - position: absolute; - top: 50%; - left: 50%; - width: 50rpx; - height: 50rpx; - background-color: #fff; - border-radius: 50%; - transform: translate(-50%, -50%); - cursor: pointer; - - .icon-content { - position: absolute; - top: 50%; - left: 50%; - font-size: 10px; - color: #fff; - text-align: center; - transform: translate(-50%, -50%); - width: 44rpx; - height: 44rpx; - line-height: 44rpx; - background-color: #8bc94b; - border-radius: 50%; - } - } + &::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; } - .learn_text{ - max-width: 400rpx; - height: 56rpx; - font-size: 24rpx; - line-height: 56rpx; - text-align: center; - background: linear-gradient( 301deg, #0071FF 0%, #8FC1FF 99%, #3D73ED 100%); - border-radius: 160rpx 160rpx 160rpx 16rpx; + &::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; - padding: 0 12rpx 0 20rpx; + right: 64rpx; + bottom: 4rpx; font-weight: 400; - color: #FFFFFF; + 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; + position: absolute; + border-radius: 50%; + &:before { + content: ""; + position: absolute; + bottom: 0; + left: 0; + width: 64rpx; + height: 64rpx; + clip: rect(16px 64px 32px 16px); + background: inherit; + transform: rotate(45deg); + } + + .icon { + position: absolute; + top: 50%; + left: 50%; + width: 50rpx; + height: 50rpx; + background-color: #fff; + border-radius: 50%; + transform: translate(-50%, -50%); + cursor: pointer; + + .icon-content { + position: absolute; + top: 50%; + left: 50%; + font-size: 10px; + color: #fff; + text-align: center; + transform: translate(-50%, -50%); + width: 44rpx; + height: 44rpx; + line-height: 44rpx; + background-color: #8bc94b; + border-radius: 50%; + } + } + } + .learn_text{ + max-width: 400rpx; + height: 56rpx; + font-size: 24rpx; + line-height: 56rpx; + text-align: center; + background: linear-gradient( 301deg, #0071FF 0%, #8FC1FF 99%, #3D73ED 100%); + border-radius: 160rpx 160rpx 160rpx 16rpx; + position: absolute; + padding: 0 12rpx 0 20rpx; + font-weight: 400; + color: #FFFFFF; + } + } diff --git a/static/images/learnpath/14learn.png b/static/images/learnpath/14learn.png new file mode 100644 index 0000000..1cd936e Binary files /dev/null and b/static/images/learnpath/14learn.png differ diff --git a/static/images/learnpath/begin.png b/static/images/learnpath/begin.png new file mode 100644 index 0000000..4b6a6d9 Binary files /dev/null and b/static/images/learnpath/begin.png differ