GraceAdmin 提供了极简的样式来实现 uni-app 项目的 pc 端适配工作。

全局样式

/* 修饰默认字体及默认文本大小 */
*{font-size:14px; font-family:Microsoft Yahei, PingFangSC-Regular, sans-serif;}
/* 修饰链接 */
a{color:#007AFF; text-decoration:none;}
a:hover{text-decoration:underline;}

图标使用

/* 图标 */
@font-face{......}
.gui-icons{font-family:"gui-admin"; font-style:normal;}
.gui-icons:before{padding-right:6px;}
.icon-user:before{content:"\e60a";} // 用户
.icon-title:before{content:"\e66b";} // 标题标志
.icon-add:before{content:"\e600";} // 增加
.icon-remove:before{content:"\e6b0";} // 删除
.icon-edit:before{content:"\e69a";} // 编辑
.icon-key:before{content:"\e626";} // 钥匙
.icon-logoff:before{content:"\e681";} // 退出

flex 布局

.grace-flex // 声明 flex
.grace-rows // flex 横向
.grace-columns  //flex 竖向
.grace-wrap //flex 自动换行
.grace-nowrap //flex 横向不换行
.grace-space-between //flex 横向两端对齐
.grace-flex-end //flex 横向右对齐
.grace-flex-center  //flex 横向居中
.grace-flex-top  //flex 垂直顶端对齐
.grace-flex-vcenter //flex 垂直居中对齐
.grace-flex-bottom //flex 垂直底部对齐
.grace-no-scale //元素不缩放

左右浮动

.gui-fr{float:right !important;} // 右浮动
.gui-fl{float:left !important;} // 左浮动

其他样式

我们还修饰了table、radio、input、textarea 等元素，详见 grace.css (样式很少，很容易看懂)。

注意事项

1 宽度使用 100% 代替 750rpx;
2 像素单位使用 px;
3 如果使用 uni-app 内置组件发现样式兼容问题可以利用控制台抓取样式，然后重写样式进行修正；