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

style:隐藏我的路径图加载时蓝色背景

Browse Source
This commit is contained in:
wuyx
2022-12-20 11:36:34 +08:00
parent b05084384e
commit 24641add71
1 changed files with 258 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

557
src/views/roadmap/LearnPath.vue
View File

@@ -1,151 +1,106 @@
<template> <template>
<div class="learnpath"> <div class="learnpath">
<div class="content"> <div class="content">
<div class="title"> <div class="title">
<div class="titleL"> <div class="titleL">
<div @click="returnfun" class="text">学习路径图</div> <div @click="returnfun" class="text">学习路径图</div>
<div class="info" style="margin-right: 14px" v-if="userInfo.jobName"> <div class="info" style="margin-right: 14px" v-if="userInfo.jobName">
<img <img style="width: 20px; height: 18px; margin-right: 10px" src="../../assets/image/pm.png" />
style="width: 20px; height: 18px; margin-right: 10px" <div style="margin-top: 1px">{{ userInfo.jobName }}</div>
src="../../assets/image/pm.png" </div>
/> <div class="info" v-if="userInfo.bandDesc">
<div style="margin-top: 1px">{{ userInfo.jobName }}</div> <img style="width: 18px; height: 17px; margin-right: 11px" src="../../assets/image/band.png" />
</div> <div style="margin-top: 2px">{{ userInfo.bandDesc }}</div>
<div class="info" v-if="userInfo.bandDesc"> </div>
<img </div>
style="width: 18px; height: 17px; margin-right: 11px" <div :style="{ display: !showmapdetail ? 'flex' : 'none' }">
src="../../assets/image/band.png" <!-- <el-popover width="475px" trigger="hover" popper-class="lppopover">-->
/> <!-- <div>-->
<div style="margin-top: 2px">{{ userInfo.bandDesc }}</div> <!-- <div class="finish">-->
</div> <!-- <img-->
</div> <!-- src="../../assets/image/circle.png"-->
<div :style="{ display: !showmapdetail ? 'flex' : 'none' }"> <!-- style="width: 20px; height: 20px"-->
<!-- <el-popover width="475px" trigger="hover" popper-class="lppopover">--> <!-- />-->
<!-- <div>--> <!-- <div class="text">未完成</div>-->
<!-- <div class="finish">--> <!-- <div class="box"></div>-->
<!-- <img--> <!-- </div>-->
<!-- src="../../assets/image/circle.png"--> <!-- <div-->
<!-- style="width: 20px; height: 20px"--> <!-- v-for="(value, index) in unCompleteTaskList"-->
<!-- />--> <!-- :key="index"-->
<!-- <div class="text">未完成</div>--> <!-- class="tasks"-->
<!-- <div class="box"></div>--> <!-- :style="{-->
<!-- </div>--> <!-- 'border-bottom':-->
<!-- <div--> <!-- index === unCompleteTaskList.length - 1-->
<!-- v-for="(value, index) in unCompleteTaskList"--> <!-- ? null-->
<!-- :key="index"--> <!-- : '1px solid rgba(229, 228, 228, 1)',-->
<!-- class="tasks"--> <!-- }"-->
<!-- :style="{--> <!-- >-->
<!-- 'border-bottom':--> <!-- <div style="font-size: 14px; font-weight: 500; color: #677d86">-->
<!-- index === unCompleteTaskList.length - 1--> <!-- {{ value.name }}-->
<!-- ? null--> <!-- </div>-->
<!-- : '1px solid rgba(229, 228, 228, 1)',--> <!-- <img-->
<!-- }"--> <!-- style="width: 20px; height: 20px"-->
<!-- >--> <!-- src="../../assets/image/go.png"-->
<!-- <div style="font-size: 14px; font-weight: 500; color: #677d86">--> <!-- @click="toUnTask(chapterId)"-->
<!-- {{ value.name }}--> <!-- />-->
<!-- </div>--> <!-- </div>-->
<!-- <img--> <!-- </div>-->
<!-- style="width: 20px; height: 20px"--> <!-- <template #reference>-->
<!-- src="../../assets/image/go.png"--> <!-- todo #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情-->
<!-- @click="toUnTask(chapterId)"--> <!-- <div class="titleR">进入未完成任务</div>-->
<!-- />--> <!-- </template>-->
<!-- </div>--> <!-- </el-popover>-->
<!-- </div>--> </div>
<!-- <template #reference>--> <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="titleR" @click="returnfun">
<!-- todo #学习路径 只会有一个未完成任务么?是否是直接跳到任务详情--> 返回列表
<!-- <div class="titleR">进入未完成任务</div>--> </div>
<!-- </template>--> </div>
<!-- </el-popover>--> <!-- 路径列表-->
</div> <div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head">
<div <div style="min-width: 770px; width: 100%">
:style="{ display: showmapdetail ? 'flex' : 'none' }" <el-table :data="data" style="width: 100%" @row-click="gofun">
class="titleR" <el-table-column prop="img" label="缩略图" #default="scope" align="center" width="255">
@click="returnfun" <img :src="scope.row.picUrl" style="width: 230px; height: 155px" />
> </el-table-column>
返回列表 <el-table-column align="center" prop="name" label="路径名称" />
</div> <el-table-column align="center" prop="introduce" label="路径介绍" #default="scope">
</div> <el-popover placement="top-start" title="路径介绍" trigger="hover" :content="scope.row.remark">
<!-- 路径列表--> <template #reference>
<div :style="{ display: !showmapdetail ? 'flex' : 'none' }" class="head"> <div>{{ scope.row.remark }}</div>
<div style="min-width: 770px; width: 100%"> </template>
<el-table :data="data" style="width: 100%" @row-click="gofun"> </el-popover>
<el-table-column </el-table-column>
prop="img"
label="缩略图"
#default="scope"
align="center"
width="255"
>
<img
:src="scope.row.picUrl"
style="width: 230px; height: 155px"
/>
</el-table-column>
<el-table-column align="center" prop="name" label="路径名称" />
<el-table-column
align="center"
prop="introduce"
label="路径介绍"
#default="scope"
>
<el-popover
placement="top-start"
title="路径介绍"
trigger="hover"
:content="scope.row.remark"
>
<template #reference>
<div>{{ scope.row.remark }}</div>
</template>
</el-popover>
</el-table-column>
<el-table-column <el-table-column align="center" prop="organizationName" label="归属组织" />
align="center" <el-table-column #default="scope" align="center" :width="150" prop="state" label="状态">
prop="organizationName" <img :src="
label="归属组织" scope.row.status === 0
/> ? ongoing
<el-table-column : scope.row.status === 1
#default="scope" ? completed
align="center" : scope.row.status === -1
:width="150" ? nostarted
prop="state" : null
label="状态" " style="width: 99px; height: 99px" />
> </el-table-column>
<img </el-table>
:src=" </div>
scope.row.status === 0 </div>
? ongoing
: scope.row.status === 1
? completed
: scope.row.status === -1
? nostarted
: null
"
style="width: 99px; height: 99px"
/>
</el-table-column>
</el-table>
</div>
</div>
<!-- :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"--> <!-- :src="{ 0: nostarted, 1: completed, 2: ongoing }[scope.row.status]"-->
<!-- 路径列表--> <!-- 路径列表-->
<!-- 路径详情图 --> <!-- 路径详情图 -->
<div <div :style="{ display: showmapdetail ? 'flex' : 'none' }" class="mapdetail">
:style="{ display: showmapdetail ? 'flex' : 'none' }" <div v-for="(item, i) in detail?.rows" :key="i">
class="mapdetail" <img :src="useImage(`222_0${i + 2}.png`)" />
> </div>
<div v-for="(item, i) in detail?.rows" :key="i"> <!-- <div class="modal"-->
<img :src="useImage(`222_0${i + 2}.png`)" /> <!-- style="width: calc(100% - 168px); height: 525px;background-image: url('../../src/assets/image/mapdetail.png');background-size: 100%;background-repeat: no-repeat;">-->
</div> <!-- </div>-->
<!-- <div class="modal"--> </div>
<!-- style="width: calc(100% - 168px); height: 525px;background-image: url('../../src/assets/image/mapdetail.png');background-size: 100%;background-repeat: no-repeat;">--> <!-- 路径详情图 -->
<!-- </div>--> </div>
</div> </div>
<!-- 路径详情图 -->
</div>
</div>
</template> </template>
<script setup> <script setup>
import { reactive, toRefs, ref, onMounted, computed } from "vue"; import { reactive, toRefs, ref, onMounted, computed } from "vue";
@@ -154,9 +109,9 @@ import completed from "../../assets/image/completed.png";
import ongoing from "../../assets/image/ongoing.png"; import ongoing from "../../assets/image/ongoing.png";
import { boeRequest, request, usePage, useRequest } from "@/api/request"; import { boeRequest, request, usePage, useRequest } from "@/api/request";
import { import {
ROUTER_CHAPTER_LIST, ROUTER_CHAPTER_LIST,
ROUTER_LIST, ROUTER_LIST,
ROUTER_UNCOMPLETE_LIST, ROUTER_UNCOMPLETE_LIST,
} from "@/api/api"; } from "@/api/api";
import { useImage } from "@/api/utils"; import { useImage } from "@/api/utils";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
@@ -168,193 +123,197 @@ const { data } = usePage(ROUTER_LIST, { pageSize: 60 });
console.log("datadata", data); console.log("datadata", data);
const router = useRouter(); const router = useRouter();
const returnclick = () => { const returnclick = () => {
router.back(); router.back();
}; };
// const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {}); // const {unCompleteTaskList} = useRequest(ROUTER_UNCOMPLETE_LIST, {});
const state = reactive({ const state = reactive({
showmapdetail: false, showmapdetail: false,
}); });
const { showmapdetail } = toRefs(state); const { showmapdetail } = toRefs(state);
const returnfun = () => { const returnfun = () => {
state.showmapdetail = false; state.showmapdetail = false;
}; };
async function gofun({ routerId, name: routerName }) { async function gofun({ routerId, name: routerName }) {
// console.log(routerId) // console.log(routerId)
// const data = await request(ROUTER_CHAPTER_LIST, {stuChapterListVo: {routerId}}) // const data = await request(ROUTER_CHAPTER_LIST, {stuChapterListVo: {routerId}})
// detail.value = data.data // detail.value = data.data
// state.showmapdetail = true; // state.showmapdetail = true;
// router.push({path: "/pathdetails", query: {routerId}}); // router.push({path: "/pathdetails", query: {routerId}});
import.meta.env.MODE === "development" import.meta.env.MODE === "development"
? router.push({ ? router.push({
path: "/pathdetails", path: "/pathdetails",
query: { routerId, routerName }, query: { routerId, routerName },
}) })
: window.open( : window.open(
`http://u-pre.boe.com/pc/forward?to=/fe-student/pathdetails&params=${encodeURIComponent( `http://u-pre.boe.com/pc/forward?to=/fe-student/pathdetails&params=${encodeURIComponent(
`routerId=${routerId}&routerName=${routerName}` `routerId=${routerId}&routerName=${routerName}`
)}` )}`
); );
} }
function toUnTask() {} function toUnTask() { }
</script> </script>
<style lang="scss"> <style lang="scss">
.modal { #app div:nth-child(1) {
background: rgba(0, 0, 0, 0) !important;
} }
.modal {}
.modal:after { .modal:after {
content: ""; content: "";
} }
.learnpath { .learnpath {
width: 100%; width: 100%;
min-height: 800px; min-height: 800px;
//border-radius: 8px; //border-radius: 8px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
display: flex; display: flex;
.content { .content {
width: 100%; width: 100%;
// flex: 1; // flex: 1;
margin-top: 43px; margin-top: 43px;
// background-color: pink;
.title {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: 53px;
margin-right: 54px;
}
.title .titleL { // background-color: pink;
display: flex; .title {
align-items: center; display: flex;
} justify-content: space-between;
align-items: center;
margin-left: 53px;
margin-right: 54px;
}
.title .titleL .text { .title .titleL {
font-size: 18px; display: flex;
font-weight: bold; align-items: center;
color: #333333; }
line-height: 24px;
margin-right: 26px;
}
.title .titleL .info { .title .titleL .text {
display: flex; font-size: 18px;
// align-items: center; font-weight: bold;
font-size: 14px; color: #333333;
font-weight: 400; line-height: 24px;
color: #387df7; margin-right: 26px;
} }
.title .titleR { .title .titleL .info {
width: 157px; display: flex;
height: 48px; // align-items: center;
border: 2px solid #0060ff; font-size: 14px;
border-radius: 8px; font-weight: 400;
display: flex; color: #387df7;
align-items: center; }
justify-content: center;
cursor: pointer;
font-size: 16px;
font-weight: bold;
color: #0060ff;
}
.head { .title .titleR {
// height: 50px; width: 157px;
background: #f9f9f9; height: 48px;
margin-top: 50px; border: 2px solid #0060ff;
display: flex; border-radius: 8px;
justify-content: space-between; display: flex;
align-items: center; align-items: center;
font-size: 14px; justify-content: center;
font-weight: 500; cursor: pointer;
color: #333333; font-size: 16px;
margin-left: 53px; font-weight: bold;
margin-right: 54px; color: #0060ff;
width: calc(100% - 107px); }
// min-width: 770px;
overflow-x: auto;
.el-table th.el-table__cell { .head {
background: rgba(249, 249, 249, 1); // height: 50px;
color: rgba(51, 51, 51, 1); background: #f9f9f9;
font-size: 14px; margin-top: 50px;
font-weight: 500; display: flex;
} justify-content: space-between;
align-items: center;
font-size: 14px;
font-weight: 500;
color: #333333;
margin-left: 53px;
margin-right: 54px;
width: calc(100% - 107px);
// min-width: 770px;
overflow-x: auto;
.el-table .cell { .el-table th.el-table__cell {
overflow: hidden; background: rgba(249, 249, 249, 1);
text-overflow: ellipsis; color: rgba(51, 51, 51, 1);
width: 100%; font-size: 14px;
display: -webkit-box; font-weight: 500;
-webkit-box-orient: vertical; }
-webkit-line-clamp: 3;
word-break: break-all;
}
.el-table__row { .el-table .cell {
height: 231px; overflow: hidden;
font-size: 14px; text-overflow: ellipsis;
color: rgba(102, 102, 102, 1); width: 100%;
font-weight: 500; display: -webkit-box;
} -webkit-box-orient: vertical;
} -webkit-line-clamp: 3;
word-break: break-all;
}
.mapdetail { .el-table__row {
width: calc(100% - 107px); height: 231px;
height: 577px; font-size: 14px;
background: rgba(242, 245, 247, 0.6); color: rgba(102, 102, 102, 1);
margin-top: 26px; font-weight: 500;
border-radius: 8px; }
margin-left: 53px; }
margin-right: 54px;
display: flex; .mapdetail {
align-items: center; width: calc(100% - 107px);
justify-content: center; height: 577px;
} background: rgba(242, 245, 247, 0.6);
} margin-top: 26px;
border-radius: 8px;
margin-left: 53px;
margin-right: 54px;
display: flex;
align-items: center;
justify-content: center;
}
}
} }
.lppopover { .lppopover {
.finish { .finish {
padding-left: 27px; padding-left: 27px;
padding-right: 18px; padding-right: 18px;
margin-top: 15px; margin-top: 15px;
margin-bottom: 17px; margin-bottom: 17px;
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.text { .text {
font-size: 16px; font-size: 16px;
font-weight: 800; font-weight: 800;
color: #333333; color: #333333;
margin-left: 8px; margin-left: 8px;
} }
.box { .box {
width: 59px; width: 59px;
height: 10px; height: 10px;
background-color: rgba(36, 120, 255, 0.15); background-color: rgba(36, 120, 255, 0.15);
position: absolute; position: absolute;
left: 50px; left: 50px;
top: 15px; top: 15px;
} }
.tasks { .tasks {
width: 405px; width: 405px;
height: 52px; height: 52px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-left: 28px; margin-left: 28px;
cursor: pointer; cursor: pointer;
} }
} }
</style> </style>