mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-15 22:06:48 +08:00
754 lines
24 KiB
Vue
754 lines
24 KiB
Vue
<template>
|
|
<div class="pathdetails" style="padding: 30px">
|
|
<!-- 面包屑导航 -->
|
|
<div class="crumb">
|
|
<div>{{ routerName }}</div>
|
|
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
|
<div style="font-weight: 700">路径图详情</div>
|
|
</div>
|
|
<!-- 面包屑导航 -->
|
|
<div class="pdname">
|
|
{{ userInfo.bandDesc }}
|
|
<span @click="introductionPro" style="font-size:14px;color:#fff;margin-left: 33px;cursor: pointer;">简介
|
|
<span style="position: relative;top:1px;left:-3px;cursor: pointer;">></span>
|
|
</span>
|
|
</div>
|
|
<!-- 详细信息 -->
|
|
<div class="detailinfo">
|
|
<div class="detailL">
|
|
<div>
|
|
<div class="title">
|
|
<div class="titleL">{{ data.currentStageName }}</div>
|
|
<div class="titleR" :style="{ display: 'flex' }">
|
|
<img
|
|
:src="data.currentChapterCnt?circle:circle2"/>
|
|
<div class="titleRT" :style="{color:data.currentChapterCnt?'':'rgba(102, 102, 102, 1)'}">
|
|
{{ data.currentChapterCnt ? '进行中' : '未开始' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="course"
|
|
v-for="(value, index) in data.taskBoList?.filter(
|
|
(e) => !whiteTypes(e.type)
|
|
)"
|
|
:key="index"
|
|
>
|
|
<div style="width: 70%">
|
|
<div class="coursename" :title="value.name">{{ value.name }}</div>
|
|
<div class="coursetag">
|
|
<div
|
|
class="tag1"
|
|
style="margin-right: 11px; margin-top: 16px"
|
|
v-if="value.flag"
|
|
>
|
|
必修
|
|
</div>
|
|
<div
|
|
class="tag2"
|
|
style="margin-right: 11px; margin-top: 16px"
|
|
v-if="!value.flag"
|
|
>
|
|
选修
|
|
</div>
|
|
<div class="tag3" style="margin-right: 11px; margin-top: 16px">
|
|
{{ types.typeName[value.type] || "" }}
|
|
</div>
|
|
|
|
<!-- <div-->
|
|
<!-- v-for="(item, key) in value.flag"-->
|
|
<!-- :key="key"-->
|
|
<!-- :class="{1:'tag1',2:'tag2',3:'tag3',4:'tag4'}[item.type]"-->
|
|
<!-- style="margin-right: 11px; margin-top: 16px"-->
|
|
<!-- >-->
|
|
<!-- {{ item.name }}-->
|
|
<!-- </div>-->
|
|
</div>
|
|
<div
|
|
class="progressBox"
|
|
:style="{ display: value.type === 1 ? 'block' : 'none' }"
|
|
>
|
|
<div>当前进度</div>
|
|
<div class="progress">
|
|
<div style="width: 291px">
|
|
<el-progress
|
|
:percentage="value.currentRatio"
|
|
: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)',
|
|
}[parseInt(value.currentRatio / 20)]
|
|
"
|
|
/>
|
|
</div>
|
|
<div
|
|
style="
|
|
font-size: 14px;
|
|
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)',
|
|
}[parseInt(value.currentRatio / 20)],
|
|
}"
|
|
>
|
|
{{ value.currentRatio }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="goclass"
|
|
:style="{
|
|
background: `${types.path[value.type] ? '#2478ff' : '#999'}`,
|
|
}"
|
|
@click="toFinish(value)"
|
|
>
|
|
{{
|
|
value.status === 1
|
|
? "已完成"
|
|
: types.path[value.type]
|
|
? types.toName[value.type]
|
|
: "未开放"
|
|
}}
|
|
</div>
|
|
<!-- <div :style="{ display: value.status === 1 ? 'block' : 'none' }">-->
|
|
<!-- <div-->
|
|
<!-- class="goclass"-->
|
|
<!-- :style="{ display: value.currentRatio === 0 ? 'none' : 'flex' }">去上课-->
|
|
<!-- </div>-->
|
|
<!-- <img-->
|
|
<!-- style="width: 76px; height: 76px; margin-right: 61px"-->
|
|
<!-- :style="{ display: value.currentRatio === 0 ? 'flex' : 'none' }"-->
|
|
<!-- src="../../assets/image/pathdetails/notstarted.png"-->
|
|
<!-- />-->
|
|
<!-- </div>-->
|
|
</div>
|
|
</div>
|
|
<!-- <div class="tag1">必修</div>
|
|
<div class="tag2">选修</div>
|
|
<div class="tag3">测评</div>
|
|
<div class="tag4">#通用力</div> -->
|
|
</div>
|
|
<div class="detailR">
|
|
<!-- todo #路径详情 课程公告及共享文档缺失-->
|
|
<!-- 课程公告及共享文档 -->
|
|
<div class="detailRT">
|
|
<el-tabs v-model="activeName" @tab-click="handleClick">
|
|
<el-tab-pane label="课程公告" name="first">
|
|
<div class="notice">
|
|
{{ data.remark || "暂无公告" }}
|
|
</div>
|
|
</el-tab-pane>
|
|
<!--
|
|
<el-tab-pane label="共享文档" name="second"> -->
|
|
<!-- <div style="padding: 19px 30px 17px 28px">-->
|
|
<!-- <div-->
|
|
<!-- v-for="(value, index) in sharedoc"-->
|
|
<!-- :key="index"-->
|
|
<!-- style="-->
|
|
<!-- display: flex;-->
|
|
<!-- align-items: center;-->
|
|
<!-- margin-bottom: 15px;-->
|
|
<!-- "-->
|
|
<!-- >-->
|
|
<!-- <img :src="value.img" style="width: 22px; height: 26px"/>-->
|
|
<!-- <div class="sharedocname">{{ value.name }}</div>-->
|
|
<!-- <div class="download">-->
|
|
<!-- <img-->
|
|
<!-- src="../../assets/image/download.png"-->
|
|
<!-- style="width: 16px; height: 15px"-->
|
|
<!-- />-->
|
|
<!-- <div style="margin-left: 7px">下载</div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- </el-tab-pane>-->
|
|
</el-tabs>
|
|
</div>
|
|
<!-- 课程公告及共享文档 -->
|
|
<!-- 个人信息及学习进度 -->
|
|
<div class="detailRB">
|
|
<div class="info">
|
|
<div class="title">
|
|
<img
|
|
style="width: 21px; height: 20px"
|
|
src="../../assets/image/pathdetails/info.png"
|
|
/>
|
|
<div class="text" style="margin-left: 7px">个人信息</div>
|
|
<div class="box"></div>
|
|
</div>
|
|
<!-- todo #路径详情 个人信息缺少img和介绍-->
|
|
<div
|
|
class="teacheritem"
|
|
:style="{ 'border-bottom': '1px solid rgba(56, 125, 247, 0.2)' }"
|
|
>
|
|
<img class="peopleimg" :src="userInfo.avatar"/>
|
|
<div style="margin-left: 17px">
|
|
<div class="teacherName">
|
|
<div style="margin-right: 5px">
|
|
{{ userInfo?.realName }}
|
|
</div>
|
|
<!-- <div v-for="(item, key) in data.userInfoBo?.medal" :key="key">-->
|
|
<!-- <img class="teacherMedal" :src="item"/>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
<div class="introduce">{{ userInfo?.bandDesc }}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info" style="padding-top: 20px">
|
|
<div class="title">
|
|
<img
|
|
style="width: 18px; height: 17px"
|
|
src="../../assets/image/pathdetails/study.png"
|
|
/>
|
|
<div class="text" style="margin-left: 9px">学习进度</div>
|
|
<div class="box"></div>
|
|
</div>
|
|
<!--
|
|
<div class="rate">
|
|
<div class="ratetext">上次学到：{{ data.lastLearned }}</div>
|
|
<div class="ratebtn">继续学习</div>
|
|
</div>-->
|
|
<div style="margin-top: 16px">
|
|
<div class="progressBox">
|
|
<div>总进度</div>
|
|
<div class="progress">
|
|
<div style="width: 291px">
|
|
<el-progress
|
|
:percentage="parseInt(data.currentChapterCnt/data.totalChapterCnt * 100)"
|
|
: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)',
|
|
}[(parseInt(data.currentChapterCnt/data.totalChapterCnt)* 100) / 20]
|
|
"
|
|
/>
|
|
</div>
|
|
<div
|
|
style="font-size: 14px; font-weight: 500; 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)',
|
|
}[parseInt((data.currentChapterCnt/data.totalChapterCnt * 100) / 20)],
|
|
}"
|
|
>
|
|
{{ parseInt(data.currentChapterCnt/data.totalChapterCnt * 100) }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 31px">
|
|
<div class="progressBox">
|
|
<div>必修进度</div>
|
|
<div class="progress">
|
|
<div style="width: 291px">
|
|
<el-progress
|
|
:percentage="parseInt(data.currentReqCnt/data.totalReqCnt * 100)"
|
|
: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)',
|
|
}[parseInt((data.currentReqCnt/data.totalReqCnt * 100) / 20)]
|
|
"
|
|
/>
|
|
</div>
|
|
<div
|
|
style="
|
|
font-size: 14px;
|
|
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)',
|
|
}[parseInt((data.currentReqCnt/data.totalReqCnt * 100) / 20)],
|
|
}"
|
|
>
|
|
{{ parseInt(data.currentReqCnt/data.totalReqCnt * 100) }}%
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 个人信息及学习进度 -->
|
|
</div>
|
|
</div>
|
|
<!-- 详细信息 -->
|
|
<!-- 弹框提示信息 -->
|
|
<el-dialog
|
|
title=""
|
|
top="347px"
|
|
v-model="dialogVisible"
|
|
:show-close="false"
|
|
style="display:flex;justify-content:center;align-items:center;height: 283px;padding:0;border-radius: 4px;"
|
|
width="502px">
|
|
<div style="width:288px;color:#333333;font-size: 22px;font-weight: 600;">{{ dialogVisibleTip }}</div>
|
|
<span slot="footer" style="display:inline-block;margin-top:60px;">
|
|
<el-button @click="dialogVisible = false" style="width:140px;height:40px;margin-right: 22px;">取消</el-button>
|
|
<el-button type="primary" @click="dialogVisible = false" style="width:140px;height:40px;">确定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {computed, reactive, ref, watch} from "vue";
|
|
import circle from '../../assets/image/pathdetails/circle.png';
|
|
import circle2 from '../../assets/image/pathdetails/circle2.png';
|
|
import {boeRequest, useRequest, request} from "@/api/request";
|
|
import {ROUTER_PROCESS, LINK_DETAILS, STUDY_RECORD} from "@/api/api";
|
|
import {useRoute, useRouter} from "vue-router";
|
|
import {ElMessage} from "element-plus";
|
|
import store from "@/store";
|
|
|
|
const {
|
|
query: {routerId, routerName},
|
|
} = useRoute();
|
|
const router = useRouter();
|
|
const returnclick = () => {
|
|
router.back();
|
|
};
|
|
const {data} = useRequest(ROUTER_PROCESS, {routerId});
|
|
const userInfo = computed(() => store.state.userInfo);
|
|
|
|
const activeName = ref("first");
|
|
|
|
const handleClick = (tab, event) => {
|
|
console.log(tab, event);
|
|
};
|
|
const path = {1: "path"};
|
|
|
|
const dialogVisible = ref(false);
|
|
const dialogVisibleTip = ref('');
|
|
|
|
function introductionPro() {
|
|
dialogVisibleTip.value =data.value.remark;
|
|
dialogVisible.value = true;
|
|
}
|
|
|
|
const types = ref({
|
|
typeName: {
|
|
1: "在线",
|
|
2: "面授",
|
|
3: "案例",
|
|
4: "作业",
|
|
5: "考试",
|
|
6: "直播",
|
|
7: "外链",
|
|
8: "讨论",
|
|
9: "活动",
|
|
10: "测评",
|
|
11: "评估",
|
|
12: "投票",
|
|
13: "项目",
|
|
},
|
|
toName: {
|
|
1: "去上课",
|
|
2: "去上课",
|
|
3: "去阅读",
|
|
4: "去完成",
|
|
5: "去完成",
|
|
6: "去观看",
|
|
7: "去查看",
|
|
8: "去讨论",
|
|
9: "去签到",
|
|
10: "去完成",
|
|
11: "去完成",
|
|
12: "去投票",
|
|
13: "去完成",
|
|
},
|
|
path: {
|
|
1: import.meta.env.VITE_BOE_ONLINE_CLASS_URL, //在线
|
|
2: "/faceteach",
|
|
3: import.meta.env.VITE_BOE_CASS_DETAIL_URL, //案例
|
|
4: "/homeworkpage",
|
|
5: import.meta.env.VITE_BOE_EXAM_DETAIL_URL, //考试
|
|
6: "/livebroadcast",
|
|
7: ({courseId}) =>
|
|
request(LINK_DETAILS(courseId), {}).then(({data: {linkAddress}}) =>
|
|
window.open(linkAddress)
|
|
), //外联
|
|
8: "/discusspage",
|
|
9: "/moreactive",
|
|
10: ({evaType, targetId}) =>
|
|
window.open(
|
|
(evaType == 0
|
|
? import.meta.env.VITE_BOE_TEST_DETAIL_URL
|
|
: import.meta.env.VITE_BOE_TEST_OUT_DETAIL_URL) + targetId
|
|
), //测评
|
|
11: "/surveydetail",
|
|
12: "/ballotpage",
|
|
13: "/projectdetails",
|
|
},
|
|
});
|
|
|
|
function toFinish(d) {
|
|
if (!types.value.path[d.type]) {
|
|
ElMessage.error("暂时未开放");
|
|
return;
|
|
}
|
|
if (d.type === 3 || d.type === 7) {
|
|
request(STUDY_RECORD, {
|
|
studentId: userInfo.value.id,
|
|
targetId: data.value.routerId,
|
|
logo: 1,
|
|
stageOrChapterId: data.value.currentStageId,
|
|
taskId: d.routerTaskId,
|
|
});
|
|
}
|
|
if (typeof types.value.path[d.type] === "string") {
|
|
types.value.path[d.type] &&
|
|
types.value.path[d.type].startsWith("http") &&
|
|
window.open(types.value.path[d.type] + d.targetId);
|
|
types.value.path[d.type] &&
|
|
types.value.path[d.type].startsWith("/") &&
|
|
router.push({
|
|
path: types.value.path[d.type],
|
|
query: {
|
|
id: d.routerTaskId,
|
|
type: 1,
|
|
courseId: d.courseId,
|
|
pName: data.value.name,
|
|
sName:data.currentStageName,
|
|
},
|
|
});
|
|
} else if (typeof types.value.path[d.type] === "function") {
|
|
console.log("ddddddd", d);
|
|
types.value.path[d.type](d);
|
|
// console.log("types.value.path[d.type](d)", d);
|
|
}
|
|
}
|
|
|
|
function whiteTypes(type) {
|
|
return import.meta.env.VITE_TASK_WHITE_TYPE.includes("-" + type + "-");
|
|
}
|
|
</script>
|
|
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
<style lang="scss">
|
|
.pathdetails {
|
|
.crumb {
|
|
color: #fff;
|
|
display: flex;
|
|
font-size: 14px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.pdname {
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
color: #ffffff;
|
|
margin-top: 17px;
|
|
}
|
|
|
|
.detailinfo {
|
|
width: 100%;
|
|
margin-top: 24px;
|
|
display: flex;
|
|
|
|
.detailL {
|
|
flex: 1;
|
|
margin-right: 20px;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
padding-left: 45px;
|
|
padding-right: 45px;
|
|
padding-top: 23px;
|
|
|
|
.title {
|
|
height: 50px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: rgba(249, 249, 249, 1);
|
|
margin-top: 27px;
|
|
margin-bottom: 19px;
|
|
|
|
.titleL {
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
color: #333333;
|
|
margin-left: 27px;
|
|
}
|
|
|
|
.titleR {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.titleR .titleRT {
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
color: #0060ff;
|
|
margin-right: 73px;
|
|
margin-left: 2px;
|
|
}
|
|
}
|
|
|
|
.course {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 32px;
|
|
margin-left: 26px;
|
|
|
|
.coursename {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333330;
|
|
line-height: 24px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.coursetag {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.progressBox {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #677d86;
|
|
margin-top: 24px;
|
|
|
|
.progress {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.progress .el-progress-bar__outer {
|
|
background-color: rgba(232, 241, 254, 1);
|
|
}
|
|
}
|
|
|
|
.goclass {
|
|
width: 126px;
|
|
height: 46px;
|
|
background: #2478ff;
|
|
box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
font-weight: 800;
|
|
color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 37px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.detailR {
|
|
width: 434px;
|
|
|
|
.detailRT {
|
|
min-height: 298px;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
|
|
.el-tabs__item {
|
|
height: 56px;
|
|
padding: 10px 33px 0px 27px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.el-tabs__nav-wrap::after {
|
|
background-color: rgba(56, 125, 247, 0.2);
|
|
}
|
|
|
|
.notice {
|
|
padding: 15px 43px 30px 47px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #333330;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.sharedocname {
|
|
width: 259px;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #677d86;
|
|
margin-left: 20px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.download {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 20px;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
color: #2478ff;
|
|
}
|
|
}
|
|
|
|
.detailRB {
|
|
min-height: 459px;
|
|
background: #ffffff;
|
|
border-radius: 8px;
|
|
margin-top: 17px;
|
|
|
|
.info .title {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 39px;
|
|
position: relative;
|
|
margin-left: 48px;
|
|
}
|
|
|
|
.info .title .text {
|
|
margin-left: 8px;
|
|
font-size: 16px;
|
|
color: rgba(51, 51, 51, 1);
|
|
font-weight: 800;
|
|
}
|
|
|
|
.info .title .box {
|
|
width: 75px;
|
|
height: 10px;
|
|
background-color: rgba(36, 120, 255, 0.15);
|
|
position: absolute;
|
|
left: 23px;
|
|
top: 53px;
|
|
}
|
|
|
|
.info .teacheritem {
|
|
margin-left: 48px;
|
|
margin-right: 48px;
|
|
margin-top: 30px;
|
|
display: flex;
|
|
// align-items: center;
|
|
}
|
|
|
|
.info .teacheritem .peopleimg {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 30px;
|
|
}
|
|
|
|
.info .teacheritem .teacherName {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
color: #394145;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 260px;
|
|
}
|
|
|
|
.info .teacheritem .teacherName .teacherMedal {
|
|
width: 17px;
|
|
height: 19px;
|
|
margin-right: 4px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.info .teacheritem .introduce {
|
|
width: 260px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #394145;
|
|
margin-top: 14px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.info .rate {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 29px;
|
|
margin-left: 48px;
|
|
margin-right: 26px;
|
|
}
|
|
|
|
.info .rate .ratetext {
|
|
width: 259px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #677d86;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.info .rate .ratebtn {
|
|
width: 86px;
|
|
height: 36px;
|
|
border: 1px solid #2478ff;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #2478ff;
|
|
line-height: 24px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.info .progressBox {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
color: #677d86;
|
|
margin-top: 16px;
|
|
margin-left: 44px;
|
|
|
|
.progress {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.progress .el-progress-bar__outer {
|
|
background-color: rgba(232, 241, 254, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|