hz/learning-system-portal
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git synced 2025-12-10 19:36:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

xijie

Browse Source
This commit is contained in:
zhangsir
2024-06-27 20:35:52 +08:00
parent 233f21e310
commit c0575661c0
2 changed files with 145 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/study/Growth.vue
View File

@@ -105,7 +105,10 @@
<div class="body_schedule_two"> <div class="body_schedule_two">
<div class="body_schedule_pro"> <div class="body_schedule_pro">
<span class="pro_text">总进度</span> <span class="pro_text">总进度</span>
<el-progress :stroke-width="12" :percentage="Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))"></el-progress> <div style="display: flex;align-items: center;">
<el-progress style="width: 268px;" :show-text="false" :stroke-width="12" :percentage="Number(((detailData.overallCompletionRate || 0)*100).toFixed(2))"></el-progress>
<div class="text">{{ Number(((detailData.overallCompletionRate || 0)*100).toFixed(2)) || 0 }}%</div>
</div>
</div> </div>
<div class="body_schedule_btn" @click="startLearn"> <div class="body_schedule_btn" @click="startLearn">
<span class="body_schedule_text">{{detailData.overallCompletionRate==0?'开始学习':detailData.overallCompletionRate==1?'回顾':'继续学习'}}</span> <span class="body_schedule_text">{{detailData.overallCompletionRate==0?'开始学习':detailData.overallCompletionRate==1?'回顾':'继续学习'}}</span>
@@ -532,13 +535,13 @@ export default {
margin-left: 35px; margin-left: 35px;
margin-right: 45px; margin-right: 45px;
max-width: 1260px; max-width: 1260px;
height: 100px; max-height: 100px;
background: #F5F6F7; background: #F5F6F7;
border-radius: 10px; border-radius: 10px;
padding: 22px 25px 22px 16px; padding: 22px 25px 22px 16px;
.body_explain_text{ .body_explain_text{
max-width: 1219px; max-width: 1219px;
height: 56px; max-height: 56px;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
@@ -613,12 +616,19 @@ export default {
text-align: left; text-align: left;
margin-bottom: 2px; margin-bottom: 2px;
} }
.text{
font-weight: 400;
font-size: 12px;
color: #333333;
margin-left: 19px;
}
} }
.body_schedule_btn{ .body_schedule_btn{
width: 140px; width: 140px;
cursor: pointer; cursor: pointer;
height: 40px; height: 40px;
margin-left: 44px; margin-left: 44px;
margin-top: 7px;
background: #409EFF; background: #409EFF;
box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34); box-shadow: 1px 2px 15px 1px rgba(56,125,247,0.34);
border-radius: 4px; border-radius: 4px;

260
src/views/study/GrowthPath.vue
View File

@@ -95,7 +95,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="text_end">您的学习之旅已结束</div> <div :style="{right:dataList.length <= 7 ?'-138px':'-63px'}" class="text_end">您的学习之旅已结束</div>
</div> </div>
</div> </div>
<!-- <div class="footerBtn"> <!-- <div class="footerBtn">
@@ -138,7 +138,7 @@
top: getPosition(item.name, index).top + 'px' top: getPosition(item.name, index).top + 'px'
}" class="iconTitle" :title="item.title">{{ item.title.length>15?item.title.slice(0,15)+'...':item.title }}</div> }" class="iconTitle" :title="item.title">{{ item.title.length>15?item.title.slice(0,15)+'...':item.title }}</div>
</div> </div>
<div class="text_end">您的学习之旅已结束</div> <div :style="{right:dataList.length <= 7 ?'-138px':'-63px'}" class="text_end">您的学习之旅已结束</div>
</div> </div>
</div> </div>
</div> </div>
@@ -292,163 +292,163 @@ export default {
iconAttrs: { iconAttrs: {
'路径图背景1': { '路径图背景1': {
positions: [ positions: [
{ left: 672, top: 355 }, { left: 535, top: 283 },
] ]
}, },
'路径图背景2': { '路径图背景2': {
positions: [ positions: [
{ left: 183, top: 398 }, { left: 146, top: 317 },
{ left: 857, top: 167 }, { left: 682, top: 133 },
] ]
}, },
'路径图背景3': { '路径图背景3': {
positions: [ positions: [
{ left: 281, top: 562 }, { left: 224, top: 447 },
{ left: 573, top: 359 }, { left: 456, top: 286 },
{ left: 844, top: 152 }, { left: 672, top: 121 },
] ]
}, },
'路径图背景4': { '路径图背景4': {
positions: [ positions: [
{ left: 555, top: 577 }, { left: 442, top: 459 },
{ left: 147, top: 412 }, { left: 117, top: 328 },
{ left: 816, top: 348 }, { left: 649, top: 277 },
{ left: 994, top: 53 }, { left: 791, top: 42 },
] ]
}, },
'路径图背景5': { '路径图背景5': {
positions: [ positions: [
{ left: 582, top: 580 }, { left: 463, top: 462 },
{ left: 21, top: 549 }, { left: 17, top: 437 },
{ left: 337, top: 368 }, { left: 286, top: 293 },
{ left: 902, top: 333 }, { left: 718, top: 265 },
{ left: 962, top: 66 }, { left: 766, top: 53 },
] ]
}, },
'路径图背景6': { '路径图背景6': {
positions: [ positions: [
{ left: 612, top: 589 }, { left: 487, top: 469 },
{ left: 54, top: 558 }, { left: 43, top: 444 },
{ left: 270, top: 382 }, { left: 215, top: 304 },
{ left: 745, top: 350 }, { left: 593, top: 279 },
{ left: 1170, top: 255 }, { left: 931, top: 203 },
{ left: 1023, top: 44 }, { left: 814, top: 35 },
] ]
}, },
'路径图背景7': { '路径图背景7': {
positions: [ positions: [
{ left: 656, top: 594 }, { left: 521, top: 470 },
{ left: 323, top: 560 }, { left: 224, top: 447 },
{ left: 118, top: 426 }, { left: 72, top: 347 },
{ left: 504, top: 360 }, { left: 348, top: 286 },
{ left: 904, top: 336 }, { left: 690, top: 266 },
{ left: 1200, top: 190 }, { left: 964, top: 170 },
{ left: 988, top: 56 }, { left: 766, top: 53 },
] ]
}, },
'路径图背景8': { '路径图背景8': {
positions: [ positions: [
{ left: 500, top: 1440 }, { left: 398, top: 1150 },
{ left: 0, top: 1225 }, { left: 20, top: 999 },
{ left: 215, top: 1088 }, { left: 140, top: 875 },
{ left: 920, top: 936 }, { left: 733, top: 745 },
{ left: 1106, top: 658 }, { left: 825, top: 497 },
{ left: 520, top: 528 }, { left: 226, top: 401 },
{ left: 140, top: 286 }, { left: 200, top: 154 },
{ left: 970, top: -30 }, { left: 579, top: 14 },
] ]
}, },
'路径图背景9': { '路径图背景9': {
positions: [ positions: [
{ left: 500, top: 1440 }, { left: 398, top: 1150 },
{ left: 270, top: 1380 }, { left: 159, top: 1079 },
{ left: 606, top: 1000 }, { left: 140, top: 875 },
{ left: 920, top: 936 }, { left: 733, top: 745 },
{ left: 880, top: 580 }, { left: 984, top: 626 },
{ left: 168, top: 476 }, { left: 511, top: 426 },
{ left: 140, top: 286 }, { left: 79, top: 280 },
{ left: 334, top: 140 }, { left: 380, top: 64 },
{ left: 970, top: -30 }, { left: 579, top: 14 },
] ]
}, },
'路径图背景10': { '路径图背景10': {
positions: [ positions: [
{ left: 500, top: 1440 }, { left: 398, top: 1150 },
{ left: 270, top: 1380 }, { left: 159, top: 1079 },
{ left: 0, top: 1225 }, { left: 20, top: 999 },
{ left: 606, top: 1000 }, { left: 403, top: 815 },
{ left: 920, top: 936 }, { left: 733, top: 745 },
{ left: 880, top: 580 }, { left: 825, top: 497 },
{ left: 520, top: 528 }, { left: 511, top: 426 },
{ left: 140, top: 286 }, { left: 79, top: 280 },
{ left: 334, top: 140 }, { left: 200, top: 154 },
{ left: 970, top: -30 }, { left: 579, top: 14 },
] ]
}, },
'路径图背景11': { '路径图背景11': {
positions: [ positions: [
{ left: 500, top: 1440 }, { left: 398, top: 1150 },
{ left: 270, top: 1380 }, { left: 159, top: 1079 },
{ left: 0, top: 1225 }, { left: 140, top: 875 },
{ left: 606, top: 1000 }, { left: 403, top: 815 },
{ left: 920, top: 936 }, { left: 733, top: 745 },
{ left: 1106, top: 658 }, { left: 825, top: 497 },
{ left: 520, top: 528 }, { left: 511, top: 426 },
{ left: 168, top: 476 }, { left: 79, top: 280 },
{ left: 140, top: 286 }, { left: 200, top: 154 },
{ left: 334, top: 140 }, { left: 380, top: 64 },
{ left: 970, top: -30 }, { left: 579, top: 14 },
] ]
}, },
'路径图背景12': { '路径图背景12': {
positions: [ positions: [
{ left: 500, top: 1440 }, { left: 398, top: 1150 },
{ left: 270, top: 1380 }, { left: 159, top: 1079 },
{ left: 0, top: 1225 }, { left: 20, top: 999 },
{ left: 215, top: 1088 }, { left: 403, top: 815 },
{ left: 606, top: 1000 }, { left: 733, top: 745 },
{ left: 920, top: 936 }, { left: 984, top: 626 },
{ left: 1106, top: 658 }, { left: 825, top: 497 },
{ left: 520, top: 528 }, { left: 511, top: 426 },
{ left: 168, top: 476 }, { left: 79, top: 280 },
{ left: 140, top: 286 }, { left: 200, top: 154 },
{ left: 334, top: 140 }, { left: 380, top: 64 },
{ left: 970, top: -30 }, { left: 579, top: 14 },
] ]
}, },
'路径图背景13': { '路径图背景13': {
positions: [ positions: [
{ left: 500, top: 1440 }, { left: 398, top: 1150 },
{ left: 270, top: 1380 }, { left: 159, top: 1079 },
{ left: 0, top: 1225 }, { left: 20, top: 999 },
{ left: 215, top: 1088 }, { left: 140, top: 875 },
{ left: 606, top: 1000 }, { left: 403, top: 815 },
{ left: 920, top: 936 }, { left: 733, top: 745 },
{ left: 1106, top: 658 }, { left: 984, top: 626 },
{ left: 880, top: 580 }, { left: 511, top: 426 },
{ left: 520, top: 528 }, { left: 226, top: 401 },
{ left: 168, top: 476 }, { left: 79, top: 280 },
{ left: 140, top: 286 }, { left: 200, top: 154 },
{ left: 334, top: 140 }, { left: 380, top: 64 },
{ left: 970, top: -30 }, { left: 579, top: 14 },
] ]
}, },
'路径图背景14': { '路径图背景14': {
positions: [ positions: [
{ left: 500, top: 1440 }, { left: 398, top: 1150 },
{ left: 270, top: 1380 }, { left: 159, top: 1079 },
{ left: 0, top: 1225 }, { left: 20, top: 999 },
{ left: 215, top: 1088 }, { left: 140, top: 875 },
{ left: 606, top: 1000 }, { left: 403, top: 815 },
{ left: 920, top: 936 }, { left: 733, top: 745 },
{ left: 1106, top: 658 }, { left: 984, top: 626 },
{ left: 880, top: 580 }, { left: 825, top: 497 },
{ left: 520, top: 528 }, { left: 511, top: 426 },
{ left: 168, top: 476 }, { left: 226, top: 401 },
{ left: 140, top: 286 }, { left: 79, top: 280 },
{ left: 334, top: 140 }, { left: 200, top: 154 },
{ left: 592, top: 38 }, { left: 380, top: 64 },
{ left: 970, top: -30 }, { left: 579, top: 14 },
] ]
} }
}, },
@@ -1068,8 +1068,8 @@ export default {
} }
.text_end{ .text_end{
position: absolute; position: absolute;
right: 69px; // right: -138px;
top: 17px; top: 8px;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
color: #387DF7; color: #387DF7;
@@ -1082,7 +1082,7 @@ export default {
height: 100vh; height: 100vh;
.pathdetails { .pathdetails {
padding: 30px; padding: 30px 75px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -1147,29 +1147,31 @@ export default {
justify-content: center; justify-content: center;
.detailbgc { .detailbgc {
width: 1380px; // width: 1380px;
height: 699px; min-height: 556px;
min-width: 1380px; margin: 51px 172px 47px 107px;
min-width: 1098px;
position: relative; position: relative;
background-image: url('../../assets/images/growth/firstRoadmap.png'); background-image: url('../../assets/images/growth/firstRoadmap.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
bottom: -4px; bottom: -6px;
left: 737px; left: 586px;
background-image: url('../../assets/images/growth/begin.png'); background-image: url('../../assets/images/growth/begin.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width: 190px; background-size: 100%;
height: 55px; width: 151px;
height: 43px;
z-index: 1000; z-index: 1000;
} }
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
top: -2px; top: -2px;
right: 14px; right: 11px;
background-image: url('../../assets/images/growth/plane.png'); background-image: url('../../assets/images/growth/plane.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
@@ -1180,29 +1182,31 @@ export default {
} }
.detailAllbgc { .detailAllbgc {
width: 1380px; // width: 1380px;
height: 1590px; margin: 70px 251px 9px 103px;
min-width: 1380px; min-height: 1265px;
min-width: 1023px;
position: relative; position: relative;
background-image: url('../../assets/images/growth/roadmap.png'); background-image: url('../../assets/images/growth/roadmap.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
bottom: 10px; bottom: 10px;
left: 750px; left: 558px;
background-image: url('../../assets/images/growth/begin.png'); background-image: url('../../assets/images/growth/begin.png');
background-repeat: no-repeat; background-repeat: no-repeat;
width: 190px; background-size: 100%;
height: 55px; width: 151px;
height: 43px;
z-index: 1000; z-index: 1000;
} }
&::after { &::after {
content: ''; content: '';
position: absolute; position: absolute;
top: -6px; top: -5px;
right: 218px; right: 89px;
background-image: url('../../assets/images/growth/plane.png'); background-image: url('../../assets/images/growth/plane.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;