微信小程序————wxss和css的部分区别

集成微信提供 的weui进微信小程序wxss

最开始将weui.css 全部复制进入app.wxss里面，发现跑不起来。

搜索了下，常见原因有如下几点：

截止2016。11.14日，

wxss和css的部分区别

不支持:first-child这类写法，

不支持:active

不支持:checked

不支持自定义字体

@font-face {
font-weight: normal;
font-style: normal;
font-family: “weui”;

.a>.b

.a~.b

没有body,html这些鬼dom

不支持keyframe动画

不支持 [class^=”icon-“]

:before :after 改成 ::before ::after

a p span h1 h6等这些标记可以改成相应的view text等

img -> image

input -> <input /> 加上结束标记

checkbox 改成 <checkbox ></checkbox> radio image 等类似，严谨的均要有结束标记

text内部只能有text标记

最后整理的app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 
.justify{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: break-word;
  word-break: break-all;
}
page{
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    font-family: '微软雅黑';
    width:100%;overflow-x: hidden;
    background-color:#EFEFF4;
}
.clearfix::before, .clearfix::after
{
    display: table;

    content: ' ';
}
.clearfix::after
{
    clear: both;
}
.ptips{
  font-size:26rpx;
  color:#888;
  padding:15rpx 30rpx;
}


image{
  border:0;
}
.txt-green{
  color:#09bb07;
}
.txt-black{
  color:#353535;
}
.txt-gray{
  color:#888;
}
.txt-blue{
  color:#576b95;
}
.txt-red{
  color: #e64340;
}
.txt-white{
  color:#fff;
}
.bg-green{
  background-color:rgba(9,187,7,1);
}
.bg-black{
  background-color:rgba(53,53,53,1);
}
.bg-gray{
  background-color:rgba(136,136,136,1);
}
.bg-blue{
  background-color:rgba(87,107,149,1);
}
.bg-red{
  background-color:rgba(230,67,64,1);
}
.bg-white{
  background-color:rgba(255,255,255,1);
}
.txt-black-light{
  color:#b2b2b2;
}
.txt-black-semi{
  color:#353535;
}
.txt-black-0{
  color:#000;
}



page {
  height: 100%;
}

.page-header {
  display: flex;
  font-size: 32rpx;
  color: #aaa;
  margin-top: 50rpx;
  flex-direction: column;
  align-items: center;
}
.page-header-text {
  padding: 20rpx 40rpx;
}
.page-header-line {
  width: 150rpx;
  height: 1px;
  border-bottom: 1px solid #ccc; 
}

.page-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-grow: 1;
  overflow-x: hidden;
}
.page-body-wrapper {
  margin-top: 100rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.page-body-wrapper form {
  width: 100%;
}


.page-body-wording {
  text-align: center;
  padding: 200rpx 100rpx;
}
.page-body-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  margin-bottom: 50rpx;
  width: 100%;
  padding: 50rpx 0 150rpx 0;
}
.page-body-title {
  margin-bottom: 100rpx;
  font-size: 32rpx;
}
.page-body-text {
  font-size: 30rpx;
  line-height: 26px;
  color: #ccc;
}
.page-body-text-small {
  font-size: 24rpx;
  color: #000;
  margin-bottom: 100rpx;
}
.page-body-form {
  width: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  border: 1px solid #eee;
}
.page-body-form-item {
  display: flex;
  align-items: center;
  margin-left: 30rpx;
  border-bottom: 1px solid #eee;
  height: 88rpx;
  font-size: 34rpx;
}
.page-body-form-key {
  width: 180rpx;
  color: #000;
}
.page-body-form-value {
  flex-grow: 1;
}
.page-body-form-value .input-placeholder {
  color: #b2b2b2;
}

.page-body-form-picker {
  display: flex;
  justify-content: space-between;
  height: 100rpx;
  align-items: center;
  font-size: 36rpx;
  margin-left: 20rpx;
  padding-right: 20rpx;
  border-bottom: 1px solid #eee;
}
.page-body-form-picker-value {
  color: #ccc;
}

.page-body-buttons {
  width: 100%;
}
.page-body-button {
  margin: 25rpx;
}
.page-body-button image {
  width: 150rpx;
  height: 150rpx;
}
.page-footer {
  text-align: center;
  color: #1aad19;
  font-size: 24rpx;
  margin: 20rpx 0;
}

.green{
    color: #09BB07;
}
.red{
    color: #F76260;
}
.blue{
    color: #10AEFF;
}
.yellow{
    color: #FFBE00;
}
.gray{
    color: #C9C9C9;
}

.strong{
    font-weight: bold;
}

.bc_green{
    background-color: #09BB07;
}
.bc_red{
    background-color: #F76260;
}
.bc_blue{
    background-color: #10AEFF;
}
.bc_yellow{
    background-color: #FFBE00;
}
.bc_gray{
    background-color: #C9C9C9;
}

.tc{
    text-align: center;
}

.page input{
    background-color: #fff;
}
checkbox, radio{
    margin-right: 10rpx;
}

.btn-area{
    padding: 0 30rpx;
}
.btn-area button{
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}

.page {
    min-height: 100%;
    flex: 1;
    font-size: 32rpx;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    overflow: hidden;
}
.page__hd{
    padding: 50rpx 50rpx 100rpx 50rpx;
    text-align: center;
}
.page__title{
    display: inline-block;
    padding: 20rpx 40rpx;
    font-size: 32rpx;
    color: #AAAAAA;
    border-bottom: 1px solid #CCCCCC;
}
.page__desc{
    display: none;
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #BBBBBB;
}

.section{
    margin-bottom: 80rpx;
}
.section_gap{
    padding: 0 30rpx;
}
.section__title{
    margin-bottom: 16rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
}
.section_gap .section__title{
    padding-left: 0;
    padding-right: 0;
}

/*文章*/
.article {
  padding: 20px 15px;
  font-size: 15px;
}
.article{
  max-width: 100%;
  box-sizing: border-box;
  word-wrap: break-word;
}
.article .section {
  margin-bottom: 1.5em;
}
.article .h1 {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: .9em;
}
.article .h2 {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: .34em;
}
.article .h3 {
  font-weight: 400;
  font-size: 15px;
  margin-bottom: .34em;
}


.article .p {
  margin: 0 0 .8em;
}
.article .image_wrap{
 text-align: center;
}
.article image{
  max-width:100%;

}
/*列表panel*/

.panel {
  background-color: #FFFFFF;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
}
/*.panel:first-child {
  margin-top: 0;
}
*/
.panel::before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #E5E5E5;
  color: #E5E5E5;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
.panel::after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #E5E5E5;
  color: #E5E5E5;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
.panel__hd {
  padding: 14px 15px 10px;
  color: #999999;
  font-size: 13px;
  position: relative;
}
.panel__hd::after {
  content: " ";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #E5E5E5;
  color: #E5E5E5;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
  left: 15px;
}
.media-box {
  padding: 15px;
  position: relative;
}
.media-box::before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #E5E5E5;
  color: #E5E5E5;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
  left: 15px;
}
/*
.media-box:first-child::before {
  display: none;
}
*/
.a.media-box {
  color: #000000;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*
.a.media-box::active {
  background-color: #ECECEC;
}
*/
.media-box__title {
  font-weight: 400;
  font-size: 17px;
  width: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: break-word;
  word-break: break-all;
}
.media-box__desc {
  color: #999999;
  font-size: 13px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.media-box__info {
  margin-top: 15px;
  padding-bottom: 5px;
  font-size: 13px;
  color: #CECECE;
  line-height: 1em;
  list-style: none;
  overflow: hidden;
}
.media-box__info__meta {
  float: left;
  padding-right: 1em;
}
.media-box__info__meta_extra {
  padding-left: 1em;
  border-left: 1px solid #CECECE;
}
.media-box_text .media-box__title {
  margin-bottom: 8px;
}
.media-box_appmsg {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.media-box_appmsg .media-box__hd {
  margin-right: .8em;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
}
.media-box_appmsg .media-box__thumb {
  width: 100%;
  max-height: 100%;
  vertical-align: top;
}
.media-box_appmsg .media-box__bd {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  min-width: 0;
}
.media-box_small-appmsg {
  padding: 0;
}
.media-box_small-appmsg .cells {
  margin-top: 0;
}
.media-box_small-appmsg .cells::before {
  display: none;
}
.panel__table__view{
  margin-top:40rpx;
  background-color:#fff;
  position:relative;
  border-top:1rpx solid #e5e5e5;
  border-bottom:1rpx solid #e5e5e5;
  width:100%;
  overflow:hidden;
}
.panel__table__view .panel__table__view__cell{
  height:86rpx;
  line-height:86rpx;
  width:100%;
  box-sizing:border-box;
  padding-left:30rpx;
  font-size:32rpx;
  position: relative;
  display: block;
}

.panel__table__view .panel__table__view__cell::before{
  content:" ";
  position: absolute;
  top: 0;
  right: 0;
  height: 1rpx;
  border-top: 1rpx solid #E5E5E5;
  color: #E5E5E5;
  left: 30rpx;
}
.panel__table__view .panel__table__view__cell.firstchild::before{
  border-top:none;
}
.panel__table__view .panel__table__view__cell .panel__table__cell__hd{
  display: inline-block;
  height:86rpx;
}
.panel__table__view .panel__table__view__cell .panel__table__cell__bd{
  display: block;
  float: right;
  color:#888;
  width:400rpx;
  text-align: right;
  padding-right:30rpx;
  font-size:26rpx;
}
.panel__table__view .panel__table__view__cell .panel__table__cell__ft{
  display: block;
  position: absolute;
  right:30rpx;
  top:0rpx;
  height:86rpx;
  line-height:86rpx;
}
.panel__table__view .panel__table__view__cell .panel__table__cell__ft switch{
  display: inline-block;
  margin-top:14rpx;
}
.panel__table__view .panel__table__view__cell .panel__table__cell__ft .cell__ft {
  padding-right: 0px;
  position: relative;
}
.panel__table__view .panel__table__view__cell.cell_access .panel__table__cell__ft::after {
  content: " ";
  display: inline-block;
  height: 17rpx;
  width: 17rpx;
  border-width: 2rpx 2rpx 0 0;
  border-color: #C6C6CB;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
          transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  position: absolute;
  top: 50%;
  margin-top: -10rpx;
  right: 2rpx;
}
.panel__table__view .panel__table__view__cell.cell_access .panel__table__cell__bd{
  padding-right:50rpx;
}
.panel__table__view .panel__table__view__cell .panel__table__cell__hd image{
  width:50rpx;
  height:50rpx;
  margin-top:18rpx;
  margin-right:18rpx;
  box-sizing:border-box;
  float: left;
}
/*栅格grid九宫格*/

.grids {
  position: relative;
  overflow: hidden;
}
.grids::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);
}
.grids::after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-left: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleX(0.5);
          transform: scaleX(0.5);
}
.grid {
  position: relative;
  float: left;
  padding: 20px 10px;
  width: 33.33333333%;
  box-sizing: border-box;
}
.grid::before {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: scaleX(0.5);
          transform: scaleX(0.5);
}
.grid::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);
}
/*.grid::active {
  background-color: #ECECEC;
}*/
.grid__icon {
  width: 28px;
  height: 28px;
  margin: 0 auto;
}
.grid__icon .img {
  display: block;
  width: 100%;
  height: 100%;
}
.grid__icon .grid__label {
  margin-top: 5px;
}
.grid__label {
  display: block;
  text-align: center;
  color: #000000;
  font-size: 14px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
/*底部链接*/
.footer {
  color: #999999;
  font-size: 14px;
  text-align: center;
}
.footer .a {
  color: #586C94;
}
.footer_fixed-bottom {
  position: fixed;
  bottom: .52em;
  left: 0;
  right: 0;
}
.footer__links {
  font-size: 0;
}
.footer__link {
  display: inline-block;
  vertical-align: top;
  margin: 0 .62em;
  position: relative;
  font-size: 14px;
}
.footer__link::before {
  content: " ";
  position: absolute;
  left: 0;
  width: 1px;
  border-left: 1px solid #C7C7C7;
  color: #C7C7C7;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleX(0.5);
          transform: scaleX(0.5);
  left: -0.65em;
  top: .36em;
  bottom: .36em;
}
/*
.footer__link:first-child::before {
  display: none;
}
*/
.footer__text {
  padding: 0 .34em;
  font-size: 12px;
}
/*flex*/
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.flex__item {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}
/*对话*/

.dialog {
  position: fixed;
  z-index: 5000;
  width: 80%;
  max-width: 300px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #FFFFFF;
  text-align: center;
  border-radius: 3px;
  overflow: hidden;
}
.dialog__hd {
  padding: 1.3em 1.6em 0.5em;
}
.dialog__title {
  font-weight: 400;
  font-size: 18px;
}
.dialog__bd {
  padding: 0 1.6em 0.8em;
  min-height: 40px;
  font-size: 15px;
  line-height: 1.3;
  word-wrap: break-word;
  word-break: break-all;
  color: #999999;
}
/*
.dialog__bd:first-child {
  padding: 2.7em 20px 1.7em;
  color: #353535;
}
*/
.dialog__ft {
  position: relative;
  line-height: 48px;
  font-size: 18px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.dialog__ft::after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #D5D5D6;
  color: #D5D5D6;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
.dialog__btn {
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  color: #3CC51F;
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  position: relative;
}
/*.dialog__btn::active {
  background-color: #EEEEEE;
}*/
.dialog__btn::after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-left: 1px solid #D5D5D6;
  color: #D5D5D6;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleX(0.5);
          transform: scaleX(0.5);
}
/*
.dialog__btn:first-child::after {
  display: none;
}
*/
.dialog__btn_default {
  color: #353535;
}
.dialog__btn_primary {
  color: #0BB20C;
}

/*列表cell*/
.cells {
  margin-top: 1.17647059em;
  background-color: #FFFFFF;
  line-height: 1.41176471;
  font-size: 17px;
  overflow: hidden;
  position: relative;
}
.cells::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);
}
.cells::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);
}
.cells__title {
  margin-top: .77em;
  margin-bottom: .3em;
  padding-left: 15px;
  padding-right: 15px;
  color: #999999;
  font-size: 14px;
}
.cells.first-child {
  margin-top: 0;
}
.cells__tips {
  margin-top: .3em;
  color: #999999;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 14px;
}
.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;
}
.cell::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;
}
/*
.cell:first-child::before {
  display: none;
}
*/
.cell_primary {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
          align-items: flex-start;
}
.cell__bd {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}
.cell__ft {
  text-align: right;
  color: #999999;
}
.cell_access {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  color: inherit;
}
/*
.cell_access::active {
  background-color: #ECECEC;
}
*/
.cell_access .cell__ft {
  padding-right: 13px;
  position: relative;
}
.cell_access .cell__ft::after {
  content: " ";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #C8C8CD;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
          transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  top: -2px;
  position: absolute;
  top: 50%;
  margin-top: -4px;
  right: 2px;
}
.cell_link {
  color: #586C94;
  font-size: 14px;
}
/*
.cell_link:first-child::before {
  display: block;
}
*/
.check__label {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/*
.check__label::active {
  background-color: #ECECEC;
}
*/
.check {
  position: absolute;
  left: -9999em;
}
.cells_radio .cell__ft {
  padding-left: 0.35em;
}
/*
.cells_radio .check::checked + .icon-checked::before {
  display: block;
  content: 'EA08';
  color: #09BB07;
  font-size: 16px;
}*/
.cells_checkbox .cell__hd {
  padding-right: 0.35em;
}
/*.cells_checkbox .icon-checked::before {
  content: 'EA01';
  color: #C9C9C9;
  font-size: 23px;
  display: block;
}
.cells_checkbox .check::checked .icon-checked::before {
  content: 'EA06';
  color: #09BB07;
}*/
.label {
  display: block;
  width: 105px;
  word-wrap: break-word;
  word-break: break-all;
}
.input {
  width: 100%;
  border: 0;
  outline: 0;
  -webkit-appearance: none;
  background-color: transparent;
  font-size: inherit;
  color: inherit;
  height: 1.41176471em;
  line-height: 1.41176471;
}
.input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.textarea {
  display: block;
  border: 0;
  resize: none;
  width: 100%;
  color: inherit;
  font-size: 1em;
  line-height: inherit;
  outline: 0;
}
.textarea-counter {
  color: #B2B2B2;
  text-align: right;
}
.cell_warn .textarea-counter {
  color: #E64340;
}
.toptips {
  display: none;
  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;
}
.toptips_warn {
  background-color: #E64340;
}
.cells_form .cell__ft {
  font-size: 0;
}
.cells_form .icon-warn {
  display: none;
}


.cells_form input,
.cells_form textarea,
.cells_form label[for] {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.cell_warn {
  color: #E64340;
}
.cell_warn .icon-warn {
  display: inline-block;
}
.form-preview {
  position: relative;
  background-color: #FFFFFF;
}
.form-preview::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);
}
.form-preview::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);
}
.form-preview__hd {
  position: relative;
  padding: 10px 15px;
  text-align: right;
  line-height: 2.5em;
}
.form-preview__hd::after {
  content: " ";
  position: absolute;
  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);
  left: 15px;
}
.form-preview__hd .form-preview__value {
  font-style: normal;
  font-size: 1.6em;
}
.form-preview__bd {
  padding: 10px 15px;
  font-size: .9em;
  text-align: right;
  color: #999999;
  line-height: 2;
}
.form-preview__ft {
  position: relative;
  line-height: 50px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.form-preview__ft::after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #D5D5D6;
  color: #D5D5D6;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleY(0.5);
          transform: scaleY(0.5);
}
.form-preview__item {
  overflow: hidden;
}
.form-preview__label {
  float: left;
  margin-right: 1em;
  min-width: 4em;
  color: #999999;
  text-align: justify;
  text-align-last: justify;
}
.form-preview__value {
  display: block;
  overflow: hidden;
  word-break: normal;
  word-wrap: break-word;
}
.form-preview__btn {
  position: relative;
  display: block;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
  color: #3CC51F;
  text-align: center;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
button.form-preview__btn {
  background-color: transparent;
  border: 0;
  outline: 0;
  font-size: inherit;
}
/*
.form-preview__btn::active {
  background-color: #EEEEEE;
}
*/
.form-preview__btn::after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-left: 1px solid #D5D5D6;
  color: #D5D5D6;
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transform: scaleX(0.5);
          transform: scaleX(0.5);
}
/*
.form-preview__btn:first-child::after {
  display: none;
}
*/
.form-preview__btn_default {
  color: #999999;
}
.form-preview__btn_primary {
  color: #0BB20C;
}
.cell_select {
  padding: 0;
}
.cell_select .select {
  padding-right: 30px;
}
.cell_select .cell__bd::after {
  content: " ";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #C8C8CD;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
          transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  top: -2px;
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -3px;
}
.select {
  -webkit-appearance: none;
  border: 0;
  outline: 0;
  background-color: transparent;
  width: 100%;
  font-size: inherit;
  height: 44px;
  line-height: 44px;
  position: relative;
  z-index: 1;
  padding-left: 15px;
}
.cell_select-before {
  padding-right: 15px;
}
.cell_select-before .select {
  width: 105px;
  box-sizing: border-box;
}
.cell_select-before .cell__hd {
  position: relative;
}
.cell_select-before .cell__hd::after {
  content: " ";
  position: absolute;
  right: 0;
  top: 0;
  width: 1px;
  bottom: 0;
  border-right: 1px solid #D9D9D9;
  color: #D9D9D9;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
  -webkit-transform: scaleX(0.5);
          transform: scaleX(0.5);
}
.cell_select-before .cell__hd::before {
  content: " ";
  display: inline-block;
  height: 6px;
  width: 6px;
  border-width: 2px 2px 0 0;
  border-color: #C8C8CD;
  border-style: solid;
  -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
          transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);

  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -5px;
}

.cell_select-before .cell__bd {
  padding-left: 15px;
}
.cell_select-before .cell__bd::after {
  display: none;
}
.cell_select-after {
  padding-left: 15px;
}
.cell_select-after .select {
  padding-left: 0;
}
.cell_vcode {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.vcode-img {
  margin-left: 5px;
  height: 44px;
  width:108px;
  vertical-align: middle;
}
.vcode-btn {
  display: inline-block;
  height: 44px;
  margin-left: 5px;
  padding: 0 0.6em 0 0.7em;
  border-left: 1px solid #E5E5E5;
  line-height: 44px;
  vertical-align: middle;
  font-size: 17px;
  color: #3CC51F;
}
/*
.vcode-btn::active {
  color: #52a341;
}
*/
.gallery {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
  z-index: 1000;
}
.gallery__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 60px;
  left: 0;
  background: center center no-repeat;
  background-size: contain;
}
.gallery__opr {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #0D0D0D;
  color: #FFFFFF;
  line-height: 60px;
  text-align: center;
}
.gallery__del {
  display: block;
}
.cell_switch {
  padding-top: 6px;
  padding-bottom: 6px;
}
.switch {
  -webkit-appearance: none; 
  position: relative;
  width: 52px;
  height: 32px;
  border: 1px solid #DFDFDF;
  outline: 0;
  border-radius: 16px;
  box-sizing: border-box;
  background-color: #DFDFDF;
  -webkit-transition: background-color 0.1s, border 0.1s;
  transition: background-color 0.1s, border 0.1s;
}
.switch::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 30px;
  border-radius: 15px;
  background-color: #FDFDFD;
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
  transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
  transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
}
.switch::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background-color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
  transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
  transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
}
/*
.switch::checked {
  border-color: #04BE02;
  background-color: #04BE02;
}
.switch::checked::before {
  -webkit-transform: scale(0);
          transform: scale(0);
}
.switch::checked::after {
  -webkit-transform: translateX(20px);
          transform: translateX(20px);
}
*/
.uploader__hd {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding-bottom: 10px;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.uploader__title {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
}
.uploader__info {
  color: #B2B2B2;
}
.uploader__bd {
  margin-bottom: -4px;
  margin-right: -9px;
  overflow: hidden;
}
.uploader__files {
  list-style: none;
}
.uploader__file {
  float: left;
  margin-right: 9px;
  margin-bottom: 9px;
  width: 79px;
  height: 79px;
  background: no-repeat center center;
  background-size: cover;
}
.uploader__file_status {
  position: relative;
}
.uploader__file_status::before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
.uploader__file_status .uploader__file-content {
  display: block;
}
.uploader__file-content {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  color: #FFFFFF;
}
.uploader__file-content .icon-warn {
  display: inline-block;
}
.uploader__input-box {
  float: left;
  position: relative;
  margin-right: 9px;
  margin-bottom: 9px;
  width: 77px;
  height: 77px;
  border: 1px solid #D9D9D9;
}
.uploader__input-box::before,
.uploader__input-box::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: #D9D9D9;
}
.uploader__input-box::before {
  width: 2px;
  height: 39.5px;
}
.uploader__input-box::after {
  width: 39.5px;
  height: 2px;
}
/*
.uploader__input-box::active {
  border-color: #999999;
}
.uploader__input-box::active::before,
.uploader__input-box::active::after {
  background-color: #999999;
}
*/
.uploader__input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.msg {
  padding-top: 36px;
  text-align: center;
}
.msg__icon-area {
  margin-bottom: 30px;
}
.msg__text-area {
  margin-bottom: 25px;
  padding: 0 20px;
}
.msg__text-area .a {
  color: #586C94;
}
.msg__title {
  margin-bottom: 5px;
  font-weight: 400;
  font-size: 20px;
}
.msg__desc {
  font-size: 14px;
  color: #999999;
}
.msg__opr-area {
  margin-bottom: 25px;
}
.msg__extra-area {
  margin-bottom: 15px;
  font-size: 14px;
  color: #999999;
}
.msg__extra-area .a {
  color: #586C94;
}
@media screen and (min-height: 438px) {
  .msg__extra-area {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
  }
}

/*渐入渐出动画*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.animate-fade-in {
  -webkit-animation: fadeIn ease .3s forwards;
          animation: fadeIn ease .3s forwards;
}
@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.animate-fade-out {
  -webkit-animation: fadeOut ease .3s forwards;
          animation: fadeOut ease .3s forwards;
}


/*同意条款*/

.agree {
  display: block;
  padding: .5em 15px;
  font-size: 13px;
}
.agree .a {
  color: #586C94;
  display: inline-block;
}
.agree__text {
  color: #999999;

  display: inline-block;
}
.agree__checkbox {
  -webkit-appearance: none;
  outline: 0;
  font-size: 0;
  border: 1px solid #D1D1D1;
  background-color: #FFFFFF;
  border-radius: 3px;
  width: 13px;
  height: 13px;
  position: relative;
  vertical-align: 0;
  top: 2px;
  display: inline-block;
}
/*
.agree__checkbox::checked::before {
  font-family: "weui";
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  text-decoration: inherit;
  content: "EA08";
  color: #09BB07;
  font-size: 13px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -48%) scale(0.73);
          transform: translate(-50%, -48%) scale(0.73);
}

.agree__checkbox:disabled {
  background-color: #E1E1E1;
}
.agree__checkbox:disabled::before {
  color: #ADADAD;
}

*/
.contain{
  width:100%;
  padding:0 15rpx;
  position:relative;
  box-sizing: border-box;
}
.scrollRefresh{
  height:100%;
  overflow-y: auto;
}
/*搜索框顶部*/
.search__top{
  height:86rpx;
  width:100%;
  background-color:#efeff4;
  position:relative;
  border-bottom:1rpx solid #e4e4e7;
}
.search__form{
  box-sizing:border-box;
  border-radius:7px;
  background-color:#fff;
  position: absolute;
  left:15rpx;
  right:15rpx;
  top:15rpx;
  bottom:15rpx;
  height:56rpx;
  z-index: 1;
  border:1px solid #dfe0e3;
}
.search__input{
  position:relative;
  padding-top:0rpx;
  padding-bottom:0rpx;
  padding-right:95rpx;
  padding-left:65rpx;
  color:#888;
  font-size:28rpx;
}
.search__icon{
  z-index:2;
  width:144rpx;
  height:26rpx;
  position:absolute;
  left:50%;
  top:15rpx;
  margin-left:-72rpx;
  color:#888;
  font-size:28rpx;
  transition:all .2s;
}
.search__icon.search__active{
  margin-left:0;
  left:30rpx;
}


/*消息列表*/
.front__lists{
  background-color:#F3F3F7;
}
.lists{
  background-color:#fff;
}
.list{
  height:134rpx;
  padding:18rpx 0rpx 17rpx 0rpx;
  overflow: hidden;
  position:relative;
  box-sizing:border-box;
  border-bottom:1rpx solid #e4e4e7;
  display:flex;
  flex-flow: row;
}
.list .list__hd{
  display:flex;
  flex-direction: column;
  width:100rpx;
  height:100rpx;
  position:absolute;
}
.list .list__hd image{
  width:100rpx;
  height:100rpx;
  overflow:hidden;
  border-radius:7rpx;
}
.list__msgnumber{
  width:20rpx;
  height:20rpx;
  display:block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
  text-align: center;
  line-height:20rpx;
  word-break:keep-all;
  position:absolute;
  right:0;
  top:0;
  margin-top:-6rpx;
  margin-right:-6rpx;
  background-color:#F43531;
  border-radius:10rpx;
  font-size:19rpx;
  color:#fff;
}
.list__messagenumber{
  width:34rpx;
  height:34rpx;
  margin-right:-13rpx;
  margin-top:-13rpx;
  display:block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
  text-align: center;
  line-height:34rpx;
  word-break:keep-all;
  position:absolute;
  right:0;
  top:0;
  background-color:#F43531;
  border-radius:17rpx;
  font-size:20rpx;
  color:#fff;
}
.list__bd{
  display: block;
  position:absolute;
  left:100rpx;
  overflow:hidden;
  height:100rpx;
  padding-top:9rpx;
  padding-bottom:9rpx;
  padding-left:12rpx;
  padding-right:9rpx;
  box-sizing:border-box;
}
.list__h3{
  width:100%;
  height:37rpx;
  font-size:32rpx;

  display: flex;
  flex-direction:row;
}
.list__h3 .list__name{
  width:435rpx;
  height:37rpx;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
  word-break: keep-all;
  color:#000;
}
.list__h3 .list__sendtime{
  width:165rpx;
  text-align: right;
  float:right;
  color:#b1b1b1;
}

.list__h3 .list__name.list__teamname{
  color:#495F8D;
}
.list__p{
  padding-top:16rpx;
  height:48rpx;
  width:600rpx;
  box-sizing:border-box;
  color:#9B9B9B;
  font-size:26rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
  word-break: keep-all;
}
.list__p.silence{
  width:564rpx;
}
.list__silence{
  position:absolute;
  right:0rpx;
  width:36rpx;
  height:36rpx;
  bottom:9rpx;
}
.list__ft{
  display: none;
  flex-direction:row;
}