From 8ec9c517c58b70918f2d72f2bfa6ab4b0a4145f9 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Fri, 19 Aug 2022 18:03:39 +0800
Subject: [PATCH] 局部细节调整
---
src/components/mini/box5-article.vue | 122 +++++++++++++++++++++-------------------
1 files changed, 64 insertions(+), 58 deletions(-)
diff --git a/src/components/mini/box5-article.vue b/src/components/mini/box5-article.vue
index f00f84d..b4a5f01 100644
--- a/src/components/mini/box5-article.vue
+++ b/src/components/mini/box5-article.vue
@@ -8,66 +8,46 @@
</a>
</div> -->
- <div class="article-meta">
- <h2 class="article-title"><a href="#">陈奕迅-Body Song 歌词</a></h2>
+ <div class="blog-article-meta">
+ <h2 class="blog-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: ''
+ },
+ "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,22 +93,27 @@
</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);*/
}
- .article-meta {
+ .blog-article-meta {
padding: 30px 30px 10px;
background-color: white;
border-radius: 15px;
}
- .article-title {
+ .blog-article-title {
color: #555;
font-size: 14px;
line-height: 14px;
--
Gitblit v1.9.1