mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/fe-student.git
synced 2025-12-09 02:46:48 +08:00
870 lines
25 KiB
Vue
870 lines
25 KiB
Vue
<template>
|
||
<div class="pathdetails" style="padding: 30px">
|
||
<!-- 面包屑导航 -->
|
||
<div class="crumb">
|
||
<div>产品经理学习路径图</div>
|
||
<div style="margin-left: 6px; margin-right: 6px">/</div>
|
||
<div style="font-weight: 700">路径图详情</div>
|
||
</div>
|
||
<!-- 面包屑导航 -->
|
||
<div class="pdname">中级产品经理</div>
|
||
<!-- 详细信息 -->
|
||
<div class="detailinfo">
|
||
<div class="detailL">
|
||
<div v-for="(i, k) in data.chapterProcessList" :key="k">
|
||
<div class="title">
|
||
<div class="titleL">{{ i.chapterName }}</div>
|
||
<div
|
||
class="titleR"
|
||
:style="{ display: 'flex' }"
|
||
>
|
||
<img src="../../assets/image/pathdetails/circle.png"/>
|
||
<div class="titleRT">进行中</div>
|
||
</div>
|
||
<div
|
||
class="titleR"
|
||
:style="{ display: i.status === 2 ? 'flex' : 'none' }"
|
||
>
|
||
<img src="../../assets/image/pathdetails/circle2.png"/>
|
||
<div class="titleRT" style="color: rgba(102, 102, 102, 1)">
|
||
未开始
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="course"
|
||
v-for="(value, index) in i.taskProcessList"
|
||
:key="index"
|
||
>
|
||
<div>
|
||
<div class="coursename">{{ 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.status === 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)">
|
||
{{
|
||
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">
|
||
请各位选课的同学提前阅读本课程的
|
||
“教学大纲与计划”“课程考核要求”与“学习要求”
|
||
，并按给定的中学化学教学主题分好小组 <br/>
|
||
每位同学在网上学习的活动轨迹都会自动被系统记录将作为大家个人线上参与的评价依据；<br/>
|
||
请大家务必在规定的时间内提交作业，否则会被系统自动记录为“迟交”或“未交”则会影响线上参与的平时成
|
||
绩；<br/>
|
||
</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="userAvatar"/>
|
||
<div style="margin-left: 17px">
|
||
<div class="teacherName">
|
||
<div style="margin-right: 5px">{{ data.userInfoBo?.userName }}</div>
|
||
<div v-for="(item, key) in data.userInfoBo?.medal" :key="key">
|
||
<img class="teacherMedal" :src="item"/>
|
||
</div>
|
||
</div>
|
||
<div class="introduce">{{ data.userInfoBo?.introduce }}</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">上次学到：启航班-领导寄语</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)]
|
||
"
|
||
/>
|
||
</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)]
|
||
}"
|
||
>
|
||
{{ 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)]
|
||
"
|
||
/>
|
||
</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)]
|
||
}"
|
||
>
|
||
{{ parseInt(data.currentReqCnt / data.totalReqCnt * 100) }}%
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 个人信息及学习进度 -->
|
||
</div>
|
||
</div>
|
||
<!-- 详细信息 -->
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {computed, reactive, ref, watch} from "vue";
|
||
import word from '@/assets/image/file/word.png'
|
||
import ppt from '@/assets/image/file/ppt.png'
|
||
import pdf from '@/assets/image/file/pdf.png'
|
||
import zip from '@/assets/image/file/zip.png'
|
||
import md from '@/assets/image/file/md.png'
|
||
import medal1 from '@/assets/image/medal/medal1.png'
|
||
import medal2 from '@/assets/image/medal/medal2.png'
|
||
import medal3 from '@/assets/image/medal/medal3.png'
|
||
import img from '@/assets/image/uploadimg.png'
|
||
import {boeRequest, useRequest} from "@/api/request";
|
||
import {ROUTER_PROCESS} from "@/api/api";
|
||
import {useRoute, useRouter} from "vue-router";
|
||
import {ElMessage} from 'element-plus'
|
||
import {useUserInfo} from "@/api/utils";
|
||
|
||
const {query: {routerId}} = useRoute()
|
||
const router = useRouter()
|
||
const {data} = useRequest(ROUTER_PROCESS, {routerId})
|
||
const {avatar: userAvatar} = useUserInfo(computed(() => data.value?.userInfoBo?.userId))
|
||
|
||
const state = reactive({
|
||
course: [
|
||
{
|
||
state: 1, //1：进行中 2：未开始
|
||
title: "序：产品经理从初级到中级",
|
||
courseItem: [
|
||
{
|
||
id: 1,
|
||
name: "人工智能启蒙就讲解（上）",
|
||
tag: [
|
||
{
|
||
classify: 1, //1：必修 2：选修 3：在线、测评等 4：标签
|
||
name: "必修",
|
||
},
|
||
{
|
||
classify: 3,
|
||
name: "在线",
|
||
},
|
||
{
|
||
classify: 4,
|
||
name: "#通用力",
|
||
},
|
||
{
|
||
classify: 4,
|
||
name: "#前沿趋势",
|
||
},
|
||
],
|
||
progress: 90,
|
||
},
|
||
{
|
||
id: 1,
|
||
name: "人工智能启蒙就讲解（下）",
|
||
tag: [
|
||
{
|
||
classify: 2,
|
||
name: "选修",
|
||
},
|
||
{
|
||
classify: 3,
|
||
name: "测评",
|
||
},
|
||
{
|
||
classify: 4,
|
||
name: "#通用力",
|
||
},
|
||
{
|
||
classify: 4,
|
||
name: "#前沿趋势",
|
||
},
|
||
],
|
||
progress: 0,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
state: 2, //1：进行中 2：未开始
|
||
title: "第一讲：中级产品经理的思考逻辑",
|
||
courseItem: [
|
||
{
|
||
id: 1,
|
||
name: "趣味课前小测 - MBTI测试：你适合做哪个方向？",
|
||
tag: [
|
||
{
|
||
classify: 1, //1：必修 2：选修 3：在线、测评等 4：标签
|
||
name: "必修",
|
||
},
|
||
{
|
||
classify: 3,
|
||
name: "测评",
|
||
},
|
||
],
|
||
progress: 48,
|
||
},
|
||
{
|
||
id: 1,
|
||
name: "趣味课前小测 - MBTI测试：你适合做哪个方向？",
|
||
tag: [
|
||
{
|
||
classify: 2,
|
||
name: "选修",
|
||
},
|
||
{
|
||
classify: 3,
|
||
name: "外部链接",
|
||
},
|
||
],
|
||
progress: 0,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
state: 2, //1：进行中 2：未开始
|
||
title: "第二讲：模块化产品展示",
|
||
courseItem: [
|
||
{
|
||
id: 1,
|
||
name: "模块化产品展示相关案例与展示：如何自由组合你的思考？",
|
||
tag: [
|
||
{
|
||
classify: 1, //1：必修 2：选修 3：在线、测评等 4：标签
|
||
name: "必修",
|
||
},
|
||
{
|
||
classify: 3,
|
||
name: "测评",
|
||
},
|
||
],
|
||
progress: 48,
|
||
},
|
||
{
|
||
id: 1,
|
||
name: "社交产品如何做好模块化处理？",
|
||
tag: [
|
||
{
|
||
classify: 2,
|
||
name: "选修",
|
||
},
|
||
{
|
||
classify: 3,
|
||
name: "作业",
|
||
},
|
||
],
|
||
progress: 0,
|
||
},
|
||
{
|
||
id: 1,
|
||
name: "微信与Telegram哪个平台的功能模块化做的最好？",
|
||
tag: [
|
||
{
|
||
classify: 2,
|
||
name: "选修",
|
||
},
|
||
{
|
||
classify: 3,
|
||
name: "辩论",
|
||
},
|
||
],
|
||
progress: 0,
|
||
},
|
||
],
|
||
},
|
||
],
|
||
sharedoc: [
|
||
{
|
||
id: 1,
|
||
name: "项目参考文档.doc",
|
||
img: word,
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "人工智能启蒙讲解讲义.pptx",
|
||
img: ppt,
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "中级产品经理必备工具.pdf",
|
||
img: pdf,
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "Python学习入门讲义.zip",
|
||
img: zip,
|
||
},
|
||
{
|
||
id: 5,
|
||
name: "Axure RP10更新内容.md",
|
||
img: md,
|
||
},
|
||
],
|
||
teacher: [
|
||
{
|
||
id: 1,
|
||
name: "王星天（显示事业）",
|
||
introduce: "教师是学生的镜子,学生是老师的影子。",
|
||
peopleimg: img,
|
||
medal: [
|
||
medal1,
|
||
medal2,
|
||
medal3,
|
||
],
|
||
},
|
||
],
|
||
});
|
||
const activeName = ref('first')
|
||
const totalprogress = ref(30)
|
||
const compulsoryprogress = ref(10)
|
||
|
||
const handleClick = (tab, event) => {
|
||
console.log(tab, event);
|
||
};
|
||
const path = {1: 'path'}
|
||
|
||
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: '',
|
||
2: '/faceteach',
|
||
3: '',
|
||
4: '/homeworkpage',
|
||
5: '',
|
||
6: '/livebroadcast',
|
||
7: '',
|
||
8: '/discusspage',
|
||
9: '/moreactive',
|
||
10: '/surveydetail',
|
||
11: '/surveydetail',
|
||
12: '/ballotpage',
|
||
13: '去完成'
|
||
}
|
||
})
|
||
|
||
function toFinish(d) {
|
||
if (!types.value.path[d.type]) {
|
||
ElMessage.error('暂时未开放')
|
||
return
|
||
}
|
||
if (d.type === 1) {
|
||
//配置文件
|
||
window.parent.location.href = import.meta.env.VITE_BOE_ONLINE_CLASS_URL
|
||
return;
|
||
}
|
||
router.push({path: types.value.path[d.type], query: {id: d.routerTaskId, type: 1, courseId: d.courseId}})
|
||
}
|
||
|
||
</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;
|
||
}
|
||
|
||
.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>
|