From aab8119ad66583d65d517e2eb8e574b8794180c9 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Sun, 16 Jan 2022 20:58:19 +0800
Subject: [PATCH] 无限列表滚动
---
src/components/mini/box3-archive.vue | 10
src/assets/baby.htm | 29 +
src/components/swichLabel/main2-show.vue | 75 ++-
vue.config.js | 2
src/components/fixed/header.vue | 2
src/components/mini/box2-class.vue | 26 +
src/components/mini/box5-article.vue | 116 +++---
src/components/group/tempScroll.vue | 121 ++++++
src/components/mini/tagInfo.vue | 68 +-
src/components/swichLabel/main3-show.vue | 60 +--
src/main.js | 3
package.json | 2
src/components/mini/tagTime.vue | 270 ++++++++------
src/components/swichLabel/main1-show.vue | 17
src/assets/shijie.htm | 12
src/components/mini/box8-panal.vue | 96 ++---
src/config/router.config.js | 1
src/components/group/articleListScorll.vue | 124 ++++++
src/components/layouts/baseLayout.vue | 15
src/components/mini/box9-netFile.vue | 2
src/assets/mowenwei.jpg | 0
src/components/group/articleList.vue | 25 +
22 files changed, 720 insertions(+), 356 deletions(-)
diff --git a/package.json b/package.json
index e55a267..d8761a6 100644
--- a/package.json
+++ b/package.json
@@ -18,9 +18,9 @@
"navigator": "^1.0.1",
"text-loader": "^0.0.1",
"vue": "^2.6.14",
+ "vue-infinite-scroll": "^2.0.2",
"vue-markdown": "^2.2.4",
"vue-router": "^3.5.3",
- "vue-simple-uploader": "^0.7.6",
"vuex": "^3.6.2"
},
"devDependencies": {
diff --git a/src/assets/baby.htm b/src/assets/baby.htm
new file mode 100644
index 0000000..8a38eed
--- /dev/null
+++ b/src/assets/baby.htm
@@ -0,0 +1,29 @@
+<p>Baby Song - 陈奕迅 (Eason Chan)</p>
+<p>词：岑宁儿</p>
+<p>曲：岑宁儿</p>
+<p>你的眼睛 像颗水晶通透</p>
+<p>里面有一个无穷无尽的宇宙</p>
+<p>小小的你 在你小小的梦里</p>
+<p>把我所有大大的事情都吹进风里</p>
+<p>我为我将对你撒的谎先跟你道歉</p>
+<p>当你发现黑白不是那么的分明</p>
+<p>世界不是那么的公平</p>
+<p>别太失望 我讲的是个梦想</p>
+<p>不用太听我们的话</p>
+<p>不要让任何人告诉你</p>
+<p>你该怎样对待世界</p>
+<p>或它该怎对你</p>
+<p>要跟现在一样随心</p>
+<p>让你的眼睛和心依然纯净</p>
+<p>可惜世界不及你好</p>
+<p>原谅我们 我们都还在找</p>
+<p>而时间它只负责流动</p>
+<p>不负责 育你成长</p>
+<p>不过你只需要倾听</p>
+<p>倾听你的心</p>
+<p>你的眼睛 像颗水晶通透</p>
+<p>里面有一个无穷无尽的宇宙</p>
+<p>小小的你 在你小小的梦里</p>
+<p>把我所有大大的事情都吹进风里</p>
+<p>都吹进风里</p>
+<p>-</p>
\ No newline at end of file
diff --git a/src/assets/mowenwei.jpg b/src/assets/mowenwei.jpg
new file mode 100644
index 0000000..b1ed2a3
--- /dev/null
+++ b/src/assets/mowenwei.jpg
Binary files differ
diff --git a/src/assets/shijie.htm b/src/assets/shijie.htm
new file mode 100644
index 0000000..4c15238
--- /dev/null
+++ b/src/assets/shijie.htm
@@ -0,0 +1,12 @@
+<p>晚风中闪过 几帧从前啊</p>
+<p> 飞驰中旋转 已不见了吗</p>
+<p> 远光中走来 你一身晴朗</p>
+<p> 身旁那么多人 可世界不声 不响</p>
+<p> 笑声中浮过 几张旧模样</p>
+<p> 留在梦田里 永远不散场</p>
+<p> 暖光中醒来 好多话要讲</p>
+<p> 世界那么多人 可是它不声 不响</p>
+<p> 这世界有那么个人</p>
+<p> 活在我 飞扬的青春</p>
+<p> 在泪水里浸湿过的长吻</p>
+<p> 常让我 想啊想出神</p>
diff --git a/src/components/fixed/header.vue b/src/components/fixed/header.vue
index 1d70d32..fff0887 100644
--- a/src/components/fixed/header.vue
+++ b/src/components/fixed/header.vue
@@ -7,7 +7,7 @@
<router-link to="/main2">乐谱搜索 »</router-link>
</a-col>
<a-col v-bind="showSmall">
- <router-link to="/main3">动漫搜索 »</router-link>
+ <router-link to="/main3">我的网盘 »</router-link>
</a-col>
<a-col v-bind="showMain">
<router-link to="/tagInfo">关于我 »</router-link>
diff --git a/src/components/group/articleList.vue b/src/components/group/articleList.vue
index 608261b..7170133 100644
--- a/src/components/group/articleList.vue
+++ b/src/components/group/articleList.vue
@@ -1,5 +1,11 @@
<template>
- <div >
+ <div class="">
+ <!-- <a-button v-if="tagName">{{tagName}}</a-button> -->
+ <a-affix :offset-top="80">
+ <a-button @click="top += 70">
+ Affix top
+ </a-button>
+ </a-affix>
<box5></box5>
<box5></box5>
<box5></box5>
@@ -13,6 +19,7 @@
<script>
import box5 from "../mini/box5-article.vue"
export default {
+ props: ['tagName'],
components: {
box5
},
@@ -28,5 +35,19 @@
}
}
}
-
</script>
+
+<style lang="less">
+ .container {
+ height: 700px;
+ }
+
+ .content {
+ height: 95%;
+ overflow-y: scroll;
+ }
+
+ .content::-webkit-scrollbar {
+ display: none;
+ }
+</style>
diff --git a/src/components/group/articleListScorll.vue b/src/components/group/articleListScorll.vue
new file mode 100644
index 0000000..06d363b
--- /dev/null
+++ b/src/components/group/articleListScorll.vue
@@ -0,0 +1,124 @@
+<template>
+ <div>
+ <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-distance="10">
+ <div v-for="temp in data">
+ <box5 v-bind="temp"></box5>
+ </div>
+ <div v-if="loading && !busy" class="demo-loading-container">
+ <a-spin />
+ </div>
+ </div>
+ <div style="position:fixed;bottom: 10px;" id="dddadf">
+ <a-pagination @change="onChange" :showQuickJumper="true" :size="size" v-model="current"
+ :defaultPageSize="pageSize" :total="total" />
+ </div>
+ <a-back-top>
+ <a-icon type="up" />回到顶部
+ </a-back-top>
+ </div>
+</template>
+<script>
+ import infiniteScroll from 'vue-infinite-scroll';
+ import box5 from "../mini/box5-article.vue"
+ import babyActicle from '../../assets/baby.htm'
+ import shijie from '../../assets/shijie.htm'
+
+ var obj1 = {
+ "source": babyActicle,
+ "title": "陈奕迅-Body Song 歌词",
+ "read": 1101,
+ "like": 233,
+ "folder": "歌词",
+ "publishTime": "2021-05-26",
+ }
+ var obj2 = {
+ "source": shijie,
+ "title": "这世界那么多人-吉他谱",
+ "read": 3101,
+ "like": 113,
+ "folder": "吉他谱",
+ "publishTime": "2020-05-26",
+ }
+ var obj3 = {
+ "source": shijie,
+ "title": "遥远的它-吉他谱",
+ "read": 201,
+ "like": 13,
+ "folder": "吉他谱",
+ "publishTime": "2022-07-26",
+ }
+
+ export default {
+ components: {
+ box5
+ },
+ directives: {
+ infiniteScroll
+ },
+ data() {
+ return {
+
+ data: [],
+ loading: false,
+ busy: false,
+ size: "small",
+ total: 500,
+ pageSize: 20,
+ current: 1,
+ };
+ },
+ beforeMount() {
+ this.data = [obj1, obj2,obj3];
+ },
+ methods: {
+ onChange(current) {
+ this.current = current;
+ this.data = [obj2, obj3, obj1, obj2];
+ },
+ loadMore() {
+ const data = this.data;
+ this.loading = true;
+
+ this.current += 1;
+ console.log(this.current);
+ console.log(this.busy);
+
+ if (data.length > 15) {
+ this.$message.warning('没有更多了');
+ this.busy = true;
+ this.loading = false;
+ return;
+ }
+
+
+ setTimeout(function() {
+ this.loading = false;
+ }, 1000);
+
+ this.data = data.concat(obj1, obj3, obj2, obj3, obj1);
+
+ },
+ },
+ };
+</script>
+<style>
+ /* .test {
+ overflow: hidden;
+ height: 700px;
+ }
+
+ .infinite-container {
+ overflow: auto;
+ }
+
+ .infinite-container::-webkit-scrollbar {
+ display: none;
+ } */
+
+ .demo-loading-container {
+ position: absolute;
+ bottom: 40px;
+ width: 100%;
+ text-align: center;
+ }
+</style>
diff --git a/src/components/group/tempScroll.vue b/src/components/group/tempScroll.vue
new file mode 100644
index 0000000..c1c1962
--- /dev/null
+++ b/src/components/group/tempScroll.vue
@@ -0,0 +1,121 @@
+<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 9d5a6ee..d10c048 100644
--- a/src/components/layouts/baseLayout.vue
+++ b/src/components/layouts/baseLayout.vue
@@ -1,10 +1,10 @@
<template>
<a-layout>
- <a-layout-header :style="{position:'fixed',height:'60px',marginBottom:'35px',zIndex: 999, width: '100%' }">
- <tag-Header />
+ <a-layout-header class="scrolling-navbar" :style="{position:'fixed',height:'60px',marginBottom:'35px',zIndex: 999, width: '100%' }">
+ <tag-Header />
</a-layout-header>
- <router-view class="fade"></router-view>
+ <router-view ></router-view>
<a-layout-footer>
<tagFooter />
@@ -60,8 +60,11 @@
.ant-layout {}
.ant-layout-header {
+
// background-color: #ffffff;
backdrop-filter: saturate(180%) blur(1em);
+ -webkit-backdrop-filter: blur(5px);
+
background: linear-gradient(90deg, rgba(247, 149, 51, 0.101961) 0, rgba(243, 112, 85, 0.101961) 15%, rgba(239, 78, 123, 0.101961) 30%, rgba(161, 102, 171, 0.101961) 44%, rgba(80, 115, 184, 0.101961) 58%, rgba(16, 152, 173, 0.101961) 72%, rgba(7, 179, 155, 0.101961) 86%, rgba(109, 186, 130, 0.101961) 100%);
}
@@ -89,6 +92,12 @@
letter-spacing: 0.8px;
line-height: 22px;
}
+
+ .scrolling-navbar {
+ will-change: background, padding,height;
+ -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
+ transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
+ }
.fade {
-webkit-animation-name: "fade";
diff --git a/src/components/mini/box2-class.vue b/src/components/mini/box2-class.vue
index 8248734..9b38315 100644
--- a/src/components/mini/box2-class.vue
+++ b/src/components/mini/box2-class.vue
@@ -4,7 +4,7 @@
<div class="blog-scroll ">
<div class="blog-log-list">
<div class="blog-log-item" v-for="item in list1">
- <router-link to="/main1">
+ <router-link to='/main1'>
<span>{{item.name}}</span>
</router-link>
@@ -63,6 +63,30 @@
}, {
name: "星标",
count: 14
+ },{
+ name: "Tag",
+ count: 133
+ }, {
+ name: "专题",
+ count: 10
+ }, {
+ name: "偏好",
+ count: 12
+ }, {
+ name: "星标",
+ count: 14
+ },{
+ name: "Tag",
+ count: 133
+ }, {
+ name: "专题",
+ count: 10
+ }, {
+ name: "偏好",
+ count: 12
+ }, {
+ name: "星标",
+ count: 14
}]
}
}
diff --git a/src/components/mini/box3-archive.vue b/src/components/mini/box3-archive.vue
index bf6d70b..8865f26 100644
--- a/src/components/mini/box3-archive.vue
+++ b/src/components/mini/box3-archive.vue
@@ -8,7 +8,7 @@
<div class="blog-scroll ">
<div v-for="yearData in myData">
<router-link to="/tagTime?type=2">
- <p class="blog-pigeonhole-p">{{yearData.year}}</p>
+ <p class="blog-pigeonhole-p">{{yearData.year}}年</p>
</router-link>
<div class="blog-pigeonhole-list">
@@ -55,14 +55,6 @@
{
"month": "10",
"count": 7
- },
- {
- "month": "9",
- "count": 6
- },
- {
- "month": "8",
- "count": 5
},
{
"month": "7",
diff --git a/src/components/mini/box5-article.vue b/src/components/mini/box5-article.vue
index f00f84d..1a038f1 100644
--- a/src/components/mini/box5-article.vue
+++ b/src/components/mini/box5-article.vue
@@ -9,65 +9,45 @@
</div> -->
<div class="article-meta">
- <h2 class="article-title"><a href="#">陈奕迅-Body Song 歌词</a></h2>
+ <h2 class="article-title">{{title}}</h2>
<div class="article-split-line"></div>
- <div class="article-summary blog-scroll">
- <p>Baby Song - 陈奕迅 (Eason Chan)</p>
- <p>词：岑宁儿</p>
- <p>曲：岑宁儿</p>
- <p>你的眼睛 像颗水晶通透</p>
- <p>里面有一个无穷无尽的宇宙</p>
- <p>小小的你 在你小小的梦里</p>
- <p>把我所有大大的事情都吹进风里</p>
- <p>我为我将对你撒的谎先跟你道歉</p>
- <p>当你发现黑白不是那么的分明</p>
- <p>世界不是那么的公平</p>
- <p>别太失望 我讲的是个梦想</p>
- <p>不用太听我们的话</p>
- <p>不要让任何人告诉你</p>
- <p>你该怎样对待世界</p>
- <p>或它该怎对你</p>
- <p>要跟现在一样随心</p>
- <p>让你的眼睛和心依然纯净</p>
- <p>可惜世界不及你好</p>
- <p>原谅我们 我们都还在找</p>
- <p>而时间它只负责流动</p>
- <p>不负责 育你成长</p>
- <p>不过你只需要倾听</p>
- <p>倾听你的心</p>
- <p>你的眼睛 像颗水晶通透</p>
- <p>里面有一个无穷无尽的宇宙</p>
- <p>小小的你 在你小小的梦里</p>
- <p>把我所有大大的事情都吹进风里</p>
- <p>都吹进风里</p>
- <p>-</p>
- </div>
+ <div class="article-summary blog-scroll" v-html="source" />
<div class="article-split-line"></div>
<div class="article-message-info ">
- <ul>
- <li>
- <a-icon type="read" />
- <!-- <a-icon type="eye" /> -->
- <span> 101</span>
- </li>
- <li>
- <a-icon type="like" />
- <span> 233</span>
+ <a-row type="flex" justify="center">
+ <a-col>
+ <div class="article-item">
+ <a-icon type="read" />
+ <!-- <a-icon type="eye" /> -->
+ <span> {{read}}</span>
+ </div>
+ </a-col>
+ <a-col>
+ <div class="article-item">
+ <a-icon type="like" />
+ <span> {{like}}</span>
+ </div>
- </li>
- <li>
- <a-icon type="folder-open" />
- <span> 歌词</span>
- </li>
- <li>
- <a-icon type="clock-circle" />
- <span> 2020-05-26 18:00:00</span>
- </li>
- </ul>
+ </a-col>
+ <a-col>
+ <div class="article-item">
+ <a-icon type="folder-open" />
+ <span> {{folder}}</span>
+ </div>
+ </a-col>
+ <a-col>
+ <div class="article-item">
+ <a-icon type="clock-circle" />
+ <span> {{publishTime}}</span>
+ </div>
+ </a-col>
+ </a-row>
</div>
<div class="article-split-line"></div>
<div class="article-read-btn">
- <router-link class="btn" to="/mdDetail">阅读全文 »</router-link>
+ <router-link class="btn" to="/mdDetail">
+ <span>阅读全文 »</span>
+ </router-link>
</div>
</div>
@@ -76,14 +56,35 @@
</template>
<script>
+ import babyActicle from '../../assets/baby.htm'
export default {
props: {
- title: "",
- list: ""
+ source: {
+ default: babyActicle
+ },
+ "title": {
+ default:"陈奕迅-Body Song 歌词",
+ },
+ "read": {
+ default:1011,
+ },
+ "like": {
+ default:233,
+ },
+ "folder": {
+ default:"歌词",
+ },
+ "publishTime": {
+ default:"2020-05-26",
+ }
},
data() {
return {
-
+ // "title": "陈奕迅-Body Song 歌词",
+ // "read": 1011,
+ // "like": 233,
+ // "folder": "歌词",
+ // "publishTime": "2020-05-26",
}
}
}
@@ -92,12 +93,17 @@
</script>
<style lang="less">
+ .article-item {
+ padding: 0px 5px;
+ }
+
/*文章部分*/
.blog-article {
margin-top: 10px;
margin-bottom: 20px;
border-radius: 15px;
border: none;
+ box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
/*box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);*/
}
diff --git a/src/components/mini/box8-panal.vue b/src/components/mini/box8-panal.vue
index 0de9b25..cb0652a 100644
--- a/src/components/mini/box8-panal.vue
+++ b/src/components/mini/box8-panal.vue
@@ -1,65 +1,28 @@
<template>
- <div>
- <div class="article-meta ">
+ <div class="holdHeight">
+ <a-row type="flex" justify="center" >
+ <a-col v-for="temp in [1,2,1,1,1,1,1]">
+ <div class="myCard" style="height: 200px;width: 220px; border-radius: 20px;">
+ <a-card :hoverable="true" size="small">
+ <template slot="cover">
+ <img class="myCardCover" alt="example" src="../../assets/mowenwei.jpg" />
+ </template>
- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
- <legend>卡片面板</legend>
- </fieldset>
+ <template slot="actions" class="ant-card-actions">
+ <a-icon key="arrowDown" type="arrow-down" />
+ <a-icon key="edit" type="edit" />
+ <a-icon key="ellipsis" type="ellipsis" />
+ </template>
- <div class="layui-bg-gray" style="padding: 30px;">
- <div class="layui-row layui-col-space15">
- <div class="layui-col-md6">
- <div class="layui-card">
- <div class="layui-card-header">卡片面板</div>
- <div class="layui-card-body">
- 卡片式面板面板通常用于非白色背景色的主体内<br>
- 从而映衬出边框投影
- </div>
- </div>
- </div>
- <div class="layui-col-md6">
- <div class="layui-card">
- <div class="layui-card-header">卡片面板</div>
- <div class="layui-card-body">
- 结合 layui 的栅格系统<br>
- 轻松实现响应式布局
- </div>
- </div>
- </div>
+ <a-card-meta title="这世界那么多人" description="吉他谱 莫文蔚">
+ </a-card-meta>
+ </a-card>
</div>
- </div>
+ </a-col>
- </div>
- <div class="blog-cell">
-
- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
- <legend>卡片面板</legend>
- </fieldset>
-
- <div class="layui-bg-gray" style="padding: 30px;">
- <div class="layui-row layui-col-space15">
- <div class="layui-col-md6">
- <div class="layui-card">
- <div class="layui-card-header">卡片面板</div>
- <div class="layui-card-body">
- 卡片式面板面板通常用于非白色背景色的主体内<br>
- 从而映衬出边框投影
- </div>
- </div>
- </div>
- <div class="layui-col-md6">
- <div class="layui-card">
- <div class="layui-card-header">卡片面板</div>
- <div class="layui-card-body">
- 结合 layui 的栅格系统<br>
- 轻松实现响应式布局
- </div>
- </div>
- </div>
- </div>
- </div>
-
- </div>
+ </a-row>
+ <a-pagination :showQuickJumper="true" :size="size" :default-current="current" :defaultPageSize="pageSize"
+ :total="total" />
</div>
@@ -70,7 +33,13 @@
name: "box",
data() {
return {
-
+ data: [],
+ loading: false,
+ busy: false,
+ size: "small",
+ total: 50,
+ pageSize: 10,
+ current: 4,
}
}
}
@@ -79,5 +48,16 @@
</script>
<style lang="less">
+ .holdHeight {
+ // background-color: beige;
+
+ }
+ .myCard {
+ padding: 10px 10px;
+ }
+
+ .myCardCover {
+ object-fit: scale-down
+ }
</style>
diff --git a/src/components/mini/box9-netFile.vue b/src/components/mini/box9-netFile.vue
index e537612..77b7fab 100644
--- a/src/components/mini/box9-netFile.vue
+++ b/src/components/mini/box9-netFile.vue
@@ -22,8 +22,6 @@
<style>
.module-box{
- background-color: #FFFFFF;
- border-radius: 20px;
}
</style>
diff --git a/src/components/mini/tagInfo.vue b/src/components/mini/tagInfo.vue
index c4ade27..ccdb5f2 100644
--- a/src/components/mini/tagInfo.vue
+++ b/src/components/mini/tagInfo.vue
@@ -5,50 +5,48 @@
<a-divider :dashed="true" orientation="left">关于我的一些..小故事</a-divider>
<a-timeline pending="...">
- <p slot="pendingDot" style="font-size: 18px;" />
- <a-timeline-item color="green">
- <a-icon slot="dot" type="form" style="font-size: 18px;" />
- <h4 >我是?</h4>
- <p>
+ <p slot="pendingDot" style="font-size: 18px;" />
+ <a-timeline-item color="white">
+ <a-icon slot="dot" type="form" style="font-size: 18px;" />
+ <h4>我...</h4>
+ <p>
<ul>
<li> 尘世间一个迷途小码农</li>
<li> 喜欢钢琴~喜欢吉他 </li>
</ul>
- </p>
- </a-timeline-item>
-
- <a-timeline-item color="green">
- <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
- <h4 class="layui-timeline-title">202108</h4>
- <p>到我提笔准备写下篇类日记的时候,时间已经来到了16号,
- <br>此刻的心情,也是平静了许多,想来,这周算是近年来比较忙的周末了吧,从周五凌晨1点就开始马不停蹄..
- </p>
- <br>然后,从哪里说起好呢,似乎从哪里起头都是一笔坏账啊..
- <br>临上车前,我靠在车站的栏杆上,她拿着个电动小风扇,倒是自己不吹,直愣愣对着我,在我旁边吱吱说话,不过此刻我早就不记得她说过了什么,
- <br>那时,我满脑子都是在想:说吧,说吧,你再不说,以后可能就没机会了
- <br>没等我脑子缓过神来,我把目光从直视栏杆的方向就自然扭回到了她的方向,话题一转:你觉得,我是在用什么心情在看你呢
- <br>
- <br>她啊了一下,似乎也没停顿,这个比较直的女孩就接过我的话:应该是.....她自顾说了几个她觉得的我对她的印象,但我又不记得了,
- <br>几分神,我顿了顿,遥遥头:不是,我是说,我对你的...
- <br>我的双手在胸前不停打转,很想通过肢体的语言给她传递我心里的感受,有那么一会,我实在是不知道怎么说下去了..
- <br>
- <br>客车要发动了,我停下双手,想起也是在5年前的一个场景,我眼神示意了下车子,我要走了..客流开始向车的入口靠过去,我正要提步,
- <br>"哎..给我一个拥抱吧"..我张了双臂,她稍微停了下,还是靠了过来..
- <br>离开她的怀抱后,我比一个六的手势:"其实,六年前,到现在为止"..趁机,我在她耳边,轻轻地道:"***,***"
- <br>
- <br>end..希望我们的故事还没有终点..
- </a-timeline-item>
-
- <a-timeline-item color="green">
- <a-icon slot="dot" type="align-center" style="font-size: 18px;" />
- <p>
-
+ </p>
+ </a-timeline-item>
+
+ <a-timeline-item color="white">
+ <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
+ <h4 class="layui-timeline-title">202108</h4>
+ <p>到我提笔准备写下篇类日记的时候,时间已经来到了16号,
+ <br>此刻的心情,也是平静了许多,想来,这周算是近年来比较忙的周末了吧,从周五凌晨1点就开始马不停蹄..
+ </p>
+ <br>然后,从哪里说起好呢,似乎从哪里起头都是一笔坏账啊..
+ <br>临上车前,我靠在车站的栏杆上,她拿着个电动小风扇,倒是自己不吹,直愣愣对着我,在我旁边吱吱说话,不过此刻我早就不记得她说过了什么,
+ <br>那时,我满脑子都是在想:说吧,说吧,你再不说,以后可能就没机会了
+ <br>没等我脑子缓过神来,我把目光从直视栏杆的方向就自然扭回到了她的方向,话题一转:你觉得,我是在用什么心情在看你呢
+ <br>
+ <br>她啊了一下,似乎也没停顿,这个比较直的女孩就接过我的话:应该是.....她自顾说了几个她觉得的我对她的印象,但我又不记得了,
+ <br>几分神,我顿了顿,遥遥头:不是,我是说,我对你的...
+ <br>我的双手在胸前不停打转,很想通过肢体的语言给她传递我心里的感受,有那么一会,我实在是不知道怎么说下去了..
+ <br>
+ <br>客车要发动了,我停下双手,想起也是在5年前的一个场景,我眼神示意了下车子,我要走了..客流开始向车的入口靠过去,我正要提步,
+ <br>"哎..给我一个拥抱吧"..我张了双臂,她稍微停了下,还是靠了过来..
+ <br>离开她的怀抱后,我比一个六的手势:"其实,六年前,到现在为止"..趁机,我在她耳边,轻轻地道:"***,***"
+ <br>
+ <br>end..希望我们的故事还没有终点..
+ </a-timeline-item>
+
+ <a-timeline-item color="<white></white>">
+ <a-icon slot="dot" type="align-left" style="font-size: 18px;" />
+
<br><em>爱她所爱,思她所思,为她承担伤痛</em>
<br>度过苦难 无论贫寒,无论卑贱或富贵
<br>无论身处乱世还是神所不顾 我都愿为她拔剑而战
<br>为她收起翅膀
<br>不离不弃,直至永远
- </p>
</a-timeline-item>
</a-timeline>
diff --git a/src/components/mini/tagTime.vue b/src/components/mini/tagTime.vue
index 1aa0c90..9f5f55f 100644
--- a/src/components/mini/tagTime.vue
+++ b/src/components/mini/tagTime.vue
@@ -10,7 +10,7 @@
{{yearData.year}}年
</a-divider>
- <a-timeline-item v-for="monthData in yearData.monthList" color="green">
+ <a-timeline-item v-for="monthData in yearData.monthList" color="white">
<a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
<h3>{{monthData.month}}</h3>
<div v-for="article in monthData.list">
@@ -23,6 +23,138 @@
</template>
<script>
+ var tempList = [{
+ "year": "2022",
+ "monthList": [{
+ "month": "9月18日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "随笔"
+ },
+ {
+ "name": "vue动态路由异步加载",
+
+ }
+ ]
+ },
+ {
+ "month": "9月08日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ }]
+ },
+ {
+ "month": "8月16日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ },
+ {
+ "name": "陈奕迅-Body Song 歌词1",
+
+ },
+ {
+ "name": "陈奕迅-Body Song 歌词2",
+ "remark": "22"
+ }
+ ]
+ },
+ {
+ "month": "4月09日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ }]
+ },
+ {
+ "month": "3月18日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ }]
+ },
+ ]
+ },
+ {
+ "year": "2021",
+ "monthList": [{
+ "month": "9月18日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "随笔"
+ },
+ {
+ "name": "vue动态路由异步加载",
+
+ }
+ ]
+ },
+ {
+ "month": "9月12日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ }]
+ },
+ {
+ "month": "9月09日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ }]
+ },
+ {
+ "month": "9月08日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ }]
+ },
+
+ ]
+ },
+ {
+ "year": "2020",
+ "monthList": [{
+ "month": "9月18日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "随笔"
+ },
+ {
+ "name": "vue动态路由异步加载",
+
+ }
+ ]
+ },
+ {
+ "month": "9月08日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ }]
+ },
+ {
+ "month": "8月16日",
+ "list": [{
+ "name": "陈奕迅-Body Song 歌词1",
+ "remark": "111"
+ },
+ {
+ "name": "陈奕迅-Body Song 歌词1",
+
+ },
+ {
+ "name": "陈奕迅-Body Song 歌词2",
+ "remark": "22"
+ }
+ ]
+ }
+ ]
+ }
+ ]
+
export default {
props: {
'type': Number,
@@ -30,126 +162,25 @@
mounted() {
console.log(this.$route.query)
},
-
- data() {
- var tempList = [{
- "year": "2022",
- "monthList": [{
- "month": "9月18日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "随笔"
- },
- {
- "name": "vue动态路由异步加载",
- }
- ]
- },
- {
- "month": "9月08日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "111"
- }]
- },
- {
- "month": "8月16日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "111"
- },
- {
- "name": "陈奕迅-Body Song 歌词1",
-
- },
- {
- "name": "陈奕迅-Body Song 歌词2",
- "remark": "22"
- }
- ]
- }
- ]
- },
- {
- "year": "2021",
- "monthList": [{
- "month": "9月18日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "随笔"
- },
- {
- "name": "vue动态路由异步加载",
-
- }
- ]
- },
- {
- "month": "9月08日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "111"
- }]
- },
- {
- "month": "8月16日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "111"
- },
- {
- "name": "陈奕迅-Body Song 歌词1",
-
- },
- {
- "name": "陈奕迅-Body Song 歌词2",
- "remark": "22"
- }
- ]
- }
- ]
- },
- {
- "year": "2020",
- "monthList": [{
- "month": "9月18日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "随笔"
- },
- {
- "name": "vue动态路由异步加载",
-
- }
- ]
- },
- {
- "month": "9月08日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "111"
- }]
- },
- {
- "month": "8月16日",
- "list": [{
- "name": "陈奕迅-Body Song 歌词1",
- "remark": "111"
- },
- {
- "name": "陈奕迅-Body Song 歌词1",
-
- },
- {
- "name": "陈奕迅-Body Song 歌词2",
- "remark": "22"
- }
- ]
- }
- ]
+ watch: {
+ '$route'(to, from) {
+ var type = this.$route.query.type;
+ var list = [];
+ if (type == 1) {
+ list = tempList;
+ } else if (type == 2) {
+ list.push(tempList[0]);
+ } else if (type == 3) {
+ list.push(tempList[1]);
}
- ]
+
+ this.list = list
+ }
+ },
+
+ data() {
+
var list = [];
var type = this.$route.query.type;
@@ -157,7 +188,6 @@
list = tempList;
} else if (type == 2) {
list.push(tempList[0]);
- list.push(tempList[1]);
} else if (type == 3) {
list.push(tempList[1]);
}
diff --git a/src/components/swichLabel/main1-show.vue b/src/components/swichLabel/main1-show.vue
index b53280b..f20b673 100644
--- a/src/components/swichLabel/main1-show.vue
+++ b/src/components/swichLabel/main1-show.vue
@@ -2,13 +2,13 @@
<div>
<div class="blog-drawer">
<a-drawer placement="left" :closable="false" :visible="visible1" :getContainer="'body'"
- :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="10" :width=270
+ :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="90" :width=270
:bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}">
<boxLeft></boxLeft>
</a-drawer>
<a-drawer placement="right" :closable="false" :visible="visible2" :getContainer="'body'"
- :after-visible-change="afterVisibleChange" @close="onClose2" :zIndex="10" :width=270
+ :after-visible-change="afterVisibleChange" @close="onClose2" :zIndex="90" :width=270
:bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}">
<boxRight></boxRight>
</a-drawer>
@@ -28,7 +28,8 @@
<a-button @click="showDrawer2">
小抽屉2
</a-button>
- <router-view></router-view>
+ <articleListScorll/>
+ <!-- <router-view class="fade"></router-view> -->
</a-col>
<a-col v-bind="colApiRight" ref="myDrawer">
@@ -44,13 +45,16 @@
import boxLeft from "../group/boxLeft.vue"
import boxRight from "../group/boxRight.vue"
import articleList from "../group/articleList.vue"
+ import articleListScorll from "../group/articleListScorll.vue"
export default {
components: {
boxLeft,
boxRight,
- articleList
+ articleList,
+ articleListScorll,
+
},
methods: {
afterVisibleChange(val) {},
@@ -140,6 +144,9 @@
background-color: white;
border-radius: 15px;
}
+ .holdHeight{
+ min-height: 780px;
+ }
.article-detail {
max-height: 750px;
@@ -155,7 +162,7 @@
/*左右两边的盒子容器*/
.blog-cell {
opacity: 0.8;
- padding: 0px 25px 10px;
+ padding: 0px 14px 10px;
}
/*左边部分*/
diff --git a/src/components/swichLabel/main2-show.vue b/src/components/swichLabel/main2-show.vue
index cd368fe..5b44b01 100644
--- a/src/components/swichLabel/main2-show.vue
+++ b/src/components/swichLabel/main2-show.vue
@@ -2,14 +2,13 @@
<div class="blog-main">
<a-row>
<a-col v-bind="colApiLeft">
- <box7 :searchType="searchType"></box7>
+ <box7 :searchType="searchType" class="fade"></box7>
</a-col>
- <a-col v-bind="colApiMain ">
+ <a-col v-bind="colApiMain" class="holdHeight">
<box8></box8>
<!-- <boxLeft></boxLeft> -->
</a-col>
- <a-col v-bind="colApiRight">
- </a-col>
+
</a-row>
</div>
</template>
@@ -29,28 +28,54 @@
return {
searchType:"乐谱搜索",
colApiLeft: {
- xs: 0,
- sm: 0,
- md: 0,
- lg: 8,
- xl: 8,
- xxl: 6,
- },
- colApiRight: {
- xs: 0,
- sm: 0,
- md: 0,
- lg: 0,
- xl: 0,
- xxl: 4,
- },
- colApiMain: {
xs: 24,
- sm: 24,
- md: 24,
- lg: 14,
- xl: 14,
- xxl: 14,
+ sm: {
+ span: 10,
+ offset: 1,
+ },
+ md: {
+ span: 14,
+ offset: 5,
+ },
+ lg: {
+ span: 10,
+ offset: 7,
+ },
+ xl: {
+ span: 6,
+ offset: 1,
+ },
+ xxl: {
+ span: 5,
+ offset: 1,
+ },
+ },
+
+ colApiMain: {
+ xs: {
+ span: 24,
+ offset: 0,
+ },
+ sm: {
+ span: 22,
+ offset: 1,
+ },
+ md: {
+ span: 22,
+ offset: 1,
+ },
+ lg: {
+ span: 22,
+ offset: 1,
+ },
+ xl: {
+ span: 15,
+ offset: 1,
+ },
+ xxl: {
+ span: 15,
+ offset: 1,
+ },
}
}
}
diff --git a/src/components/swichLabel/main3-show.vue b/src/components/swichLabel/main3-show.vue
index 01af5bc..2be7466 100644
--- a/src/components/swichLabel/main3-show.vue
+++ b/src/components/swichLabel/main3-show.vue
@@ -1,58 +1,42 @@
<template>
<div class="blog-main">
<a-row>
- <a-col v-bind="colApiLeft">
- <box7 :searchType="searchType"></box7>
- </a-col>
- <a-col v-bind="colApiMain ">
- <box9></box9>
- <!-- <boxLeft></boxLeft> -->
- </a-col>
- <a-col v-bind="colApiRight">
+ <a-col v-bind="colApiMain " class="holdHeight">
+ <a-page-header title="我的网盘" style="padding: 0px;" @back="() => this.$router.go(-1)" />
+ <net-file></net-file>
</a-col>
</a-row>
</div>
</template>
<script>
- import box7 from "../mini/box7-search.vue"
- import box8 from "../mini/box8-panal.vue"
- import box9 from "../mini/box9-netFile.vue"
- import boxLeft from "../group/boxLeft.vue"
+ import netFile from "../mini/box9-netFile.vue"
export default {
components: {
- box7,
- box8,
- box9,
- boxLeft,
+ netFile,
},
data() {
return {
- searchType:"动漫搜索",
- colApiLeft: {
- xs: 0,
- sm: 0,
- md: 0,
- lg: 8,
- xl: 8,
- xxl: 6,
- },
- colApiRight: {
- xs: 0,
- sm: 0,
- md: 0,
- lg: 0,
- xl: 0,
- xxl: 4,
- },
colApiMain: {
xs: 24,
sm: 24,
- md: 24,
- lg: 14,
- xl: 14,
- xxl: 14,
+ md: {
+ span: 24,
+ offset: 0,
+ },
+ lg: {
+ span: 20,
+ offset: 2,
+ },
+ xl: {
+ span: 20,
+ offset: 2,
+ },
+ xxl: {
+ span: 20,
+ offset: 2,
+ },
}
}
}
@@ -60,5 +44,5 @@
</script>
<style lang="less">
-
+
</style>
diff --git a/src/config/router.config.js b/src/config/router.config.js
index 0239b54..c63d838 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -27,6 +27,7 @@
children: [{
path: '/',
component: articleList,
+ props:true
},
{
path: '/box1',
diff --git a/src/main.js b/src/main.js
index fbed757..09fb3fd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -8,6 +8,9 @@
import 'ant-design-vue/dist/antd.less';
Vue.use(Antd);
+import infiniteScroll from 'vue-infinite-scroll'
+Vue.use(infiniteScroll)
+
Vue.prototype.$axios = axios
new Vue({
diff --git a/vue.config.js b/vue.config.js
index e448f53..04b875d 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -2,7 +2,7 @@
module.exports = {
configureWebpack: (config) => {
config.module.rules.push({
- test: /\.md$/,
+ test: /\.(md|htm)$/,
use: [{
loader: 'text-loader', // 解决ivew组件 忽略前缀i的问题
options: {
--
Gitblit v1.9.1