list stylle

feng-fu · Jan 20, 2017 · f5ccd5d · f5ccd5d
1 parent 2b14024
commit f5ccd5d
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 35 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -7,14 +7,14 @@
 </template>
 
 <script>
-export default {
-  name: 'app',
-  data () {
-    return {
-      isShow: false
+  export default {
+    name: 'app',
+    data () {
+      return {
+
+      }
     }
   }
-}
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">

diff --git a/src/assets/good.png b/src/assets/good.png
diff --git a/src/assets/pen.png b/src/assets/pen.png
diff --git a/src/assets/reply.png b/src/assets/reply.png
diff --git a/src/assets/view.png b/src/assets/view.png
diff --git a/src/components/article/articleDetail.vue b/src/components/article/articleDetail.vue
@@ -29,6 +29,12 @@
         </li>
       </ul>
     </div>
+    <div class="bottom">
+      <mt-field placeholder="请留下您的评论...">
+        <img src="../../assets/pen.png" height="45px" width="45px">
+      </mt-field>
+      <mt-button type="default">default</mt-button>
+    </div>
   </div>
 </template>
 
@@ -143,4 +149,15 @@
     .content
       background-color: #fff
       padding: 30px 0
+    .bottom
+      position: fixed
+      bottom: 0
+      left: 0
+      width: 100%
+      display: flex
+      .mint-cell
+        flex: 4
+      button
+        flex: 1
+        height: 48px
 </style>
diff --git a/src/components/content/all.vue b/src/components/content/all.vue
@@ -7,12 +7,17 @@
     </mt-header>
     <ul v-if='message'>
       <router-link tag='li' :to="'/topic/:'+item.id" v-for='item in message'>
-        <div class="title">
-          <span :class='getCategory(item.good, item.top, item.tab).className' v-text='getCategory(item.good, item.top, item.tab).str'></span>
-          {{item.title}}
+        <div class="title clearfix">
+          <img :src="item.author.avatar_url" alt="avatar">
+          <span>{{item.author.loginname}}</span>
+          <span class="date">{{getRecentTime(item.create_at)}}</span>
         </div>
         <div class="detail">
-          <img :src="item.author.avatar_url" alt="avatar">
+          {{item.title}}
+        </div>
+        <div class="operate clearfix">
+          <span class="view icon lside"></span><span class="view_text lside">{{item.visit_count}}</span>
+          <span class="reply icon lside"></span><span class="reply_text lside">{{item.reply_count}}</span>
         </div>
       </router-link>
     </ul>
@@ -62,8 +67,8 @@
             return '全部'
         }
       },
-      getCategory (good, top, view) {
-        return Utils.getCategory(good, top, view)
+      getRecentTime (date) {
+        return Utils.getIntervalTime(date)
       }
     }
   }
@@ -77,32 +82,45 @@
       width: 100%
       box-sizing: border-box
       padding: 0 10px
-      height: 60px
+      height: 110px
       border-npx(1px,#ccc)
       .title
+        img
+          width: 30px
+          height: 30px
+          margin: 5px
+          border-radius: 50%
+          float: left
+        span
+          display: block
+          float: left
+          margin: 0 10px
+          lh-height(40px)
+          color: #333;
+          &.date
+            color: #969696
+      .detail
+        display: block
         ellipsis(100%)
-        lh-height(24px)
+        lh-height(40px)
         font-size: 14px
+      .operate
+        margin: 0 5px
         span
           display: inline-block
-          border-radius: 2px
-          margin: 2px
-          padding: 0 3px
-          lh-height(20px)
-          color: #ffffff;
-          &.top
-            background: #E74C3C
-          &.ask
-            background: #3498DB
-          &.good
-            background: #E67E22
-          &.job
-            background: #9B59B6
-          &.share
-            background: #1ABC9C
-      .detail
-        img
-          width: 20px
-          height: 20px
-          border-radius: 50%
+          lh-height(25px)
+          color: #bfbfbf
+          &.lside
+            float: left
+            margin-right: 10px
+          &.icon
+            width: 25px
+            background-size: 25px
+            background-repeat: no-repeat
+            &.view
+              background-image: url(../../assets/view.png)
+            &.reply
+              background-image: url(../../assets/reply.png)
+
+
 </style>
diff --git a/src/libs/utils.js b/src/libs/utils.js
@@ -24,7 +24,7 @@ exports.getIntervalTime = (time) => {
   if (timeNow >= 1) {
     return parseInt(timeNow) + '年前'
   } else if (timeNow * 365 / 30 >= 1) {
-    return parseInt(timeNow * 365 / 30) + '月前'
+    return parseInt(timeNow * 365 / 30) + '个月前'
   } else if (timeNow * 365 >= 1) {
     return parseInt(timeNow * 365) + '天前'
   } else if (timeNow * 365 * 24 >= 1) {

diff --git a/static/css/reset.css b/static/css/reset.css
@@ -31,6 +31,7 @@ footer, header, menu, nav, section {
 
 body {
     line-height: 1;
+    font-family: SF UI Display,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
 }
 
 blockquote, q {
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,6 +31,7 @@ footer, header, menu, nav, section { @@
     body {
         line-height: 1;
+        font-family: SF UI Display,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
     }
     blockquote, q {
@@ Expand Down @@