diff --git a/src/components/LiveItem.vue b/src/components/LiveItem.vue
new file mode 100644
index 0000000..4f3d048
--- /dev/null
+++ b/src/components/LiveItem.vue
@@ -0,0 +1,146 @@
+<template>
+    <div class="videoitem">
+        <img src="" alt="" class="cover">
+        <img src="@/static/images/play.png" alt="" class="play">
+        <div class="title">
+            sadghaskghdfjkaghjkfha
+            <span class="lv">7.3分</span>
+        </div>
+        <div class="info">
+            <div class="datetime">
+                <span>2020-09-11</span>
+                <span class="time">09:30</span>
+            </div>
+            <div class="feature">
+                <div>
+                    <img src="@/static/images/shijian.png" alt="">
+                    <span>123</span>
+                </div>
+                <div>
+                    <img src="@/static/images/studentnum.png" alt="">
+                    <span>3</span>
+                </div>
+            </div>
+        </div>
+        <div class="state audit" v-if="type==1">
+            还未开始
+        </div>
+         <div class="state live" v-if="type==2">
+            进入直播
+        </div>
+         <div class="state over" v-if="type==3">
+             查看回放
+        </div>
+    </div>
+</template>
+<style lang="scss" scoped>
+.videoitem{
+    width: 226px;
+    height: 198px;
+    background-color: #fff;
+    border-radius: 17px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    box-shadow: 0px 5px 6px 0px rgba(158, 158, 158, 0.11);
+    .cover{
+        width: 100%;
+        height: 127px;
+        background-color: #0f0;
+    }
+    .play{
+        position: absolute;
+        top: 52px;
+        left: 101px;
+        width: 23px;
+        height: 23px;
+    }
+    .title{
+        margin-top: 16px;
+        font-display: 11px;
+        margin-left: 18px;
+        color: #111;
+        display: flex;
+        align-items: center;
+        cursor: default;
+        >span{
+            margin-left: 11px;
+            font-size: 10px;
+            color: #f55455;
+        }
+    }
+    .info{
+        display: flex;
+        align-items: center;
+        margin-top: 18px;
+        margin-left: 18px;
+      
+        .datetime{
+            display: flex;
+            align-items: center;
+            font-size: 10px;
+            color: #666;
+            .time{
+                margin-left: 15px;
+            }
+        }
+        .feature{
+            display: flex;
+            align-items: center;
+            margin-left: 25px;
+            // margin-top: 18px;
+            >div{
+                display: flex;
+                align-items: center;
+                >img{
+                    width: 11px;
+                    height: 11px;
+                }
+                >span{
+                    font-size: 10px;
+                    color: #111;
+                    margin-left: 4px;
+                    margin-right: 11px;
+                }
+            }
+        }
+    }
+    .state{
+        position: absolute;
+        top: 0;
+        right: 0;
+        width: 67px;
+        height: 23px;
+        border-radius:  0 17px 0 17px;
+        font-size: 10px;
+        line-height: 23px;
+        text-align: center;
+    }
+    .audit{
+        background-color: #CFF9F1;
+        color: #08AE98;
+    }
+    .live{
+       
+        background: linear-gradient(-90deg, #0EDCC2, #50DF98, #7EE278, #A2E562);
+        color: #fff;
+    }
+    .over{
+        background-color: #F7F7F7;
+        color: #121212;
+    }
+}
+</style>
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+      props:{
+        type: {
+            type: Number,
+            default:1
+        }
+    },
+})
+</script>
\ No newline at end of file
diff --git a/src/components/VideoItem.vue b/src/components/VideoItem.vue
index 97d383f..dd36aa6 100644
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -1,7 +1,7 @@
 <template>
     <div class="videoitem">
         <img src="" alt="" class="cover">
-        <img src="" alt="" class="play">
+        <img src="@/static/images/play.png" alt="" class="play">
         <div class="title">
             sadghaskghdfjkaghjkfha
             <span class="lv">7.3分</span>
@@ -10,21 +10,27 @@
             <div class="datetime">
                 <span>2020-09-11</span>
                 <span class="time">09:30</span>
-            </div>``
+            </div>
             <div class="feature">
                 <div>
-                    <img src="" alt="">
+                    <img src="@/static/images/watch.png" alt="">
                     <span>123</span>
                 </div>
                 <div>
-                    <img src="" alt="">
+                    <img src="@/static/images/share.png" alt="">
                     <span>3</span>
                 </div>
             </div>
         </div>
-        <div class="state audit fail">
+        <div class="state audit" v-if="type==1">
             审核中
         </div>
+         <div class="state audit fail" v-if="type==2">
+            未通过
+        </div>
+         <div class="state audit" v-if="type==3">
+             已发布
+        </div>
     </div>
 </template>
 <style lang="scss" scoped>
@@ -53,9 +59,11 @@
     .title{
         margin-top: 16px;
         font-display: 11px;
+        margin-left: 18px;
         color: #111;
         display: flex;
         align-items: center;
+        cursor: default;
         >span{
             margin-left: 11px;
             font-size: 10px;
@@ -65,6 +73,9 @@
     .info{
         display: flex;
         align-items: center;
+        margin-top: 18px;
+        margin-left: 18px;
+      
         .datetime{
             display: flex;
             align-items: center;
@@ -77,7 +88,8 @@
         .feature{
             display: flex;
             align-items: center;
-            margin-top: 18px;
+            margin-left: 25px;
+            // margin-top: 18px;
             >div{
                 display: flex;
                 align-items: center;
@@ -89,6 +101,7 @@
                     font-size: 10px;
                     color: #111;
                     margin-left: 4px;
+                    margin-right: 11px;
                 }
             }
         }
@@ -118,6 +131,11 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-
+      props:{
+        type: {
+            type: Number,
+            default:1
+        }
+    },
 })
 </script>
\ No newline at end of file
diff --git a/src/router/index.ts b/src/router/index.ts
index 2cb8ae0..ee9b4c6 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -76,6 +76,14 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: "videoinfo",
         component: () => import("../views/regime/VideoInfo.vue")
+      },
+      {
+        path: "subscriber",
+        component: () => import("../views/regime/Subscriber.vue")
+      },
+      {
+        path: "live",
+        component: () => import("../views/regime/Live.vue")
       }
     ]
   },
diff --git a/src/static/images/play.png b/src/static/images/play.png
new file mode 100644
index 0000000..292d675
Binary files /dev/null and b/src/static/images/play.png differ
diff --git a/src/static/images/share.png b/src/static/images/share.png
new file mode 100644
index 0000000..c486549
Binary files /dev/null and b/src/static/images/share.png differ
diff --git a/src/static/images/sousuo.png b/src/static/images/sousuo.png
new file mode 100644
index 0000000..f8a61fb
Binary files /dev/null and b/src/static/images/sousuo.png differ
diff --git a/src/static/images/studentnum.png b/src/static/images/studentnum.png
new file mode 100644
index 0000000..fe9346b
Binary files /dev/null and b/src/static/images/studentnum.png differ
diff --git a/src/static/images/watch.png b/src/static/images/watch.png
new file mode 100644
index 0000000..9dce230
Binary files /dev/null and b/src/static/images/watch.png differ
diff --git a/src/views/regime/Live.vue b/src/views/regime/Live.vue
new file mode 100644
index 0000000..97fecf3
--- /dev/null
+++ b/src/views/regime/Live.vue
@@ -0,0 +1,166 @@
+<template>
+  <div class="video">
+    <div class="nav">
+      <div class="tabs">
+        <div :class="tabindex == 1 ? 'on' : ''" @click="tabchange(1)">全部直播</div>
+        <div :class="tabindex == 2 ? 'on' : ''" @click="tabchange(2)">未开始</div>
+        <div :class="tabindex == 3 ? 'on' : ''" @click="tabchange(3)">已结束</div>
+      </div>
+      <div class="sel">
+        <img src="@/static/images/sousuo.png" alt="" class="icon" />
+        <input type="text" />
+      </div>
+    </div>
+    <div class="list" v-if="tabindex==1">
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+    </div>
+
+       <div class="list" v-if="tabindex==2">
+      <LiveItem :type="3"></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+      <LiveItem></LiveItem>
+    </div>
+          <div class="list" v-if="tabindex==3">
+      <LiveItem :type="2"></LiveItem>
+      <LiveItem :type="2"></LiveItem>
+      <LiveItem :type="2"></LiveItem>
+      <LiveItem :type="2"></LiveItem>
+    </div>
+    <div class="pages">
+      <a-pagination v-model:current="page" :total="500" :showLessItems="true" />
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.video {
+  width: 100%;
+  height: 706px;
+  background-color: #fff;
+  border-radius: 17px;
+  padding: 40px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .nav {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #eee;
+    justify-content: space-between;
+    width: 100%;
+    .tabs {
+      display: flex;
+      align-items: center;
+      font-size: 13px;
+      font-weight: bold;
+      color: #111;
+      padding: 11px 0;
+      > div {
+        margin-right: 58px;
+        cursor: pointer;
+        text-align: center;
+        width: 54px;
+      }
+      .on {
+        color: #08ae98;
+        position: relative;
+        &::before {
+          content: "";
+          display: block;
+          position: absolute;
+          bottom: -12px;
+          width: 57px;
+          height: 1px;
+          background-color: #08ae98;
+        }
+      }
+    }
+    .sel {
+      width: 171px;
+      height: 26px;
+      border: 1px solid #999;
+      display: flex;
+      align-items: center;
+      padding: 8px;
+      border-radius: 4px;
+      > img {
+        width: 11px;
+        height: 11px;
+      }
+      > input {
+        width: 119px;
+        font-size: 9px;
+        line-height: 1;
+        margin-left: 6px;
+        border: none;
+        outline: none;
+      }
+    }
+  }
+  .list {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    > div {
+      margin-top: 28px;
+      margin-left: 23px;
+      &:nth-child(1),
+      &:nth-child(6) {
+        margin-left: 0;
+      }
+    }
+  }
+  .pages {
+    position: absolute;
+    bottom: 114px;
+    display: flex;
+    justify-content: center;
+    ::v-deep(.ant-pagination-next) > .ant-pagination-item-link,
+    ::v-deep(.ant-pagination-prev) > .ant-pagination-item-link,
+    ::v-deep(.ant-pagination-item),
+    ::v-deep(.ant-pagination-jump-next-custom-icon),
+    ::v-deep(.ant-pagination-jump-prev-custom-icon) {
+      border: 1px solid #08ae98;
+    }
+    ::v-deep(.ant-pagination-item-active) a {
+      color: #fff;
+    }
+    ::v-deep(.ant-pagination-item-active) {
+      background-color: #08ae98;
+    }
+  }
+}
+</style>
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import LiveItem from "@/components/LiveItem.vue";
+export default defineComponent({
+  components: {
+    LiveItem,
+  },
+  setup() {
+    const page = ref(6);
+    const tabindex = ref(1);
+     function tabchange(e: number): void {
+         tabindex.value=e
+    }
+    return {
+      page,
+      tabindex,
+      tabchange
+    };
+  },
+});
+</script>
\ No newline at end of file
diff --git a/src/views/regime/Subscriber.vue b/src/views/regime/Subscriber.vue
new file mode 100644
index 0000000..a26fa70
--- /dev/null
+++ b/src/views/regime/Subscriber.vue
@@ -0,0 +1,374 @@
+<template>
+  <div class="subscriber">
+    <div class="top">
+      <div class="title">我的订阅者（56）</div>
+      <div class="sel">
+        <img src="@/static/images/sousuo.png" alt="" class="icon" />
+        <input type="text" placeholder="请输入想要搜索的学生姓名" />
+      </div>
+    </div>
+    <div class="mid">
+      <div class="studentlist">
+        <div class="stuitem">
+          <img src="" alt="" class="photo" />
+          <div>
+            <div class="info">
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+            </div>
+
+            <div class="info">
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div>参加平台直播课程总时长：<span class="time">350min</span></div>
+            </div>
+          </div>
+        </div>
+          <div class="stuitem">
+          <img src="" alt="" class="photo" />
+          <div>
+            <div class="info">
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+            </div>
+
+            <div class="info">
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div>参加平台直播课程总时长：<span class="time">350min</span></div>
+            </div>
+          </div>
+        </div>
+
+          <div class="stuitem">
+          <img src="" alt="" class="photo" />
+          <div>
+            <div class="info">
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+            </div>
+
+            <div class="info">
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div>参加平台直播课程总时长：<span class="time">350min</span></div>
+            </div>
+          </div>
+        </div>
+
+          <div class="stuitem">
+          <img src="" alt="" class="photo" />
+          <div>
+            <div class="info">
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+            </div>
+
+            <div class="info">
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div>参加平台直播课程总时长：<span class="time">350min</span></div>
+            </div>
+          </div>
+        </div>
+
+          <div class="stuitem">
+          <img src="" alt="" class="photo" />
+          <div>
+            <div class="info">
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+            </div>
+
+            <div class="info">
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div>参加平台直播课程总时长：<span class="time">350min</span></div>
+            </div>
+          </div>
+        </div>
+
+          <div class="stuitem">
+          <img src="" alt="" class="photo" />
+          <div>
+            <div class="info">
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+            </div>
+
+            <div class="info">
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div class="infoitem">
+                <span class="label">姓名:</span>
+                <span>asd</span>
+              </div>
+
+              <div>参加平台直播课程总时长：<span class="time">350min</span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="pages">
+      <a-pagination v-model:current="page" :total="500" :showLessItems="true" />
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.subscriber {
+  width: 100%;
+  // height: 706px;
+  background-color: #fff;
+  border-radius: 17px;
+  // padding: 40px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .top {
+    display: flex;
+    width: 1241px;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 21px;
+    border-bottom: 1px solid #eeeeee;
+    padding-bottom: 6px;
+    .title {
+      font-size: 13px;
+      color: #121212;
+      font-weight: bold;
+    }
+    .sel {
+      width: 171px;
+      height: 26px;
+      border: 1px solid #999;
+      display: flex;
+      align-items: center;
+      // padding: 8px;
+      border-radius: 4px;
+      > img {
+        width: 11px;
+        height: 11px;
+      }
+      > input {
+        width: 119px;
+        font-size: 9px;
+        line-height: 1;
+        margin-left: 6px;
+        border: none;
+        outline: none;
+      }
+    }
+  }
+  .mid {
+    .studentlist {
+      width: 1241px;
+      margin: 0 auto;
+      .stuitem {
+        height: 131px;
+        border-bottom: 1px solid #eeeeee;
+        display: flex;
+        align-items: center;
+        .photo {
+          width: 74px;
+          height: 74px;
+          background: #125cb4;
+          border-radius: 50%;
+        }
+        .info {
+          margin-left: 35px;
+          display: flex;
+          font-size: 12px;
+          color: #121212;
+          line-height: 45px;
+          .infoitem {
+            width: 194px;
+          }
+        }
+
+        .time {
+          color: #08AE98;
+        }
+      }
+    }
+  }
+  .pages {
+    position: absolute;
+    bottom: 114px;
+    display: flex;
+    justify-content: center;
+    ::v-deep(.ant-pagination-next) > .ant-pagination-item-link,
+    ::v-deep(.ant-pagination-prev) > .ant-pagination-item-link,
+    ::v-deep(.ant-pagination-item),
+    ::v-deep(.ant-pagination-jump-next-custom-icon),
+    ::v-deep(.ant-pagination-jump-prev-custom-icon) {
+      border: 1px solid #08ae98;
+    }
+    ::v-deep(.ant-pagination-item-active) a {
+      color: #fff;
+    }
+    ::v-deep(.ant-pagination-item-active) {
+      background-color: #08ae98;
+    }
+  }
+}
+</style>
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+export default defineComponent({
+  name: "Subscriber",
+  components: {},
+  setup() {
+    const page = ref(6);
+    return {
+      page,
+    };
+  },
+});
+</script>
\ No newline at end of file
diff --git a/src/views/regime/Video.vue b/src/views/regime/Video.vue
index cd61c00..eddfa95 100644
--- a/src/views/regime/Video.vue
+++ b/src/views/regime/Video.vue
@@ -1,140 +1,176 @@
 <template>
-    <div class="video">
-        <div class="nav">
-            <div class="tabs">
-                <div class="on">全部视频</div>
-                <div>审核中</div>
-                <div>未通过</div>
-                <div>已发布</div>
-            </div>
-            <div class="sel">
-                <img src="" alt="" class="icon">
-                <input type="text">
-            </div>
-        </div>
-        <div class="list">
-            <VideoItem></VideoItem>
-            <VideoItem></VideoItem>
-            <VideoItem></VideoItem>
-            <VideoItem></VideoItem>
-            <VideoItem></VideoItem>
-            <VideoItem></VideoItem>
-            <VideoItem></VideoItem>
-            <VideoItem></VideoItem>
-            <VideoItem></VideoItem>
-            <VideoItem></VideoItem>
-        </div>
-        <div class="pages">
-            <a-pagination v-model:current="page" :total="500" :showLessItems="true" />
-        </div>
-</div>
+  <div class="video">
+    <div class="nav">
+      <div class="tabs">
+        <div :class="tabindex == 1 ? 'on' : ''" @click="tabchange(1)">全部视频</div>
+        <div :class="tabindex == 2 ? 'on' : ''" @click="tabchange(2)">审核中</div>
+        <div :class="tabindex == 3 ? 'on' : ''" @click="tabchange(3)">未通过</div>
+        <div :class="tabindex == 4 ? 'on' : ''" @click="tabchange(4)">已发布</div>
+      </div>
+      <div class="sel">
+        <img src="@/static/images/sousuo.png" alt="" class="icon" />
+        <input type="text" />
+      </div>
+    </div>
+    <div class="list" v-if="tabindex==1">
+      <VideoItem></VideoItem>
+      <VideoItem></VideoItem>
+      <VideoItem></VideoItem>
+      <VideoItem></VideoItem>
+      <VideoItem></VideoItem>
+      <VideoItem></VideoItem>
+      <VideoItem></VideoItem>
+      <VideoItem></VideoItem>
+      <VideoItem></VideoItem>
+      <VideoItem></VideoItem>
+    </div>
+
+       <div class="list" v-if="tabindex==2">
+      <VideoItem ></VideoItem>
+      <VideoItem></VideoItem>
+      <VideoItem></VideoItem>
+      <VideoItem></VideoItem>
+      <VideoItem></VideoItem>
+      <VideoItem></VideoItem>
+    </div>
+          <div class="list" v-if="tabindex==3">
+      <VideoItem :type="2"></VideoItem>
+      <VideoItem :type="2"></VideoItem>
+      <VideoItem :type="2"></VideoItem>
+      <VideoItem :type="2"></VideoItem>
+    </div>
+        <div class="list" v-if="tabindex==4">
+      <VideoItem :type="3"></VideoItem>
+      <VideoItem :type="3"></VideoItem>
+      <VideoItem :type="3"></VideoItem>
+      <VideoItem :type="3"></VideoItem>
+      <VideoItem  :type="3"></VideoItem>
+      <VideoItem :type="3"></VideoItem>
+ 
+    </div>
+    <div class="pages">
+      <a-pagination v-model:current="page" :total="500" :showLessItems="true" />
+    </div>
+  </div>
 </template>
 <style lang="scss" scoped>
-.video{
-    width: 100%;
-    height: 706px;
-    background-color: #fff;
-    border-radius: 17px;
-    padding: 40px;
-    position: relative;
+.video {
+  width: 100%;
+  height: 706px;
+  background-color: #fff;
+  border-radius: 17px;
+  padding: 40px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .nav {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    .nav{
-        display: flex;
-        align-items: center;
-        border-bottom: 1px solid #eee;
-        justify-content: space-between;
-        width: 100%;
-        .tabs{
-            display: flex;
-            align-items: center;
-            font-size: 13px;
-            font-weight: bold;
-            color: #111;
-            padding: 11px 0;
-            >div{
-                margin-right: 58px;
-            }
-            .on{
-                color: #08AE98;
-                position: relative;
-                &::before{
-                    content: "";
-                    display: block;
-                    position: absolute;
-                    bottom: -12px;
-                    width: 57px;
-                    height: 1px;
-                    background-color: #08AE98;
-                }
-            }
-            
-        }
-        .sel{
-            width: 171px;
-            height: 26px;
-            border: 1px solid #999;
-            display: flex;
-            align-items: center;
-            padding: 8px;
-            border-radius: 4px;
-            >img{
-                width: 11px;
-                height: 11px;
-                
-            }
-            >input{
-                width: 119px;
-                font-size: 9px;
-                line-height: 1;
-                margin-left: 6px;
-                border: none;
-                outline: none;
-            }
+    border-bottom: 1px solid #eee;
+    justify-content: space-between;
+    width: 100%;
+    .tabs {
+      display: flex;
+      align-items: center;
+      font-size: 13px;
+      font-weight: bold;
+      color: #111;
+      padding: 11px 0;
+      > div {
+        margin-right: 58px;
+        cursor: pointer;
+        text-align: center;
+        width: 54px;
+      }
+      .on {
+        color: #08ae98;
+        position: relative;
+        &::before {
+          content: "";
+          display: block;
+          position: absolute;
+          bottom: -12px;
+          width: 57px;
+          height: 1px;
+          background-color: #08ae98;
         }
+      }
     }
-    .list{
-        display: flex;
-        flex-wrap: wrap;
-        width: 100%;
-        >div{
-            margin-top: 28px;
-            margin-left: 23px;
-            &:nth-child(1),&:nth-child(6){
-                margin-left: 0;
-            }
-        }
+    .sel {
+      width: 171px;
+      height: 26px;
+      border: 1px solid #999;
+      display: flex;
+      align-items: center;
+      padding: 8px;
+      border-radius: 4px;
+      > img {
+        width: 11px;
+        height: 11px;
+      }
+      > input {
+        width: 119px;
+        font-size: 9px;
+        line-height: 1;
+        margin-left: 6px;
+        border: none;
+        outline: none;
+      }
     }
-    .pages{
-        position: absolute;
-        bottom:  114px;
-        display: flex;
-        justify-content: center;      
-        ::v-deep(.ant-pagination-next) > .ant-pagination-item-link, ::v-deep(.ant-pagination-prev) > .ant-pagination-item-link, ::v-deep(.ant-pagination-item), ::v-deep(.ant-pagination-jump-next-custom-icon), ::v-deep(.ant-pagination-jump-prev-custom-icon) {
-            border: 1px solid #08AE98;
-        }
-        ::v-deep(.ant-pagination-item-active) a{
-            color: #fff;
-        }
-        ::v-deep(.ant-pagination-item-active) {
-            background-color: #08AE98;
-        }
+  }
+  .list {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    > div {
+      margin-top: 28px;
+      margin-left: 23px;
+      &:nth-child(1),
+      &:nth-child(6) {
+        margin-left: 0;
+      }
     }
+  }
+  .pages {
+    position: absolute;
+    bottom: 114px;
+    display: flex;
+    justify-content: center;
+    ::v-deep(.ant-pagination-next) > .ant-pagination-item-link,
+    ::v-deep(.ant-pagination-prev) > .ant-pagination-item-link,
+    ::v-deep(.ant-pagination-item),
+    ::v-deep(.ant-pagination-jump-next-custom-icon),
+    ::v-deep(.ant-pagination-jump-prev-custom-icon) {
+      border: 1px solid #08ae98;
+    }
+    ::v-deep(.ant-pagination-item-active) a {
+      color: #fff;
+    }
+    ::v-deep(.ant-pagination-item-active) {
+      background-color: #08ae98;
+    }
+  }
 }
 </style>
 <script lang="ts">
-import { defineComponent, ref } from 'vue';
-import VideoItem from "@/components/VideoItem.vue"
+import { defineComponent, ref } from "vue";
+import VideoItem from "@/components/VideoItem.vue";
 export default defineComponent({
-    components:{
-        VideoItem
-    },
-    setup(){
-       const page = ref(6);
-       return {
-           page
-       }
+  components: {
+    VideoItem,
+  },
+  setup() {
+    const page = ref(6);
+    const tabindex = ref(1);
+     function tabchange(e: number): void {
+         tabindex.value=e
     }
-})
+    return {
+      page,
+      tabindex,
+      tabchange
+    };
+  },
+});
 </script>
\ No newline at end of file