mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-10 19:36:47 +08:00
437 lines
12 KiB
Vue
437 lines
12 KiB
Vue
<template>
|
||
<div class="pathmap">
|
||
<TitleHead text="中级产品经理"></TitleHead>
|
||
<div class="main">
|
||
<div class="title">
|
||
<div class="box">
|
||
<div class="nav">
|
||
<span class="announcement">课程公告</span>
|
||
<span class="share">共享文档</span>
|
||
</div>
|
||
<div class="content">
|
||
请各位选课的同学提前阅读本课程的“教学大纲与计划”“课程考核要求”与“学习要求”，并按给定的中学化学教学主题分好小组 <br>每位同学在网上学习的活动轨迹都会自动被系统记录，将作为大家个人线上参与的评价依据；<br>请大家务必在规定的时间内提交作业，否则会被系统自动记录为“迟交”或“未交”，则会影响线上参与的平时成绩；
|
||
</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="course">
|
||
<div class="course_box">
|
||
<div class="course_first">
|
||
<span class="text8">序：产品经理从初级到中级</span>
|
||
<span class="text9"><span class="circular"></span>进行中</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// import { reactive, toRefs } from "vue";
|
||
import TitleHead from "@/components/TitleHead.vue";
|
||
export default {
|
||
name: "BallotPage",
|
||
components: {
|
||
TitleHead,
|
||
},
|
||
setup() {},
|
||
};
|
||
</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;
|
||
.course {
|
||
width: 90%;
|
||
height: 903px;
|
||
margin-top: 10px;
|
||
border-radius: 4px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
display: flex;
|
||
justify-content: center;
|
||
.course_box {
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 90%;
|
||
margin-top: 18.5px;
|
||
background-color: pink;
|
||
.course_first {
|
||
width: 100%;
|
||
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: 500;
|
||
color: #333330;
|
||
}
|
||
.text9 {
|
||
margin-top: 11px;
|
||
margin-left: 77.5px;
|
||
color: #0060FF;
|
||
font-size:13px;
|
||
font-weight: 400;
|
||
.circular {
|
||
|
||
border: 1px solid #0060FF;
|
||
border-radius: 25%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.title {
|
||
width: 90%;
|
||
height: 272px;
|
||
border-radius: 4px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
display: flex;
|
||
justify-content: center;
|
||
.box {
|
||
width: 90%;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-wrap:wrap;
|
||
overflow-y: auto;
|
||
.nav {
|
||
width: 100%;
|
||
height: 49.5px;
|
||
display: flex;
|
||
.announcement {
|
||
color: #2478FF;
|
||
font-size: 14px;
|
||
line-height: 21.6px;
|
||
font-weight: 700;
|
||
margin-top: 18.5px;
|
||
border-bottom: 1px solid #2478FF;
|
||
}
|
||
.share {
|
||
color: #394145;
|
||
font-size: 13px;
|
||
line-height: 21.6px;
|
||
margin-top: 19px;
|
||
margin-left: 70px;
|
||
|
||
}
|
||
}
|
||
.content {
|
||
width: 100%;
|
||
height: 180.5px;
|
||
display: flex;
|
||
justify-content: center;
|
||
color: #333330;
|
||
font-size:13px;
|
||
line-height: 24px;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
.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;
|
||
margin-rihgt: 21px;
|
||
color: #2478FF;
|
||
font-weight: 400;
|
||
border: 0.5px solid #2478FF;
|
||
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>
|