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

Merge branch 'dev0124' into dev0515

Browse Source
This commit is contained in:
zhangsir
2024-06-20 17:12:29 +08:00
parent b168ef2ab6 95ba2f107b
commit c47036ffdf
2 changed files with 146 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,7 @@
<el-popover
placement="right"
width="437"
trigger="click"
trigger="hover"
:visible-arrow="false"
v-model="explainBody"
popper-class="growth_explain"

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

@@ -28,7 +28,7 @@
<div class="detailContent">
<div :class="dataList.length <= 7 ? 'detailbgc' : 'detailAllbgc'">
<div v-for="item, index in dataList" :key="index">
<el-popover popper-class="pathdetails" placement="right-start" width="360" trigger="click"
<el-popover popper-class="pathdetails" placement="right-start" width="360" trigger="hover"
:visible-arrow="false">
<div style="font-size: 14px;padding: 20px 20px 10px; ">
<div style="font-size: 16px;font-weight: 600;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;" :title="item.title">{{ item.title }}</div>
@@ -41,7 +41,7 @@
<el-progress :percentage="item.currentRatio || 0"></el-progress>
</div>
<div style="margin: 20px 0;">课程讲师：{{item.teacherName}}</div>
<div>课程简介：{{item.introduce}}</div>
<div style="overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">课程简介：{{item.introduce}}</div>
<el-button style="width: 100%;margin-top: 20px;" type="primary" @click="goStudy(item)">
<div style="display: flex;justify-content: space-between;align-items: center;">
<div></div>
@@ -56,12 +56,14 @@
</el-button>
</div>
<div slot="reference" class="address" :style="{
backgroundColor: getColor(item.flag, 0),
backgroundColor: getColor(item.flag, (notColor.length>0?
(notColor.includes(item.id)?4:item.id == istabId?flagToggle:0):item.id == istabId?flagToggle:0)),
left: getPosition(item.name, index).left + 'px',
top: getPosition(item.name, index).top + 'px'
}">
<div class="icon">
<div class="icon-content" :style="{ background: getColor(item.flag, 1) }">
<div class="icon-content" :style="{ background: getColor(item.flag, (notColor.length>0?
(notColor.includes(item.id)?4:item.id == istabId?flagToggleTwo:1):item.id == istabId?flagToggleTwo:1)) }">
{{ item.currentRatio || 0 }}%
</div>
<!-- <div v-else class="icon-content" style="background-color: #fff;">
@@ -78,7 +80,17 @@
<div :style="{
left: (getPosition(item.name, index).left + 55) + '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 :style="{
left: (getPosition(item.name, index).left + 55) + 'px',
top: (getPosition(item.name, index).top + 60) + 'px'
}" class="growth_explain1" v-if="item.id == istabId && explainBody">
<div class="growth_explain_text">
<div class="text">《{{item.title}}》是您当前所在位置，请您从这里开始学习哦～</div>
<div class="explain_close" @click="explainBody = false"></div>
</div>
</div>
</div>
<div class="text_end">您的学习之旅已结束</div>
</div>
@@ -95,8 +107,8 @@
</div>
<!-- 嵌入 -->
<div v-else class="growth-content">
<div class="pathdetails">
<div class="detailinfo">
<div class="pathdetails" style="padding: 0">
<div class="detailinfo" style="margin: 0">
<div class="select">
<div class="select-radio" style="margin-left: 0;"><span style="background: #34CA2B;"></span> 必修</div>
<div class="select-radio"><span style="background: #FE9C4A;"></span>选修</div>
@@ -249,23 +261,35 @@
</div>
</el-drawer>
<el-backtop :bottom="650" :right="119">
<div class="back-to-top">
<div class="img"></div>
<div class="text">继续学习之旅</div>
</div>
</el-backtop>
</div>
</template>
<script>
import portalHeader from '@/components/PortalHeader.vue';
import {taskList} from '@/api/growth';
import { scrollTo } from '@/utils/scroll-to'
export default {
name: 'GrowthPath',
components: { portalHeader },
data() {
return {
notColor: [],
flagToggle: 0,
flagToggleTwo: 1,
istabId: '',
explainBody: true,
isIframe: this.$route.query.isTrue,
switchFalse: false,
showUClass: false,
colorAttrValue: {
0: ['#FFD04B', "#FBA944"],
1: ["#b8e3b8", "#8ac84a"],
1: ["#b8e3b8", "#8ac84a","#FBA944","#8ac84a","#EE423D"],
2: ['#FFD04B', '#FBA944']
},
iconAttrs: {
@@ -366,10 +390,37 @@ export default {
name: '路径图背景全',
}))
}
const foundItemIndex = this.dataList.findIndex(item => item.currentRatio !== 100);
if (foundItemIndex !== -1) {
const scrollTop = this.iconAttrs[this.dataList[0].name].positions[foundItemIndex]
// 滚动到指定位置
this.performScroll(scrollTop.top);
//判断显示提示弹窗
console.log(this.dataList[foundItemIndex],'xixixi')
this.istabId = this.dataList[foundItemIndex].id
}
}
})
},
methods: {
toggleFlag() {
this.flagToggle = this.flagToggle === 2 ? 3 : 2;
this.flagToggleTwo = this.flagToggleTwo === 2 ? 3 : 2;
},
startToggleInterval() {
this.intervalId = setInterval(this.toggleFlag, 500);
},
async performScroll(scrollTop) {
await this.$nextTick();
window.scrollTo({ top: scrollTop, behavior: 'smooth' });
this.startToggleInterval();
setTimeout(() => {
this.explainBody = false
clearInterval(this.intervalId);
this.flagToggle = 0
this.flagToggleTwo = 1
}, 10000);
},
cylClick() {
window.open("https://u.boe.com/pc/course?keyword=创新力专区");
},
@@ -570,11 +621,54 @@ export default {
console.log(item,'其他')
}
},
}
},
watch: {
switchFalse(val){
if(val){
const notList = []
this.dataList.forEach(item => {
if(item.currentRatio != 100){
notList.push(item)
}
});
this.notColor = notList.map(item => item.id)
}else{
this.notColor = []
}
}
},
};
</script>
<style scoped lang="scss">
.back-to-top{
display: flex;
justify-content: center;
align-items: center;
.img{
width: 50px;
height: 50px;
background-image: url('../../assets/images/growth/plane.png');
background-repeat: no-repeat;
background-size: 100%;
}
.text{
width: 108px;
height: 22px;
line-height: 22px;
background: #0876FF;
border-radius: 11px;
font-weight: 400;
font-size: 14px;
color: #FFFFFF;
text-align: center;
}
}
.el-backtop{
box-shadow: none;
border-radius: 0;
background-color: transparent;
}
::v-deep .el-dialog__header {
border-bottom: 1px solid #E8E8E8;
padding-bottom: 20px;
@@ -659,6 +753,48 @@ export default {
padding: 0 20px;
white-space: nowrap;
}
.growth_explain1{
position: absolute;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
width: 487px;
height: 170px;
margin: -37px;
background: url("../../assets/images/growth/explain.png") no-repeat;
background-size: 100%;
.growth_explain_text{
width: 376px;
height: 56px;
font-weight: 400;
font-size: 14px;
color: #333333;
line-height: 28px;
text-align: left;
position: relative;
.text{
display: -webkit-box;
word-wrap: break-word;
word-break:break-all;
overflow: hidden;
text-overflow:ellipsis;
-webkit-box-orient: vertical;
-webkit-line-clamp:2;
}
.explain_close{
cursor: pointer;
background-image: url(../../assets/images/growth/close.png);
z-index: 99999;
width: 26px;
height: 26px;
position: absolute;
right: -21px;
top: -26px;
}
}
}
.text_end{
position: absolute;
right: 69px;