//wxss

/* 基礎樣式 */
view,scroll-view,swiper,swiper-item,icon,text,progress,button,checkbox-group,checkbox,form,input,label,picker,radio-group,radio,slider,switch,action-sheet,action-sheet-item,action-sheet-cancel,modal,toast,loading,navigator,audio,image,video,map,canvas {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}
page {
        height: 100%;
        font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
}




checkbox-group,
radio-group{
        display:block;
}




:before,
:after ,
::before,
::after{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}
.c-minheight {
        min-height: 80px;
}
.c-full {
        width: 100%;
        height: 100%;
}
.c-block {
        display: block;
}
.c-autosize {
        width: auto;
        height: auto;
}
.c-fullwidth {
        width: 100%;
}
.c-fullheight {
        height: 100%;
}
.c-initHide{
        opacity:0 !important;
}
.c-ellipse{
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow:hidden;
}
/* 自定義樣式 */




.listitemWrap{padding: 15px 56.25rpx;}
.image_thumbView{width: 637.5rpx; height: 637.5rpx; display: flex; justify-content: center; align-items: center; margin-bottom: 15px;}
.image_thumb{width: 100%; height: 100%; background-color: transparent; }
.text_description{display: block; font-size: 13px; color: rgb(122, 122, 122); text-align: justify; line-height: 1.7em; margin-bottom: 10px;}
.listitemInfoWrap{padding-bottom: 15px; display: flex; justify-content: space-between; align-items: center; border-bottom-color: rgb(237, 237, 237); border-bottom-width: 1px; border-bottom-style: solid; }
.likeinfo{display: flex; width: 80px; justify-content: space-between; align-items: center; }
.likebtn{width: 28px; height: 28px; background-color: transparent; }
.likeinfo_count{font-size: 12px; color: rgb(148, 148, 148); padding: 3px 10px; background-color: rgb(240, 240, 240); border-radius: 4px; }
.listitem_creattime{font-size: 12px; color: rgb(186, 186, 186); padding-right: 2px; }
.wx-text_hDebWU{margin-bottom: 15px; text-align: center; padding-bottom: 8px; display: block; border-bottom: 1px solid rgb(237, 237, 237); margin-top: 15px; }
.listitem01{background-color: rgb(255, 255, 255); margin-bottom: 37.5rpx; }
.listitem-navigator2{display: flex; align-items: flex-start; flex-direction: row; justify-content: flex-start; padding: 37.5rpx;}
.wx-image_tBcdCT2{width: 80px; height: 80px; }
.wx-view_cPj0ok2{margin-left: 10px; flex: 1 1 0%; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
.wx-text_TvHPc92{font-size: 16px; -webkit-line-clamp: 2; }
.wx-text_LS2Jup2{font-size: 13px; color: #a1a1a1; }
.wx-view_adF7Mw{display: flex; justify-content: space-between; padding: 18.75rpx; padding-right: 18.75rpx; }
.wx-view_2gazUr{display: flex; padding-left: 18.75rpx; }
.wx-view_DKe6UT{display: flex; justify-content: space-between; align-items: center; min-width: 40px; margin-right: 15px; }
.wx-image_6E2A1o{width: 16px; height: 16px; margin-right: 10px; }
.wx-text_id0VJj{font-size: 12px; color: #8c8c8c; }
.wx-text_9Wn0Di{font-size: 12px; color: rgb(156, 156, 156); padding-right: 18.75rpx; }
.listitem-navigator{display: flex; align-items: flex-start; flex-direction: row; justify-content: flex-start; padding: 37.5rpx; border-bottom: 1px solid rgb(237, 237, 237); border-bottom-color: rgba(237,237,237,1); }




 

//wxml

<view class="listWrap" data-c_e_id="wx_view848f9f58">
    <view class="listitem01" data-c_e_id="wx_viewcdacad14">
        <view class="wx-view_pOFBSt" data-c_e_id="wx_viewbe7a81e9"/>
    </view>
</view>
<view bindtap="tap_de01fdb6" class="listitemWrap" data-c_e_id="wx_view687aaf2e">
    <view class="image_thumbView" data-c_e_id="wx_view1ae8f9cf">
        <navigator class="image_thumbView" data-c_e_id="wx_navigatora2558f19" hover-class="navigator-hover" url="../detail/detail">
            <image class="image_thumb" data-c_e_id="wx_image7450ae92" mode="aspectFit" src="http://qty83k.creatby.com/materials/origin/640e31829b8776967dedc670b5427d0f_origin.jpg"/>
        </navigator>
    </view>
    <text class="text_description" data-c_e_id="wx_text354d27cc">小巧可愛的案頭雅物。</text>
    <view class="listitemInfoWrap" data-c_e_id="wx_view309b339d">
        <view class="likeinfo" data-c_e_id="wx_viewcc4e89cb">
            <icon class="wx-icon_tijX5I" data-c_e_id="wx_icon_f4dede3d" size="23" type="success"/>
        </view>
        <text class="listitem_creattime" data-c_e_id="wx_text8c8804b3">2016.10.29</text>
    </view>
</view>
<textarea class="c-block c-fullwidth wx-textarea_V5MakO" data-c_e_id="wx_textarea_5ef219ef" name="textarea1" placeholder="This is a textarea" type="textarea"/>
<navigator class="wx-navigator_jGU05L" data-c_e_id="wx_navigator_dce6bec8" hover-class="navigator-hover" open-type="redirect"/>
<button class="wx-button_Y3PDck" data-c_e_id="wx_button_408d3dd3" hover-class="button-hover" size="default" type="default">
    Next
</button>
 

// js

// 引入coolsite360互動配置設定
require('coolsite.config.js');

// 獲取全域性應用程式例項物件
var app = getApp();

// 建立頁面例項物件
Page({
  /**
   * 頁面名稱
   */
  name: "index",
  /**
   * 頁面的初始資料
   */

  data: {





  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad() {
    // 註冊coolsite360互動模組
    app.coolsite360.register(this);
  },

  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow() {
    // 執行coolsite360互動元件展示
    app.coolsite360.onShow(this);
  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide() {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload() {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh() {

  },


  //以下為自定義點選事件

  tap_de01fdb6: function (e) {
    //觸發coolsite360互動事件
    app.coolsite360.fireEvent(e, this);
  },

})

 

//json