這是一個關於公益志願者公眾小程式的平臺開發(v1)

Saint發表於2018-07-09
【app.json】

{

"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs",
"pages/search/search",
"pages/ranking/ranking"
],
"window":{
"backgroundTextStyle": "dark",
"navigationBarBackgroundColor": "#31c27c",
"navigationBarTitleText": "益起來,愛益無限",
"navigationBarTextStyle": "white",
"BackgroundColor": "#000000",
"enablePullDownRefresh": true
},

"tabBar": {
"color": "#000000",
"selectedColor": "#000000",
"backgroundColor": "#31c27c",
"borderStyle": "black",
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath": "img/sy.jpg",
"selectedIconPath": "img/sy.jpg"
},
{
"pagePath": "pages/logs/logs",
"text": "分類",
"iconPath": "img/fl.jpg",
"selectedIconPath": "img/fl.jpg"
},
{
"pagePath": "pages/search/search",
"text": "搜尋",
"iconPath": "img/wd.jpg",
"selectedIconPath": "img/wd.jpg"
}
]
},
"debug": true
}

【app.wxss】

.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}

【index.wxml】

<view>
<swiper autoplay interval='{{interval}}' duration='{{duration}}' indicator-dots indicator-active-color='{{activeColor}}'>
<block wx:for="{{swiperImg}}" wx:key="u">
<swiper-item>
<image src="{{item}}"></image>
</swiper-item>
</block>
</swiper>
</view>

<image mode="scareToFill" src="{{src}}"></image>


【index.wxss】

swiper image {
height: 150px;
width: 750rpx;
}

image{
height:830rpx;
width: 750rpx;

}

【logs.wxml】

<view class="page">
<view class="page__hd">表單</view>
</view>
<view class="page__bd page__bd_spacing">
<view class="weui-flex">
<view class="weui-flex__item"><view class="placeholder">做志願</view></view>
<view class="weui-flex__item"><view class="placeholder">找組織</view></view>
</view>
<view class="weui-flex">
<view class="weui-flex__item"><view class="placeholder">公益課堂</view></view>
<view class="weui-flex__item"><view class="placeholder">扶貧募助</view></view>
<view class="weui-flex__item"><view class="placeholder">積分排名</view></view>
</view>
<view class="weui-flex">
<view class="weui-flex__item"><view class="placeholder">公益捐贈</view></view>
<view class="weui-flex__item"><view class="placeholder">個人中心</view></view>
<view class="weui-flex__item"><view class="placeholder">公開視窗</view></view>
<view class="weui-flex__item"><view class="placeholder">志願者服務矩陣</view></view>
<view class="weui-flex__item"><view class="special_placeholder">登入</view></view>
</view>
</view>

【logs.wxss】

.placeholder{
margin: 8px;
padding: 0 12px;
text-align: center;
background-color:#31C27C ;
height:3em;
line-height:3em;
color: #FFFFFF;
}
.special_placeholder{
margin: 8px;
padding: 0 12px;
text-align: center;
background-color:#1ADD19 ;
height: 3em;
line-height: 3em;
color: #FFFFFF;
}
.page__hd{
margin: 15px;
text-align: center;
background-color: #EBEBEB;
height: 3em;
width:3.5em;
line-height: 3em;
color: #31C27C;
}

【test.wxml】

<view class="page" xmlns:wx="http://www.w3.org/1999/xhtml">
<view class="page__hd">
<view class="page__title">註冊頁面</view>
</view>
<view class="page__bd">

<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">姓名</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="請輸入您的真實姓名"/>
</view>
</view>
<view class="weui-cell weui-cell_input weui-cell_vcode">
<view class="weui-cell__hd">
<view class="weui-label">手機號</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="請輸入手機號" />
</view>
<view class="weui-cell__ft">
<view class="weui-vcode-btn">獲取驗證碼</view>
</view>
</view>
<view class="weui-cell weui-cell_input weui-cell_vcode">
<view class="weui-cell__hd">
<view class="weui-label">驗證碼</view>
</view>
<view class="weui-cell__bd">
<input class="weui-input" placeholder="請輸入驗證碼" />
</view>
<view class="weui-cell__ft">
<image class="weui-vcode-img" src="/img/vcode.jpg" style="width: 108px"></image>
</view>
</view>
</view>

<view class="weui-cells__title">曾經參加過志願者活動</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_switch">
<view class="weui-cell__bd">是</view>
<view class="weui-cell__ft">
<switch checked />
</view>
</view>
</view>


<view class="weui-cells__title">意見或建議</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell">
<view class="weui-cell__bd">
<textarea class="weui-textarea" placeholder="請留下您的寶貴意見" style="height: 3.3em" />
<view class="weui-textarea-counter">0/200</view>
</view>
</view>
</view>


<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_select">
<view class="weui-cell__hd weui-cell__hd_in-select-after">
<view class="weui-label">國家/地區</view>
</view>
<view class="weui-cell__bd">
<picker bindchange="bindCountryChange" value="{{countryIndex}}" range="{{countries}}">
<view class="weui-select weui-select_in-select-after">{{countries[countryIndex]}}</view>
</picker>
</view>
</view>
</view>

<checkbox-group bindchange="bindAgreeChange">
<label class="weui-agree" for="weuiAgree">
<view class="weui-agree__text">
<checkbox class="weui-agree__checkbox" id="weuiAgree" value="agree" checked="{{isAgree}}" />
<view class="weui-agree__checkbox-icon">
<icon class="weui-agree__checkbox-icon-check" type="success_no_circle" size="9" wx:if="{{isAgree}}"></icon>
</view>
閱讀並同意<navigator url="" class="weui-agree__link">《相關條款》</navigator>
</view>
</label>
</checkbox-group>

<view class="weui-btn-area">
<button class="weui-btn" type="primary" bindtap="showTopTips">確定</button>
</view>
</view>
</view>

【test.wxss】

/*!
* WeUI v1.1.1 (https://github.com/weui/weui-wxss)
* Copyright 2017 Tencent, Inc.
* Licensed under the MIT license
*/
page{line-height:1.6;font-family:-apple-system-font,Helvetica Neue,sans-serif}icon{vertical-align:middle}
.weui-cells{position:relative;margin-top:1.17647059em;background-color:#fff;line-height:1.41176471;font-size:17px}
.weui-cells:before{top:0;border-top:1rpx solid #d9d9d9}
.weui-cells:after,.weui-cells:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}
.weui-cells:after{bottom:0;border-bottom:1rpx solid #d9d9d9}
.weui-cells__title{margin-top:.77em;margin-bottom:.3em;padding-left:15px;padding-right:15px;color:#000000;font-size:17px}
.weui-cells_after-title{margin-top:0}
.weui-cells__tips{margin-top:.3em;color:#999;padding-left:15px;padding-right:15px;font-size:14px}
.weui-cell{padding:10px 15px;position:relative;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}
.weui-cell:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}.weui-cell:first-child:before{display:none}
.weui-cell_active{background-color:#ececec}
.weui-cell_primary{-webkit-box-align:start;-webkit-align-items:flex-start;align-items:flex-start}
.weui-cell__bd{-webkit-box-flex:1;-webkit-flex:1;flex:1}
.weui-cell__ft{text-align:right;color:#999}
.weui-cell_access{color:inherit}.weui-cell__ft_in-access{padding-right:13px;position:relative}
.weui-cell__ft_in-access:after{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;margin-top:-4px;right:2px}
.weui-cell_link{color:#586c94;font-size:14px}
.weui-cell_link:active{background-color:#ececec}
.weui-cell_link:first-child:before{display:block}
.weui-icon-radio{margin-left:3.2px;margin-right:3.2px}
.weui-icon-checkbox_circle,
.weui-icon-checkbox_success{margin-left:4.6px;margin-right:4.6px}
.weui-check__label:active{background-color:#ececec}
.weui-check{position:absolute;left:-9999px}
.weui-check__hd_in-checkbox{padding-right:.35em}
.weui-cell__ft_in-radio{padding-left:.35em}
.weui-cell_input{padding-top:0;padding-bottom:0}
.weui-label{width:105px;word-wrap:break-word;word-break:break-all}
.weui-input{height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em}
.weui-toptips{position:fixed;-webkit-transform:translateZ(0);transform:translateZ(0);top:0;left:0;right:0;padding:5px;font-size:14px;text-align:center;color:#fff;z-index:5000;word-wrap:break-word;word-break:break-all}
.weui-toptips_warn{background-color:#e64340}
.weui-textarea{display:block;width:100%}
.weui-textarea-counter{color:#b2b2b2;text-align:right}
.weui-cell_warn,
.weui-textarea-counter_warn{color:#e64340}
.weui-form-preview{position:relative;background-color:#fff}
.weui-form-preview:before{top:0;border-top:1rpx solid #d9d9d9}
.weui-form-preview:after,
.weui-form-preview:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#d9d9d9}
.weui-form-preview:after{bottom:0;border-bottom:1rpx solid #d9d9d9}
.weui-form-preview__value{font-size:14px}
.weui-form-preview__value_in-hd{font-size:26px}
.weui-form-preview__hd{position:relative;padding:10px 15px;text-align:right;line-height:2.5em}
.weui-form-preview__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #d9d9d9;color:#d9d9d9;left:15px}
.weui-form-preview__bd{padding:10px 15px;font-size:.9em;text-align:right;color:#999;line-height:2}
.weui-form-preview__ft{position:relative;line-height:50px;display:-webkit-box;display:-webkit-flex;display:flex}
.weui-form-preview__ft:after{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #d5d5d6;color:#d5d5d6}
.weui-form-preview__item{overflow:hidden}
.weui-form-preview__label{float:left;margin-right:1em;min-width:4em;color:#999;text-align:justify;text-align-last:justify}
.weui-form-preview__value{display:block;overflow:hidden;word-break:normal;word-wrap:break-word}
.weui-form-preview__btn{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;color:#3cc51f;text-align:center}
.weui-form-preview__btn:after{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #d5d5d6;color:#d5d5d6}
.weui-form-preview__btn:first-child:after{display:none}
.weui-form-preview__btn_active{background-color:#eee}.weui-form-preview__btn_default{color:#999}
.weui-form-preview__btn_primary{color:#0bb20c}
.weui-cell_select{padding:0}
.weui-select{position:relative;padding-left:15px;padding-right:30px;height:2.58823529em;min-height:2.58823529em;line-height:2.58823529em;border-right:1rpx solid #d9d9d9}
.weui-select:before{content:" ";display:inline-block;height:6px;width:6px;border-width:2px 2px 0 0;border-color:#c8c8cd;border-style:solid;-webkit-transform:matrix(.71,.71,-.71,.71,0,0);transform:matrix(.71,.71,-.71,.71,0,0);position:relative;top:-2px;position:absolute;top:50%;right:15px;margin-top:-4px}
.weui-select_in-select-after{padding-left:0}
.weui-cell__bd_in-select-before,
.weui-cell__hd_in-select-after{padding-left:15px}
.weui-cell_vcode{padding-right:0}.weui-vcode-btn,
.weui-vcode-img{margin-left:5px;height:2.58823529em;vertical-align:middle}
.weui-vcode-btn{display:inline-block;padding:0 .6em 0 .7em;border-left:1px solid #e5e5e5;line-height:2.58823529em;font-size:17px;color:#3cc51f;white-space:nowrap}
.weui-vcode-btn:active{color:#52a341}
.weui-cell_switch{padding-top:6px;padding-bottom:6px}
.weui-uploader__hd{display:-webkit-box;display:-webkit-flex;display:flex;padding-bottom:10px;-webkit-box-align:center;-webkit-align-items:center;align-items:center}
.weui-uploader__title{-webkit-box-flex:1;-webkit-flex:1;flex:1}
.weui-uploader__info{color:#b2b2b2}.weui-uploader__bd{margin-bottom:-4px;margin-right:-9px;overflow:hidden}
.weui-uploader__file{float:left;margin-right:9px;margin-bottom:9px}
.weui-uploader__img{display:block;width:79px;height:79px}
.weui-uploader__file_status{position:relative}
.weui-uploader__file_status:before{content:" ";position:absolute;top:0;right:0;bottom:0;left:0;background-color:rgba(0,0,0,.5)}
.weui-uploader__file-content{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);color:#fff}
.weui-uploader__input-box{float:left;position:relative;margin-right:9px;margin-bottom:9px;width:77px;height:77px;border:1px solid #d9d9d9}
.weui-uploader__input-box:after,
.weui-uploader__input-box:before{content:" ";position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);background-color:#d9d9d9}
.weui-uploader__input-box:before{width:2px;height:39.5px}
.weui-uploader__input-box:after{width:39.5px;height:2px}
.weui-uploader__input-box:active{border-color:#999}
.weui-uploader__input-box:active:after,
.weui-uploader__input-box:active:before{background-color:#999}
.weui-uploader__input{position:absolute;z-index:1;top:0;left:0;width:100%;height:100%;opacity:0}
.weui-article{padding:20px 15px;font-size:15px}
.weui-article__section{margin-bottom:1.5em}.weui-article__h1{font-size:18px;font-weight:400;margin-bottom:.9em}
.weui-article__h2{font-size:16px;font-weight:400;margin-bottom:.34em}
.weui-article__h3{font-weight:400;font-size:15px;margin-bottom:.34em}
.weui-article__p{margin:0 0 .8em}
.weui-msg{padding-top:36px;text-align:center}
.weui-msg__link{display:inline;color:#586c94}
.weui-msg__icon-area{margin-bottom:30px}
.weui-msg__text-area{margin-bottom:25px;padding:0 20px}
.weui-msg__title{margin-bottom:5px;font-weight:400;font-size:20px}
.weui-msg__desc{font-size:14px;color:#999}
.weui-msg__opr-area{margin-bottom:25px}
.weui-msg__extra-area{margin-bottom:15px;font-size:14px;color:#999}@media screen and (min-height:438px){.weui-msg__extra-area{position:fixed;left:0;bottom:0;width:100%;text-align:center}}
.weui-flex{display:-webkit-box;display:-webkit-flex;display:flex}
.weui-flex__item{-webkit-box-flex:1;-webkit-flex:1;flex:1}
.weui-btn{margin-top:15px}
.weui-btn:first-child{margin-top:0}
.weui-btn-area{margin:1.17647059em 15px .3em}
.weui-agree{display:block;padding:.5em 15px;font-size:13px}
.weui-agree__text{color:#999}
.weui-agree__link{display:inline;color:#586c94}
.weui-agree__checkbox{position:absolute;left:-9999px}
.weui-agree__checkbox-icon{position:relative;top:2px;display:inline-block;border:1px solid #d1d1d1;background-color:#fff;border-radius:3px;width:11px;height:11px}
.weui-agree__checkbox-icon-check{position:absolute;top:1px;left:1px}
.weui-footer{color:#999;font-size:14px;text-align:center}
.weui-footer_fixed-bottom{position:fixed;bottom:.52em;left:0;right:0}
.weui-footer__links{font-size:0}
.weui-footer__link{display:inline-block;vertical-align:top;margin:0 .62em;position:relative;font-size:14px;color:#586c94}
.weui-footer__link:before{content:" ";position:absolute;left:0;top:0;width:1px;bottom:0;border-left:1rpx solid #c7c7c7;color:#c7c7c7;left:-.65em;top:.36em;bottom:.36em}
.weui-footer__link:first-child:before{display:none}
.weui-footer__text{padding:0 .34em;font-size:12px}
.weui-grids{border-top:1rpx solid #d9d9d9;border-left:1rpx solid #d9d9d9;overflow:hidden}
.weui-grid{position:relative;float:left;padding:20px 10px;width:33.33333333%;box-sizing:border-box;border-right:1rpx solid #d9d9d9;border-bottom:1rpx solid #d9d9d9}
.weui-grid_active{background-color:#ececec}
.weui-grid__icon{display:block;width:28px;height:28px;margin:0 auto}
.weui-grid__label{margin-top:5px;display:block;text-align:center;color:#000;font-size:14px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.weui-loading{margin:0 5px;width:20px;height:20px;display:inline-block;vertical-align:middle;-webkit-animation:a 1s steps(12) infinite;animation:a 1s steps(12) infinite;background:transparent url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=) no-repeat;background-size:100%}
.weui-loading.weui-loading_transparent{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E")}@-webkit-keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes a{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
.weui-badge{display:inline-block;padding:.15em .4em;min-width:8px;border-radius:18px;background-color:#e64340;color:#fff;line-height:1.2;text-align:center;font-size:12px;vertical-align:middle}
.weui-badge_dot{padding:.4em;min-width:0}.weui-loadmore{width:65%;margin:1.5em auto;line-height:1.6em;font-size:14px;text-align:center}.weui-loadmore__tips{display:inline-block;vertical-align:middle}.weui-loadmore_line{border-top:1px solid #e5e5e5;margin-top:2.4em}
.weui-loadmore__tips_in-line{position:relative;top:-.9em;padding:0 .55em;background-color:#fff;color:#999}
.weui-loadmore__tips_in-dot{position:relative;padding:0 .16em;width:4px;height:1.6em}
.weui-loadmore__tips_in-dot:before{content:" ";position:absolute;top:50%;left:50%;margin-top:-1px;margin-left:-2px;width:4px;height:4px;border-radius:50%;background-color:#e5e5e5}
.weui-panel{background-color:#fff;margin-top:10px;position:relative;overflow:hidden}.weui-panel:first-child{margin-top:0}
.weui-panel:before{top:0;border-top:1rpx solid #e5e5e5}
.weui-panel:after,.weui-panel:before{content:" ";position:absolute;left:0;right:0;height:1px;color:#e5e5e5}.weui-panel:after{bottom:0;border-bottom:1rpx solid #e5e5e5}
.weui-panel__hd{padding:14px 15px 10px;color:#999;font-size:13px;position:relative}.weui-panel__hd:after{content:" ";position:absolute;left:0;bottom:0;right:0;height:1px;border-bottom:1rpx solid #e5e5e5;color:#e5e5e5;left:15px}
.weui-media-box{padding:15px;position:relative}
.weui-media-box:before{content:" ";position:absolute;left:0;top:0;right:0;height:1px;border-top:1rpx solid #e5e5e5;color:#e5e5e5;left:15px}
.weui-media-box:first-child:before{display:none}
.weui-media-box__title{font-weight:400;font-size:17px;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;word-wrap:break-word;word-break:break-all}
.weui-media-box__desc{color:#999;font-size:13px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.weui-media-box__info{margin-top:15px;padding-bottom:5px;font-size:13px;color:#cecece;line-height:1em;list-style:none;overflow:hidden}
.weui-media-box__info__meta{float:left;padding-right:1em}
.weui-media-box__info__meta_extra{padding-left:1em;border-left:1px solid #cecece}
.weui-media-box__title_in-text{margin-bottom:8px}
.weui-media-box_appmsg{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}
.weui-media-box__thumb{width:100%;height:100%;vertical-align:top}
.weui-media-box__hd_in-appmsg{margin-right:.8em;width:60px;height:60px;line-height:60px;text-align:center}
.weui-media-box__bd_in-appmsg{-webkit-box-flex:1;-webkit-flex:1;flex:1;min-width:0}
.weui-media-box_small-appmsg{padding:0}
.weui-cells_in-small-appmsg{margin-top:0}
.weui-cells_in-small-appmsg:before{display:none}
.weui-progress{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center}
.weui-progress__bar{-webkit-box-flex:1;-webkit-flex:1;flex:1}
.weui-progress__opr{margin-left:15px;font-size:0}
.weui-navbar{display:-webkit-box;display:-webkit-flex;display:flex;position:absolute;z-index:500;top:0;width:100%;border-bottom:1rpx solid #ccc}
.weui-navbar__item{position:relative;display:block;-webkit-box-flex:1;-webkit-flex:1;flex:1;padding:13px 0;text-align:center;font-size:0}
.weui-navbar__item.weui-bar__item_on{color:#1aad19}
.weui-navbar__slider{position:absolute;content:" ";left:0;bottom:0;width:6em;height:3px;background-color:#1aad19;-webkit-transition:-webkit-transform .3s;transition:-webkit-transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s}.weui-navbar__title{display:inline-block;font-size:15px;max-width:8em;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal}
.weui-tab{position:relative;height:100%}
.weui-tab__panel{box-sizing:border-box;height:100%;padding-top:50px;overflow:auto;-webkit-overflow-scrolling:touch}
.weui-search-bar{position:relative;padding:8px 10px;display:-webkit-box;display:-webkit-flex;display:flex;box-sizing:border-box;background-color:#efeff4;border-top:1rpx solid #d7d6dc;border-bottom:1rpx solid #d7d6dc}
.weui-icon-search{margin-right:8px;font-size:inherit}
.weui-icon-search_in-box{position:absolute;left:10px;top:7px}
.weui-search-bar__text{display:inline-block;font-size:14px;vertical-align:middle}
.weui-search-bar__form{position:relative;-webkit-box-flex:1;-webkit-flex:auto;flex:auto;border-radius:5px;background:#fff;border:1rpx solid #e6e6ea}
.weui-search-bar__box{position:relative;padding-left:30px;padding-right:30px;width:100%;box-sizing:border-box;z-index:1}
.weui-search-bar__input{height:28px;line-height:28px;font-size:14px}
.weui-icon-clear{position:absolute;top:0;right:0;padding:7px 8px;font-size:0}
.weui-search-bar__label{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;border-radius:3px;text-align:center;color:#9b9b9b;background:#fff;line-height:28px}
.weui-search-bar__cancel-btn{margin-left:10px;line-height:28px;color:#09bb07;white-space:nowrap}


相關文章