视频详情

src/components/ReviewItem.vue

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

src/components/VideoCont.vue

@@ -6,6 +6,15 @@
                 <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>
@@ -19,6 +28,54 @@
     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">

src/components/VideoPlay.vue

@@ -8,6 +8,8 @@
     width: 976px;
     height: 563px;
     border-radius: 17px;
+    background-color: #0f0;
+    overflow: hidden;
     >video{
         width: 100%;
         height: 100%;

src/components/VideoReview.vue

@@ -2,20 +2,90 @@
     <div class="review">
         <div class="top">
             <div class="title">
-                <span></span>
+                该视频评价
+                <span>8.0分</span>
             </div>
-            <div class="score"></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)
     }

src/router/index.ts

@@ -20,6 +20,10 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: "video",
         component: () => import("../views/regime/Video.vue")
+      },
+      {
+        path: "videoinfo",
+        component: () => import("../views/regime/VideoInfo.vue")
       }
     ]
   },

src/views/regime/VideoInfo.vue

@@ -1,14 +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>