From 10572998aa54d61c45df3e334eb01e44a15df729 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Wed, 10 Aug 2022 18:35:59 +0800
Subject: [PATCH] 常量提取,优化视频模块布局
---
src/components/mini/box15-videoPlayBox.vue | 188 ++++++++
src/api/fileManage.js | 11
src/components/group/articleListOld.vue | 0
src/components/mini/box10-add.vue | 49 +-
src/components/mini/box14-video.vue | 505 +++++++++++----------
src/components/mini/box14-video3.vue | 248 ++++++++++
/dev/null | 263 -----------
src/components/mini/mdDetail.vue | 16
src/components/group/MyVideo.vue | 17
src/components/mini/box-new-article.vue | 44 +
src/config/myConstant.js | 10
src/components/group/articleListScorll.vue | 6
src/components/layouts/baseLayout.vue | 6
13 files changed, 813 insertions(+), 550 deletions(-)
diff --git a/src/api/fileManage.js b/src/api/fileManage.js
index 0875988..76f2693 100644
--- a/src/api/fileManage.js
+++ b/src/api/fileManage.js
@@ -16,6 +16,17 @@
}
/**
+ * 自定义文件上传
+ */
+export function myFileInfoUpload (parameter) {
+ return axios({
+ url: '/outside/sysFileInfo/upload',
+ method: 'post',
+ data: parameter
+ })
+}
+
+/**
* 下载文件
*
* @author yubaoshan
diff --git a/src/components/group/MyVideo.vue b/src/components/group/MyVideo.vue
index 2e69c63..723d6a0 100644
--- a/src/components/group/MyVideo.vue
+++ b/src/components/group/MyVideo.vue
@@ -1,9 +1,9 @@
<template>
<div class="myModal">
- <a-modal v-model="visible" title="" :footer="null" :mask="false" :maskClosable="false" :placement="placement"
+ <a-modal v-model="visible" title="" :footer="null" :mask="false" :maskClosable="true"
:bodyStyle="{'overflow':'overlay','maxHeight': '550px'}">
- <div>11</div>
-
+ <div>{{this.placement}}</div>
+ <videoPlayBox></videoPlayBox>
</a-modal>
</div>
@@ -13,17 +13,21 @@
import {
history
} from '../../api/blogArticleComment.js'
-
+ import videoPlayBox from "../mini/box15-videoPlayBox.vue"
export default {
+ components: {
+ videoPlayBox
+ },
data() {
return {
visible: false,
- placement: "bottom"
+ placement: "fbottom"
}
},
beforeMount() {},
methods: {
- showModal() {
+ showModal(param) {
+ this.placement = param.id
this.visible = true;
},
handleCancel(e) {
@@ -34,7 +38,6 @@
}
</script>
<style scoped>
-
a {
color: black;
}
diff --git a/src/components/group/articleList.vue b/src/components/group/articleListOld.vue
similarity index 100%
rename from src/components/group/articleList.vue
rename to src/components/group/articleListOld.vue
diff --git a/src/components/group/articleListScorll.vue b/src/components/group/articleListScorll.vue
index d7d4aa5..0191c81 100644
--- a/src/components/group/articleListScorll.vue
+++ b/src/components/group/articleListScorll.vue
@@ -70,6 +70,12 @@
typeId: function(newValue, oldValue) {
this.busy = true;
this.$message.info('loading', 0.3);
+
+ //有条件不刷新
+ if (newValue == undefined && oldValue != "") {
+ return
+ }
+
this.onChange(1);
},
},
diff --git a/src/components/group/tempBoxActicle.v b/src/components/group/tempBoxActicle.v
deleted file mode 100644
index d7b481d..0000000
--- a/src/components/group/tempBoxActicle.v
+++ /dev/null
@@ -1,342 +0,0 @@
-<template>
- <div>
- <div class="recent-posts" id="recent-posts">
- <div class="recent-post-item">
- <div class="post_cover left_radius">
- <a href="#" title="使用KeyStore生成证书">
- <div class="block left_radius"></div>
- <img class="post_bg" src="https://unpkg.zhimg.com/ahzo@1.0.3/blogpic/1.jpg"
- onerror="this.onerror=null,this.src="/img/404.jpg"" alt="使用KeyStore生成证书">
- </a>
- </div>
- <div class="recent-post-info">
- <a class="article-title" href="#" title="使用KeyStore生成证书">使用KeyStore生成证书</a>
- <div class="article-meta-wrap">
- <span class="post-meta-date">
- <i class="far fa-calendar-alt"></i>
- <span class="article-meta-label"></span>
- <time datetime="2022-01-13T06:25:00.000Z" title=" 2022-01-13 14:25:00">2022-01-13</time>
- </span>
- <span class="article-meta">
- <span class="article-meta__separator">|</span>
- <i class="fas fa-inbox"></i><a class="article-meta__categories" href="#">随手记</a>
- </span>
- </div>
- <div class="content">
- 前言Keytool是一个Java数据证书的管理工具 ， 在keystore里，包含两种数据： 密钥实体（Key entity）：即密钥（secret...
- key）又或者是私钥和配对公钥（采用非对称加密） 可信任的证书实体（trusted certificate entries）：即证书（包含公钥） keytool常用命令: genkey
- 在用户主目录中创建一个默认文件”.keystore” alias 产生别名 keystore 指定密钥库的名称(产生的各类信息将不在.keystore文件中) keyalg
- 指定密钥的算法 (如
- RSA DSA（如果不指定默认采用DSA）) validity 指定创建的证书有效期多少天 keysize 指定密钥长度 storepass
- 指定密钥库的密码(获取keystore信息所需的密码)
- keypass 指定别名条目的密码(私钥的密码) dname 指定证书拥有者信息 例如：
- “CN=名字与姓氏,OU=组织单位名称,O=组织名称,L=城市或区域名称,ST=州或省份名称,C=单位的两字母国家代码” list 显示密钥库中的证书信息 keytool - ...
- </div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
- export default {
- }
-</script>
-
-<style lang="less">
- @card-bg: #f5f8fa;
- @card-box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px rgba(255, 255, 255, 1);
- @ahzoo-proportion: 1;
- @cursorURL: "https://blog.ahzoo.cn/blogpic/normal.cur";
- @global-font-size: 14px;
- @font-color: #666;
- @title-clolr: dimgray;
- @card-hover-box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1);
-
- #recent-posts>.recent-post-item {
- display: -webkit-box;
- display: -moz-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: box;
- display: flex;
- -webkit-box-orient: horizontal;
- -moz-box-orient: horizontal;
- -o-box-orient: horizontal;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-box-align: center;
- -moz-box-align: center;
- -o-box-align: center;
- -ms-flex-align: center;
- -webkit-align-items: center;
- align-items: center;
- border-radius: 12px 8px 8px 12px;
- background: var(--card-bg);
- -webkit-box-shadow: var(--card-box-shadow);
- box-shadow: var(--card-box-shadow);
- -webkit-transition: all .3s;
- -moz-transition: all .3s;
- -o-transition: all .3s;
- -ms-transition: all .3s;
- transition: all .3s;
-
- background: @card-bg;
- -webkit-box-shadow: @card-box-shadow;
- box-shadow: @card-box-shadow;
-
- }
-
- .recent-post-item a {
- // color: #99a9bf;
- text-decoration: none;
- word-wrap: break-word;
- -webkit-transition: all .2s;
- -moz-transition: all .2s;
- -o-transition: all .2s;
- -ms-transition: all .2s;
- transition: all .2s;
- overflow-wrap: break-word;
- background-color: transparent;
- }
-
- .recent-post-item {
- padding-left: calc(1.2rem * @ahzoo-proportion) !important;
- padding-right: calc(1.2rem * @ahzoo-proportion) !important;
- // font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Lato, Roboto, 'PingFang SC', 'Microsoft YaHei', sans-serif;
- line-height: 2;
-
- img {
- max-width: 100%;
- -webkit-transition: all .2s;
- -moz-transition: all .2s;
- -o-transition: all .2s;
- -ms-transition: all .2s;
- transition: all .2s;
- border-style: none;
- }
- }
-
- .recent-post-item * {
- cursor: url(@cursorURL), auto !important;
- font-size: @global-font-size;
- color: var(--font-color);
- }
-
- * {
- tap-highlight-color: transparent;
- -webkit-tap-highlight-color: transparent;
- box-sizing: border-box;
- }
-
- #recent-posts>.recent-post-item .post_cover {
- width: 33%;
- position: sticky;
-
- opacity: .8;
- padding: calc(1.2rem * @ahzoo-proportion) calc(0.2rem * @ahzoo-proportion);
- overflow: hidden;
- height: 100%;
- -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
- }
-
- #recent-posts>.recent-post-item .left_radius {
- border-radius: 8px 0 0 8px;
- }
-
- .block.left_radius {
- background: linear-gradient(to right, transparent, @card-bg 98%);
- position: absolute;
- width: 100%;
- height: calc(100% - 2.2rem * @ahzoo-proportion);
- z-index: 2;
- top: calc(1.1rem * @ahzoo-proportion);
- }
-
- #recent-posts>.recent-post-item .post_cover img.post_bg {
- border-radius: 15px;
- width: 100%;
- height: 100%;
- -webkit-transition: all .6s;
- -moz-transition: all .6s;
- -o-transition: all .6s;
- -ms-transition: all .6s;
- transition: all .6s;
- object-fit: cover;
- }
-
- #recent-posts>.recent-post-item>.recent-post-info {
- width: 77%;
- padding: 0px calc(1.2rem * @ahzoo-proportion);
- display: flex;
- flex-direction: column;
- overflow: hidden;
-
- a {
- text-decoration: none;
- -webkit-transition: all .2s;
- -moz-transition: all .2s;
- -o-transition: all .2s;
- -ms-transition: all .2s;
- transition: all .2s;
- overflow-wrap: break-word;
- }
- }
-
- #recent-posts>.recent-post-item>.recent-post-info>.article-title {
- order: 1;
- font-weight: 600;
- color: @title-clolr;
- font-size: 1.6em;
- margin-bottom: 0.3rem;
- line-height: 1.4;
- -webkit-transition: all .2s ease-in-out;
- -moz-transition: all .2s ease-in-out;
- -o-transition: all .2s ease-in-out;
- -ms-transition: all .2s ease-in-out;
- transition: all .2s ease-in-out;
-
- display: -webkit-box;
- overflow: hidden;
- -webkit-box-orient: vertical;
- /* autoprefixer: off */
- -webkit-line-clamp: 2;
- /* autoprefixer: on */
- }
-
-
-
- #recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {
- order: 3;
- color: #858585;
- font-size: 90%;
-
- .article-meta-label {
- padding-right: 0.2rem;
- }
- }
-
- #recent-posts>.recent-post-item>.recent-post-info>.content {
- opacity: 0;
- line-height: .8;
- transition: all .25s;
- color: #999;
- margin-bottom: 19px;
- text-overflow: ellipsis;
- order: 2;
- margin: 0;
-
- display: -webkit-box;
- overflow: hidden;
- -webkit-box-orient: vertical;
- /* autoprefixer: off */
- -webkit-line-clamp: 3;
- /* autoprefixer: on */
-
- }
-
- #recent-posts>.recent-post-item>.recent-post-info>.article-title:hover {
- color: #448aff;
- }
-
-
-
- //div本体阴影
- #recent-posts>.recent-post-item:hover {
- -webkit-box-shadow: @card-hover-box-shadow;
- box-shadow: @card-hover-box-shadow;
- }
-
- // 图片缩放
- #recent-posts>.recent-post-item:hover img.post_bg {
- -webkit-transform: scale(.9);
- -moz-transform: scale(.9);
- -o-transform: scale(.9);
- -ms-transform: scale(.9);
- transform: scale(.9);
- -webkit-box-shadow: @card-hover-box-shadow;
- box-shadow: @card-hover-box-shadow;
- }
-
- //内容缩放 内容显示
- #recent-posts>.recent-post-item:hover .recent-post-info .content {
- opacity: 1;
- line-height: 1.8;
- transition: all .25s;
- }
-
- #recent-posts>.recent-post-item .post_cover img.post_bg:hover {
- transform: scale(.9);
- }
-
- #recent-posts>.recent-post-item .post_cover img.post_bg:hover {
- -webkit-transform: scale(1.1);
- -moz-transform: scale(1.1);
- -o-transform: scale(1.1);
- -ms-transform: scale(1.1);
- transform: scale(1.1);
- }
-
- @media screen and (max-width:768px) {
- #recent-posts .recent-post-item .recent-post-info .article-title {
- font-size: 1.32em !important;
- margin-bottom: 0 !important;
- }
- }
-
- @media screen and (min-width: 769px) {
- #recent-posts>.recent-post-item>.recent-post-info>.content {
- opacity: 0;
- line-height: .8;
- transition: all .25s;
- color: #999;
- margin-bottom: 10px;
- display: -webkit-container;
- -webkit-line-clamp: 3;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- }
-
- @media screen and (max-width: 768px) {
- #recent-posts>.recent-post-item>.recent-post-info {
- width: 69%;
- font-size: 12px !important;
- margin: .7rem 0;
- }
- }
-
- @media screen and (max-width: 768px) {
- #recent-posts>.recent-post-item>.recent-post-info>.content {
- opacity: 1;
- line-height: 1.7;
- color: #999;
- display: -webkit-container;
- -webkit-line-clamp: 3;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- }
-
- @media screen and (min-width: 769px) {
- #recent-posts>.recent-post-item {
- height: 15em;
- }
- }
-
- @media screen and (max-width: 768px) {
- #recent-posts .recent-post-item {
- height: 12em !important;
- padding: 0;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- }
- }
-
- @media only screen and (max-width: 768px) {
- @ahzoo-proportion: 0.65;
- @global-font-size: 12px;
- }
-</style>
diff --git a/src/components/group/tempFormCheck.vue b/src/components/group/tempFormCheck.vue
deleted file mode 100644
index 47c5ffa..0000000
--- a/src/components/group/tempFormCheck.vue
+++ /dev/null
@@ -1,120 +0,0 @@
-<template>
- <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
- <a-form-model-item has-feedback label="Password" prop="pass">
- <a-input v-model="ruleForm.pass" type="password" autocomplete="off" />
- </a-form-model-item>
- <a-form-model-item has-feedback label="Confirm" prop="checkPass">
- <a-input v-model="ruleForm.checkPass" type="password" autocomplete="off" />
- </a-form-model-item>
- <a-form-model-item has-feedback label="Age" prop="age">
- <a-input v-model.number="ruleForm.age" />
- </a-form-model-item>
- <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
- <a-button type="primary" @click="submitForm('ruleForm')">
- Submit
- </a-button>
- <a-button style="margin-left: 10px" @click="resetForm('ruleForm')">
- Reset
- </a-button>
- </a-form-model-item>
- </a-form-model>
-</template>
-<script>
- export default {
- data() {
- let checkPending;
- let checkAge = (rule, value, callback) => {
- clearTimeout(checkPending);
- if (!value) {
- return callback(new Error('Please input the age'));
- }
- checkPending = setTimeout(() => {
- if (!Number.isInteger(value)) {
- callback(new Error('Please input digits'));
- } else {
- if (value < 18) {
- callback(new Error('Age must be greater than 18'));
- } else {
- callback();
- }
- }
- }, 1000);
- };
- let validatePass = (rule, value, callback) => {
- if (value === '') {
- callback(new Error('Please input the password'));
- } else {
- if (this.ruleForm.checkPass !== '') {
- this.$refs.ruleForm.validateField('checkPass');
- }
- callback();
- }
- };
- let validatePass2 = (rule, value, callback) => {
- if (value === '') {
- callback(new Error('Please input the password again'));
- } else if (value !== this.ruleForm.pass) {
- callback(new Error("Two inputs don't match!"));
- } else {
- callback();
- }
- };
-
- let validateContent = (rule, value, callback) => {
- console.log(1111);
- if (1 == 1) {
- this.$refs.ruleForm.validateField('checkPass');
- }
- callback();
- };
- return {
- ruleForm: {
- pass: '',
- checkPass: '',
- age: '',
- },
- rules: {
- pass: [{
- validator: validatePass,
- trigger: 'change'
- }],
- checkPass: [{
- validator: validatePass2,
- trigger: 'change'
- }],
- age: [{
- validator: checkAge,
- trigger: 'change'
- }],
- common: [{
- validator: validateContent,
- trigger: 'change'
- }],
- },
- layout: {
- labelCol: {
- span: 4
- },
- wrapperCol: {
- span: 14
- },
- },
- };
- },
- methods: {
- submitForm(formName) {
- this.$refs[formName].validate(valid => {
- if (valid) {
- alert('submit!');
- } else {
- console.log('error submit!!');
- return false;
- }
- });
- },
- resetForm(formName) {
- this.$refs[formName].resetFields();
- },
- },
- };
-</script>
diff --git a/src/components/group/tempFriendBox.vue b/src/components/group/tempFriendBox.vue
deleted file mode 100644
index 77b5928..0000000
--- a/src/components/group/tempFriendBox.vue
+++ /dev/null
@@ -1,175 +0,0 @@
-<template>
- <div style="display: flex;" class="link-box">
- <!-- <a href="#" target="_blank" class="no-underline"> -->
- <a href="#" class="no-underline">
- <div class="thumb">
- <img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野 の BLOG">
- </div>
- <div class="content">
- <p class="title">
- 长野 の BLOG
- </p>
- </div>
- </a>
- <a href="#" class="no-underline">
- <div class="thumb">
- <img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野 の BLOG">
- </div>
- <div class="content">
- <p class="title">
- 长野 の BLOG
- </p>
- </div>
- </a>
- <a href="#" class="no-underline">
- <div class="thumb">
- <img width="200" height="200" src="https://cdn.jsdelivr.net/gh/Musenxi/CDN/长野.jpg" alt="长野 の BLOG">
- </div>
- <div class="content">
- <p class="title">
- 长野 の BLOG
- </p>
- </div>
- </a>
-
- </div>
-</template>
-
-<script>
-</script>
-
-</script>
-
-<style lang="less">
- .myFriend {
- a {
- padding: 10px;
- }
- }
-
- .link-box a {
- width: 33.75rem;
- background: #fff;
- float: left;
- margin: 0 0 4.375rem;
- color: #2E2E2E;
- text-decoration: none;
- border-bottom: none;
- border-radius: .25rem;
- overflow: hidden;
- -webkit-touch-callout: none;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- // -moz-box-shadow: 0 0.0625rem 0.0625rem rgba(0, 0, 0, 0.1);
- -webkit-box-shadow: 0 3px.0625rem 0.0625rem #0000001a;
- -moz-box-shadow: 0 3px 0.0625rem #0000001a;
- box-shadow: 0 3px 0.0625rem #0000001a;
- -webkit-transform: translate3d(0, 0, 0);
- -moz-transform: translate3d(0, 0, 0);
- -ms-transform: translate3d(0, 0, 0);
- -o-transform: translate3d(0, 0, 0);
- transform: translate3d(0, 0, 0);
- -webkit-transition: .3s;
- -moz-transition: .3s;
- -ms-transition: .3s;
- -o-transition: .3s;
- transition: .3s;
- }
-
- .link-box a:hover:after {
- left: 0;
- width: 100%;
- -webkit-transition: width 350ms;
- -moz-transition: width 350ms;
- -ms-transition: width 350ms;
- -o-transition: width 350ms;
- transition: width 350ms;
- }
-
- .link-box a .thumb {
- font-size: 0;
- overflow: hidden;
- background-color: #fff;
- margin: 0;
- border-top-left-radius: .25rem;
- border-top-right-radius: .25rem;
- }
-
- .link-box a .thumb img {
- width: 100%;
- height: auto;
- position: relative;
- margin: 0;
- padding: 0;
- -webkit-transition: .4s;
- -moz-transition: .4s;
- -ms-transition: .4s;
- -o-transition: .4s;
- transition: .4s;
- }
-
- .link-box a .content {
- text-align: center;
- background-color: #fff;
- }
-
- .link-box a .content .title {
- text-align: center;
- padding: 1rem .25rem;
- font-weight: 500;
- color: #333;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- margin: 0;
- }
-
- .link-box a:hover,
- .link-box a:active {
- -webkit-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
- -moz-box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
- box-shadow: 0 1.375rem 2.6875rem rgba(0, 0, 0, 0.15);
- -webkit-transform: translateY(-0.25rem);
- -moz-transform: translateY(-0.25rem);
- -ms-transform: translateY(-0.25rem);
- -o-transform: translateY(-0.25rem);
- transform: translateY(-0.25rem);
- -moz-transform: none;
- }
-
- @media screen and (min-width: 1600px) {
- .link-box a {
- margin: 0 0.9375rem 3.75rem;
- width: -webkit-calc(200% / 5 - 1.875rem);
- width: calc(200% / 5 - 1.875rem);
- }
- }
-
- @media screen and (max-width: 1599px) and (min-width: 768px) {
- .link-box a {
- margin: 0 0.9375rem 3.75rem;
- width: -webkit-calc(150% / 4 - 1.875rem);
- width: calc(150% / 4 - 1.875rem);
- }
- }
-
-
-
- @media screen and (max-width: 500px) and (min-width: 319px) {
- .link-box a {
- margin: 0 0.75rem 1.5rem;
- width: -webkit-calc(50% - 1.5rem);
- width: calc(50% - 1.5rem);
- }
- }
-
- @media screen and (max-width: 767px) and (min-width: 501px) {
- .link-box a {
- margin: 0 0.9375rem 3.75rem;
- width: -webkit-calc(100% / 3 - 1.875rem);
- width: calc(100% / 3 - 1.875rem);
- }
- }
-</style>
diff --git a/src/components/group/tempScroll.vue b/src/components/group/tempScroll.vue
deleted file mode 100644
index c1c1962..0000000
--- a/src/components/group/tempScroll.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<template>
- <div v-infinite-scroll="handleInfiniteOnLoad" class="demo-infinite-container" :infinite-scroll-disabled="busy"
- :infinite-scroll-distance="10">
- <a-list :data-source="data">
-
- <a-list-item slot="renderItem" slot-scope="item, index">
- <a-list-item-meta :description="item.email">
- <a slot="title" :href="item.href">{{ item.name.last }}</a>
- <a-avatar slot="avatar" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
- </a-list-item-meta>
- <div>Content</div>
- </a-list-item>
-
- <div v-if="loading && !busy" class="demo-loading-container">
- <a-spin />
- </div>
- </a-list>
- </div>
-</template>
-<script>
- import infiniteScroll from 'vue-infinite-scroll';
-
- var tempData = [{
- "gender": "female",
- "name": {
- "title": "Miss",
- "first": "Alexis",
- "last": "Novak"
- },
- "email": "alexis.novak@example.com",
- "nat": "CA"
- }, {
- "gender": "female",
- "name": {
- "title": "Mrs",
- "first": "Rajaa",
- "last": "Seegers"
- },
- "email": "rajaa.seegers@example.com",
- "nat": "NL"
- }, {
- "gender": "male",
- "name": {
- "title": "Mr",
- "first": "Elias",
- "last": "Pelto"
- },
- "email": "elias.pelto@example.com",
- "nat": "FI"
- }, {
- "gender": "male",
- "name": {
- "title": "Mr",
- "first": "Mille",
- "last": "Christensen"
- },
- "email": "mille.christensen@example.com",
- "nat": "DK"
- }, {
- "gender": "male",
- "name": {
- "title": "Mr",
- "first": "Gerardo",
- "last": "Marquez"
- },
- "email": "gerardo.marquez@example.com",
- "nat": "ES"
- }];
-
- export default {
- directives: {
- infiniteScroll
- },
- data() {
- return {
- data: [],
- loading: false,
- busy: false,
- };
- },
- beforeMount() {
- this.data = tempData;
- },
- methods: {
-
- handleInfiniteOnLoad() {
- const data = this.data;
- this.loading = true;
- if (data.length > 10) {
- this.$message.warning('Infinite List loaded all');
- console.log(1);
- this.busy = true;
- this.loading = false;
- return;
- }
-
- setTimeout(function() {
- this.loading = false;
- }, 2000);
- this.data = data.concat(tempData);
-
- },
- },
- };
-</script>
-<style>
- .demo-infinite-container {
- border: 1px solid #e8e8e8;
- border-radius: 4px;
- overflow: auto;
- padding: 8px 24px;
- height: 300px;
- }
-
- .demo-loading-container {
- position: absolute;
- bottom: 40px;
- width: 100%;
- text-align: center;
- }
-</style>
diff --git a/src/components/layouts/baseLayout.vue b/src/components/layouts/baseLayout.vue
index 0f8f339..0d14dee 100644
--- a/src/components/layouts/baseLayout.vue
+++ b/src/components/layouts/baseLayout.vue
@@ -12,7 +12,7 @@
<a-layout-footer>
<AplayerBox />
<tagFooter />
- <MyVideo ref="MyVideo" />
+ <MyVideo ref="MyVideo" />
</a-layout-footer>
<a-back-top>
@@ -40,8 +40,8 @@
}
},
methods: {
- showMyVideo() {
- this.$refs.MyVideo.showModal();
+ showMyVideo(param) {
+ this.$refs.MyVideo.showModal(param);
},
// 下载文件
down: function() {
diff --git a/src/components/mini/box-new-article.vue b/src/components/mini/box-new-article.vue
index ee2ea16..7e442d8 100644
--- a/src/components/mini/box-new-article.vue
+++ b/src/components/mini/box-new-article.vue
@@ -4,8 +4,12 @@
<div class="miniTag" v-if="isTop==1">置顶</div>
<div class="post_cover left_radius" v-if="index%2==0">
- <a :href="jumpURL" target="_blank" class="no-underline" v-if="articleFileType==5"
- @click="showMsg(articleFileType,jumpURL)">
+ <router-link :to="{path:'/platform'}" :title="title" v-if="articleFileType==myConstant.fileTypeVideo">
+ <div class="block left_radius"></div>
+ <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
+ </router-link>
+ <a :href="jumpURL" target="_blank" class="no-underline"
+ v-else-if="articleFileType==myConstant.fileTypeShort" @click="showMsg(articleFileType,jumpURL)">
<div class="block left_radius"></div>
<img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
</a>
@@ -16,27 +20,22 @@
</div>
<div class="post_cover right_radius" v-else>
- <a :href="jumpURL" target="_blank" class="no-underline" v-if="articleFileType==5"
- @click="showMsg(articleFileType,jumpURL)">
+ <router-link :to="{path:'/platform'}" :title="title" v-if="articleFileType==myConstant.fileTypeVideo">
+ <div class="block left_radius"></div>
+ <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
+ </router-link>
+ <a :href="jumpURL" target="_blank" class="no-underline"
+ v-else-if="articleFileType==myConstant.fileTypeShort" @click="showMsg(articleFileType,jumpURL)">
<div class="block left_radius"></div>
<img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
</a>
<router-link :to="{path:'/mdDetail',query:{id:id}}" :title="title" v-else>
<div class="block right_radius"></div>
<img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
- <!-- <img class="post_bg" src="https://unpkg.zhimg.com/ahzo@1.0.3/blogpic/1.jpg" onerror="this.onerror=null,this.src="/img/404.jpg"" :alt="title"> -->
</router-link>
</div>
<div class="recent-post-info">
-
- <!-- <a :href="jumpURL" target="_blank" class="article-title" v-if="articleFileType==5"
- @click="showMsg(articleFileType,jumpURL)">
- <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" />
- <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" />
- {{title}}
- <a-badge :count="1" dot v-if="isAnyUpdate==1" title="最近有更新"></a-badge>
- </a> -->
<router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType}}"
class="article-title">
@@ -58,7 +57,7 @@
<a-icon type="book" />
<router-link :to="{path:'/articleList',query:{typeId:articleTypeId}}"
class="article-meta__categories"> {{articleTypeName}}</router-link>
- <span v-if="articleFileType==5">
+ <span v-if="articleFileType==myConstant.fileTypeShort">
<span v-if="jumpURL !=null && jumpURL!=''">
<span class="article-meta__separator" style="margin: 0px 3px ;">|</span>
<span class="post-meta-date">
@@ -73,6 +72,17 @@
<a-icon type="thunderbolt" />碎碎念
</span>
</span>
+ </span>
+
+ <span v-if="articleFileType==myConstant.fileTypeVideo">
+ <span v-if="jumpURL !=null && jumpURL!=''">
+ <span class="article-meta__separator" style="margin: 0px 3px ;">|</span>
+ <span class="post-meta-date">
+ <a-icon type="video-camera" />
+ <a :href="jumpURL" target="_blank" class="no-underline"> 视频 </a>
+ </span>
+ </span>
+
</span>
<!-- <a class="article-meta__categories" href="#"> {{tag}}</a> -->
</span>
@@ -90,10 +100,13 @@
NotificationOutlined
} from '@ant-design/icons-vue';
+ import myConstant from "../../config/myConstant.js"
+
+
export default {
methods: {
showMsg(articleFileType, jumpURL) {
- if (articleFileType == 5 && (jumpURL == null || jumpURL == "")) {
+ if (articleFileType == myConstant.fileTypeShort && (jumpURL == null || jumpURL == "")) {
this.$message.info('这只是一句碎碎念,没有更多内容啦', 3);
return
}
@@ -148,6 +161,7 @@
},
data() {
return {
+ myConstant: myConstant,
img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/1.jpg\"",
}
}
diff --git a/src/components/mini/box10-add.vue b/src/components/mini/box10-add.vue
index 5a8b1f0..705e398 100644
--- a/src/components/mini/box10-add.vue
+++ b/src/components/mini/box10-add.vue
@@ -21,17 +21,11 @@
</span>
</a-form-model-item>
-
<a-form-model-item label="日志文件" v-show="!form.online">
- <!-- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
- :default-file-list="form.blogFileList">
- <a-button>
- <a-icon type="upload" /> 限 markdown/html
- </a-button>
- </a-upload> -->
<a-upload :customRequest="customRequest" name="file" :showUploadList="true" @change="handleChange"
- :default-file-list="form.blogFileList" :beforeUpload="beforeUpload">
+ :default-file-list="form.blogFileList" :beforeUpload="beforeUpload"
+ :data="{'fileType':fileTypeMarkDown}">
<a-button>
<a-icon type="upload" />限 markdown/html
@@ -69,13 +63,16 @@
<a-form-model-item label=" 日志类型">
<a-select v-model="form.blogType" mode="default" placeholder=""
:getPopupContainer="getCalendarContainer()">
- <a-select-option value="1">
+ <a-select-option value="1">
markdown
</a-select-option>
- <a-select-option value="2">
+ <a-select-option value="2">
html
</a-select-option>
- <a-select-option value="5">
+ <a-select-option value="3">
+ video
+ </a-select-option>
+ <a-select-option value="5">
fast(闪念)
</a-select-option>
</a-select>
@@ -106,16 +103,9 @@
<a-form-model-item label="封面">
- <!-- <a-upload action="https://www.mocky.io/v2/5cc8019d300000980a055e76" list-type="picture"
- :default-file-list="form.coverFileList" class="upload-list-inline">
- <a-button>
- <a-icon type="upload" /> jpg/png/jpeg..
- </a-button>
- </a-upload> -->
-
<a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture"
- @change="handleChangeCoverFile"
- :default-file-list="form.coverFileList">
+ @change="handleChangeCoverFile" :default-file-list="form.coverFileList"
+ :beforeUpload="beforeUploadCover" :data="{'fileType':fileTypeCover}">
<a-button>
<a-icon type="upload" />jpg/png/jpeg..
</a-button>
@@ -188,13 +178,15 @@
<script>
import moment from "moment";
import {
- sysFileInfoUpload
+ sysFileInfoUpload,
+ myFileInfoUpload
} from '../../api/fileManage.js';
import {
queryBlogArticleType
} from '../../api/blogArticleType.js'
+ import myConstant from "../../config/myConstant.js"
export default {
beforeMount() {
@@ -222,6 +214,8 @@
};
return {
+ fileTypeMarkDown: myConstant.fileTypeMarkDown,
+ fileTypeCover: myConstant.fileTypeCover,
blogArticleType: [],
tags: [],
inputVisible: false,
@@ -244,7 +238,7 @@
publishDate: "",
lock: false,
top: false,
- sliderValue:50,
+ sliderValue: 50,
auth: 1,
password: "",
fileId: null,
@@ -295,6 +289,13 @@
};
},
methods: {
+
+ beforeUploadCover(file, fileList) {
+ if (this.form.coverFileList.length > 1) {
+ this.$message.error('这里最多上传一个文件');
+ return false;
+ }
+ },
beforeUpload(file, fileList) {
return new Promise((resolve, reject) => {
if (this.form.fileId != null) {
@@ -345,7 +346,9 @@
customRequest(option) {
const formData = new FormData()
formData.append('file', option.file)
- sysFileInfoUpload(formData).then((res) => {
+ formData.append('fileType', option.data.fileType)
+ formData.append('authCode', this.form.secret)
+ myFileInfoUpload(formData).then((res) => {
if (res.success) {
this.$message.success('上传成功')
diff --git a/src/components/mini/box14-video.vue b/src/components/mini/box14-video.vue
index 91aced2..9e794c3 100644
--- a/src/components/mini/box14-video.vue
+++ b/src/components/mini/box14-video.vue
@@ -1,248 +1,291 @@
-<style lang="less" scoped>
- .videoBoxList {
- display: flex;
- // justify-content: space-evenly;
- flex-wrap: wrap;
- // align-content:flex-start;
- min-height: 700px;
- align-items: stretch;
- }
-
- .myVideo {
- position: relative;
- // width: 220px;
- // height: 140px;
- width: 300px;
- height: 180px;
- background-color: #565656;
- border-radius: 10px;
- margin: 10px;
- display: flex;
-
- .face {
- z-index: 1;
- }
-
- img {
- max-width: 100%;
- }
- }
-
-
- .myVideo:hover {
- .mark {
- background-color: #000;
- display: initial;
- }
-
- .player-video-state {
- // display: initial;
- }
- }
-
-
-
-
- .dplayer {
- width: 500px;
- }
-
- .mark {
- opacity: 0.45;
- width: 100%;
- height: 100%;
- position: absolute;
- display: none;
- }
-
- .player-video-state {
- // position: absolute;
- left: 43%;
- top: 35%;
- width: 50px;
- height: 50px;
- display: none;
- }
-</style>
-
<template>
<div>
- <div class="videoBoxList">
- <div class="myVideo" v-for=" (temp,index) in ['test1','test2','test3','test4','test5']">
- <div :id="temp" :ref="temp" class="dplayer"></div>
- <!-- <div class="mark" ></div> -->
- <!-- <img src="qq.png"> -->
- <!-- 视频 -->
- <div class="player-video-state">
- <span class="bp-svgicon">
- <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink">
- <defs>
- <path id="pid-1-svgo-a" d="M0 0h80v80H0z"></path>
- <path
- d="M52.546 8.014a3.998 3.998 0 014.222 3.077c.104.446.093.808.039 1.138a2.74 2.74 0 01-.312.881c-.073.132-.16.254-.246.376l-.257.366-.521.73c-.7.969-1.415 1.926-2.154 2.866l-.015.02a240.945 240.945 0 015.986.341l1.643.123.822.066.41.034.206.018.103.008.115.012c1.266.116 2.516.45 3.677.975a11.663 11.663 0 013.166 2.114c.931.87 1.719 1.895 2.321 3.022a11.595 11.595 0 011.224 3.613c.03.157.046.316.068.474l.015.119.013.112.022.206.085.822.159 1.646c.1 1.098.19 2.198.27 3.298.315 4.4.463 8.829.36 13.255a166.489 166.489 0 01-.843 13.213c-.012.127-.034.297-.053.454a7.589 7.589 0 01-.072.475l-.04.237-.05.236a11.762 11.762 0 01-.74 2.287 11.755 11.755 0 01-5.118 5.57 11.705 11.705 0 01-3.623 1.263c-.158.024-.316.052-.475.072l-.477.053-.821.071-1.644.134c-1.096.086-2.192.16-3.288.23a260.08 260.08 0 01-6.578.325c-8.772.324-17.546.22-26.313-.302a242.458 242.458 0 01-3.287-.22l-1.643-.129-.822-.069-.41-.035-.206-.018c-.068-.006-.133-.01-.218-.02a11.566 11.566 0 01-3.7-.992 11.732 11.732 0 01-5.497-5.178 11.73 11.73 0 01-1.215-3.627c-.024-.158-.051-.316-.067-.475l-.026-.238-.013-.119-.01-.103-.07-.823-.132-1.648a190.637 190.637 0 01-.22-3.298c-.256-4.399-.358-8.817-.258-13.233.099-4.412.372-8.811.788-13.197a11.65 11.65 0 013.039-6.835 11.585 11.585 0 016.572-3.563c.157-.023.312-.051.47-.07l.47-.05.82-.07 1.643-.13a228.493 228.493 0 016.647-.405l-.041-.05a88.145 88.145 0 01-2.154-2.867l-.52-.73-.258-.366c-.086-.122-.173-.244-.246-.376a2.74 2.74 0 01-.312-.881 2.808 2.808 0 01.04-1.138 3.998 3.998 0 014.22-3.077 2.8 2.8 0 011.093.313c.294.155.538.347.742.568.102.11.19.23.28.35l.27.359.532.72a88.059 88.059 0 012.06 2.936 73.036 73.036 0 011.929 3.03c.187.313.373.628.556.945 2.724-.047 5.447-.056 8.17-.038.748.006 1.496.015 2.244.026.18-.313.364-.624.549-.934a73.281 73.281 0 011.93-3.03 88.737 88.737 0 012.059-2.935l.533-.72.268-.359c.09-.12.179-.24.281-.35a2.8 2.8 0 011.834-.881zM30.13 34.631a4 4 0 00-.418 1.42 91.157 91.157 0 00-.446 9.128c0 2.828.121 5.656.364 8.483l.11 1.212a4 4 0 005.858 3.143c2.82-1.498 5.55-3.033 8.193-4.606a177.41 177.41 0 005.896-3.666l1.434-.942a4 4 0 00.047-6.632 137.703 137.703 0 00-7.377-4.708 146.88 146.88 0 00-6.879-3.849l-1.4-.725a4 4 0 00-5.382 1.742z"
- id="pid-1-svgo-d"></path>
- <filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%"
- filterUnits="objectBoundingBox" id="pid-1-svgo-c">
- <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
- <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1">
- </feGaussianBlur>
- <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"
- in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
- <feOffset in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
- <feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2"
- result="shadowBlurOuter2">
- </feGaussianBlur>
- <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
- in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
- <feMerge>
- <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
- <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
- </feMerge>
- </filter>
- </defs>
- <g fill="none" fill-rule="evenodd" opacity=".8">
- <mask id="pid-1-svgo-b" fill="#fff">
- <use xlink:href="#pid-1-svgo-a"></use>
- </mask>
- <g mask="url(#pid-1-svgo-b)">
- <use fill="#000" filter="url(#pid-1-svgo-c)" xlink:href="#pid-1-svgo-d"></use>
- <use fill="#FFF" xlink:href="#pid-1-svgo-d"></use>
- </g>
- </g>
- </svg>
- </span>
- </div>
- </div>
+ <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.id)">
+ <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">
+ <a href="#" rel="bookmark">{{item.title}}</a>
+ </h5>
+ <div class="post_content">
+ {{item.introduce}}
+ </div>
+ </div>
+ <div class="entry-meta">
+ <div class="post-categories">
+ <span class="tag vcard">
+ <a-icon type="book" />
+ <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>
+
+ </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 Hls from 'hls.js'
- import DPlayer from 'dplayer'
+ import {
+ queryBlogArticleList
+ } from '../../api/blogArticle.js'
+ import myConstant from "../../config/myConstant.js"
+
export default {
data() {
return {
- dp: null,
- video: {},
- video1: {},
- video2: {},
- }
- },
- methods: {
- myPlay() {
- this.$message.info("start play..")
- },
- loadVideo(videoInfo, index) {
- this.dp = new DPlayer({
- element: document.getElementById(index),
- //logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
- // hotkey: true, // 是否支持热键，调节音量，播放，暂停等
- mutex: false, // 防止同时播放多个用户，在该用户开始播放时暂停其他用户
- theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
- loop: false, // 是否自动循环
- lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
- // screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
- preload: "auto", // 自动预加载
- volume: 0.1, // 初始化音量
- playbackSpeed: [2, 1, 0.5], //可选的播放速度，可自定义
- contextmenu: [
- // 自定义上下文菜单
- // 右键菜单
- {
- text: "b站",
- link: "https://www.bilibili.com"
- },
- {
- text: "选项二",
- click: player => {
- console.log(player);
- }
- }
- ],
- highlight: [
- //进度条上的自定义时间标记
- // 进度条时间点高亮
- {
- text: "10M",
- time: 60
- },
- {
- text: "20M",
- time: 120
- }
- ],
- video: {
- pic: videoInfo.img, // 视频封面
- url: videoInfo.url,
- type: videoInfo.type,
- customType: {
- customHls: function(video, player) {
- const hls = new Hls()
- hls.loadSource(video.src)
- hls.attachMedia(video)
- }
- }
- }
- })
+ 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.video1 = {
- img: "http://t.inleft.com/share/media_photo/faye_video.png",
- url: "http://t.inleft.com/share/myVideo/faye/faye.m3u8",
- type: "customHls"
+ 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(param) {
+ this.$emit('showMyVideo', {
+ id: param
+ })
}
- this.video2 = {
- img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
- url: "http://t.inleft.com/share/myVideo/canon/canon.m3u8",
- type: "customHls"
- }
- this.video3 = {
- img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
- url: "http://t.inleft.com/share/mp3/EOPMusic%283%29.mp3",
- type: "normal"
- }
- this.video4 = {
- img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
- url: "http://t.inleft.com/share/mp3/EOPMusic%284%29.mp3",
- type: "normal"
- }
- this.video5 = {
- img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
- url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
- type: "normal"
- }
-
- // getVideo: ajax request for getting videoInfo
- /* getVideo().then(res => {
- this.video = res.data.video
- this.laodVideo(this.video)
- }) */
- this.video = {
- //封面
- //img: "https://cn.bing.com/th?id=OHR.MeotoIwa_ZH-CN3126370410_1920x1080.jpg&rf=LaDigue_1920x1080.jpg",
- img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
- // video: "https://vod3.bdzybf3.com/20210509/ZMHA3RpS/1000kb/hls/index.m3u8",
- // video: "http://t.inleft.com/share/ckplayer/ckplayer-master/sample/test/video_tieba.m3u8",
- // video: videoUrl,
- // video: "http://t.inleft.com/share/mp3/inleft-test-20211103-rainbow.mp3",
- }
- this.loadVideo(this.video1, "test1")
- this.loadVideo(this.video2, "test2")
- this.loadVideo(this.video3, "test3")
- this.loadVideo(this.video4, "test4")
- this.loadVideo(this.video5, "test5")
-
- // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
- // document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
- document.querySelector(".dplayer-mask").remove();
- document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
- let length = document.querySelectorAll(".dplayer-menu-item").length;
- document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
- document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
}
}
</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;
+
+ @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;
+
+ 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;
+ justify-content: space-between;
+ 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;
+
+ }
+
+ .tag-list a {
+ margin: 0 .5em 0 0;
+ font-size: 14px;
+ }
+ }
+
+ .thumbnail_box:hover .thumbnail img {
+ transform: scale(1) translate3d(0, 0, 0);
+ filter: blur(10px) brightness(.8);
+ }
+
+ .thumbnail_box:hover .thumbnail:after {
+ width: 100%;
+ height: 100%;
+ opacity: 1;
+ }
+
+ .thumbnail:before {
+ content: "\ec2a";
+ opacity: .1;
+ font-size: 3rem;
+ }
+
+ .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%);
+ }
+
+ .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;
+ }
+
+ @media screen and (max-width:1024px) {
+ .gridClass {
+ grid-row-gap: 2rem;
+ grid-column-gap: 0rem;
+ grid-template-columns: repeat(1, 1fr);
+
+ .entry-preview {
+ display: block;
+ }
+
+ .thumbnail_box {
+ min-width: 100%;
+ }
+ }
+
+
+ }
+
+ @media screen and (min-width:1025px) {
+ .gridClass {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ }
+</style>
diff --git a/src/components/mini/box14-video2.vue b/src/components/mini/box14-video2.vue
deleted file mode 100644
index 6a87937..0000000
--- a/src/components/mini/box14-video2.vue
+++ /dev/null
@@ -1,263 +0,0 @@
-<template>
- <div class="gridClass">
- <div class="entry-preview">
- <div class="thumbnail_box" @click="showMyVideo()">
- <div class="thumbnail">
- <img src="http://t.inleft.com/share/media_photo/faye_video.png" alt="" loading="lazy">
- </div>
- </div>
- <div class="entry-post">
- <div class="entry-header">
- <h5 class="entry-title">
- <a href="https://www.thyuu.com/word/note/49306" rel="bookmark">翻奏·Faye's Theme</a>
- </h5>
- <div class="post_content">
- 出自高瞰/的独立游戏(寻找天堂)
- <br>
- 时间:2020.02某个不眠的深夜
- <br>
- 音源/录像: es110的内置录音/mi 9的普通摄像
- <br>
- 剪辑:pr(其实就贴了一张图,一镜到底)
- </div>
- </div>
- <div class="entry-meta">
- <div class="post-categories">
- <span class="tag vcard">
- <a href="https://www.thyuu.com/category/word/note" rel="category tag">随心杂记</a>
- </span>
- <span class="tag-list">
- <a href="https://www.thyuu.com/tag/%e5%bd%b1%e8%af%84" rel="tag">影评</a>
- <a href="https://www.thyuu.com/tag/%e7%94%b5%e5%bd%b1" rel="tag">电影</a>
- <a href="https://www.thyuu.com/tag/%e8%9c%98%e8%9b%9b%e4%be%a0" rel="tag">蜘蛛侠</a>
- </span>
- </div>
- <div class="post-on">
- <span class="entry-date">
- <a href="https://www.thyuu.com/word/note/49306" title="22:13" rel="bookmark">
- <time datetime="2022-03-22T22:13:02+08:00">5月前</time>
- </a>
- </span>
- </div>
- </div>
- </div>
-
- </div>
-
- <div class="entry-preview">
- <div class="thumbnail_box">
- <div class="thumbnail ">
- <img src="http://t.inleft.com/share/media_photo/background.jpg" alt="" loading="lazy">
- </div>
- </div>
- </div>
- <div class="entry-preview ">
- <div class="thumbnail_box ">
- <div class="thumbnail ">
- <img src="http://t.inleft.com/share/media_photo/cat.png" alt="" loading="lazy">
- </div>
- </div>
- </div>
- <div class="entry-preview ">
- <div class="thumbnail_box">
- <div class="thumbnail ">
- <img src="http://t.inleft.com/share/media_photo/faye_video.png" alt="" loading="lazy">
- </div>
- </div>
- </div>
- <div class="entry-preview ">
- <div class="thumbnail_box">
- <div class="thumbnail ">
- <img src="http://t.inleft.com/share/media_photo/faye_video.png" alt="" loading="lazy">
- </div>
- </div>
- </div>
-
- </div>
-</template>
-<script>
- export default {
- methods: {
- showMyVideo() {
- console.log(22);
- this.$emit('showMyVideo')
- }
- }
- }
-</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;
-
- @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;
- // background-color: #666;
-
- 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;
- }
-
- .entry-preview .entry-meta {
- display: flex;
- justify-content: space-between;
- font-size: .5rem;
- padding: .5rem 0 0 0;
- flex-wrap: wrap;
- }
-
- .vcard {
- margin: 0 1em 0 0;
- }
-
- .entry-post {
- padding: 1rem;
- transition: all .5s;
- // height: 100%;
- // padding: calc(70% + 1rem) 1rem 1rem 1rem;
- // display: flex;
- // flex-direction: column;
- // justify-content: space-between;
- }
-
- .tag-list a {
- margin: 0 .5em 0 0;
- font-size: 14px;
- }
- }
-
- .thumbnail_box:hover .thumbnail img {
- transform: scale(1) translate3d(0, 0, 0);
- filter: blur(10px) brightness(.8);
- }
-
- .thumbnail_box:hover .thumbnail:after {
- width: 100%;
- height: 100%;
- opacity: 1;
- }
-
- .thumbnail:before {
- content: "\ec2a";
- opacity: .1;
- font-size: 3rem;
- }
-
- .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%);
- }
-
- .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;
- }
-
- @media screen and (max-width:1024px) {
- .gridClass {
- grid-row-gap: 2rem;
- grid-column-gap: 0rem;
- grid-template-columns: repeat(1, 1fr);
-
- .entry-preview {
- display: block;
- }
-
- .thumbnail_box {
- min-width: 100%;
- }
- }
-
-
- }
-
- @media screen and (min-width:1025px) {
- .gridClass {
- grid-template-columns: repeat(2, 1fr);
- }
- }
-</style>
diff --git a/src/components/mini/box14-video3.vue b/src/components/mini/box14-video3.vue
new file mode 100644
index 0000000..91aced2
--- /dev/null
+++ b/src/components/mini/box14-video3.vue
@@ -0,0 +1,248 @@
+<style lang="less" scoped>
+ .videoBoxList {
+ display: flex;
+ // justify-content: space-evenly;
+ flex-wrap: wrap;
+ // align-content:flex-start;
+ min-height: 700px;
+ align-items: stretch;
+ }
+
+ .myVideo {
+ position: relative;
+ // width: 220px;
+ // height: 140px;
+ width: 300px;
+ height: 180px;
+ background-color: #565656;
+ border-radius: 10px;
+ margin: 10px;
+ display: flex;
+
+ .face {
+ z-index: 1;
+ }
+
+ img {
+ max-width: 100%;
+ }
+ }
+
+
+ .myVideo:hover {
+ .mark {
+ background-color: #000;
+ display: initial;
+ }
+
+ .player-video-state {
+ // display: initial;
+ }
+ }
+
+
+
+
+ .dplayer {
+ width: 500px;
+ }
+
+ .mark {
+ opacity: 0.45;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ display: none;
+ }
+
+ .player-video-state {
+ // position: absolute;
+ left: 43%;
+ top: 35%;
+ width: 50px;
+ height: 50px;
+ display: none;
+ }
+</style>
+
+<template>
+ <div>
+ <div class="videoBoxList">
+ <div class="myVideo" v-for=" (temp,index) in ['test1','test2','test3','test4','test5']">
+ <div :id="temp" :ref="temp" class="dplayer"></div>
+ <!-- <div class="mark" ></div> -->
+ <!-- <img src="qq.png"> -->
+ <!-- 视频 -->
+ <div class="player-video-state">
+ <span class="bp-svgicon">
+ <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <path id="pid-1-svgo-a" d="M0 0h80v80H0z"></path>
+ <path
+ d="M52.546 8.014a3.998 3.998 0 014.222 3.077c.104.446.093.808.039 1.138a2.74 2.74 0 01-.312.881c-.073.132-.16.254-.246.376l-.257.366-.521.73c-.7.969-1.415 1.926-2.154 2.866l-.015.02a240.945 240.945 0 015.986.341l1.643.123.822.066.41.034.206.018.103.008.115.012c1.266.116 2.516.45 3.677.975a11.663 11.663 0 013.166 2.114c.931.87 1.719 1.895 2.321 3.022a11.595 11.595 0 011.224 3.613c.03.157.046.316.068.474l.015.119.013.112.022.206.085.822.159 1.646c.1 1.098.19 2.198.27 3.298.315 4.4.463 8.829.36 13.255a166.489 166.489 0 01-.843 13.213c-.012.127-.034.297-.053.454a7.589 7.589 0 01-.072.475l-.04.237-.05.236a11.762 11.762 0 01-.74 2.287 11.755 11.755 0 01-5.118 5.57 11.705 11.705 0 01-3.623 1.263c-.158.024-.316.052-.475.072l-.477.053-.821.071-1.644.134c-1.096.086-2.192.16-3.288.23a260.08 260.08 0 01-6.578.325c-8.772.324-17.546.22-26.313-.302a242.458 242.458 0 01-3.287-.22l-1.643-.129-.822-.069-.41-.035-.206-.018c-.068-.006-.133-.01-.218-.02a11.566 11.566 0 01-3.7-.992 11.732 11.732 0 01-5.497-5.178 11.73 11.73 0 01-1.215-3.627c-.024-.158-.051-.316-.067-.475l-.026-.238-.013-.119-.01-.103-.07-.823-.132-1.648a190.637 190.637 0 01-.22-3.298c-.256-4.399-.358-8.817-.258-13.233.099-4.412.372-8.811.788-13.197a11.65 11.65 0 013.039-6.835 11.585 11.585 0 016.572-3.563c.157-.023.312-.051.47-.07l.47-.05.82-.07 1.643-.13a228.493 228.493 0 016.647-.405l-.041-.05a88.145 88.145 0 01-2.154-2.867l-.52-.73-.258-.366c-.086-.122-.173-.244-.246-.376a2.74 2.74 0 01-.312-.881 2.808 2.808 0 01.04-1.138 3.998 3.998 0 014.22-3.077 2.8 2.8 0 011.093.313c.294.155.538.347.742.568.102.11.19.23.28.35l.27.359.532.72a88.059 88.059 0 012.06 2.936 73.036 73.036 0 011.929 3.03c.187.313.373.628.556.945 2.724-.047 5.447-.056 8.17-.038.748.006 1.496.015 2.244.026.18-.313.364-.624.549-.934a73.281 73.281 0 011.93-3.03 88.737 88.737 0 012.059-2.935l.533-.72.268-.359c.09-.12.179-.24.281-.35a2.8 2.8 0 011.834-.881zM30.13 34.631a4 4 0 00-.418 1.42 91.157 91.157 0 00-.446 9.128c0 2.828.121 5.656.364 8.483l.11 1.212a4 4 0 005.858 3.143c2.82-1.498 5.55-3.033 8.193-4.606a177.41 177.41 0 005.896-3.666l1.434-.942a4 4 0 00.047-6.632 137.703 137.703 0 00-7.377-4.708 146.88 146.88 0 00-6.879-3.849l-1.4-.725a4 4 0 00-5.382 1.742z"
+ id="pid-1-svgo-d"></path>
+ <filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%"
+ filterUnits="objectBoundingBox" id="pid-1-svgo-c">
+ <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+ <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1">
+ </feGaussianBlur>
+ <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0"
+ in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+ <feOffset in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+ <feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2"
+ result="shadowBlurOuter2">
+ </feGaussianBlur>
+ <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+ in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix>
+ <feMerge>
+ <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+ <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+ </feMerge>
+ </filter>
+ </defs>
+ <g fill="none" fill-rule="evenodd" opacity=".8">
+ <mask id="pid-1-svgo-b" fill="#fff">
+ <use xlink:href="#pid-1-svgo-a"></use>
+ </mask>
+ <g mask="url(#pid-1-svgo-b)">
+ <use fill="#000" filter="url(#pid-1-svgo-c)" xlink:href="#pid-1-svgo-d"></use>
+ <use fill="#FFF" xlink:href="#pid-1-svgo-d"></use>
+ </g>
+ </g>
+ </svg>
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ import Hls from 'hls.js'
+ import DPlayer from 'dplayer'
+
+ export default {
+ data() {
+ return {
+ dp: null,
+ video: {},
+ video1: {},
+ video2: {},
+ }
+ },
+ methods: {
+ myPlay() {
+ this.$message.info("start play..")
+ },
+ loadVideo(videoInfo, index) {
+ this.dp = new DPlayer({
+ element: document.getElementById(index),
+ //logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
+ // hotkey: true, // 是否支持热键，调节音量，播放，暂停等
+ mutex: false, // 防止同时播放多个用户，在该用户开始播放时暂停其他用户
+ theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
+ loop: false, // 是否自动循环
+ lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
+ // screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
+ preload: "auto", // 自动预加载
+ volume: 0.1, // 初始化音量
+ playbackSpeed: [2, 1, 0.5], //可选的播放速度，可自定义
+ contextmenu: [
+ // 自定义上下文菜单
+ // 右键菜单
+ {
+ text: "b站",
+ link: "https://www.bilibili.com"
+ },
+ {
+ text: "选项二",
+ click: player => {
+ console.log(player);
+ }
+ }
+ ],
+ highlight: [
+ //进度条上的自定义时间标记
+ // 进度条时间点高亮
+ {
+ text: "10M",
+ time: 60
+ },
+ {
+ text: "20M",
+ time: 120
+ }
+ ],
+ video: {
+ pic: videoInfo.img, // 视频封面
+ url: videoInfo.url,
+ type: videoInfo.type,
+ customType: {
+ customHls: function(video, player) {
+ const hls = new Hls()
+ hls.loadSource(video.src)
+ hls.attachMedia(video)
+ }
+ }
+ }
+ })
+ }
+ },
+ mounted() {
+ this.video1 = {
+ img: "http://t.inleft.com/share/media_photo/faye_video.png",
+ url: "http://t.inleft.com/share/myVideo/faye/faye.m3u8",
+ type: "customHls"
+ }
+ this.video2 = {
+ img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
+ url: "http://t.inleft.com/share/myVideo/canon/canon.m3u8",
+ type: "customHls"
+ }
+ this.video3 = {
+ img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
+ url: "http://t.inleft.com/share/mp3/EOPMusic%283%29.mp3",
+ type: "normal"
+ }
+ this.video4 = {
+ img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
+ url: "http://t.inleft.com/share/mp3/EOPMusic%284%29.mp3",
+ type: "normal"
+ }
+ this.video5 = {
+ img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
+ url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
+ type: "normal"
+ }
+
+ // getVideo: ajax request for getting videoInfo
+ /* getVideo().then(res => {
+ this.video = res.data.video
+ this.laodVideo(this.video)
+ }) */
+ this.video = {
+ //封面
+ //img: "https://cn.bing.com/th?id=OHR.MeotoIwa_ZH-CN3126370410_1920x1080.jpg&rf=LaDigue_1920x1080.jpg",
+ img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
+ // video: "https://vod3.bdzybf3.com/20210509/ZMHA3RpS/1000kb/hls/index.m3u8",
+ // video: "http://t.inleft.com/share/ckplayer/ckplayer-master/sample/test/video_tieba.m3u8",
+ // video: videoUrl,
+ // video: "http://t.inleft.com/share/mp3/inleft-test-20211103-rainbow.mp3",
+ }
+ this.loadVideo(this.video1, "test1")
+ this.loadVideo(this.video2, "test2")
+ this.loadVideo(this.video3, "test3")
+ this.loadVideo(this.video4, "test4")
+ this.loadVideo(this.video5, "test5")
+
+ // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
+ // document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
+ document.querySelector(".dplayer-mask").remove();
+ document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
+ let length = document.querySelectorAll(".dplayer-menu-item").length;
+ document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
+ document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
+ }
+ }
+</script>
diff --git a/src/components/mini/box15-videoPlayBox.vue b/src/components/mini/box15-videoPlayBox.vue
new file mode 100644
index 0000000..b009a2b
--- /dev/null
+++ b/src/components/mini/box15-videoPlayBox.vue
@@ -0,0 +1,188 @@
+<template>
+ <div>
+ <div class="myVideo">
+ <div id="videoPlay" ref="test1" class="dplayer"></div>
+ <!-- <div class="mark" ></div> -->
+ <!-- 视频 -->
+ <div class="player-video-state">
+ <span class="bp-svgicon">
+ <svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+ <path id="pid-1-svgo-a" d="M0 0h80v80H0z"></path>
+ <path
+ d="M52.546 8.014a3.998 3.998 0 014.222 3.077c.104.446.093.808.039 1.138a2.74 2.74 0 01-.312.881c-.073.132-.16.254-.246.376l-.257.366-.521.73c-.7.969-1.415 1.926-2.154 2.866l-.015.02a240.945 240.945 0 015.986.341l1.643.123.822.066.41.034.206.018.103.008.115.012c1.266.116 2.516.45 3.677.975a11.663 11.663 0 013.166 2.114c.931.87 1.719 1.895 2.321 3.022a11.595 11.595 0 011.224 3.613c.03.157.046.316.068.474l.015.119.013.112.022.206.085.822.159 1.646c.1 1.098.19 2.198.27 3.298.315 4.4.463 8.829.36 13.255a166.489 166.489 0 01-.843 13.213c-.012.127-.034.297-.053.454a7.589 7.589 0 01-.072.475l-.04.237-.05.236a11.762 11.762 0 01-.74 2.287 11.755 11.755 0 01-5.118 5.57 11.705 11.705 0 01-3.623 1.263c-.158.024-.316.052-.475.072l-.477.053-.821.071-1.644.134c-1.096.086-2.192.16-3.288.23a260.08 260.08 0 01-6.578.325c-8.772.324-17.546.22-26.313-.302a242.458 242.458 0 01-3.287-.22l-1.643-.129-.822-.069-.41-.035-.206-.018c-.068-.006-.133-.01-.218-.02a11.566 11.566 0 01-3.7-.992 11.732 11.732 0 01-5.497-5.178 11.73 11.73 0 01-1.215-3.627c-.024-.158-.051-.316-.067-.475l-.026-.238-.013-.119-.01-.103-.07-.823-.132-1.648a190.637 190.637 0 01-.22-3.298c-.256-4.399-.358-8.817-.258-13.233.099-4.412.372-8.811.788-13.197a11.65 11.65 0 013.039-6.835 11.585 11.585 0 016.572-3.563c.157-.023.312-.051.47-.07l.47-.05.82-.07 1.643-.13a228.493 228.493 0 016.647-.405l-.041-.05a88.145 88.145 0 01-2.154-2.867l-.52-.73-.258-.366c-.086-.122-.173-.244-.246-.376a2.74 2.74 0 01-.312-.881 2.808 2.808 0 01.04-1.138 3.998 3.998 0 014.22-3.077 2.8 2.8 0 011.093.313c.294.155.538.347.742.568.102.11.19.23.28.35l.27.359.532.72a88.059 88.059 0 012.06 2.936 73.036 73.036 0 011.929 3.03c.187.313.373.628.556.945 2.724-.047 5.447-.056 8.17-.038.748.006 1.496.015 2.244.026.18-.313.364-.624.549-.934a73.281 73.281 0 011.93-3.03 88.737 88.737 0 012.059-2.935l.533-.72.268-.359c.09-.12.179-.24.281-.35a2.8 2.8 0 011.834-.881zM30.13 34.631a4 4 0 00-.418 1.42 91.157 91.157 0 00-.446 9.128c0 2.828.121 5.656.364 8.483l.11 1.212a4 4 0 005.858 3.143c2.82-1.498 5.55-3.033 8.193-4.606a177.41 177.41 0 005.896-3.666l1.434-.942a4 4 0 00.047-6.632 137.703 137.703 0 00-7.377-4.708 146.88 146.88 0 00-6.879-3.849l-1.4-.725a4 4 0 00-5.382 1.742z"
+ id="pid-1-svgo-d"></path>
+ <filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%" filterUnits="objectBoundingBox"
+ id="pid-1-svgo-c">
+ <feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+ <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1">
+ </feGaussianBlur>
+ <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" in="shadowBlurOuter1"
+ result="shadowMatrixOuter1"></feColorMatrix>
+ <feOffset in="SourceAlpha" result="shadowOffsetOuter2"></feOffset>
+ <feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2" result="shadowBlurOuter2">
+ </feGaussianBlur>
+ <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter2"
+ result="shadowMatrixOuter2"></feColorMatrix>
+ <feMerge>
+ <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+ <feMergeNode in="shadowMatrixOuter2"></feMergeNode>
+ </feMerge>
+ </filter>
+ </defs>
+ <g fill="none" fill-rule="evenodd" opacity=".8">
+ <mask id="pid-1-svgo-b" fill="#fff">
+ <use xlink:href="#pid-1-svgo-a"></use>
+ </mask>
+ <g mask="url(#pid-1-svgo-b)">
+ <use fill="#000" filter="url(#pid-1-svgo-c)" xlink:href="#pid-1-svgo-d"></use>
+ <use fill="#FFF" xlink:href="#pid-1-svgo-d"></use>
+ </g>
+ </g>
+ </svg>
+ </span>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+ import Hls from 'hls.js'
+ import DPlayer from 'dplayer'
+
+ export default {
+ data() {
+ return {
+ dp: null,
+ video: {},
+ }
+ },
+ methods: {
+ myPlay() {
+ this.$message.info("start play..")
+ },
+ loadVideo(videoInfo) {
+ this.dp = new DPlayer({
+ element: document.getElementById("videoPlay"),
+ //logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
+ // hotkey: true, // 是否支持热键，调节音量，播放，暂停等
+ mutex: false, // 防止同时播放多个用户，在该用户开始播放时暂停其他用户
+ theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
+ loop: false, // 是否自动循环
+ lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
+ // screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
+ preload: "auto", // 自动预加载
+ volume: 0.1, // 初始化音量
+ playbackSpeed: [2, 1, 0.5], //可选的播放速度，可自定义
+ contextmenu: [
+ // 自定义上下文菜单
+ //右键菜单
+ {
+ text: "b站",
+ link: "https://www.bilibili.com"
+ },
+ // {
+ // text: "选项二",
+ // click: player => {
+ // console.log(player);
+ // }
+ // }
+ ],
+ highlight: [
+ //进度条上的自定义时间标记
+ // 进度条时间点高亮
+ {
+ text: "10M",
+ time: 60
+ },
+ {
+ text: "20M",
+ time: 120
+ }
+ ],
+ video: {
+ pic: videoInfo.img, // 视频封面
+ url: videoInfo.url,
+ type: videoInfo.type,
+ customType: {
+ customHls: function(video, player) {
+ const hls = new Hls()
+ hls.loadSource(video.src)
+ hls.attachMedia(video)
+ }
+ }
+ }
+ })
+ }
+ },
+ mounted() {
+
+ this.video = {
+ img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
+ url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
+ type: "normal"
+ }
+
+ this.loadVideo(this.video)
+
+ // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
+ // document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
+ document.querySelector(".dplayer-mask").remove();
+ document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
+ let length = document.querySelectorAll(".dplayer-menu-item").length;
+ document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
+ document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
+ }
+ }
+</script>
+<style lang="less" scoped>
+ .myVideo {
+ position: relative;
+ // width: 220px;
+ // height: 140px;
+ width: 300px;
+ height: 180px;
+ background-color: #565656;
+ border-radius: 10px;
+ margin: 10px;
+ display: flex;
+
+
+ }
+
+
+ .myVideo:hover {
+ .mark {
+ background-color: #000;
+ display: initial;
+ }
+
+ .player-video-state {
+ // display: initial;
+ }
+ }
+
+
+ .dplayer {
+ width: 500px;
+ }
+
+ .mark {
+ opacity: 0.45;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ background-color: #000;
+ display: none;
+ }
+
+ .player-video-state {
+ position: absolute;
+ left: 43%;
+ top: 35%;
+ width: 50px;
+ height: 50px;
+ display: none;
+ }
+</style>
diff --git a/src/components/mini/mdDetail.vue b/src/components/mini/mdDetail.vue
index 17c00c3..2513e82 100644
--- a/src/components/mini/mdDetail.vue
+++ b/src/components/mini/mdDetail.vue
@@ -7,8 +7,8 @@
</div>
<div v-if="showMsg && !myLock">
- <div class="mySecretSamll" v-if="articleFileType==5">
-
+ <div class="mySecretSamll" v-if="articleFileType==myConstant.fileTypeShort">
+ <p>碎碎念只有那么一点了,但是下面依旧可以碎碎念</p>
</div>
<div class="mySecret" v-else>
<h1>怎样才能让你看到我呢</h1>
@@ -34,9 +34,7 @@
<vue-markdown :source="source"></vue-markdown>
</div>
</div>
- <div class="articleInfoMiniData">
-
-
+ <div class="articleInfoMiniData" >
<div class="smallOption" @click="articleOptionHandle('dislike')">
<a-icon type="dislike" style="margin-top: 2px;" />
</div>
@@ -76,7 +74,8 @@
import comment from "../mini/box12-comment.vue"
import axios from 'axios'
-
+ import myConstant from "../../config/myConstant.js"
+
export default {
components: {
VueMarkdown,
@@ -84,10 +83,11 @@
},
data() {
return {
+ myConstant:myConstant,
articelMeta: "",
isAllowedComment: 1,
articleId: "",
- articleFileType: 1,
+ articleFileType: myConstant.fileTypeMarkDown,
source: "",
showMsg: false,
myLock: false,
@@ -131,7 +131,7 @@
this.showMsg = true;
this.errorMsg = "加载中..";
- if (this.articleFileType == 5) {
+ if (this.articleFileType == myConstant.fileTypeShort) {
this.errorMsg = "没有更多啦..";
return
}
diff --git a/src/config/myConstant.js b/src/config/myConstant.js
new file mode 100644
index 0000000..fe586e0
--- /dev/null
+++ b/src/config/myConstant.js
@@ -0,0 +1,10 @@
+//常量
+const myConstant = {
+ fileTypeMarkDown: 1,
+ fileTypeHtml: 2,
+ fileTypeVideo: 3,
+ fileTypeMp3: 4,
+ fileTypeShort: 5,
+ fileTypeCover: 9,
+}
+export default myConstant;
--
Gitblit v1.9.1