.fr { float: right; } .fl { float: left; } /*文字单行溢出省略号 Name: style_text-overflow Example: class="text-overflow" */ .text-overflow{overflow:hidden !important;text-overflow:ellipsis;white-space:nowrap !important} /*线条 Name: style_line Example: class="line" */ /* .line{font-size: 0rpx; line-height: 0rpx; border-top: solid 2rpx #eee; float: none} */ /*外边距 Name: style_margin Example: class="mt-5|mt-10..." Explain: .mt表示上边距|.mb表示下边距|.ml表示左边距|.mr表示右边距 */ .m-5{margin:10rpx}.m-10{margin:20rpx}.m-15{margin:30rpx}.m-20{margin:40rpx}.m-25{margin:50rpx}.m-30{margin:60rpx}.m-35{margin:70rpx}.m-40{margin:80rpx}.m-50{margin:100rpx} .mt-5{margin-top:10rpx}.mt-10{margin-top:20rpx}.mt-15{margin-top:30rpx}.mt-20{margin-top:40rpx}.mt-25{margin-top:50rpx}.mt-30{margin-top:60rpx}.mt-35{margin-top:70rpx}.mt-40{margin-top:80rpx}.mt-50{margin-top:100rpx} .mb-5{margin-bottom:10rpx}.mb-10{margin-bottom:20rpx}.mb-15{margin-bottom:30rpx}.mb-20{margin-bottom:40rpx}.mb-30{margin-bottom:60rpx}.mb-40{margin-bottom:80rpx}.mb-50{margin-bottom:100rpx} .ml-5{margin-left:10rpx}.ml-10{margin-left:20rpx}.ml-15{margin-left:30rpx}.ml-20{margin-left:40rpx}.ml-30{margin-left:60rpx}.ml-40{margin-left:80rpx}.ml-50{margin-left:100rpx} .mr-5{margin-right:10rpx}.mr-10{margin-right:20rpx}.mr-15{margin-right:30rpx}.mr-20{margin-right:40rpx}.mr-30{margin-right:60rpx}.mr-40{margin-right:80rpx}.mr-50{margin-right:100rpx} /*内填充 Name: style_padding Example: class="pt-5|pt-10|……" Explain: .pt表示上填充|.pb表示下填充|.pl表示左填充|.pr表示右填充 */ .pt-5{padding-top:10rpx}.pt-10{padding-top:20rpx}.pt-15{padding-top:30rpx}.pt-20{padding-top:40rpx}.pt-30{padding-top:60rpx}.pt-40{padding-top:80rpx} .pb-5{padding-bottom:10rpx}.pb-10{padding-bottom:20rpx}.pb-15{padding-bottom:30rpx}.pb-20{padding-bottom:40rpx}.pb-30{padding-bottom:60rpx}.pb-40{padding-bottom:80rpx} .pl-5{padding-left:10rpx}.pl-10{padding-left:20rpx}.pl-15{padding-left:30rpx}.pl-20{padding-left:40rpx}.pl-30{padding-left:60rpx}.pl-40{padding-left:80rpx} .pr-5{padding-right:10rpx}.pr-10{padding-right:20rpx}.pr-15{padding-right:30rpx}.pr-20{padding-right:40rpx}.pr-30{padding-right:60rpx}.pr-40{padding-right:80rpx} .pd-5{padding:10rpx}.pd-10{padding:20rpx}.pd-15{padding:30rpx}.pd-20{padding:40rpx}.pd-30{padding:60rpx}.pd-40{padding:80rpx} /* 边框,css3圆角 Name: style-border Example: class="bk_gray radius" Explain: .bk_gray 边框|radius 圆角|round 椭圆 | circle 圆形 */ .radius-2{border-radius:4rpx}.radius-4{border-radius:8rpx}.radius-6{ border-radius:12rpx}.radius-8{ border-radius:16rpx}.radius-10{ border-radius:20rpx}.radius-12{ border-radius:24rpx}.radius-14{ border-radius:28rpx}.radius-16{ border-radius:32rpx}.radius-18{ border-radius:36rpx}.radius-20{ border-radius:40rpx}.radius-round{border-radius:50%; overflow:hidden} /*css3阴影 Name: style_shadow Example: class="box_shadow|text-shadow" Explain: box_shadow 块级元素阴影,全局样式,可用在表格,文本框,文本域,div等块级元素上。 text-shadow 文字阴影 */ .box-shadow{-webkit-box-shadow:0 4rpx 8rpx rgba(0,0,0,0.1);box-shadow:0 4rpx 8rpx rgba(0,0,0,0.1)} .text-shadow{-webkit-text-shadow:0 0 4rpx rgba(0,0,0,0.2);text-shadow:0 0 4rpx rgba(0,0,0,0.2)} /*行内分割竖线 Name: style_pipe Example: | */ .pipe{margin:0 10rpx;color:#CCC;font-size:20rpx!important} /*文字尺寸 Name: style_font-size Example: class="f-12|f-14|f-16|f-18|f-20|f-24|f-26|f-28|f-30" Explain: 12rpx字体|14rpx字体|16rpx字体|18rpx字体|20rpx字体|24rpx字体|26rpx字体|28rpx字体|30rpx字体 */ .f-10{font-size:20rpx}.f-11{font-size:22rpx}.f-12{font-size:24rpx}.f-13{font-size:26rpx}.f-14{font-size:28rpx}.f-16{font-size:32rpx}.f-18{font-size:36rpx}.f-20{font-size:40rpx}.f-24{font-size:48rpx}.f-26{font-size:52rpx}.f-28{font-size:56rpx}.f-30{font-size:60rpx}.f-32{font-size:64rpx}.f-36{font-size:72rpx}.f-40{font-size:80rpx} /*3.1.14 文字行距 Name: mod_line-height Example: class="lh-16|lh-18|lh-20|lh-22|lh-24|lh-26|lh-28|lh-30" Explain: 16rpx行高|18rpx行高|20rpx行高|22rpx行高|24rpx行高|26rpx行高|30rpx行高 */ .lh-16{line-height:32rpx}.lh-18{line-height:36rpx}.lh-20{line-height:40rpx}.lh-22{line-height:44rpx}.lh-24{line-height:48rpx}.lh-26{line-height:52rpx}.lh-28{line-height:56rpx}.lh-30{line-height:60rpx}.lh-10x{line-height:1.0}.lh-12x{line-height:1.2}.lh-15x{line-height:1.5}.lh-18x{line-height:1.8}.lh-20x{line-height:2.0}.lh-30x{line-height:3.0} /*3.1.15 文字颜色 Name: style_color Example: class="c-primary|c-sub|c-success|c-danger|c-warning|c-333|c-666|c-999|c-red|c-green|c-blue|c-white|c-black|c-orange" Explain: 主要颜色|次主色|强调色—成功|强调色—危险|强调色—警告色|强调色—错误色|次主色—浅黑|辅助色—灰色|标准色—红色|标准色—绿色|标准色—蓝色|标准色—白色|标准色—黑色|标准色—橙色 */ /*主要颜色*/ .c-primary,.c-primary a,a.c-primary{color:#409EFF} .c-primary a:hover,a.c-primary:hover{ color:#409EFF} /*次主色*/ .c-secondary,.c-secondary a,a.c-secondary{color:#175CFF} .c-secondary a:hover,a.c-secondary:hover{ color:#175CFF} /*强调色—成功*/ .c-success,.c-success a,a.c-success{color:#67C23A} .c-success a:hover,a.c-success:hover{ color:#67C23A} /*强调色—危险*/ .c-danger,.c-danger a,a.c-danger{color:#F56C6C} .c-danger a:hover,a.c-danger:hover{ color:#F56C6C} /*强调色—警告*/ .c-warning,.c-warning a,a.c-warning{color:#FFAA00} .c-warning a:hover,a.c-warning:hover{ color:#FFAA00} /*辅助色—浅黑*/ .c-333,.c-333 a,a.c-333{color:#252438} .c-333 a:hover,a.c-333:hover{ color:#252438} /*辅助色—灰色*/ .c-666,.c-666 a,a.c-666{color:#606066} .c-666 a:hover,a.c-666:hover{ color:#606066} .c-999,.c-999 a,a.c-999{color:#909199} .c-999 a:hover,a.c-999:hover{color:#909199} .c-remark,.c-remark a,a.c-remark{color:#C0C2CC} .c-remark a:hover,a.c-remark:hover{color:#C0C2CC} /*标准色—红色*/ .c-red,.c-red a,a.c-red{color:red} .c-red a:hover,a.c-red:hover{ color:red} /*标准色—绿色*/ .c-green,.c-green a,a.c-green{color:green} .c-red a:hover,a.c-red:hover{color:green} /*标准色—蓝色*/ .c-blue,.c-blue a,a.c-blue{color:blue} .c-blue a:hover,a.c-blue:hover{color:blue} /*标准色—白色*/ .c-white,.c-white a,a.c-white{color: white !important;} .c-white a:hover,a.c-white:hover{color:white} /*标准色—黑色*/ .c-black,.c-black a{color:black} .c-black a:hover,a.c-black:hover{color:black} /*标准色—橙色*/ .c-orange,.c-orange a,a.c-orange{color:orange} .c-orange a:hover,a.c-orange:hover{color:orange} /* 渐变色 */ /* 翠柳 */ .linear-green {background: linear-gradient(45deg, #87DE0E 0%, #64BD38 100%) !important;} /* 麦黄 */ .linear-yellow {background: linear-gradient(45deg, #FBB437 0%, #FDD36D 100%) !important;} /* 靛青 */ .linear-blue {background: linear-gradient(45deg, #3485FF 0%, #1C68FF 100%) !important;} /* 魅红 */ .linear-red {background: linear-gradient(45deg, #F43F3B 0%, #EC008C 100%) !important;} /* 鎏金 */ .linear-orange {background: linear-gradient(45deg, #Ff9700 0%, #ed1c24 100%) !important;} /* 惑紫 */ .linear-purple {background: linear-gradient(45deg, #9000ff 0%, #5e00ff 100%) !important;} /* 霞彩 */ .linear-pink {background: linear-gradient(45deg, #EC008C 0%, #6739b6 100%) !important;} /* flex布局 */ .im-flex { display: flex; } .im-border-box { box-sizing: border-box; } .im-rows { flex-direction: row; } .im-rows-reverse{ flex-direction: row-reverse !important; } .im-columns { flex-direction: column; } .im-wrap { flex-direction: row; flex-wrap: wrap; } .im-nowrap { flex-direction: row; flex-wrap: nowrap; } .im-columns-reverse{ flex-direction:column-reverse !important; } .im-space-around { justify-content: space-around; } .im-space-between { justify-content: space-between; } .im-justify-content-start { justify-content: flex-start; } .im-justify-content-center { justify-content: center; } .im-justify-content-end { justify-content: flex-end; } .im-align-items-start { align-items: flex-start; } .im-align-items-center { align-items: center; } .im-align-items-end { align-items: flex-end; } .im-align-content-start { align-content: flex-start; } .im-align-content-center { align-content: center; } .im-align-content-end { align-content: flex-end; } .im-flex1 { flex: 1; } .rotate45{transform:rotate(45deg);} .rotate90{transform:rotate(90deg);} .rotate135{transform:rotate(135deg);} .rotate180{transform:rotate(180deg);} .rotate225{transform:rotate(225deg);} .rotate270{transform:rotate(270deg);} .rotate315{transform:rotate(315deg);} .rotate360{transform:rotate(360deg);} /* 分割线 */ .parting-line-5{ padding:5rpx; background: #f5f5f5; } .parting-line-10{ padding:10rpx; background: #f5f5f5; } .parting-line-15{ padding:15rpx; background: #f5f5f5; } .parting-line-20{ padding:20rpx; background: #f5f5f5; } /* colorUI样式重写 */ .cu-list.menu-avatar>.cu-item:after{ position: absolute; top: 0; left: 0; box-sizing: border-box; width: 200%; height:1px; border-bottom: 1px solid #eee; border-radius: inherit; content: " "; transform: scale(.5); transform-origin: 0 0; pointer-events: none; } .cu-avatar.md { width: 72upx; height: 72upx; font-size: 1.5em; } .cu-list>.cu-item.move-cur.first { transform: translateX(-150upx) !important; } .cu-list>.cu-item .move.first { width: 150upx !important; } .cu-list>.cu-item.move-cur.second { transform: translateX(-300upx) !important; } .cu-list>.cu-item .move.second { width: 300upx !important; } .cu-list>.cu-item.move-cur.third { transform: translateX(-450upx) !important; } .cu-list>.cu-item .move.third { width: 450upx !important; } .emoji-image{ margin: 0 6rpx; } .manage-content{ text-align: left; }