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
};
},
});