From b41c5f694ab52361bf06f1ee1d1c30d318f96ebc Mon Sep 17 00:00:00 2001
From: asd <374367073@qq.com>
Date: Fri, 9 Oct 2020 09:44:56 +0800
Subject: [PATCH 1/2] =?UTF-8?q?hansu=E7=9A=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 yarn.lock | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 2441fda..333a90c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,10 +2,10 @@
 # yarn lockfile v1
 
 
-"@ant-design-vue/use@^0.0.1-0":
+"@ant-design-vue/use@^0.0.1-0", "@ant-design-vue/use@^0.0.1-alpha.6":
   version "0.0.1-alpha.6"
-  resolved "https://registry.npm.taobao.org/@ant-design-vue/use/download/@ant-design-vue/use-0.0.1-alpha.6.tgz?cache=0&sync_timestamp=1601012720849&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40ant-design-vue%2Fuse%2Fdownload%2F%40ant-design-vue%2Fuse-0.0.1-alpha.6.tgz#eafce73abcc7d2736dcbfff1e396c69b84b9e840"
-  integrity sha1-6vznOrzH0nNty//x45bGm4S56EA=
+  resolved "https://registry.yarnpkg.com/@ant-design-vue/use/-/use-0.0.1-alpha.6.tgz#eafce73abcc7d2736dcbfff1e396c69b84b9e840"
+  integrity sha512-vyLeiVbi4KdCvkRhHFGyYhe2bZ6y0RJupw7+bdCGRrx4oHb/Rsm8MTqs8Nl1k0lX9qQIvNAoa6Rxf3FQH6nI7g==
   dependencies:
     "@vue/runtime-dom" "^3.0.0-rc.1"
     async-validator "^3.4.0"

From 598b1f8112efecc367cda4e75f735280392e9cbb Mon Sep 17 00:00:00 2001
From: asd <374367073@qq.com>
Date: Sat, 10 Oct 2020 09:01:16 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E7=9B=B4=E6=92=AD=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LiveItem.vue      | 146 ++++++++++++
 src/components/VideoItem.vue     |  32 ++-
 src/router/index.ts              |   8 +
 src/static/images/play.png       | Bin 0 -> 1354 bytes
 src/static/images/share.png      | Bin 0 -> 376 bytes
 src/static/images/sousuo.png     | Bin 0 -> 543 bytes
 src/static/images/studentnum.png | Bin 0 -> 719 bytes
 src/static/images/watch.png      | Bin 0 -> 812 bytes
 src/views/regime/Live.vue        | 166 ++++++++++++++
 src/views/regime/Subscriber.vue  | 374 +++++++++++++++++++++++++++++++
 src/views/regime/Video.vue       | 286 ++++++++++++-----------
 11 files changed, 880 insertions(+), 132 deletions(-)
 create mode 100644 src/components/LiveItem.vue
 create mode 100644 src/static/images/play.png
 create mode 100644 src/static/images/share.png
 create mode 100644 src/static/images/sousuo.png
 create mode 100644 src/static/images/studentnum.png
 create mode 100644 src/static/images/watch.png
 create mode 100644 src/views/regime/Live.vue
 create mode 100644 src/views/regime/Subscriber.vue

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 0000000000000000000000000000000000000000..292d675e5778ec82b8ad43ab3d77fe75ab683cc6
GIT binary patch
literal 1354
zcmV-Q1-1H#P)<h;3K|Lk000e1NJLTq001EX001Ef1^@s6SLDKP000FMNkl<ZSVy&(
zTTEP46o$VILxG`4qu9$pDTP9<Rk280ZEf^HYi*3T#GpZ=eeqh2@gAl17VkEV`e3R}
zjK*jhjW?2-n8xS}kyK-B5sOiamuLwUER?pxnRB-J&zytPVP+UgTnS|0oW1wI|Fzb?
z)*3?|X01ILr~y_3=K@QBYM=}-z!Bgtpcm)@I)R^o0b`7v><Dd;)vUEMfzyFjU>z_!
zIJg)nNL#4G;=m{{1bhL!1AJ?Y`6t&o89`WU^?%)b1JDM<faqj5N_#Fq{lJI7HsD8N
zjGJkX2_USsg+L4N2yh`#KE=b+Uq1?b4Lk*WZj5o#UpNkgwN@1C;AenlATmt=;c^f7
z0eBSnBpt{&h`<HQftP?48GJrnJc^lpzyrXisjf){Q472btOw+h38q~v)=vlH|DLjG
zi`~G@z@9L3{GF_|^7}o&z1d<QnP&o!JUspHDZo*{z6CsNj5(-vCdCbJ1B-&ZKW@*|
zM0c&+3lUQg07(kP6iu3PJJ2Dw2!w>F9k>-JP2Wra!b1kej<MswemoDZoKr(hskG{Z
zSW&8e1l(qf84w6%fmk>#8w&#AS<Bt~x_G^>hlJ;`psa!?8qeXHxwRA(By}rfEKg>B
z2d<O43dBa>G2oPJ!Kh7-x(QZ(wUh2c2PrBn#Iqief<jv7E#%3DW~z&$7-Rgv_5D1#
zlSY7NfmZ}VEL@$*72)j!BJR30b$-lGqr*faMG9u(UQz((7f0E$WF?oLTE&cjl{`Rb
zaR;zbAf#r?vgtw?6OQMxyt9Mu!$Xutiu`-(nQJYMm!Jg0_0^5E*EbO>F7;W-!@d^*
z0wH}@VajMBh=lc6(b>VCk^ex13zDpOBwUBOXgRN*v6_o2WBIt`R~1KrkZ)8i^8&GV
zWQdZ0iSz}I=Ms0~%q@<xz3BqhRaW_o<ly8F;3k1M9F*s2gYX**Cr-i{<BmmV^TOg5
zN(z(ZCkqgP*dP!CKxMv6WO9cez*ZUL;5x^MMJw2T)*9AUR#A|fiQj;01>!s4%xqxu
zi3tU#V#aYC8p_Jqx^xw5D`VrTn!_C`Xjciud%$HtNiLnp6qo`y=D9eoi(0L=`HgI<
zZ=$B8ET8O<{(q)oCJ^@n4*`<z2^KPO#7+1q+B<s4*9kv0T^ARRn&L7xH#E~aua;<G
zWL!CO#DX5F4crR6C=llbRjodkY!5nd)^zQpXRsd=De_;HTwgwC0naUNVPWaa@!O}?
zn;cr9B6cINOCY2XPXjjqGtw8Oiq(U?yV>^3UcYw4%4X5txQw<~9VG=B+mBpYC0Fe7
zGsBoa1tM(e-Uyo8tc!=7G2TDW=hu<-v#Y5qE%&4U1bPeg5%&S_8e_)7re;=9#MJTR
zEa!>^Rn!x#oVuWDhC1-Oj4^UaQbU5qMy32UVAcQ7Uydt0&;#7!m+)XPO6@V_mP>#w
z*?NmS3ese+^Z}cJ9dbkXa(c_Ju)hL$JOGkDWleTSF5#6rJ`cQUj8S@yTc+VhKrRM0
z1tnfOG#%5hqZw5IK1c_URZD^?Y$<SOFajuzr#c8J4F`cQgIT64)de}3NPTFnRm*pN
zpdlKFDuRleO&D~rCiG#TI~a&1&HcuhWSgGBCT)KLRs=@lfJQ`t(P#A_As8K?nR7qz
zO)!zGYx+Ce?ek`0f_f&0q>}<R#EO1&5%nbcIzRy@7KZcrULxH8Uy=IosE*=ZIRF3v
M07*qoM6N<$f<TvS+5i9m

literal 0
HcmV?d00001

diff --git a/src/static/images/share.png b/src/static/images/share.png
new file mode 100644
index 0000000000000000000000000000000000000000..c486549ee7119ecbf86da18bfc12e905823b9cca
GIT binary patch
literal 376
zcmV-;0f+vHP)<h;3K|Lk000e1NJLTq000mG000mO1^@s6AM^iV0003$Nkl<ZI8U9E
zy-EW?6ot>t4>P5ISo;<h3O<2KcEwTzl}yA&!NNkY5VTMb{K<|A_F`ty2M87lg3sU^
zSXk~B?vVr*jLEL6)6LACk8{qQE7~<50hvMndX79Zjoa%HRr!1qaHzk8ZP6|ufP}<@
zl<<)jF~Mu>n+sT5RpZHlKt{WF3Ck2&6hL*hT>!~e>^Bw$sOUW+MLT;1!3uzP0As0w
zAo5Hj7tnbeS_@zeB6|QQKr9yqs4zGeVjY70sAhI`7~B*Fs8;h-L^c39jJ*0zM`>Yz
za>20xTLg|`&uphQwF{OA%;#FD-knXBOO+Q2PU4!`9F$Rh2HoH;ry{TZlofE{5Pt%6
z%dS%B{~z#|E)0@ixC>d{djJGn>>2;pul%h*IeRbQT;?$4!AJ}XFbkk0IpbVF5ZhlP
Ww67)XiH`>W0000<MNUMnLSTX)ahNUu

literal 0
HcmV?d00001

diff --git a/src/static/images/sousuo.png b/src/static/images/sousuo.png
new file mode 100644
index 0000000000000000000000000000000000000000..f8a61fbcee16ee136edb41a87eab4ae73cc039b4
GIT binary patch
literal 543
zcmV+)0^t3LP)<h;3K|Lk000e1NJLTq000mG000pP1^@s6)UPbW0005zNkl<ZI8UY1
zy^9k;7zXg?ogjJ;i-?7+%@Gj)fb&4m#_ALVyPTq+f;TgpMo6O;-Wn_{#OMiTKOn+2
z9wwlktppJpu@XT%5wS}dt3;4w9@*d?xqx>;rx;jx=QlI&JS+ImA>-@AFq~CNT?KFo
zK#}A?L^eo1bIv^~m&-pU_uB-*Ff>Z32LN6>=hj5zGk{%6sUswp030BB-dg)=92o&|
z92)@l09-J}yqMf22m<AK-ZFseBC?>hev{Qmy<RWoa=A|=&suBOw`)lhMRx%#_WS+A
zl}hDjS}Rc$Jrt3mG3NA6{S1O&kLP*cMC7K{`tb;e<M=DdWozx)PQah*-Uo2d7*onl
zFjPv-X{|p@30xs*thMvm34S@}j{Cm<eo7#1_+?|v(G2)VGP2gzrvZ{A2}#ZvV=iUD
zEdXaaoz7gfT6NnYjYebdU@-XZoLlmJ|9J-NC%GXaE5?}He*>D$X0F@qJ^^s3-EPmf
zTCL#-NT(!87D&DXu+r=Gg6xeaVt!01^%lT2V@#Td(b$Y~9LFa}u8PQRlItS!#W|No
zd0(MWxKS#VhEWtPipVO-i`LqwTY&VVR;$hA^Z9cmPXd?)kf!aO);f(a)0#<S%ilQ7
hD@-E)1dJhfegj3~;o3{Jr$GP!002ovPDHLkV1j7d^}YZA

literal 0
HcmV?d00001

diff --git a/src/static/images/studentnum.png b/src/static/images/studentnum.png
new file mode 100644
index 0000000000000000000000000000000000000000..fe9346b1ba641724acb7c22f9dfb53874839e80a
GIT binary patch
literal 719
zcmV;=0x<oFP)<h;3K|Lk000e1NJLTq000vJ000mO1^@s6^u$DB0007(Nkl<ZI8TL>
zNoZ416o&u*z9dBy95&X9g2PVTh${yW5fKHOmuf^%Q6w)-Ed>izRIm=Xa{#3^uXO@N
zG}7c%s~|1}#R(k1VPjDg5pm@VwrTD!iD;Wv+OxaoocrDXoO2H`*gE{VG~5ShF@zAv
zhmt*rSnbUrxq}=mI|r>xDboeug&gNRta=H#5SGX>9#$nz4F~LpT|ZXAo{BdB?khij
zE#mRQ-;1WxKP0O<{mRcoBs`xEH%Yc0ZtCqoct0$gUQY6w@^&iXsSjle{yg+iz#d4C
zNuDdl^(8VJn>YXZo7)e|`SlcbDVD7IUn$I`Z<FScje3o^(mss^+bt=MSZ#JFth0SR
zt!-09&v>k8=ot)T&hIWNvQck;F~)5Aql`I#sMk6amT9SEIP^|5O^7CrmBBjvm2_}b
zh5S6!)IUMCWg$)Ij=%+odiRFH0GQ79W)<viIc!Fs&Vu<~IFT5oLxRa5nn;*j+hIYq
z0Po86mi>PKMQ?{ci3WE-%qUYPd{%*ru-bcRg0?e~tp+$&z)8ICX+XoDwhS1+i5kM3
z2GC2xixzn5h<&1F$!Z;diT_&Q`(ada3#~l@nQMx9Yx-dwt*dC9EP)Hwgtnr3%l9&6
zndXQIPu?qPr^E)h-tkgANUtE+rGl+NO)5v^j*cTnzan(Qy2%a0{csbc_etC#U>4lu
z>ynzl?}8MPTf3YH+ICRdt~{nAp8PuO{$(-_!(X10xMic>)>3Y#pQ6P<xycD+&VNAi
z@xS0m+Z_1YC^X7VPAR44O1-`$HyJ9zeh5s#^-3!;qFrv8&v59jzI_{mjZHt1X^sF@
zql#6LfiLwHT&%7OMg*0b?$06cOf;3KPJ9}8=Qo5<9w5}4Z6yEz002ovPDHLkV1kFl
BN^$@I

literal 0
HcmV?d00001

diff --git a/src/static/images/watch.png b/src/static/images/watch.png
new file mode 100644
index 0000000000000000000000000000000000000000..9dce230544b58ddbe6a9f85254ac7850ea4abbf0
GIT binary patch
literal 812
zcmV+{1JnG8P)<h;3K|Lk000e1NJLTq000vJ000mO1^@s6^u$DB0008>Nkl<ZI8SX<
zO=whC7(M4Dop~EIQ5RNMVzG;gh-kEnLXnnkRLFZKltQZsg72kq(@nLL5J%HM7bVc2
zycd6xR3gHVdDGS?S+&xI6<s-Qs#vHXC7Y^6ko(5WJ7tE>n@RLrUA}wHx!=9t`7ZIQ
zh`w8wO{{)eJOFSTfHeUA1#nlum3XOr3cW`kucUHiB3lfPgBm5c8o(n7w@Ez_*h!!Z
zz$Vp&lU(c!eBa7%iv2p$Za?1e1IUjc-GGIh>GrR$Jj{-QeE>%RybWU3yjXh#y}i{M
zE)~l}!HfkShLktu#nZ^=lNum9H}Rgxog~Y#<1N(1M@B4r`-W2>hZA7B;&}b3m>mWE
z052p;aus)AtWk{}g;N0fn$@Xby1frUs+P+{LC&gGDfJoGpCL-)9k%QT5^uz=cd$Xs
zM3X%hRDg6I)U3oqBnKPB1}<9+=Sl1_&nsJ)iGmXZ^VHH-;|@Mdt15*HkZj}l@212k
zxJGc5alCg@T;bczYJcqyQNzp@!~3*&({vyEr1i1wV)#hVc<lOLr($z~4~t{5<8>~>
zM&YcWUCc(|Jp#9k<9)mgPzoO=!bHXKzG}JBaS|iO@zyWL2A3r6WF`tfCvck7o2J|U
zt4R!g0<kH+v)EPdtVFvs`5Po-T>t&_nm?c0tQXaLP?96AeY4s&nLh>Gj2-VlD)!^q
z511qig61vha$>bPl-#6Rbt^reMk%foUZuF(JdfX~`^+u|M?g*|&``zkzie7#aum=P
z4L=GTkDX(mr5!JYLzZv`z+vNf7h6mlPFXciNoP!X@l?aKnYpuXSypvNlIU*b&_KCq
z+Sl_Sh9q2wUGM0!2|%IHX1Dz_4YJmV-%(u}Ha&yC0H_=E|Dat8_d%$Q(_RP{O?7Sm
zOXJjhgGnFK7=aEze@nbY;HiKPQe6Ny3U~_OWbAlhYgb?THR_x56P?+L)kk1IpzQ!x
q0eS|oEa*y{(G2zvJZTlGt^Wgrtx#|(&Akl(0000<MNUMnLSTaV1bQX_

literal 0
HcmV?d00001

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