add voting list into the page

add voting list into the page with the view item and css style
Cha0s0000 · Apr 1, 2018 · 8d492ea · 8d492ea
1 parent d1e00dd
commit 8d492ea
Show file tree

Hide file tree

Showing 2 changed files with 189 additions and 1 deletion.
diff --git a/pages/voteHistory/voteHistory.wxml b/pages/voteHistory/voteHistory.wxml
@@ -16,7 +16,37 @@
     </view>
     <view class="section-title">
       <view class="left-border"></view>
-      <text>Voting history</text>
+      <text>{{info_title}}</text>
+    </view>
+    <view class="content">
+      <block wx:for="{{votingList}}" wx:for-item="item">
+        <view class="post-container" bindtap='click' data-block='{{item}}'>
+          <view class="post-author-data">     
+            <image class="post-avatar" src="{{item.avatar}}"></image>
+            <text class="post-author">{{item.author}}</text>
+            <view class ="dot"></view>
+            <text class="time">{{item.time}}</text>
+          </view>
+          <text class="post-title">{{item.authorperm}}</text>
+          <view class= "foot-data">
+            <view class="post-like">
+              <!-- <icon type="success_circle" size="18"/> -->
+              <image mode="aspectFill" class="icon" src="../../images/icon/favorites-filling.png"></image>
+              <!-- <icon type="success" size="18"/> -->
+              <text class="post-like-font"> {{item.percent}}%</text>
+            </view>
+            <view class="like-num">
+              <image mode="aspectFill" class="icon" src="../../images/icon/good-filling.png"></image>
+              <text class="like-num-font">{{item.weight}}%</text>
+            </view>
+            <view class="comment-num">
+                <image mode="aspectFill" class="icon" src="../../images/icon/rshares.png"></image>
+                <text class="comment-num-font">{{item.rshares}}M</text>
+                <text class="rshares">rshares</text>
+            </view>
+          </view>
+        </view>
+      </block>
     </view>
   </view>
 </view>

diff --git a/pages/voteHistory/voteHistory.wxss b/pages/voteHistory/voteHistory.wxss
@@ -318,4 +318,162 @@
 .voting-power{
   margin:20rpx;
   margin-top:30rpx;
+}
+.content{
+  margin-top:30rpx;
+}
+.header__container{
+    width: 18rem;
+    height: 64rpx;
+    white-space: nowrap;
+}
+.header__item{
+    padding: 14rpx;
+    display: inline-block;
+}
+.active{
+  color:#d81e06;
+  border-bottom: 2rpx solid #d81e06;
+}
+
+swiper,swiper image {
+  width: 100%;
+  height: 500rpx;
+}
+.post-container{
+  display: flex;
+  flex-direction: column;
+  margin:20rpx;
+  /* margin-top: 20rpx;
+  margin-bottom: 20rpx; */
+  background-color: #fff;
+  border-bottom: 1px outset #eee;
+  border-top: 1px solid #ededed;
+  padding-bottom: 10px;
+  padding-top: 5px;
+}
+.post-author-data{
+  margin: 10rpx 0 20rpx 10rpx;
+  display: flex;
+}
+.post-avatar{
+  width: 60rpx;
+  height: 60rpx;
+  vertical-align: middle;
+}
+.post-author{
+  font-weight: 600;
+  margin-left: 20rpx;
+  vertical-align: middle;
+  margin-bottom: 5px;
+  font-size: 26rpx;
+}
+.reputation{
+  font-size: 26rpx;
+  vertical-align: middle;
+}
+
+.category{
+  margin-left:10rpx;
+  font-size: 26rpx;
+  vertical-align: middle;
+
+}
+.dot{
+  border-radius: 50%;
+  background-color: black;
+  margin-left: 15rpx;
+  margin-top: 15rpx;
+  margin-right: 10rpx;
+  height:10rpx;
+  width:10rpx;
+}
+
+.time{
+  margin-left:5rpx;
+  font-size: 26rpx;
+  vertical-align: middle;
+
+}
+.post-title{
+  font-size: 34rpx;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 10px;
+  margin-left: 10px;
+}
+.img-content{
+  display: flex;
+  flex-direction: row;
+  margin: 5px;
+}
+.post-image{
+  width: 200rpx;
+  height: 150rpx;
+  margin:  0;
+  margin-bottom: 15px;
+}
+.post-content{
+  color: #666;
+  font-size: 28rpx;
+  margin-bottom: 20rpx;
+  margin-left: 20rpx;
+  letter-spacing: 2rpx;
+  line-height: 45rpx;
+  display: -webkit-box;
+  word-break:break-all;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp:4;
+}
+.foot-data{
+  display:flex;
+}
+.post-like{
+  display: flex;
+  font-size: 13px;
+  flex-direction: row;
+  line-height: 16px;
+  margin-left: 10px;
+}
+
+.icon{
+  width: 40rpx;
+  height: 40rpx;
+}
+.post-like-font{
+  vertical-align: middle;
+  margin-right: 20px;
+  margin-left:5px;
+}
+.like-num{
+  display: flex;
+  font-size: 13px;
+  flex-direction: row;
+  line-height: 16px;
+  margin-left: 10px;
+}
+
+.comment-num{
+  display: flex;
+  font-size: 13px;
+  flex-direction: row;
+  line-height: 16px;
+  margin-left: 10px;
+}
+
+.like-num-font{
+  vertical-align: middle;
+  margin-right: 20px;
+  margin-left:5px;
+}
+
+.comment-num-font{
+  vertical-align: middle;
+  margin-right: 2px;
+  margin-left:5px;
+}
+.rshares{
+  font-size: 100;
 }