refactor(components/card): change ui for card

TIGERB · Nov 19, 2017 · 98977bb · 98977bb
1 parent dc19733
commit 98977bb
Show file tree

Hide file tree

Showing 4 changed files with 157 additions and 77 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 
 <p align="center">
 <a href="http://vue.tigerb.cn/#/"><img src="https://img.shields.io/badge/build-passing-brightgreen.svg" alt="Build Status"></a>
-<a href="https://github.com/TIGERB/easy-vue/releases"><img src="https://img.shields.io/badge/version-0.7.1-lightgrey.svg" alt="Version"></a>
+<a href="https://github.com/TIGERB/easy-vue/releases"><img src="https://img.shields.io/badge/version-0.7.2-lightgrey.svg" alt="Version"></a>
 <a href="https://github.com/TIGERB/easy-vue/releases"><img src="https://img.shields.io/badge/download-400kb-yellow.svg" alt="Downloads"></a>
 <a href="https://opensource.org/licenses/MIT"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="License"></a>
 </p>
@@ -24,7 +24,9 @@ Vue                |2.0+
 Vuex               |2.0+
 Webpack            |3.0+
 
-## Latest Version 0.7.1(2017/06/20)
+## Latest Version 0.7.2(2017/11/12)
+- 0.7.2 [2017/11/12]
+  + refactor ui for card component
 - 0.7.1 [2017/06/20]
   + separate router, store and vendor css from app.js
   + format code style
@@ -73,3 +75,7 @@ step 2:
     - build  : npm run build, and use *lite-server* or *http-server* to visit the dist directory
 
 ```
+
+## APPRECIATION
+
+<img src="https://raw.githubusercontent.com/TIGERB/easy-tips/master/money-qrcode.jpg" width="300px">
diff --git a/package.json b/package.json
@@ -1,14 +1,14 @@
 {
   "name": "easy-vue",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "description": "Learn Vue Easily",
   "main": "index.js",
   "scripts": {
     "clean": "rm -rf dist",
     "dev": "npm run clean && webpack-dev-server -d --open --progress",
     "build": "npm run clean && NODE_ENV=production webpack -p --hide-modules --progress"
   },
-  "author": "TIGERB<[email protected]>",
+  "author": "TIGERB<TIERGB.cn>",
   "license": "MIT",
   "dependencies": {
     "animate.css": "^3.5.2",

diff --git a/src/components/card.vue b/src/components/card.vue
@@ -1,12 +1,28 @@
 <template>
-  <div class="content easy-vue-card"
+  <div class="content easy-card-bg"
   v-infinite-scroll="loadMore"
   infinite-scroll-disabled="busy"
   infinite-scroll-distance="10">
-    <p v-for="result in results">
-      <img :src="result.img">
-      <span>{{result.content}}</span>
-    </p>
+    <div class="easy-card" v-for="res in results">
+    <img v-bind:src="res.img" alt="">
+    <p>{{res.content}}</p>
+    <div class="easy-card-user-info">
+      <p>
+        <img v-bind:src="res.avatar" alt="">
+        <span>from</span>{{res.nickname}}
+      </p>
+      <p @click="favourite">
+      <span class="fa"
+      :class="{
+      'fa-heart': isFavourited,
+      'nsr-favourited': isFavourited,
+      'fa-heart-o': isNotFavourited
+      }">
+      </span>
+      {{res.date}}
+      </p>
+    </div>
+  </div>
     <div class="nsr-card-loading">
       <nsr-loading
       :hide-loading="isloadingComplete"
@@ -49,34 +65,74 @@ export default {
 </script>
 
 <style>
-.easy-vue-card {
-  background-color: #f3f3f3 !important;
+.easy-card-bg {
+  background-color:#fafafa !important;
 }
 
-.easy-vue-card p {
-  display: inline-block;
-  margin: 6% 0 0 0;
-  padding: 0;
-  border-bottom: 1px solid #eee;
+.easy-card{
+  margin: 20px 0px 50px 0px;
+  border-top: 1px solid #eeefef;
+  border-bottom: 1px solid #eeefef;
+  border-radius: 0px;
   background-color: #fff;
 }
 
-.easy-vue-card p img {
+.easy-card img{
   width: 100%;
   vertical-align: middle;
 }
 
-.easy-vue-card span {
-  display: inline-block;
-  margin: 0 5%;
-  padding: 10px 0;
+.easy-card > p{
+  margin: 10px 10px;
+}
+
+.easy-card-loading{
+  margin-bottom: 90px;
+}
+
+.easy-card-user-info{
+  margin: 8px 10px;
+  overflow: hidden;
+}
+
+
+.easy-card-user-info p{
+  font-size: 14px;
+  margin: 10px 0;
+  color: #777;
 }
 
-.nsr-card-loading {
-  margin: 30px auto 80px auto;
+.easy-card-user-info p:first-child{
+  float: left;
 }
 
-.bar-easy-vue {
-  border: none;
+.easy-card-user-info p:last-child{
+  float: right;
+  font-size: 14px;
+  padding-top: 5px;
+}
+
+.easy-card-user-info p:first-child span{
+  color: #1abc9c;
+  font-size: 12px;
+  padding-right: 2px;
+}
+
+.easy-card-user-info p:last-child span{
+  color: #777;
+  font-size: 14px;
+  padding-right: 3px;
+}
+
+.easy-card-user-info .easy-favourited{
+  color: #1abc9c !important;
+}
+
+.easy-card-user-info img{
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: inline-block;
+  vertical-align: middle;
 }
 </style>
diff --git a/src/mock/api.json b/src/mock/api.json
@@ -1,82 +1,100 @@
 [
   {
-    "img": "/images/easy-vue.jpg",
-    "content": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life",
-    "0": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life"
+    "img": "http://cdn.tigerb.cn/WechatIMG129.jpeg",
+    "content": "Youth is not a time of life, it is a state of mind, it is not a matter of rosy cheeks, red lips and supple knees, it is a matter of the will, a quality of the imagination, a vigor of the emotions, it is the freshness of the deep springs of life.",
+    "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
+    "nickname": "TIGERB",
+    "date": "2017-11-12"
   },
   {
-    "img": "/images/banner.jpg",
-    "content": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life",
-    "0": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life"
+    "img": "http://cdn.tigerb.cn/WechatIMG122.jpeg",
+    "content": "Youth is not a time of life, it is a state of mind, it is not a matter of rosy cheeks, red lips and supple knees, it is a matter of the will, a quality of the imagination, a vigor of the emotions, it is the freshness of the deep springs of life.",
+    "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
+    "nickname": "TIGERB",
+    "date": "2017-11-12"
   },
   {
-    "img": "/images/easy-vue.jpg",
-    "content": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life",
-    "0": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life"
+    "img": "http://cdn.tigerb.cn/WechatIMG123.jpeg",
+    "content": "Youth is not a time of life, it is a state of mind, it is not a matter of rosy cheeks, red lips and supple knees, it is a matter of the will, a quality of the imagination, a vigor of the emotions, it is the freshness of the deep springs of life.",
+    "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
+    "nickname": "TIGERB",
+    "date": "2017-11-12"
   },
   {
-    "img": "/images/banner.jpg",
-    "content": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life",
-    "0": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life"
+    "img": "http://cdn.tigerb.cn/WechatIMG127.jpeg",
+    "content": "Youth is not a time of life, it is a state of mind, it is not a matter of rosy cheeks, red lips and supple knees, it is a matter of the will, a quality of the imagination, a vigor of the emotions, it is the freshness of the deep springs of life.",
+    "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
+    "nickname": "TIGERB",
+    "date": "2017-11-12"
   },
   {
-    "img": "/images/easy-vue.jpg",
-    "content": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life",
-    "0": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life"
+    "img": "http://cdn.tigerb.cn/WechatIMG133.jpeg",
+    "content": "Youth is not a time of life, it is a state of mind, it is not a matter of rosy cheeks, red lips and supple knees, it is a matter of the will, a quality of the imagination, a vigor of the emotions, it is the freshness of the deep springs of life.",
+    "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
+    "nickname": "TIGERB",
+    "date": "2017-11-12"
   },
   {
-    "img": "/images/banner.jpg",
-    "content": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life",
-    "0": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life"
+    "img": "http://cdn.tigerb.cn/WechatIMG132.jpeg",
+    "content": "Youth is not a time of life, it is a state of mind, it is not a matter of rosy cheeks, red lips and supple knees, it is a matter of the will, a quality of the imagination, a vigor of the emotions, it is the freshness of the deep springs of life.",
+    "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
+    "nickname": "TIGERB",
+    "date": "2017-11-12"
   },
   {
-    "img": "/images/easy-vue.jpg",
-    "content": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life",
-    "0": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life"
+    "img": "http://cdn.tigerb.cn/WechatIMG135.jpeg",
+    "content": "Youth is not a time of life, it is a state of mind, it is not a matter of rosy cheeks, red lips and supple knees, it is a matter of the will, a quality of the imagination, a vigor of the emotions, it is the freshness of the deep springs of life.",
+    "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
+    "nickname": "TIGERB",
+    "date": "2017-11-12"
   },
   {
-    "img": "/images/banner.jpg",
-    "content": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life",
-    "0": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life"
+    "img": "http://cdn.tigerb.cn/WechatIMG131.jpeg",
+    "content": "Youth is not a time of life, it is a state of mind, it is not a matter of rosy cheeks, red lips and supple knees, it is a matter of the will, a quality of the imagination, a vigor of the emotions, it is the freshness of the deep springs of life.",
+    "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
+    "nickname": "TIGERB",
+    "date": "2017-11-12"
   },
   {
-    "img": "/images/easy-vue.jpg",
-    "content": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life",
-    "0": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life"
+    "img": "http://cdn.tigerb.cn/WechatIMG126.jpeg",
+    "content": "Youth is not a time of life, it is a state of mind, it is not a matter of rosy cheeks, red lips and supple knees, it is a matter of the will, a quality of the imagination, a vigor of the emotions, it is the freshness of the deep springs of life.",
+    "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
+    "nickname": "TIGERB",
+    "date": "2017-11-12"
   },
   {
-    "img": "/images/banner.jpg",
-    "content": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life",
-    "0": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life"
+    "img": "http://cdn.tigerb.cn/WechatIMG125.jpeg",
+    "content": "Youth is not a time of life, it is a state of mind, it is not a matter of rosy cheeks, red lips and supple knees, it is a matter of the will, a quality of the imagination, a vigor of the emotions, it is the freshness of the deep springs of life.",
+    "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
+    "nickname": "TIGERB",
+    "date": "2017-11-12"
   },
   {
-    "img": "/images/easy-vue.jpg",
-    "content": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life",
-    "0": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life"
+    "img": "http://cdn.tigerb.cn/WechatIMG128.jpeg",
+    "content": "Youth is not a time of life, it is a state of mind, it is not a matter of rosy cheeks, red lips and supple knees, it is a matter of the will, a quality of the imagination, a vigor of the emotions, it is the freshness of the deep springs of life.",
+    "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
+    "nickname": "TIGERB",
+    "date": "2017-11-12"
   },
   {
-    "img": "/images/banner.jpg",
-    "content": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life",
-    "0": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life"
+    "img": "http://cdn.tigerb.cn/WechatIMG124.jpeg",
+    "content": "Youth is not a time of life, it is a state of mind, it is not a matter of rosy cheeks, red lips and supple knees, it is a matter of the will, a quality of the imagination, a vigor of the emotions, it is the freshness of the deep springs of life.",
+    "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
+    "nickname": "TIGERB",
+    "date": "2017-11-12"
   },
   {
-    "img": "/images/easy-vue.jpg",
-    "content": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life",
-    "0": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life"
+    "img": "http://cdn.tigerb.cn/WechatIMG131.jpeg",
+    "content": "Youth is not a time of life, it is a state of mind, it is not a matter of rosy cheeks, red lips and supple knees, it is a matter of the will, a quality of the imagination, a vigor of the emotions, it is the freshness of the deep springs of life.",
+    "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
+    "nickname": "TIGERB",
+    "date": "2017-11-12"
   },
   {
-    "img": "/images/banner.jpg",
-    "content": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life",
-    "0": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life"
-  },
-  {
-    "img": "/images/easy-vue.jpg",
-    "content": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life",
-    "0": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life"
-  },
-  {
-    "img": "/images/banner.jpg",
-    "content": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life",
-    "0": "Youth is not a time of life; it is a state of mind; it is not a matter of rosy cheeks, red lips and supple knees; it is a matter of the will, a quality of the imagination, a vigor of the emotions; it is the freshness of the deep springs of life"
+    "img": "http://cdn.tigerb.cn/WechatIMG134.jpeg",
+    "content": "Youth is not a time of life, it is a state of mind, it is not a matter of rosy cheeks, red lips and supple knees, it is a matter of the will, a quality of the imagination, a vigor of the emotions, it is the freshness of the deep springs of life.",
+    "avatar": "http://cdn.tigerb.cn/2623124159-59fd8c6c56254_huge256.jpeg",
+    "nickname": "TIGERB",
+    "date": "2017-11-12"
   }
 ]