From f60b31044a9a117244e7cd5d51f29b53d425a409 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Mon, 28 Feb 2022 18:34:47 +0800
Subject: [PATCH] wow.js 加入
---
src/components/mini/box12-comment.vue | 7 +
src/components/swichLabel/main3-show.vue | 5 +
src/components/group/boxRight.vue | 2
src/components/fixed/header.vue | 2
src/main.js | 8 +
src/components/mini/box14-video.vue | 123 ++++++++++++++++++++++++++++++
package.json | 3
src/config/router.config.js | 8 +-
src/components/group/articleListScorll.vue | 22 +++--
src/components/mini/tagInfo.vue | 21 ++++-
10 files changed, 178 insertions(+), 23 deletions(-)
diff --git a/package.json b/package.json
index 9e7238d..32686ea 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,8 @@
"vue-infinite-scroll": "^2.0.2",
"vue-markdown": "^2.2.4",
"vue-router": "^3.5.3",
- "vuex": "^3.6.2"
+ "vuex": "^3.6.2",
+ "wowjs": "^1.1.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.8.0",
diff --git a/src/components/fixed/header.vue b/src/components/fixed/header.vue
index af0e1e9..1c101af 100644
--- a/src/components/fixed/header.vue
+++ b/src/components/fixed/header.vue
@@ -5,7 +5,7 @@
<router-link to="/">Home</router-link>
<router-link to="/main2">乐谱搜索</router-link>
<router-link to="/main3">我的网盘</router-link>
- <router-link to="/main4">友人帐</router-link>
+ <router-link to="/link">友人帐</router-link>
<router-link to="/login">登录</router-link>
<!-- <router-link to="/comment">测试页</router-link> -->
</div>
diff --git a/src/components/group/articleListScorll.vue b/src/components/group/articleListScorll.vue
index 47e61cb..f93c89e 100644
--- a/src/components/group/articleListScorll.vue
+++ b/src/components/group/articleListScorll.vue
@@ -1,14 +1,16 @@
<template>
<div>
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-distance="10">
- <div v-for="(temp,index) in data">
- <newArticle v-bind="temp" :index="index"></newArticle>
- <!-- <box5 v-bind="temp"></box5> -->
- </div>
<div class="mySecret" v-if="data.length==0">
<p>空空如也..</p>
</div>
+ <div v-for="(temp,index) in data" >
+ <newArticle v-bind="temp" :index="index"></newArticle>
+ <!-- <box5 v-bind="temp"></box5> -->
+ </div>
+
+
<div v-if="loading && !busy" class="demo-loading-container">
<a-spin />
</div>
@@ -16,7 +18,7 @@
<a-row type="flex" justify="center">
<div style="position:fixed;bottom: 10px;" id="dddadf">
<a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
- :defaultPageSize="10" :pageSize="pageSize" :total="total" />
+ :defaultPageSize="defaultPageSize" :pageSize="pageSize" :total="total" />
</div>
</a-row>
@@ -65,6 +67,7 @@
directives: {
infiniteScroll
},
+
data() {
return {
typeId: "",
@@ -73,8 +76,9 @@
busy: false,
size: "small",
total: 1,
- pageSize: 1,
+ pageSize: 10,
current: 1,
+ defaultPageSize:10
};
},
watch: {
@@ -87,8 +91,7 @@
this.busy = true;
this.$message.info('loading', 0.3);
this.onChange(1);
- }
-
+ },
},
activated() {
window.addEventListener('scroll', this);
@@ -99,6 +102,7 @@
beforeMount() {
queryBlogArticleList({
pageNo: this.current,
+ pageSize:this.pageSize,
typeId: this.typeId
}).then((res) => {
this.total = Number(res.data.total)
@@ -112,6 +116,7 @@
this.current = current;
queryBlogArticleList({
pageNo: current,
+ pageSize:this.pageSize,
typeId: this.typeId
}).then((res) => {
this.busy = false;
@@ -127,6 +132,7 @@
queryBlogArticleList({
pageNo: this.current + 1,
+ pageSize:this.pageSize,
typeId: this.typeId
}).then((res) => {
diff --git a/src/components/group/boxRight.vue b/src/components/group/boxRight.vue
index 2806d55..ce012e7 100644
--- a/src/components/group/boxRight.vue
+++ b/src/components/group/boxRight.vue
@@ -38,7 +38,7 @@
data() {
return {
vo3: {
- "link": "/main4",
+ "link": "/link",
title: "友情链接",
isShowRemark: true,
list: [{
diff --git a/src/components/mini/box12-comment.vue b/src/components/mini/box12-comment.vue
index ae64ada..7fccf8d 100644
--- a/src/components/mini/box12-comment.vue
+++ b/src/components/mini/box12-comment.vue
@@ -70,12 +70,15 @@
useName: "22",
userComment: "11",
};
- this.$refs.replyBoxId.getMsgInfo(msgInfo);
+ this.$nextTick(() => {
+
+ this.$refs.replyBoxId.getMsgInfo(msgInfo);
+ });
}
},
data() {
return {
- visible: true,
+ visible: false,
commentListData: [{
userName: "bimo",
userComment: "1+1=2?",
diff --git a/src/components/mini/box14-video.vue b/src/components/mini/box14-video.vue
new file mode 100644
index 0000000..fc7360c
--- /dev/null
+++ b/src/components/mini/box14-video.vue
@@ -0,0 +1,123 @@
+<template>
+
+ <div class="test_wow">
+
+ <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>
+
+
+
+</template>
+
+<script>
+ export default {
+
+ name: 'Home',
+
+ data() {
+
+ return {
+
+ }
+
+ },
+
+ mounted() {
+
+ new this.$wow.WOW().init()
+
+ }
+
+ }
+</script>
+
+<style scoped>
+ .test_wow {
+
+ position: relative;
+
+ width: 1000px;
+
+ height: 400px;
+
+ background: #212121;
+
+ margin: 0 auto;
+
+ }
+
+ .test_wow1 {
+
+ position: relative;
+
+ width: 1000px;
+
+ height: 400px;
+
+ background: #741919;
+
+ margin: 0 auto;
+
+ }
+
+ .test_wow2 {
+
+ position: relative;
+
+ width: 1000px;
+
+ height: 400px;
+
+ background: #2b0f44;
+
+ margin: 0 auto;
+
+ }
+
+ .test_wow3 {
+
+ position: relative;
+
+ width: 1000px;
+
+ height: 400px;
+
+ background: #558614;
+
+ margin: 0 auto;
+
+ }
+
+ .test_wow4 {
+
+ position: relative;
+
+ width: 1000px;
+
+ height: 400px;
+
+ background: #440707;
+
+ margin: 0 auto;
+
+ }
+</style>
diff --git a/src/components/mini/tagInfo.vue b/src/components/mini/tagInfo.vue
index 91ee495..4495ec9 100644
--- a/src/components/mini/tagInfo.vue
+++ b/src/components/mini/tagInfo.vue
@@ -1,11 +1,11 @@
<template>
<div class="swichTag ">
<a-page-header title="关于我的一些..小故事" style="padding: 10px 0px 20px 0px;" @back="() => this.$router.go(-1)" />
- <h3 class="layui-timeline-title">捏脸</h3>
<a-timeline pending="...">
<p slot="pendingDot" style="font-size: 18px;" />
<a-timeline-item color="">
- <a-icon slot="dot" type="form" style="font-size: 18px;" />
+ <!-- <a-icon slot="dot" type="form" style="font-size: 18px;" /> -->
+ <a-icon type="message" slot="dot" style="font-size: 18px;" />
<br>
<p>
<ul>
@@ -32,14 +32,27 @@
</p>
</a-timeline-item>
+ <!-- <a-timeline-item color="">
+ <h3 class="layui-timeline-title">后续blog风格设计..</h3>
+ <a-icon type="container" slot="dot" style="font-size: 18px;" />
+ <br>
+ <ul>
+ <li> 第一要义 干净,凝练</li>
+ <li> 交互感:动效(适量,微小,无感知,恰到好处)</li>
+ <li> 响应式布局下,统一页边距,字体,行间距,圆角</li>
+ </ul>
+ </a-timeline-item>
+ -->
+ <br>
<h3 class="layui-timeline-title">那些对我而言,有意义的时刻..</h3>
+ <br>
<a-timeline-item color="">
<a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
<h3 class="layui-timeline-title">2022-02-22</h3>
- <span style="text-decoration:line-through" >全新的</span><span>vue系列+spring全家桶搭建的blog部署上线</span>
+ <span style="text-decoration:line-through">全新的</span><span>vue系列+spring全家桶搭建的blog部署上线</span>
<p class="myTip">(终于是赶在这个全是2的日子前把旧站有用的数据迁移了过来)</p>
</a-timeline-item>
-
+
<a-timeline-item color="">
<a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
<h3 class="layui-timeline-title">2022-01-11</h3>
diff --git a/src/components/swichLabel/main3-show.vue b/src/components/swichLabel/main3-show.vue
index 2be7466..d5ba4dd 100644
--- a/src/components/swichLabel/main3-show.vue
+++ b/src/components/swichLabel/main3-show.vue
@@ -3,7 +3,8 @@
<a-row>
<a-col v-bind="colApiMain " class="holdHeight">
<a-page-header title="我的网盘" style="padding: 0px;" @back="() => this.$router.go(-1)" />
- <net-file></net-file>
+ <!-- <net-file></net-file> -->
+ <myVideo></myVideo>
</a-col>
</a-row>
</div>
@@ -11,9 +12,11 @@
<script>
import netFile from "../mini/box9-netFile.vue"
+ import myVideo from "../mini/box14-video.vue"
export default {
components: {
netFile,
+ myVideo,
},
data() {
diff --git a/src/config/router.config.js b/src/config/router.config.js
index cbeb488..ca2abde 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -5,7 +5,7 @@
import main1 from '../components/swichLabel/main1-show.vue'
import main2 from '../components/swichLabel/main2-show.vue'
import main3 from '../components/swichLabel/main3-show.vue'
-import main4 from '../components/swichLabel/main4-show.vue'
+import link from '../components/swichLabel/main4-show.vue'
import login from '../components/swichLabel/main5-show.vue'
import box1 from '../components/mini/box1-info.vue'
@@ -57,7 +57,7 @@
path: '/mdDetail',
component: mdDetail,
}, {
- path: '/main4',
+ path: '/link',
component: boxFriend,
}
]
@@ -81,8 +81,8 @@
component: main3,
},
{
- path: '/main4',
- component: main4,
+ path: '/link',
+ component: link,
}, {
path: '/login',
component: login,
diff --git a/src/main.js b/src/main.js
index 99eee08..5ef5b2f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,12 +8,18 @@
import 'ant-design-vue/dist/antd.less';
Vue.use(Antd);
+import wow from 'wowjs'
+import 'animate.css'
+Vue.prototype.$wow=wow
+
import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)
import APlayer from '@moefe/vue-aplayer';
-Vue.use(APlayer,{productionTip:false})
+Vue.use(APlayer, {
+ productionTip: false
+})
import './mock/'
Vue.prototype.$axios = axios
--
Gitblit v1.9.1