From 146176c4bfc7e936026fc02d96fdc175738d9e14 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Tue, 09 Aug 2022 19:04:51 +0800
Subject: [PATCH] 我的音乐模块优化啊
---
src/components/group/MyMessage.vue | 10 -
src/components/mini/Aplayer.vue | 6
src/components/group/MyVideo.vue | 41 +++++
src/components/layouts/baseLayout.vue | 11 +
src/components/mini/box14-video2.vue | 263 +++++++++++++++++++++++++++++++++++++
src/components/swichLabel/main2-music-search.vue | 30 ++--
6 files changed, 332 insertions(+), 29 deletions(-)
diff --git a/src/components/group/MyMessage.vue b/src/components/group/MyMessage.vue
index c5c64af..fca7967 100644
--- a/src/components/group/MyMessage.vue
+++ b/src/components/group/MyMessage.vue
@@ -74,7 +74,7 @@
visible: false,
loading: false,
pageNo: 1,
- pageSize: 5,
+ pageSize: 4,
showButton: true,
refresh: false,
}
@@ -91,7 +91,7 @@
reload() {
this.$message.info("重新拉取信息..")
this.pageNo = 1;
- this.pageSize = 5;
+ this.pageSize = 4;
this.showButton = true;
this.dataList = [];
setTimeout(() => {
@@ -143,12 +143,6 @@
}
- .myhiden {
- display: -webkit-container;
- -webkit-line-clamp: 3;
- text-overflow: ellipsis;
- overflow: hidden;
- }
a {
color: black;
diff --git a/src/components/group/MyVideo.vue b/src/components/group/MyVideo.vue
new file mode 100644
index 0000000..2e69c63
--- /dev/null
+++ b/src/components/group/MyVideo.vue
@@ -0,0 +1,41 @@
+<template>
+ <div class="myModal">
+ <a-modal v-model="visible" title="" :footer="null" :mask="false" :maskClosable="false" :placement="placement"
+ :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}">
+ <div>11</div>
+
+ </a-modal>
+ </div>
+
+</template>
+
+<script>
+ import {
+ history
+ } from '../../api/blogArticleComment.js'
+
+ export default {
+ data() {
+ return {
+ visible: false,
+ placement: "bottom"
+ }
+ },
+ beforeMount() {},
+ methods: {
+ showModal() {
+ this.visible = true;
+ },
+ handleCancel(e) {
+ this.visible = false;
+ },
+
+ },
+ }
+</script>
+<style scoped>
+
+ a {
+ color: black;
+ }
+</style>
diff --git a/src/components/layouts/baseLayout.vue b/src/components/layouts/baseLayout.vue
index 55dbd69..0f8f339 100644
--- a/src/components/layouts/baseLayout.vue
+++ b/src/components/layouts/baseLayout.vue
@@ -6,12 +6,13 @@
</a-layout-header>
<keep-alive>
- <router-view></router-view>
+ <router-view @showMyVideo="showMyVideo"></router-view>
</keep-alive>
-
+
<a-layout-footer>
<AplayerBox />
<tagFooter />
+ <MyVideo ref="MyVideo" />
</a-layout-footer>
<a-back-top>
@@ -25,11 +26,13 @@
import tagHeader from "../fixed/header.vue"
import tagFooter from "../fixed/footer.vue"
import AplayerBox from "../mini/Aplayer.vue"
+ import MyVideo from "../group/MyVideo.vue"
export default {
components: {
tagHeader,
tagFooter,
AplayerBox,
+ MyVideo,
},
data() {
return {
@@ -37,7 +40,9 @@
}
},
methods: {
-
+ showMyVideo() {
+ this.$refs.MyVideo.showModal();
+ },
// 下载文件
down: function() {
console.log(111);
diff --git a/src/components/mini/Aplayer.vue b/src/components/mini/Aplayer.vue
index ef7612d..42c0fb9 100644
--- a/src/components/mini/Aplayer.vue
+++ b/src/components/mini/Aplayer.vue
@@ -1,8 +1,8 @@
<template>
<div class="fade">
- <!-- <a-col v-bind="colMain">
- </a-col> -->
+ <a-col v-bind="colMain">
<aplayer :audio="audio" :autoplay="autoplay" fixed style="z-index: 10;" :volume="0.1" :preload="preload" />
+ </a-col>
<!-- <a-modal ref="musicModal" title="" :dialog-style="{ top: '10px' }" :mask="false"
:maskClosable="false" :visible="modal1Visible" @ok="() => setModal1Visible(false)" @cancel="() => setModal1Visible(false)">
@@ -26,7 +26,7 @@
xl: 1,
xxl: 1
},
- autoplay:false,
+ autoplay: false,
modal1Visible: true,
secondsToGo: 5,
preload: "none",
diff --git a/src/components/mini/box14-video2.vue b/src/components/mini/box14-video2.vue
new file mode 100644
index 0000000..6a87937
--- /dev/null
+++ b/src/components/mini/box14-video2.vue
@@ -0,0 +1,263 @@
+<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/swichLabel/main2-music-search.vue b/src/components/swichLabel/main2-music-search.vue
index 388e146..565e063 100644
--- a/src/components/swichLabel/main2-music-search.vue
+++ b/src/components/swichLabel/main2-music-search.vue
@@ -7,7 +7,7 @@
<a-col v-bind="colApiMain" class="holdHeight">
<!-- <box8></box8> -->
<!-- <boxLeft></boxLeft> -->
- <myVideo></myVideo>
+ <myVideo v-on="$listeners"></myVideo>
</a-col>
</a-row>
@@ -19,7 +19,7 @@
import box8 from "../mini/box8-panal.vue"
import myVideo from "../mini/box14-video.vue"
import boxLeft from "../group/boxLeft.vue"
-
+
export default {
components: {
box7,
@@ -34,8 +34,8 @@
colApiLeft: {
xs: 24,
sm: {
- span: 10,
- offset: 1,
+ span: 14,
+ offset: 5,
},
md: {
span: 14,
@@ -57,28 +57,28 @@
colApiMain: {
xs: {
- span: 23,
- offset: 1,
+ span: 24,
+ offset: 0,
},
sm: {
span: 22,
- offset: 2,
+ offset: 1,
},
md: {
- span: 19,
- offset: 5,
+ span: 22,
+ offset: 1,
},
lg: {
span: 22,
- offset: 2,
+ offset: 1,
},
xl: {
- span: 15,
- offset: 2,
+ span: 16,
+ offset: 1,
},
xxl: {
- span: 15,
- offset: 2,
+ span: 16,
+ offset: 1,
},
}
}
@@ -86,5 +86,5 @@
}
</script>
-<style >
+<style>
</style>
--
Gitblit v1.9.1