diff --git a/src/assets/image/checkbox.png b/src/assets/image/checkbox.png
new file mode 100644
index 0000000..808036e
Binary files /dev/null and b/src/assets/image/checkbox.png differ
diff --git a/src/assets/image/checkbox2.png b/src/assets/image/checkbox2.png
new file mode 100644
index 0000000..d9f6cf8
Binary files /dev/null and b/src/assets/image/checkbox2.png differ
diff --git a/src/assets/image/cycle.png b/src/assets/image/cycle.png
new file mode 100644
index 0000000..daaf0fc
Binary files /dev/null and b/src/assets/image/cycle.png differ
diff --git a/src/assets/image/discuss/dianzan.png b/src/assets/image/discuss/dianzan.png
new file mode 100644
index 0000000..a19a155
Binary files /dev/null and b/src/assets/image/discuss/dianzan.png differ
diff --git a/src/assets/image/discuss/elsedianzan.png b/src/assets/image/discuss/elsedianzan.png
new file mode 100644
index 0000000..333d04d
Binary files /dev/null and b/src/assets/image/discuss/elsedianzan.png differ
diff --git a/src/assets/image/discuss/pinglun.png b/src/assets/image/discuss/pinglun.png
new file mode 100644
index 0000000..2982eeb
Binary files /dev/null and b/src/assets/image/discuss/pinglun.png differ
diff --git a/src/assets/image/discuss/px.jpg b/src/assets/image/discuss/px.jpg
new file mode 100644
index 0000000..abfad90
Binary files /dev/null and b/src/assets/image/discuss/px.jpg differ
diff --git a/src/assets/image/discuss/shoucang.png b/src/assets/image/discuss/shoucang.png
new file mode 100644
index 0000000..b20291e
Binary files /dev/null and b/src/assets/image/discuss/shoucang.png differ
diff --git a/src/assets/image/next.png b/src/assets/image/next.png
new file mode 100644
index 0000000..40b0ad4
Binary files /dev/null and b/src/assets/image/next.png differ
diff --git a/src/assets/image/pre.png b/src/assets/image/pre.png
new file mode 100644
index 0000000..aae9fd5
Binary files /dev/null and b/src/assets/image/pre.png differ
diff --git a/src/assets/image/readyexamination/sandclock.png b/src/assets/image/readyexamination/sandclock.png
new file mode 100644
index 0000000..00ce3c2
Binary files /dev/null and b/src/assets/image/readyexamination/sandclock.png differ
diff --git a/src/views/ballotpage/BallotPage.vue b/src/views/ballotpage/BallotPage.vue
index e653deb..c561452 100644
--- a/src/views/ballotpage/BallotPage.vue
+++ b/src/views/ballotpage/BallotPage.vue
@@ -124,7 +124,7 @@ export default {
     width: 100%;
     display: flex;
     justify-content: center;
-    margin-top: 10px;
+    margin-top: -17.5px;
     .noticebox {
       width: 90%;
       background: #fff;
@@ -316,6 +316,7 @@ export default {
             justify-content: space-between;
             width: 100%;
             .imgsame {
+              background-size: 100% 100%;
               width: 95px;
               height: 95px;
               // background-color: blue;
diff --git a/src/views/discuss/DiscussDetail.vue b/src/views/discuss/DiscussDetail.vue
new file mode 100644
index 0000000..05da1aa
--- /dev/null
+++ b/src/views/discuss/DiscussDetail.vue
@@ -0,0 +1,586 @@
+<template>
+  <div class="discussdetail">
+    <TitleHead text="【直播】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
+    <div class="main">
+      <div class="title">
+        <div class="inner clearfix">
+          <!-- 时间 pre next 外部盒子-->
+          <div class="titlemain clearfix">
+            <!-- <div class="imgTime clearfix">
+              <div class="img"></div>
+              <div class="time">2022-07-20 20:00-21:00</div>
+            </div> -->
+            <div class="preNext clearfix">
+              <div class="sameone pre" style="margin-right: 5px"></div>
+              <div class="sametwo">上一个</div>
+              <div class="sametwo" style="margin-left: 15.5px">下一个</div>
+              <div class="sameone next" style="margin-left: 5px"></div>
+            </div>
+          </div>
+          <div class="titleblue">
+            请基于公司的战略方向和你所负责的组织的业务发展，识别3-5个你和你的团队在未来2-3年的新的能力与技能要求
+          </div>
+          <div class="buttoncontainer">
+            <button class="btn">发表帖子</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="preview">
+      <div class="previewbox">
+        <div class="previewmani">
+          <div class="discusstitle clearfix">
+            <div class="titcon">
+              <div class="maint">第二讲：模块化产品展示：班内成员讨论</div>
+              <div class="intime">
+                <div class="yuna"></div>
+                <div class="in">进行中</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="alltalkcontainer">
+            <div class="inne">
+              <div class="takltitle">从营销角度分析：我的团队需要这些能力</div>
+              <div class="taklcon">
+                所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说，不仅要有个人能力，更需要有在不同的位置上各尽所能、与其他成员协调合作的能力。<br />包容成员
+                <br />团队工作需要成员在一起不断地讨论，如果一个人固执己见，无法听取他人的意见，或无法和他人达成一致，团队的工作就无法进行下去。团队的效率在于配合的默契，如果达不成这种默契，团队合作就不可能成功。为此，对待团队中其他成员时一定要抱着宽容的心态，讨论问题的时候对事不对人，即使他人犯了错误，也要本着大家共同进步的目的去帮对方改正，而不是一味斥责。同时也要经常检查自己的缺点，如果意识到了自己的缺点，不妨将它坦诚地讲出来，承认自己的缺点，让大家共同帮助你改进，这是最有效的方法。<br />获得支持<br />要使自己的工作得到大家的支持和认可，而不是反对，必须让大家喜欢你。但一个人又如何让别人来喜欢你呢?除了在工作中互相支援、互相鼓励外，还应该尽量和大家一起去参加各种活动，或者礼貌地关心一下大家的生活。<br />保持谦虚<br />任何人都不喜欢骄傲自大的人，这种人在团队合作中也不会被大家认可。可能你在某个方面比其他人强，但你更应该将自己的注意力放在他人的强项上，只有这样，才能看到自己的肤浅和无知。因为团队中的任
+              </div>
+              <div class="bottombox">
+                <div class="dianzan">
+                  <div class="sa">
+                    <div>
+                      <img
+                        style="margin-right: 9.5px; margin-left: 10px"
+                        src="../../assets/image/discuss/dianzan.png"
+                      />
+                    </div>
+                    <span>103</span>
+                  </div>
+                  <div class="sa">
+                    <div>
+                      <img
+                        style="margin-right: 9.5px"
+                        src="../../assets/image/discuss/shoucang.png"
+                      />
+                    </div>
+                    <span>103</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="restore">
+      <div class="restorebox">
+        <div class="restoremani">
+          <div
+            class="rescon clearfix"
+            v-for="(item, index) in restore"
+            :key="index"
+          >
+            <div class="head">
+              <div>
+                <img class="headavator" :src="item.head" />
+              </div>
+              <div class="namehead">
+                {{ item.name }}
+              </div>
+            </div>
+            <div class="inner">
+              <div class="allimg">
+                <img class="reavator" :src="item.reimg" />
+                <img class="reavator" :src="item.reimg" />
+                <img class="reavator" :src="item.reimg" />
+              </div>
+              <div class="recon">{{ item.re }}</div>
+              <div class="botto">
+                <div class="time">{{ item.time }}</div>
+                <div class="re">回复</div>
+                <div class="right">
+                  <div class="good">
+                    <img src="../../assets/image/discuss/elsedianzan.png" />
+                  </div>
+                  <div class="gocount">67</div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="newre">
+            <div class="tri"></div>
+            <div class="rec clearfix">
+              <div class="it" v-for="(itemc, index) in newrestore" :key="index">
+                <div class="ava">
+                  <img class="avainner" :src="itemc.head" />
+                </div>
+                <div class="redetail">
+                  <div class="rename">{{ itemc.name }}</div>
+                  <div class="rein">{{ itemc.re }}</div>
+                  <div class="detre">
+                    <div class="day">{{ itemc.time }}</div>
+                    <div class="huifu">回复</div>
+                    <div class="good">
+                      <img
+                        class="gimg"
+                        src="../../assets/image/discuss/elsedianzan.png"
+                      />
+                      <div class="gcou">0</div>
+                    </div>
+                  </div>
+                  <!-- <div class="line"></div> -->
+                  <div
+                    :class="index === newrestore.length - 1 ? null : 'line'"
+                  ></div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div class="btncon clearfix">
+            <button class="btnn">查看全部14条评论</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs } from "vue";
+import TitleHead from "@/components/TitleHead.vue";
+export default {
+  name: "DiscussDetail",
+  components: {
+    TitleHead,
+  },
+  setup() {
+    const state = reactive({
+      restore: [
+        {
+          name: "罗宗梅",
+          time: "2022-09-01",
+          re: "教师基本功扎实，知识讲解准确，教学设计合理，始终以学生为主体，自主学习，小组交流讨论，上台交流展示等形式，师生配合默契，取得了较好的学习效果。",
+          head: require("../../assets/image/discuss/px.jpg"),
+          reimg: require("../../assets/image/discuss/px.jpg"),
+        },
+      ],
+      newrestore: [
+        {
+          name: "赵雪梨",
+          time: "三天前",
+          re: "教学重难点突出，板书条理清晰。教学步骤设计合理由浅入深，循序渐进。",
+          head: require("../../assets/image/discuss/px.jpg"),
+        },
+        {
+          name: "赵雪梨",
+          time: "三天前",
+          re: "教学重难点突出，板书条理清晰。教学步骤设计合理由浅入深，循序渐进。",
+          head: require("../../assets/image/discuss/px.jpg"),
+        },
+      ],
+    });
+
+    return {
+      ...toRefs(state),
+    };
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss">
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: table;
+  clear: both;
+}
+.discussdetail {
+  width: 100%;
+  padding-bottom: 20px;
+  .main {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: -14.5px;
+    position: relative;
+    .title {
+      width: 90%;
+      // height: 109px;
+      border-radius: 4px;
+      background-color: rgba(255, 255, 255, 1);
+      display: flex;
+      justify-content: center;
+      position: relative;
+
+      .inner {
+        width: 90%;
+        .titlemain {
+          width: 100%;
+          // display: flex;
+          margin-top: 18.5px;
+          position: relative;
+
+          height: 18px;
+          .imgTime {
+            width: 100%;
+            display: flex;
+            .img {
+              margin-right: 4px;
+              width: 13px;
+              height: 14.5px;
+              background-image: url(../../assets/image/liveboradcast/time.png);
+            }
+            .time {
+              margin-top: 2px;
+              text-align: center;
+              font-size: 12px;
+              // line-height: 15.5px;
+              // height: 16.5px;
+              color: #6e7b84;
+            }
+          }
+          .preNext {
+            position: absolute;
+            right: 0;
+            bottom: 2px;
+            display: flex;
+            .sameone {
+              width: 12px;
+              // border: 0;
+              height: 12px;
+              // background-color: #fff;
+            }
+            .sametwo {
+              color: #2478ff;
+              font-size: 12px;
+              line-height: 12px;
+              height: 12px;
+            }
+            .pre {
+              background-image: url(../../assets/image/liveboradcast/pre.png);
+            }
+            .next {
+              background-image: url(../../assets/image/liveboradcast/next.png);
+            }
+          }
+        }
+        .titleblue {
+          margin-top: 18.5px;
+          color: #4a9cf8;
+          font-size: 14px;
+          line-height: 24px;
+          font-weight: bold;
+        }
+        .buttoncontainer {
+          width: 100%;
+          display: flex;
+          justify-content: right;
+          margin-top: 10px;
+          margin-bottom: 21.5px;
+          .btn {
+            width: 83px;
+            height: 33px;
+            background-color: #2478ff;
+            color: #fff;
+            border: 0;
+            font-size: 14px;
+            border-radius: 2px;
+          }
+        }
+      }
+    }
+  }
+
+  .preview {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    .previewbox {
+      width: 90%;
+      // height: 200px;
+      background: #fff;
+      border-radius: 4px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      .previewmani {
+        width: 90%;
+        margin-top: 17px;
+
+        .discusstitle {
+          width: 100%;
+          margin-top: 15px;
+          background-color: #f9f9f9;
+          // height: 20px;
+          display: flex;
+          justify-content: center;
+          .titcon {
+            margin-top: 11px;
+            width: 95%;
+            display: flex;
+            justify-content: space-between;
+            .maint {
+              color: #333330;
+              font-size: 14px;
+              line-height: 24px;
+              font-weight: bold;
+              width: 75%;
+              margin-bottom: 16px;
+            }
+            .intime {
+              display: flex;
+              margin-top: 2px;
+              .yuna {
+                margin-top: 4px;
+                width: 10px;
+                height: 10px;
+                border-radius: 50%;
+                border: 1px solid #0060ff;
+              }
+              .in {
+                margin-left: 3px;
+                color: #0060ff;
+                font-size: 14px;
+              }
+            }
+          }
+        }
+
+        .alltalkcontainer {
+          width: 100%;
+          // background-color: #bfa;
+          margin-top: 20px;
+          display: flex;
+          justify-content: center;
+          .inne {
+            width: 95%;
+            .takltitle {
+              color: #04243c;
+              font-size: 14px;
+              line-height: 24px;
+              font-weight: bold;
+              margin-bottom: 16px;
+            }
+            .taklcon {
+              color: #333330;
+              font-size: 13px;
+              line-height: 24px;
+            }
+            .bottombox {
+              margin-top: 21px;
+              margin-bottom: 24.5px;
+              width: 100%;
+              height: 30px;
+              background-color: #fbfbfb;
+              .dianzan {
+                width: 50%;
+                height: 100%;
+                display: flex;
+                justify-content: space-between;
+                .sa {
+                  color: #b3bdc4;
+                  font-size: 13px;
+                  margin-top: 7px;
+                  display: flex;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .restore {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    .restorebox {
+      width: 90%;
+      // height: 200px;
+      background: #fff;
+      border-radius: 4px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      .restoremani {
+        width: 90%;
+        margin-top: 17px;
+        position: relative;
+        .rescon {
+          position: relative;
+          width: 100%;
+          // height: 100px;
+          // background-color: #bfa;
+          .head {
+            display: flex;
+            width: 100%;
+            .headavator {
+              width: 36px;
+              height: 36px;
+              border-radius: 50%;
+            }
+            .namehead {
+              margin-left: 5px;
+              color: #02172a;
+              font-size: 14px;
+              line-height: 36px;
+            }
+          }
+          .inner {
+            margin-top: 8px;
+            margin-left: 36px;
+            .allimg {
+              display: flex;
+              justify-content: space-between;
+              .reavator {
+                width: 82px;
+                height: 82px;
+                border-radius: 4px;
+              }
+            }
+            .recon {
+              margin-top: 14.5px;
+              color: #5f6d75;
+              font-size: 14px;
+              line-height: 18px;
+            }
+            .botto {
+              display: flex;
+              margin-top: 20px;
+              position: relative;
+              .time {
+                color: #5f6d75;
+                font-size: 14px;
+                margin-right: 16.5px;
+              }
+              .re {
+                color: #00152a;
+                font-size: 14px;
+                margin-top: -2px;
+              }
+              .right {
+                display: flex;
+                position: absolute;
+                right: 0;
+                .good {
+                  margin-top: -2px;
+                }
+                .gocount {
+                  color: #4e5e67;
+                  font-size: 13px;
+                  margin-left: 6.5px;
+                }
+              }
+            }
+          }
+        }
+
+        .newre {
+          margin-top: 7.5px;
+          .tri {
+            margin-left: 80px;
+            height: 0px;
+            width: 0px;
+            border-bottom: 10px solid #f0f3f6;
+            border-left: 10px solid transparent;
+            border-right: 10px solid transparent;
+          }
+          .rec {
+            background-color: #f0f3f6;
+            border-radius: 13px;
+            width: 100%;
+            .it {
+              margin-left: 12.5px;
+              width: 92%;
+              display: flex;
+              margin-top: 20px;
+              // margin-bottom: 20px;
+              .ava {
+                // margin-top: 20px;
+                .avainner {
+                  width: 36px;
+                  height: 36px;
+                  border-radius: 50%;
+                }
+              }
+              .redetail {
+                margin-left: 12.5px;
+                .rename {
+                  color: #02172a;
+                  font-size: 14px;
+                }
+                .rein {
+                  color: #5f6d75;
+                  font-size: 14px;
+                  margin-top: 16.5px;
+                }
+                .detre {
+                  margin-top: 10px;
+                  display: flex;
+                  position: relative;
+                  margin-bottom: 20px;
+                  .day {
+                    color: #5f6d75;
+                    font-size: 14px;
+                    margin-right: 14px;
+                  }
+                  .huifu {
+                    color: #00152a;
+                    font-size: 14px;
+                  }
+                  .good {
+                    position: absolute;
+                    right: 2px;
+                    display: flex;
+                    .gimg {
+                      width: 14px;
+                      height: 15px;
+                    }
+                    .gcou {
+                      color: #4e5e67;
+                      font-size: 13px;
+                      margin-top: 2px;
+                      margin-left: 7px;
+                    }
+                  }
+                }
+                .line {
+                  // margin-top: 24.5px;
+                  margin-left: -45px;
+                  height: 0;
+                  width: 117%;
+                  border-top: 1px solid #dcdedf;
+                }
+              }
+            }
+          }
+        }
+
+        .btncon {
+          width: 100%;
+          height: 60px;
+          position: relative;
+          .btnn {
+            margin-top: 30px;
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            border: 0;
+            background-color: #fff;
+            color: #5f6d75;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/discuss/DiscussPage.vue b/src/views/discuss/DiscussPage.vue
new file mode 100644
index 0000000..34bd05c
--- /dev/null
+++ b/src/views/discuss/DiscussPage.vue
@@ -0,0 +1,408 @@
+<template>
+  <div class="discusspage">
+    <TitleHead text="【直播】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
+    <div class="main">
+      <div class="title">
+        <div class="inner clearfix">
+          <!-- 时间 pre next 外部盒子-->
+          <div class="titlemain clearfix">
+            <!-- <div class="imgTime clearfix">
+              <div class="img"></div>
+              <div class="time">2022-07-20 20:00-21:00</div>
+            </div> -->
+            <div class="preNext clearfix">
+              <div class="sameone pre" style="margin-right: 5px"></div>
+              <div class="sametwo">上一个</div>
+              <div class="sametwo" style="margin-left: 15.5px">下一个</div>
+              <div class="sameone next" style="margin-left: 5px"></div>
+            </div>
+          </div>
+          <div class="titleblue">
+            请基于公司的战略方向和你所负责的组织的业务发展，识别3-5个你和你的团队在未来2-3年的新的能力与技能要求
+          </div>
+          <div class="buttoncontainer">
+            <button class="btn">发表帖子</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="preview">
+      <div class="previewbox">
+        <div class="previewmani">
+          <div class="firstbtncontainer">
+            <!-- <button class="samebtn new">最新</button>
+            <button class="samebtn hot">最热</button> -->
+            <button
+              @click="changee"
+              :class="onfo ? 'new samebtn' : 'samebtn hot'"
+            >
+              最新
+            </button>
+            <button
+              @click="changeee"
+              :class="onfo ? 'samebtn hot' : 'new samebtn'"
+            >
+              最热
+            </button>
+          </div>
+          <div class="discusstitle clearfix">
+            <div class="titcon">
+              <div class="maint">第二讲：模块化产品展示：班内成员讨论</div>
+              <div class="intime">
+                <div class="yuna"></div>
+                <div class="in">进行中</div>
+              </div>
+            </div>
+          </div>
+          <div class="discusscontainer clearfix">
+            <div class="item" v-for="(item, index) in discuss" :key="index">
+              <div class="tit">{{ item.title }}</div>
+              <div class="inn">{{ item.contain }}</div>
+              <div class="tim">{{ item.time }}</div>
+              <div class="dian clearfix">
+                <div class="diancon">
+                  <div class="one">
+                    <div>
+                      <img
+                        class="samt"
+                        src="../../assets/image/discuss/pinglun.png"
+                      />
+                    </div>
+                    <span class="a">{{ item.pinglun }}</span>
+                  </div>
+                  <div class="one">
+                    <div>
+                      <img
+                        class="samt"
+                        src="../../assets/image/discuss/dianzan.png"
+                      />
+                    </div>
+                    <span class="a">{{ item.dianzan }}</span>
+                  </div>
+                  <div class="one">
+                    <div>
+                      <img
+                        class="samt"
+                        src="../../assets/image/discuss/shoucang.png"
+                      />
+                    </div>
+                    <span class="a">{{ item.shoucang }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { reactive, toRefs } from "vue";
+import TitleHead from "@/components/TitleHead.vue";
+export default {
+  name: "DiscussPage",
+  components: {
+    TitleHead,
+  },
+  setup() {
+    const state = reactive({
+      onfo: true,
+      discuss: [
+        {
+          id: 1,
+          title: "从营销角度分析：我的团队需要这些能力",
+          contain:
+            "所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说...",
+          time: "2022-7-20 00:00",
+          pinglun: 317,
+          dianzan: 103,
+          shoucang: 103,
+        },
+        {
+          id: 2,
+          title: "从营销角度分析：我的团队需要这些能力",
+          contain:
+            "所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说...",
+          time: "2022-7-20 00:00",
+          pinglun: 317,
+          dianzan: 103,
+          shoucang: 103,
+        },
+        {
+          id: 3,
+          title: "从营销角度分析：我的团队需要这些能力",
+          contain:
+            "所谓团队协作能力，是指建立在团队的基础之上，发挥团队精神、互补互助以达到团队最大工作效率的能力。对于团队的成员来说...",
+          time: "2022-7-20 00:00",
+          pinglun: 317,
+          dianzan: 103,
+          shoucang: 103,
+        },
+      ],
+    });
+    const changee = () => {
+      if (state.onfo !== true) {
+        state.onfo = !state.onfo;
+      }
+    };
+    const changeee = () => {
+      if (state.onfo == true) {
+        state.onfo = !state.onfo;
+      }
+    };
+    return {
+      ...toRefs(state),
+      changee,
+      changeee,
+    };
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss">
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: table;
+  clear: both;
+}
+.discusspage {
+  width: 100%;
+  padding-bottom: 20px;
+  .main {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: -14.5px;
+    position: relative;
+    .title {
+      width: 90%;
+      // height: 109px;
+      border-radius: 4px;
+      background-color: rgba(255, 255, 255, 1);
+      display: flex;
+      justify-content: center;
+      position: relative;
+
+      .inner {
+        width: 90%;
+        .titlemain {
+          width: 100%;
+          // display: flex;
+          margin-top: 18.5px;
+          position: relative;
+
+          height: 18px;
+          .imgTime {
+            width: 100%;
+            display: flex;
+            .img {
+              margin-right: 4px;
+              width: 13px;
+              height: 14.5px;
+              background-image: url(../../assets/image/liveboradcast/time.png);
+            }
+            .time {
+              margin-top: 2px;
+              text-align: center;
+              font-size: 12px;
+              // line-height: 15.5px;
+              // height: 16.5px;
+              color: #6e7b84;
+            }
+          }
+          .preNext {
+            position: absolute;
+            right: 0;
+            bottom: 2px;
+            display: flex;
+            .sameone {
+              width: 12px;
+              // border: 0;
+              height: 12px;
+              // background-color: #fff;
+            }
+            .sametwo {
+              color: #2478ff;
+              font-size: 12px;
+              line-height: 12px;
+              height: 12px;
+            }
+            .pre {
+              background-image: url(../../assets/image/liveboradcast/pre.png);
+            }
+            .next {
+              background-image: url(../../assets/image/liveboradcast/next.png);
+            }
+          }
+        }
+        .titleblue {
+          margin-top: 18.5px;
+          color: #4a9cf8;
+          font-size: 14px;
+          line-height: 24px;
+          font-weight: bold;
+        }
+        .buttoncontainer {
+          width: 100%;
+          display: flex;
+          justify-content: right;
+          margin-top: 10px;
+          margin-bottom: 21.5px;
+          .btn {
+            width: 83px;
+            height: 33px;
+            background-color: #2478ff;
+            color: #fff;
+            border: 0;
+            font-size: 14px;
+            border-radius: 2px;
+          }
+        }
+      }
+    }
+  }
+
+  .preview {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    .previewbox {
+      width: 90%;
+      // height: 200px;
+      background: #fff;
+      border-radius: 4px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      .previewmani {
+        width: 90%;
+        margin-top: 17px;
+        .firstbtncontainer {
+          width: 100%;
+          .samebtn {
+            width: 42.5px;
+            height: 23px;
+            font-size: 13px;
+            border: 0;
+            border-radius: 2px;
+          }
+          .new {
+            color: #fff;
+            background-color: #387df7;
+            // margin-right: 10px;
+          }
+          .hot {
+            color: #6e7b84;
+            background-color: #fff;
+          }
+        }
+        .discusstitle {
+          width: 100%;
+          margin-top: 15px;
+          background-color: #f9f9f9;
+          // height: 20px;
+          display: flex;
+          justify-content: center;
+          .titcon {
+            margin-top: 11px;
+            width: 95%;
+            display: flex;
+            justify-content: space-between;
+            .maint {
+              color: #333330;
+              font-size: 14px;
+              line-height: 24px;
+              font-weight: bold;
+              width: 75%;
+              margin-bottom: 16px;
+            }
+            .intime {
+              display: flex;
+              margin-top: 2px;
+              .yuna {
+                margin-top: 4px;
+                width: 10px;
+                height: 10px;
+                border-radius: 50%;
+                border: 1px solid #0060ff;
+              }
+              .in {
+                margin-left: 3px;
+                color: #0060ff;
+                font-size: 14px;
+              }
+            }
+          }
+        }
+        .discusscontainer {
+          padding-bottom: 20px;
+          width: 100%;
+          .item {
+            position: relative;
+            .tit {
+              margin-top: 18px;
+              color: #04243c;
+              font-weight: bold;
+              font-size: 14px;
+              // line-height: 24px;
+            }
+            .inn {
+              margin-top: 11px;
+              color: #6e7b84;
+              font-size: 13px;
+              line-height: 24px;
+            }
+            .tim {
+              color: #b3bdc4;
+              font-size: 12px;
+              position: absolute;
+              right: 0;
+              bottom: 42px;
+            }
+            .dian {
+              color: #b3bdc4;
+              line-height: 30px;
+              // line-height: 20px;
+              font-size: 13px;
+              display: flex;
+              justify-content: center;
+              margin-top: 7px;
+              width: 100%;
+              height: 30px;
+              background-color: #fbfbfb;
+
+              .samt {
+                margin-right: 9px;
+                margin-top: 8px;
+                // position: absolute;
+              }
+              .a {
+                // position: absolute;
+                // top: 2px;
+                margin-top: 1.5px;
+              }
+              .diancon {
+                width: 80%;
+                height: 100%;
+                // background-color: #bfa;
+                display: flex;
+                justify-content: space-between;
+                position: relative;
+                .one {
+                  display: flex;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/examination/Examination.vue b/src/views/examination/Examination.vue
new file mode 100644
index 0000000..2cb86f4
--- /dev/null
+++ b/src/views/examination/Examination.vue
@@ -0,0 +1,273 @@
+<template>
+  <div class="examination">
+    <TitleHead text="【考试】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
+    <div class="notice">
+      <div class="noticebox">
+        <div class="main">
+          <div class="dir">
+            <div class="samegt pre"></div>
+            <div class="sameg">上一个</div>
+            <div class="sameg" style="margin-left: 15.5px">下一个</div>
+            <div class="samegt next"></div>
+          </div>
+          <div class="lefttitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">考试测试</div>
+              <div class="box"></div>
+            </div>
+          </div>
+          <div class="contentone clearfix">
+            <div class="areaone">
+              <div class="texttime">考试时间：30分钟</div>
+              <div class="passline">及格线：60</div>
+            </div>
+            <div class="areatwo">
+              <div class="time">
+                <span>考试时间：</span>
+                <br />
+                <span>2022-7-20 00:00 至 2022-8-29 23:59:59</span>
+              </div>
+            </div>
+          </div>
+          <div class="btnbox">
+            <button class="textbtn">开始考试</button>
+          </div>
+          <div class="lefttitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">历史记录</div>
+              <div class="box"></div>
+            </div>
+          </div>
+          <div class="contenttwo clearfix">
+            <table>
+              <tr class="trbox1">
+                <th>提交时间</th>
+                <th>成绩</th>
+                <th>状态</th>
+                <th>操作</th>
+              </tr>
+              <tr class="trbox2">
+                <td>
+                  2022-7-20
+                  <br />
+                  00:00
+                </td>
+                <td>10分</td>
+                <td>已完成</td>
+                <td><span>查看考卷</span></td>
+              </tr>
+              <tr class="trbox3">
+                <td>
+                  2022-7-20
+                  <br />
+                  00:00
+                </td>
+                <td>10分</td>
+                <td>已完成</td>
+                <td><span>查看考卷</span></td>
+              </tr>
+              <tr class="trbox4">
+                <td>
+                  2022-7-20
+                  <br />
+                  00:00
+                </td>
+                <td>10分</td>
+                <td>已完成</td>
+                <td><span>查看考卷</span></td>
+              </tr>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { reactive, toRefs } from "vue";
+import TitleHead from "@/components/TitleHead.vue";
+export default {
+  name: "ExamiNation",
+  components: {
+    TitleHead,
+  },
+  setup() {},
+};
+</script>
+<style lang="scss" scoped>
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: table;
+  clear: both;
+}
+
+.examination {
+  width: 100%;
+  padding-bottom: 20px;
+}
+
+.notice {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: -17.5px;
+  .noticebox {
+    width: 90%;
+    background: #fff;
+    border-radius: 4px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    .main {
+      width: 90%;
+      margin-top: 20px;
+      .dir {
+        width: 100%;
+        height: 20px;
+        // background-color: red;
+        margin-bottom: 20px;
+        display: flex;
+        justify-content: right;
+        font-size: 12px;
+        color: #2478ff;
+        .samegt {
+          margin-top: 3px;
+          height: 12px;
+          width: 12px;
+        }
+        .samege {
+          line-height: 12px;
+        }
+        .pre {
+          margin-right: 5px;
+          // background-size: 100%;
+          background-image: url(../../assets/image/pre.png);
+        }
+        .next {
+          margin-left: 5px;
+          // background-size: 100%;
+          background-image: url(../../assets/image/next.png);
+        }
+      }
+      .lefttitle {
+        display: flex;
+        position: relative;
+        width: 90px;
+        .img {
+          margin-top: 1.5px;
+          width: 16px;
+          height: 16px;
+          background-image: url(../../assets/image/cycle.png);
+        }
+        .rightmain {
+          margin-left: 7.5px;
+          .talk {
+            margin-left: -1.5px;
+            font-size: 14px;
+            font-weight: bold;
+            color: #333;
+            position: absolute;
+            z-index: 999;
+          }
+          .box {
+            position: absolute;
+            width: 62.5px;
+            height: 10px;
+            right: 8px;
+            bottom: -5px;
+            background: #ccdfff;
+          }
+        }
+      }
+      .contentone {
+        width: 100%;
+        background: #f2f5f7;
+        border-radius: 2px;
+        margin-top: 20.5px;
+        font-size: 13px;
+        display: flex;
+        flex-direction: column;
+        .areaone {
+          width: 100%;
+          margin: 15px 0;
+          display: flex;
+          color: #56a3f9;
+          .texttime {
+            margin-left: 22.5px;
+          }
+          .passline {
+            margin-left: 42px;
+          }
+        }
+        .areatwo {
+          // width: 290.5px;
+          // height: 50.5px;
+          margin: 0 5.5px 6.5px 5.5px;
+          background: #ffffff;
+          border-radius: 0px 4px 0px 4px;
+          font-size: 13px;
+
+          .time {
+            margin: 9px 16px 9.5px 17px;
+          }
+        }
+      }
+      .btnbox {
+        width: 83px;
+        height: 33px;
+        background-color: #2478ff;
+        border-radius: 4px;
+        box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+        font-size: 13.5px;
+        margin: 20px 109.5px 21.5px 109.5px;
+        text-align: center;
+        line-height: 33px;
+        .textbtn {
+          border: none;
+          background-color: #2478ff;
+          color: #ffffff;
+        }
+      }
+      .contenttwo {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        font-size: 12px;
+        table {
+          width: 100%;
+          border-collapse: collapse;
+          // border-collapse:separate;
+          // border-spacing:0px 15.5px;
+          text-align: center;
+          margin: 21px auto 48px auto;
+          .trbox1 {
+            width: 302px;
+            height: 40px;
+            border-radius: 4px;
+            background-color: #f2f5f7;
+            th {
+              font-size: 12px;
+              color: #333330;
+            }
+          }
+          td {
+            padding: 14.5px;
+          }
+          .trbox2,
+          .trbox3,
+          .trbox4 {
+            border-bottom: 0.5px solid #d7e5fd;
+          }
+          span {
+            color: #2478ff;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/examination/ExaminationScore.vue b/src/views/examination/ExaminationScore.vue
new file mode 100644
index 0000000..ee42ccb
--- /dev/null
+++ b/src/views/examination/ExaminationScore.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="examinationscore">
+    <TitleHead text="【考试】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
+    <div class="notice">
+      <div class="noticebox">
+        <div class="main">
+          <div class="mainbody">
+            <div class="scoretitle">阶段性考试</div>
+            <div class="scorebox">
+              <div class="scoredetail">
+                您本次考试分数：
+                <div class="score">84</div>
+                <div class="grade">分</div>
+              </div>
+            </div>
+          </div>
+          <div class="btnbox">
+            <div class="closebtn">关闭</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { reactive, toRefs } from "vue";
+import TitleHead from "@/components/TitleHead.vue";
+export default {
+  name: "ExaminationScore",
+  components: {
+    TitleHead,
+  },
+  setup() {},
+};
+</script>
+<style lang="scss" scoped>
+.examinationscore {
+  width: 100%;
+  padding-bottom: 20px;
+}
+
+.notice {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: -17.5px;
+  .noticebox {
+    width: 90%;
+    background: #ffffff;
+    border-radius: 4px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    .main {
+      width: 90%;
+      border-radius: 2px;
+      // background-color: #FFFFFF;
+      .mainbody {
+        width: 100%;
+        margin-top: 133.5px;
+        background-color: #f2f5f7;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        .scoretitle {
+          margin: 18px auto 15px auto;
+          font-size: 15px;
+          font-weight: 600;
+          color: #56a3f9;
+        }
+        .scorebox {
+          width: 290.5px;
+          height: 55.5px;
+          background-color: #ffffff;
+          margin-bottom: 6.5px;
+          .scoredetail {
+            display: flex;
+            font-size: 13px;
+            margin: 21.5px auto 29.5px 72.5px;
+            .score {
+              font-size: 24px;
+              font-weight: 600;
+              color: #ee423d;
+              margin-top: -8px;
+            }
+            .grade {
+              font-size: 13px;
+              color: #ee423d;
+              margin-bottom: 21.5px;
+            }
+          }
+        }
+      }
+      .btnbox {
+        width: 83px;
+        height: 33px;
+        background-color: #2478ff;
+        border-radius: 2px;
+        box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+        font-size: 14px;
+        margin: 18px auto 218.5px auto;
+        text-align: center;
+        line-height: 33px;
+        .closebtn {
+          border: none;
+          background-color: #2478ff;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/examination/ReadyExamination.vue b/src/views/examination/ReadyExamination.vue
new file mode 100644
index 0000000..f6db7e9
--- /dev/null
+++ b/src/views/examination/ReadyExamination.vue
@@ -0,0 +1,201 @@
+<template>
+  <div class="readyexamination">
+    <TitleHead text="考试模式"></TitleHead>
+    <div class="notice">
+      <div class="noticebox">
+        <div class="main">
+          <div class="lefttitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="time">剩余时间</div>
+              <div class="box">29分钟53秒</div>
+            </div>
+          </div>
+          <div class="questiontype clearfix">
+            <div class="type">判断题</div>
+          </div>
+          <div class="questions">
+            <div class="questiontitle">1、控制计划是由工艺部门完成 （4分）</div>
+            <div class="btnswitch">
+              <div class="checkoutbtn"></div>
+              <div class="select">正确</div>
+            </div>
+            <div class="btnswitch">
+              <div class="checkoutbtn"></div>
+              <div class="select">错误</div>
+            </div>
+          </div>
+          <div class="questions">
+            <div class="questiontitle">
+              2、.PFMEA假定所设计的产品能满足设计要求
+            </div>
+            <div class="btnswitch">
+              <div class="checkoutbtn"></div>
+              <div class="select">正确</div>
+            </div>
+            <div class="btnswitch">
+              <div class="checkoutbtn"></div>
+              <div class="select">错误</div>
+            </div>
+          </div>
+          <div class="questions">
+            <div class="questiontitle">
+              3、PFMEA假定所设计的产品能满足设计要求 （4分）
+            </div>
+            <div class="btnswitch">
+              <div class="checkoutbtn"></div>
+              <div class="select">正确</div>
+            </div>
+            <div class="btnswitch">
+              <div class="checkoutbtn"></div>
+              <div class="select">错误</div>
+            </div>
+          </div>
+          <div class="questiontype clearfix">
+            <div class="type">选择题</div>
+          </div>
+          <div class="questions">
+            <div class="questiontitle">4、.FMEA 是一种（ ）工具（4分）</div>
+            <div class="btnswitch">
+              <div class="checkoutbtn"></div>
+              <div class="select">问题解决</div>
+            </div>
+            <div class="btnswitch">
+              <div class="checkoutbtn"></div>
+              <div class="select">项目策划</div>
+            </div>
+            <div class="btnswitch">
+              <div class="checkoutbtn"></div>
+              <div class="select">过程分析</div>
+            </div>
+            <div class="btnswitch">
+              <div class="checkoutbtn"></div>
+              <div class="select">风险分析</div>
+            </div>
+          </div>
+          <div class="btnbox">
+            <div class="submitbtn">提交试卷</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { reactive, toRefs } from "vue";
+import TitleHead from "@/components/TitleHead.vue";
+export default {
+  name: "ReadyExamination",
+  components: {
+    TitleHead,
+  },
+  setup() {},
+};
+</script>
+<style lang="scss" scoped>
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: table;
+  clear: both;
+}
+
+.readyexamination {
+  width: 100%;
+  padding-bottom: 20px;
+}
+
+.notice {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-top: -17.5px;
+  .noticebox {
+    width: 90%;
+    background: #fff;
+    border-radius: 4px;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    .main {
+      width: 90%;
+      margin-top: 20px;
+      font-size: 14px;
+      color: #333330;
+      .lefttitle {
+        display: flex;
+        margin-bottom: 21.5px;
+        .img {
+          width: 16px;
+          height: 18.5px;
+          background-image: url(../../assets/image/readyexamination/sandclock.png);
+          background-size: 100% 100%;
+        }
+        .rightmain {
+          display: flex;
+          margin-left: 4.5px;
+          font-size: 14px;
+          .time {
+            color: #56a3f9;
+          }
+          .box {
+            margin-left: 9.5px;
+            color: #ee423d;
+          }
+        }
+      }
+      .questiontype {
+        width: 100%;
+        height: 35px;
+        margin-bottom: 20px;
+        background-color: #f9f9f9;
+        line-height: 35px;
+        .type {
+          margin-left: 11px;
+        }
+      }
+      .questions {
+        width: 100%;
+        margin-left: 9.5px;
+        .questiontitle {
+          margin-bottom: 20px;
+        }
+        .btnswitch {
+          display: flex;
+          height: 13.6px;
+          line-height: 13.6px;
+          // align-items: center;
+          margin-bottom: 15px;
+          .checkoutbtn {
+            width: 13.6px;
+            height: 13.6px;
+            background-image: url(../../assets/image/checkbox2.png);
+            background-size: 100% 100%;
+            margin-right: 6.5px;
+          }
+          .select {
+            font-size: 13px;
+          }
+        }
+      }
+      .btnbox {
+        width: 83px;
+        height: 33px;
+        background-color: #2478ff;
+        border-radius: 2px;
+        box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+        font-size: 14px;
+        margin: 18px auto 24px auto;
+        text-align: center;
+        line-height: 33px;
+        .submitbtn {
+          border: none;
+          background-color: #2478ff;
+          color: #ffffff;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/faceteach/FaceTeach.vue b/src/views/faceteach/FaceTeach.vue
index 4d63b7b..9543b37 100644
--- a/src/views/faceteach/FaceTeach.vue
+++ b/src/views/faceteach/FaceTeach.vue
@@ -27,6 +27,127 @@
           <div class="titlebtn">评估</div>
         </div>
       </div>
+      <div class="teacher">
+        <div style="width: 90%">
+          <div class="teachertitle">
+            <img
+              style="width: 17px; height: 17px"
+              src="../../assets/image/faceteach/livelecturer.png"
+            />
+            <div class="talk">直播讲师</div>
+            <div class="box"></div>
+          </div>
+          <div class="teachermain">
+            <img class="teacherAvatar" src="../../assets/image/img.jpg" />
+            <div style="flex: 1; margin-left: 11px; margin-right: 13px">
+              <div class="teacherName">王星天（显示事业）</div>
+              <div class="teacherIntro">
+                教师是学生的镜子,学生是 老师的影子。
+              </div>
+            </div>
+            <div class="teacherFollow">+ 关注</div>
+          </div>
+        </div>
+      </div>
+      <div class="detail">
+        <div style="width: 90%">
+          <div class="teachertitle">
+            <img
+              style="width: 17px; height: 17px"
+              src="../../assets/image/faceteach/livelecturer.png"
+            />
+            <div class="talk">课程详情</div>
+            <div class="box"></div>
+          </div>
+          <div class="detailMain">
+            通过对各级人员的软件平台培训，使其能够了解如何
+            运用乾元坤和智能信息管理系统来提升企业管理水平
+            最大限度发挥软件产品在企业中的作用。<br />
+            1.使企业不同部门人员掌握便捷、有效的系统平台操 作方法;<br />
+            2.通过系统平台的培训提高员工对企业的管理理念认 识与提升。<br />
+            3.通过系统平台培训加强沟通，统一部署，协同工作 提高效率。
+          </div>
+        </div>
+      </div>
+      <div class="course">
+        <div style="width: 100%">
+          <el-tabs v-model="activeName" @tab-click="handleClick">
+            <el-tab-pane label="课程附件" name="first">
+              <div
+                v-for="(el, index) in enclosure"
+                :key="el.id"
+                class="enclosure"
+                :style="{
+                  'border-bottom':
+                    index === enclosure.length - 1
+                      ? null
+                      : '1px solid rgba(56, 125, 247, 0.2)',
+                }"
+              >
+                <div class="enclosureL">
+                  <img style="width: 19.5px; height: 22px" :src="el.img" />
+                  <div style="margin-left: 15px">{{ el.name }}</div>
+                </div>
+                <div class="download">
+                  <img
+                    style="width: 13px; height: 12px"
+                    src="../../assets/image/faceteach/download.png"
+                  />
+                  <div style="margin-left: 2.5px">下载</div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="课程作业" name="second">
+              <div class="work">
+                <div class="question">社交产品如何做好模块化处理？</div>
+                <div style="display: flex; justify-content: space-between">
+                  <div
+                    style="
+                      margin-top: 16px;
+                      flex: 1;
+                      display: flex;
+                      flex-wrap: wrap;
+                    "
+                  >
+                    <div class="tag1" style="margin: 0px 10px 10px 0px">
+                      必修
+                    </div>
+                    <div class="tag3" style="margin: 0px 10px 10px 0px">
+                      作业
+                    </div>
+                  </div>
+                  <div class="submit">提交</div>
+                </div>
+              </div>
+            </el-tab-pane>
+            <el-tab-pane label="课程考试" name="third">
+              <div class="work">
+                <div class="question">
+                  模块化产品展示相关案例与展示：如何自由组合你的 思考？
+                </div>
+                <div style="display: flex; justify-content: space-between">
+                  <div
+                    style="
+                      margin-top: 16px;
+                      flex: 1;
+                      display: flex;
+                      flex-wrap: wrap;
+                    "
+                  >
+                    <div class="tag1" style="margin: 0px 10px 10px 0px">
+                      必修
+                    </div>
+                    <div class="tag3" style="margin: 0px 10px 10px 0px">
+                      作业
+                    </div>
+                  </div>
+                  <div class="submit">提交</div>
+                </div>
+              </div>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -110,10 +231,12 @@ export default {
 <style lang="scss">
 .faceteach {
   width: 100%;
+  padding-bottom: 20px;
   .main {
     width: 100%;
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    align-items: center;
     margin-top: -14.5px;
     .title {
       width: 90%;
@@ -150,6 +273,182 @@ export default {
         }
       }
     }
+    .teachertitle {
+      width: 90px;
+      position: relative;
+      display: flex;
+      align-items: center;
+      margin-top: 21px;
+      .talk {
+        font-size: 14px;
+        font-weight: bold;
+        color: #333333;
+        line-height: 12px;
+        margin-left: 7.5px;
+      }
+      .box {
+        position: absolute;
+        width: 62.5px;
+        height: 10px;
+        right: 6px;
+        bottom: -4px;
+        background: rgba(36, 120, 255, 0.15);
+      }
+    }
+    .teacher {
+      width: 90%;
+      padding-bottom: 15px;
+      border-radius: 4px;
+      background-color: rgba(255, 255, 255, 1);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 10px;
+
+      .teachermain {
+        margin-top: 24px;
+        display: flex;
+        justify-content: space-between;
+        .teacherAvatar {
+          width: 50px;
+          height: 50px;
+          border-radius: 25px;
+          margin-left: 4px;
+        }
+        .teacherName {
+          font-size: 14px;
+          font-weight: 600;
+          color: #394145;
+          line-height: 21px;
+        }
+        .teacherIntro {
+          font-size: 13px;
+          font-weight: 400;
+          color: #394145;
+          line-height: 21px;
+          margin-top: 12px;
+        }
+        .teacherFollow {
+          width: 73px;
+          height: 28px;
+          background: #2478ff;
+          border-radius: 2px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 13px;
+          font-weight: 400;
+          color: #ffffff;
+          line-height: 12px;
+          color: #fff;
+          margin-top: 13px;
+        }
+      }
+    }
+    .detail {
+      width: 90%;
+      padding-bottom: 25px;
+      background: #ffffff;
+      border-radius: 4px;
+      margin-top: 10px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .detailMain {
+        margin-top: 22px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #333330;
+        line-height: 24px;
+      }
+    }
+    .course {
+      width: 90%;
+      // padding-bottom: 15px;
+      border-radius: 4px;
+      background: #ffffff;
+      margin-top: 10px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .el-tabs__nav {
+        width: 90%;
+        margin-left: 5%;
+        display: flex;
+        justify-content: space-between;
+      }
+      .el-tabs__item {
+        height: 50px;
+        padding: 0px;
+        font-size: 14px;
+        font-weight: 500;
+        line-height: 21px;
+        padding-top: 15px;
+      }
+      .el-tabs__nav-wrap::after {
+        background-color: rgba(56, 125, 247, 0.2);
+      }
+      .el-tabs__header {
+        margin: 0;
+      }
+      .enclosure {
+        width: 90%;
+        margin-left: 5%;
+        height: 50px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .enclosureL {
+          display: flex;
+          align-items: center;
+          font-size: 13px;
+          font-weight: 400;
+          color: #677d86;
+          line-height: 19px;
+        }
+        .download {
+          display: flex;
+          align-items: center;
+          font-size: 13px;
+          font-weight: 400;
+          color: #2478ff;
+          line-height: 19px;
+        }
+      }
+      .work {
+        // margin-left: 51px;
+        // margin-right: 40px;
+        padding-bottom: 20px;
+        width: 90%;
+        margin-left: 5%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        margin-top: 17.5px;
+      }
+      .work .question {
+        font-size: 13px;
+        font-weight: 500;
+        color: #333330;
+        line-height: 21.5px;
+      }
+
+      .work .submit {
+        width: 73px;
+        height: 28px;
+        margin-top: 16px;
+        background: #2478ff;
+        box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+        border-radius: 2px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #ffffff;
+        line-height: 12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
   }
 }
 </style>
diff --git a/src/views/homeworkpage/HomeworkPage.vue b/src/views/homeworkpage/HomeworkPage.vue
index ba7da61..09161c6 100644
--- a/src/views/homeworkpage/HomeworkPage.vue
+++ b/src/views/homeworkpage/HomeworkPage.vue
@@ -215,12 +215,12 @@ export default {
 }
 .homeworkpage {
   width: 100%;
-
+  padding-bottom: 20px;
   .notice {
     width: 100%;
     display: flex;
     justify-content: center;
-    margin-top: 10px;
+    margin-top: -17.5px;
     .noticebox {
       width: 90%;
       background: #fff;
diff --git a/src/views/investigat/InvestigatPage.vue b/src/views/investigat/InvestigatPage.vue
index ec8c6e3..2d9e778 100644
--- a/src/views/investigat/InvestigatPage.vue
+++ b/src/views/investigat/InvestigatPage.vue
@@ -189,12 +189,12 @@ export default {
 }
 .Investigat {
   width: 100%;
-
+  padding-bottom: 20px;
   .notice {
     width: 100%;
     display: flex;
     justify-content: center;
-    margin-top: 10px;
+    margin-top: -17.5px;
     .noticebox {
       width: 90%;
       background: #fff;
diff --git a/src/views/liveboradcast/LiveBoradcast.vue b/src/views/liveboradcast/LiveBoradcast.vue
index 5d1e87e..373b82d 100644
--- a/src/views/liveboradcast/LiveBoradcast.vue
+++ b/src/views/liveboradcast/LiveBoradcast.vue
@@ -141,6 +141,7 @@ export default {
 }
 .liveboradcast {
   width: 100%;
+  padding-bottom: 20px;
   .main {
     width: 100%;
     display: flex;