本人常用css样式整理

/**app.wxss**/
@import 'components/wux.wxss';

/* page {
	background-color: #fff
} */

/**字体颜色,大小(d,深色。l,浅色)**/
.w_white {
	color: #fff;
}

.b_white {
	background-color: #fff;
}

.t_middle {
	vertical-align: middle;
}

.size_80 {
	font-size: 80rpx;
}

.size_60 {
	font-size: 60rpx;
}

.size_48 {
	font-size: 48rpx;
}

.size_40 {
	font-size: 40rpx;
}

.size_42 {
	font-size: 42rpx;
}

.size_38 {
	font-size: 38rpx;
}

.size_36 {
	font-size: 36rpx;
}

.size_34 {
	font-size: 34rpx;
}

.size_32 {
	font-size: 32rpx;
}

.size_30 {
	font-size: 30rpx;
}

.size_22 {
	font-size: 22rpx;
}

.size_24 {
	font-size: 24rpx;
}

.size_18 {
	font-size: 18rpx;
}

.size_20 {
	font-size: 20rpx;
}

.size_26 {
	font-size: 26rpx;
}

.size_28 {
	font-size: 28rpx;
}

.size_16 {
	font-size: 16rpx;
}

.flex_space_between_center {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.flex_space_between_column {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.flex_column {
	display: flex;
	flex-direction: column;
}

.flex_flex_end {
	display: flex;
	justify-content: flex-end;
}

.flex_center_center {
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex_space_between_flex_end {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.show {
	display: block;
}

.hidden {
	display: none;
}

.ellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	/* white-space: nowrap; */
	line-height: 16px !important;
	height: 32px !important;
}

.myellipsis {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tip {
	text-align: center;
	padding: 24rpx 30rpx;
	color: #909090;
}

.loading {
	text-align: center;
	margin: 20rpx 0 10rpx;
}

.loading image {
	width: 40rpx;
	height: 40rpx;
}

.loading {
	text-align: center;
}

.loading image {
	width: 40rpx;
	height: 40rpx;
}

.t_center {
	text-align: center;
}
.t_left {
	text-align: left;
}
.t_right {
	text-align: right;
}

.bottomadd {
	transform: rotate(180deg)
}

.myIconTip {
	width: 30rpx;
	height: 30rpx;
	margin-right: 5px;
	vertical-align: middle;
}

/* V3样式 */
.color999 {
	color: #999;
}

.color909090 {
	color: #909090;
}

.color666 {
	color: #666;
}

.colorccc {
	color: #ccc;
}

.color333 {
	color: #333;
}

.color000 {
	color: #000;
}

.colorJbRed {
	background-image: -webkit-gradient(linear, left 0, right 0, from(#FF2A68), to(#FF5E3A));
	-webkit-background-clip: text;
	/*必需加前缀 -webkit- 才支持这个text值 */
	-webkit-text-fill-color: transparent;
	/*text-fill-color会覆盖color所定义的字体颜色: */
}
.m_l_20 {
	margin-left: 20rpx;
}

.m_l_10 {
	margin-left: 10px
}

.m_r_10 {
	margin-right: 10px
}

.m_r_20 {
	margin-right: 20rpx
}

.m_r_40 {
	margin-right: 40rpx
}

.m_l_30 {
	margin-left: 30rpx
}

.m_t_4 {
	margin-top: 4rpx;
}

.m_t_8 {
	margin-top: 8rpx;
}

.m_t_10 {
	margin-top: 10rpx;
}

.m_t_16 {
	margin-top: 16rpx;
}

.m_t_20 {
	margin-top: 20rpx;
}

.m_t_24 {
	margin-top: 24rpx;
}

.m_t_28 {
	margin-top: 28rpx;
}

.m_t_30 {
	margin-top: 30px;
}

.m_t_32 {
	margin-top: 32rpx;
}
.m_t_42 {
	margin-top: 42rpx;
}
.m_t_60 {
	margin-top: 60rpx;
}

.m_b_4 {
	margin-bottom: 4px;
}
.m_b_6 {
	margin-bottom: 6px;
}
.m_b_10 {
	margin-bottom: 10px;
}

.m_b_20 {
	margin-bottom: 20rpx;
}

.m_b_26 {
	margin-bottom: 26rpx;
}

.m_b_34 {
	margin-bottom: 34rpx;
}

.m_t_5 {
	margin-top: 5px;
}

.m_l_r_0 {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.m_l_r_10 {
	margin-left: 10px;
	margin-right: 10px;
}

.alignCnter {
	display: flex;
	align-items: center;
}

.flex {
	display: flex
}

.setline-name {
	font-size: 34rpx;
	padding: 15px;
}

.setline .line-add {
	border-top: 1px solid #e9e9e9;
	align-items: center;
	line-height: 120rpx;
}

.line-name {
	align-items: center;
}

/**头部图片**/
.per-banner {
	width: 100%;
	position: relative;
}

.per-banner image {
	width: 100%;
	height: 400rpx;
}

.per-head {
	margin-top: -240rpx;
	text-align: center;
}

.per-head image {
	width: 240rpx;
	height: 240rpx;
	border-radius: 50%;
	border: 2px solid #fff;
	background: #fff;
}

/* 小头像页面 */
.mylogo,
.mylogo1 {
	align-items: center;
}

.mylogo image {
	width: 60rpx;
	height: 60rpx;
	-webkit-border-radius: 60rpx;
	-moz-border-radius: 60rpx;
	border-radius: 60rpx;
}

/* 中头像页面 */
.mylogo1 image {
	width: 100rpx;
	height: 100rpx;
	-webkit-border-radius: 100rpx;
	-moz-border-radius: 100rpx;
	border-radius: 100rpx;
}


/* 个人中心页面 */

.ass-peaple {
	display: flex;
	flex-direction: column;
	position: relative;
	justify-content: center;
	margin-left: 10rpx;
	margin-right: 10rpx;
}

.ass-peaple image {
	width: 100rpx;
	height: 100rpx;
	-webkit-border-radius: 100rpx;
	-moz-border-radius: 100rpx;
	border-radius: 100rpx;
}

.ass-peaple .ass-bottom {
	position: absolute;
	bottom: 0;
	background: #FF4A4D;
	color: #fff;
	width: 100rpx;
	-webkit-border-radius: 10rpx;
	-moz-border-radius: 10rpx;
	border-radius: 10rpx;
	text-align: center;
}

.gongxiang {
	border-radius: 5px;
	margin: 20rpx;
	padding: 20rpx;
}

.hxname {
	border-bottom: 2rpx solid #f2f2f2;
	height: 80rpx;
	line-height: 80rpx
}

.contain_center {
	margin-top: 10px;
}

.tab {
	flex-grow: 1;
	border-bottom: 2rpx solid #fff;
	height: 80rpx;
	line-height: 80rpx;
	justify-content: center;
	text-align: center;
}

.isActive {
	border-bottom: 4rpx solid #FF4853;
}
button{
  border-radius: 0;
}
button::after{
  border: 0;
}

/* input框 */
.myBaoInput{
	display: flex;
	align-items: center;
	border: 2rpx solid #e9e9e9;
	padding: 0 10rpx;
	-webkit-border-radius: 10rpx;
	-moz-border-radius: 10rpx;
	border-radius: 10rpx;
	margin-top: 10px;
}
.myBaoInput:first-child{
	margin-top: 0;
}
.myBaoInput .baoName{
	color: #333;
	width:30%;
}
.myBaoInput .baoInput{
	text-align: right;
	margin-right: 10rpx;
	width:70%;
	/* direction: rtl; */
}
.textblue{
	color: #124AE2;
}
.myheight{
	max-height: 50px;
}
.color222 {
	color: #222;
}
.weight500 {
	font-weight: 500;
}
.weight600 {
	font-weight: 600;
}
.weight700 {
	font-weight: 700;
}

.alignCenter {
	align-items: center;
}
.relative {
	position: relative;
}
.absolute {
	position: absolute;
}
.bgwhite {
	background-color: #fff;
}
.colorfff {
	color: #fff;
}
.left50 {
        left: 50%;
        transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
}

  

posted @ 2020-03-06 20:22  爱学习的吴小瑞  阅读(204)  评论(0编辑  收藏  举报