uniapp常用公共css

最新推荐文章于 2024-06-25 17:51:43 发布

愉快的小跳蛙

最新推荐文章于 2024-06-25 17:51:43 发布

阅读量266

点赞数 1

文章标签： uni-app 前端 css3

本文链接：https://blog.csdn.net/weixin_52326756/article/details/139319872

版权

比较常用的base，使用时在app.vue全局引用

/* 弹性布局 */
.df {
  display: flex;
}
.jcc {
  justify-content: center;
}
.aic {
  align-items: center;
}
.jcsb {
  justify-content: space-between;
}
.jcsa {
  justify-content: space-around;
}
.jcfe {
  justify-content: flex-end;
}
.fww {
  flex-wrap: wrap;
}
.jcl {
  justify-content: left;
}
.jcr {
  justify-content: right;
}
.fdc {
  flex-direction: column;
}
.aifs {
  align-items: flex-start;
}
.aife {
  align-items: flex-end;
}
.dis_sb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dis_cc {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 超出隐藏 */
.dn {
  display: none;
}
.otw {
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出不换行
}

/* 定位 */
.pr {
  position: relative;
}
.pf {
  position: fixed;
}
.pa {
  position: absolute;
}
.tac {
  text-align: center;
}
.tal {
  text-align: left;
}
.tar {
  text-align: right;
}

/* 宽高  */
.w100 {
  width: 100%;
}
.h100 {
  height: 100%;
}
.wv100 {
  width: 100vh;
}
.hv100 {
  height: 100vh;
}

.p20 {
  padding: 20rpx;
}
.p30 {
  padding: 30rpx;
}
.p40 {
  padding: 40rpx;
}

.mt20 {
  margin-top: 20rpx;
}
.mt30 {
  margin-top: 30rpx;
}
.mt40 {
  margin-top: 40rpx;
}

.mr10 {
  margin-right: 10rpx;
}
.mr20 {
  margin-right: 20rpx;
}
.mr30 {
  margin-right: 30rpx;
}

.ml10 {
  margin-left: 10rpx;
}
.ml20 {
  margin-left: 20rpx;
}
.ml30 {
  margin-left: 30rpx;
}

.mtb20 {
  margin: 20rpx 0;
}
.mtb40 {
  margin: 40rpx 0;
}

.mb10 {
  margin-bottom: 10rpx;
}
.mb20 {
  margin-bottom: 20rpx;
}
.mb40 {
  margin-bottom: 40rpx;
}

.bs {
  box-sizing: border-box;
}

/* 字体大小 */
.f22 {
  font-size: 22rpx;
}
.f24 {
  font-size: 24rpx;
}
.f28 {
  font-size: 28rpx;
}
.f30 {
  font-size: 30rpx;
}
.f32 {
  font-size: 32rpx;
}
.f34 {
  font-size: 34rpx;
}
.fwb {
  font-weight: bold;
}

/* 颜色 */
.bg-fff {
  background-color: #fff;
}
.bg-f7 {
  background-color: #f7f7f7;
}

.clo-fff {
  color: #fff;
}
.clo-666 {
  color: #666;
}
.clo-444 {
  color: #444;
}
.clo-338 {
  color: #3385ff;
}

.cp {
  cursor: pointer;
}

.ti2 {
  text-indent: 2em;
}

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

.cont2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  // -webkit-line-clamp: 2;//需要自己设置
}