开发制作各行业
小程序15563204499

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

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 -> 加上结束标记

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;
}
历史上的今天
一月
25
    哇哦~~~,历史上的今天没发表过文章哦
赞(0)
滕州小程序提示,未经允许不得转载:无忧小程序工作室 » 微信小程序—wxss和css的部分区别
分享到: 更多 (0)

评论 抢沙发

3 + 9 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

滕州无忧微信小程序制作

枣庄小程序制作滕州小程序开发