12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152 |
- html {
- --rgb: 7, 193, 96; /* 主题色rgb #07c160*/
- --color: rgb(var(--rgb)); /* 主题色 #07c160*/
- --color-lighter: rgb(var(--rgb), 0.12); /* 浅主题色 #e9f7ee */
- --color-sub: #90de45; /* 主题辅色 */
- --color-success: #07c160;
- --color-warning: #faad14;
- --color-danger: #eb5e12;
- --border-radius: 8px; /* 常规圆角 */
- --border-radius-small: 4px; /* 小圆角 */
- --border-radius-big: 16px; /* 大圆角 */
- --card-margin: 16px; /* 卡片间距 */
- --top-nav-heght: 64px; /* 顶部导航条高度 */
- --font-black: #1d2129; /* 通用字体黑色 */
- }
- /* 项目定制原子类 */
- .g-radius {
- border-radius: 8px;
- }
- .g-radius-small {
- border-radius: 16px;
- }
- .g-radius-big {
- border-radius: 16px;
- }
- .g-margin {
- margin: var(--card-margin);
- }
- .g-margin-t {
- margin-top: var(--card-margin);
- }
- .g-margin-r {
- margin-right: var(--card-margin);
- }
- .g-margin-b {
- margin-bottom: var(--card-margin);
- }
- .g-margin-l {
- margin-left: var(--card-margin);
- }
- .g-color {
- color: var(--color);
- }
- /* 渐变背景 */
- .g-bg-lg {
- background: linear-gradient(to left, var(--color) 0%, var(--color-sub) 100%);
- box-shadow: 0px 13px 16px 0px rgba(7, 168, 85, 0.2);
- }
|