message/pages/channel/index/index.wxss

/* pages/channel/index/index.wxss */
.switch_section{
    width: 100%;
    display: inline-block;
    background-color:#fff;
    position:relative;
}
.switch_section::before {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
.switch_section::after {
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    height: 1px;
    border-bottom: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
}
.switch_view{
    padding-left:30rpx;
    padding-right:30rpx;
    height: 40px;
    position: relative;
}
.switch_view::before {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    height: 1px;
    border-top: 1px solid #D9D9D9;
    color: #D9D9D9;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
    left: 15px;
}
.switch_text{
    float:left;
    display: inline-block;
    font-size:32rpx;
    color:#000;
    margin-right:16rpx;
    height:40px;
    line-height: 40px;
}
switch{
    float:right;
    margin-top: 4px;
}
.section__title {
    margin-bottom:16rpx;
    padding-left:30rpx;
    padding-right:30rpx;
    color:#999999;
    font-size:14px;
}
.button-wrapper{
    margin:0;
    /*margin-bottom:1.8em;*/
    /*width:150px;*/
    float:left;
}
.button {
position:relative;
display:block;
margin-left:auto;
margin-right:auto;
padding-left:14px;
padding-right:14px;
box-sizing:border-box;
/*font-size:18px;*/
text-align:center;
text-decoration:none;
line-height:2.55555556;
border-radius:30px;
-webkit-tap-highlight-color:transparent;
overflow:hidden;
color:#fff;
/*width:200px;*/
background-color: #50B7E3;
border:0px solid #AAAAAA;
font-size: 14px;
padding-bottom:1px;
padding-top:1px;
}
.section {
margin-bottom:10rpx;

}
.article{
    padding:50px 40px;
}
.article text{
    line-height: 25px;
    font-size:16px;
    color: #fff;
}
.active{
  position: fixed;
  width: 100%;
  height:100%;
  top:0;
  left:0;
  background-color: rgba(0, 0, 0, 1);
  overflow-y:auto; 
}
.item{
    width:16%;
    display: inline-block;
    float:left;
    margin-right:4%;
    margin-bottom:10px;
}
.item:nth-child(5n){
    margin-right:0;
}
.item image{
    width:100%;
}
.weui-loadmore {
    width: 65%;
    margin: 1.5em auto;
    line-height: 1.6em;
    font-size: 14px;
    text-align: center;
}
.weui-loading {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    -webkit-animation: weuiLoading 1s steps(12, end) infinite;
    animation: weuiLoading 1s steps(12, end) infinite;
    background: transparent url(http://www.ibanling.com/h5/gate/images/loading.svg) no-repeat;
    background-size: 100%;
}
.weui-loadmore__tips {
    display: inline-block;
    vertical-align: middle;
}
@-webkit-keyframes weuiLoading {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}

@keyframes weuiLoading {
  0% {
    transform: rotate3d(0, 0, 1, 0deg);
  }

  100% {
    transform: rotate3d(0, 0, 1, 360deg);
  }
}
.weui-loadmore_line {
    border-top: 1px solid #E5E5E5;
    margin-top: 2.4em;
}
.weui-loadmore_line .weui-loadmore__tips {
    position: relative;
    top: -0.9em;
    padding: 0 .55em;
    background-color: #000;
    color: #999999;
}