update: optimize home page and topic detail style

Author: Lsnsh

src/components/topic-item/topic-item.wxss

@@ -1,8 +1,9 @@
 .topic-container {
   padding: 25rpx;
   background: #ffffff;
-  margin-bottom: 15rpx;
+  margin-bottom: 20rpx;
   box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  border-radius: 8rpx;
 }
 /* 头部 */
 .topic-container .topic-header {

src/components/wemark/wemark.wxss

@@ -2,7 +2,7 @@
 
 .wemark_wrapper{
 	margin:10px 0;
-	font-size:32rpx;
+	font-size:30rpx;
 	line-height: 1.8em;
 }
 .wemark_block_h1{

src/pages/index/index.js

@@ -2,6 +2,7 @@ Page({
   data: {
     bIsReady: false, // 页面是否准备就绪
     nActiveTabIndex: 0, // 当前处于活动状态的tab
+    nContentLen: 60, // 主题卡片显示正文的长度
     aTabBarList: [
       {
         text: '全部',
@@ -71,10 +72,10 @@ Page({
     return sNewText;
   },
   // 格式化主题内容为摘要形式
-  fnFmtTopicContentToSummary(sContent, nLen = 120) {
+  fnFmtTopicContentToSummary(sContent, nContentLen = 60) {
     sContent = this.fnFilterHtmlTag(sContent);
     // 将主题内容，截取指定长度字符作为摘要
-    return sContent.slice(0, nLen);
+    return sContent.slice(0, nContentLen);
   },
   /**
    * 获取主题列表
@@ -130,7 +131,7 @@ Page({
         visit_count: oItem.visit_count, // 访问数
         last_reply_at: wx.moment(oItem.last_reply_at).fromNow(), // 最后一次回复时间
         title: oItem.title, // 标题
-        content: this.fnFmtTopicContentToSummary(oItem.content), // 内容
+        content: this.fnFmtTopicContentToSummary(oItem.content, this.data.nContentLen), // 内容
         avatar_url: oItem.author.avatar_url, // 作者头像
         loginname: oItem.author.loginname, // 作者名称
         create_at: wx.moment(oItem.create_at).format('YYYY-MM-DD HH:mm:ss') // 创建时间

src/pages/index/index.wxml

@@ -12,5 +12,7 @@
       <text>{{item.text}}</text>
     </view>
   </view>
-  <topic-list data="{{aTopicList}}"></topic-list>
+  <view class="topic-list-wrap">
+    <topic-list data="{{aTopicList}}"></topic-list>
+  </view>
 </view>

src/pages/index/index.wxss

@@ -23,4 +23,7 @@
 .topic-tabbar .topic-tabbar-item.topic-tabbar-item-active {
   color: #80bd01;
   font-weight: 500;
+}
+.topic-list-wrap {
+  padding: 20rpx
 }

src/pages/topic/topic.wxss

@@ -1,9 +1,11 @@
 .topic-container {
+  padding: 20rpx;
 }
 .topic-main {
   padding: 30rpx;
-  margin-bottom: 12rpx;
+  margin-bottom: 20rpx;
   box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  border-radius: 8rpx;
 }
 .topic-info {
   padding-top: 20rpx;
@@ -23,6 +25,7 @@
   padding-top: 20rpx;
   padding-bottom: 20rpx;
   box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
+  border-radius: 8rpx;
 }
 .topic-comment-list-header {
   padding: 20rpx;