视频详情

src/components/VideoItem.vue

@@ -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>

src/layout/Mine.vue

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

src/layout/Regime.vue

@@ -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>

src/router/index.ts

@@ -12,6 +12,17 @@ const routes: Array<RouteRecordRaw> = [
       }
     ]
   },
+  {
+    path:"/regime",
+    name:"Regime",
+    component: () => import("../layout/Regime.vue"),
+    children: [
+      {
+        path: "video",
+        component: () => import("../views/regime/Video.vue")
+      }
+    ]
+  },
   {
     path: '/',
     name: 'Home',

src/views/regime/Video.vue

@@ -0,0 +1,137 @@
+<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;
+    .nav{
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #eee;
+        justify-content: space-between;
+        .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;
+        >div{
+            margin-top: 28px;
+            margin-left: 23px;
+            &:nth-child(1),&:nth-child(6){
+                margin-left: 0;
+            }
+        }
+    }
+    .pages{
+        width: 100%;
+        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(){
+       console.log(123)
+       const page = ref(6);
+       return {
+           page
+       }
+    }
+})
+</script>

src/views/regime/VideoInfo.vue

@@ -0,0 +1,15 @@
+<template>
+    
+</template>
+<style lang="scss" scoped>
+
+</style>
+<script lang="ts">
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+    setup(){
+        
+    }
+})
+</script>