本人常用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%); }