From 013e0e250bc91aacea60de68071def57254ac677 Mon Sep 17 00:00:00 2001
From: nonespace <console_log@163.com>
Date: Thu, 12 Mar 2020 10:00:59 +0800
Subject: [PATCH 1/3] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/ListContent.vue | 133 ++++++++++++++++++++++++++++------
 src/home/Index.vue            |  92 +++++++++--------------
 src/home/Tabs/Index.vue       | 113 +++++++++++++++++++++++++++++
 3 files changed, 257 insertions(+), 81 deletions(-)
 create mode 100644 src/home/Tabs/Index.vue

diff --git a/src/component/ListContent.vue b/src/component/ListContent.vue
index aa44760..eb4410c 100644
--- a/src/component/ListContent.vue
+++ b/src/component/ListContent.vue
@@ -1,35 +1,34 @@
 <template>
   <div class="listContent">
     <div
-    v-for="(item, index) in list"
-    :key="index"
-    class="article_list"
-    @click="jumpToDetail('/article/' + item.id)">
-      <div class="article_list_item">
-        <div class="article_detail">
-          <div>
+      v-for="(item, index) in list"
+      :key="index"
+      class="article_list"
+    >
+      <div class="article_list_item" >
+        <div class="article_detail" @click="jumpToDetail('/article/' + item.id)">
+          <div class="artclie_text_msg">
             <div class="article_author">
-              <img :src="item.author.avatar" alt="">
-              {{item.author.nickname}}
-            </div>
-            <div class="article_title">
-              {{item.title}}
-            </div>
-            <div class="article_description">
-              {{item.description}}
+              <img class="img"  :src="item.author.avatar" mode='widthFix' alt="" />
+              <div class="nickname">{{item.author.nickname}}</div>
             </div>
+            <div class="article_title">{{item.title}}</div>
+            <div class="article_description">{{item.description}}</div>
           </div>
-          <img :src="item.cover" alt="">
+          <img class="img_cover" v-if="item.cover" :src="item.cover" alt mode='widthFix' />
         </div>
         <div class="article_other">
           <div class="like">
-            {{item.like}}
+            <img class="img" src="http://static.gocoder.top/like.png" alt="" mode="widthFix">
           </div>
           <div class="acticle_comments">
+            <img class="img" src="http://static.gocoder.top/comment.png" style="" alt="" mode="widthFix" >
             {{item.comments}}
           </div>
           <div class="acticle_share">
-            分享
+            <wx-button open-type="share" style="background:#fff">
+              <img class="img" src="http://static.gocoder.top/share.png" style="" alt="" mode="widthFix">
+            </wx-button>
           </div>
         </div>
       </div>
@@ -43,18 +42,106 @@ import Vue from 'vue'
 export default Vue.extend({
   name: 'ListContent',
   data() {
-    return {
-    }
+    return {}
   },
   methods: {
     jumpToDetail(url) {
       window.location.href = url
-    },
+    }
   },
-  props: ['list'],
+  props: ['list']
 })
-
 </script>
 <style lang="less">
+.ellipsis{
+  display: -webkit-box;
+
+overflow: hidden;
+
+text-overflow: ellipsis;
 
+word-wrap: break-word;
+
+white-space: normal !important;
+word-break:break-all;
+
+-webkit-line-clamp: 2;
+
+-webkit-box-orient: vertical;
+
+}
+.listContent {
+  .article_list_item {
+    box-sizing: border-box;
+    background: #fff;
+    margin-bottom: 20rpx;
+    .article_detail {
+      box-sizing: border-box;
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      align-items: center;
+      border-bottom: 1px solid #F5F6F6;
+      padding:20rpx 40rpx ;
+      .artclie_text_msg{
+        flex: 1;
+      }
+      .article_author {
+        display: flex;
+        align-items: center;
+        padding-bottom: 16rpx;
+        .img {
+          height: 40rpx;
+          width: 40rpx;
+          border-radius: 50%;
+        }
+        .nickname {
+          font-size: 24rpx;
+          color: rgba(102, 102, 102, 1);
+          margin-left: 11rpx;
+        }
+      }
+      .article_title{
+        font-size: 36rpx;
+        color: #333333;
+        .ellipsis
+      }
+      .article_description{
+        color: #999999;
+        font-size: 28rpx;
+        .ellipsis;
+      }
+    }
+    .img_cover {
+      width: 160rpx;
+      height: 160rpx;
+      border-radius: 4px;
+      display: inline-block;
+      margin-left: 40rpx;
+    }
+    .article_other{
+      display: flex;
+      color: #999999;
+      font-size: 28rpx;
+      height: 88rpx;
+      align-items: center;
+      >div{
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .img{
+          height: 28rpx;
+          width: 30rpx;
+          margin-left: 10rpx;
+        }
+      .acticle_comments{
+        .img{
+          width: 35rpx;
+        }
+      }
+    }
+  }
+}
 </style>
diff --git a/src/home/Index.vue b/src/home/Index.vue
index ff2af17..ad7cb08 100644
--- a/src/home/Index.vue
+++ b/src/home/Index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="cnt">
+  <div class="home">
     <KSwiper
       :indicator-dots="indicatorDots"
       :circular="circularFlag"
@@ -7,84 +7,62 @@
       :duration="duration"
       :interval="interval"
     >
-    <KSwiperItem
-        v-for="(item,index) in background"
-        :key="index" >
+      <KSwiperItem v-for="(item,index) in background" :key="index">
         <KView :class="'swiper-item '+ item">
-        <img :src="bannerImg" class="banner-item"/>
+          <img :src="bannerImg" class="banner-item" mode='widthFix'/>
         </KView>
       </KSwiperItem>
     </KSwiper>
+    <Tabs />
 
-    <tabs></tabs>
-    <wx-button open-type="share" @click="onClickShare">分享</wx-button>
-
-    <!-- 引用列表内容组件 -->
-    <list-content :list="list"></list-content>
+    <!-- <tabs></tabs>
+    <wx-button open-type="share" @click="onClickShare">分享</wx-button>-->
   </div>
 </template>
 
 <script>
 import Vue from 'vue'
-import Header from '../common/Header.vue'
-import Footer from '../common/Footer.vue'
+import Tabs from './Tabs/Index.vue'
 import Web from 'reduce-loader!../common/Web.vue'
 import 'reduce-loader!./web'
-import ListContent from '../component/ListContent.vue'
 
 export default Vue.extend({
   name: 'Home',
   components: {
-    Header,
-    Footer,
     Web,
-    ListContent
+    Tabs
   },
+
   data() {
     return {
       interval: 2380,
-      autoplay: true,
-      indicatorDots: true,
+      autoplay: false,
+      indicatorDots: false,
       circularFlag: true,
+      duration: 1200,
       background: [
         'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
         'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
-        'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
+        'https://wechat-1251018873.file.myqcloud.com/images/banner.png'
+      ],
+      current: 1,
+      navList: [
+        { label: '最新', key: 'newest' },
+        { label: '专栏', key: 'column' },
+        { label: '最新', key: 'pay' }
       ],
       bannerImg: 'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
-      list: [{
-        id: 1,
-        author: {
-          id: 1,
-          nickname: '用户1',
-          avatar: 'https://avatars0.githubusercontent.com/u/44227678?s=88&v=4',
-        },
-        title: '测试文章1的标题',
-        description: '测试文章1的描述',
-        cover: 'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
-        like: 6,
-        comments: 6,
-      }, {
-        id: 2,
-        author: {
-          id: 2,
-          nickname: '用户2',
-          avatar: 'https://avatars2.githubusercontent.com/u/33213215?s=80&v=4',
-        },
-        title: '测试文章2的标题',
-        description: '测试文章2的描述',
-        cover: 'https://wechat-1251018873.file.myqcloud.com/images/banner.png',
-        like: 16,
-        comments: 26,
-      }]
     }
   },
   created() {
-    window.addEventListener('wxload', query => console.log('page1 wxload', query))
+    window.addEventListener('wxload', query =>
+      console.log('page1 wxload', query)
+    )
     window.addEventListener('wxshow', () => console.log('page1 wxshow'))
     window.addEventListener('wxready', () => console.log('page1 wxready'))
     window.addEventListener('wxhide', () => console.log('page1 wxhide'))
     window.addEventListener('wxunload', () => console.log('page1 wxunload'))
+
     if (process.env.isMiniprogram) {
       console.log('I am in miniprogram')
       // For Dean Test Passport.
@@ -111,29 +89,27 @@ export default Vue.extend({
     onClickJump() {
       window.location.href = '/test/list/123'
     },
+
     onClickOpen() {
       window.open('/test/detail/123')
     },
+
     onClickShare() {
       console.log('I am in miniprogram')
     },
-  },
+    navChange(val) {
+      try {
+        this.current = val.$_detail.current
+      } catch (error) {
+        console.log(error)
+      }
+    }
+  }
 })
 </script>
 
 <style lang="less">
-.cnt {
-  margin-top: 20px;
-}
-a, button {
-  display: block;
-  width: 100%;
-  height: 30px;
-  line-height: 30px;
-  text-align: center;
-  font-size: 20px;
-  border: 1px solid #ddd;
-}
+
 .miniprogram-root {
   .for-web {
     display: none;
diff --git a/src/home/Tabs/Index.vue b/src/home/Tabs/Index.vue
new file mode 100644
index 0000000..3022f60
--- /dev/null
+++ b/src/home/Tabs/Index.vue
@@ -0,0 +1,113 @@
+<template>
+  <KView class="self_tabs">
+    <KView class="tab_header">
+      <KView
+        v-for="item in tabList"
+        :key="item.key"
+        @click.stop="tabChang(item.key)"
+        :class="item.key === activeKey?'item_active':'item'"
+      >
+      {{item.label}} 
+      <img class='icon' v-if="item.icon || item.activeIcon" :src="item.key === activeKey?item.activeIcon:item.icon" style="height:30rpx;width:30rpx"/>
+      </KView>
+    </KView>
+    <kView class="content">
+      <ListContent :list="actclieList" />
+    </kView>
+  </KView>
+</template>
+
+<script>
+import Vue from 'vue'
+import ListContent from '../../component/ListContent.vue'
+
+export default Vue.extend({
+  name: 'Tabs',
+  data() {
+    return {
+      tabList: [
+        { label: '最新', key: 'newest' ,icon:'http://static.gocoder.top/unfold.png' ,activeIcon:'http://static.gocoder.top/unfold_active.png'},
+        { label: '专栏', key: 'column' },
+        { label: '付费', key: 'pay' }
+      ],
+      activeKey: 'newest',
+      actclieList: [
+        {
+          author: {
+            avatar: 'http://img1.3lian.com/gif/more/11/2012/03/d037a77443c0a72a1432d815cd3b5724.jpg',
+            nickname: '昵称'
+          },
+          title: '什么是协程（goroutine），它们是怎样作的呢?,什么是协程（goroutine），它们是怎样作的呢?',
+          description: '这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述',
+          like: true,
+          comments: 10,
+          id: 12,
+          cover: ''
+        },
+        {
+          author: {
+            avatar: 'http://img1.3lian.com/gif/more/11/2012/03/d037a77443c0a72a1432d815cd3b5724.jpg',
+            nickname: '昵称'
+          },
+          title: '什么是协程（goroutine），它们是怎样作的呢?什么是协程（goroutine），它们是怎样作的呢?什么是协程（goroutine），它们是怎样作的呢?',
+          description: '这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述',
+          like: true,
+          comments: 10,
+          id: 13,
+          cover: 'http://img1.3lian.com/gif/more/11/2012/03/d037a77443c0a72a1432d815cd3b5724.jpg'
+        }
+      ]
+    }
+  },
+  components: {
+    ListContent
+  },
+  methods: {
+    tabChang(activeKey) {
+      this.activeKey = activeKey
+      this.$emit("onChange",activeKey)
+    }
+  }
+})
+</script>
+<style lang="less">
+.self_tabs {
+  display: flex;
+  flex-direction: column;
+  .tab_header {
+    display: flex;
+    align-items: center;
+    height: 88rpx;
+    align-items: center;
+    color: #999;
+    border-bottom: 1rpx solid #f6f5f8;
+    box-sizing: border-box;
+    background: #fff;
+    justify-content:space-around;
+    .item {
+      font-size: 32rpx;
+      text-align: center;
+      width: 120rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-wrap: nowrap;
+      position:relative;
+      height: 100%;
+      box-sizing: border-box;
+      .icon{
+        margin-left:8rpx;
+      }
+    };
+    .item_active {
+     .item;
+      color: #59bf74;
+      border-bottom:4rpx solid #59BF74;
+
+    };
+  };
+  .content {
+    flex: 1;
+  }
+}
+</style>

From 7e731bce5edac8083d4aa2fd76882680109ec62a Mon Sep 17 00:00:00 2001
From: nonespace <console_log@163.com>
Date: Thu, 12 Mar 2020 10:07:32 +0800
Subject: [PATCH 2/3] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/ListContent.vue |  3 ++-
 src/home/Index.vue            |  2 +-
 src/home/Tabs/Index.vue       | 15 +++++++++------
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/component/ListContent.vue b/src/component/ListContent.vue
index eb4410c..6611871 100644
--- a/src/component/ListContent.vue
+++ b/src/component/ListContent.vue
@@ -20,6 +20,7 @@
         <div class="article_other">
           <div class="like">
             <img class="img" src="http://static.gocoder.top/like.png" alt="" mode="widthFix">
+            {{item.like}}
           </div>
           <div class="acticle_comments">
             <img class="img" src="http://static.gocoder.top/comment.png" style="" alt="" mode="widthFix" >
@@ -134,7 +135,7 @@ word-break:break-all;
       .img{
           height: 28rpx;
           width: 30rpx;
-          margin-left: 10rpx;
+          margin-right: 10rpx;
         }
       .acticle_comments{
         .img{
diff --git a/src/home/Index.vue b/src/home/Index.vue
index ad7cb08..38783cd 100644
--- a/src/home/Index.vue
+++ b/src/home/Index.vue
@@ -22,7 +22,7 @@
 
 <script>
 import Vue from 'vue'
-import Tabs from './Tabs/Index.vue'
+import Tabs from './tabs/Index.vue'
 import Web from 'reduce-loader!../common/Web.vue'
 import 'reduce-loader!./web'
 
diff --git a/src/home/Tabs/Index.vue b/src/home/Tabs/Index.vue
index 3022f60..ca0172f 100644
--- a/src/home/Tabs/Index.vue
+++ b/src/home/Tabs/Index.vue
@@ -7,8 +7,11 @@
         @click.stop="tabChang(item.key)"
         :class="item.key === activeKey?'item_active':'item'"
       >
-      {{item.label}} 
-      <img class='icon' v-if="item.icon || item.activeIcon" :src="item.key === activeKey?item.activeIcon:item.icon" style="height:30rpx;width:30rpx"/>
+      {{item.label}}
+      <img
+      class='icon' v-if="item.icon || item.activeIcon"
+      :src="item.key === activeKey?item.activeIcon:item.icon"
+      style="height:30rpx;width:30rpx"/>
       </KView>
     </KView>
     <kView class="content">
@@ -26,7 +29,7 @@ export default Vue.extend({
   data() {
     return {
       tabList: [
-        { label: '最新', key: 'newest' ,icon:'http://static.gocoder.top/unfold.png' ,activeIcon:'http://static.gocoder.top/unfold_active.png'},
+        { label: '最新', key: 'newest', icon: 'http://static.gocoder.top/unfold.png', activeIcon: 'http://static.gocoder.top/unfold_active.png' },
         { label: '专栏', key: 'column' },
         { label: '付费', key: 'pay' }
       ],
@@ -39,7 +42,7 @@ export default Vue.extend({
           },
           title: '什么是协程（goroutine），它们是怎样作的呢?,什么是协程（goroutine），它们是怎样作的呢?',
           description: '这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述',
-          like: true,
+          like: 6,
           comments: 10,
           id: 12,
           cover: ''
@@ -51,7 +54,7 @@ export default Vue.extend({
           },
           title: '什么是协程（goroutine），它们是怎样作的呢?什么是协程（goroutine），它们是怎样作的呢?什么是协程（goroutine），它们是怎样作的呢?',
           description: '这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述',
-          like: true,
+          like: 6,
           comments: 10,
           id: 13,
           cover: 'http://img1.3lian.com/gif/more/11/2012/03/d037a77443c0a72a1432d815cd3b5724.jpg'
@@ -65,7 +68,7 @@ export default Vue.extend({
   methods: {
     tabChang(activeKey) {
       this.activeKey = activeKey
-      this.$emit("onChange",activeKey)
+      this.$emit('onChange', activeKey)
     }
   }
 })

From 1760eb1ba9917bde0bdda2b5f1de4bb77c21b70d Mon Sep 17 00:00:00 2001
From: nonespace <console_log@163.com>
Date: Thu, 12 Mar 2020 19:56:23 +0800
Subject: [PATCH 3/3] =?UTF-8?q?fixebug:=E8=B7=AF=E5=BE=84=E5=A4=A7?=
 =?UTF-8?q?=E5=B0=8F=E5=86=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/home/Index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/home/Index.vue b/src/home/Index.vue
index 38783cd..ad7cb08 100644
--- a/src/home/Index.vue
+++ b/src/home/Index.vue
@@ -22,7 +22,7 @@
 
 <script>
 import Vue from 'vue'
-import Tabs from './tabs/Index.vue'
+import Tabs from './Tabs/Index.vue'
 import Web from 'reduce-loader!../common/Web.vue'
 import 'reduce-loader!./web'