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/box5-article.vue | 116 ++++++++++++++++++++++++++++++---------------------------
1 files changed, 61 insertions(+), 55 deletions(-)
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);*/
}
--
Gitblit v1.9.1