mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git
synced 2025-12-07 01:46:45 +08:00
style:修改上传作业和讨论法表页面
This commit is contained in:
李晓鸽
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div id="container">
|
||||
<div id="nav">
|
||||
<!-- <div id="nav">
|
||||
<router-link
|
||||
v-for="item in routes"
|
||||
:key="item.path"
|
||||
@@ -12,7 +12,7 @@
|
||||
>
|
||||
{{ item.name }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div> -->
|
||||
<main>
|
||||
<router-view />
|
||||
</main>
|
||||
|
||||
@@ -70,6 +70,7 @@ export default {
|
||||
<style lang="scss">
|
||||
.activities {
|
||||
width: 100%;
|
||||
|
||||
.main {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
@@ -153,6 +154,7 @@ export default {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
padding-bottom: 20px;
|
||||
.details_title {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
|
||||
@@ -1,102 +1,148 @@
|
||||
<template>
|
||||
<div class="uploadworkpage">
|
||||
<div class="inputcontainer">
|
||||
<div class="inputt">
|
||||
<div class="i_title">
|
||||
<input type="text" id="input_title" placeholder="请输入标题"></div>
|
||||
<div
|
||||
class="discussupload"
|
||||
:style="{
|
||||
height: screenHeight - 73.5 + 'px',
|
||||
}"
|
||||
>
|
||||
<div class="inputcontainer">
|
||||
<div class="inputt">
|
||||
<div class="i_title">
|
||||
<input type="text" id="input_title" placeholder="请输入标题" />
|
||||
</div>
|
||||
<div class="discusscontent">
|
||||
<el-input
|
||||
type="textarea"
|
||||
placeholder="请输入正文"
|
||||
v-model="textarea"
|
||||
rows="35"
|
||||
autosize
|
||||
></el-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="imgcon">
|
||||
<div class="linecon">
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="imgcon">
|
||||
<div class="allimg">
|
||||
<img src="../../assets/image/discuss/images.png" />
|
||||
<img src="../../assets/image/discuss/pre.png" />
|
||||
<img src="../../assets/image/discuss/next.png" />
|
||||
<img src="../../assets/image/discuss/delete.png" />
|
||||
</div>
|
||||
<div class="allimg">
|
||||
<img src="../../assets/image/discuss/images.png" />
|
||||
<img src="../../assets/image/discuss/pre.png" />
|
||||
<img src="../../assets/image/discuss/next.png" />
|
||||
<img src="../../assets/image/discuss/delete.png" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
export default {
|
||||
name: "UploadWork",
|
||||
components: {},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
text: "",
|
||||
textarea: "",
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<script>
|
||||
import { reactive, toRefs } from "vue";
|
||||
export default {
|
||||
name: "UploadWork",
|
||||
components: {},
|
||||
setup() {
|
||||
const state = reactive({
|
||||
text: "",
|
||||
textarea: "",
|
||||
screenHeight: document.body.clientHeight, // 屏幕高度
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss" >
|
||||
.clearfix:before,
|
||||
clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.uploadworkpage {
|
||||
<style lang="scss">
|
||||
.clearfix:before,
|
||||
clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
clear: both;
|
||||
}
|
||||
.discussupload {
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
background-color: #fff;
|
||||
// margin-top: 73.5px;
|
||||
.inputcontainer {
|
||||
margin-top: 20px;
|
||||
background-color: #fff;
|
||||
width: 100%;
|
||||
// height: 100px;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
// height: 80%;
|
||||
height: 100%;
|
||||
.inputcontainer {
|
||||
margin-top: 20px;
|
||||
background-color: #fff;
|
||||
.inputt {
|
||||
width: 100%;
|
||||
height: calc(100% - 79px);
|
||||
// height: 100px;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
height: 80%;
|
||||
.inputt {
|
||||
// padding-bottom: 79px;
|
||||
|
||||
.discusscontent {
|
||||
height: calc(100% - 79px);
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
.i_title {
|
||||
margin-left: 16.5px;
|
||||
width: 90%;
|
||||
border-bottom: 1px solid #f1f2f3;
|
||||
margin-bottom: 5px;
|
||||
::-webkit-input-placeholder {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #04243c;
|
||||
}
|
||||
:-ms-input-placeholder {
|
||||
font-size: 16px;
|
||||
color: #04243c;
|
||||
}
|
||||
#input_title {
|
||||
width: 100%;
|
||||
}
|
||||
.i_title{
|
||||
margin-left: 16.5px;
|
||||
width: 90%;
|
||||
border-bottom: 1px solid #f1f2f3;
|
||||
margin-bottom: 5px;
|
||||
::-webkit-input-placeholder{
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #04243C;
|
||||
}
|
||||
:-ms-input-placeholder{
|
||||
font-size: 16px;
|
||||
color: #04243C;
|
||||
}
|
||||
#input_title{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 18.5px auto 21px 0px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
::v-deep .el-textarea__inner {
|
||||
resize: none;
|
||||
border-color: transparent;
|
||||
height: 100%;
|
||||
}
|
||||
::v-deep .el-textarea:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
::v-deep .el-textarea {
|
||||
height: 100%;
|
||||
margin: 18.5px auto 21px 0px;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
::v-deep .el-textarea__inner {
|
||||
resize: none;
|
||||
border-color: transparent;
|
||||
height: 100%;
|
||||
}
|
||||
::v-deep .el-textarea:focus {
|
||||
border-color: transparent;
|
||||
}
|
||||
::v-deep .el-textarea {
|
||||
height: 100%;
|
||||
}
|
||||
.el-textarea__inner {
|
||||
border: 0 !important;
|
||||
resize: none !important; /* 这个是去掉 textarea 下面拉伸的那个标志，如下图 */
|
||||
box-shadow: none !important;
|
||||
padding: 16px 18px;
|
||||
}
|
||||
.el-textarea__inner:hover {
|
||||
box-shadow: none !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
.el-textarea__inner:focus {
|
||||
border: none;
|
||||
border: 0 !important;
|
||||
}
|
||||
.imgcon {
|
||||
// margin-top: 24.5px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
.linecon {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
@@ -108,24 +154,19 @@
|
||||
border-top: 1px solid #f1f2f3;
|
||||
}
|
||||
}
|
||||
.imgcon {
|
||||
margin-top: 24.5px;
|
||||
|
||||
width: 100%;
|
||||
.allimg {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.allimg {
|
||||
width: 70%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24.5px;
|
||||
img{
|
||||
width: 20px;
|
||||
height: 19px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
justify-content: space-between;
|
||||
margin-bottom: 24.5px;
|
||||
margin-top: 24.5px;
|
||||
img {
|
||||
width: 20px;
|
||||
height: 19px;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,18 +1,24 @@
|
||||
<template>
|
||||
<div class="uploadworkpage">
|
||||
<div
|
||||
class="uploadworkpage"
|
||||
:style="{
|
||||
height: screenHeight - 73.5 + 'px',
|
||||
}"
|
||||
>
|
||||
<div class="inputcontainer">
|
||||
<div class="inputt">
|
||||
<el-input
|
||||
type="textarea"
|
||||
placeholder="请输入正文"
|
||||
v-model="textarea"
|
||||
rows="35"
|
||||
autosize
|
||||
></el-input>
|
||||
</div>
|
||||
<div class="linecon">
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
|
||||
<div class="imgcon">
|
||||
<div class="linecon">
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<div class="allimg">
|
||||
<img src="../../assets/image/homeworkpage/link.png" />
|
||||
<img src="../../assets/image/homeworkpage/pre.png" />
|
||||
@@ -33,6 +39,7 @@ export default {
|
||||
const state = reactive({
|
||||
text: "",
|
||||
textarea: "",
|
||||
screenHeight: document.body.clientHeight, // 屏幕高度
|
||||
});
|
||||
return {
|
||||
...toRefs(state),
|
||||
@@ -50,7 +57,8 @@ clearfix:after {
|
||||
}
|
||||
.uploadworkpage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
// margin-top: 73.5px;
|
||||
.inputcontainer {
|
||||
margin-top: 20px;
|
||||
background-color: #fff;
|
||||
@@ -58,9 +66,14 @@ clearfix:after {
|
||||
// height: 100px;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
height: 80%;
|
||||
// height: 80%;
|
||||
height: 100%;
|
||||
.inputt {
|
||||
width: 100%;
|
||||
height: calc(100% - 79px);
|
||||
// height: 100px;
|
||||
// padding-bottom: 79px;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
::v-deep .el-textarea__inner {
|
||||
resize: none;
|
||||
@@ -87,24 +100,29 @@ clearfix:after {
|
||||
border: none;
|
||||
border: 0 !important;
|
||||
}
|
||||
.linecon {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.line {
|
||||
width: 90%;
|
||||
height: 0;
|
||||
border-top: 1px solid #f1f2f3;
|
||||
}
|
||||
}
|
||||
.imgcon {
|
||||
margin-top: 24.5px;
|
||||
|
||||
.imgcon {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
background-color: #fff;
|
||||
.linecon {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.line {
|
||||
width: 90%;
|
||||
height: 0;
|
||||
border-top: 1px solid #f1f2f3;
|
||||
}
|
||||
}
|
||||
.allimg {
|
||||
margin-top: 24.5px;
|
||||
width: 70%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
@@ -1,85 +1,89 @@
|
||||
<template>
|
||||
<div class="pathmap">
|
||||
<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="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 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>
|
||||
<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 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>
|
||||
<div class="project_second">
|
||||
<div class="course1_first">
|
||||
<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 class="question">
|
||||
<div class="issue">社交产品如何做好模块化处理？</div>
|
||||
<div class="tag3">必修</div>
|
||||
<div class="tag2">讨论</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 class="question">
|
||||
<div class="issue">社交产品如何做好模块化处理？</div>
|
||||
<div class="tag3">必修</div>
|
||||
<div class="tag2">讨论</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
<script></script>
|
||||
|
||||
<style lang="scss">
|
||||
.pathmap {
|
||||
@@ -88,281 +92,99 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
.main {
|
||||
width:100%;
|
||||
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%;
|
||||
height: 162px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 18px;
|
||||
.course1_first {
|
||||
width: 100%;
|
||||
height: 35px;
|
||||
//justify-content: center;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
.notice {
|
||||
background-color: rgba(255, 251, 238, 1);
|
||||
width: 100%;
|
||||
height: 25px;
|
||||
display: flex;
|
||||
justify-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;
|
||||
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);
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
}
|
||||
.course_content {
|
||||
.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)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
.title {
|
||||
margin-top: 15.5px;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 21.6px;
|
||||
color: rgba(4, 36, 60, 1);
|
||||
}
|
||||
.study2 {
|
||||
.text2 {
|
||||
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)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
margin-top: 10px;
|
||||
margin-bottom: 22.5px;
|
||||
font-size: 13px;
|
||||
color: rgba(51, 51, 48, 1);
|
||||
line-height: 24px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
.project_second {
|
||||
width: 90%;
|
||||
}
|
||||
.down {
|
||||
width: 100%;
|
||||
margin-top: 11.5px;
|
||||
//height: 529px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items:center;
|
||||
margin-top: 10.5px;
|
||||
.course1_first {
|
||||
align-items: center;
|
||||
//justify-content: center;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
.project_title {
|
||||
width: calc(100% - 36.5px);
|
||||
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;
|
||||
@@ -419,68 +241,250 @@
|
||||
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%;
|
||||
}
|
||||
.course_content {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
position: relative;
|
||||
height: 72px;
|
||||
border-bottom: 0.5px solid rgba(241, 242, 243, 1);
|
||||
.issue {
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
margin-top: 26.5px;
|
||||
.study1 {
|
||||
display: flex;
|
||||
//justify-content: center;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
font-size: 13px;
|
||||
line-height: 30.29px;
|
||||
color: rgba(110, 123, 132, 1);
|
||||
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)
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tag1 {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 14.5px;
|
||||
.study2 {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user