From a3ab3afe580daa80e9689f6e513e75a385f75bac Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Sun, 14 Aug 2022 21:00:37 +0800
Subject: [PATCH] 添加视频详情页
---
src/components/mini/box14-video.vue | 361 ++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 266 insertions(+), 95 deletions(-)
diff --git a/src/components/mini/box14-video.vue b/src/components/mini/box14-video.vue
index fc7360c..ad280c1 100644
--- a/src/components/mini/box14-video.vue
+++ b/src/components/mini/box14-video.vue
@@ -1,123 +1,294 @@
<template>
+ <div class="fade">
+ <div class="mySecretSamll" v-if="data==null|| data.length==0">
+ <p>
+ <a-icon type="delete" /> 空空如也..
+ </p>
+ </div>
+ <div class="gridClass">
+ <div class="entry-preview" v-for="item in data">
+ <div class="thumbnail_box" @click="showMyVideo(item)">
+ <div class="thumbnail">
+ <img :src="item.coverFileURL" alt="" loading="lazy" :onerror="img404">
+ </div>
+ </div>
+ <div class="entry-post">
+ <div class="entry-header">
+ <h5 class="entry-title">
+ <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title">
+ {{item.title}}
+ </router-link>
+ <!-- {{item.title}} -->
+ </h5>
+ <div class="post_content">
+ {{item.introduce}}
+ </div>
+ </div>
+ <div class="entry-meta">
+ <div class="post-categories">
+ <span class="tag vcard">
+ <a-icon type="customer-service" />
+ <a href="#" rel="category tag"> {{item.articleTypeName}}</a>
+ </span>
+ <!-- <span class="tag-list">
+ <a href="#" rel="tag">影评</a>
+ <a href="#" rel="tag">电影</a>
+ <a href="#" rel="tag">蜘蛛侠</a>
+ </span> -->
+ </div>
+ <div class="post-on">
+ <span class="entry-date">
+ <a-icon type="calendar" />
+ <a href="#" rel="bookmark">
+ {{item.publishDate}}
+ </a>
+ </span>
+ </div>
+ </div>
+ </div>
- <div class="test_wow">
+ </div>
- <section class="wow animate__slideOutUp test_wow" data-wow-duration="5s" data-wow-de>
-
- </section>
-
- <section class="wow animate__slideOutUp test_wow1" data-wow-duration="5s">
-
- </section>
-
- <section class="wow animate__slideOutUp test_wow2" data-wow-duration="5s">
-
- </section>
-
- <section class="wow animate__slideOutUp test_wow3" data-wow-duration="5s">
-
- </section>
-
- <section class="wow animate__slideOutUp test_wow4" data-wow-duration="5s">
-
- </section>
-
+ </div>
+ <a-row type="flex" justify="center">
+ <div>
+ <a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current"
+ :defaultPageSize="page.defaultPageSize" :pageSize="page.pageSize" :total="page.total" />
+ </div>
+ </a-row>
</div>
-
-
-
</template>
-
<script>
+ import {
+ queryBlogArticleList
+ } from '../../api/blogArticle.js'
+
+ import myConstant from "../../config/myConstant.js"
+
export default {
-
- name: 'Home',
-
data() {
-
return {
-
+ page: {
+ size: "small",
+ total: 1,
+ pageSize: 6,
+ current: 1,
+ defaultPageSize: 6
+ },
+ data: [],
+ img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/idea_beijing.jpg\"",
}
-
},
-
mounted() {
+ this.onChange(this.page.current);
+ },
+ methods: {
+ onChange(current) {
+ this.page.current = current;
+ queryBlogArticleList({
+ pageNo: current,
+ pageSize: this.page.pageSize,
+ fileType: myConstant.fileTypeVideo
+ }).then((res) => {
+ this.page.total = Number(res.data.total)
+ this.page.pageSize = Number(res.data.size);
+ this.data = res.data.records;
+ return res
+ })
+ },
+ showMyVideo(item) {
+ this.$emit('showMyVideo', {
+ id: item.id,
+ isAllowedComment: item.isAllowedComment,
+ introduce: item.introduce,
+ })
+ }
+ }
+ }
+</script>
+<style lang="less">
+ @--border-radius: 16px;
+ @--s-background: 16px;
+ @--animation-mo: margin 1s cubic-bezier(0.62, 0.21, 0.25, 1) 1 backwards, opacity .75s cubic-bezier(0.62, 0.21, 0.25, 1) 1 backwards;
- new this.$wow.WOW().init()
+ @font-face {
+ font-family: "iconfont";
+ /* Project id 2762112 */
+ src: url('http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/iconfont.woff2') format('woff2');
+ }
+
+ .gridClass {
+ grid-template-columns: repeat(4, 1fr);
+ display: grid;
+ clear: both;
+ gap: 2rem;
+ padding-bottom: 20px;
+ // background-color: #666;
+ user-select: none;
+
+ a {
+ color: #555;
+ }
+
+ .item1 {
+ grid-column-start: 1;
+ grid-column-end: 3;
+ }
+
+ .entry-preview {
+ border-radius: @--border-radius;
+ background: @--s-background, white;
+ animation: @--animation-mo;
+ transition: all .5s;
+ box-shadow: 0 5px 30px 0 rgba(0, 0, 0, .05);
+ // background-color: red;
+
+ display: flex;
+ }
+
+ .thumbnail_box {
+ width: 50%;
+ min-width: 50%;
+ left: 0;
+
+ .thumbnail {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ border-radius: @--border-radius;
+ overflow: hidden;
+ background: rgba(0, 0, 0, .05);
+
+ img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ transform: scale(1.1);
+ transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
+ border-radius: @--border-radius;
+ }
+ }
+ }
+
+ header {
+ display: block;
+ }
+
+ .entry-title,
+ .post_content {
+ margin: 0 0 .5rem 0;
+ }
+
+ h5 {
+ font-size: 1.05rem;
+ }
+
+ .entry-meta,
+ .post_content {
+ opacity: .6;
+ }
+
+ .post_content {
+
+ display: -webkit-box;
+ overflow: hidden;
+ -webkit-box-orient: vertical;
+ /* autoprefixer: off */
+ -webkit-line-clamp: 4;
+ /* autoprefixer: on */
+ }
+
+ .entry-preview .entry-meta {
+ display: flex;
+ font-size: .5rem;
+ padding: .5rem 0 0 0;
+ flex-wrap: wrap;
+ }
+
+ .vcard {
+ margin: 0 1em 0 0;
+ }
+
+ .entry-post {
+ padding: 1rem;
+ transition: all .5s;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ // height: 100%;
+ // padding: calc(70% + 1rem) 1rem 1rem 1rem;
}
- }
-</script>
-
-<style scoped>
- .test_wow {
-
- position: relative;
-
- width: 1000px;
-
- height: 400px;
-
- background: #212121;
-
- margin: 0 auto;
-
+ .tag-list a {
+ margin: 0 .5em 0 0;
+ font-size: 14px;
+ }
}
- .test_wow1 {
-
- position: relative;
-
- width: 1000px;
-
- height: 400px;
-
- background: #741919;
-
- margin: 0 auto;
-
+ .thumbnail_box:hover .thumbnail img {
+ transform: scale(1) translate3d(0, 0, 0);
+ filter: blur(10px) brightness(.8);
}
- .test_wow2 {
-
- position: relative;
-
- width: 1000px;
-
- height: 400px;
-
- background: #2b0f44;
-
- margin: 0 auto;
-
+ .thumbnail_box:hover .thumbnail:after {
+ width: 100%;
+ height: 100%;
+ opacity: 1;
}
- .test_wow3 {
-
- position: relative;
-
- width: 1000px;
-
- height: 400px;
-
- background: #558614;
-
- margin: 0 auto;
-
+ .thumbnail:before {
+ content: "\ec2a";
+ opacity: .1;
+ font-size: 3rem;
}
- .test_wow4 {
+ .thumbnail:after {
+ width: 70%;
+ border: 1px solid rgba(255, 255, 255, .75);
+ opacity: 0;
+ height: 70%;
+ transition: all .5s;
+ z-index: 2;
+ color: white;
+ border-radius: @--border-radius;
+ content: "\e627";
+ font-size: 1rem;
+ text-shadow: 0 1px 5px rgb(0 0 0 / 30%);
+ }
- position: relative;
+ .thumbnail:before,
+ .thumbnail:after {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-family: 'iconfont';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ overflow: hidden;
+ }
- width: 1000px;
-
- height: 400px;
-
- background: #440707;
-
- margin: 0 auto;
-
+ @media screen and (min-width:768px) {
+ .gridClass {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ }
+
+ @media screen and (max-width:767px) {
+ .gridClass {
+ grid-row-gap: 2rem;
+ grid-column-gap: 0rem;
+ grid-template-columns: repeat(1, 1fr);
+
+ .entry-preview {
+ display: block;
+ }
+
+ .thumbnail_box {
+ min-width: 100%;
+ }
+ }
}
</style>
--
Gitblit v1.9.1