hz/fe-student
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git synced 2025-12-06 17:36:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
Pengxiansen
2025-02-26 18:17:21 +08:00
parent 0954b80d2f
commit 898c49719a
8 changed files with 149 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/image/growth/task-type.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 483 B

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/assets/image/growth/task-type1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 483 B

15
src/views/growth/components/roadmap1/index.vue
View File

@@ -1,6 +1,11 @@
<template>
<div
style="transform-origin: top left; width: 1920px; height: 1122px"
style="
transform-origin: top left;
width: 1920px;
height: 1122px;
margin: 0 auto;
"
class="roadmap"
>
<div class="path-container">
@@ -184,6 +189,8 @@ const propas = defineProps({
stageProcessList: Array,
});
// 缩放比例
const transformSize = computed(() => {});
const point = [
{
top: "-13px",
@@ -339,8 +346,7 @@ const stateData = computed(() => {
}
.item-name {
display: inline-block;
max-width: 210px;
min-width: 80px;
width: 210px;
background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
border-radius: 7px;
font-size: 16px;
@@ -395,8 +401,7 @@ const stateData = computed(() => {
margin-left: 5px;
}
.item-name {
max-width: 210px;
min-width: 80px;
width: 210px;
display: inline-block;
background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
border-radius: 7px;

21
src/views/growth/components/roadmap2/index.vue
View File

@@ -1,6 +1,11 @@
<template>
<div
style="transform-origin: top left; width: 1920px; height: 777px"
style="
transform-origin: top left;
width: 1920px;
height: 777px;
margin: 0 auto;
"
class="roadmap"
>
<el-scrollbar height="777px">
@@ -273,14 +278,14 @@ const stateData = computed(() => {
return {
text: "未解锁",
color: "#666666",
bgColor: "rgba(102, 102, 102, 0.2)",
bgColor: "#d0d4d8",
progressColor: "#AEB3B8",
};
} else if (item.completionStatus === "0") {
return {
text: "未开始",
color: "#666666",
bgColor: "rgba(102, 102, 102, 0.2)",
bgColor: "#d0d4d8",
progressColor: "#AEB3B8",
};
} else if (item.completionStatus === "1") {
@@ -301,7 +306,7 @@ const stateData = computed(() => {
return {
text: "已结束",
color: "#666666",
bgColor: "rgba(102, 102, 102, 0.2)",
bgColor: "#d0d4d8",
progressColor: "#AEB3B8",
};
}
@@ -323,13 +328,12 @@ const stateData = computed(() => {
position: relative;
width: 100%;
min-height: 200px;
margin-top: 100px;
margin-bottom: 50px;
margin-top: 150px;
margin-bottom: 100px;
background-image: url(@/assets/image/growth/path2.png);
background-size: 100%;
.path-item {
position: absolute;
display: flex;
align-items: flex-end;
cursor: pointer;
@@ -349,8 +353,7 @@ const stateData = computed(() => {
}
.item-name {
display: inline-block;
max-width: 210px;
min-width: 80px;
width: 210px;
background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
border-radius: 7px;
font-size: 16px;

122
src/views/growth/growthList.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="growth-list">
<img
style="width: 100%; height: 290px"
style="width: 100%; height: 150px"
src="@/assets/image/growth/bg.png"
/>
<div class="nav-title">
@@ -81,22 +81,22 @@
</div>
</div>
<div style="display: flex">
<div class="growth-list-container">
<template v-if="stageProcessList && stageProcessList.length">
<div class="growth-list-content">
<el-row>
<el-col :span="24" v-for="(value, index) in stageProcessList">
<div class="list-item">
<div class="item-img">
<div class="item-img" @click="toFinish(value)">
<img
style="width: 110%; height: 110%"
style="width: 100%; height: 100%"
:src="getAssetsFile(value.courseType)"
/>
<div class="item-img-icon">{{ index + 1 }}</div>
</div>
<div class="item-content">
<div>
<div class="item-name">
<div class="item-name" @click="toFinish(value)">
{{ value.taskName }}
</div>
<div class="item-task-type">
@@ -109,7 +109,7 @@
:percentage="parseInt(value.progress)"
:show-text="false"
:stroke-width="6"
:color="value.progress == 100 ? '#8BC34A' : '#F2903D'"
:color="value.progress == 100 ? '#1379f7' : '#F2903D'"
/>
</div>
<div class="item-time">
@@ -117,7 +117,7 @@
<div style="color: #999999">未开始</div>
</template>
<template v-else-if="value.completionStatus === '1'">
<div style="color: #8bc34a">
<div style="color: #1379f7">
{{ `已完成 ${value.progress}%` }}
</div>
</template>
@@ -155,6 +155,23 @@
继续学习
</div>
</template>
<template v-if="value.completionStatus === '3'">
<div @click="toFinish(value)" style="background: #999999">
已结束
</div>
</template>
<template v-if="value.completionStatus === '10'">
<div @click="toFinish(value)" style="background: #999999">
未解锁
</div>
</template>
<template
v-if="value.completionStatus === '0' && !value.canLearn"
>
<div @click="toFinish(value)" style="background: #999999">
未开始
</div>
</template>
</div>
</div>
</el-col>
@@ -265,14 +282,24 @@
</div>
<div style="margin-top: 31px">
<div class="progressBox">
<div>选修进度</div>
<div style="display: flex; align-items: center">
<div style="margin-right: 8px">选修进度</div>
<el-tooltip
class="item"
effect="light"
:content="`还需完成${selectGrowth.electivePoorNum}个选修任务`"
placement="top-start"
>
<el-icon color="#FE9100"><QuestionFilled /></el-icon>
</el-tooltip>
</div>
<div class="progress">
<div style="flex: 1">
<el-progress
:percentage="electiveProgress"
:show-text="false"
:stroke-width="8"
color="#FEC200"
color="#FE9100"
/>
</div>
<div
@@ -424,9 +451,13 @@ const lastLearned = computed(() =>
// 任务总进度
const totalProgress = computed(() => {
if (state.growthInfo.totalTaskCompletedNum && state.growthInfo.totalTaskNum) {
if (
selectGrowth.value.totalTaskCompletedNum &&
selectGrowth.value.totalTaskNum
) {
let num =
state.growthInfo.totalTaskCompletedNum / state.growthInfo.totalTaskNum;
selectGrowth.value.totalTaskCompletedNum /
selectGrowth.value.totalTaskNum;
num = num * 100;
num = num.toFixed(0);
return Number(num);
@@ -437,12 +468,12 @@ const totalProgress = computed(() => {
// 选修总进度
const electiveProgress = computed(() => {
if (
state.growthInfo.electiveTaskCompletedNum &&
state.growthInfo.electiveTaskNum
selectGrowth.value.electiveTaskCompletedNum &&
selectGrowth.value.electiveTaskNum
) {
let num =
state.growthInfo.electiveTaskCompletedNum /
state.growthInfo.electiveTaskNum;
selectGrowth.value.electiveTaskCompletedNum /
selectGrowth.value.electiveTaskNum;
num = num * 100;
num = num.toFixed(0);
return Number(num);
@@ -453,12 +484,12 @@ const electiveProgress = computed(() => {
// 必修总进度
const requiredProgress = computed(() => {
if (
state.growthInfo.requiredTaskCompletedNum &&
state.growthInfo.requiredTaskNum
selectGrowth.value.requiredTaskCompletedNum &&
selectGrowth.value.requiredTaskNum
) {
let num =
state.growthInfo.requiredTaskCompletedNum /
state.growthInfo.requiredTaskNum;
selectGrowth.value.requiredTaskCompletedNum /
selectGrowth.value.requiredTaskNum;
num = num * 100;
num = num.toFixed(0);
return Number(num);
@@ -580,7 +611,10 @@ async function toFinish(d) {
ElMessage.warning(`请先完成“${d.superTaskName}”的学习任务`);
return;
}
if (!d.canLearn) {
ElMessage.warning(`学习任务暂未开始`);
return;
}
//更新学员当前任务
await growthRequest(PROFESSIONAL_STUDENT_LEARN, {
growthId: routerId,
@@ -835,12 +869,13 @@ function toOffcoursePlanPage(item) {
.nav-title {
position: absolute;
top: 75px;
margin-left: 55px;
// right: 80px;
left: 80px;
.growth-name {
display: flex;
align-items: center;
font-weight: 700;
font-size: 24px;
// font-weight: 700;
font-size: 20px;
color: #fff;
cursor: pointer;
}
@@ -926,7 +961,7 @@ function toOffcoursePlanPage(item) {
}
.info .rate .ratetext {
width: 259px;
// width: 259px;
font-size: 14px;
font-weight: 500;
color: #677d86;
@@ -934,13 +969,13 @@ function toOffcoursePlanPage(item) {
}
.info .rate .ratebtn {
width: 86px;
height: 36px;
border: 1px solid #2478ff;
width: 70px;
height: 28px;
border: 1px solid #f2903d;
border-radius: 4px;
font-size: 14px;
font-weight: 500;
color: #2478ff;
color: #f2903d;
line-height: 24px;
cursor: pointer;
display: flex;
@@ -979,9 +1014,12 @@ function toOffcoursePlanPage(item) {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 32px 80px 14px 80px;
padding: 25px 80px 14px 80px;
}
.growth-list-container {
display: flex;
padding-bottom: 50px;
}
.growth-list-content {
flex: 1;
padding: 11px 40px 53px 40px;
@@ -998,8 +1036,8 @@ function toOffcoursePlanPage(item) {
// width: 425px;
}
.item-button {
width: 120px;
height: 36px;
width: 100px;
height: 30px;
margin-left: 15%;
cursor: pointer;
div {
@@ -1026,6 +1064,7 @@ function toOffcoursePlanPage(item) {
border-radius: 14px;
overflow: hidden;
position: relative;
cursor: pointer;
.item-img-icon {
display: flex;
justify-content: center;
@@ -1041,7 +1080,7 @@ function toOffcoursePlanPage(item) {
width: 50px;
height: 30px;
background: #f2903d;
border-radius: 0 0px 15px 0px;
border-radius: 0 0px 14px 0px;
}
img:hover {
transform: scale(1.1);
@@ -1069,16 +1108,17 @@ function toOffcoursePlanPage(item) {
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-size: 14px;
color: #ffffff;
}
.item-name {
font-weight: 700;
font-size: 20px;
font-size: 16px;
color: #000000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
}
.growth-type {
@@ -1089,9 +1129,9 @@ function toOffcoursePlanPage(item) {
display: flex;
justify-content: center;
align-items: center;
width: 110px;
height: 40px;
font-size: 16px;
width: 80px;
height: 32px;
font-size: 14px;
font-weight: 700;
}
.type-item-list {
@@ -1116,20 +1156,20 @@ function toOffcoursePlanPage(item) {
display: flex;
align-items: center;
flex-direction: column;
font-size: 20px;
font-size: 16px;
color: #666666;
cursor: pointer;
font-weight: 700;
padding: 0 18px;
}
.tabs-line {
width: 96px;
width: 66px;
height: 3px;
margin-top: 7px;
}
.active {
color: #0077ec;
font-size: 24px;
font-size: 17px;
.tabs-line {
background-color: #1379f7;
}

71
src/views/growth/growthRoadmap.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="growth-list">
<img
style="width: 100%; height: 290px"
style="width: 100%; height: 150px"
src="@/assets/image/growth/bg.png"
/>
<div class="nav-title">
@@ -76,7 +76,12 @@
>
</div>
</div>
<div class="growth-path-container">
<div
class="growth-path-container"
:style="{
height: `${865 * transformSize}px`,
}"
>
<div class="growth-name-type">
<div class="growth-type">
<div class="type-item-list" @click="templateClick">列表</div>
@@ -89,18 +94,10 @@
:style="{ transform: 'scale(' + transformSize + ')' }"
style="transform-origin: top left"
>
<template v-if="selectGrowth.template == 1">
<Roadmap2
@toFinish="toFinish"
:stageProcessList="stageProcessList"
></Roadmap2>
</template>
<template v-else>
<Roadmap1
@toFinish="toFinish"
:stageProcessList="stageProcessList"
></Roadmap1>
</template>
<Roadmap2
@toFinish="toFinish"
:stageProcessList="stageProcessList"
></Roadmap2>
</div>
</template>
<template v-else>
@@ -158,7 +155,12 @@
>
</div>
</div>
<div class="growth-path-container">
<div
class="growth-path-container"
:style="{
height: `${1122 * transformSize}px`,
}"
>
<div class="growth-name-type">
<div class="growth-type">
<div class="type-item-list" @click="templateClick">列表</div>
@@ -171,18 +173,10 @@
:style="{ transform: 'scale(' + transformSize + ')' }"
style="transform-origin: top left"
>
<template v-if="selectGrowth.template == 1">
<Roadmap2
@toFinish="toFinish"
:stageProcessList="stageProcessList"
></Roadmap2>
</template>
<template v-else>
<Roadmap1
@toFinish="toFinish"
:stageProcessList="stageProcessList"
></Roadmap1>
</template>
<Roadmap1
@toFinish="toFinish"
:stageProcessList="stageProcessList"
></Roadmap1>
</div>
</template>
<template v-else>
@@ -702,9 +696,9 @@ function toOffcoursePlanPage(item) {
display: flex;
align-items: center;
}
.growth-list {
background: #f6f6fc;
:deep(.el-popper) {
z-index: 9999 !important;
}
@@ -714,12 +708,13 @@ function toOffcoursePlanPage(item) {
.nav-title {
position: absolute;
top: 75px;
margin-left: 55px;
// right: 80px;
left: 80px;
.growth-name {
display: flex;
align-items: center;
font-weight: 700;
font-size: 24px;
// font-weight: 700;
font-size: 20px;
color: #fff;
cursor: pointer;
}
@@ -736,7 +731,7 @@ function toOffcoursePlanPage(item) {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 32px 80px 14px 80px;
padding: 25px 80px 14px 80px;
}
.growth-name {
display: flex;
@@ -759,9 +754,9 @@ function toOffcoursePlanPage(item) {
display: flex;
justify-content: center;
align-items: center;
width: 110px;
height: 40px;
font-size: 16px;
width: 80px;
height: 32px;
font-size: 14px;
font-weight: 700;
}
.type-item-list {
@@ -787,20 +782,20 @@ function toOffcoursePlanPage(item) {
display: flex;
align-items: center;
flex-direction: column;
font-size: 20px;
font-size: 16px;
color: #666666;
cursor: pointer;
font-weight: 700;
padding: 0 18px;
}
.tabs-line {
width: 96px;
width: 66px;
height: 3px;
margin-top: 7px;
}
.active {
color: #0077ec;
font-size: 24px;
font-size: 17px;
.tabs-line {
background-color: #1379f7;
}

7
src/views/project/ProjectDetails.vue
View File

@@ -779,13 +779,14 @@ function continueLearn(lastLearnedId) {
.example-showcase .el-loading-mask {
z-index: 9;
}
.el-popper {
z-index: 0 !important;
}
.pathdetails {
.el-dialog__body{
width: 80%;
}
.el-popper {
z-index: 0 !important;
}
.el-dialog__header {
display: none;
}

18
vite.config.js
View File

@@ -38,16 +38,16 @@ export default defineConfig(({ command, mode }) =>
},
server: {
proxy: {
// "/professional": {
// // target: 'http://192.168.16.195:32002',
// // target: 'http://192.168.150.97:32002',
// target: 'http://192.168.38.211:32002',
// changeOrigin: true,
// },
'/growth': {
target: 'https://u-pre.boe.com',
"/professional": {
// target: 'http://192.168.16.195:32002',
// target: 'http://192.168.150.97:32002',
target: 'http://192.168.31.211:32002',
changeOrigin: true,
},
},
// '/growth': {
// target: 'https://u-pre.boe.com',
// changeOrigin: true,
// },
'/file/upload': {
target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
changeOrigin: true,