From be094d44f490ef19384d3dbd564720366649c349 Mon Sep 17 00:00:00 2001
From: asd <374367073@qq.com>
Date: Sat, 10 Oct 2020 15:31:18 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=B4=E6=92=AD=E8=BF=94=E4=BF=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/LiveCount.vue        |  73 +++++---------
 src/components/LivePlay.vue         |  36 +++----
 src/components/LivePlaying.vue      |  27 ++++++
 src/components/LiveingWatcher.vue   | 143 ++++++++++++++++++++++++++++
 src/static/images/watchermanage.png | Bin 0 -> 3196 bytes
 src/views/regime/Live.vue           |   6 +-
 src/views/regime/Livedetail.vue     |  10 +-
 src/views/regime/Liveing.vue        |  16 ++--
 8 files changed, 227 insertions(+), 84 deletions(-)
 create mode 100644 src/components/LivePlaying.vue
 create mode 100644 src/components/LiveingWatcher.vue
 create mode 100644 src/static/images/watchermanage.png

diff --git a/src/components/LiveCount.vue b/src/components/LiveCount.vue
index b3dd201..2f7c36f 100644
--- a/src/components/LiveCount.vue
+++ b/src/components/LiveCount.vue
@@ -14,10 +14,7 @@
           </div>
         </div>
 
-        <div class="takehour">
-            参加时长 
-            <div>30min</div>
-        </div>
+        <div class="cancel">取消直播</div>
       </div>
 
        <div class="item">
@@ -29,10 +26,7 @@
           </div>
         </div>
 
-        <div class="takehour">
-            参加时长 
-            <div>30min</div>
-        </div>
+        <div class="refuse">已拒绝</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>
\ No newline at end of file
diff --git a/src/components/LivePlay.vue b/src/components/LivePlay.vue
index 56cd295..adf5b6f 100644
--- a/src/components/LivePlay.vue
+++ b/src/components/LivePlay.vue
@@ -1,27 +1,27 @@
 <template>
-    <div class="video">
-        <video src=""></video>
-    </div>
+  <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%;
-    }
+.video {
+  width: 976px;
+  height: 563px;
+  border-radius: 18px 18px 0px 0px;
+  background-color: #0f0;
+  overflow: hidden;
+  > video {
+    width: 100%;
+    height: 100%;
+  }
 }
 </style>
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { defineComponent } from "vue";
 
 export default defineComponent({
-    setup(){
-        console.log(1)
-    }
-})
+  setup() {
+    console.log(1);
+  },
+});
 </script>
\ No newline at end of file
diff --git a/src/components/LivePlaying.vue b/src/components/LivePlaying.vue
new file mode 100644
index 0000000..8d782d5
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/LiveingWatcher.vue b/src/components/LiveingWatcher.vue
new file mode 100644
index 0000000..b137a1b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/static/images/watchermanage.png b/src/static/images/watchermanage.png
new file mode 100644
index 0000000000000000000000000000000000000000..dd1b5c251f6a3d1409c67fb28aec64d1b4e2000a
GIT binary patch
literal 3196
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

literal 0
HcmV?d00001

diff --git a/src/views/regime/Live.vue b/src/views/regime/Live.vue
index 97fecf3..65d8f94 100644
--- a/src/views/regime/Live.vue
+++ b/src/views/regime/Live.vue
@@ -12,9 +12,9 @@
       </div>
     </div>
     <div class="list" v-if="tabindex==1">
-      <LiveItem></LiveItem>
-      <LiveItem></LiveItem>
-      <LiveItem></LiveItem>
+      <LiveItem :type="2"></LiveItem>
+      <LiveItem :type="2"></LiveItem>
+      <LiveItem :type="2"></LiveItem>
       <LiveItem></LiveItem>
       <LiveItem></LiveItem>
       <LiveItem></LiveItem>
diff --git a/src/views/regime/Livedetail.vue b/src/views/regime/Livedetail.vue
index 545c14a..440ff4e 100644
--- a/src/views/regime/Livedetail.vue
+++ b/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() {
diff --git a/src/views/regime/Liveing.vue b/src/views/regime/Liveing.vue
index 7d04afe..7a6125f 100644
--- a/src/views/regime/Liveing.vue
+++ b/src/views/regime/Liveing.vue
@@ -14,9 +14,9 @@
       </div>
     </div>
     <div class="info">
-      <LiveingCount></LiveingCount>
-      <div class="liveplay">
-        <LivePlay></LivePlay>
+      <LiveingWatcher></LiveingWatcher>
+      <div class="LivePlaying">
+        <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 LiveingCount from "@/components/LiveingCount.vue";
+import LivePlaying from "@/components/LivePlaying.vue";
+import LiveingWatcher from "@/components/LiveingWatcher.vue";
 
 export default defineComponent({
   components: {
-    LivePlay,
-    LiveingCount,
+    LivePlaying,
+    LiveingWatcher,
   },
   setup() {
     console.log(1);