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

style:修改上传作业和讨论法表页面

Browse Source
This commit is contained in:
李晓鸽
2022-10-08 16:25:10 +08:00
parent d78ade940c
commit 6424a4857b
6 changed files with 1047 additions and 979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div id="container"> <div id="container">
<div id="nav"> <!-- <div id="nav">
<router-link <router-link
v-for="item in routes" v-for="item in routes"
:key="item.path" :key="item.path"
@@ -12,7 +12,7 @@
> >
{{ item.name }} {{ item.name }}
</router-link> </router-link>
</div> </div> -->
<main> <main>
<router-view /> <router-view />
</main> </main>

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

@@ -70,6 +70,7 @@ export default {
<style lang="scss"> <style lang="scss">
.activities { .activities {
width: 100%; width: 100%;
.main { .main {
width: 100%; width: 100%;
display: flex; display: flex;
@@ -153,6 +154,7 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
padding-bottom: 20px;
.details_title { .details_title {
width: 90%; width: 90%;
display: flex; display: flex;

231
src/views/discuss/DiscussUpload.vue
View File

@@ -1,102 +1,148 @@
<template> <template>
<div class="uploadworkpage"> <div
<div class="inputcontainer"> class="discussupload"
<div class="inputt"> :style="{
<div class="i_title"> height: screenHeight - 73.5 + 'px',
<input type="text" id="input_title" placeholder="请输入标题"></div> }"
>
<div class="inputcontainer">
<div class="inputt">
<div class="i_title">
<input type="text" id="input_title" placeholder="请输入标题" />
</div>
<div class="discusscontent">
<el-input <el-input
type="textarea" type="textarea"
placeholder="请输入正文" placeholder="请输入正文"
v-model="textarea" v-model="textarea"
rows="35" autosize
></el-input> ></el-input>
</div> </div>
</div>
<div class="imgcon">
<div class="linecon"> <div class="linecon">
<div class="line"></div> <div class="line"></div>
</div> </div>
<div class="imgcon"> <div class="allimg">
<div class="allimg"> <img src="../../assets/image/discuss/images.png" />
<img src="../../assets/image/discuss/images.png" /> <img src="../../assets/image/discuss/pre.png" />
<img src="../../assets/image/discuss/pre.png" /> <img src="../../assets/image/discuss/next.png" />
<img src="../../assets/image/discuss/next.png" /> <img src="../../assets/image/discuss/delete.png" />
<img src="../../assets/image/discuss/delete.png" />
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </div>
</template>
<script>
import { reactive, toRefs } from "vue"; <script>
export default { import { reactive, toRefs } from "vue";
name: "UploadWork", export default {
components: {}, name: "UploadWork",
setup() { components: {},
const state = reactive({ setup() {
text: "", const state = reactive({
textarea: "", text: "",
}); textarea: "",
return { screenHeight: document.body.clientHeight, // 屏幕高度
...toRefs(state), });
}; return {
}, ...toRefs(state),
}; };
</script> },
};
<style scoped lang="scss" > </script>
.clearfix:before,
clearfix:after { <style lang="scss">
content: " "; .clearfix:before,
display: table; clearfix:after {
clear: both; content: " ";
} display: table;
.uploadworkpage { clear: both;
}
.discussupload {
width: 100%;
// height: 100%;
background-color: #fff;
// margin-top: 73.5px;
.inputcontainer {
margin-top: 20px;
background-color: #fff;
width: 100%; width: 100%;
// height: 100px;
// display: flex;
// justify-content: center;
// height: 80%;
height: 100%; height: 100%;
.inputcontainer { .inputt {
margin-top: 20px;
background-color: #fff;
width: 100%; width: 100%;
height: calc(100% - 79px);
// height: 100px; // height: 100px;
// display: flex; // padding-bottom: 79px;
// justify-content: center;
height: 80%; .discusscontent {
.inputt { 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%; 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%; 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 { .linecon {
margin-top: 10px; margin-top: 10px;
width: 100%; width: 100%;
@@ -108,24 +154,19 @@
border-top: 1px solid #f1f2f3; border-top: 1px solid #f1f2f3;
} }
} }
.imgcon { .allimg {
margin-top: 24.5px; width: 70%;
width: 100%;
display: flex; display: flex;
justify-content: center; justify-content: space-between;
.allimg { margin-bottom: 24.5px;
width: 70%; margin-top: 24.5px;
display: flex; img {
justify-content: space-between; width: 20px;
margin-bottom: 24.5px; height: 19px;
img{ background-size: 100% 100%;
width: 20px;
height: 19px;
background-size: 100% 100%;
}
} }
} }
} }
} }
</style> }
</style>

58
src/views/homeworkpage/UploadWork.vue
View File

@@ -1,18 +1,24 @@
<template> <template>
<div class="uploadworkpage"> <div
class="uploadworkpage"
:style="{
height: screenHeight - 73.5 + 'px',
}"
>
<div class="inputcontainer"> <div class="inputcontainer">
<div class="inputt"> <div class="inputt">
<el-input <el-input
type="textarea" type="textarea"
placeholder="请输入正文" placeholder="请输入正文"
v-model="textarea" v-model="textarea"
rows="35" autosize
></el-input> ></el-input>
</div> </div>
<div class="linecon">
<div class="line"></div>
</div>
<div class="imgcon"> <div class="imgcon">
<div class="linecon">
<div class="line"></div>
</div>
<div class="allimg"> <div class="allimg">
<img src="../../assets/image/homeworkpage/link.png" /> <img src="../../assets/image/homeworkpage/link.png" />
<img src="../../assets/image/homeworkpage/pre.png" /> <img src="../../assets/image/homeworkpage/pre.png" />
@@ -33,6 +39,7 @@ export default {
const state = reactive({ const state = reactive({
text: "", text: "",
textarea: "", textarea: "",
screenHeight: document.body.clientHeight, // 屏幕高度
}); });
return { return {
...toRefs(state), ...toRefs(state),
@@ -50,7 +57,8 @@ clearfix:after {
} }
.uploadworkpage { .uploadworkpage {
width: 100%; width: 100%;
height: 100%; background-color: #fff;
// margin-top: 73.5px;
.inputcontainer { .inputcontainer {
margin-top: 20px; margin-top: 20px;
background-color: #fff; background-color: #fff;
@@ -58,9 +66,14 @@ clearfix:after {
// height: 100px; // height: 100px;
// display: flex; // display: flex;
// justify-content: center; // justify-content: center;
height: 80%; // height: 80%;
height: 100%;
.inputt { .inputt {
width: 100%; width: 100%;
height: calc(100% - 79px);
// height: 100px;
// padding-bottom: 79px;
overflow-y: scroll;
} }
::v-deep .el-textarea__inner { ::v-deep .el-textarea__inner {
resize: none; resize: none;
@@ -87,24 +100,29 @@ clearfix:after {
border: none; border: none;
border: 0 !important; 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%; width: 100%;
display: flex; display: flex;
flex-direction: column;
align-items: center;
justify-content: 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 { .allimg {
margin-top: 24.5px;
width: 70%; width: 70%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

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

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

995
src/views/projectdetails/projectDetails.vue
View File

File diff suppressed because it is too large Load Diff