hz/student-h5
1
0
Fork 0
mirror of https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/student-h5.git synced 2025-12-10 11:26: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;

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

@@ -1,20 +1,29 @@
<template> <template>
<div class="uploadworkpage"> <div
class="discussupload"
:style="{
height: screenHeight - 73.5 + 'px',
}"
>
<div class="inputcontainer"> <div class="inputcontainer">
<div class="inputt"> <div class="inputt">
<div class="i_title"> <div class="i_title">
<input type="text" id="input_title" placeholder="请输入标题"></div> <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" />
@@ -35,6 +44,7 @@
const state = reactive({ const state = reactive({
text: "", text: "",
textarea: "", textarea: "",
screenHeight: document.body.clientHeight, // 屏幕高度
}); });
return { return {
...toRefs(state), ...toRefs(state),
@@ -43,16 +53,18 @@
}; };
</script> </script>
<style scoped lang="scss" > <style lang="scss">
.clearfix:before, .clearfix:before,
clearfix:after { clearfix:after {
content: " "; content: " ";
display: table; display: table;
clear: both; clear: both;
} }
.uploadworkpage { .discussupload {
width: 100%; width: 100%;
height: 100%; // height: 100%;
background-color: #fff;
// margin-top: 73.5px;
.inputcontainer { .inputcontainer {
margin-top: 20px; margin-top: 20px;
background-color: #fff; background-color: #fff;
@@ -60,10 +72,20 @@
// 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;
.discusscontent {
height: calc(100% - 79px);
overflow-y: scroll;
} }
}
.i_title { .i_title {
margin-left: 16.5px; margin-left: 16.5px;
width: 90%; width: 90%;
@@ -72,11 +94,11 @@
::-webkit-input-placeholder { ::-webkit-input-placeholder {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
color: #04243C; color: #04243c;
} }
:-ms-input-placeholder { :-ms-input-placeholder {
font-size: 16px; font-size: 16px;
color: #04243C; color: #04243c;
} }
#input_title { #input_title {
width: 100%; width: 100%;
@@ -97,6 +119,30 @@
::v-deep .el-textarea { ::v-deep .el-textarea {
height: 100%; 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,17 +154,12 @@
border-top: 1px solid #f1f2f3; border-top: 1px solid #f1f2f3;
} }
} }
.imgcon {
margin-top: 24.5px;
width: 100%;
display: flex;
justify-content: center;
.allimg { .allimg {
width: 70%; width: 70%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom: 24.5px; margin-bottom: 24.5px;
margin-top: 24.5px;
img { img {
width: 20px; width: 20px;
height: 19px; height: 19px;

40
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="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/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,6 +100,16 @@ clearfix:after {
border: none; border: none;
border: 0 !important; border: 0 !important;
} }
.imgcon {
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%;
@@ -98,13 +121,8 @@ clearfix:after {
border-top: 1px solid #f1f2f3; border-top: 1px solid #f1f2f3;
} }
} }
.imgcon {
margin-top: 24.5px;
width: 100%;
display: flex;
justify-content: center;
.allimg { .allimg {
margin-top: 24.5px;
width: 70%; width: 70%;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;

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

@@ -3,11 +3,16 @@
<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"
>请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span
>
<span class="close"></span>
</div> </div>
<div class="content"> <div class="content">
<div class="title">中级产品经理</div> <div class="title">中级产品经理</div>
<div class="text2">课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介简介课程简介</div> <div class="text2">
课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介简介课程简介
</div>
</div> </div>
</div> </div>
<div class="down"> <div class="down">
@@ -55,7 +60,9 @@
</div> </div>
<div class="secondcontent"> <div class="secondcontent">
<div class="question"> <div class="question">
<div class="issue">趣味课前小测 - MBTI测试：你适合做哪个方向？</div> <div class="issue">
趣味课前小测 - MBTI测试：你适合做哪个方向？
</div>
<div class="tag1">选修</div> <div class="tag1">选修</div>
<div class="tag2">测评</div> <div class="tag2">测评</div>
</div> </div>
@@ -73,13 +80,10 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script></script>
</script>
<style lang="scss"> <style lang="scss">
.pathmap { .pathmap {
@@ -105,8 +109,8 @@
width: 100%; width: 100%;
height: 25px; height: 25px;
display: flex; display: flex;
jusyift-content: center; justify-content: center;
//position: relative; position: relative;
.text { .text {
//display: flex; //display: flex;
height: 25px; height: 25px;
@@ -165,7 +169,7 @@
//justify-content: center; //justify-content: center;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
.project_title { .project_title {
width:100%; width: calc(100% - 36.5px);
display: flex; display: flex;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
@@ -253,7 +257,7 @@
display: flex; display: flex;
width: 74px; width: 74px;
height: 43px; height: 43px;
background-image: url(../../assets/image/pathmap/firstclass.png) background-image: url(../../assets/image/pathmap/firstclass.png);
} }
.firstprogress { .firstprogress {
display: flex; display: flex;
@@ -307,7 +311,7 @@
.secondclass { .secondclass {
width: 74px; width: 74px;
height: 43px; height: 43px;
background-image: url(../../assets/image/pathmap/secondclass.png) background-image: url(../../assets/image/pathmap/secondclass.png);
} }
.secondprogress { .secondprogress {
display: flex; display: flex;

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

@@ -3,11 +3,16 @@
<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"
>请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span
>
<span class="close"></span>
</div> </div>
<div class="content"> <div class="content">
<div class="title">中级产品经理</div> <div class="title">中级产品经理</div>
<div class="text2">课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介简介课程简介</div> <div class="text2">
课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介简介课程简介
</div>
</div> </div>
</div> </div>
<div class="down"> <div class="down">
@@ -55,7 +60,9 @@
</div> </div>
<div class="secondcontent"> <div class="secondcontent">
<div class="question"> <div class="question">
<div class="issue">趣味课前小测 - MBTI测试：你适合做哪个方向？</div> <div class="issue">
趣味课前小测 - MBTI测试：你适合做哪个方向？
</div>
<div class="tag1">选修</div> <div class="tag1">选修</div>
<div class="tag2">测评</div> <div class="tag2">测评</div>
</div> </div>
@@ -85,13 +92,10 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script></script>
</script>
<style lang="scss"> <style lang="scss">
.projectdetails { .projectdetails {
@@ -117,8 +121,8 @@
width: 100%; width: 100%;
height: 25px; height: 25px;
display: flex; display: flex;
jusyift-content: center; justify-content: center;
//position: relative; position: relative;
.text { .text {
//display: flex; //display: flex;
height: 25px; height: 25px;
@@ -177,7 +181,7 @@
//justify-content: center; //justify-content: center;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
.project_title { .project_title {
width:100%; width: calc(100% - 36.5px);
display: flex; display: flex;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
@@ -265,7 +269,7 @@
display: flex; display: flex;
width: 74px; width: 74px;
height: 43px; height: 43px;
background-image: url(../../assets/image/pathmap/firstclass.png) background-image: url(../../assets/image/pathmap/firstclass.png);
} }
.firstprogress { .firstprogress {
display: flex; display: flex;
@@ -319,7 +323,7 @@
.secondclass { .secondclass {
width: 74px; width: 74px;
height: 43px; height: 43px;
background-image: url(../../assets/image/pathmap/secondclass.png) background-image: url(../../assets/image/pathmap/secondclass.png);
} }
.secondprogress { .secondprogress {
display: flex; display: flex;
@@ -502,7 +506,7 @@
align-items: center; align-items: center;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
.project_title { .project_title {
width:100%; width: calc(100% - 36.5px);
display: flex; display: flex;
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
@@ -546,8 +550,7 @@
font-size: 21px; font-size: 21px;
font-weight: bold; font-weight: bold;
line-height: 24px; line-height: 24px;
color: rgba(0, 96, 255, 1) color: rgba(0, 96, 255, 1);
} }
.describe_part { .describe_part {
display: flex; display: flex;