uni-app 常用设置简写

/* #ifndef APP-PLUS-NVUE */

/* scroll-view */

.scroll-row{ width: 100%;white-space: nowrap; }

.scroll-row-item{ display: inline-block!important; }

/* #endif */

/* 图标 */

.iconfont{

font-family:iconfont;

}

.view,.text{

font-size:28rpx;

line-height:1.8;

color:#0E151D;

}

/* 宽度 */

/* #ifndef APP-PLUS-NVUE */

.w-100{ width: 100%; }

/* #endif */

.row {

  margin-right: -20rpx;

  margin-left: -20rpx;

  /* #ifndef APP-PLUS-NVUE */

  display: flex;

  /* #endif */

  flex-wrap: wrap;

  flex-direction: row;

}

.col-1,

.col-2,

.col-3,

.col-4,

.col-5,

.col-6,

.col-7,

.col-8,

.col-9,

.col-10,

.col-11,

.col-12{

  position: relative;

  padding-right: 20rpx;

  padding-left: 20rpx;

}

.col-12 { width: 750rpx;}

.col-11 { width: 687.5rpx; }

.col-10 { width: 625rpx; }

.col-9 { width: 562.5rpx; }

.col-8 { width: 500rpx; }

.col-7 { width: 437.5rpx; }

.col-6 { width: 375rpx; }

.col-5 { width: 312.5rpx;}

.col-4 {width: 250rpx;}

.col-3 {width: 187.5rpx;}

.col-2 {width: 125rpx;}

.col-1 {width: 62.5rpx;}

.col-offset-12 { margin-left: 750rpx;}

.col-offset-11 { margin-left: 687.5rpx; }

.col-offset-10 { margin-left: 625rpx; }

.col-offset-9 { margin-left: 562.5rpx; }

.col-offset-8 { margin-left: 500rpx; }

.col-offset-7 { margin-left: 437.5rpx; }

.col-offset-6 { margin-left: 375rpx; }

.col-offset-5 { margin-left: 312.5rpx;}

.col-offset-4 {margin-left: 250rpx;}

.col-offset-3 {margin-left: 187.5rpx;}

.col-offset-2 {margin-left: 125rpx;}

.col-offset-1 {margin-left: 62.5rpx;}

.col-offset-0 {margin-left: 0;}

/* flex 布局 */

.flex{

/* #ifndef APP-PLUS-NVUE */

display:flex;

/* #endif */

flex-direction:row;

}

.flex-row{ flex-direction:row!important; }

.flex-column{ flex-direction:column!important; }

.flex-row-reverse{ flex-direction:row-reverse!important; }

.flex-column-reverse{ flex-direction:column-reverse!important; }

.flex-wrap{ flex-wrap:wrap;}

.flex-nowrap{ flex-wrap:nowrap;}

.justify-start{justify-content:flex-start;}

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

.justify-between{justify-content:space-between;}

.justify-center{justify-content:center;}

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

.align-stretch{ align-items: stretch; }

.align-start{ align-items: flex-start; }

.align-end{ align-items: flex-end; }

/* #ifndef APP-PLUS-NVUE */

.content-start {align-content: flex-start;}

.content-end {align-content: flex-end;}

.content-center {align-content: center;}

.content-between {align-content: space-between;}

.content-around {align-content: space-around;}

.content-stretch {align-content: stretch;}

/* #endif */

.flex-1{ flex: 1; }

.flex-2{ flex: 2; }

.flex-3{ flex: 3; }

.flex-4{ flex: 4; }

.flex-5{ flex: 5; }

/* #ifndef APP-PLUS-NVUE */

.flex-shrink{ flex-shrink: 0; }

/* #endif */

.container {

  padding-right: 20rpx;

  padding-left: 20rpx;

}

/*  -- 内外边距 -- */

.m-0 { margin: 0; }

/* #ifndef APP-PLUS-NVUE */

.m-auto{ margin: auto; }

/* #endif */

.m-1 { margin: 10rpx; }

.m-2 { margin: 20rpx; }

.m-3 { margin: 30rpx; }

.m-4 { margin: 40rpx; }

.m-5 { margin: 50rpx; }

.mt-0 { margin-top: 0; }

/* #ifndef APP-PLUS-NVUE */

.mt-auto { margin-top: auto; }

/* #endif */

.mt-1 { margin-top: 10rpx; }

.mt-2 { margin-top: 20rpx; }

.mt-3 { margin-top: 30rpx; }

.mt-4 { margin-top: 40rpx; }

.mt-5 { margin-top: 50rpx; }

.mb-0 { margin-bottom: 0; }

/* #ifndef APP-PLUS-NVUE */

.mb-auto { margin-bottom: auto; }

/* #endif */

.mb-1 { margin-bottom: 10rpx; }

.mb-2 { margin-bottom: 20rpx; }

.mb-3 { margin-bottom: 30rpx; }

.mb-4 { margin-bottom: 40rpx; }

.mb-5 { margin-bottom: 50rpx; }

.ml-0 { margin-left: 0; }

/* #ifndef APP-PLUS-NVUE */

.ml-auto { margin-left: auto; }

/* #endif */

.ml-1 { margin-left: 10rpx; }

.ml-2 { margin-left: 20rpx; }

.ml-3 { margin-left: 30rpx; }

.ml-4 { margin-left: 40rpx; }

.ml-5 { margin-left: 50rpx; }

.mr-0 { margin-right: 0; }

/* #ifndef APP-PLUS-NVUE */

.mr-auto { margin-right: auto; }

/* #endif */

.mr-1 { margin-right: 10rpx; }

.mr-2 { margin-right: 20rpx; }

.mr-3 { margin-right: 30rpx; }

.mr-4 { margin-right: 40rpx; }

.mr-5 { margin-right: 50rpx; }

.my-0 { margin-top: 0; margin-bottom: 0; }

/* #ifndef APP-PLUS-NVUE */

.my-auto { margin-top: auto; margin-bottom: auto; }

/* #endif */

.my-1 { margin-top: 10rpx; margin-bottom: 10rpx; }

.my-2 { margin-top: 20rpx; margin-bottom: 20rpx; }

.my-3 { margin-top: 30rpx; margin-bottom: 30rpx; }

.my-4 { margin-top: 40rpx; margin-bottom: 40rpx; }

.my-5 { margin-top: 50rpx; margin-bottom: 50rpx; }

.mx-0 { margin-left: 0; margin-right: 0; }

/* #ifndef APP-PLUS-NVUE */

.mx-auto { margin-left: auto; margin-right: auto; }

/* #endif */

.mx-1 { margin-left: 10rpx; margin-right: 10rpx;}

.mx-2 { margin-left: 20rpx; margin-right: 20rpx;}

.mx-3 { margin-left: 30rpx; margin-right: 30rpx;}

.mx-4 { margin-left: 40rpx; margin-right: 40rpx;}

.mx-5 { margin-left: 50rpx; margin-right: 50rpx;}

.p-0 { padding: 0; }

.p { padding: 5rpx; }

.p-1 { padding: 10rpx; }

.p-2 { padding: 20rpx; }

.p-3 { padding: 30rpx; }

.p-4 { padding: 40rpx; }

.p-5 { padding: 50rpx; }

.pt-0 { padding-top: 0; }

.pt { padding-top: 5rpx; }

.pt-1 { padding-top: 10rpx; }

.pt-2 { padding-top: 20rpx; }

.pt-3 { padding-top: 30rpx; }

.pt-4 { padding-top: 40rpx; }

.pt-5 { padding-top: 50rpx; }

.pb-0 { padding-bottom: 0; }

.pb-1 { padding-bottom: 10rpx; }

.pb { padding-bottom: 5rpx; }

.pb-2 { padding-bottom: 20rpx; }

.pb-3 { padding-bottom: 30rpx; }

.pb-4 { padding-bottom: 40rpx; }

.pb-5 { padding-bottom: 50rpx; }

.pl-0 { padding-left: 0; }

.pl { padding-left: 5rpx; }

.pl-1 { padding-left: 10rpx; }

.pl-2 { padding-left: 20rpx; }

.pl-3 { padding-left: 30rpx; }

.pl-4 { padding-left: 40rpx; }

.pl-5 { padding-left: 50rpx; }

.pr-0 { padding-right: 0; }

.pr { padding-right: 5rpx; }

.pr-1 { padding-right: 10rpx; }

.pr-2 { padding-right: 20rpx; }

.pr-3 { padding-right: 30rpx; }

.pr-4 { padding-right: 40rpx; }

.pr-5 { padding-right: 50rpx; }

.py-0 { padding-top: 0; padding-bottom: 0; }

.py { padding-top: 5rpx; padding-bottom: 5rpx; }

.py-1 { padding-top: 10rpx; padding-bottom: 10rpx; }

.py-2 { padding-top: 20rpx; padding-bottom: 20rpx; }

.py-3 { padding-top: 30rpx; padding-bottom: 30rpx; }

.py-4 { padding-top: 40rpx; padding-bottom: 40rpx; }

.py-5 { padding-top: 50rpx; padding-bottom: 50rpx; }

.px-0 { padding-left: 0; padding-right: 0; }

.px-1 { padding-left: 10rpx; padding-right: 10rpx;}

.px { padding-left: 5rpx; padding-right: 5rpx;}

.px-2 { padding-left: 20rpx; padding-right: 20rpx;}

.px-3 { padding-left: 30rpx; padding-right: 30rpx;}

.px-4 { padding-left: 40rpx; padding-right: 40rpx;}

.px-5 { padding-left: 50rpx; padding-right: 50rpx;}

/* 文字大小 */

.font-smaller { font-size: 15rpx;}

.font-small { font-size: 20rpx;}

.font-sm { font-size: 25rpx;}

.font { font-size: 30rpx;}

.font-md { font-size: 35rpx;}

.font-lg { font-size: 40rpx;}

.h1{font-size:80rpx; line-height:1.8;}

.h2{font-size:60rpx; line-height:1.8;}

.h3{font-size:45rpx; line-height:1.8;}

.h4{font-size:32rpx; line-height:1.8;}

.h5{font-size:30rpx; line-height:1.8;}

.h6{font-size:28rpx; line-height:1.8;}

/* 文字缩进 */

/* #ifndef APP-PLUS-NVUE */

.text-indent{text-indent:2;}

/* #endif */

/* 文字划线 */

.text-through{text-decoration:line-through;}

/* 文字对齐 */

.text-left { text-align: left;}

.text-right { text-align: right;}

.text-center { text-align: center;}

/* 文字换行溢出处理 */

.text-ellipsis {

/* #ifndef APP-PLUS-NVUE */

overflow: hidden;text-overflow: ellipsis;white-space: nowrap;

/* #endif */

/* #ifdef APP-PLUS-NVUE */

lines: 1;

/* #endif */

}

/* 文字粗细和斜体 */

.font-weight-light {font-weight: 300;}      /*细*/

.font-weight-lighter {font-weight: 100;}/*更细*/

.font-weight-normal { font-weight: 400;}    /*正常*/

.font-weight-bold { font-weight: 700;}      /*粗*/

.font-weight-bolder { font-weight: bold;} /*更粗*/

.font-italic { font-style: italic;} /*斜体*/

/* 文字颜色 */

.text-white {color: #ffffff;}

.text-primary {color: #007bff;}

.text-hover-primary { color: #0056b3;}

.text-secondary {color: #6c757d;}

.text-hover-secondary { color: #494f54;}

.text-success {color: #28a745;}

.text-hover-success{color: #19692c;}

.text-info { color: #17a2b8;}

.text-hover-info {color: #0f6674;}

.text-warning {color: #ffc107;}

.text-hover-warning { color: #ba8b00;}

.text-danger { color: #dc3545;}

.text-hover-danger { color: #a71d2a;}

.text-light { color: #f8f9fa;}

.text-hover-light { color: #cbd3da;}

.text-dark { color: #343a40;}

.text-hover-dark{ color: #121416;}

.text-body { color: #212529;}

.text-muted { color: #6c757d;}

/* 浅灰色 */

.text-light-muted { color: #A9A5A0;}

.text-light-black { color: rgba(0, 0, 0, 0.5);}

.text-light-white { color: rgba(255, 255, 255, 0.5);}

/* 背景颜色 */

.bg-primary { background-color: #007bff;}

.bg-hover-primary:hover{ background-color: #0062cc;}

.bg-secondary { background-color: #6c757d;}

.bg-hover-secondary:hover{ background-color: #545b62;}

.bg-success { background-color: #28a745;}

.bg-hover-success { background-color: #1e7e34;}

.bg-info { background-color: #17a2b8;}

.bg-hover-info { background-color: #117a8b;}

.bg-warning { background-color: #ffc107;}

.bg-hover-warning { background-color: #d39e00;}

.bg-danger { background-color: #dc3545;}

.bg-hover-danger{ background-color: #bd2130;}

.bg-light { background-color: #f8f9fa;}

.bg-hover-light{ background-color: #dae0e5;}

.bg-dark { background-color: #343a40;}

.bg-hover-dark { background-color: #1d2124;}

.bg-white { background-color: #ffffff;}

.bg-transparent { background-color: transparent;}

/* 边框 */

.border { border-width: 1rpx;border-style: solid;border-color: #dee2e6;}

.border-top {

  border-top-width: 1rpx;

  border-top-style: solid;

  border-top-color: #dee2e6;

}

.border-right {

  border-right-width: 1rpx;

  border-right-style: solid;

  border-right-color: #dee2e6;

}

.border-bottom {

  border-bottom-width: 1rpx;

  border-bottom-style: solid;

  border-bottom-color: #dee2e6;

}

.border-left {

  border-left-width: 1rpx;

  border-left-style: solid;

  border-left-color: #dee2e6;

}

.border-0 { border-width: 0!important;}

.border-top-0 { border-top-width: 0!important;}

.border-right-0 {border-right-width: 0!important;}

.border-bottom-0 {border-bottom-width: 0!important;}

.border-left-0 {border-left-width: 0!important;}

.border-primary { border-color: #007bff;}

.border-secondary {border-color: #6c757d;}

.border-light-secondary {border-color: #E9E8E5;}

.border-success {border-color: #28a745;}

.border-info {border-color: #17a2b8;}

.border-warning {border-color: #ffc107;}

.border-danger {border-color: #dc3545;}

.border-light {border-color: #f8f9fa;}

.border-dark {border-color: #343a40;}

.border-white {border-color: #FFFFFF;}

/* 圆角 */

.rounded { border-radius: 8rpx;}

.rounded-top {

  border-top-left-radius: 8rpx;

  border-top-right-radius: 8rpx;

}

.rounded-right {

  border-top-right-radius: 8rpx;

  border-bottom-right-radius: 8rpx;

}

.rounded-bottom {

  border-bottom-right-radius: 8rpx;

  border-bottom-left-radius: 8rpx;

}

.rounded-left {

  border-top-left-radius: 8rpx;

  border-bottom-left-radius: 8rpx;

}

.rounded-circle { border-radius: 100%;}

.rounded-0 { border-radius: 0;}

/* 显示 */

/* #ifndef APP-PLUS-NVUE */

.d-none{ display: none; }

.d-inline-block{ display: inline-block; }

.d-block{ display: block; }

/* #endif */

/* 内容溢出 */

.overflow-hidden { overflow: hidden;}

/* 定位 */

.position-relative { position: relative;}

.position-absolute { position: absolute;}

.position-fixed { position: fixed;}

/* 定位 - 固定顶部 */

.fixed-top {

  position: fixed;

  top: 0;

  right: 0;

  left: 0;

  z-index: 1030;

}

/* 定位 - 固定底部 */

.fixed-bottom {

  position: fixed;

  right: 0;

  bottom: 0;

  left: 0;

  z-index: 1030;

}

.top-0 { top: 0; }

.left-0 { left: 0; }

.right-0 { right: 0; }

.bottom-0 { bottom: 0; }

/* 阴影 */

/* #ifndef APP-PLUS-NVUE */

.shadow { box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.15);}

.shadow-lg { box-shadow: 0rpx 40rpx 100rpx 0rpx rgba(0, 0, 0, 0.175);}

.shadow-none { box-shadow: none !important;}

/* #endif */

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 217,509评论 6赞 504
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,806评论 3赞 394
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 163,875评论 0赞 354
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,441评论 1赞 293
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,488评论 6赞 392
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,365评论 1赞 302
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,190评论 3赞 418
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,062评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,500评论 1赞 314
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,706评论 3赞 335
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,834评论 1赞 347
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,559评论 5赞 345
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,167评论 3赞 328
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,779评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,912评论 1赞 269
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,958评论 2赞 370
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,779评论 2赞 354

推荐阅读更多精彩内容