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);*/
   }