直播返修

src/components/LiveCount.vue

@@ -14,10 +14,7 @@
           </div>
         </div>
 
-        <div class="takehour">
+        <div class="cancel">取消直播</div>
-            参加时长 
-            <div>30min</div>
-        </div>
       </div>
 
        <div class="item">
@@ -29,10 +26,7 @@
           </div>
         </div>
 
-        <div class="takehour">
+        <div class="refuse">已拒绝</div>
-            参加时长 
-            <div>30min</div>
-        </div>
       </div>
 
        <div class="item">
@@ -63,48 +57,6 @@
             <div>30min</div>
         </div>
       </div>
-       <div class="item">
-        <div style="display:flex">
-          <img src="" alt="" />
-          <div class="stuinfo">
-            <div>andy</div>
-            <div class="lessonname">英语 A1</div>
-          </div>
-        </div>
-
-        <div class="takehour">
-            参加时长 
-            <div>30min</div>
-        </div>
-      </div>
-       <div class="item">
-        <div style="display:flex">
-          <img src="" alt="" />
-          <div class="stuinfo">
-            <div>andy</div>
-            <div class="lessonname">英语 A1</div>
-          </div>
-        </div>
-
-        <div class="takehour">
-            参加时长 
-            <div>30min</div>
-        </div>
-      </div>
-       <div class="item">
-        <div style="display:flex">
-          <img src="" alt="" />
-          <div class="stuinfo">
-            <div>andy</div>
-            <div class="lessonname">英语 A1</div>
-          </div>
-        </div>
-
-        <div class="takehour">
-            参加时长 
-            <div>30min</div>
-        </div>
-      </div>
       
 
     </div>
@@ -161,6 +113,20 @@
       }
     }
   }
+  .refuse{
+    color: #D22C2E;
+    margin:auto 0;
+  }
+  .cancel{
+    margin:auto 0;
+    width: 57px;
+    height: 23px;
+    border: 1px solid #09AE99;
+    line-height: 23px;
+    text-align: center;
+    color: #09AE99;
+    border-radius: 3px;
+  }
   .button {
     position: absolute;
     width: 260px;
@@ -188,5 +154,10 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
-export default defineComponent({});
+export default defineComponent({
+  setup(){  
+    
+    return{}
+  }
+});
 </script>

src/components/LivePlay.vue

@@ -1,27 +1,27 @@
 <template>
-    <div class="video">
+  <div class="video">
-        <video src=""></video>
+    <video src=""></video>
-    </div>
+  </div>
 </template>
 <style lang="scss" scoped>
-.video{
+.video {
-    width: 797px;
+  width: 976px;
-    height: 449px;
+  height: 563px;
-    border-radius: 17px;
+  border-radius: 18px 18px 0px 0px;
-    background-color: #0f0;
+  background-color: #0f0;
-    overflow: hidden;
+  overflow: hidden;
-    >video{
+  > video {
-        width: 100%;
+    width: 100%;
-        height: 100%;
+    height: 100%;
-    }
+  }
 }
 </style>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 
 export default defineComponent({
-    setup(){
+  setup() {
-        console.log(1)
+    console.log(1);
-    }
+  },
-})
+});
 </script>

src/components/LivePlaying.vue

@@ -0,0 +1,27 @@
+<template>
+    <div class="video">
+        <video src=""></video>
+    </div>
+</template>
+<style lang="scss" scoped>
+.video{
+    width: 797px;
+    height: 449px;
+    border-radius: 17px;
+    background-color: #0f0;
+    // overflow: hidden;
+    >video{
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    setup(){
+        console.log(1)
+    }
+})
+</script>

src/components/LiveingWatcher.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="cont">
+    <div class="title">
+      <div>上课人员</div>
+    
+    </div>
+    <div class="info">
+      <div class="item">
+        <div style="display:flex">
+          <div class="stuinfo">
+            <div>andy</div>
+          </div>
+        </div>
+
+        <div >
+            <img src="@/static/images/watchermanage.png" alt="" class="icons">
+        </div>
+      </div>
+
+       <div class="item">
+        <div style="display:flex">
+          <div class="stuinfo">
+            <div>andy</div>
+          </div>
+        </div>
+
+        <div >
+            <img src="@/static/images/watchermanage.png" alt="" class="icons">
+        </div>
+      </div>
+
+       <div class="item">
+        <div style="display:flex">
+          <div class="stuinfo">
+            <div>andy</div>
+          </div>
+        </div>
+        <div >
+            <img src="@/static/images/watchermanage.png" alt="" class="icons">
+        </div>
+      </div>
+
+       <div class="item">
+        <div style="display:flex">
+          <div class="stuinfo">
+            <div>andy</div>
+          </div>
+        </div>
+
+        <div >
+            <img src="@/static/images/watchermanage.png" alt="" class="icons">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.cont {
+  width: 316px;
+  height: 630px;
+  background-color: #fff;
+  border-radius: 17px;
+  padding: 0 28px;
+  position: relative;
+  overflow: auto;
+  .title {
+    padding: 23px 0 11px 0;
+    font-size: 13px;
+    color: #111;
+    line-height: 1;
+    border-bottom: 1px solid #eee;
+    display: flex;
+    justify-content: space-between;
+    .more {
+      color: #999999;
+      font-size: 11px;
+    }
+  }
+  .info {
+    .item {
+      display: flex;
+      align-content: center;
+      justify-content: space-between;
+    //   margin-top: 23px;
+    height: 80px;
+    line-height: 80px;
+      font-size: 10px;
+      border-bottom: 1px solid #EEEEEE;
+      .icons{
+        width: 61px;
+        height: 23px;
+      }
+      .stuinfo {
+        margin: auto 0;
+        margin-left: 11px;
+        color: #111111;
+        .lessonname {
+          color: #666666;
+        }
+      }
+      .takehour {
+        color: #08ae98;
+        font-size: 11px;
+        margin: auto 0;
+        text-align: center;
+      }
+      > div>img {
+        width: 57px;
+        height: 57px;
+        border-radius: 50%;
+        background-color: #0f0;
+      }
+    }
+  }
+  .button {
+    position: absolute;
+    width: 260px;
+    bottom: 28px;
+    display: flex;
+    justify-content: space-between;
+    > div {
+      width: 114px;
+      height: 23px;
+      border-radius: 3px;
+      font-size: 10px;
+      color: #fff;
+      line-height: 23px;
+      text-align: center;
+    }
+    .modify {
+      background-color: #08ae98;
+    }
+    .del {
+      background-color: #d12c2e;
+    }
+  }
+}
+</style>
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({});
+</script>

src/views/regime/Live.vue

@@ -12,9 +12,9 @@
       </div>
     </div>
     <div class="list" v-if="tabindex==1">
-      <LiveItem></LiveItem>
+      <LiveItem :type="2"></LiveItem>
-      <LiveItem></LiveItem>
+      <LiveItem :type="2"></LiveItem>
-      <LiveItem></LiveItem>
+      <LiveItem :type="2"></LiveItem>
       <LiveItem></LiveItem>
       <LiveItem></LiveItem>
       <LiveItem></LiveItem>

src/views/regime/Livedetail.vue

@@ -2,7 +2,7 @@
   <div class="livedetail">
     <div class="info">
       <div class="liveplay">
-        <VideoPlay></VideoPlay>
+        <liveplay></liveplay>
         <div class="liveinfo">
             <div class="left">
                 <div>
@@ -34,11 +34,13 @@
   width: 1320px;
   height: 563px;
   .info {
+    width: 1321px;
     display: flex;
-    justify-content: space-between;
+    justify-content:center;
     .liveplay {
       background: white;
       border-radius: 18px;
+      margin-right: 29px;
       .liveinfo{
         display: flex;
         justify-content: space-between;
@@ -81,13 +83,13 @@
 </style>
 <script lang="ts">
 import { defineComponent } from "vue";
-import VideoPlay from "@/components/VideoPlay.vue";
+import liveplay from "@/components/LivePlay.vue"
 import LiveCount from "@/components/LiveCount.vue";
 import VideoReview from "@/components/VideoReview.vue";
 export default defineComponent({
   components: {
-    VideoPlay,
     LiveCount,
+    liveplay,
     VideoReview,
   },
   setup() {

src/views/regime/Liveing.vue

@@ -14,9 +14,9 @@
       </div>
     </div>
     <div class="info">
-      <LiveingCount></LiveingCount>
+      <LiveingWatcher></LiveingWatcher>
-      <div class="liveplay">
+      <div class="LivePlaying">
-        <LivePlay></LivePlay>
+        <LivePlaying></LivePlaying>
         <div class="comment">
           <div class="commentitem">
             <span>13:32:30</span>
@@ -94,7 +94,7 @@
   .info {
     display: flex;
     justify-content: space-between;
-    .liveplay {
+    .LivePlaying {
       border-radius: 18px;
       margin: 0 35px;
       .comment {
@@ -191,13 +191,13 @@
 </style>
 <script lang="ts">
 import { defineComponent } from "vue";
-import LivePlay from "@/components/LivePlay.vue";
+import LivePlaying from "@/components/LivePlaying.vue";
-import LiveingCount from "@/components/LiveingCount.vue";
+import LiveingWatcher from "@/components/LiveingWatcher.vue";
 
 export default defineComponent({
   components: {
-    LivePlay,
+    LivePlaying,
-    LiveingCount,
+    LiveingWatcher,
   },
   setup() {
     console.log(1);