1列
2列
2列
...
1列
2列
2列
- 列表标题
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
5
-
20
-
-
-
-
-
12-筛选下拉、星星等
16-表单等
20-头部icon等
24-大loading等
40-toast、满页的提示
默认大小：18
其他大小：24
1
10
New
0/100
0/100
0/100
文字轻提示。
操作成功
操作成功
操作失败
操作失败
提示
提示
很长的自定义内容很长的自定义内容很长的自定义内容很长的自定义内容
很长的自定义很长的自定义标题
很长的自定义内容很长的自定义内容很长的自定义内容
自定义内容
自定义标题
自定义内容
没有标题的情况下的提示内容
没有标题的情况下的提示内容
自定义标题
自定义内容
自定义内容
- 未上线
- 上线
- 未上线单店
- 未上线连锁店
一条气泡提示语。
一条很长的很长的气泡提示语，为了占位存在的气泡提示语，为了占位存在的气泡提示语。
-
项目一
-
项目二
-
项目三
-
项目四
- 请选择项目
- 项目一
- 项目二
- 项目三
取消
- 确认 删除此作品？
- 删除作品
取消
合作信息
公司信息
资讯信息
合作信息
公司信息
资讯信息
-
合作信息
-
公司信息
-
资讯信息
-
合作信息
-
公司信息
-
资讯信息
-
1
-
2
-
3
没有更多
-
1
-
2
-
3
没有信息
phoenix-styles是纯样式的一个项目，使用less预编译语言。
目前提供2套皮肤可供选择，一套为默认的橙色主题，一套为IOS主题。
| 类名 | 源码 | 说明 |
|---|---|---|
| .tl | text-align: left; | 左对齐 |
| .tr | text-align: right; | 右对齐 |
| .tc | text-align: center; | 居中 |
| .tj | text-align: justify; | 两边对齐(有兼容性问题) |
| .tn | white-space: nowrap; | 强制不换行 |
| .inline-block | display: inline-block !important; | 行内块元素 |
| .inline | display: inline !important; | 行内元素 |
| .block | display: block !important; | 块元素 |
| .fl | float: left; | 左浮动 |
| .fr | float: right; | 右浮动 |
| .pr | position: relative; | 相对定位 |
| .pa | position: absolute; | 绝对定位 |
| .pf | position: fixed; | 相对浏览器定位 |
| .ps | position: static; | 无定位 |
| .fr | float: right; | 右浮动 |
| .show | display: block !important; | 显示 |
| .hidden,.hide | display: none !important; | 隐藏 |
| .show-opacity | opacity: 1 !important; | 透明度显示 |
| .hide-opacity | opacity: 0.01 !important; | 透明度隐藏 |
| .invisible | visibility: hidden; | 不可见(占取物理位置) |
| 类名 | 源码 | 说明 |
|---|---|---|
| .font-symbol | font-size: .6rem; | 30pt |
| .font-headline | font-size: .36rem; | 18pt |
| .font-title | font-size: .34rem; | 17pt |
| .font-subtitle | font-size: .32rem; | 16pt |
| .font-mainbody | font-size: .30rem; | 15pt |
| .font-text | font-size: .28rem; | 14pt |
| .font-tip | font-size: .24rem; | 12pt |
| 类名 | 源码 | 说明 |
|---|---|---|
| .color-white | color: #fff; | 字体白色 |
| .color-primary | color: #ff6633; | 字体主色 |
| .color-success | color: #49cb67; | 字体成功色 |
| .color-success-dp | color: #199235; | 字体成功深色 |
| .color-tip | color: #ffad3e; | 字体提示色 |
| .color-tip-dp | color: #e08f22; | 字体提示深色 |
| .color-error | color: #f64e2d; | 字体错误色 |
| .color-error-dp | color: #e2391a; | 字体错误深色 |
| .color-info | color: #4ea3d4; | 字体消息色 |
| .color-warning | color: #e0690c; | 字体警示色 |
| .color-danger | color: #ff3b30; | 字体危险色 |
| .color-gray | color: #333; | 字体灰色 |
| .bg-success | background-color: #49cb67; | 背景成功色 |
| .bg-success-lt | background-color: #d4f6dc; | 背景成功浅色 |
| .bg-tip | background-color: #ffad3e; | 背景提示色 |
| .bg-tip-lt | background-color: #fcc9c0; | 背景提示浅色 |
| .bg-error | background-color: #f64d2e; | 背景错误色 |
| .bg-error-lt | background-color: #fcc9c0; | 背景错误浅色 |
| .bg-gray | background-color: #f0f0f0; | 背景灰色 |
| 类名 | 说明 | 展示 |
|---|---|---|
| .onepx-primary | 1px的主色border | 1px边框 |
| .onepx-top-primary | 1px的主色border-top | 1px上边框 |
| .onepx-bottom-primary | 1px的主色border-bottom | 1px下边框 |
| .onepx-left-primary | 1px的主色border-left | 1px左边框 |
| .onepx-right-primary | 1px的主色border-right | 1px右边框 |
| .onepx-gray | 1px的灰色border | 1px边框 |
| .onepx-top-gray | 1px的灰色border-top | 1px上边框 |
| .onepx-bottom-gray | 1px的灰色border-bottom | 1px下边框 |
| .onepx-left-gray | 1px的灰色border-left | 1px左边框 |
| .onepx-right-gray | 1px的灰色border-right | 1px右边框 |
| 类名 | 源码 | 说明 |
|---|---|---|
| .clearfix |
.clearfix:before,.clearfix:after{ display: table; line-height: 0; content:"";} .clearfix:after{ clear: both;} |
清浮动 |
| .ellipsis | overflow: hidden; white-space: nowrap; text-overflow: ellipsis; |
省略号 |
| .clickable | .clickable:active{background-color: #f9f9f9;} | 点击态 |