From 93b12bf22c347349bf7157dc1ba049cbd16bfab2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=99=93=E9=B8=BD?= <lixg@dongwu-inc.com>
Date: Wed, 21 Sep 2022 18:30:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E5=90=88=E5=B9=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                               |   4 +-
 src/views/faceteach/FaceTeach.vue         |  36 +-
 src/views/homework/homework.vue           | 547 ++++++++++------------
 src/views/liveBroadcast/LiveBroadcast.vue |  52 +-
 4 files changed, 291 insertions(+), 348 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 8546504..a97c632 100644
--- a/src/App.vue
+++ b/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>
diff --git a/src/views/faceteach/FaceTeach.vue b/src/views/faceteach/FaceTeach.vue
index 5a82e5e..7bdbc0d 100644
--- a/src/views/faceteach/FaceTeach.vue
+++ b/src/views/faceteach/FaceTeach.vue
@@ -133,15 +133,13 @@
           }"
         >
           <img class="peopleimg" :src="el.peopleimg" />
-          <div style="margin-left: 17px">
-            <div class="teacherName">
-              <div style="margin-right: 5px">{{ el.name }}</div>
-              <div v-for="(item, key) in el.medal" :key="key">
-                <img class="teacherMedal" :src="item" />
-              </div>
+          <div style="margin-left: 17px; width: 190px">
+            <div class="teacherName" style="margin-right: 5px">
+              {{ el.name }}
             </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;
       }
     }
   }
diff --git a/src/views/homework/homework.vue b/src/views/homework/homework.vue
index 0875ff3..fb55584 100644
--- a/src/views/homework/homework.vue
+++ b/src/views/homework/homework.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="moreactive">
+  <div class="homework">
     <!-- 面包屑导航 -->
     <div class="crumb">
       <div>混合制项目</div>
@@ -24,7 +24,12 @@
       <div class="detail">
         <div class="detailT">
           <div
-            style="margin-left: 48px; margin-right: 147px; position: relative"
+            style="
+              margin-left: 45px;
+              margin-right: 42px;
+              position: relative;
+              width: 100%;
+            "
           >
             <div class="title">
               <img
@@ -35,15 +40,26 @@
               <div class="text">作业名称</div>
               <div class="box"></div>
             </div>
-            <div class="shapan clearfix">
-              <div class="shapanexplain">
-                管理者进阶腾飞班 - 第一次作业 - 沙盘实验
+            <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">
@@ -97,16 +113,25 @@
 
             <div class="title">
               <img
-                width="20px"
-                height="20px"
+                style="width: 20px; height: 20px"
                 src="../../assets/image/yuan.png"
               />
               <div class="text">作业内容</div>
               <div class="box"></div>
             </div>
 
-            <div class="join"></div>
-            <button class="tijiao">提交</button>
+            <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>
 
@@ -121,76 +146,74 @@
             </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"
-                style="border-radius: 0px 0px 8px 8px"
+                v-for="(value, index) in history"
+                :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="content2">湖北黄冈语文压卷题.doc</div>
+                <div class="content1">{{ value.time }}</div>
+                <div class="content2">
+                  <div
+                    style="
+                      width: 95%;
+                      overflow: hidden;
+                      text-overflow: ellipsis;
+                      white-space: nowrap;
+                    "
+                  >
+                    {{ value.content }}
+                  </div>
+                </div>
               </div>
             </div>
           </div>
-          <div class="right">
-            <div class="righttitle">
-              <img
-                width="20px"
-                height="20px"
-                src="../../assets/image/yuan.png"
-              />
-              <div class="text">截止时间</div>
-              <div class="box"></div>
+        </div>
+      </div>
+      <div class="right">
+        <div class="righttitle">
+          <img width="20px" height="20px" src="../../assets/image/yuan.png" />
+          <div class="text">截止时间</div>
+          <div class="box"></div>
+        </div>
+        <div class="timebox clearfix">
+          <div class="innertime">
+            2022-7-20
+            00:00&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;2022-8-29
+            23:59:59
+          </div>
+          <div class="endtime clearfix">
+            <div class="endtimetext">
+              距离结束还有&nbsp;&nbsp;
+              <span class="te">123</span>&nbsp;&nbsp; 小时&nbsp;&nbsp;<span
+                class="te"
+                >42</span
+              >&nbsp;&nbsp;分钟
             </div>
-            <div class="timebox clearfix">
-              <div class="innertime">
-                2022-7-20
-                00:00&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;2022-8-29
-                23:59:59
-              </div>
-              <div class="endtime clearfix">
-                <div class="endtimetext">
-                  距离结束还有&nbsp;&nbsp;
-                  <span class="te">123</span>&nbsp;&nbsp; 小时&nbsp;&nbsp;<span
-                    class="te"
-                    >42</span
-                  >&nbsp;&nbsp;分钟
-                </div>
-              </div>
-            </div>
-            <div class="righttitle">
-              <img
-                width="20px"
-                height="20px"
-                src="../../assets/image/yuan.png"
-              />
+          </div>
+        </div>
+        <div class="righttitle">
+          <img width="20px" height="20px" src="../../assets/image/yuan.png" />
 
-              <div class="text">作业说明</div>
-              <div class="box"></div>
-            </div>
-            <div class="explain clearfix">
-              <div class="explain1" style="margin-top: 26px">
-                1、阅读文章，做名校题库，翻译文言文，整体文化常识和<br />
-                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文言知识
-              </div>
-              <div class="explain1" style="margin-top: 22px">
-                2、《中国古代诗词文化鉴赏》大唐之音、两宋清雅、明清<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;情致
-              </div>
-            </div>
+          <div class="text">作业说明</div>
+          <div class="box"></div>
+        </div>
+        <div class="explain clearfix">
+          <div class="explain1" style="margin-top: 26px">
+            1、阅读文章，做名校题库，翻译文言文，整体文化常识和<br />
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;文言知识
+          </div>
+          <div class="explain1" style="margin-top: 22px">
+            2、《中国古代诗词文化鉴赏》大唐之音、两宋清雅、明清<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;情致
           </div>
         </div>
       </div>
@@ -206,21 +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">
-.moreactive {
+<style lang="scss">
+.homework {
   .crumb {
     color: #fff;
     display: flex;
@@ -267,127 +328,44 @@ 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;
-        background: #ffffff;
-        border-radius: 8px;
+        // height: 1000px;
+
         color: rgba(51, 51, 51, 1);
         display: flex;
-
-        .right {
-          .righttitle {
-            display: flex;
-            padding-top: 39px;
-            position: relative;
-            .text {
-              margin-left: 8px;
-              font-size: 16px;
-              color: rgba(51, 51, 51, 1);
-              font-weight: 800;
-            }
-            .box {
-              width: 75px;
-              height: 10px;
-              background-color: rgba(36, 120, 255, 0.15);
-              position: absolute;
-              left: 23px;
-              top: 53px;
-            }
-          }
-          .timebox {
-            width: 417px;
-            height: 149px;
-            background: linear-gradient(90deg, #b6c6e1 0%, #89aed6 100%);
-            border-radius: 4px;
-            margin-top: 52px;
-          }
-          .clearfix:before,
-          .clearfix:after {
-            content: "";
-            display: table;
-            clear: both;
-          }
-          .innertime {
-            margin-top: 17px;
-            margin-left: 55px;
-            font-size: 14px;
-            font-family: PingFang SC;
-            font-weight: 500;
-            color: #ffffff;
-            line-height: 24px;
-          }
-          .endtime {
-            margin-left: 10px;
-            margin-top: 16px;
-            width: 397px;
-            height: 81px;
-            background: #f2f5f7;
-            border-radius: 0px 8px 0px 8px;
-            .endtimetext {
-              margin-top: 25px;
-              margin-left: 46px;
-              .te {
-                font-size: 28px;
-                font-family: PingFang SC;
-                font-weight: 800;
-                color: #4a9cf8;
-                line-height: 24px;
-              }
-            }
-          }
-          .explain {
-            margin-top: 30px;
-            width: 416px;
-            // height: 158px;
-            background: #f2f5f7;
-            border-radius: 8px;
-            padding-bottom: 25px;
-            .explain1 {
-              margin-left: 23px;
-              width: 360px;
-              // height: 38px;
-              font-size: 14px;
-              font-family: PingFang SC;
-              font-weight: 500;
-              color: #333330;
-              line-height: 24px;
-            }
-          }
-        }
-        .clearfix:before,
-        .clearfix:after {
-          content: "";
-          display: table;
-          clear: both;
-        }
+        padding-bottom: 30px;
+        width: 100%;
         .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;
-            height: 20px;
+            margin-right: 10px;
             font-size: 20px;
-            font-family: PingFang SC;
             font-weight: 800;
             color: #4a9cf8;
             line-height: 24px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
           }
         }
         .shangchuan {
           z-index: 999;
           font-size: 16px;
-          font-family: PingFang SC;
           font-weight: 800;
           color: #ffffff;
           line-height: 24px;
@@ -405,7 +383,7 @@ export default {
           position: absolute;
           top: 235px;
           right: 3px;
-
+          z-index: 100;
           .triangle {
             top: -10px;
             right: 60px;
@@ -415,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 {
@@ -423,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;
@@ -438,14 +416,12 @@ export default {
                   // height: 14px;
                   font-size: 12px;
                   line-height: 30px;
-                  font-family: PingFang SC;
                   font-weight: 500;
                   color: #677d86;
                 }
                 .detail2 {
                   // height: 11px;
                   font-size: 12px;
-                  font-family: PingFang SC;
                   font-weight: 500;
                   color: #277aff;
                 }
@@ -488,14 +464,12 @@ export default {
                   // height: 14px;
                   font-size: 12px;
                   line-height: 30px;
-                  font-family: PingFang SC;
                   font-weight: 500;
                   color: #677d86;
                 }
                 .detail2 {
                   // height: 11px;
                   font-size: 12px;
-                  font-family: PingFang SC;
                   font-weight: 500;
                   color: #277aff;
                 }
@@ -538,14 +512,12 @@ export default {
                   // height: 14px;
                   font-size: 12px;
                   line-height: 30px;
-                  font-family: PingFang SC;
                   font-weight: 500;
                   color: #677d86;
                 }
                 .detail2 {
                   // height: 11px;
                   font-size: 12px;
-                  font-family: PingFang SC;
                   font-weight: 500;
                   color: #277aff;
                 }
@@ -580,11 +552,10 @@ export default {
           z-index: 999;
           cursor: pointer;
           margin-top: 22px;
-          margin-left: 480px;
+          // margin-left: 480px;
           width: 33px;
           height: 16px;
           font-size: 16px;
-          font-family: PingFang SC;
           font-weight: 800;
           color: #ffffff;
           line-height: 24px;
@@ -597,51 +568,47 @@ export default {
         .history {
           position: relative;
           margin-top: 32px;
-          width: 1182px;
-          height: 200px;
+          width: 100%;
           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 {
@@ -709,120 +676,90 @@ export default {
           }
         }
         .join {
-          width: 1181px;
-          height: 271px;
-          background: #f5f6f7;
-          border-radius: 8px;
+          width: 100%;
           margin-top: 32px;
+          .el-textarea__inner {
+            border-radius: 8px;
+            background-color: rgba(245, 246, 247, 1);
+          }
         }
       }
-      .detailB {
-        min-height: 363px;
-        background: #ffffff;
+    }
+    .right {
+      margin-right: 45px;
+      .righttitle {
+        display: flex;
+        padding-top: 39px;
+        position: relative;
+        .text {
+          margin-left: 8px;
+          font-size: 16px;
+          color: rgba(51, 51, 51, 1);
+          font-weight: 800;
+        }
+        .box {
+          width: 75px;
+          height: 10px;
+          background-color: rgba(36, 120, 255, 0.15);
+          position: absolute;
+          left: 23px;
+          top: 53px;
+        }
+      }
+      .timebox {
+        width: 417px;
+        height: 149px;
+        background: linear-gradient(90deg, #b6c6e1 0%, #89aed6 100%);
+        border-radius: 4px;
+        margin-top: 52px;
+      }
+      .clearfix:before,
+      .clearfix:after {
+        content: "";
+        display: table;
+        clear: both;
+      }
+      .innertime {
+        margin-top: 17px;
+        margin-left: 55px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #ffffff;
+        line-height: 24px;
+      }
+      .endtime {
+        margin-left: 10px;
+        margin-top: 16px;
+        width: 397px;
+        height: 81px;
+        background: #f2f5f7;
+        border-radius: 0px 8px 0px 8px;
+        .endtimetext {
+          margin-top: 25px;
+          margin-left: 46px;
+          .te {
+            font-size: 28px;
+            font-weight: 800;
+            color: #4a9cf8;
+            line-height: 24px;
+          }
+        }
+      }
+      .explain {
+        margin-top: 30px;
+        width: 416px;
+        // height: 158px;
+        background: #f2f5f7;
         border-radius: 8px;
-        margin-top: 20px;
-        .el-tabs__item {
-          height: 69px;
-          padding: 25px 7px 0px 52px;
-          font-size: 14px;
-          font-weight: 500;
-        }
-        .el-tabs__nav-wrap::after {
-          background-color: rgba(56, 125, 247, 0.2);
-        }
-        .enclosure {
-          height: 89px;
-          margin-left: 51px;
-          margin-right: 40px;
-          // border-bottom: 1px solid rgba(56, 125, 247, 0.2);
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          .enclosureL {
-            display: flex;
-            align-items: center;
-            font-size: 14px;
-            font-weight: 400;
-            color: #677d86;
-            line-height: 24px;
-          }
-          .download {
-            display: flex;
-            align-items: center;
-            font-size: 16px;
-            font-weight: 400;
-            color: #2478ff;
-            line-height: 24px;
-            cursor: pointer;
-          }
-        }
-        .work {
-          margin-left: 51px;
-          margin-right: 40px;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          margin-top: 37px;
-        }
-        .work .question {
+        padding-bottom: 25px;
+        .explain1 {
+          margin-left: 23px;
+          width: 360px;
+          // height: 38px;
           font-size: 14px;
           font-weight: 500;
           color: #333330;
-          line-height: 18px;
-        }
-        .work .active {
-          width: 82px;
-          height: 28px;
-          background: linear-gradient(90deg, #a5d4e0 0%, #b4dce6 100%);
-          border-radius: 4px;
-          font-size: 14px;
-          font-weight: 500;
-          color: #ffffff;
           line-height: 24px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-          margin-right: 11px;
-        }
-        .work .unactive {
-          width: 80px;
-          height: 26px;
-          border: 1px solid #a5d4e0;
-          border-radius: 4px;
-          font-size: 14px;
-          font-weight: 500;
-          color: #a5d4e0;
-          line-height: 24px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-right: 11px;
-          cursor: pointer;
-        }
-        .work .btncolor {
-          background: linear-gradient(90deg, #84aad2 0%, #a4c5e9 100%);
-        }
-        .work .bordercolor {
-          border: 1px solid #85aad2;
-        }
-        .work .fontcolor {
-          color: rgba(133, 170, 210, 1);
-        }
-        .work .submit {
-          width: 126px;
-          height: 46px;
-          background: #2478ff;
-          box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
-          border-radius: 4px;
-          font-size: 16px;
-          font-weight: 800;
-          color: #ffffff;
-          line-height: 24px;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
         }
       }
     }
diff --git a/src/views/liveBroadcast/LiveBroadcast.vue b/src/views/liveBroadcast/LiveBroadcast.vue
index aa0e1fb..ef89e9b 100644
--- a/src/views/liveBroadcast/LiveBroadcast.vue
+++ b/src/views/liveBroadcast/LiveBroadcast.vue
@@ -125,15 +125,13 @@
             }"
           >
             <img class="peopleimg" :src="el.peopleimg" />
-            <div style="margin-left: 17px">
-              <div class="teacherName">
-                <div style="margin-right: 5px">{{ el.name }}</div>
-                <div v-for="(item, key) in el.medal" :key="key">
-                  <img class="teacherMedal" :src="item" />
-                </div>
+            <div style="margin-left: 17px; width: 190px">
+              <div class="teacherName" style="margin-right: 5px">
+                {{ el.name }}
               </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"),
-          ],
         },
       ],
     });
@@ -510,12 +500,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;
@@ -523,22 +515,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>