mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-06 09:26:46 +08:00
提交
This commit is contained in:
Pengxiansen
@@ -10,6 +10,7 @@ export const PROJECT = 1;
|
||||
export const ROUTER = 2;
|
||||
export const COURSE = 3;
|
||||
export const GROWTH = 4
|
||||
|
||||
export const TASK_TYPES = {
|
||||
typeName: {
|
||||
1: "在线",
|
||||
@@ -41,6 +42,7 @@ export const TASK_TYPES = {
|
||||
12: "去投票",
|
||||
13: "去完成",
|
||||
},
|
||||
|
||||
path: {
|
||||
1: ({ courseId }) => window.open(window.location.protocol + import.meta.env.VITE_BOE_ONLINE_CLASS_URL + courseId), //在线
|
||||
2: ({ targetId }) => window.open(`${location.protocol}//${location.host}${import.meta.env.VITE_BASE_API}/stu/project/redirectDetail?courseId=${targetId}`, '_top'),
|
||||
@@ -56,4 +58,6 @@ export const TASK_TYPES = {
|
||||
12: "/ballotpage",
|
||||
13: "/projectdetails",
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
BIN
src/assets/image/growth/bg.png
Normal file
BIN
src/assets/image/growth/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 996 B |
Binary file not shown.
|
Before Width: | Height: | Size: 678 B |
Binary file not shown.
|
Before Width: | Height: | Size: 556 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
BIN
src/assets/image/growth/list.png
Normal file
BIN
src/assets/image/growth/list.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 335 B |
BIN
src/assets/image/growth/path-arrow.png
Normal file
BIN
src/assets/image/growth/path-arrow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 98 KiB |
BIN
src/assets/image/growth/path-bg.png
Normal file
BIN
src/assets/image/growth/path-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 258 KiB |
BIN
src/assets/image/growth/path.png
Normal file
BIN
src/assets/image/growth/path.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1003 B |
BIN
src/assets/image/growth/qiehuan.png
Normal file
BIN
src/assets/image/growth/qiehuan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 721 B |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
BIN
src/assets/image/growth/task-type.png
Normal file
BIN
src/assets/image/growth/task-type.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 580 B |
BIN
src/assets/image/growth/type1.png
Normal file
BIN
src/assets/image/growth/type1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 45 KiB |
BIN
src/assets/image/growth/type10.png
Normal file
BIN
src/assets/image/growth/type10.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
BIN
src/assets/image/growth/type11.png
Normal file
BIN
src/assets/image/growth/type11.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
BIN
src/assets/image/growth/type12.png
Normal file
BIN
src/assets/image/growth/type12.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
src/assets/image/growth/type13.png
Normal file
BIN
src/assets/image/growth/type13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
BIN
src/assets/image/growth/type2.png
Normal file
BIN
src/assets/image/growth/type2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 49 KiB |
BIN
src/assets/image/growth/type3.png
Normal file
BIN
src/assets/image/growth/type3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
BIN
src/assets/image/growth/type4.png
Normal file
BIN
src/assets/image/growth/type4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
src/assets/image/growth/type5.png
Normal file
BIN
src/assets/image/growth/type5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
src/assets/image/growth/type6.png
Normal file
BIN
src/assets/image/growth/type6.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 46 KiB |
BIN
src/assets/image/growth/type7.png
Normal file
BIN
src/assets/image/growth/type7.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
src/assets/image/growth/type8.png
Normal file
BIN
src/assets/image/growth/type8.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
src/assets/image/growth/type9.png
Normal file
BIN
src/assets/image/growth/type9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 40 KiB |
@@ -9,6 +9,7 @@
|
||||
import { createStore } from 'vuex'
|
||||
import { PROJECT_PROCESS, ROUTER_PROCESS,PROFESSIONAL_STUDENT_DETAIL } from "@/api/api";
|
||||
import { request } from "@/api/request";
|
||||
import { growthRequest } from "@/api/growthRequest";
|
||||
import { TASK_TYPES } from "@/api/CONST";
|
||||
|
||||
export default createStore({
|
||||
|
||||
@@ -1,217 +1,139 @@
|
||||
<template>
|
||||
<div class="growth-details">
|
||||
<ReturnHead text="专业力必修" :gohome="true"></ReturnHead>
|
||||
<div class="main">
|
||||
<div class="tabs">
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 1 ? 'active' : ''"
|
||||
@click="tabClick(1)"
|
||||
>
|
||||
<div class="tabs-text">必修</div>
|
||||
<div class="tabs-line"></div>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 2 ? 'active' : ''"
|
||||
@click="tabClick(2)"
|
||||
>
|
||||
<div class="tabs-text">选修</div>
|
||||
<div class="tabs-line"></div>
|
||||
</div>
|
||||
<div class="navbar">
|
||||
<div class="nav-left">
|
||||
<el-icon color="#fff" size="20"><ArrowLeft /></el-icon>
|
||||
</div>
|
||||
<div class="search">
|
||||
<div class="search-input">
|
||||
<el-input
|
||||
v-model="queryParams.taskName"
|
||||
border-radius:
|
||||
:input-style="{
|
||||
width: '100%',
|
||||
height: '34px',
|
||||
}"
|
||||
@change="getList"
|
||||
style="width: 240px"
|
||||
placeholder="搜索关键字"
|
||||
<div class="nav-title">专业力必修</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 1 ? 'active' : ''"
|
||||
@click="tabClick(1)"
|
||||
>
|
||||
<div class="tabs-text">必修</div>
|
||||
<div class="tabs-line"></div>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 2 ? 'active' : ''"
|
||||
@click="tabClick(2)"
|
||||
>
|
||||
<div class="tabs-text">选修</div>
|
||||
<div class="tabs-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search">
|
||||
<div class="search-input">
|
||||
<el-input
|
||||
v-model="queryParams.taskName"
|
||||
:input-style="{
|
||||
width: '100%',
|
||||
height: '40px',
|
||||
color: '#fff',
|
||||
}"
|
||||
@change="getList"
|
||||
placeholder="搜索关键字"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon color="#fff" class="el-input__icon"><search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-dropdown>
|
||||
<img class="icon" src="@/assets/image/growth/qiehuan.png" />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="tabClick(null, '0')"
|
||||
>未开始</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="tabClick(null, '1')"
|
||||
>已完成</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="tabClick(null, '2')"
|
||||
>进行中</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<!-- <img class="icon" src="@/assets/image/growth/list.png" /> -->
|
||||
<img class="icon" @click="toPath" src="@/assets/image/growth/path.png" />
|
||||
</div>
|
||||
<div
|
||||
class="container"
|
||||
v-loading="loading"
|
||||
:style="stageProcessList.length ? '' : 'height:400px'"
|
||||
>
|
||||
<div
|
||||
@click="toFinish(item)"
|
||||
:id="item.id"
|
||||
v-for="(item, key) in stageProcessList"
|
||||
:key="key"
|
||||
class="task-item"
|
||||
>
|
||||
<div class="task-img">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
:src="getAssetsFile(item.courseType)"
|
||||
/>
|
||||
</div>
|
||||
<el-dropdown>
|
||||
<el-icon color="#00000" :size="24">
|
||||
<Filter />
|
||||
</el-icon>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="tabClick(null, 0)"
|
||||
>未开始</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="tabClick(null, 1)"
|
||||
>已完成</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="tabClick(null, 2)"
|
||||
>进行中</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="down"
|
||||
v-loading="loading"
|
||||
:style="stageProcessList.length ? '' : 'height:400px'"
|
||||
>
|
||||
<template v-if="stageProcessList && stageProcessList.length">
|
||||
<div
|
||||
class="project_second"
|
||||
v-for="(item, key) in stageProcessList"
|
||||
:key="key"
|
||||
>
|
||||
<div
|
||||
style="
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<div class="secondcontent">
|
||||
<div class="question">
|
||||
<div style="width: calc(100% - 80px)">
|
||||
<div class="issue" :title="item.taskName">
|
||||
【{{ TASK_TYPES.typeName[item.courseType] || "" }}】
|
||||
{{ item.taskName }}
|
||||
</div>
|
||||
<div v-if="item.courseType === '1'" class="progressBox">
|
||||
<!-- <div>当前进度</div> -->
|
||||
<div
|
||||
class="progress"
|
||||
style="
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 3px;
|
||||
"
|
||||
>
|
||||
<div style="width: 200px">
|
||||
<el-progress
|
||||
:percentage="item.progress"
|
||||
:show-text="false"
|
||||
:stroke-width="8"
|
||||
:color="
|
||||
{
|
||||
0: 'rgba(238, 112, 108, 1)',
|
||||
1: 'rgba(255, 151, 38, 1)',
|
||||
2: 'rgba(39, 122, 255, 1)',
|
||||
3: 'rgba(59, 94, 251, 1)',
|
||||
4: 'rgba(57, 219, 183, 1)',
|
||||
5: 'rgba(57, 219, 183, 1)',
|
||||
}[item.progress / 20]
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style="
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #277aff;
|
||||
margin-left: 10px;
|
||||
"
|
||||
:style="{
|
||||
color: {
|
||||
0: 'rgba(238, 112, 108, 1)',
|
||||
1: 'rgba(255, 151, 38, 1)',
|
||||
2: 'rgba(39, 122, 255, 1)',
|
||||
3: 'rgba(59, 94, 251, 1)',
|
||||
4: 'rgba(57, 219, 183, 1)',
|
||||
5: 'rgba(57, 219, 183, 1)',
|
||||
}[item.progress / 20],
|
||||
}"
|
||||
>
|
||||
{{ item.progress }}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="coursetag">
|
||||
<div
|
||||
class="tag3"
|
||||
style="margin-right: 11px; margin-top: 3px"
|
||||
>
|
||||
{{ TASK_TYPES.typeName[item.courseType] || "" }}
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<el-dropdown trigger="click">
|
||||
<template v-if="item.completionStatus === '0'">
|
||||
<div
|
||||
class="goclass"
|
||||
@click="toFinish(item)"
|
||||
style="background: #2478ff"
|
||||
>
|
||||
{{ TASK_TYPES.toName[item.courseType] }}
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="item.completionStatus === '1'">
|
||||
<div
|
||||
class="goclass"
|
||||
@click="toFinish(item)"
|
||||
style="background: #2478ff"
|
||||
>
|
||||
已完成
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="item.completionStatus === '2'">
|
||||
<div
|
||||
class="goclass"
|
||||
@click="toFinish(item)"
|
||||
style="background: #2478ff"
|
||||
>
|
||||
进行中
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="item.lastStudy">
|
||||
<div
|
||||
class="goclass"
|
||||
@click="toFinish(item)"
|
||||
style="background: #999"
|
||||
>
|
||||
继续学习
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="item.completionStatus === '10'">
|
||||
<div
|
||||
class="goclass"
|
||||
@click="toFinish(item)"
|
||||
style="background: #999"
|
||||
>
|
||||
未解锁
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- <template #dropdown v-if="el.type===2 && el.targetId?.split(',')?.length > 1">
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="(name,key) in el.targetName?.split(',')" :key="key" @click="toOffcoursePlanPage(el.targetId?.split(',')[key])">{{ name }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template> -->
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<div class="task-type">
|
||||
{{ TASK_TYPES.typeName[item.courseType] }}
|
||||
</div>
|
||||
<div class="task-name">{{ item.taskName }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-empty description="暂无数据" />
|
||||
</template>
|
||||
<div
|
||||
class="task-state"
|
||||
:style="{
|
||||
color:
|
||||
item.completionStatus === '0'
|
||||
? '#C4C2C2'
|
||||
: item.completionStatus === '1'
|
||||
? '#0077EC'
|
||||
: '#FF8726',
|
||||
}"
|
||||
>
|
||||
{{
|
||||
item.completionStatus === "0"
|
||||
? "未开始"
|
||||
: item.completionStatus === "1"
|
||||
? "已完成"
|
||||
: "进行中"
|
||||
}}
|
||||
</div>
|
||||
<div style="display: flex; align-items: center">
|
||||
<div style="flex: 1">
|
||||
<el-progress
|
||||
:percentage="item.progress"
|
||||
:show-text="false"
|
||||
:stroke-width="3"
|
||||
:color="
|
||||
item.completionStatus === '0'
|
||||
? '#C4C2C2'
|
||||
: item.completionStatus === '1'
|
||||
? '#0077EC'
|
||||
: '#FF8726'
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div class="progress-text">{{ item.progress }}%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="stageProcessList && stageProcessList.length"> </template>
|
||||
<template v-else>
|
||||
<el-empty description="暂无数据" />
|
||||
</template>
|
||||
</div>
|
||||
<!-- 开课列表弹框 -->
|
||||
<el-dialog
|
||||
top="120px"
|
||||
title="开课列表"
|
||||
v-model="openCourseVisible"
|
||||
style="
|
||||
min-height: 320px;
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
"
|
||||
style="min-height: 320px; padding: 0; border-radius: 4px"
|
||||
width="80%"
|
||||
>
|
||||
<div style="width: 100%; min-height: 210px; margin-top: 12px">
|
||||
@@ -314,6 +236,8 @@ watch(data, () => {
|
||||
});
|
||||
// 学习任务列表
|
||||
const stageProcessList = ref([]);
|
||||
// 锚点跳转的次数
|
||||
const anchorNum = ref(0);
|
||||
onMounted(() => {
|
||||
dispatch("getGrowthInfo", { routerId, type });
|
||||
getList();
|
||||
@@ -330,6 +254,16 @@ const getList = () => {
|
||||
console.log(res);
|
||||
stageProcessList.value = res.data;
|
||||
loading.value = false;
|
||||
|
||||
if (anchorNum.value === 0) {
|
||||
let find = stageProcessList.value.find((item) => item.lastStudy);
|
||||
if (find) {
|
||||
// var aLink = document.createElement("a");
|
||||
// aLink.href = `#${find.id}`; // 设置链接地址
|
||||
// aLink.click();
|
||||
// document.body.removeChild(aLink);
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
const openCourseVisible = ref(false);
|
||||
@@ -544,7 +478,7 @@ async function toFinish(d) {
|
||||
pName: data.value.growthName,
|
||||
sName: d.taskName,
|
||||
chapterOrStageId: 0,
|
||||
|
||||
|
||||
// id: d.id,
|
||||
// type: PROJECT,
|
||||
// infoId: data.value.projectId,
|
||||
@@ -578,6 +512,9 @@ async function toFinish(d) {
|
||||
}
|
||||
}
|
||||
}
|
||||
const getAssetsFile = (url) => {
|
||||
return new URL(`../../assets/image/growth/type${url}.png`, import.meta.url).href
|
||||
}
|
||||
function toOffcoursePlanPage(id) {
|
||||
window.open(
|
||||
`${location.protocol}//${location.host}${
|
||||
@@ -586,177 +523,155 @@ function toOffcoursePlanPage(id) {
|
||||
"_top"
|
||||
);
|
||||
}
|
||||
const toPath = () => {
|
||||
router.push({
|
||||
path: "/growthPath",
|
||||
query: {
|
||||
routerId,
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.growth-details {
|
||||
padding: 0 15px 0 10px;
|
||||
background-image: url(@/assets/image/growth/bg.png);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
position: relative;
|
||||
.container {
|
||||
position: absolute;
|
||||
background-color: #ffffff;
|
||||
top: 165px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
border-radius: 15px 15px 0 0;
|
||||
padding: 5px 15px;
|
||||
.task-item {
|
||||
display: flex;
|
||||
padding: 20px 0;
|
||||
border-bottom: 1px solid #f5f5f5;
|
||||
.progress-text {
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
color: #333333;
|
||||
margin-left: 9px;
|
||||
}
|
||||
.task-img {
|
||||
width: 110px;
|
||||
height: 70px;
|
||||
margin-right: 11px;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.task-state {
|
||||
font-size: 13px;
|
||||
margin-top: 11px;
|
||||
margin-bottom: 13px;
|
||||
}
|
||||
.task-name {
|
||||
font-size: 14px;
|
||||
color: #000000;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 200px;
|
||||
}
|
||||
.task-type {
|
||||
background-image: url(@/assets/image/growth/task-type.png);
|
||||
width: 41px;
|
||||
height: 17px;
|
||||
background-size: 100% 100%;
|
||||
font-weight: 400;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
margin-right: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
.search-input {
|
||||
flex: 1;
|
||||
}
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
box-shadow: none;
|
||||
padding-left: 18px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20px;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.navbar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
.nav-title {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.nav-left {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: calc(50% - 10px);
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
width: 80%;
|
||||
}
|
||||
:deep(.el-dialog__body){
|
||||
:deep(.el-dialog__body) {
|
||||
padding-top: 0px;
|
||||
}
|
||||
.el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
width: 100%;
|
||||
|
||||
.tabs {
|
||||
padding: 12px 0 9px 0;
|
||||
background-color: #ffffff;
|
||||
padding: 12px 0 14px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.tabs-item {
|
||||
width: 135px;
|
||||
color: #ffffff;
|
||||
margin: 0 33px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
font-size: 15px;
|
||||
opacity: 0.7;
|
||||
font-weight: 700;
|
||||
}
|
||||
.tabs-line {
|
||||
width: 135px;
|
||||
height: 1px;
|
||||
margin-top: 2px;
|
||||
width: 39px;
|
||||
height: 3px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.active {
|
||||
color: #2478ff;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
opacity: 1;
|
||||
.tabs-line {
|
||||
background-color: #61a4f9;
|
||||
}
|
||||
}
|
||||
}
|
||||
.main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
//justify-content: center;
|
||||
.up {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
//justify-content: center;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
.content {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.title {
|
||||
margin-top: 15.5px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 21.6px;
|
||||
color: rgba(4, 36, 60, 1);
|
||||
}
|
||||
.text2 {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 22.5px;
|
||||
font-size: 13px;
|
||||
color: rgba(51, 51, 48, 1);
|
||||
line-height: 24px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.search-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
:deep(.el-input__wrapper) {
|
||||
box-shadow: none;
|
||||
padding-left: 0;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
padding-left: 40px;
|
||||
background-color: #eee;
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
.down {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
//justify-content: center;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
.project_title {
|
||||
width: calc(100% - 36.5px);
|
||||
display: flex;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 12px;
|
||||
color: rgba(13, 35, 58, 1);
|
||||
padding: 17px 0 17px 36.5px;
|
||||
border-bottom: 0.5px solid rgba(241, 242, 243, 1);
|
||||
}
|
||||
|
||||
.project_second {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 10.5px;
|
||||
.secondcontent {
|
||||
width: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-top: 10px;
|
||||
.question {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-left: 6px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
height: 72px;
|
||||
border-bottom: 0.5px solid rgba(241, 242, 243, 1);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.issue {
|
||||
width: 100%;
|
||||
font-size: 13px;
|
||||
line-height: 30.29px;
|
||||
color: rgba(110, 123, 132, 1);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.coursetag {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.goclass {
|
||||
width: 63px;
|
||||
height: 23px;
|
||||
background: #2478ff;
|
||||
// box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// margin-right: 37px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
background: #ffffff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,128 +1,169 @@
|
||||
<template>
|
||||
<div class="growth-path">
|
||||
<div class="nav">
|
||||
<ReturnHead text="专业力必修" :gohome="true"></ReturnHead>
|
||||
<div class="tabs">
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 1 ? 'active' : ''"
|
||||
@click="tabClick(1)"
|
||||
>
|
||||
<div class="tabs-text">必修</div>
|
||||
<div class="tabs-line"></div>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 2 ? 'active' : ''"
|
||||
@click="tabClick(2)"
|
||||
>
|
||||
<div class="tabs-text">选修</div>
|
||||
<div class="tabs-line"></div>
|
||||
</div>
|
||||
<div class="growth-details">
|
||||
<div class="navbar">
|
||||
<div class="nav-left">
|
||||
<el-icon color="#fff" size="20"><ArrowLeft /></el-icon>
|
||||
</div>
|
||||
<div class="nav-title">专业力必修</div>
|
||||
</div>
|
||||
<div class="tabs">
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 1 ? 'active' : ''"
|
||||
@click="tabClick(1)"
|
||||
>
|
||||
<div class="tabs-text">必修</div>
|
||||
<div class="tabs-line"></div>
|
||||
</div>
|
||||
<div
|
||||
class="tabs-item"
|
||||
:class="queryParams.type == 2 ? 'active' : ''"
|
||||
@click="tabClick(2)"
|
||||
>
|
||||
<div class="tabs-text">选修</div>
|
||||
<div class="tabs-line"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 占位容器防止塌陷 -->
|
||||
<div class="placeholder"></div>
|
||||
|
||||
<div
|
||||
class="path-container"
|
||||
v-loading="loading"
|
||||
:style="stageProcessList.length ? '' : 'height:400px'"
|
||||
>
|
||||
<template v-if="stageProcessList && stageProcessList.length">
|
||||
<div
|
||||
class="path-item"
|
||||
@click="toFinish(item)"
|
||||
v-for="(item, index) of stageProcessList"
|
||||
:key="item.id"
|
||||
<div class="search">
|
||||
<div class="search-input">
|
||||
<el-input
|
||||
v-model="queryParams.taskName"
|
||||
:input-style="{
|
||||
width: '100%',
|
||||
height: '40px',
|
||||
color: '#fff',
|
||||
}"
|
||||
@change="getList"
|
||||
placeholder="搜索关键字"
|
||||
>
|
||||
<div class="item-content">
|
||||
<div class="icon">
|
||||
<template v-if="item.lastStudy">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="@/assets/image/growth/growth-icon4.png"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="item.completionStatus === '1'">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="@/assets/image/growth/growth-icon1.png"
|
||||
/>
|
||||
</template>
|
||||
<template v-else-if="item.completionStatus === '2'">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="@/assets/image/growth/growth-icon2.png"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
v-else-if="
|
||||
item.completionStatus === '0' ||
|
||||
item.completionStatus === '10'
|
||||
"
|
||||
>
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="@/assets/image/growth/growth-icon3.png"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<template v-if="item.completionStatus !== '2'">
|
||||
<div class="item-text">
|
||||
{{
|
||||
`${item.taskName}${
|
||||
item.completionStatus === "10" ? "（未解锁）" : ""
|
||||
}`
|
||||
}}
|
||||
<template #prefix>
|
||||
<el-icon color="#fff" class="el-input__icon"><search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<el-dropdown>
|
||||
<img class="icon" src="@/assets/image/growth/qiehuan.png" />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="tabClick(null, '0')"
|
||||
>未开始</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="tabClick(null, '1')"
|
||||
>已完成</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="tabClick(null, '2')"
|
||||
>进行中</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<!-- <img class="icon" src="@/assets/image/growth/list.png" /> -->
|
||||
<img class="icon" @click="toPath" src="@/assets/image/growth/list.png" />
|
||||
</div>
|
||||
<div class="container" v-loading="loading">
|
||||
<div :style="{ transform: 'scale(' + transformSize + ')' }">
|
||||
<div class="path-container">
|
||||
<div
|
||||
:class="
|
||||
item.position + 1 < 3 || item.position + 1 == 4 || item.position + 1 == 6
|
||||
? 'path-item-left'
|
||||
: 'path-item-right'
|
||||
"
|
||||
@click="toFinish(item)"
|
||||
:style="point[item.position]"
|
||||
v-for="(item, index) of stageProcessList"
|
||||
>
|
||||
<template v-if="item.position + 1 < 3 || item.position + 1 == 4 || item.position + 1 == 6">
|
||||
<div>
|
||||
<div class="item-name">{{ item.taskName }}</div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div class="f-a-c">
|
||||
<div class="f-a-c">
|
||||
<div class="item-progress">
|
||||
<el-progress
|
||||
:percentage="parseInt(item.progress)"
|
||||
:show-text="false"
|
||||
:stroke-width="6"
|
||||
:color="stateData(item).progressColor"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item-state"
|
||||
:style="{
|
||||
color: stateData(item).color,
|
||||
background: stateData(item).bgColor,
|
||||
}"
|
||||
>
|
||||
{{ stateData(item).text }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="item-link">
|
||||
<div
|
||||
:style="{
|
||||
width: widthConfig(item.position).width,
|
||||
marginLeft: widthConfig(item.position).margin,
|
||||
}"
|
||||
class="line"
|
||||
></div>
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="item-progress">
|
||||
<div class="item-link">
|
||||
<div class="circle"></div>
|
||||
<div
|
||||
:style="{
|
||||
width: `${item.progress}%`,
|
||||
width: widthConfig(item.position).width,
|
||||
marginRight: widthConfig(item.position).margin,
|
||||
}"
|
||||
class="progress-content"
|
||||
>
|
||||
<div class="rocket">
|
||||
<img
|
||||
style="width: 100%; height: 100%"
|
||||
src="@/assets/image/growth/rocket.png"
|
||||
class="line"
|
||||
></div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<div class="item-name">{{ item.taskName }}</div>
|
||||
<div class="triangle"></div>
|
||||
</div>
|
||||
<div class="f-a-c" style="justify-content: flex-end">
|
||||
<div class="item-progress">
|
||||
<el-progress
|
||||
:percentage="parseInt(item.progress)"
|
||||
:show-text="false"
|
||||
:stroke-width="6"
|
||||
:color="stateData(item).progressColor"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="item-state"
|
||||
:style="{
|
||||
color: stateData(item).color,
|
||||
background: stateData(item).bgColor,
|
||||
}"
|
||||
>
|
||||
{{ stateData(item).text }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="progress-text">{{ item.taskName }}</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<template v-if="index != stageProcessList.length - 1">
|
||||
<div
|
||||
class="gap"
|
||||
:style="{
|
||||
height: item.completionStatus !== '2' ? '48px' : '70px',
|
||||
}"
|
||||
>
|
||||
<!-- 虚线不可删除 -->
|
||||
<div></div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<template v-if="stageProcessList && stageProcessList.length"> </template>
|
||||
<template v-else>
|
||||
<el-empty description="暂无数据" />
|
||||
</template>
|
||||
</div>
|
||||
<!-- 开课列表弹框 -->
|
||||
<el-dialog
|
||||
top="120px"
|
||||
title="开课列表"
|
||||
v-model="openCourseVisible"
|
||||
style="
|
||||
min-height: 320px;
|
||||
padding: 0;
|
||||
border-radius: 4px;
|
||||
"
|
||||
style="min-height: 320px; padding: 0; border-radius: 4px"
|
||||
width="80%"
|
||||
>
|
||||
<div style="width: 100%; min-height: 210px; margin-top: 12px">
|
||||
@@ -172,13 +213,10 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import ReturnHead from "@/components/ReturnHead.vue";
|
||||
import { computed, reactive, onMounted, onUnmounted, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { computed, reactive, ref, watch, onMounted } from "vue";
|
||||
import { ElLoading } from "element-plus";
|
||||
import { useRequest, request } from "@/api/request";
|
||||
import { growthRequest } from "@/api/growthRequest";
|
||||
import { GROWTH, TASK_TYPES } from "@/api/CONST";
|
||||
import { ElMessage } from "element-plus";
|
||||
import {
|
||||
EvaluationToLearn,
|
||||
QueryEvaluationTaskStatusOne,
|
||||
@@ -187,16 +225,21 @@ import {
|
||||
PROFESSIONAL_STUDENT_TASKLIST,
|
||||
PROFESSIONAL_STUDENT_LEARN,
|
||||
} from "@/api/api";
|
||||
import { useStore } from "vuex";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import store from "@/store";
|
||||
const { commit, dispatch, state } = useStore();
|
||||
import { ElMessage } from "element-plus";
|
||||
import ReturnHead from "@/components/ReturnHead.vue";
|
||||
import { GROWTH, TASK_TYPES } from "@/api/CONST";
|
||||
import dayjs from "dayjs";
|
||||
import { useStore } from "vuex";
|
||||
import { changeTime } from "@/api/method";
|
||||
const {
|
||||
query: { courseId, routerId, type, infoId, chapterOrStageId, id },
|
||||
} = useRoute();
|
||||
const router = useRouter();
|
||||
const { commit, dispatch, state } = useStore();
|
||||
// 专业力必修详情
|
||||
const data = computed(() => state.growthInfo);
|
||||
const userInfo = computed(() => store.state.userInfo);
|
||||
// 查询条件
|
||||
const queryParams = reactive({
|
||||
type: 1,
|
||||
@@ -213,6 +256,31 @@ const tabClick = (type, status) => {
|
||||
getList();
|
||||
};
|
||||
|
||||
watch(data, () => {
|
||||
if (data.value.code === 6) {
|
||||
router.push({
|
||||
path: "/notpath",
|
||||
});
|
||||
}
|
||||
});
|
||||
// 学习任务列表
|
||||
const stageProcessList = ref([]);
|
||||
// 锚点跳转的次数
|
||||
const anchorNum = ref(0);
|
||||
onMounted(() => {
|
||||
updateWindowWidth(); // 初始化宽度
|
||||
window.addEventListener("resize", updateWindowWidth);
|
||||
dispatch("getGrowthInfo", { routerId, type });
|
||||
getList();
|
||||
});
|
||||
// 储存屏幕宽
|
||||
const windowWidth = ref(0);
|
||||
const transformSize = ref(1);
|
||||
|
||||
const updateWindowWidth = () => {
|
||||
windowWidth.value = window.innerWidth;
|
||||
transformSize.value = windowWidth.value / 414;
|
||||
};
|
||||
// 是否加载数据中
|
||||
const loading = ref(false);
|
||||
const getList = () => {
|
||||
@@ -221,21 +289,183 @@ const getList = () => {
|
||||
growthId: routerId,
|
||||
...queryParams,
|
||||
}).then((res) => {
|
||||
console.log(res);
|
||||
stageProcessList.value = res.data;
|
||||
let newData = res.data.slice(0, 15);
|
||||
// 默认第一个在第一点位
|
||||
let num = 15 / newData.length;
|
||||
stageProcessList.value = newData.map((item, index) => {
|
||||
// 默认第一个在第一点位
|
||||
if (index === 0) {
|
||||
item.position = 0;
|
||||
}
|
||||
item.position = Number((index * num).toFixed());
|
||||
return item;
|
||||
});
|
||||
|
||||
if (anchorNum.value === 0) {
|
||||
let find = stageProcessList.value.find((item) => item.lastStudy);
|
||||
if (find) {
|
||||
// var aLink = document.createElement("a");
|
||||
// aLink.href = `#${find.id}`; // 设置链接地址
|
||||
// aLink.click();
|
||||
// document.body.removeChild(aLink);
|
||||
}
|
||||
}
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
// 学习任务列表
|
||||
const stageProcessList = ref([]);
|
||||
onMounted(() => {
|
||||
dispatch("getGrowthInfo", { routerId, type });
|
||||
getList();
|
||||
});
|
||||
const openCourseVisible = ref(false);
|
||||
const openCourseList = ref([]);
|
||||
const openCourseIdList = ref([]);
|
||||
|
||||
const userInfo = computed(() => store.state.userInfo);
|
||||
|
||||
const point = [
|
||||
{
|
||||
top: "-15px",
|
||||
right: "57px",
|
||||
},
|
||||
{
|
||||
top: "51px",
|
||||
right: "106px",
|
||||
},
|
||||
{
|
||||
top: "132px",
|
||||
right: "-26px",
|
||||
},
|
||||
{
|
||||
top: "124px",
|
||||
right: "146px",
|
||||
},
|
||||
{
|
||||
top: "207px",
|
||||
right: "10px",
|
||||
},
|
||||
{
|
||||
top: "204px",
|
||||
right: "181px",
|
||||
},
|
||||
{
|
||||
top: "288px",
|
||||
left: "109px",
|
||||
},
|
||||
{
|
||||
top: "356px",
|
||||
left: "91px",
|
||||
},
|
||||
{
|
||||
top: "435px",
|
||||
left: "76px",
|
||||
},
|
||||
{
|
||||
top: "503px",
|
||||
left: "66px",
|
||||
},
|
||||
{
|
||||
top: "580px",
|
||||
left: "57px",
|
||||
},
|
||||
{
|
||||
top: "649px",
|
||||
left: "51px",
|
||||
},
|
||||
{
|
||||
top: "720px",
|
||||
left: "51px",
|
||||
},
|
||||
{
|
||||
top: "790px",
|
||||
left: "45px",
|
||||
},
|
||||
{
|
||||
top: "860px",
|
||||
left: "45px",
|
||||
},
|
||||
];
|
||||
// 基础配置项
|
||||
const widthConfig = computed(() => {
|
||||
return (index) => {
|
||||
if (index === 0) {
|
||||
return {
|
||||
width: "60px",
|
||||
margin: "19px",
|
||||
};
|
||||
} else if (index === 1) {
|
||||
return {
|
||||
width: "60px",
|
||||
margin: "19px",
|
||||
};
|
||||
} else if (index === 2) {
|
||||
return {
|
||||
width: "25px",
|
||||
margin: "0",
|
||||
};
|
||||
} else if (index === 3) {
|
||||
return {
|
||||
width: "30px",
|
||||
margin: "0px",
|
||||
};
|
||||
} else if (index === 4) {
|
||||
return {
|
||||
width: "25px",
|
||||
margin: "0",
|
||||
};
|
||||
} else if (index === 5) {
|
||||
return {
|
||||
width: "10px",
|
||||
margin: "0",
|
||||
};
|
||||
} else if (index === 6) {
|
||||
return {
|
||||
width: "50px",
|
||||
margin: "0",
|
||||
};
|
||||
} else if (index === 7) {
|
||||
return {
|
||||
width: "60px",
|
||||
margin: "0px",
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
width: "70px",
|
||||
margin: "0px",
|
||||
};
|
||||
}
|
||||
};
|
||||
});
|
||||
// 基础配置项
|
||||
const stateData = computed(() => {
|
||||
return (item) => {
|
||||
if (item.completionStatus === "10") {
|
||||
return {
|
||||
text: "未解锁",
|
||||
color: "#666666",
|
||||
bgColor: "rgba(102, 102, 102, 0.2)",
|
||||
progressColor: "#AEB3B8",
|
||||
};
|
||||
} else if (item.completionStatus === "0") {
|
||||
return {
|
||||
text: "未开始",
|
||||
color: "#666666",
|
||||
bgColor: "rgba(102, 102, 102, 0.2)",
|
||||
progressColor: "#AEB3B8",
|
||||
};
|
||||
} else if (item.completionStatus === "1") {
|
||||
return {
|
||||
text: "已完成",
|
||||
color: "#0077EC",
|
||||
bgColor: "rgba(0, 119, 236, 0.2)",
|
||||
progressColor: "#0077EC",
|
||||
};
|
||||
} else if (item.completionStatus === "2") {
|
||||
return {
|
||||
text: "进行中",
|
||||
color: "#F2903D",
|
||||
bgColor: "rgba(242, 144, 61, 0.2)",
|
||||
progressColor: "#F2903D",
|
||||
};
|
||||
}
|
||||
};
|
||||
});
|
||||
async function toFinish(d) {
|
||||
if (d.completionStatus == 10) {
|
||||
ElMessage.warning("当前未解锁");
|
||||
@@ -484,104 +714,232 @@ function toOffcoursePlanPage(id) {
|
||||
"_top"
|
||||
);
|
||||
}
|
||||
const toPath = () => {
|
||||
router.push({
|
||||
path: "/growthDetails",
|
||||
query: {
|
||||
routerId,
|
||||
},
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.growth-path {
|
||||
min-height: 100vh;
|
||||
.f-a-c {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.growth-details {
|
||||
background-image: url(@/assets/image/growth/bg.png);
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
|
||||
:deep(.el-dialog__body){
|
||||
padding-top: 0px;
|
||||
}
|
||||
.path-item {
|
||||
.item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.progress-content {
|
||||
position: relative;
|
||||
height: 15px;
|
||||
border-radius: 16px;
|
||||
height: 15px;
|
||||
background: linear-gradient(90deg, #fecd49 0%, #e13915 100%);
|
||||
.rocket {
|
||||
position: absolute;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
right: -18px;
|
||||
top: -11px;
|
||||
}
|
||||
}
|
||||
.item-progress {
|
||||
position: relative;
|
||||
height: 15px;
|
||||
border-radius: 16px;
|
||||
flex: 1;
|
||||
background: #ededed;
|
||||
margin-left: 6px;
|
||||
.progress-text {
|
||||
position: absolute;
|
||||
top: 22px;
|
||||
}
|
||||
}
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.item-text {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
.gap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
div {
|
||||
height: 100%;
|
||||
border-left: 1px dashed #c5c6ca;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.path-container {
|
||||
padding: 28px;
|
||||
}
|
||||
.placeholder {
|
||||
height: 98px;
|
||||
}
|
||||
.nav {
|
||||
position: fixed;
|
||||
position: relative;
|
||||
.container {
|
||||
position: absolute;
|
||||
background-color: #ffffff;
|
||||
background-image: url(@/assets/image/growth/path-bg.png);
|
||||
background-size: 100% 100%;
|
||||
top: 165px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 15px 15px 0 0;
|
||||
.path-container {
|
||||
position: relative;
|
||||
height: 935px;
|
||||
margin: 53px 45px 31px 63px;
|
||||
box-sizing: border-box;
|
||||
background-image: url(@/assets/image/growth/path-arrow.png);
|
||||
background-size: 100%;
|
||||
.path-item-left {
|
||||
position: absolute;
|
||||
// width: 125px;
|
||||
|
||||
.item-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.line {
|
||||
height: 2px;
|
||||
background: linear-gradient(-90deg, #ffffff 0%, #0077ec 65%);
|
||||
border-image: linear-gradient(-90deg, #ffffff, #0077ec) 10 10;
|
||||
}
|
||||
.circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #0077ec;
|
||||
}
|
||||
}
|
||||
.item-progress {
|
||||
width: 71px;
|
||||
}
|
||||
.item-state {
|
||||
width: 48px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.item-name {
|
||||
max-width: 125px;
|
||||
min-width: 40px;
|
||||
display: inline-block;
|
||||
background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
padding: 8px 5px 9px 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.triangle {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #4391f8;
|
||||
margin-left: 22px;
|
||||
}
|
||||
}
|
||||
.path-item-right {
|
||||
position: absolute;
|
||||
// width: 125px;
|
||||
display: flex;
|
||||
|
||||
.item-link {
|
||||
height: 28px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.line {
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #ffffff 0%, #0077ec 65%);
|
||||
border-image: linear-gradient(0deg, #ffffff, #0077ec) 10 10;
|
||||
}
|
||||
.circle {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #ffffff;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #0077ec;
|
||||
}
|
||||
}
|
||||
.item-progress {
|
||||
width: 71px;
|
||||
}
|
||||
.item-state {
|
||||
width: 48px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
line-height: 16px;
|
||||
margin-left: 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.item-name {
|
||||
max-width: 125px;
|
||||
min-width: 40px;
|
||||
display: inline-block;
|
||||
background: linear-gradient(268deg, #3c65f5 0%, #4395f9 100%);
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
padding: 8px 5px 9px 10px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.triangle {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
border: 5px solid transparent;
|
||||
border-top-color: #4391f8;
|
||||
margin-left: 22px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tabs {
|
||||
.search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 15px;
|
||||
.search-input {
|
||||
flex: 1;
|
||||
}
|
||||
.icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
:deep(.el-input__wrapper) {
|
||||
box-shadow: none;
|
||||
padding-left: 18px;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 20px;
|
||||
}
|
||||
:deep(.el-input__inner) {
|
||||
background-color: rgba(255, 255, 255, 0);
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.navbar {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
padding: 12px 0 9px 0;
|
||||
margin-top: 10px;
|
||||
box-sizing: border-box;
|
||||
background-color: #ffffff;
|
||||
.nav-title {
|
||||
font-weight: 500;
|
||||
font-size: 18px;
|
||||
color: #ffffff;
|
||||
}
|
||||
.nav-left {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: calc(50% - 10px);
|
||||
}
|
||||
}
|
||||
.el-dialog__body {
|
||||
width: 80%;
|
||||
}
|
||||
:deep(.el-dialog__body) {
|
||||
padding-top: 0px;
|
||||
}
|
||||
.el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
padding: 12px 0 14px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.tabs-item {
|
||||
width: 135px;
|
||||
color: #ffffff;
|
||||
margin: 0 33px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 18px;
|
||||
font-size: 15px;
|
||||
opacity: 0.7;
|
||||
font-weight: 700;
|
||||
}
|
||||
.tabs-line {
|
||||
width: 135px;
|
||||
height: 1px;
|
||||
margin-top: 2px;
|
||||
width: 39px;
|
||||
height: 3px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.active {
|
||||
color: #2478ff;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
opacity: 1;
|
||||
.tabs-line {
|
||||
background-color: #61a4f9;
|
||||
background: #ffffff;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,10 +43,14 @@ export default defineConfig(({ command, mode }) =>
|
||||
server: {
|
||||
// host: "192.168.3.51",
|
||||
proxy: {
|
||||
"/professional": {
|
||||
// target: 'http://192.168.237.141:32002',
|
||||
target: 'http://192.168.150.97:32002',
|
||||
changeOrigin: true,
|
||||
// "/professional": {
|
||||
// // target: 'http://192.168.237.141:32002',
|
||||
// target: 'http://192.168.150.97:32002',
|
||||
// changeOrigin: true,
|
||||
// },
|
||||
"/growth": {
|
||||
target: 'https://u-pre.boe.com',
|
||||
changeOrigin: true,
|
||||
},
|
||||
"/file/upload": {
|
||||
target: loadEnv(mode, process.cwd()).VITE_PROXY_URL,
|
||||
|
||||
Reference in New Issue
Block a user