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

feat:新增项目详情页面,修改路径图详情页面

Browse Source
This commit is contained in:
岳佳鑫
2022-09-29 18:05:53 +08:00
parent f2791d3afa
commit 12af499546
7 changed files with 958 additions and 1082 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/image/pathmap/btn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 208 B

BIN
src/assets/image/pathmap/close.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 270 B

BIN
src/assets/image/pathmap/firstclass.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
src/assets/image/pathmap/secondclass.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.1 KiB

10
src/views/activities/ActivitiesPage.vue
View File

@@ -77,14 +77,10 @@ export default {
components: {
TitleHead,
},
setup() {
setup() {
},
},
data(){
return {
showBox: false,
};
},
};
</script>

1463
src/views/pathmap/PathmapPage.vue
View File

File diff suppressed because it is too large Load Diff

567
src/views/projectdetails/projectDetails.vue Normal file
View File

@@ -0,0 +1,567 @@
<template>
<div class="projectdetails">
<div class="main">
<div class="up">
<div class="notice">
<span class="text">请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span> <span class="close"></span>
</div>
<div class="content">
<div class="title">中级产品经理</div>
<div class="text2">课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介简介课程简介</div>
</div>
</div>
<div class="down">
<div class="project_title">项目内容</div>
<div class="project_first">
<div class="course1_first">
<div class="text8">序：管理者如何持续找到发力点</div>
<div class="course1_right">
<div class="circular"></div>
<div class="text9">进行中</div>
<div class="btn1"></div>
</div>
</div>
<div class="course_content">
<div class="study1">
<div class="firstclass"></div>
<div class="firstprogress">
<span class="firsttext">BOE端到端体系 - 第七章</span>
<span class="secondtext">70%</span>
<div class="progressbox">
<div class="progressboxpart"></div>
</div>
</div>
</div>
<div class="study2">
<div class="secondclass"></div>
<div class="secondprogress">
<span class="firsttext">中级产品经理项目 - 产品经理…</span>
<span class="secondtext">52%</span>
<div class="progressbox">
<div class="progressboxpart"></div>
</div>
</div>
</div>
</div>
</div>
<div class="project_second">
<div class="course1_first">
<div class="text8">第一讲：业务起航的支点 - 你的风格</div>
<div class="course1_right">
<div class="circular"></div>
<div class="text9">进行中</div>
<div class="btn1"></div>
</div>
</div>
<div class="secondcontent">
<div class="question">
<div class="issue">趣味课前小测 - MBTI测试：你适合做哪个方向？</div>
<div class="tag1">选修</div>
<div class="tag2">测评</div>
</div>
<div class="question">
<div class="issue">社交产品如何做好模块化处理？</div>
<div class="tag3">必修</div>
<div class="tag2">作业</div>
</div>
</div>
</div>
</div>
<div class="last">
<div class="project_title">数据排行</div>
<div class="ranking">
<div class="rankingbox">
<div class="ranknumber">
<div class="describe">积分</div>
<div class="number">12</div>
<div class="describe_part">名</div>
</div>
<div class="ranknumber">
<div class="describe">完成度</div>
<div class="number">21</div>
<div class="describe_part">名</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
</script>
<style lang="scss">
.projectdetails {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
.main {
width:100%;
display: flex;
flex-direction: column;
//justify-content: center;
.up {
width: 100%;
height: 162px;
display: flex;
flex-direction: column;
align-items: center;
//justify-content: center;
background-color: rgba(255, 255, 255, 1);
.notice {
background-color: rgba(255, 251, 238, 1);
width: 100%;
height: 25px;
display: flex;
jusyift-content: center;
//position: relative;
.text {
//display: flex;
height: 25px;
//position: absolute;
color: rgba(255, 158, 0, 1);
padding: 6px 41px 6.5px 15.5px;
font-size: 12px;
//line-height: 24px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.close {
display: flex;
position: absolute;
top: 0;
right: 0;
width: 9.5px;
height: 9.5px;
background-image: url(../../assets/image/pathmap/close.png);
margin-top: 10px;
margin-right: 16px;
margin-bottom: 8px;
}
}
.content {
width: 90%;
display: flex;
flex-direction: column;
.title {
margin-top: 15.5px;
font-size: 14px;
font-weight: 700;
line-height: 21.6px;
color: rgba(4, 36, 60, 1);
}
.text2 {
display: flex;
margin-top: 10px;
margin-bottom: 22.5px;
font-size: 13px;
color: rgba(51, 51, 48, 1);
line-height: 24px;
text-overflow: ellipsis;
overflow: hidden;
}
}
}
.down {
width: 100%;
margin-top: 11.5px;
//height: 529px;
display: flex;
flex-direction: column;
align-items: center;
//justify-content: center;
background-color: rgba(255, 255, 255, 1);
.project_title {
width:100%;
display: flex;
font-size: 16px;
font-weight: 500;
line-height: 12px;
color: rgba(13, 35, 58, 1);
padding: 17px 0 17px 36.5px;
border-bottom: 0.5px solid rgba(241, 242, 243, 1);
}
.project_first {
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 18px;
.course1_first {
width: 100%;
height: 35px;
display: flex;
justify-content: content;
border-radius: 10px;
background-color: #f9f9f9;
.text8 {
display: flex;
flex: 1;
margin-top: 11px;
margin-left: 20px;
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;
right: 63px;
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;
right: 18.5px;
line-height: 13.5px;
color: #0060ff;
font-size: 13px;
font-weight: 600;
}
.btn1 {
width: 7px;
height: 6px;
position: absolute;
top: 3px;
right: 6px;
background-image: url(../../assets/image/pathmap/btn.png);
}
}
}
.course_content {
width: 90%;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 26.5px;
.study1 {
display: flex;
//justify-content: center;
width: 100%;
margin-bottom: 15px;
.firstclass {
display: flex;
width: 74px;
height: 43px;
background-image: url(../../assets/image/pathmap/firstclass.png)
}
.firstprogress {
display: flex;
flex: 1;
position: relative;
margin-left: 9.5px;
.firsttext {
position: absolute;
//top: 6px;
display: flex;
font-size: 13px;
line-height: 30.29px;
color: rgba(110, 123, 132, 1);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.secondtext {
position: absolute;
//top: 6px;
right: 0;
font-size: 12px;
line-height: 30.29px;
color: rgba(39, 122, 255, 1);
}
.progressbox {
width: 100%;
position: absolute;
display: flex;
height: 6.4px;
bottom: 4px;
background-color: rgba(232, 241, 254, 1);
border-radius:2px;
.progressboxpart {
width: 70%;
height: 6.4px;
border-radius: 2px;
background: linear-gradient(
-180deg,
rgba(36, 120, 255, 1),
rgba(80, 147, 255, 1)
);
}
}
}
}
.study2 {
display: flex;
width: 100%;
margin-bottom: 15px;
.secondclass {
width: 74px;
height: 43px;
background-image: url(../../assets/image/pathmap/secondclass.png)
}
.secondprogress {
display: flex;
flex: 1;
position: relative;
margin-left: 9.5px;
.firsttext {
position: absolute;
//top: 6px;
display: flex;
font-size: 13px;
line-height: 30.29px;
color: rgba(110, 123, 132, 1);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.secondtext {
position: absolute;
//top: 6px;
right: 0;
font-size: 12px;
line-height: 30.29px;
color: rgba(39, 122, 255, 1);
}
.progressbox {
width: 100%;
position: absolute;
display: flex;
height: 6.4px;
bottom: 4px;
background-color: rgba(232, 241, 254, 1);
border-radius:2px;
.progressboxpart {
width: 52%;
height: 6.4px;
border-radius: 2px;
background: linear-gradient(
-180deg,
rgba(36, 120, 255, 1),
rgba(80, 147, 255, 1)
);
}
}
}
}
}
}
.project_second {
width: 90%;
display: flex;
flex-direction: column;
align-items:center;
margin-top: 10.5px;
.course1_first {
width: 100%;
height: 35px;
display: flex;
justify-content: content;
border-radius: 10px;
background-color: #f9f9f9;
.text8 {
display: flex;
flex: 1;
margin-top: 11px;
margin-left: 20px;
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;
right: 63px;
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;
right: 18.5px;
line-height: 13.5px;
color: #0060ff;
font-size: 13px;
font-weight: 600;
}
.btn1 {
width: 7px;
height: 6px;
position: absolute;
top: 3px;
right: 6px;
background-image: url(../../assets/image/pathmap/btn.png);
}
}
}
.secondcontent {
width: 90%;
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 10px;
.question {
width: 100%;
display: flex;
position: relative;
height: 72px;
border-bottom: 0.5px solid rgba(241, 242, 243, 1);
.issue {
width: 100%;
display: flex;
font-size: 13px;
line-height: 30.29px;
color: rgba(110, 123, 132, 1);
}
.tag1 {
position: absolute;
left: 0;
bottom: 14.5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
color: rgba(203, 128, 231, 1);
border: 0.5px solid rgba(203, 128, 231, 1);
line-height: 19.2px;
//padding: 0 10px;
}
.tag2 {
position: absolute;
left: 92px;
bottom: 14.5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
color: rgba(136, 157, 238, 1);
border: 0.5px solid rgba(136, 157, 238, 1);
line-height: 19.2px;
//padding: 0 10px;
}
.tag3 {
position: absolute;
left: 0;
bottom: 14.5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
color: rgba(104, 206, 234, 1);
border: 0.5px solid rgba(104, 206, 234, 1);
line-height: 19.2px;
//padding: 0 10px;
}
}
}
}
}
.last {
width: 100%;
margin-top: 11.5px;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(255, 255, 255, 1);
.project_title {
width:100%;
display: flex;
font-size: 16px;
font-weight: 500;
line-height: 12px;
color: rgba(13, 35, 58, 1);
padding: 17px 0 17px 36.5px;
border-bottom: 0.5px solid rgba(241, 242, 243, 1);
}
.ranking {
width: 90%;
display: flex;
justify-content: center;
margin-top: 14px;
border-radius: 10px;
background-color: rgba(242, 245, 247, 1);
margin-bottom: 13.5px;
.rankingbox {
width: 90%;
display: flex;
flex-direction: column;
align-items: center;
.ranknumber {
width: 100%;
height: 50px;
display: flex;
position: relative;
align-items: center;
border-bottom: 0.5px solid rgba(223, 223, 223, 1);
.describe {
display: flex;
position: absolute;
font-size: 14px;
font-weight: 500;
line-height: 24px;
color: rgba(51, 51, 48, 1);
}
.number {
display: flex;
position:absolute;
right: 23.5px;
font-size: 21px;
font-weight:bold;
line-height: 24px;
color: rgba(0, 96, 255, 1)
}
.describe_part {
display: flex;
position: absolute;
right: 0;
font-size: 14px;
font-weight: 500;
line-height: 24px;
color: rgba(51, 51, 48, 1);
}
}
}
}
}
}
}
</style>