网上有个atom.css,但是里面样式很多。这个是我自己精简的。和atom.css有所不同。可以根据自己的需要添加

/*颜色*/
.color-primary{ color: #3385FF; }
.color-success{ color: #4cd964; }
.color-warning{ color: #FFB800; }
.color-error{ color: #dd524d; }
.color-info{ color: #3385FF; }
.color-fff {color: #fff;}
.color-333 {color: #333;}
.color-999 {color: #999;}
.color-000 {color: #000;}
/*背景色*/
.bg-color-primary{ background-color: #3385FF; }
.bg-color-success{ background-color: #4cd964; }
.bg-color-warning{ background-color: #FFB800; }
.bg-color-error{ background-color: #dd524d; }
.bg-color-info{ background-color: #3385FF; }
.bg-color-fff {background-color: #fff;}
.bg-color-000 {background-color: #000;}
/*字体*/
.font-xs { font-size: 12px;}
.font-sm { font-size: 14px;}
.font-bs { font-size: 16px;}
.font-lg { font-size: 18px;}
.font-w1 {font-weight: 100;}
.font-wb {font-weight: bold;}
/*内边距 标准*/
.pd-0{ padding: 0; }
.pdt-0{ padding-top: 0; }
.pdr-0{ padding-right: 0; }
.pdb-0{ padding-bottom: 0; }
.pdl-0{ padding-left: 0; }
.pd-bs{ padding: 20rpx; }
.pdt-bs{ padding-top: 20rpx; }
.pdr-bs{ padding-right: 20rpx; }
.pdb-bs{ padding-bottom: 20rpx; }
.pdl-bs{ padding-left: 20rpx; }
.pdlr-bs{ padding-left: 20rpx;padding-right: 20rpx; }
.pdtb-bs{ padding-top: 20rpx;padding-bottom: 20rpx; }
/*内边距 小*/
.pd-sm{ padding: 10rpx; }
.pdt-sm{ padding-top: 10rpx; }
.pdr-sm{ padding-right: 10rpx; }
.pdb-sm{ padding-bottom: 10rpx; }
.pdl-sm{ padding-left: 10rpx; }
.pdlr-sm{ padding-left: 10rpx;padding-right: 10rpx; }
.pdtb-sm{ padding-top: 10rpx;padding-bottom: 10rpx; }
/*内边距 大*/
.pd-lg{ padding: 40rpx; }
.pdt-lg{ padding-top: 40rpx; }
.pdr-lg{ padding-right: 40rpx; }
.pdb-lg{ padding-bottom: 40rpx; }
.pdl-lg{ padding-left: 40rpx; }
.pdlr-lg{ padding-left: 40rpx;padding-right: 40rpx; }
.pdtb-lg{ padding-top: 40rpx;padding-bottom: 40rpx; }
/*外边距 标准*/
.mg-0{ margin: 0; }
.mgt-0{ margin-top: 0; }
.mgr-0{ margin-right: 0; }
.mgb-0{ margin-bottom: 0; }
.mgl-0{ margin-left: 0; }
.mg-bs{ margin: 20rpx; }
.mgt-bs{ margin-top: 20rpx; }
.mgr-bs{ margin-right: 20rpx; }
.mgb-bs{ margin-bottom: 20rpx; }
.mgl-bs{ margin-left: 20rpx; }
.mglr-bs{ margin-left: 20rpx;margin-right: 20rpx; }
.mgtb-bs{ margin-top: 20rpx;margin-bottom: 20rpx; }
/*外边距 小*/
.mg-sm{ margin: 10rpx; }
.mgt-sm{ margin-top: 10rpx; }
.mgr-sm{ margin-right: 10rpx; }
.mgb-sm{ margin-bottom: 10rpx; }
.mgl-sm{ margin-left: 10rpx; }
.mglr-sm{ margin-left: 10rpx;margin-right: 10rpx; }
.mgtb-sm{ margin-top: 10rpx;margin-bottom: 10rpx; }
/*外边距 大*/
.mg-lg{ margin: 40rpx; }
.mgt-lg{ margin-top: 40rpx; }
.mgr-lg{ margin-right: 40rpx; }
.mgb-lg{ margin-bottom: 40rpx; }
.mgl-lg{ margin-left: 40rpx; }
.mglr-lg{ margin-left: 40rpx;margin-right: 40rpx; }
.mgtb-lg{ margin-top: 40rpx;margin-bottom: 40rpx; }
/*文字对齐*/
.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}
/*定位*/
.relative{position: relative;}
.absolute{position: absolute;}
.fixed{position: fixed;}
.float-right{ float: right;}
.float-left{ float: left;}
.float-none{ float: none;}
.float-clear{ clear: both; }
.float-clear::after{content: ""; clear: both; }
.mgx-center{margin-left: auto;margin-right: auto;}
.mgy-center{margin-top: auto;margin-bottom: auto;}
.over-hidden{overflow: hidden;}
.over-auto{overflow: auto;}
.overx-hidden{overflow-x: hidden;}
.overy-hidden{overflow-y: hidden;}
.overx-scroll{overflow-x: scroll;}
.overy-scroll{overflow-y: scroll;}
.overx-auto{overflow-x: auto;}
.overy-auto{overflow-y: auto;}
/**/
.radius-xs{border-radius: 3px;}
.radius-sm{border-radius: 6px;}
.radius-bs{border-radius: 12px;}
.radius-lg{border-radius: 18px;}
/**/
.border-box{box-sizing: border-box;}
/*栅格*/
.row { display: flex; }
.row-column {flex-direction: column;}
.row-wrap {flex-wrap: wrap;}
.row-nowrap {flex-wrap: nowrap;}
.row-justify-center{justify-content: center;}
.row-justify-start{justify-content: flex-start;}
.row-justify-end{justify-content: flex-end;}
.row-justify-between{justify-content: space-between;}
.row-justify-around{justify-content: space-around;}
.row-align-center{ align-items: center;}
.row-align-start{ align-items: flex-start;}
.row-align-end{ align-items: flex-end;}
.row-align-stretch{ align-items: stretch;}
.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 { overflow: hidden; }
.col-1 { width: 8.33333333333333%;}
.col-2 { width: 16.6666666666666%;}
.col-3 { width: 25%;}
.col-4 { width: 33.3333333333333%;}
.col-5 { width: 41.6666666666666%;}
.col-6 { width: 50%;}
.col-7 { width: 58.333333333333333%;}
.col-8 { width: 66.66666666666666%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33333333333333%; }
.col-11 { width: 91.66666666666666%; }
.col-12 { width: 100%; }
.col-grow{ flex-grow: 1;}
.col-shrink{ flex-shrink: 1; }