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

src/App.vue

@@ -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>

src/views/activities/ActivitiesPage.vue

@@ -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;

src/views/discuss/DiscussUpload.vue

@@ -1,20 +1,29 @@
 <template>
-    <div class="uploadworkpage">
+  <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>
+          <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" />
@@ -24,35 +33,38 @@
       </div>
     </div>
   </div>
-  </template>
+</template>
 
-  <script>
-  import { reactive, toRefs } from "vue";
-  export default {
+<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>
+};
+</script>
 
-  <style scoped lang="scss" >
-  .clearfix:before,
-  clearfix:after {
+<style lang="scss">
+.clearfix:before,
+clearfix:after {
   content: " ";
   display: table;
   clear: both;
-  }
-  .uploadworkpage {
+}
+.discussupload {
   width: 100%;
-    height: 100%;
+  // height: 100%;
+  background-color: #fff;
+  // margin-top: 73.5px;
   .inputcontainer {
     margin-top: 20px;
     background-color: #fff;
@@ -60,25 +72,35 @@
     // 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;
+
+      .discusscontent {
+        height: calc(100% - 79px);
+        overflow-y: scroll;
       }
-      .i_title{
+    }
+
+    .i_title {
       margin-left: 16.5px;
       width: 90%;
       border-bottom: 1px solid #f1f2f3;
       margin-bottom: 5px;
-        ::-webkit-input-placeholder{
+      ::-webkit-input-placeholder {
         font-size: 16px;
         font-weight: 500;
-                color: #04243C;
+        color: #04243c;
       }
-        :-ms-input-placeholder{
+      :-ms-input-placeholder {
         font-size: 16px;
-            color: #04243C;
+        color: #04243c;
       }
-        #input_title{
+      #input_title {
         width: 100%;
         height: 100%;
         margin: 18.5px auto 21px 0px;
@@ -97,6 +119,30 @@
     ::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,18 +154,13 @@
           border-top: 1px solid #f1f2f3;
         }
       }
-      .imgcon {
-        margin-top: 24.5px;
-  
-        width: 100%;
-        display: flex;
-        justify-content: center;
       .allimg {
         width: 70%;
         display: flex;
         justify-content: space-between;
         margin-bottom: 24.5px;
-          img{
+        margin-top: 24.5px;
+        img {
           width: 20px;
           height: 19px;
           background-size: 100% 100%;
@@ -127,5 +168,5 @@
       }
     }
   }
-  }
-  </style>
+}
+</style>

src/views/homeworkpage/UploadWork.vue

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

src/views/pathmap/PathmapPage.vue

@@ -3,11 +3,16 @@
     <div class="main">
       <div class="up">
         <div class="notice">
-      <span class="text">请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span> <span class="close"></span>
+          <span class="text"
+            >请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span
+          >
+          <span class="close"></span>
         </div>
         <div class="content">
           <div class="title">中级产品经理</div>
-      <div class="text2">课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介简介课程简介</div>
+          <div class="text2">
+            课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介简介课程简介
+          </div>
         </div>
       </div>
       <div class="down">
@@ -55,7 +60,9 @@
           </div>
           <div class="secondcontent">
             <div class="question">
-            <div class="issue">趣味课前小测 - MBTI测试：你适合做哪个方向？</div>
+              <div class="issue">
+                趣味课前小测 - MBTI测试：你适合做哪个方向？
+              </div>
               <div class="tag1">选修</div>
               <div class="tag2">测评</div>
             </div>
@@ -73,13 +80,10 @@
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
-<script>
-
-</script>
+<script></script>
 
 <style lang="scss">
 .pathmap {
@@ -88,7 +92,7 @@
   flex-direction: column;
   align-items: center;
   .main {
-    width:100%;
+    width: 100%;
     display: flex;
     flex-direction: column;
     //justify-content: center;
@@ -105,8 +109,8 @@
         width: 100%;
         height: 25px;
         display: flex;
-      jusyift-content: center;
-      //position: relative;
+        justify-content: center;
+        position: relative;
         .text {
           //display: flex;
           height: 25px;
@@ -165,7 +169,7 @@
       //justify-content: center;
       background-color: rgba(255, 255, 255, 1);
       .project_title {
-      width:100%;
+        width: calc(100% - 36.5px);
         display: flex;
         font-size: 16px;
         font-weight: 500;
@@ -253,7 +257,7 @@
               display: flex;
               width: 74px;
               height: 43px;
-            background-image: url(../../assets/image/pathmap/firstclass.png)
+              background-image: url(../../assets/image/pathmap/firstclass.png);
             }
             .firstprogress {
               display: flex;
@@ -286,7 +290,7 @@
                 height: 6.4px;
                 bottom: 4px;
                 background-color: rgba(232, 241, 254, 1);
-              border-radius:2px;
+                border-radius: 2px;
                 .progressboxpart {
                   width: 70%;
                   height: 6.4px;
@@ -307,7 +311,7 @@
             .secondclass {
               width: 74px;
               height: 43px;
-            background-image: url(../../assets/image/pathmap/secondclass.png)
+              background-image: url(../../assets/image/pathmap/secondclass.png);
             }
             .secondprogress {
               display: flex;
@@ -340,7 +344,7 @@
                 height: 6.4px;
                 bottom: 4px;
                 background-color: rgba(232, 241, 254, 1);
-              border-radius:2px;
+                border-radius: 2px;
                 .progressboxpart {
                   width: 52%;
                   height: 6.4px;
@@ -360,7 +364,7 @@
         width: 90%;
         display: flex;
         flex-direction: column;
-      align-items:center;
+        align-items: center;
         margin-top: 10.5px;
         .course1_first {
           width: 100%;

src/views/projectdetails/projectDetails.vue

@@ -3,11 +3,16 @@
     <div class="main">
       <div class="up">
         <div class="notice">
-      <span class="text">请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span> <span class="close"></span>
+          <span class="text"
+            >请各位选课的同学提前阅读本课程的“教学大纲与计划请各位选课的同学提前阅读本课程的“教学大纲与计划</span
+          >
+          <span class="close"></span>
         </div>
         <div class="content">
           <div class="title">中级产品经理</div>
-      <div class="text2">课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介简介课程简介</div>
+          <div class="text2">
+            课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介课程简介简介课程简介
+          </div>
         </div>
       </div>
       <div class="down">
@@ -55,7 +60,9 @@
           </div>
           <div class="secondcontent">
             <div class="question">
-            <div class="issue">趣味课前小测 - MBTI测试：你适合做哪个方向？</div>
+              <div class="issue">
+                趣味课前小测 - MBTI测试：你适合做哪个方向？
+              </div>
               <div class="tag1">选修</div>
               <div class="tag2">测评</div>
             </div>
@@ -85,13 +92,10 @@
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
-<script>
-
-</script>
+<script></script>
 
 <style lang="scss">
 .projectdetails {
@@ -100,7 +104,7 @@
   flex-direction: column;
   align-items: center;
   .main {
-    width:100%;
+    width: 100%;
     display: flex;
     flex-direction: column;
     //justify-content: center;
@@ -117,8 +121,8 @@
         width: 100%;
         height: 25px;
         display: flex;
-      jusyift-content: center;
-      //position: relative;
+        justify-content: center;
+        position: relative;
         .text {
           //display: flex;
           height: 25px;
@@ -177,7 +181,7 @@
       //justify-content: center;
       background-color: rgba(255, 255, 255, 1);
       .project_title {
-      width:100%;
+        width: calc(100% - 36.5px);
         display: flex;
         font-size: 16px;
         font-weight: 500;
@@ -265,7 +269,7 @@
               display: flex;
               width: 74px;
               height: 43px;
-            background-image: url(../../assets/image/pathmap/firstclass.png)
+              background-image: url(../../assets/image/pathmap/firstclass.png);
             }
             .firstprogress {
               display: flex;
@@ -298,7 +302,7 @@
                 height: 6.4px;
                 bottom: 4px;
                 background-color: rgba(232, 241, 254, 1);
-              border-radius:2px;
+                border-radius: 2px;
                 .progressboxpart {
                   width: 70%;
                   height: 6.4px;
@@ -319,7 +323,7 @@
             .secondclass {
               width: 74px;
               height: 43px;
-            background-image: url(../../assets/image/pathmap/secondclass.png)
+              background-image: url(../../assets/image/pathmap/secondclass.png);
             }
             .secondprogress {
               display: flex;
@@ -352,7 +356,7 @@
                 height: 6.4px;
                 bottom: 4px;
                 background-color: rgba(232, 241, 254, 1);
-              border-radius:2px;
+                border-radius: 2px;
                 .progressboxpart {
                   width: 52%;
                   height: 6.4px;
@@ -372,7 +376,7 @@
         width: 90%;
         display: flex;
         flex-direction: column;
-      align-items:center;
+        align-items: center;
         margin-top: 10.5px;
         .course1_first {
           width: 100%;
@@ -502,7 +506,7 @@
       align-items: center;
       background-color: rgba(255, 255, 255, 1);
       .project_title {
-            width:100%;
+        width: calc(100% - 36.5px);
         display: flex;
         font-size: 16px;
         font-weight: 500;
@@ -541,13 +545,12 @@
             }
             .number {
               display: flex;
-                        position:absolute;
+              position: absolute;
               right: 23.5px;
               font-size: 21px;
-                        font-weight:bold;
+              font-weight: bold;
               line-height: 24px;
-                        color: rgba(0, 96, 255, 1)
-                        
+              color: rgba(0, 96, 255, 1);
             }
             .describe_part {
               display: flex;