Merge branch 'master' of http://git.luyuan.tk/luyuan/beelink into zj
This commit is contained in:
commit
0ded7c7e31
98
src/components/ReviewItem.vue
Normal file
98
src/components/ReviewItem.vue
Normal file
@ -0,0 +1,98 @@
|
|||||||
|
<template>
|
||||||
|
<div class="reviewitem">
|
||||||
|
<div class="top">
|
||||||
|
<img src="" alt="">
|
||||||
|
<div class="name">qweqw</div>
|
||||||
|
<div class="lv">
|
||||||
|
<div class="img">
|
||||||
|
<img src="" alt="">
|
||||||
|
<img src="" alt="">
|
||||||
|
<img src="" alt="">
|
||||||
|
<img src="" alt="">
|
||||||
|
<img src="" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="num">8.0</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cont">
|
||||||
|
dafjkldashfjksdhjkhfgjkdshjkfgsdhjkghjkshgjsjkhg
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="date">2020-10-10</div>
|
||||||
|
<div class="reply">回复</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.reviewitem{
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
.top{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
>img{
|
||||||
|
width: 57px;
|
||||||
|
height: 57px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: #0f0;
|
||||||
|
|
||||||
|
}
|
||||||
|
.name{
|
||||||
|
font-size: 13px;
|
||||||
|
color: #111;
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.lv{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.img{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
>img{
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
background-color: #0f0;
|
||||||
|
margin-left: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.num{
|
||||||
|
font-size: 11px;
|
||||||
|
color: #D12C2E;
|
||||||
|
margin-left: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.cont{
|
||||||
|
margin-left: 67px;
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1.2;
|
||||||
|
|
||||||
|
}
|
||||||
|
.bottom{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-left: 67px;
|
||||||
|
margin-top: 25px;
|
||||||
|
.date{
|
||||||
|
font-size: 10px;
|
||||||
|
color: #999;
|
||||||
|
|
||||||
|
}
|
||||||
|
.reply{
|
||||||
|
font-size: 10px;
|
||||||
|
color: #08AE98;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
setup(){
|
||||||
|
console.log(1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
87
src/components/VideoCont.vue
Normal file
87
src/components/VideoCont.vue
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
<template>
|
||||||
|
<div class="cont">
|
||||||
|
<div class="title">视频数据</div>
|
||||||
|
<div class="info">
|
||||||
|
<div class="item">
|
||||||
|
<img src="" alt="">
|
||||||
|
<span>sdasjdkasfklasjkfjakl</span>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img src="" alt="">
|
||||||
|
<span>sdasjdkasfklasjkfjakl</span>
|
||||||
|
</div>
|
||||||
|
<div class="item">
|
||||||
|
<img src="" alt="">
|
||||||
|
<span>sdasjdkasfklasjkfjakl</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="button">
|
||||||
|
<div class="modify">修改该视频</div>
|
||||||
|
<div class="del">删除该视频</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.cont{
|
||||||
|
width: 316px;
|
||||||
|
height: 563px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 17px;
|
||||||
|
padding: 0 28px;
|
||||||
|
position: relative;
|
||||||
|
.title{
|
||||||
|
padding: 23px 0 11px 0;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #111;
|
||||||
|
line-height: 1;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
.item{
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
margin-top: 23px;
|
||||||
|
>img{
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
background-color: #0f0;
|
||||||
|
}
|
||||||
|
>span{
|
||||||
|
font-size: 11px;
|
||||||
|
color: #666;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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>
|
||||||
123
src/components/VideoItem.vue
Normal file
123
src/components/VideoItem.vue
Normal file
@ -0,0 +1,123 @@
|
|||||||
|
<template>
|
||||||
|
<div class="videoitem">
|
||||||
|
<img src="" alt="" class="cover">
|
||||||
|
<img src="" 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="" alt="">
|
||||||
|
<span>123</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<img src="" alt="">
|
||||||
|
<span>3</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="state audit fail">
|
||||||
|
审核中
|
||||||
|
</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;
|
||||||
|
color: #111;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
>span{
|
||||||
|
margin-left: 11px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #f55455;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.info{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.datetime{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #666;
|
||||||
|
.time{
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.feature{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 18px;
|
||||||
|
>div{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
>img{
|
||||||
|
width: 11px;
|
||||||
|
height: 11px;
|
||||||
|
}
|
||||||
|
>span{
|
||||||
|
font-size: 10px;
|
||||||
|
color: #111;
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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: #CEF9F0;
|
||||||
|
color: #08AE98;
|
||||||
|
}
|
||||||
|
.fail{
|
||||||
|
background-color: #f9d6f6;
|
||||||
|
color: #D12C2E;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
|
||||||
|
})
|
||||||
|
</script>
|
||||||
27
src/components/VideoPlay.vue
Normal file
27
src/components/VideoPlay.vue
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<template>
|
||||||
|
<div class="video">
|
||||||
|
<video src=""></video>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.video{
|
||||||
|
width: 976px;
|
||||||
|
height: 563px;
|
||||||
|
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>
|
||||||
93
src/components/VideoReview.vue
Normal file
93
src/components/VideoReview.vue
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
<template>
|
||||||
|
<div class="review">
|
||||||
|
<div class="top">
|
||||||
|
<div class="title">
|
||||||
|
该视频评价
|
||||||
|
<span>8.0分</span>
|
||||||
|
</div>
|
||||||
|
<div class="score">8.0分</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="list">
|
||||||
|
<ReviewItem></ReviewItem>
|
||||||
|
<ReviewItem></ReviewItem>
|
||||||
|
<ReviewItem></ReviewItem>
|
||||||
|
<ReviewItem></ReviewItem>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="reply">
|
||||||
|
<a-textarea v-model:value="value" placeholder="Basic usage" :rows="4" />
|
||||||
|
<div class="send">发表留言</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.review{
|
||||||
|
width: 1320px;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0 28px 56px 28px;
|
||||||
|
border-radius: 17px;
|
||||||
|
.top{
|
||||||
|
padding: 28px 0 18px 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid #ededed;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
.title{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #111;
|
||||||
|
>span{
|
||||||
|
width: 56px;
|
||||||
|
height: 17px;
|
||||||
|
background-color: #F9D5D6;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 17px;
|
||||||
|
text-align: center;
|
||||||
|
margin-left: 6px;
|
||||||
|
color: #D12B2D;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.score{
|
||||||
|
font-size: 12px;
|
||||||
|
color: #D12B2D;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.reply{
|
||||||
|
padding-top: 28px;
|
||||||
|
border-top: 1px solid #ededed;
|
||||||
|
&::v-deep .ant-input{
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
.send{
|
||||||
|
width: 62px;
|
||||||
|
height: 22px;
|
||||||
|
margin-top: 30px;
|
||||||
|
background-color: #07AD97;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 22px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 9px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import ReviewItem from "./ReviewItem.vue"
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
ReviewItem
|
||||||
|
},
|
||||||
|
serup(){
|
||||||
|
console.log(1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -16,7 +16,6 @@
|
|||||||
.body{
|
.body{
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 1366px;
|
|
||||||
height: calc(100% - 57px);
|
height: calc(100% - 57px);
|
||||||
.container{
|
.container{
|
||||||
width: calc(100% - 171px);
|
width: calc(100% - 171px);
|
||||||
|
|||||||
45
src/layout/Regime.vue
Normal file
45
src/layout/Regime.vue
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
<template>
|
||||||
|
<div class="mine" :style="{height:height + 'px'}">
|
||||||
|
<NavTop style="flex-shrink:0"></NavTop>
|
||||||
|
<div class="body">
|
||||||
|
<router-view/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.mine{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.body{
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 57px);
|
||||||
|
overflow: auto;
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
padding: 23px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, onMounted, ref } from 'vue';
|
||||||
|
import NavTop from "@/components/NavTop.vue"
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
NavTop
|
||||||
|
},
|
||||||
|
setup(){
|
||||||
|
console.log(1)
|
||||||
|
const height = ref(0);
|
||||||
|
onMounted(() => {
|
||||||
|
height.value = document.documentElement.clientHeight;
|
||||||
|
})
|
||||||
|
window.onresize=function(){
|
||||||
|
height.value = document.documentElement.clientHeight;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
height
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -64,6 +64,21 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path:"/regime",
|
||||||
|
name:"Regime",
|
||||||
|
component: () => import("../layout/Regime.vue"),
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "video",
|
||||||
|
component: () => import("../views/regime/Video.vue")
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "videoinfo",
|
||||||
|
component: () => import("../views/regime/VideoInfo.vue")
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/',
|
path: '/',
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
|
|||||||
BIN
src/static/images/delete.png
Normal file
BIN
src/static/images/delete.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/static/images/link.png
Normal file
BIN
src/static/images/link.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
src/static/images/smile.png
Normal file
BIN
src/static/images/smile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
@ -0,0 +1,20 @@
|
|||||||
|
/**
|
||||||
|
* 图片转Base64
|
||||||
|
*/
|
||||||
|
function getBase64(file: File): Promise<string | ArrayBuffer | null> {
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
reader.onload = () => resolve(reader.result);
|
||||||
|
reader.onerror = error => reject(error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 预览图片
|
||||||
|
*/
|
||||||
|
export async function previewCover(file: any): Promise<string> {
|
||||||
|
if (!file.url && !file.preview) {
|
||||||
|
file.preview = await getBase64(file.originFileObj);
|
||||||
|
}
|
||||||
|
return file.url || file.preview || '';
|
||||||
|
}
|
||||||
@ -107,7 +107,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="input-box introduce">
|
<div class="input-box introduce">
|
||||||
<div class="label">自我介绍</div>
|
<div class="label">自我介绍</div>
|
||||||
<a-textarea v-model:value="formData.introduce" />
|
<a-textarea v-model:value="formData.introduce" class="introduce-textarea" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -322,7 +322,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
.main-container {
|
.main-container {
|
||||||
margin-left: 17px;
|
margin-left: 17px;
|
||||||
.input-box {
|
::v-deep .input-box {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 28px;
|
margin-bottom: 28px;
|
||||||
@ -341,12 +341,16 @@ export default defineComponent({
|
|||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 1px solid #DCDFE0;
|
border: 1px solid #DCDFE0;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
color: #3F3F3F;
|
||||||
}
|
}
|
||||||
.ant-select {
|
.ant-select {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
color: #3F3F3F;
|
||||||
}
|
}
|
||||||
.ant-select-dropdown {
|
.ant-select-dropdown {
|
||||||
font-size: 12px;
|
.ant-select-dropdown-menu-item {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.speak-lang {
|
.speak-lang {
|
||||||
@ -403,6 +407,11 @@ export default defineComponent({
|
|||||||
.ant-input {
|
.ant-input {
|
||||||
width: 359px;
|
width: 359px;
|
||||||
}
|
}
|
||||||
|
.introduce-textarea {
|
||||||
|
height: 85px;
|
||||||
|
min-height: 85px;
|
||||||
|
max-height: 85px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.phone-box {
|
.phone-box {
|
||||||
.phone {
|
.phone {
|
||||||
|
|||||||
@ -5,26 +5,32 @@
|
|||||||
<a-form-item label="视频标题">
|
<a-form-item label="视频标题">
|
||||||
<a-input size="small" v-model:value="form.title" placeholder="请输入您的视频标题" />
|
<a-input size="small" v-model:value="form.title" placeholder="请输入您的视频标题" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="视频封面">
|
<a-form-item label="视频封面" class="video-cover">
|
||||||
<a-upload
|
<a-upload
|
||||||
list-type="picture"
|
list-type="picture"
|
||||||
action="//jsonplaceholder.typicode.com/posts/"
|
@change="coverChange"
|
||||||
>
|
>
|
||||||
<div class="upload-image">
|
<div class="upload-image" v-if="!viewCover">
|
||||||
<PlusOutlined style="fontSize: 22px;" />
|
<PlusOutlined style="fontSize: 22px;" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="preview-image" v-else>
|
||||||
|
<img style="width: 100%" :src="previewImage" />
|
||||||
|
</div>
|
||||||
</a-upload>
|
</a-upload>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="选择视频" class="video-introduction">
|
<a-form-item label="选择视频" class="video-introduction">
|
||||||
<div class="upload-container">
|
<div class="upload-container">
|
||||||
<a-upload
|
<a-upload :beforeUpload="beforeVideoUpload">
|
||||||
:beforeUpload="beforeUpload"
|
|
||||||
>
|
|
||||||
<div class="upload-image">
|
<div class="upload-image">
|
||||||
<PlaySquareOutlined style="fontSize: 22px;" />
|
<PlaySquareOutlined style="fontSize: 22px;" />
|
||||||
</div>
|
</div>
|
||||||
</a-upload>
|
</a-upload>
|
||||||
<div v-for="(item, index) in form.video" :key="index">{{ item.name }}</div>
|
<!-- 文件列表 -->
|
||||||
|
<div v-for="(item, index) in form.video" :key="index" class="video-list">
|
||||||
|
<img src="@/static/images/link.png" class="link" />
|
||||||
|
<span class="one-line-hide">{{ item.name }}</span>
|
||||||
|
<img src="@/static/images/delete.png" @click="removeFile(index)" class="del" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="demand">
|
<div class="demand">
|
||||||
<p class="one-line-hide">视频要求：</p>
|
<p class="one-line-hide">视频要求：</p>
|
||||||
@ -32,7 +38,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="视频简介" class="brief">
|
<a-form-item label="视频简介" class="brief">
|
||||||
<a-textarea v-model:value="form.brief" :maxlength="200" placeholder="请输入您的视频简介" />
|
<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>
|
||||||
<a-form-item :wrapper-col="{ span: 4, offset: 0 }">
|
<a-form-item :wrapper-col="{ span: 4, offset: 0 }">
|
||||||
<a-button @click="onSubmit">上传视频</a-button>
|
<a-button @click="onSubmit">上传视频</a-button>
|
||||||
@ -42,9 +49,10 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, reactive } from 'vue';
|
import { defineComponent, reactive, Ref, ref } from 'vue';
|
||||||
import { PlaySquareOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
import { PlaySquareOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||||
import NavBottom from '@/components/NavBottom.vue';
|
import NavBottom from '@/components/NavBottom.vue';
|
||||||
|
import { previewCover } from '@/static/js/common';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'ReleaseWebcast',
|
name: 'ReleaseWebcast',
|
||||||
@ -59,7 +67,6 @@ export default defineComponent({
|
|||||||
name: string;
|
name: string;
|
||||||
}
|
}
|
||||||
const fileList: Array<FileItem> = [];
|
const fileList: Array<FileItem> = [];
|
||||||
console.log(fileList);
|
|
||||||
|
|
||||||
// 表单数据
|
// 表单数据
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
@ -68,12 +75,48 @@ export default defineComponent({
|
|||||||
brief: '',
|
brief: '',
|
||||||
video: fileList,
|
video: fileList,
|
||||||
});
|
});
|
||||||
|
// 是否显示封面预览 封面的路径
|
||||||
|
const viewCover: Ref<boolean> = ref(false),
|
||||||
|
previewImage: Ref<string> = ref('');
|
||||||
|
/**
|
||||||
|
* 封面改变触发事件
|
||||||
|
*/
|
||||||
|
function coverChange(info: any): void {
|
||||||
|
// console.log(info);
|
||||||
|
// 获取预览图片
|
||||||
|
previewCover(info.file).then(url => previewImage.value = url);
|
||||||
|
viewCover.value = true;
|
||||||
|
// form.cover = fileList;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 删除视频列表
|
||||||
|
* @param index 删除文件的索引
|
||||||
|
*/
|
||||||
|
function removeFile(index: number): void {
|
||||||
|
const newFileList = form.video.slice();
|
||||||
|
newFileList.splice(index, 1);
|
||||||
|
form.video = newFileList;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 上传封面之前的钩子
|
||||||
|
* @param file 上传的文件
|
||||||
|
*/
|
||||||
|
const beforeCoverUpload = (file: File): boolean => {
|
||||||
|
console.log(file);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 删除封面
|
||||||
|
*/
|
||||||
|
function cancelCover(file: any): void {
|
||||||
|
console.log(file);
|
||||||
|
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* 上传文件之前的钩子
|
* 上传文件之前的钩子
|
||||||
* @param file 上传的文件
|
* @param file 上传的文件
|
||||||
*/
|
*/
|
||||||
const beforeUpload = (file: any): boolean => {
|
const beforeVideoUpload = (file: any): boolean => {
|
||||||
// console.log(file);
|
// console.log(file);
|
||||||
if(file.type != '') {
|
if(file.type != '') {
|
||||||
// handleRemove(file);
|
// handleRemove(file);
|
||||||
@ -87,14 +130,19 @@ export default defineComponent({
|
|||||||
const onSubmit = (e: any) => {
|
const onSubmit = (e: any) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
};
|
};
|
||||||
console.log(form.video);
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
labelCol: { span: 4 },
|
labelCol: { span: 4 },
|
||||||
wrapperCol: { span: 14 },
|
wrapperCol: { span: 14 },
|
||||||
form,
|
form,
|
||||||
fileList,
|
viewCover,
|
||||||
beforeUpload,
|
previewImage,
|
||||||
|
removeFile,
|
||||||
|
previewCover,
|
||||||
|
coverChange,
|
||||||
|
cancelCover,
|
||||||
|
beforeCoverUpload,
|
||||||
|
beforeVideoUpload,
|
||||||
onSubmit,
|
onSubmit,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -108,7 +156,7 @@ export default defineComponent({
|
|||||||
padding: 46px;
|
padding: 46px;
|
||||||
border-radius: 17px;
|
border-radius: 17px;
|
||||||
position: relative;
|
position: relative;
|
||||||
/deep/ .ant-form {
|
::v-deep .ant-form {
|
||||||
.title {
|
.title {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -144,6 +192,7 @@ export default defineComponent({
|
|||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 1px solid #DCDFE0;
|
border: 1px solid #DCDFE0;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
color: #3F3F3F;
|
||||||
&::-webkit-input-placeholder{
|
&::-webkit-input-placeholder{
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #808080;
|
color: #808080;
|
||||||
@ -151,25 +200,13 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
.ant-select {
|
.ant-select {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
color: #3F3F3F;
|
||||||
}
|
}
|
||||||
.ant-select-dropdown {
|
.ant-select-dropdown {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
.ant-upload-list {
|
.ant-upload-list {
|
||||||
display: none;
|
display: none;
|
||||||
color: #08AE98;
|
|
||||||
&:hover {
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
.ant-upload-list-item {
|
|
||||||
opacity: 1;
|
|
||||||
.ant-upload-list-item-info {
|
|
||||||
background-color: #ffffff;
|
|
||||||
.anticon-paper-clip {
|
|
||||||
color: #08AE98;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.ant-btn {
|
.ant-btn {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
@ -182,23 +219,54 @@ export default defineComponent({
|
|||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.video-cover {
|
||||||
|
.preview-image {
|
||||||
|
width: 171px;
|
||||||
|
height: 96px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.video-introduction {
|
.video-introduction {
|
||||||
.ant-form-item-control-wrapper {
|
.ant-form-item-control-wrapper {
|
||||||
.ant-form-item-children {
|
.ant-form-item-children {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
// align-items: center;
|
||||||
.demand {
|
.demand {
|
||||||
line-height: 17px;
|
height: 94px;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #808080;
|
color: #808080;
|
||||||
width: 134px;
|
width: 134px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
> p {
|
> p {
|
||||||
|
line-height: 17px;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.video-list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.link {
|
||||||
|
width: 11px;
|
||||||
|
height: 11px;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
> span {
|
||||||
|
font-size: 9px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #07AD97;
|
||||||
|
max-width: 150px;
|
||||||
|
}
|
||||||
|
.del {
|
||||||
|
width: 11px;
|
||||||
|
height: 11px;
|
||||||
|
margin-left: auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.duration {
|
.duration {
|
||||||
.unit {
|
.unit {
|
||||||
@ -209,9 +277,23 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.brief {
|
.brief {
|
||||||
|
position: relative;
|
||||||
.ant-input {
|
.ant-input {
|
||||||
width: 359px;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,14 +5,18 @@
|
|||||||
<a-form-item label="直播标题">
|
<a-form-item label="直播标题">
|
||||||
<a-input size="small" v-model:value="form.title" placeholder="请输入您的直播标题" />
|
<a-input size="small" v-model:value="form.title" placeholder="请输入您的直播标题" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="直播封面">
|
<a-form-item label="直播封面" class="item-cover">
|
||||||
<a-upload
|
<a-upload
|
||||||
list-type="picture"
|
list-type="picture"
|
||||||
|
@change="coverChange"
|
||||||
action="//jsonplaceholder.typicode.com/posts/"
|
action="//jsonplaceholder.typicode.com/posts/"
|
||||||
>
|
>
|
||||||
<div class="upload-image">
|
<div class="upload-image" v-if="!viewCover">
|
||||||
<PlusOutlined style="fontSize: 22px;" />
|
<PlusOutlined style="fontSize: 22px;" />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="preview-image" v-else>
|
||||||
|
<img style="width: 100%" :src="previewImage" />
|
||||||
|
</div>
|
||||||
</a-upload>
|
</a-upload>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="视频介绍" class="video-introduction">
|
<a-form-item label="视频介绍" class="video-introduction">
|
||||||
@ -42,7 +46,8 @@
|
|||||||
<a-input size="small" v-model:value="form.number" placeholder="请输入直播人数" />
|
<a-input size="small" v-model:value="form.number" placeholder="请输入直播人数" />
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="直播简介" class="brief">
|
<a-form-item label="直播简介" class="brief">
|
||||||
<a-textarea v-model:value="form.brief" maxlength="200" placeholder="请输入您的直播简介" />
|
<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>
|
||||||
<a-form-item :wrapper-col="{ span: 4, offset: 0 }">
|
<a-form-item :wrapper-col="{ span: 4, offset: 0 }">
|
||||||
<a-button @click="onSubmit">发布直播</a-button>
|
<a-button @click="onSubmit">发布直播</a-button>
|
||||||
@ -52,10 +57,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, reactive, toRaw } from 'vue';
|
import { defineComponent, reactive, Ref, ref, toRaw } from 'vue';
|
||||||
import { PlaySquareOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
import { PlaySquareOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||||
import { useForm } from '@ant-design-vue/use';
|
import { useForm } from '@ant-design-vue/use';
|
||||||
import NavBottom from '@/components/NavBottom.vue';
|
import NavBottom from '@/components/NavBottom.vue';
|
||||||
|
import { previewCover } from '@/static/js/common';
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'ReleaseWebcast',
|
name: 'ReleaseWebcast',
|
||||||
@ -78,13 +84,13 @@ export default defineComponent({
|
|||||||
/**
|
/**
|
||||||
* 验证直播时间
|
* 验证直播时间
|
||||||
*/
|
*/
|
||||||
const validateDuration = async (rule: object, value: number): Promise<string | void> => {
|
async function validateDuration (rule: object, value: number): Promise<string | void> {
|
||||||
if (value < 30 || value > 120) {
|
if (value < 30 || value > 120) {
|
||||||
return Promise.reject('*最短30min 最长120min');
|
return Promise.reject('*最短30min 最长120min');
|
||||||
} else {
|
} else {
|
||||||
return Promise.resolve();
|
return Promise.resolve();
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
/**
|
/**
|
||||||
* 验证直播人数
|
* 验证直播人数
|
||||||
*/
|
*/
|
||||||
@ -110,6 +116,22 @@ export default defineComponent({
|
|||||||
},
|
},
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 是否显示封面预览 封面的路径
|
||||||
|
const viewCover: Ref<boolean> = ref(false),
|
||||||
|
previewImage: Ref<string> = ref('');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 封面改变触发事件
|
||||||
|
*/
|
||||||
|
function coverChange(info: any): 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 { resetFields, validate, validateInfos } = useForm(form, rules);
|
||||||
/**
|
/**
|
||||||
* 表单提交
|
* 表单提交
|
||||||
@ -127,6 +149,9 @@ export default defineComponent({
|
|||||||
wrapperCol: { span: 14 },
|
wrapperCol: { span: 14 },
|
||||||
validateInfos,
|
validateInfos,
|
||||||
resetFields,
|
resetFields,
|
||||||
|
viewCover,
|
||||||
|
previewImage,
|
||||||
|
coverChange,
|
||||||
form,
|
form,
|
||||||
onSubmit,
|
onSubmit,
|
||||||
}
|
}
|
||||||
@ -141,7 +166,7 @@ export default defineComponent({
|
|||||||
padding: 46px;
|
padding: 46px;
|
||||||
border-radius: 17px;
|
border-radius: 17px;
|
||||||
position: relative;
|
position: relative;
|
||||||
/deep/ .ant-form {
|
::v-deep .ant-form {
|
||||||
.title {
|
.title {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -177,6 +202,7 @@ export default defineComponent({
|
|||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
border: 1px solid #DCDFE0;
|
border: 1px solid #DCDFE0;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
|
color: #3F3F3F;
|
||||||
&::-webkit-input-placeholder{
|
&::-webkit-input-placeholder{
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #808080;
|
color: #808080;
|
||||||
@ -193,6 +219,9 @@ export default defineComponent({
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: #D22D2E;
|
color: #D22D2E;
|
||||||
}
|
}
|
||||||
|
.ant-upload-list {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.ant-btn {
|
.ant-btn {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
width: 63px;
|
width: 63px;
|
||||||
@ -204,6 +233,12 @@ export default defineComponent({
|
|||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.item-cover {
|
||||||
|
.preview-image {
|
||||||
|
width: 171px;
|
||||||
|
height: 96px;
|
||||||
|
}
|
||||||
|
}
|
||||||
.video-introduction {
|
.video-introduction {
|
||||||
.ant-form-item-control-wrapper {
|
.ant-form-item-control-wrapper {
|
||||||
.ant-form-item-children {
|
.ant-form-item-children {
|
||||||
@ -231,9 +266,23 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.brief {
|
.brief {
|
||||||
|
position: relative;
|
||||||
.ant-input {
|
.ant-input {
|
||||||
width: 359px;
|
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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
140
src/views/regime/Video.vue
Normal file
140
src/views/regime/Video.vue
Normal file
@ -0,0 +1,140 @@
|
|||||||
|
<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>
|
||||||
|
</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;
|
||||||
|
}
|
||||||
|
.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 VideoItem from "@/components/VideoItem.vue"
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
VideoItem
|
||||||
|
},
|
||||||
|
setup(){
|
||||||
|
const page = ref(6);
|
||||||
|
return {
|
||||||
|
page
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
38
src/views/regime/VideoInfo.vue
Normal file
38
src/views/regime/VideoInfo.vue
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<template>
|
||||||
|
<div class="videoinfo">
|
||||||
|
<div class="info">
|
||||||
|
<VideoPlay></VideoPlay>
|
||||||
|
<VideoCont></VideoCont>
|
||||||
|
</div>
|
||||||
|
<VideoReview class="review"></VideoReview>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.videoinfo{
|
||||||
|
width: 1320px;
|
||||||
|
height: 563px;
|
||||||
|
.info{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.review{
|
||||||
|
margin-top: 28px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue';
|
||||||
|
import VideoPlay from "@/components/VideoPlay.vue"
|
||||||
|
import VideoCont from "@/components/VideoCont.vue"
|
||||||
|
import VideoReview from "@/components/VideoReview.vue"
|
||||||
|
export default defineComponent({
|
||||||
|
components:{
|
||||||
|
VideoPlay,
|
||||||
|
VideoCont,
|
||||||
|
VideoReview
|
||||||
|
},
|
||||||
|
setup(){
|
||||||
|
console.log(1)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user