feat：新增讨论页面 讨论详情页面

src/views/debate/DebatePage.vue

@@ -384,8 +384,7 @@ export default {
     line-height: 24px;
     height: 24px;
     font-weight: 600;
-    color: #fff;
+    color: #ffffff;
-    margin-left: -10px;
   }
 
   .detailinfo {

src/views/examination/ExamPage.vue

@@ -57,7 +57,7 @@
         <!-- 考试测试的盒子 -->
 
         <!-- 开始考试按钮 -->
-        <button class="starttest">开始考试</button>
+        <button class="starttest" style="cursor: pointer">开始考试</button>
         <!-- 开始考试按钮 -->
         <div class="righttitleE">
           <img width="20px" height="20px" src="../../assets/image/yuan.png" />

src/views/faceteach/FaceTeach.vue

@@ -133,15 +133,13 @@
           }"
         >
           <img class="peopleimg" :src="el.peopleimg" />
-          <div style="margin-left: 17px">
+          <div style="margin-left: 17px; width: 190px">
-            <div class="teacherName">
+            <div class="teacherName" style="margin-right: 5px">
-              <div style="margin-right: 5px">{{ el.name }}</div>
+              {{ el.name }}
-              <div v-for="(item, key) in el.medal" :key="key">
-                <img class="teacherMedal" :src="item" />
-              </div>
             </div>
             <div class="introduce">{{ el.introduce }}</div>
           </div>
+          <div class="follow">+ 关注</div>
         </div>
       </div>
     </div>
@@ -417,6 +415,7 @@ export default {
         // min-height: 115px;
         padding: 25px 0px;
         display: flex;
+        position: relative;
         // align-items: center;
       }
       .teacheritem .peopleimg {
@@ -430,22 +429,29 @@ export default {
         color: #394145;
         display: flex;
         align-items: center;
-        width: 260px;
-      }
-      .teacheritem .teacherName .teacherMedal {
-        width: 17px;
-        height: 19px;
-        margin-right: 4px;
-        display: flex;
-        align-items: center;
       }
       .teacheritem .introduce {
-        width: 260px;
         font-size: 14px;
         font-weight: 500;
         color: #394145;
         margin-top: 14px;
+      }
+      .teacheritem .follow {
+        width: 80px;
+        height: 30px;
+        background: #387df7;
+        border-radius: 4px;
+        margin-top: 28px;
+        position: absolute;
+        right: -25px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #ffffff;
         line-height: 24px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
       }
     }
   }

src/views/homework/HomeworkPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="moreactive">
+  <div class="homework">
     <!-- 面包屑导航 -->
     <div class="crumb">
       <div>混合制项目</div>
@@ -23,7 +23,14 @@
     <div class="detailinfo">
       <div class="detail">
         <div class="detailT">
-          <div class="left">
+          <div
+            style="
+              margin-left: 45px;
+              margin-right: 42px;
+              position: relative;
+              width: 100%;
+            "
+          >
             <div class="title">
               <img
                 width="20px"
@@ -33,15 +40,26 @@
               <div class="text">作业名称</div>
               <div class="box"></div>
             </div>
-            <div class="shapan clearfix">
+            <div class="shapan">
+              <div style="flex: 1; width: 0">
                 <div class="shapanexplain">
                   管理者进阶腾飞班 - 第一次作业 - 沙盘实验
                 </div>
               </div>
+            </div>
 
-            <button class="shangchuan" style="cursor: pointer">上传</button>
+            <button
+              class="shangchuan"
+              style="cursor: pointer"
+              @click="uploadFile"
+            >
+              上传
+            </button>
 
-            <div class="uploadDetail">
+            <div
+              class="uploadDetail"
+              :style="{ display: uploadfile ? 'block' : 'none' }"
+            >
               <div class="triangle"></div>
               <div class="square clearfix">
                 <div class="squarecontent1">
@@ -95,16 +113,25 @@
 
             <div class="title">
               <img
-                width="20px"
+                style="width: 20px; height: 20px"
-                height="20px"
                 src="../../assets/image/yuan.png"
               />
               <div class="text">作业内容</div>
               <div class="box"></div>
             </div>
 
-            <div class="join"></div>
+            <div class="join">
+              <el-input
+                v-model="textarea1"
+                :autosize="{ minRows: 12.5, maxRows: 12.5 }"
+                resize="none"
+                type="textarea"
+                @input="textareaInput"
+              />
+            </div>
+            <div style="display: flex; justify-content: center">
               <button class="tijiao">提交</button>
+            </div>
 
             <div class=""></div>
 
@@ -119,38 +146,42 @@
             </div>
 
             <div class="history">
-              <div class="historytitle clearfix tongyi">
+              <div class="historytitle">
                 <div class="content1">提交时间</div>
                 <div class="content2">作业内容</div>
               </div>
-              <div class="historytitle2 clearfix tongyi">
-                <div class="content1">2022-7-20&nbsp;00:00</div>
-                <div class="content2">大唐之音鉴赏 - 2022/7/20.zip</div>
-              </div>
-              <div class="fenge"></div>
-              <div class="historytitle2 clearfix tongyi">
-                <div class="content1">2022-7-18&nbsp;00:00</div>
-                <div class="content2">
-                  《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…
-                </div>
-              </div>
-              <div class="fenge"></div>
               <div
-                class="historytitle2 clearfix tongyi"
+                v-for="(value, index) in history"
-                style="border-radius: 0px 0px 8px 8px"
+                :key="index"
+                class="historytitle2"
+                :style="{
+                  'border-bottom':
+                    index === history.length - 1
+                      ? '1px solid rgba(215, 229, 253, 0)'
+                      : '1px solid rgba(215, 229, 253, 1)',
+                }"
               >
-                <div class="content1">2022-7-14&nbsp;00:00</div>
+                <div class="content1">{{ value.time }}</div>
-                <div class="content2">湖北黄冈语文压卷题.doc</div>
+                <div class="content2">
+                  <div
+                    style="
+                      width: 95%;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                      white-space: nowrap;
+                    "
+                  >
+                    {{ value.content }}
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
       <div class="right">
         <div class="righttitle">
-              <img
+          <img width="20px" height="20px" src="../../assets/image/yuan.png" />
-                width="20px"
-                height="20px"
-                src="../../assets/image/yuan.png"
-              />
           <div class="text">截止时间</div>
           <div class="box"></div>
         </div>
@@ -171,11 +202,7 @@
           </div>
         </div>
         <div class="righttitle">
-              <img
+          <img width="20px" height="20px" src="../../assets/image/yuan.png" />
-                width="20px"
-                height="20px"
-                src="../../assets/image/yuan.png"
-              />
 
           <div class="text">作业说明</div>
           <div class="box"></div>
@@ -191,8 +218,6 @@
         </div>
       </div>
     </div>
-      </div>
-    </div>
     <!-- 详细信息 -->
   </div>
 </template>
@@ -204,27 +229,59 @@ export default {
   setup() {
     const state = reactive({
       activeName: "first",
+      uploadfile: false,
+      textarea1: "",
+      history: [
+        {
+          id: 1,
+          time: "2022-7-20 00:00",
+          content: "大唐之音鉴赏 - 2022/7/20.zip",
+        },
+        {
+          id: 2,
+          time: "2022-7-18 00:00",
+          content: "《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…",
+        },
+        {
+          id: 3,
+          time: "2022-7-17 00:00",
+          content: "湖北黄冈语文压卷题.doc",
+        },
+        {
+          id: 2,
+          time: "2022-7-18 00:00",
+          content: "《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…",
+        },
+        {
+          id: 3,
+          time: "2022-7-17 00:00",
+          content: "湖北黄冈语文压卷题.doc",
+        },
+      ],
     });
     const handleClick = (tab, event) => {
       console.log(tab, event);
     };
+    const uploadFile = () => {
+      state.uploadfile = !state.uploadfile;
+    };
+    const textareaInput = (e) => {
+      // console.log("eee", e);
+      state.textarea1 = e;
+    };
     return {
       ...toRefs(state),
       handleClick,
+      uploadFile,
+      textareaInput,
     };
   },
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped lang="scss">
+<style lang="scss">
-.clearfix:before,
+.homework {
-.clearfix:after {
-  content: "";
-  display: table;
-  clear: both;
-}
-.moreactive {
   .crumb {
     color: #fff;
     display: flex;
@@ -271,39 +328,39 @@ export default {
   }
 
   .detailinfo {
-    width: calc(100% + 20px);
+    width: 100%;
     margin-top: 20px;
+    background: #ffffff;
+    border-radius: 8px;
     display: flex;
     .detail {
       flex: 1;
-      margin-right: 20px;
       .detailT {
-        height: 1000px;
+        // height: 1000px;
-        background: #ffffff;
+
-        border-radius: 8px;
         color: rgba(51, 51, 51, 1);
         display: flex;
-
+        padding-bottom: 30px;
-        .left {
+        width: 100%;
-          margin-left: 48px;
-          margin-right: 45px;
-          position: relative;
-          flex: 1;
         .shapan {
-            width: 1181px;
+          width: 100%;
           height: 58px;
           margin-top: 30px;
           background-image: url("../../assets/image/shapan.png");
-
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          display: flex;
+          align-items: center;
           .shapanexplain {
-              margin-top: 18px;
             margin-left: 34px;
-              // width: 391px;
+            margin-right: 10px;
-              height: 20px;
             font-size: 20px;
             font-weight: 800;
             color: #4a9cf8;
             line-height: 24px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
           }
         }
         .shangchuan {
@@ -326,7 +383,7 @@ export default {
           position: absolute;
           top: 235px;
           right: 3px;
-
+          z-index: 100;
           .triangle {
             top: -10px;
             right: 60px;
@@ -336,6 +393,7 @@ export default {
             border-right: 10px solid transparent;
             border-left: 10px solid transparent;
             border-bottom: 10px solid #fff;
+            // box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
           }
 
           .square {
@@ -344,9 +402,8 @@ export default {
             background: #ffffff;
             box-shadow: 0px 1px 24px 0px rgba(0, 0, 0, 0.11);
             border-radius: 8px;
-
             .squarecontent1 {
-                margin-top: 40px;
+              padding-top: 40px;
               display: flex;
               .rar {
                 margin: 12px 15px 0 27px;
@@ -376,11 +433,7 @@ export default {
                   .progressinner {
                     width: 131px;
                     height: 8px;
-                      background: linear-gradient(
+                    background: linear-gradient(0deg, #2478ff 0%, #5093ff 100%);
-                        0deg,
-                        #2478ff 0%,
-                        #5093ff 100%
-                      );
                     border-radius: 4px;
                   }
                 }
@@ -428,11 +481,7 @@ export default {
                   .progressinner {
                     width: 231px;
                     height: 8px;
-                      background: linear-gradient(
+                    background: linear-gradient(0deg, #ee625e 0%, #eea4a1 100%);
-                        0deg,
-                        #ee625e 0%,
-                        #eea4a1 100%
-                      );
                     border-radius: 4px;
                   }
                 }
@@ -480,11 +529,7 @@ export default {
                   .progressinner {
                     width: 291px;
                     height: 8px;
-                      background: linear-gradient(
+                    background: linear-gradient(0deg, #36d1ae 0%, #3be5bf 100%);
-                        0deg,
-                        #36d1ae 0%,
-                        #3be5bf 100%
-                      );
                     border-radius: 4px;
                   }
                 }
@@ -507,7 +552,7 @@ export default {
           z-index: 999;
           cursor: pointer;
           margin-top: 22px;
-            margin-left: 480px;
+          // margin-left: 480px;
           width: 33px;
           height: 16px;
           font-size: 16px;
@@ -523,51 +568,47 @@ export default {
         .history {
           position: relative;
           margin-top: 32px;
-            width: 1182px;
+          width: 100%;
-            height: 200px;
           border: 1px solid #d7e5fd;
           border-radius: 8px;
-            .clearfix:before,
+
-            .clearfix:after {
-              content: "";
-              display: table;
-              clear: both;
-            }
           .fenge {
-              width: 1181px;
+            width: 100%;
             border-top: 1px solid #d7e5fd;
           }
           .tongyi {
             display: flex;
           }
           .content1 {
+            width: 150px;
             margin-top: 14px;
-              margin-left: 87px;
+            margin-left: 60px;
           }
           .content2 {
-              position: absolute;
             margin-top: 14px;
-              left: 400px;
+            margin-left: 80px;
+            width: 0;
+            flex: 1;
           }
           .historycontent {
-              width: 59px;
             height: 14px;
             font-size: 14px;
-              font-family: Microsoft YaHei;
             font-weight: 400;
             color: #333330;
             line-height: 38px;
           }
           .historytitle {
-              width: 1182px;
+            width: 100%;
             height: 50px;
             background: #f2f5f7;
             border-radius: 8px 8px 0px 0px;
+            display: flex;
           }
           .historytitle2 {
-              width: 1182px;
+            width: 100%;
             height: 48px;
             background: #fff;
+            display: flex;
           }
         }
         .title {
@@ -635,15 +676,17 @@ export default {
           }
         }
         .join {
-            width: 1181px;
+          width: 100%;
-            height: 271px;
-            background: #f5f6f7;
-            border-radius: 8px;
           margin-top: 32px;
+          .el-textarea__inner {
+            border-radius: 8px;
+            background-color: rgba(245, 246, 247, 1);
+          }
+        }
       }
     }
-
     .right {
+      margin-right: 45px;
       .righttitle {
         display: flex;
         padding-top: 39px;
@@ -721,7 +764,5 @@ export default {
       }
     }
   }
-    }
-  }
 }
 </style>

src/views/liveBroadcast/LiveBroadcast.vue

@@ -125,15 +125,13 @@
             }"
           >
             <img class="peopleimg" :src="el.peopleimg" />
-            <div style="margin-left: 17px">
+            <div style="margin-left: 17px; width: 190px">
-              <div class="teacherName">
+              <div class="teacherName" style="margin-right: 5px">
-                <div style="margin-right: 5px">{{ el.name }}</div>
+                {{ el.name }}
-                <div v-for="(item, key) in el.medal" :key="key">
-                  <img class="teacherMedal" :src="item" />
-                </div>
               </div>
               <div class="introduce">{{ el.introduce }}</div>
             </div>
+            <div class="follow">+ 关注</div>
           </div>
         </div>
       </div>
@@ -153,23 +151,15 @@ export default {
         {
           id: 1,
           name: "王星天（显示事业）",
-          introduce: "教师是学生的镜子,学生是老师的影子。",
+          introduce:
+            "教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。教师是学生的镜子,学生是老师的影子。",
           peopleimg: require("../../assets/image/img.jpg"),
-          medal: [
-            require("../../assets/image/medal/medal1.png"),
-            require("../../assets/image/medal/medal2.png"),
-            require("../../assets/image/medal/medal3.png"),
-          ],
         },
         {
           id: 2,
           name: "王星天（显示事业）",
           introduce: "教师是学生的镜子,学生是老师的影子。",
           peopleimg: require("../../assets/image/img.jpg"),
-          medal: [
-            require("../../assets/image/medal/medal1.png"),
-            require("../../assets/image/medal/medal2.png"),
-          ],
         },
       ],
     });
@@ -509,12 +499,14 @@ export default {
       // min-height: 115px;
       padding: 25px 0px;
       display: flex;
-      align-items: center;
+      // align-items: center;
+      position: relative;
     }
     .teacheritem .peopleimg {
       width: 60px;
       height: 60px;
       border-radius: 30px;
+      margin-top: 2px;
     }
     .teacheritem .teacherName {
       font-size: 14px;
@@ -522,22 +514,30 @@ export default {
       color: #394145;
       display: flex;
       align-items: center;
-      width: 260px;
-    }
-    .teacheritem .teacherName .teacherMedal {
-      width: 17px;
-      height: 19px;
-      margin-right: 4px;
-      display: flex;
-      align-items: center;
     }
     .teacheritem .introduce {
-      width: 260px;
       font-size: 14px;
       font-weight: 500;
       color: #394145;
       margin-top: 14px;
     }
+    .teacheritem .follow {
+      width: 80px;
+      height: 30px;
+      background: #387df7;
+      border-radius: 4px;
+      margin-top: 28px;
+      position: absolute;
+      right: -25px;
+      font-size: 14px;
+      font-weight: 500;
+      color: #ffffff;
+      line-height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
   }
 }
 </style>

src/views/starttest/StartTest.vue

@@ -273,6 +273,7 @@ export default {
         left: 50%;
         top: 900px;
         transform: translate(-50%, 0);
+        cursor: pointer;
       }
     }