mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-15 05:46:46 +08:00
路径实现
This commit is contained in:
zhangsir
@@ -22,7 +22,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="end_learn">您的学习之旅已结束</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 v-for="(item,index) in dataList" :key="index">
|
||||||
<view @click="showPopup(index)" class="learn_item" :style="{
|
<view @click="showPopup(index)" class="learn_item" :style="{
|
||||||
backgroundColor: getColor(item.flag, 0),
|
backgroundColor: getColor(item.flag, 0),
|
||||||
@@ -42,6 +42,7 @@
|
|||||||
{{item.title}}
|
{{item.title}}
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
<view v-if="dataList.length<=7" class="text_start">开启您的学习之旅</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<u-popup mode="center" v-if="currentItem !== null" :show="currentItem.show" @close="closePopup">
|
<u-popup mode="center" v-if="currentItem !== null" :show="currentItem.show" @close="closePopup">
|
||||||
@@ -105,6 +106,24 @@
|
|||||||
{left: 344,top: -28},
|
{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: {
|
iconAttrsText: {
|
||||||
'路径图背景1':{
|
'路径图背景1':{
|
||||||
@@ -120,13 +139,20 @@
|
|||||||
},
|
},
|
||||||
'路径图背景全':{
|
'路径图背景全':{
|
||||||
positions: [
|
positions: [
|
||||||
{left: 112,top: 790},
|
{left: 292,top: 2436},
|
||||||
{left: 226,top: 652},
|
{left: 146,top: 2248},
|
||||||
{left: 86,top: 514},
|
{left: 74,top: 2060},
|
||||||
{left: 80,top: 378},
|
{left: 166,top: 1872},
|
||||||
{left: 142,top: 240},
|
{left: -14,top: 1684},
|
||||||
{left: 250,top: 92},
|
{left: 168,top: 1496},
|
||||||
{left: -22,top: -20},
|
{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: {
|
methods: {
|
||||||
goStudy(item){
|
goStudy(item){
|
||||||
console.log(item,'item')
|
|
||||||
if(item.type == 1){
|
if(item.type == 1){
|
||||||
console.log(item,'在线')
|
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) {
|
}else if (item.type == 5) {
|
||||||
console.log(item,'考试')
|
console.log(item,'考试')
|
||||||
this.$router.push("exam/test?id=" + item.targetId);
|
uni.navigateTo({url:"/pages/exam/exam?id=" + item.targetId});
|
||||||
}else{
|
}else{
|
||||||
console.log(item,'其他')
|
console.log(item,'其他')
|
||||||
}
|
}
|
||||||
@@ -320,7 +345,7 @@
|
|||||||
.path_body{
|
.path_body{
|
||||||
background: #FFFFFF;
|
background: #FFFFFF;
|
||||||
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
border-radius: 40rpx 40rpx 0rpx 0rpx;
|
||||||
height: 100vh;
|
/* height: 100vh; */
|
||||||
.body_header{
|
.body_header{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
@@ -414,63 +439,132 @@
|
|||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
margin-left: 88rpx;
|
margin-left: 88rpx;
|
||||||
position: relative;
|
position: relative;
|
||||||
.learn_item{
|
&::after {
|
||||||
width: 64rpx;
|
content: '';
|
||||||
height: 64rpx;
|
position: absolute;
|
||||||
position: absolute;
|
top: -16rpx;
|
||||||
border-radius: 50%;
|
right: 48rpx;
|
||||||
&:before {
|
background: url("../../static/images/learnpath/plane.png");
|
||||||
content: "";
|
width: 64rpx;
|
||||||
position: absolute;
|
height: 68rpx;
|
||||||
bottom: 0;
|
background-repeat: no-repeat;
|
||||||
left: 0;
|
background-size: 100%;
|
||||||
width: 64rpx;
|
z-index: 1000;
|
||||||
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{
|
&::before {
|
||||||
max-width: 400rpx;
|
content: '';
|
||||||
height: 56rpx;
|
position: absolute;
|
||||||
font-size: 24rpx;
|
bottom: -6rpx;
|
||||||
line-height: 56rpx;
|
right: -12rpx;
|
||||||
text-align: center;
|
background: url("../../static/images/learnpath/plane.png");
|
||||||
background: linear-gradient( 301deg, #0071FF 0%, #8FC1FF 99%, #3D73ED 100%);
|
transform: rotateY(180deg);
|
||||||
border-radius: 160rpx 160rpx 160rpx 16rpx;
|
width: 64rpx;
|
||||||
|
height: 68rpx;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.text_start{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
padding: 0 12rpx 0 20rpx;
|
right: 64rpx;
|
||||||
|
bottom: 4rpx;
|
||||||
font-weight: 400;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
BIN
static/images/learnpath/14learn.png
Normal file
BIN
static/images/learnpath/14learn.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
BIN
static/images/learnpath/begin.png
Normal file
BIN
static/images/learnpath/begin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.7 KiB |
Reference in New Issue
Block a user