theluyuan/beelink
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

xbx #19

Merged
theluyuan merged 4 commits from xbx into master 2020-09-29 16:00:44 +08:00
Conversation 0 Commits 4 Files Changed 11 +2770 -2105
11 changed files with 2770 additions and 2105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/components/ReviewItem.vue Normal file
View 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
View 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
View 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
View 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
View 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>

1
src/layout/Mine.vue
View File

@ -16,7 +16,6 @@
.body{
display: flex;
width: 100%;
min-width: 1366px;
height: calc(100% - 57px);
.container{
width: calc(100% - 171px);

45
src/layout/Regime.vue Normal file
View 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>

16
src/router/index.ts
View File

@ -1,5 +1,4 @@
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import Home from '../views/Home.vue'
import Login from "../views/login/Login.vue"
const routes: Array<RouteRecordRaw> = [
@ -25,6 +24,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: '/',
name: 'Home',

140
src/views/regime/Video.vue Normal file
View 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
View 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>

4207
yarn.lock
View File

File diff suppressed because it is too large Load Diff