mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-09 10:56:47 +08:00
1175 lines
33 KiB
Vue
1175 lines
33 KiB
Vue
<template>
|
||
<div class="pathmap">
|
||
<TitleHead text="中级产品经理"></TitleHead>
|
||
<div class="main">
|
||
<div class="title">
|
||
<div class="course">
|
||
<div style="width: 100%">
|
||
<el-tabs v-model="activeName" @tab-click="handleClick" tab-position="top" >
|
||
<el-tab-pane label="课程公告" name="first">
|
||
<div class="work">
|
||
<div class="question">
|
||
请各位选课的同学提前阅读本课程的“教学大纲与计划”
|
||
“课程考核要求”与“学习要求”，并按给定的中学化学教学主题分好小组<br />
|
||
每位同学在网上学习的活动轨迹都会自动被系统记录,将作为大家个人线上参与的评价依据；<br />
|
||
请大家务必在规定的时间内提交作业，否则会被系统自动记录为“迟交”或“未交”，则会影响线上参与的平时成绩；
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="共享文档" name="second" >
|
||
<div
|
||
v-for="(el, index) in enclosure"
|
||
:key="el.id"
|
||
class="enclosure"
|
||
:style="{
|
||
'border-bottom':
|
||
index === enclosure.length - 1
|
||
? null
|
||
: '0px solid rgba(56, 125, 247, 0.2)',
|
||
}"
|
||
>
|
||
<div class="enclosureL">
|
||
<img style="width: 19.5px; height: 22px" :src="el.img" />
|
||
<div style="margin-left: 15px">{{ el.name }}</div>
|
||
</div>
|
||
<div class="download">
|
||
<img
|
||
style="width: 13px; height: 12px"
|
||
src="../../assets/image/faceteach/download.png"
|
||
/>
|
||
<div style="margin-left: 2.5px">下载</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="messaeg">
|
||
<div class="mani">
|
||
<div class="uptitle">
|
||
<div class="img"></div>
|
||
<div class="rightmain">
|
||
<div class="talk">个人信息</div>
|
||
<div class="box"></div>
|
||
</div>
|
||
</div>
|
||
<div class="information">
|
||
<div class="photo"></div>
|
||
<div class="description">
|
||
<span class="text1">乐晓琪（显示事业）</span>
|
||
<span class="text2">真正的陪伴经得起坎坷，经得起平淡。</span>
|
||
</div>
|
||
</div>
|
||
<div class="downtitle">
|
||
<div class="img"></div>
|
||
<div class="rightmain">
|
||
<div class="talk">学习进度</div>
|
||
<div class="box"></div>
|
||
</div>
|
||
</div>
|
||
<div class="speed">
|
||
<span class="text3">上次学到：启航班 - 领导寄语</span>
|
||
<button class="btn">去上课</button>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="total">
|
||
<div class="total_part">
|
||
<span class="text4">总进度</span> <span class="text5">32%</span>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progress_part"></div>
|
||
</div>
|
||
</div>
|
||
<div class="compulsory">
|
||
<div class="compulsory_part">
|
||
<span class="text6">必修进度</span>
|
||
<span class="text7">10%</span>
|
||
</div>
|
||
<div class="progress1">
|
||
<div class="progress1_part"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="course1">
|
||
<div class="course1_box">
|
||
<div class="course1_first">
|
||
<div class="text8">序：产品经理从初级到中级</div>
|
||
<div class="course1_right">
|
||
<div class="circular"></div>
|
||
<div class="text9">进行中</div>
|
||
</div>
|
||
</div>
|
||
<div class="course1_second">
|
||
<div class="course1_part">
|
||
<span class="text6">当前进度</span>
|
||
<span class="text7">70%</span>
|
||
</div>
|
||
<div class="progress2">
|
||
<div class="progress2_part"></div>
|
||
</div>
|
||
</div>
|
||
<div class="course1_threed">
|
||
<div class="explain_up">人工智能启蒙讲解（上）</div>
|
||
<div class="explain_up_part">
|
||
<div class="tag4">#通用力</div>
|
||
<div class="tag2">#前沿趋势</div>
|
||
<div class="tag1">必修</div>
|
||
<div class="tag3">在线</div>
|
||
<button class="btn1">去上课</button>
|
||
</div>
|
||
</div>
|
||
<div class="course1_fourth">
|
||
<div class="course1_part">
|
||
<span class="text6">当前进度</span>
|
||
<span class="text7">0%</span>
|
||
</div>
|
||
<div class="progress3">
|
||
<div class="progress3_part"></div>
|
||
</div>
|
||
</div>
|
||
<div class="course1_fifth">
|
||
<div class="explain_down">人工智能启蒙讲解（下）</div>
|
||
<div class="explain_down_part">
|
||
<div class="tag4">#通用力</div>
|
||
<div class="tag2">#前沿趋势</div>
|
||
<div class="tag1">必修</div>
|
||
<div class="tag3">考试</div>
|
||
<div class="status"></div>
|
||
</div>
|
||
</div>
|
||
<div class="course2_first">
|
||
<div class="text8">第一讲：中级产品经理的思考逻辑</div>
|
||
<div class="course2_right">
|
||
<div class="circular"></div>
|
||
<div class="text9">未开始</div>
|
||
</div>
|
||
</div>
|
||
<div class="course2_second">
|
||
<div class="explain_down">
|
||
趣味课前小测 - MBTI测试：你适合做哪个方向？
|
||
</div>
|
||
<div class="explain_down_part">
|
||
<div class="tag1">选修</div>
|
||
<div class="tag3">测评</div>
|
||
<div class="status"></div>
|
||
</div>
|
||
</div>
|
||
<div class="course2_threed">
|
||
<div class="explain_down">
|
||
建立中级产品经理思考逻辑：脱离初级产品的必要条件
|
||
</div>
|
||
<div class="explain_down_part">
|
||
<div class="tag1">必修</div>
|
||
<div class="tag3">外部链接</div>
|
||
<div class="status"></div>
|
||
</div>
|
||
</div>
|
||
<div class="course3_first">
|
||
<div class="text8">第二讲：模块化产品展示</div>
|
||
<div class="course2_right">
|
||
<div class="circular"></div>
|
||
<div class="text9">未开始</div>
|
||
</div>
|
||
</div>
|
||
<div class="course2_threed">
|
||
<div class="explain_down">
|
||
模块化产品展示相关案例与展示：如何自由组合你的思考？
|
||
</div>
|
||
<div class="explain_down_part">
|
||
<div class="tag1">必修</div>
|
||
<div class="tag3">测评</div>
|
||
<div class="status"></div>
|
||
</div>
|
||
</div>
|
||
<div class="course2_threed">
|
||
<div class="explain_down">社交产品如何做好模块化处理？</div>
|
||
<div class="explain_down_part">
|
||
<div class="tag1">必修</div>
|
||
<div class="tag3">测评</div>
|
||
<div class="status"></div>
|
||
</div>
|
||
</div>
|
||
<div class="course2_second">
|
||
<div class="explain_down">
|
||
微信与Telegram哪个平台的功能模块化做的最好？
|
||
</div>
|
||
<div class="explain_down_part">
|
||
<div class="tag1">选修</div>
|
||
<div class="tag3">测评</div>
|
||
<div class="status"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { reactive, toRefs } from "vue";
|
||
import TitleHead from "@/components/TitleHead.vue";
|
||
export default {
|
||
name: "PathmapPage",
|
||
components: {
|
||
TitleHead,
|
||
},
|
||
setup() {
|
||
const state = reactive({
|
||
activeName: "second",
|
||
enclosure: [
|
||
{
|
||
id: 1,
|
||
name: "项目参考文档.doc",
|
||
img: require("../../assets/image/file/word.png"),
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "人工智能启蒙讲解讲义.pptx",
|
||
img: require("../../assets/image/file/ppt.png"),
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "中级产品经理必备工具.pdf",
|
||
img: require("../../assets/image/file/pdf.png"),
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "Python学习入门讲义.zip",
|
||
img: require("../../assets/image/file/zip.png"),
|
||
},
|
||
{
|
||
id: 5,
|
||
name: "Axure RP10更新内容.md",
|
||
img: require("../../assets/image/file/md.png"),
|
||
},
|
||
],
|
||
});
|
||
const handleClick = (tab, event) => {
|
||
console.log(tab, event);
|
||
};
|
||
return {
|
||
...toRefs(state),
|
||
handleClick,
|
||
};
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.pathmap {
|
||
width: 100%;
|
||
.main {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-flow: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-top: -14.5px;
|
||
.course1 {
|
||
width: 90%;
|
||
height: 830px;
|
||
margin-top: 10px;
|
||
margin-bottom: 27.5px;
|
||
border-radius: 4px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
display: flex;
|
||
justify-content: center;
|
||
.course1_box {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: content;
|
||
width: 90%;
|
||
margin-top: 18.5px;
|
||
//background-color: pink;
|
||
.course3_first {
|
||
width: 105%;
|
||
margin-left: -7px;
|
||
height: 35px;
|
||
display: flex;
|
||
justify-content: content;
|
||
margin-top: 18.5px;
|
||
background-color: #f9f9f9;
|
||
.text8 {
|
||
display: flex;
|
||
flex: 1;
|
||
margin-top: 11px;
|
||
margin-left: 10.5px;
|
||
margin-bottom: 10.5px;
|
||
height: 13.5px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #333330;
|
||
}
|
||
.course2_right {
|
||
display: flex;
|
||
position: relative;
|
||
width: 60px;
|
||
height: 13.5px;
|
||
margin-top: 15px;
|
||
// margin-right: 10.5px;
|
||
.circular {
|
||
position: absolute;
|
||
top: 1px;
|
||
left: 1px;
|
||
width: 8.5px;
|
||
height: 8.5px;
|
||
border-radius: 7px;
|
||
border: 1px solid #666666;
|
||
}
|
||
.text9 {
|
||
display: flex;
|
||
justify-content: content;
|
||
position: absolute;
|
||
width: 40px;
|
||
height: 13.5px;
|
||
top: 0;
|
||
left: 20px;
|
||
line-height: 13.5px;
|
||
color: #666666;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
.course2_threed {
|
||
display: flex;
|
||
position: relative;
|
||
margin-top: 12px;
|
||
width: 100%;
|
||
height: 68.8px;
|
||
.explain_down {
|
||
position: absolute;
|
||
display: flex;
|
||
width: 100%;
|
||
height: 12.5px;
|
||
color: #333330;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
line-height: 24px;
|
||
}
|
||
.explain_down_part {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 52.3px;
|
||
margin-top: 16.5px;
|
||
.tag1 {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 64px;
|
||
height: 20.8px;
|
||
border: 1px solid #51c6e6;
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #51c6e6;
|
||
}
|
||
.tag3 {
|
||
position: absolute;
|
||
left: 73.5px;
|
||
bottom: 0;
|
||
height: 20.8px;
|
||
border: 1px solid #7f96ed;
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #7f96ed;
|
||
padding-left: 19px;
|
||
padding-right: 19px;
|
||
}
|
||
.status {
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 11.5px;
|
||
width: 49.5px;
|
||
height: 49px;
|
||
background-image: url(../../assets/image/pathmap/nostart.png);
|
||
}
|
||
}
|
||
}
|
||
.course2_second {
|
||
display: flex;
|
||
position: relative;
|
||
margin-top: 12px;
|
||
width: 100%;
|
||
height: 68.8px;
|
||
.explain_down {
|
||
position: absolute;
|
||
display: flex;
|
||
width: 100%;
|
||
height: 12.5px;
|
||
color: #333330;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
line-height: 24px;
|
||
}
|
||
.explain_down_part {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 52.3px;
|
||
margin-top: 16.5px;
|
||
.tag1 {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 64px;
|
||
height: 20.8px;
|
||
border: 1px solid #cd7fed;
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #cd7fed;
|
||
}
|
||
.tag3 {
|
||
position: absolute;
|
||
left: 73.5px;
|
||
bottom: 0;
|
||
height: 20.8px;
|
||
border: 1px solid #7f96ed;
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #7f96ed;
|
||
padding-left: 19px;
|
||
padding-right: 19px;
|
||
}
|
||
.status {
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 11.5px;
|
||
width: 49.5px;
|
||
height: 49px;
|
||
background-image: url(../../assets/image/pathmap/nostart.png);
|
||
}
|
||
}
|
||
}
|
||
.course2_first {
|
||
width: 105%;
|
||
margin-left: -7px;
|
||
height: 35px;
|
||
display: flex;
|
||
justify-content: content;
|
||
margin-top: 18.5px;
|
||
background-color: #f9f9f9;
|
||
.text8 {
|
||
display: flex;
|
||
flex: 1;
|
||
margin-top: 11px;
|
||
margin-left: 10.5px;
|
||
margin-bottom: 10.5px;
|
||
height: 13.5px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #333330;
|
||
}
|
||
.course2_right {
|
||
display: flex;
|
||
position: relative;
|
||
width: 60px;
|
||
height: 13.5px;
|
||
margin-top: 15px;
|
||
// margin-right: 10.5px;
|
||
.circular {
|
||
position: absolute;
|
||
top: 1px;
|
||
left: 1px;
|
||
width: 8.5px;
|
||
height: 8.5px;
|
||
border-radius: 7px;
|
||
border: 1px solid #666666;
|
||
}
|
||
.text9 {
|
||
display: flex;
|
||
justify-content: content;
|
||
position: absolute;
|
||
width: 40px;
|
||
height: 13.5px;
|
||
top: 0;
|
||
left: 20px;
|
||
line-height: 13.5px;
|
||
color: #666666;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
.course1_fifth {
|
||
display: flex;
|
||
position: relative;
|
||
margin-top: 12px;
|
||
width: 100%;
|
||
height: 68.8px;
|
||
.explain_down {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 12.5px;
|
||
color: #333330;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
line-height: 12.5px;
|
||
}
|
||
.explain_down_part {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 52.3px;
|
||
margin-top: 16.5px;
|
||
.tag4 {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
padding-left: 7.5px;
|
||
//padding-right: 12px;
|
||
height: 15.8px;
|
||
border: 1px solid rgba(255, 185, 109, 1);
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: rgba(255, 185, 109, 1);
|
||
}
|
||
.tag2 {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 69px;
|
||
padding-left: 7.5px;
|
||
padding-right: 6.5px;
|
||
width: 62px;
|
||
height: 15.8px;
|
||
border: 1px solid rgba(255, 185, 109, 1);
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: rgba(255, 185, 109, 1);
|
||
}
|
||
.tag1 {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 64px;
|
||
height: 20.8px;
|
||
border: 1px solid #51c6e6;
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #51c6e6;
|
||
}
|
||
.tag3 {
|
||
position: absolute;
|
||
left: 73.5px;
|
||
bottom: 0;
|
||
height: 20.8px;
|
||
border: 1px solid #7f96ed;
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #7f96ed;
|
||
padding-left: 19px;
|
||
padding-right: 19px;
|
||
}
|
||
.status {
|
||
position: absolute;
|
||
top: 5px;
|
||
right: 11.5px;
|
||
width: 49.5px;
|
||
height: 49px;
|
||
background-image: url(../../assets/image/pathmap/nostart.png);
|
||
}
|
||
}
|
||
}
|
||
.course1_fourth {
|
||
display: flex;
|
||
position: relative;
|
||
margin-top: 11.5px;
|
||
width: 100%;
|
||
height: 29px;
|
||
.course1_part {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
margin-bottom: 10px;
|
||
width: 100%;
|
||
height: 12.5px;
|
||
.text6 {
|
||
width: 38.5px;
|
||
height: 12.5px;
|
||
font-size: 12px;
|
||
// line-height: 30.29px;
|
||
color: #677d86;
|
||
}
|
||
.text7 {
|
||
position: absolute;
|
||
right: 0;
|
||
width: 25px;
|
||
height: 9.5px;
|
||
font-size: 12px;
|
||
// line-height: 30.29px;
|
||
color: #277aff;
|
||
}
|
||
}
|
||
.progress3 {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 6.4px;
|
||
margin-top: 20px;
|
||
background-color: #e8f1fe;
|
||
border-radius: 2px;
|
||
.progress3_part {
|
||
width: 0%;
|
||
height: 6.4px;
|
||
border-radius: 2px;
|
||
background: linear-gradient(
|
||
-180deg,
|
||
rgba(36, 120, 255, 1),
|
||
rgba(80, 147, 255, 1)
|
||
);
|
||
}
|
||
}
|
||
}
|
||
.course1_threed {
|
||
display: flex;
|
||
position: relative;
|
||
margin-top: 12px;
|
||
width: 100%;
|
||
height: 68.8px;
|
||
.explain_up {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 12.5px;
|
||
color: #333330;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
line-height: 12.5px;
|
||
}
|
||
.explain_up_part {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 52.3px;
|
||
margin-top: 16.5px;
|
||
.tag4 {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
padding-left: 7.5px;
|
||
//padding-right: 12px;
|
||
height: 15.8px;
|
||
border: 1px solid rgba(255, 185, 109, 1);
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: rgba(255, 185, 109, 1);
|
||
}
|
||
.tag2 {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 69px;
|
||
padding-left: 7.5px;
|
||
padding-right: 6.5px;
|
||
width: 62px;
|
||
height: 15.8px;
|
||
border: 1px solid rgba(255, 185, 109, 1);
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
color: rgba(255, 185, 109, 1);
|
||
}
|
||
.tag1 {
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 64px;
|
||
height: 20.8px;
|
||
border: 1px solid #51c6e6;
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #51c6e6;
|
||
}
|
||
.tag3 {
|
||
position: absolute;
|
||
left: 73.5px;
|
||
bottom: 0;
|
||
height: 20.8px;
|
||
border: 1px solid #7f96ed;
|
||
border-radius: 2px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
color: #7f96ed;
|
||
padding-left: 19px;
|
||
//padding-right: 25px;
|
||
}
|
||
.btn1 {
|
||
position: absolute;
|
||
top: 2px;
|
||
right: 2px;
|
||
width: 73px;
|
||
height: 28px;
|
||
font-size: 13px;
|
||
line-height: 28px;
|
||
color: #ffffff;
|
||
font-weight: 400;
|
||
border: 0.5px solid #2478ff;
|
||
border-radius: 2px;
|
||
background-color: #2478ff;
|
||
}
|
||
}
|
||
}
|
||
.course1_second {
|
||
display: flex;
|
||
position: relative;
|
||
margin-top: 11.5px;
|
||
width: 100%;
|
||
height: 29px;
|
||
.course1_part {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
margin-bottom: 10px;
|
||
width: 100%;
|
||
height: 12.5px;
|
||
.text6 {
|
||
width: 38.5px;
|
||
height: 12.5px;
|
||
font-size: 12px;
|
||
// line-height: 30.29px;
|
||
color: #677d86;
|
||
}
|
||
.text7 {
|
||
position: absolute;
|
||
right: 0;
|
||
width: 25px;
|
||
height: 9.5px;
|
||
font-size: 12px;
|
||
// line-height: 30.29px;
|
||
color: #277aff;
|
||
}
|
||
}
|
||
.progress2 {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 6.4px;
|
||
margin-top: 20px;
|
||
background-color: #e8f1fe;
|
||
border-radius: 2px;
|
||
.progress2_part {
|
||
width: 70%;
|
||
height: 6.4px;
|
||
border-radius: 2px;
|
||
background: linear-gradient(
|
||
-180deg,
|
||
rgba(36, 120, 255, 1),
|
||
rgba(80, 147, 255, 1)
|
||
);
|
||
}
|
||
}
|
||
}
|
||
.course1_first {
|
||
width: 105%;
|
||
margin-left: -7px;
|
||
height: 35px;
|
||
display: flex;
|
||
justify-content: content;
|
||
background-color: #f9f9f9;
|
||
.text8 {
|
||
display: flex;
|
||
flex: 1;
|
||
margin-top: 11px;
|
||
margin-left: 10.5px;
|
||
margin-bottom: 10.5px;
|
||
height: 13.5px;
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #333330;
|
||
}
|
||
.course1_right {
|
||
display: flex;
|
||
position: relative;
|
||
width: 60px;
|
||
height: 13.5px;
|
||
margin-top: 15px;
|
||
// margin-right: 10.5px;
|
||
.circular {
|
||
position: absolute;
|
||
top: 1px;
|
||
left: 1px;
|
||
width: 8.5px;
|
||
height: 8.5px;
|
||
border-radius: 7px;
|
||
border: 1px solid #0060ff;
|
||
}
|
||
.text9 {
|
||
display: flex;
|
||
justify-content: content;
|
||
position: absolute;
|
||
width: 40px;
|
||
height: 13.5px;
|
||
top: 0;
|
||
left: 20px;
|
||
line-height: 13.5px;
|
||
color: #0060ff;
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.title {
|
||
width: 90%;
|
||
height: 272px;
|
||
border-radius: 4px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
display: flex;
|
||
justify-content: center;
|
||
.course {
|
||
width: 90%;
|
||
// padding-bottom: 15px;
|
||
border-radius: 4px;
|
||
background: #ffffff;
|
||
margin-top: 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
.el-tabs__nav {
|
||
width: 90%;
|
||
margin-left: 5%;
|
||
display: flex;
|
||
justify-content: left;
|
||
}
|
||
.el-tabs__item {
|
||
height: 50px;
|
||
padding: 0px;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
line-height: 21px;
|
||
padding-top: 15px;
|
||
margin-right: 70px;
|
||
}
|
||
.el-tabs__nav-wrap::after {
|
||
background-color: rgba(56, 125, 247, 0.2);
|
||
}
|
||
.el-tabs__header {
|
||
margin: 0;
|
||
}
|
||
.enclosure {
|
||
width: 90%;
|
||
margin-left: 5%;
|
||
height: 40px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.enclosureL {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
color: #677d86;
|
||
line-height: 19px;
|
||
}
|
||
.download {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
color: #2478ff;
|
||
line-height: 19px;
|
||
}
|
||
}
|
||
.work {
|
||
// margin-left: 51px;
|
||
// margin-right: 40px;
|
||
padding-bottom: 20px;
|
||
width: 90%;
|
||
margin-left: 5%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
margin-top: 17.5px;
|
||
}
|
||
.work .question {
|
||
font-size: 13px;
|
||
font-weight: 400;
|
||
color: #333330;
|
||
line-height: 21.5px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.messaeg {
|
||
width: 90%;
|
||
height: 314px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-top: 10px;
|
||
.mani {
|
||
width: 90%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: content;
|
||
//margin-left: 20.5px;
|
||
margin-top: 23px;
|
||
.downtitle {
|
||
display: flex;
|
||
position: relative;
|
||
width: 90px;
|
||
margin-top: 21.5px;
|
||
.img {
|
||
width: 15.5px;
|
||
height: 14.5px;
|
||
margin-top: 3px;
|
||
background-image: url(../../assets/image/pathmap/study.png);
|
||
}
|
||
.rightmain {
|
||
margin-left: 7.5px;
|
||
.talk {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
position: absolute;
|
||
z-index: 999;
|
||
}
|
||
.box {
|
||
position: absolute;
|
||
width: 62.5px;
|
||
height: 10px;
|
||
right: 6px;
|
||
bottom: -4px;
|
||
background: #ccdfff;
|
||
}
|
||
}
|
||
}
|
||
.uptitle {
|
||
display: flex;
|
||
position: relative;
|
||
width: 90px;
|
||
.img {
|
||
width: 17px;
|
||
height: 15px;
|
||
margin-top: 3px;
|
||
background-image: url(../../assets/image/pathmap/personal.png);
|
||
}
|
||
.rightmain {
|
||
margin-left: 7.5px;
|
||
.talk {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
position: absolute;
|
||
z-index: 999;
|
||
}
|
||
.box {
|
||
position: absolute;
|
||
width: 62.5px;
|
||
height: 10px;
|
||
right: 6px;
|
||
bottom: -4px;
|
||
background: #ccdfff;
|
||
}
|
||
}
|
||
}
|
||
.information {
|
||
width: 100%;
|
||
height: 50px;
|
||
margin-top: 24px;
|
||
display: flex;
|
||
justify-content: content;
|
||
.photo {
|
||
width: 50px;
|
||
height: 50px;
|
||
background-image: url(../../assets/image/pathmap/photo.png);
|
||
}
|
||
.description {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-left: 11.5px;
|
||
.text1 {
|
||
height: 13.5px;
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: #394145;
|
||
line-height: 21.6px;
|
||
}
|
||
.text2 {
|
||
height: 13px;
|
||
margin-top: 12px;
|
||
font-size: 13px;
|
||
color: #394145;
|
||
line-height: 21.6px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.speed {
|
||
width: 100%;
|
||
margin-top: 11px;
|
||
display: flex;
|
||
justify-content: content;
|
||
.text3 {
|
||
display: flex;
|
||
flex: 1;
|
||
margin-top: 4.5px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
line-height: 24px;
|
||
color: #677d86;
|
||
text-overflow: elipsis;
|
||
}
|
||
.btn {
|
||
width: 73px;
|
||
height: 28px;
|
||
font-size: 13px;
|
||
line-height: 28px;
|
||
color: #2478ff;
|
||
font-weight: 400;
|
||
border: 0.5px solid #2478ff;
|
||
border-radius: 2px;
|
||
background-color: #ffffff;
|
||
}
|
||
}
|
||
.progress {
|
||
display: flex;
|
||
flex-direction: column;
|
||
margin-top: 15px;
|
||
width: 100%;
|
||
height: 74px;
|
||
.total {
|
||
display: flex;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 29px;
|
||
.total_part {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
margin-bottom: 10px;
|
||
width: 100%;
|
||
height: 12.5px;
|
||
.text4 {
|
||
width: 38.5px;
|
||
height: 12.5px;
|
||
font-size: 12px;
|
||
// line-height: 30.29px;
|
||
color: #677d86;
|
||
}
|
||
.text5 {
|
||
position: absolute;
|
||
right: 0;
|
||
width: 25px;
|
||
height: 9.5px;
|
||
font-size: 12px;
|
||
// line-height: 30.29px;
|
||
color: #277aff;
|
||
}
|
||
}
|
||
|
||
.progress {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 6.4px;
|
||
margin-top: 20px;
|
||
background-color: #e8f1fe;
|
||
border-radius: 2px;
|
||
.progress_part {
|
||
width: 32%;
|
||
height: 6.4px;
|
||
border-radius: 2px;
|
||
background: linear-gradient(
|
||
-180deg,
|
||
rgba(36, 120, 255, 1),
|
||
rgba(80, 147, 255, 1)
|
||
);
|
||
}
|
||
}
|
||
}
|
||
.compulsory {
|
||
display: flex;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 29px;
|
||
margin-top: 16px;
|
||
.compulsory_part {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
margin-bottom: 10px;
|
||
width: 100%;
|
||
height: 12.5px;
|
||
.text6 {
|
||
width: 38.5px;
|
||
height: 12.5px;
|
||
font-size: 12px;
|
||
// line-height: 30.29px;
|
||
color: #677d86;
|
||
}
|
||
.text7 {
|
||
position: absolute;
|
||
right: 0;
|
||
width: 25px;
|
||
height: 9.5px;
|
||
font-size: 12px;
|
||
// line-height: 30.29px;
|
||
color: #ee6661;
|
||
}
|
||
}
|
||
.progress1 {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 6.4px;
|
||
margin-top: 20px;
|
||
background-color: #e8f1fe;
|
||
border-radius: 2px;
|
||
.progress1_part {
|
||
width: 10%;
|
||
height: 6.4px;
|
||
border-radius: 2px;
|
||
background: linear-gradient(
|
||
-180deg,
|
||
rgba(238, 98, 94, 1),
|
||
rgba(238, 164, 161, 1)
|
||
);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|