diff --git a/src/assets/image/ballotpage/baccone.png b/src/assets/image/ballotpage/baccone.png
new file mode 100644
index 0000000..d6ec4c9
Binary files /dev/null and b/src/assets/image/ballotpage/baccone.png differ
diff --git a/src/assets/image/ballotpage/baccthr.png b/src/assets/image/ballotpage/baccthr.png
new file mode 100644
index 0000000..a21fad1
Binary files /dev/null and b/src/assets/image/ballotpage/baccthr.png differ
diff --git a/src/assets/image/ballotpage/bacctwo.png b/src/assets/image/ballotpage/bacctwo.png
new file mode 100644
index 0000000..b5721fe
Binary files /dev/null and b/src/assets/image/ballotpage/bacctwo.png differ
diff --git a/src/assets/image/ballotpage/cycle.png b/src/assets/image/ballotpage/cycle.png
new file mode 100644
index 0000000..daaf0fc
Binary files /dev/null and b/src/assets/image/ballotpage/cycle.png differ
diff --git a/src/assets/image/ballotpage/next.png b/src/assets/image/ballotpage/next.png
new file mode 100644
index 0000000..40b0ad4
Binary files /dev/null and b/src/assets/image/ballotpage/next.png differ
diff --git a/src/assets/image/ballotpage/pre.png b/src/assets/image/ballotpage/pre.png
new file mode 100644
index 0000000..aae9fd5
Binary files /dev/null and b/src/assets/image/ballotpage/pre.png differ
diff --git a/src/assets/image/ballotpage/px.jpg b/src/assets/image/ballotpage/px.jpg
new file mode 100644
index 0000000..abfad90
Binary files /dev/null and b/src/assets/image/ballotpage/px.jpg differ
diff --git a/src/assets/image/homeworkpage/bacc.png b/src/assets/image/homeworkpage/bacc.png
new file mode 100644
index 0000000..8d60901
Binary files /dev/null and b/src/assets/image/homeworkpage/bacc.png differ
diff --git a/src/assets/image/homeworkpage/cycle.png b/src/assets/image/homeworkpage/cycle.png
new file mode 100644
index 0000000..daaf0fc
Binary files /dev/null and b/src/assets/image/homeworkpage/cycle.png differ
diff --git a/src/assets/image/liveboradcast/class.png b/src/assets/image/liveboradcast/class.png
new file mode 100644
index 0000000..91809c8
Binary files /dev/null and b/src/assets/image/liveboradcast/class.png differ
diff --git a/src/assets/image/liveboradcast/next.png b/src/assets/image/liveboradcast/next.png
new file mode 100644
index 0000000..40b0ad4
Binary files /dev/null and b/src/assets/image/liveboradcast/next.png differ
diff --git a/src/assets/image/liveboradcast/notic.png b/src/assets/image/liveboradcast/notic.png
new file mode 100644
index 0000000..c08ca35
Binary files /dev/null and b/src/assets/image/liveboradcast/notic.png differ
diff --git a/src/assets/image/liveboradcast/pre.png b/src/assets/image/liveboradcast/pre.png
new file mode 100644
index 0000000..aae9fd5
Binary files /dev/null and b/src/assets/image/liveboradcast/pre.png differ
diff --git a/src/assets/image/liveboradcast/px.jpg b/src/assets/image/liveboradcast/px.jpg
new file mode 100644
index 0000000..abfad90
Binary files /dev/null and b/src/assets/image/liveboradcast/px.jpg differ
diff --git a/src/assets/image/liveboradcast/time.png b/src/assets/image/liveboradcast/time.png
new file mode 100644
index 0000000..02a16fe
Binary files /dev/null and b/src/assets/image/liveboradcast/time.png differ
diff --git a/src/assets/image/liveboradcast/tv.png b/src/assets/image/liveboradcast/tv.png
new file mode 100644
index 0000000..b42cd3f
Binary files /dev/null and b/src/assets/image/liveboradcast/tv.png differ
diff --git a/src/assets/image/liveboradcast/write.png b/src/assets/image/liveboradcast/write.png
new file mode 100644
index 0000000..06a171f
Binary files /dev/null and b/src/assets/image/liveboradcast/write.png differ
diff --git a/src/views/ballotpage/BallotPage.vue b/src/views/ballotpage/BallotPage.vue
new file mode 100644
index 0000000..55eafe7
--- /dev/null
+++ b/src/views/ballotpage/BallotPage.vue
@@ -0,0 +1,371 @@
+<template>
+  <div class="ballotpage">
+    <TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead>
+    <!-- <div class="main">
+      <div class="title">
+        <div class="inner">
+          <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="allbtn">
+            <button class="samebtn btnone">观看</button>
+            <button class="samebtn btntwo" style="margin-left: 9px">
+              签到
+            </button>
+            <button class="samebtn btnthr" style="margin-left: 9px">
+              评估
+            </button>
+          </div>
+        </div>
+      </div>
+    </div> -->
+
+    <div class="notice">
+      <div class="noticebox">
+        <div class="mani">
+          <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">
+            <div class="same ba">
+              <div class="samenum" style="color: #089dff">123</div>
+              <div class="samego">参与数</div>
+            </div>
+            <div class="same bt">
+              <div class="samenum" style="color: #387df7">123</div>
+              <div class="samego">总票数</div>
+            </div>
+            <div class="same bh">
+              <div class="samenum" style="color: #00c1fc">123</div>
+              <div class="samego">浏览数</div>
+            </div>
+          </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">
+            <div class="time">
+              <div class="timeone">2022-7-20 00:00</div>
+              <div class="timetwo" style="margin-top: -2.5px">至</div>
+              <div class="timethr">2022-8-29 23:59:59</div>
+            </div>
+            <div class="endbox">
+              <div class="endtalk clearfix">
+                <div class="sameto">距离结束还有</div>
+                <div class="sametoo">123</div>
+                <div class="sameto">小时</div>
+                <div class="sametoo">42</div>
+                <div class="sameto">分钟</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="lefttitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">投票说明</div>
+              <div class="box"></div>
+            </div>
+          </div>
+
+          <div class="contentthr clearfix">
+            <div class="thrcontent">
+              为提高核心项目讲解体验，现向广大学员征集较为接受的授课方式，每位学员可投票2个选项，我们将选取最高选项的两个做后续讲解。
+            </div>
+          </div>
+
+          <div class="lefttitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">参与投票</div>
+              <div class="box"></div>
+            </div>
+          </div>
+
+          <div class="contentfor clearfix">
+            <div class="imgcontent">
+              <div class="imgsame aimg"></div>
+              <div class="imgsame bimg"></div>
+              <div class="imgsame cimg"></div>
+            </div>
+            <div class="text">
+              为提高核心项目讲解体验，现向广大学员征集较为接受的授课方式，每位学员可投票2个选项,我们将选取最高选项的两个做后续讲解。
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { reactive, toRefs } from "vue";
+import TitleHead from "@/components/TitleHead.vue";
+export default {
+  name: "BallotPage",
+  components: {
+    TitleHead,
+  },
+  setup() {},
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss">
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: table;
+  clear: both;
+}
+.ballotpage {
+  width: 100%;
+
+  .notice {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    .noticebox {
+      width: 90%;
+
+      background: #fff;
+      border-radius: 4px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      .mani {
+        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/ballotpage/pre.png);
+          }
+          .next {
+            margin-left: 5px;
+            // background-size: 100%;
+            background-image: url(../../assets/image/ballotpage/next.png);
+          }
+        }
+
+        .lefttitle {
+          display: flex;
+          position: relative;
+          width: 90px;
+          .img {
+            margin-top: 1.5px;
+            width: 16px;
+            height: 16px;
+            background-image: url(../../assets/image/ballotpage/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;
+            }
+          }
+        }
+
+        .samenum {
+          margin-top: 18.5px;
+          position: absolute;
+          font-size: 18px;
+          font-weight: bold;
+          left: 50%;
+          transform: translate(-50%, 0);
+        }
+        .samego {
+          margin-top: 45px;
+          position: absolute;
+          font-size: 13px;
+          left: 50%;
+          transform: translate(-50%, 0);
+        }
+        .contentone {
+          margin-top: 23px;
+          display: flex;
+          justify-content: space-between;
+          width: 100%;
+          margin-bottom: 20px;
+          // height: 200px;
+          .same {
+            position: relative;
+            width: 95px;
+            height: 75px;
+            // background-color: red;
+          }
+          .ba {
+            background-image: url(../../assets/image/ballotpage/baccone.png);
+          }
+          .bt {
+            background-image: url(../../assets/image/ballotpage/bacctwo.png);
+          }
+          .bh {
+            background-image: url(../../assets/image/ballotpage/baccthr.png);
+          }
+        }
+
+        .contenttwo {
+          position: relative;
+          margin-top: 23px;
+          width: 100%;
+          height: 95px;
+          margin-bottom: 20px;
+          // #B6C6E1
+          // #89AED6
+          background-image: linear-gradient(to right, #b6c6e1, #89aed6 90%);
+          .time {
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            margin-top: 15px;
+            display: flex;
+            justify-content: space-between;
+            width: 80%;
+            color: #fff;
+            font-size: 13px;
+            height: 20px;
+          }
+          .endbox {
+            margin-top: 42.5px;
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 95%;
+            height: 45px;
+            background-color: #f2f5f7;
+            border-radius: 0 3px 0 3px;
+            display: flex;
+            justify-content: center;
+            .endtalk {
+              width: 90%;
+              display: flex;
+              justify-content: space-between;
+              margin-top: 18px;
+              .sameto {
+                font-size: 14px;
+              }
+              .sametoo {
+                margin-top: -3px;
+                font-size: 21.5px;
+                color: #4a9cf8;
+              }
+            }
+          }
+        }
+
+        .contentthr {
+          border-radius: 4px;
+          margin-bottom: 23px;
+          position: relative;
+          margin-top: 23px;
+          width: 100%;
+          // height: 95px;
+          background-color: #f2f5f7;
+          display: flex;
+          justify-content: center;
+          .thrcontent {
+            width: 90%;
+            margin-top: 19px;
+            margin-bottom: 24.5px;
+            // background-color: blue;
+            font-size: 13px;
+            line-height: 24px;
+          }
+        }
+
+        .contentfor {
+          margin-top: 23px;
+          width: 100%;
+          margin-bottom: 34px;
+          // height: 20px;
+          // background-color: red;
+          .imgcontent {
+            display: flex;
+            justify-content: space-between;
+            width: 100%;
+            .imgsame {
+              width: 95px;
+              height: 95px;
+              // background-color: blue;
+              border-radius: 4px;
+            }
+            .aimg {
+              background-image: url(../../assets/image/ballotpage/px.jpg);
+            }
+            .bimg {
+              background-image: url(../../assets/image/ballotpage/px.jpg);
+            }
+            .cimg {
+              background-image: url(../../assets/image/ballotpage/px.jpg);
+            }
+          }
+          .text {
+            font-size: 13px;
+            line-height: 24px;
+            margin-top: 18px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/homeworkpage/HomeworkPage.vue b/src/views/homeworkpage/HomeworkPage.vue
new file mode 100644
index 0000000..971569a
--- /dev/null
+++ b/src/views/homeworkpage/HomeworkPage.vue
@@ -0,0 +1,396 @@
+<template>
+  <div class="homeworkpage">
+    <TitleHead text="【投票】管理者进阶腾飞班 - 授课方式"></TitleHead>
+
+    <div class="notice">
+      <div class="noticebox">
+        <div class="mani">
+          <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="onttitle">管理者进阶腾飞班 - 第一次作业 - 沙盘实验</div>
+          </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">
+            <div class="time">
+              <div class="timeone">2022-7-20 00:00</div>
+              <div class="timetwo" style="margin-top: -2.5px">至</div>
+              <div class="timethr">2022-8-29 23:59:59</div>
+            </div>
+            <div class="endbox">
+              <div class="endtalk clearfix">
+                <div class="sameto">距离结束还有</div>
+                <div class="sametoo">123</div>
+                <div class="sameto">小时</div>
+                <div class="sametoo">42</div>
+                <div class="sameto">分钟</div>
+              </div>
+            </div>
+          </div>
+
+          <div class="lefttitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">投票说明</div>
+              <div class="box"></div>
+            </div>
+          </div>
+
+          <div class="contentthr clearfix">
+            <div class="thrcontent">
+              1、阅读文章，做名校题库，翻译文言文，整体文 化常识和文言知识；<br />
+              2、《中国古代诗词文化鉴赏》大唐之音、两宋清 雅、明清情致
+            </div>
+          </div>
+
+          <div class="lefttitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">作业内容</div>
+              <div class="box"></div>
+            </div>
+          </div>
+
+          <div class="contentfor clearfix">
+            <textarea type="text" class="inputbox" />
+          </div>
+          <div class="btnbox">
+            <div class="btnn">
+              <button class="btns btno">上传</button>
+              <button class="btns btnt">提交</button>
+            </div>
+          </div>
+
+          <div class="lefttitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">历史纪录</div>
+              <div class="box"></div>
+            </div>
+          </div>
+
+          <div class="contentfiv">
+            <div class="his clearfix">
+              <div class="histime">2022-7-20 00:00</div>
+              <div class="hiscon">大唐之音鉴赏 - 2022/7/20.zip</div>
+            </div>
+            <div class="his clearfix" style="background-color: #fff">
+              <div class="histime">2022-7-18 00:00</div>
+              <div class="hiscon">
+                《木兰辞》翻译：叹息声一声接着一声,木兰姑娘当门在织布。…
+              </div>
+            </div>
+            <div class="his clearfix">
+              <div class="histime">2022-7-14 00:00</div>
+              <div class="hiscon">湖北黄冈语文压卷题.doc</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { reactive, toRefs } from "vue";
+import TitleHead from "@/components/TitleHead.vue";
+export default {
+  name: "HomeworkPage",
+  components: {
+    TitleHead,
+  },
+  setup() {},
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss">
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: table;
+  clear: both;
+}
+.homeworkpage {
+  width: 100%;
+
+  .notice {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    .noticebox {
+      width: 90%;
+      background: #fff;
+      border-radius: 4px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      .mani {
+        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/ballotpage/pre.png);
+          }
+          .next {
+            margin-left: 5px;
+            // background-size: 100%;
+            background-image: url(../../assets/image/ballotpage/next.png);
+          }
+        }
+
+        .lefttitle {
+          display: flex;
+          position: relative;
+          width: 90px;
+          .img {
+            margin-top: 1.5px;
+            width: 16px;
+            height: 16px;
+            background-image: url(../../assets/image/ballotpage/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;
+            }
+          }
+        }
+
+        .samenum {
+          margin-top: 18.5px;
+          position: absolute;
+          font-size: 18px;
+          font-weight: bold;
+          left: 50%;
+          transform: translate(-50%, 0);
+        }
+        .samego {
+          margin-top: 45px;
+          position: absolute;
+          font-size: 13px;
+          left: 50%;
+          transform: translate(-50%, 0);
+        }
+        .contentone {
+          margin-top: 23px;
+          display: flex;
+          justify-content: center;
+          width: 100%;
+          margin-bottom: 20px;
+          height: 74px;
+          // #DFEBFF
+          // #fff
+          background-image: url(../../assets/image/homeworkpage/bacc.png);
+          background-size: 100% 100%;
+          color: #4a9cf8;
+          font-size: 14px;
+          font-weight: bold;
+          .onttitle {
+            margin-top: 15px;
+            // width: 90%;
+          }
+        }
+
+        .contenttwo {
+          position: relative;
+          margin-top: 23px;
+          width: 100%;
+          height: 95px;
+          margin-bottom: 20px;
+          // #B6C6E1
+          // #89AED6
+          background-image: linear-gradient(to right, #b6c6e1, #89aed6 90%);
+          .time {
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            margin-top: 15px;
+            display: flex;
+            justify-content: space-between;
+            width: 80%;
+            color: #fff;
+            font-size: 13px;
+            height: 20px;
+          }
+          .endbox {
+            margin-top: 42.5px;
+            position: absolute;
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 95%;
+            height: 45px;
+            background-color: #f2f5f7;
+            border-radius: 0 3px 0 3px;
+            display: flex;
+            justify-content: center;
+            .endtalk {
+              width: 90%;
+              display: flex;
+              justify-content: space-between;
+              margin-top: 18px;
+              .sameto {
+                font-size: 14px;
+              }
+              .sametoo {
+                margin-top: -3px;
+                font-size: 21.5px;
+                color: #4a9cf8;
+              }
+            }
+          }
+        }
+
+        .contentthr {
+          border-radius: 4px;
+          margin-bottom: 23px;
+          position: relative;
+          margin-top: 23px;
+          width: 100%;
+          // height: 95px;
+          background-color: #f2f5f7;
+          display: flex;
+          justify-content: center;
+          .thrcontent {
+            width: 90%;
+            margin-top: 19px;
+            margin-bottom: 15.5px;
+            // background-color: blue;
+            font-size: 13px;
+            line-height: 24px;
+          }
+        }
+
+        .contentfor {
+          margin-top: 23px;
+          width: 100%;
+          margin-bottom: 34px;
+          height: 200px;
+          // background-color: red;
+          .inputbox {
+            width: 100%;
+            background-color: #f5f6f7;
+            border: 0;
+            height: 256px;
+            border-radius: 4px;
+            // border-color: blue;
+          }
+          .inputbox:focus {
+            outline: none !important;
+            border-color: #719ece;
+            box-shadow: 0 0 10px #719ece;
+          }
+        }
+        .btnbox {
+          margin-top: 80px;
+          // height: 20px;
+          width: 100%;
+          // background-color: red;
+          display: flex;
+          justify-content: center;
+          margin-bottom: 20px;
+          .btnn {
+            color: #fff;
+            width: 60%;
+            font-size: 14px;
+            display: flex;
+            justify-content: space-between;
+            .btns {
+              color: #fff;
+              width: 83px;
+              height: 33px;
+              border: 0;
+              border-radius: 2px;
+            }
+            .btno {
+              background-color: #ffb96d;
+            }
+            .btnt {
+              background-color: #2478ff;
+            }
+          }
+        }
+
+        .contentfiv {
+          margin-top: 26px;
+          width: 100%;
+          margin-bottom: 34px;
+          // height: 200px;
+          // background-color: #bfa;
+          .his {
+            width: 100%;
+            // height: 100px;
+            background-color: #f2f5f7;
+            border-radius: 4px;
+            .histime {
+              color: #677d86;
+              font-size: 12px;
+              margin-top: 11px;
+              margin-left: 22px;
+            }
+            .hiscon {
+              width: 87%;
+              font-size: 13px;
+              line-height: 24px;
+              margin: 11px 0 11px 22px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/liveboradcast/LiveBoradcast.vue b/src/views/liveboradcast/LiveBoradcast.vue
new file mode 100644
index 0000000..5d1e87e
--- /dev/null
+++ b/src/views/liveboradcast/LiveBoradcast.vue
@@ -0,0 +1,508 @@
+<template>
+  <div class="liveboradcast">
+    <TitleHead text="【直播】管理者进阶腾飞班 - 毕业典礼"></TitleHead>
+    <div class="main">
+      <div class="title">
+        <div class="inner">
+          <!-- 时间 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>
+          <!-- button 外部盒子 -->
+          <div class="allbtn">
+            <button class="samebtn btnone">观看</button>
+            <button class="samebtn btntwo" style="margin-left: 9px">
+              签到
+            </button>
+            <button class="samebtn btnthr" style="margin-left: 9px">
+              评估
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="notice">
+      <div class="noticebox">
+        <div class="mani">
+          <div class="lefttitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">直播公告</div>
+              <div class="box"></div>
+            </div>
+          </div>
+          <div class="content">
+            当你走进这直播间，我和毛不易老师@毛不易就已经在直播间等你们了!今晚20点30，不见不散!
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="teach">
+      <div class="teachbox">
+        <div class="teachmani">
+          <div class="lefttitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">直播讲师</div>
+              <div class="box"></div>
+            </div>
+          </div>
+          <div class="teachcontent">
+            <div class="avator"></div>
+            <div class="nametalk">
+              <div class="name">王星天（显示事业）</div>
+              <div class="talk">教师是学生的镜子,学生是老师的影子。</div>
+            </div>
+            <button class="likebtn">+&nbsp;关注</button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="preview">
+      <div class="previewbox">
+        <div class="previewmani">
+          <div class="lefttitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">课前预习</div>
+              <div class="box"></div>
+            </div>
+          </div>
+          <div class="previewcontent">
+            通过对各级人员的软件平台培训，使其能够了解如何运用乾元坤和智能信息管理系统来提升企业管理水平最大限度发挥软件产品在企业中的作用;
+            <br />
+            ● 培训目标
+            <br />1.使企业不同部门人员掌握便捷、有效的系统平台操作方法;
+            <br />
+            2.通过系统平台的培训提高员工对企业的管理理念认识与提升。
+            <br />
+            3.通过系统平台培训加强沟通，统一部署，协同工作提高效率。
+            <br />● 培训对象
+            <br />
+            集团领导、各相关部门领导、总经理、车间主管、车间操作员等;
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="work">
+      <div class="workbox">
+        <div class="workmani">
+          <div class="lefttitle">
+            <div class="img"></div>
+            <div class="rightmain">
+              <div class="talk">课后作业</div>
+              <div class="box"></div>
+            </div>
+          </div>
+
+          <div class="workcontent">
+            <div class="tit">网易有道词典现有功能结构拆解+问题分析</div>
+            <div class="con">
+              查找资料，介绍一种国外（日本、美国、欧洲）道路（公路、铁路、城市道路、地铁）设计规范的演变过程，可以一种或几种主要技术指标为例，并说明其原因
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+// import { reactive, toRefs } from "vue";
+import TitleHead from "@/components/TitleHead.vue";
+export default {
+  name: "LiveBoradcast",
+  components: {
+    TitleHead,
+  },
+  setup() {},
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style lang="scss">
+.clearfix:before,
+.clearfix:after {
+  content: " ";
+  display: table;
+  clear: both;
+}
+.liveboradcast {
+  width: 100%;
+  .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;
+          // justify-content: space-between;
+          // background-color: orange;
+          // dd
+          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);
+            }
+          }
+        }
+        .allbtn {
+          margin-top: 20px;
+          width: 100%;
+          display: flex;
+          justify-content: flex-end;
+          .samebtn {
+            width: 83px;
+            height: 33px;
+            border: 0;
+            border-radius: 4px;
+            font-size: 14px;
+            font-weight: 400;
+            color: #ffffff;
+          }
+          .btnone {
+            background: #00c1fc;
+            box-shadow: 0px 1px 8px 0px rgba(0, 193, 252, 0.7);
+          }
+          .btntwo {
+            background: #0096fa;
+            box-shadow: 0px 1px 8px 0px rgba(0, 150, 250, 0.7);
+          }
+          .btnthr {
+            box-shadow: 0px 1px 8px 0px rgba(56, 125, 247, 0.7);
+            background: #2478ff;
+          }
+        }
+      }
+    }
+  }
+
+  .notice {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    .noticebox {
+      width: 90%;
+      background: linear-gradient(
+        180deg,
+        rgba(36, 120, 255, 0.15) 0%,
+        white 70%
+      );
+      border-radius: 4px;
+      position: relative;
+      .mani {
+        margin-left: 20.5px;
+        margin-top: 20px;
+        .lefttitle {
+          display: flex;
+          position: relative;
+          width: 90px;
+          .img {
+            width: 17px;
+            height: 18px;
+            background-image: url(../../assets/image/liveboradcast/notic.png);
+          }
+          .rightmain {
+            margin-left: 7.5px;
+            .talk {
+              font-size: 14px;
+              font-weight: bold;
+              color: #333;
+              position: absolute;
+              z-index: 999;
+            }
+            .box {
+              position: absolute;
+              width: 62.5px;
+              height: 10px;
+              right: 6px;
+              bottom: -4px;
+              background: #ccdfff;
+            }
+          }
+        }
+        .content {
+          color: #677d86;
+          font-size: 13px;
+          line-height: 24px;
+          font-weight: 700;
+          margin: 21.5px 26.5px 32.5px 0;
+        }
+      }
+    }
+  }
+
+  .teach {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    .teachbox {
+      width: 90%;
+      // height: 200px;
+      background: #fff;
+      border-radius: 4px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      .teachmani {
+        // margin-left: 20.5px;
+        width: 90%;
+        margin-top: 20px;
+        .lefttitle {
+          display: flex;
+          position: relative;
+          width: 90px;
+          .img {
+            width: 17px;
+            height: 17.5px;
+            background-image: url(../../assets/image/liveboradcast/tv.png);
+          }
+          .rightmain {
+            margin-left: 7.5px;
+            .talk {
+              font-size: 14px;
+              font-weight: bold;
+              color: #333;
+              position: absolute;
+              z-index: 999;
+            }
+            .box {
+              position: absolute;
+              width: 62.5px;
+              height: 10px;
+              right: 6px;
+              bottom: -4px;
+              background: #ccdfff;
+            }
+          }
+        }
+        .teachcontent {
+          display: flex;
+          margin-bottom: 15px;
+          margin-top: 27px;
+          .avator {
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            background-image: url(../../assets/image/liveboradcast/px.jpg);
+          }
+          .nametalk {
+            margin-left: 11.5px;
+            .name {
+              font-size: 14px;
+              font-weight: bold;
+              color: #333;
+            }
+            .talk {
+              width: 148px;
+              margin-top: 6px;
+              font-size: 13px;
+              line-height: 21px;
+            }
+          }
+          .likebtn {
+            // margin: 10px 20px 0 0px;
+            margin-left: 20px;
+            margin-top: 12px;
+            width: 73px;
+            height: 28px;
+            background-color: #2478ff;
+            border: 0;
+            font-size: 13px;
+            color: #fff;
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+  }
+
+  .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 {
+        // margin-left: 20.5px;
+        width: 90%;
+        margin-top: 20px;
+        .lefttitle {
+          display: flex;
+          position: relative;
+          width: 90px;
+          .img {
+            width: 17px;
+            height: 16px;
+            background-image: url(../../assets/image/liveboradcast/class.png);
+          }
+          .rightmain {
+            margin-left: 7.5px;
+            .talk {
+              font-size: 14px;
+              font-weight: bold;
+              color: #333;
+              position: absolute;
+              z-index: 999;
+            }
+            .box {
+              position: absolute;
+              width: 62.5px;
+              height: 10px;
+              right: 6px;
+              bottom: -5px;
+              background: #ccdfff;
+            }
+          }
+        }
+        .previewcontent {
+          margin: 20.5px 0px 24px 0px;
+
+          font-size: 13px;
+          font-weight: 400;
+          color: #333330;
+          line-height: 24px;
+        }
+      }
+    }
+  }
+
+  .work {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+    .workbox {
+      width: 90%;
+      // height: 200px;
+      background: #fff;
+      border-radius: 4px;
+      position: relative;
+      display: flex;
+      justify-content: center;
+      .workmani {
+        // margin-left: 20.5px;
+        width: 90%;
+        margin-top: 20px;
+        .lefttitle {
+          display: flex;
+          position: relative;
+          width: 90px;
+          .img {
+            width: 20px;
+            height: 20px;
+            background-image: url(../../assets/image/liveboradcast/write.png);
+          }
+          .rightmain {
+            margin-left: 7.5px;
+            .talk {
+              font-size: 14px;
+              font-weight: bold;
+              color: #333;
+              position: absolute;
+              z-index: 999;
+            }
+            .box {
+              position: absolute;
+              width: 62.5px;
+              height: 10px;
+              right: 3px;
+              bottom: -3px;
+              background: #ccdfff;
+            }
+          }
+        }
+
+        .workcontent {
+          margin: 17px 0px 25.5px 0px;
+          .tit {
+            font-size: 13px;
+            font-weight: bold;
+            margin-bottom: 12px;
+          }
+          .con {
+            font-size: 13px;
+            font-weight: 400;
+            color: #333330;
+            line-height: 24px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>