From 3d7070b8d72ac2ed65a34c606bba33ea6d686025 Mon Sep 17 00:00:00 2001
From: asd <374367073@qq.com>
Date: Wed, 14 Oct 2020 08:57:57 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=B4=E6=92=AD=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/index.ts                  |  49 +-
 src/components/LiveItem.vue       |  41 +-
 src/types/index.d.ts              |  27 +
 src/views/mine/ReleaseWebcast.vue | 901 ++++++++++++++++++------------
 src/views/regime/Live.vue         |  24 +-
 5 files changed, 628 insertions(+), 414 deletions(-)

diff --git a/src/api/index.ts b/src/api/index.ts
index abab7b9..f6c0134 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,6 +1,6 @@
 import router from '@/router';
 import store from '@/store';
-import { LoginData, UserInfo } from '@/types';
+import { LiveList, LoginData, UserInfo } from '@/types';
 import { saveValue } from '@/utils/common';
 import { message } from 'ant-design-vue';
 import { get, post, setToken } from './base'
@@ -132,35 +132,12 @@ export async function getvideolist() {
  * 直播列表
  */
 
-interface LiveList {
-    liveid: number;
-    memberid: number;
-    title: string;
-    img: string;
-    fileid: string;
-    fileurl: string;
-    fileduration: string;
-    vodurl: string;
-    vodid: string;
-    vodduration: string;
-    dateline: string;
-    livetime: number;
-    livenumber: number;
-    status: number;
-    livestatus: number;
-    students: string;
-    desc: string;
-    deleted_at: null;
-    created_at: string;
-    updated_at: string;
-    statusname: string;
-    starttime: string;
-    begin: number;
-}
 
-export async function getlivelist() {
-    const res = await get<Array<LiveList>>('live');
-    console.log(res);
+
+export async function getlivelist(data?:any) {
+    const res = await get<Array<LiveList>>('live',data);
+    // console.log(res);
+    return res.data
 }
 
 /**
@@ -181,4 +158,16 @@ export async function getstatisticlist() {
         videoInfo:res.data?.videoInfo,
         studentInfo:res.data?.studentInfo
     }
-}
\ No newline at end of file
+}
+
+/**
+ * 发布直播
+ */
+interface Liveaddrule{
+    code:number,
+    msg:string
+ }
+ export async function liveadd(data:any) {
+    const res = await post<Liveaddrule>('live',data);
+    console.log(res)
+ }
\ No newline at end of file
diff --git a/src/components/LiveItem.vue b/src/components/LiveItem.vue
index dc886ea..9875590 100644
--- a/src/components/LiveItem.vue
+++ b/src/components/LiveItem.vue
@@ -1,34 +1,34 @@
 <template>
     <div class="videoitem" @click="navto()">
-        <img src="" alt="" class="cover">
+        <img :src="img" alt="" class="cover">
         <img src="@/static/images/play.png" alt="" class="play">
         <div class="title">
-            sadghaskghdfjkaghjkfha
-            <span class="lv">7.3分</span>
+            {{title}}
+            <span class="lv">{{score}}分</span>
         </div>
         <div class="info">
             <div class="datetime">
-                <span>2020-09-11</span>
-                <span class="time">09:30</span>
+                <span>{{date.split(" ")[0]}}</span>
+                <span class="time">{{date.split(" ")[1]}}</span>
             </div>
             <div class="feature">
                 <div>
                     <img src="@/static/images/shijian.png" alt="">
-                    <span>123</span>
+                    <span>{{takehour}}</span>
                 </div>
                 <div>
                     <img src="@/static/images/studentnum.png" alt="">
-                    <span>3</span>
+                    <span>{{livenum}}</span>
                 </div>
             </div>
         </div>
-        <div class="state audit" v-if="type==1">
+        <div class="state audit" v-if="status==0">
             还未开始
         </div>
-         <div class="state live" v-if="type==2">
+         <div class="state live" v-if="status==1">
             进入直播
         </div>
-         <div class="state over" v-if="type==3">
+         <div class="state over" v-if="status==2">
              查看回放
         </div>
     </div>
@@ -141,6 +141,27 @@ export default defineComponent({
         type: {
             type: Number,
             default:1
+        },
+        img:{
+            type:String
+        },
+        title:{
+            type:String
+        },
+        score:{
+            type:Number
+        },
+        date:{
+            type:String
+        },
+        takehour:{
+            type:String
+        },
+        livenum:{
+            type:Number
+        },
+        status:{
+            type:Number
         }
     },
     setup(props){
diff --git a/src/types/index.d.ts b/src/types/index.d.ts
index 8ec11b2..a1a0097 100644
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@@ -60,4 +60,31 @@ export interface UserInfo {
     video: string;
     desc: string;
     money: string;
+}
+
+
+export interface LiveList {
+    liveid: number;
+    memberid: number;
+    title: string;
+    img: string;
+    fileid: string;
+    fileurl: string;
+    fileduration: string;
+    vodurl: string;
+    vodid: string;
+    vodduration: string;
+    dateline: string;
+    livetime: number;
+    livenumber: number;
+    status: number;
+    livestatus: number;
+    students: string;
+    desc: string;
+    deleted_at: null;
+    created_at: string;
+    updated_at: string;
+    statusname: string;
+    starttime: string;
+    begin: number;
 }
\ No newline at end of file
diff --git a/src/views/mine/ReleaseWebcast.vue b/src/views/mine/ReleaseWebcast.vue
index 4ea2d54..c657ee0 100644
--- a/src/views/mine/ReleaseWebcast.vue
+++ b/src/views/mine/ReleaseWebcast.vue
@@ -1,379 +1,560 @@
 <template>
-    <div class="webcast">
-        <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
-            <div class="title">直播信息</div>
-            <a-form-item label="直播标题">
-                <a-input size="small" v-model:value="form.title" placeholder="请输入您的直播标题" />
-            </a-form-item>
-            <a-form-item label="直播封面" class="item-cover">
-                <a-upload
-                    list-type="picture"
-                    @change="coverChange"
-                    action="//jsonplaceholder.typicode.com/posts/"
-                >
-                    <div class="upload-image" v-if="!viewCover">
-                        <PlusOutlined style="fontSize: 22px;" />
-                    </div>
-                    <div class="preview-image" v-else>
-                        <img style="width: 100%" :src="previewImage" />
-                    </div>
-                </a-upload>
-            </a-form-item>
-            <a-form-item label="视频介绍" class="video-introduction">
-                <a-upload
-                    list-type="picture"
-                    action="//jsonplaceholder.typicode.com/posts/"
-                >
-                    <div class="upload-image">
-                        <PlaySquareOutlined style="fontSize: 22px;" />
-                    </div>
-                </a-upload>
-                <div class="demand">
-                    <p class="one-line-hide">视频要求：</p>
-                    <p class="one-line-hide"> 1.上传视频时间要求为30s之内</p>
-                    <p class="one-line-hide">2.支持文件大小100M</p>
-                    <p class="one-line-hide">3.文件扩展名：fiv、mp4…文件扩展名：fiv、mp4…</p>
-                </div>
-            </a-form-item>
-            <a-form-item label="开始时间">
-                <a-input size="small" v-model:value="form.startTime" placeholder="请设置您的开始时间" />
-            </a-form-item>
-            <a-form-item label="直播时长" class="duration" v-bind="validateInfos.duration">
-                <a-input size="small" v-model:value="form.duration" placeholder="请输入直播时间" />
-                <span class="unit">分钟</span>
-            </a-form-item>
-            <a-form-item label="直播人数" v-bind="validateInfos.number">
-                <a-input size="small" v-model:value="form.number" placeholder="请输入直播人数" />
-            </a-form-item>
-            <a-form-item label="直播简介" class="brief">
-                <a-textarea v-model:value="form.brief" :autoSize="true" class="brief-textarea" :maxlength="200" placeholder="请输入您的直播简介" />
-                <span class="words-number">{{ form.brief.length }}/200</span>
-            </a-form-item>
-            <a-form-item :wrapper-col="{ span: 4, offset: 0 }">
-                <a-button @click="onSubmit">发布直播</a-button>
-            </a-form-item>
-        </a-form>
-        <div class="modal-container">
-            <a-modal
-                centered
-                :footer="null"
-                :getContainer="modalNode"
-                dialogClass="modal-dialog"
-                v-model:visible="isEntitled"
-                @cancel="hideNoticeModal"
-            >
-                <template v-slot:closeIcon>
-                    <img src="@/static/images/delete.png" class="close" />
-                </template>
-                <div class="notice-container report" v-if="0">
-                    <div class="title">您尚未获得直播资格</div>
-                    <div class="title sub-title">您被 学生XXX<span class="red">举报，发生违规行为</span>,如有疑问，点击反馈</div>
-                    <div class="confirm-btn">意见反馈</div>
-                </div>
-                <div class="notice-container" v-else>
-                    <div class="title">您尚未获得直播资格</div>
-                    <div class="title sub-title">上一周/月您在平台视频点击量为 <span class="red">第24名</span>，要在前 <span class="bule">20名</span> 才能获得直播资格</div>
-                    <rank-list></rank-list>
-                </div>
-            </a-modal>
+  <div class="webcast">
+    <a-form :label-col="labelCol" :wrapper-col="wrapperCol">
+      <div class="title">直播信息</div>
+      <a-form-item label="直播标题">
+        <a-input
+          size="small"
+          v-model:value="form.title"
+          placeholder="请输入您的直播标题"
+        />
+      </a-form-item>
+      <a-form-item label="直播封面" class="item-cover">
+        <a-upload list-type="picture" :customRequest="uploadspic">
+          <div class="upload-image" v-if="!viewCover && form.img.length == 0">
+            <PlusOutlined
+              style="fontsize: 22px"
+              v-if="uploadpicprogress == 0"
+            />
+            <a-progress
+              type="circle"
+              :percent="uploadpicprogress"
+              :width="80"
+              v-else
+            />
+          </div>
+          <div class="upload-image" v-else>
+            <img style="width: 100%; height: 100%" :src="form.img" />
+          </div>
+        </a-upload>
+      </a-form-item>
+      <a-form-item label="视频介绍" class="video-introduction">
+        <a-upload list-type="picture" :customRequest="uploads">
+          <div class="upload-image" v-if="form.fileurl.length == 0">
+            <PlaySquareOutlined
+              style="fontsize: 22px"
+              v-if="uploadprogress == 0"
+            />
+            <a-progress
+              type="circle"
+              :percent="uploadprogress"
+              :width="80"
+              v-else
+            />
+            <video style="display: none" :src="videofile"></video>
+          </div>
+          <div
+            class="upload-image upload"
+            style="position: relative"
+            v-show="form.fileurl.length != 0"
+          >
+            <video
+              :src="form.fileurl"
+              :ref="
+                (el) => {
+                  videos[0] = el;
+                }
+              "
+              class="upload"
+            ></video>
+            <!-- <a-progress type="circle" :percent="100" :width="80" style="position:absolute;right:35%"/> -->
+          </div>
+        </a-upload>
+        <div class="demand">
+          <p class="one-line-hide">视频要求：</p>
+          <p class="one-line-hide">1.上传视频时间要求为30s之内</p>
+          <p class="one-line-hide">2.支持文件大小100M</p>
+          <p class="one-line-hide">
+            3.文件扩展名：fiv、mp4…文件扩展名：fiv、mp4…
+          </p>
         </div>
-        <nav-bottom></nav-bottom>
+      </a-form-item>
+      <a-form-item label="开始时间">
+        <!-- <a-input
+          size="small"
+          v-model:value="form.startTime"
+          placeholder="请设置您的开始时间"
+        /> -->
+        <a-date-picker @change="startchange" placeholder="请设置您的开始时间" />
+      </a-form-item>
+      <a-form-item
+        label="直播时长"
+        class="duration"
+        v-bind="validateInfos.livetime"
+      >
+        <a-input
+          size="small"
+          v-model:value="form.livetime"
+          placeholder="请输入直播时间"
+        />
+        <span class="unit">分钟</span>
+      </a-form-item>
+      <a-form-item label="直播人数" v-bind="validateInfos.livenumber">
+        <a-input
+          size="small"
+          v-model:value="form.livenumber"
+          placeholder="请输入直播人数"
+        />
+      </a-form-item>
+      <a-form-item label="直播简介" class="brief">
+        <a-textarea
+          v-model:value="form.desc"
+          :autoSize="true"
+          class="brief-textarea"
+          :maxlength="200"
+          placeholder="请输入您的直播简介"
+        />
+        <span class="words-number">{{ form.desc.length }}/200</span>
+      </a-form-item>
+      <a-form-item :wrapper-col="{ span: 4, offset: 0 }">
+        <a-button @click="onSubmit">发布直播</a-button>
+      </a-form-item>
+    </a-form>
+    <div class="modal-container">
+      <a-modal
+        centered
+        :footer="null"
+        :getContainer="modalNode"
+        dialogClass="modal-dialog"
+        v-model:visible="isEntitled"
+        @cancel="hideNoticeModal"
+      >
+        <template v-slot:closeIcon>
+          <img src="@/static/images/delete.png" class="close" />
+        </template>
+        <div class="notice-container report" v-if="0">
+          <div class="title">您尚未获得直播资格</div>
+          <div class="title sub-title">
+            您被 学生XXX<span class="red">举报，发生违规行为</span
+            >,如有疑问，点击反馈
+          </div>
+          <div class="confirm-btn">意见反馈</div>
+        </div>
+        <div class="notice-container" v-else>
+          <div class="title">您尚未获得直播资格</div>
+          <div class="title sub-title">
+            上一周/月您在平台视频点击量为
+            <span class="red">第24名</span>，要在前
+            <span class="bule">20名</span> 才能获得直播资格
+          </div>
+          <rank-list></rank-list>
+        </div>
+      </a-modal>
     </div>
+    <nav-bottom></nav-bottom>
+  </div>
 </template>
 <script lang="ts">
-import { defineComponent, reactive, Ref, ref, toRaw } from 'vue';
-import { PlaySquareOutlined, PlusOutlined } from '@ant-design/icons-vue';
-import { useForm } from '@ant-design-vue/use';
-import NavBottom from '@/components/NavBottom.vue';
-import RankList from './RankList.vue';
-import { previewCover } from '@/utils/common';
-import { FromSend, ImgInfo } from "@/types/index"
+import {
+  defineComponent,
+  onBeforeUpdate,
+  onMounted,
+  reactive,
+  Ref,
+  ref,
+  toRaw,
+} from "vue";
+import { PlaySquareOutlined, PlusOutlined } from "@ant-design/icons-vue";
+import { useForm } from "@ant-design-vue/use";
+import NavBottom from "@/components/NavBottom.vue";
+import RankList from "./RankList.vue";
+import { previewCover } from "@/utils/common";
+import { FromSend, ImgInfo } from "@/types/index";
+import { uploadflie } from "@/utils/vod";
+import { liveadd } from "@/api";
 
 export default defineComponent({
-    name: 'ReleaseWebcast',
-    components: {
-        PlaySquareOutlined,
-        PlusOutlined,
-        NavBottom,
-        RankList,
-    },
-    setup() {
-        // 表单数据
-        const form = reactive({
-            title: '',
-            cover: '',
-            introduction: '',
-            startTime: '',
-            duration: '',
-            number: '',
-            brief: '',
-        });
-        /**
-         * 验证直播时间
-         */
-        async function validateDuration (rule: unknown, value: number): Promise<string | void> {
-            if (value < 30 || value > 120) {
-                return Promise.reject('*最短30min 最长120min');
-            } else {
-                return Promise.resolve();
-            }
-        }
-        /**
-         * 验证直播人数
-         */
-        const validateNumber = async (rule: unknown, value: number): Promise<string | void> => {
-            if (value < 1 || value > 4) {
-                return Promise.reject('**最少1人，最多4人');
-            } else {
-                return Promise.resolve();
-            }
-        };
-        // 验证规则
-        const rules = reactive({
-            duration: [
-                {
-                    validator: validateDuration,
-                    trigger: 'change',
-                },
-            ],
-            number: [
-                {
-                    validator: validateNumber,
-                    trigger: 'change',
-                },
-            ],
-        });
+  name: "ReleaseWebcast",
+  components: {
+    PlaySquareOutlined,
+    PlusOutlined,
+    NavBottom,
+    RankList,
+  },
+  setup() {
+    // 表单数据
+    const form = reactive({
+      title: "",
+      img: "",
+      fileid: "",
+      fileurl: "",
+      fileduration: 0,
+      dateline: "",
+      livetime: "",
+      livenumber: "",
+      desc: "",
+    });
 
-        // 是否显示封面预览 封面的路径
-        const viewCover: Ref<boolean> = ref(false);
-        const previewImage: Ref<string> = ref('');
-
-        /**
-         * 封面改变触发事件
-         */
-        
-        function coverChange(info: ImgInfo): void {
-            // console.log(info);
-            // 获取预览图片
-            previewCover(info.file).then(url => previewImage.value = url);
-            viewCover.value = true;
-            // form.cover = fileList;
-        }
-
-        const { resetFields, validate, validateInfos } = useForm(form, rules);
-        /**
-         * 表单提交
-         */
-        
-        const onSubmit = (e: FromSend) => {
-            e.preventDefault();
-            validate().then(() => {
-                console.log(toRaw(form));
-            }).catch((err: unknown) => {
-                console.log('error', err);
-            });
-        };
-        const isEntitled: Ref<boolean> = ref(true);
-        /**
-         * 隐藏无资格提示
-         */
-        function hideNoticeModal(): void {
-            isEntitled.value = false;
-        }
-        return {
-            labelCol: { span: 4 },
-            wrapperCol: { span: 14 },
-            modalNode: () => document.getElementsByClassName('modal-container')[0],
-            validateInfos,
-            resetFields,
-            viewCover,
-            previewImage,
-            coverChange,
-            form,
-            onSubmit,
-            isEntitled,
-            hideNoticeModal,
-        }
+    const uploadprogress: Ref<number> = ref(0);
+    const uploadpicprogress: Ref<number> = ref(0);
+    const videofile = ref<File>();
+    const videos = ref<Array<any>>([]);
+    /**
+     * 验证直播时间
+     */
+    async function validateaLivetime(
+      rule: unknown,
+      value: number
+    ): Promise<string | void> {
+      console.log(value);
+      if (value < 30 || value > 120) {
+        return Promise.reject("*最短30min 最长120min");
+      } else {
+        return Promise.resolve();
+      }
     }
-})
+    /**
+     * 验证直播人数
+     */
+    const validateLivenumber = async (
+      rule: unknown,
+      value: number
+    ): Promise<string | void> => {
+      console.log(value);
+      if (value < 1 || value > 4) {
+        return Promise.reject("**最少1人，最多4人");
+      } else {
+        return Promise.resolve();
+      }
+    };
+    // 验证规则
+    const rules = reactive({
+      livetime: [
+        {
+          validator: validateaLivetime,
+          trigger: "change",
+        },
+      ],
+      livenumber: [
+        {
+          validator: validateLivenumber,
+          trigger: "change",
+        },
+      ],
+    });
+
+    // 是否显示封面预览 封面的路径
+    const viewCover: Ref<boolean> = ref(false);
+    const previewImage: Ref<string> = ref("");
+
+    /**
+     * 封面改变触发事件
+     */
+
+    function coverChange(info: ImgInfo): void {
+      // console.log(info);
+      // 获取预览图片
+      previewCover(info.file).then((url) => (previewImage.value = url));
+      viewCover.value = true;
+      // form.cover = fileList;
+    }
+
+    const { resetFields, validate, validateInfos } = useForm(form, rules);
+
+    /**
+     * 表单提交
+     */
+
+    const subdata = reactive({
+      title: "",
+      img: "",
+      fileid: "",
+      fileurl: "",
+      fileduration: "",
+      dateline: "",
+      livetime: "",
+      livenumber: "",
+      desc: "",
+    });
+
+    const onSubmit = (e: FromSend) => {
+      e.preventDefault();
+      validate()
+        .then(() => {
+          //   console.log(toRaw(form),111);
+          let subdata = toRaw(form);
+          //   subdata.fileid=picinfo.
+          console.log(subdata);
+          liveadd(subdata);
+        })
+        .catch((err: unknown) => {
+          console.log("error", err);
+        });
+    };
+    const isEntitled: Ref<boolean> = ref(true);
+    /**
+     * 隐藏无资格提示
+     */
+    function hideNoticeModal(): void {
+      isEntitled.value = false;
+    }
+
+    /**
+     * 开始时间设置
+     */
+
+    function startchange(e: string): void {
+      let month=new Date(e).getMonth()+1
+      console.log(new Date(e).getFullYear()+"-"+month+'-'+new Date(e).getDate())
+      form.dateline =
+        new Date(e).getFullYear() +
+        "-" +
+        month +
+        "-" +
+        new Date(e).getDate();
+    }
+    /**
+     *  上传文件
+     */
+    const videoinfo = reactive({
+      fileId: "",
+      url: "",
+    });
+    const picinfo = reactive({
+      fileId: "",
+      url: "",
+    });
+    interface AntUpload {
+      action: string;
+      data: unknown;
+      file: File;
+    }
+    async function uploads(file: AntUpload) {
+      console.log(file);
+      videofile.value = file.file;
+      videos.value[0].addEventListener("durationchange", () => {
+        console.log(videos.value[0].duration);
+        form.fileduration = videos.value[0].duration;
+      });
+      let res = await uploadflie(file.file, (info: any) => {
+        console.log(info);
+        uploadprogress.value = info.percent.toFixed(2) * 100;
+      });
+      console.log(res);
+
+      form.fileid = res.fileId;
+      form.fileurl = res.video.url;
+    }
+
+    async function uploadspic(file: AntUpload) {
+      let res = await uploadflie(file.file, (info: any) => {
+        console.log(info);
+        uploadpicprogress.value = info.percent.toFixed(2) * 100;
+      });
+      console.log(res);
+
+      //  picinfo.fileId=res.fileId
+      //  picinfo.url=res.video.url
+      form.img = res.video.url;
+    }
+
+    return {
+      labelCol: { span: 4 },
+      wrapperCol: { span: 14 },
+      modalNode: () => document.getElementsByClassName("modal-container")[0],
+      validateInfos,
+      resetFields,
+      viewCover,
+      previewImage,
+      coverChange,
+      form,
+      onSubmit,
+      isEntitled,
+      hideNoticeModal,
+      uploads,
+      uploadprogress,
+      videoinfo,
+      uploadspic,
+      uploadpicprogress,
+      picinfo,
+      startchange,
+      videofile,
+      videos,
+    };
+  },
+});
 </script>
 <style lang="scss" scoped>
 .webcast {
-    width: 100%;
-    min-width: 700px;
-    background-color: #ffffff;
-    padding: 46px;
-    border-radius: 17px;
-    position: relative;
-    ::v-deep(.ant-form) {
-        .title {
-            font-size: 12px;
+  width: 100%;
+  min-width: 700px;
+  background-color: #ffffff;
+  padding: 46px;
+  border-radius: 17px;
+  position: relative;
+  ::v-deep(.ant-form) {
+    .title {
+      font-size: 12px;
+      font-weight: bold;
+      color: #111111;
+      margin-bottom: 28px;
+    }
+    .ant-row {
+      .ant-form-item-label {
+        width: 60px;
+        margin: 0 30px 0 17px;
+        > label {
+          font-size: 12px;
+          font-weight: 500;
+          color: #808080;
+          &::after {
+            content: "";
+          }
+        }
+      }
+      .upload {
+        width: 171px;
+        height: 96px;
+      }
+      .upload-image {
+        width: 171px;
+        height: 96px;
+        border: 1px solid #dcdfe0;
+        border-radius: 3px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 17px;
+      }
+      .ant-input {
+        width: 171px;
+        padding: 6px 11px;
+        border-radius: 3px;
+        border: 1px solid #dcdfe0;
+        font-size: 11px;
+        color: #3f3f3f;
+        &::-webkit-input-placeholder {
+          font-size: 12px;
+          color: #808080;
+        }
+      }
+      .ant-select {
+        font-size: 12px;
+      }
+      .ant-select-dropdown {
+        font-size: 12px;
+      }
+      .ant-form-explain {
+        font-size: 10px;
+        font-weight: 500;
+        color: #d22d2e;
+      }
+      .ant-upload-list {
+        display: none;
+      }
+      .ant-btn {
+        padding: 0;
+        width: 63px;
+        height: 23px;
+        background: #08ae98;
+        border-radius: 3px;
+        font-size: 10px;
+        font-weight: 500;
+        color: #ffffff;
+      }
+    }
+    .item-cover {
+      .preview-image {
+        width: 171px;
+        height: 96px;
+      }
+    }
+    .video-introduction {
+      .ant-form-item-control-wrapper {
+        .ant-form-item-children {
+          display: flex;
+          align-items: center;
+          .demand {
+            line-height: 17px;
+            font-size: 10px;
+            font-weight: 500;
+            color: #808080;
+            width: 134px;
+            > p {
+              margin: 0;
+            }
+          }
+        }
+      }
+    }
+    .duration {
+      .unit {
+        margin-left: 18px;
+        font-size: 12px;
+        font-weight: 500;
+        color: #808080;
+      }
+    }
+    .brief {
+      position: relative;
+      .ant-input {
+        width: 359px;
+      }
+      .brief-textarea {
+        min-height: 85px;
+        padding-bottom: 30px;
+      }
+      .words-number {
+        position: absolute;
+        right: 11px;
+        bottom: -11px;
+        font-size: 11px;
+        font-weight: 500;
+        color: #7f7f7f;
+        user-select: none;
+      }
+    }
+  }
+  .modal-container {
+    ::v-deep(.modal-dialog) {
+      .close {
+        width: 14px;
+        height: 14px;
+      }
+      .ant-modal-content {
+        box-sizing: border-box;
+        padding: 25px 30px;
+        width: 569px;
+        background: #ffffff;
+        box-shadow: 0px 4px 6px 0px rgba(102, 102, 102, 0.07);
+        border-radius: 28px;
+        .notice-container {
+          .title {
+            font-size: 11px;
             font-weight: bold;
             color: #111111;
-            margin-bottom: 28px;
+            margin-bottom: 16px;
+          }
+          .sub-title {
+            .red {
+              color: #d12c2d;
+            }
+            .bule {
+              color: #0dbba3;
+            }
+          }
+          .confirm-btn {
+            display: inline-block;
+            background: #07ad97;
+            border-radius: 2px;
+            font-size: 9px;
+            font-weight: 500;
+            color: #ffffff;
+            text-align: center;
+            cursor: pointer;
+            user-select: none;
+            height: 22px;
+            line-height: 22px;
+            padding: 0 17px;
+          }
         }
-        .ant-row {
-            .ant-form-item-label {
-                width: 60px;
-                margin: 0 30px 0 17px;
-                > label {
-                    font-size: 12px;
-                    font-weight: 500;
-                    color: #808080;
-                    &::after {
-                        content: '';
-                    }
-                }
-            }
-            .upload-image {
-                width: 171px;
-                height: 96px;
-                border: 1px solid #DCDFE0;
-                border-radius: 3px;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                margin-right: 17px;
-            }
-            .ant-input {
-                width: 171px;
-                padding: 6px 11px;
-                border-radius: 3px;
-                border: 1px solid #DCDFE0;
-                font-size: 11px;
-                color: #3F3F3F;
-                &::-webkit-input-placeholder{
-                    font-size: 12px;
-                    color: #808080;
-                }
-            }
-            .ant-select {
-                font-size: 12px;
-            }
-            .ant-select-dropdown {
-                font-size: 12px;
-            }
-            .ant-form-explain {
-                font-size: 10px;
-                font-weight: 500;
-                color: #D22D2E;
-            }
-            .ant-upload-list {
-                display: none;
-            }
-            .ant-btn {
-                padding: 0;
-                width: 63px;
-                height: 23px;
-                background: #08AE98;
-                border-radius: 3px;
-                font-size: 10px;
-                font-weight: 500;
-                color: #FFFFFF;
-            }
-        }
-        .item-cover {
-            .preview-image {
-                width: 171px;
-                height: 96px;
-            }
-        }
-        .video-introduction {
-            .ant-form-item-control-wrapper {
-                .ant-form-item-children {
-                    display: flex;
-                    align-items: center;
-                    .demand {
-                        line-height: 17px;
-                        font-size: 10px;
-                        font-weight: 500;
-                        color: #808080;
-                        width: 134px;
-                        > p {
-                            margin: 0;
-                        }
-                    }
-                }
-            }
-        }
-        .duration {
-            .unit {
-                margin-left: 18px;
-                font-size: 12px;
-                font-weight: 500;
-                color: #808080;
-            }
-        }
-        .brief {
-            position: relative;
-            .ant-input {
-                width: 359px;
-            }
-            .brief-textarea {
-                min-height: 85px;
-                padding-bottom: 30px;
-            }
-            .words-number {
-                position: absolute;
-                right: 11px;
-                bottom: -11px;
-                font-size: 11px;
-                font-weight: 500;
-                color: #7F7F7F;
-                user-select: none;
-            }
-        }
-    }
-    .modal-container {
-        ::v-deep(.modal-dialog) {
-            .close {
-                width: 14px;
-                height: 14px;
-            }
-            .ant-modal-content {
-                box-sizing: border-box;
-                padding: 25px 30px;
-                width: 569px;
-                background: #FFFFFF;
-                box-shadow: 0px 4px 6px 0px rgba(102, 102, 102, 0.07);
-                border-radius: 28px;
-                .notice-container {
-                    .title {
-                        font-size: 11px;
-                        font-weight: bold;
-                        color: #111111;
-                        margin-bottom: 16px;
-                    }
-                    .sub-title {
-                        .red {
-                            color: #D12C2D;
-                        }
-                        .bule {
-                            color: #0DBBA3;
-                        }
-                    }
-                    .confirm-btn {
-                        display: inline-block;
-                        background: #07AD97;
-                        border-radius: 2px;
-                        font-size: 9px;
-                        font-weight: 500;
-                        color: #FFFFFF;
-                        text-align: center;
-                        cursor: pointer;
-                        user-select: none;
-                        height: 22px;
-                        line-height: 22px;
-                        padding: 0 17px;
-                    }
-                }
-                .report {
-                    .sub-title {
-                        margin-bottom: 50px;
-                    }
-                }
-            }
+        .report {
+          .sub-title {
+            margin-bottom: 50px;
+          }
         }
+      }
     }
+  }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/regime/Live.vue b/src/views/regime/Live.vue
index 2526fd0..4115f6b 100644
--- a/src/views/regime/Live.vue
+++ b/src/views/regime/Live.vue
@@ -12,16 +12,7 @@
       </div>
     </div>
     <div class="list" v-if="tabindex==1">
-      <LiveItem :type="2"></LiveItem>
-      <LiveItem :type="2"></LiveItem>
-      <LiveItem :type="2"></LiveItem>
-      <LiveItem></LiveItem>
-      <LiveItem></LiveItem>
-      <LiveItem></LiveItem>
-      <LiveItem></LiveItem>
-      <LiveItem></LiveItem>
-      <LiveItem></LiveItem>
-      <LiveItem></LiveItem>
+      <LiveItem :type="2" v-for="(i,j) in livelist" :key="j" :img="i.img" :title="i.title" :score="i.score" :date="i.starttime" :takehour="i.vodduration" :livenum="i.livenumber" :status="i.livestatus"></LiveItem>
     </div>
 
        <div class="list" v-if="tabindex==2">
@@ -144,24 +135,29 @@
 }
 </style>
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+import { defineComponent, onMounted, ref } from "vue";
 import LiveItem from "@/components/LiveItem.vue";
 import { getlivelist } from '@/api';
+import { LiveList } from '@/types';
 export default defineComponent({
   components: {
     LiveItem,
   },
   setup() {
-    const page = ref(6);
+    const page = ref(1);
     const tabindex = ref(1);
-    getlivelist()
+    const livelist=ref<Array<LiveList>>()
+    onMounted(async ()=>{
+      livelist.value= await getlivelist()
+    })
      function tabchange(e: number): void {
          tabindex.value=e
     }
     return {
       page,
       tabindex,
-      tabchange
+      tabchange,
+      livelist
     };
   },
 });