| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212 |
- // 参考文档:https://element.faas.ele.me/#/zh-CN/component/color#fu-zhu-se
- //主色调,红色:#FF0036,绿色 #4CAF50,蓝色:#03A9F4,黄色:#FF9800,粉色:#FF547B,棕色:#C3A769,浅绿色:#65C4AA,黑色:#333333,紫色:#B323B4,淡粉色:#FF8B8B,element UI:#409eff
- $base-color: #ff547b;
- $base-color-success: #4caf50;
- $base-color-warning: #e6a23c;
- $base-color-danger: #f56c6c;
- $base-color-info: #909399;
- /* 文字基本颜色 */
- $ns-text-color-black: #303133; //基本色
- /* 文字尺寸 */
- $ns-font-size-sm: 12px;
- $ns-font-size-base: 14px;
- $ns-font-size-lg: 16px;
- $width: 1210px;
- // 小
- .ns-font-size-sm {
- font-size: $ns-font-size-sm;
- }
- // 标准
- .ns-font-size-base {
- font-size: $ns-font-size-base;
- }
- // 标准
- .ns-font-size-lg {
- font-size: $ns-font-size-lg;
- }
- //文字颜色
- .ns-text-color {
- color: $base-color !important;
- }
- .ns-text-color-black {
- color: $ns-text-color-black !important;
- }
- //边框
- .ns-border-color {
- border-color: $base-color !important;
- }
- //背景色
- .ns-bg-color {
- background-color: $base-color !important;
- }
- body {
- line-height: 1.8;
- font-family: 'Helvetica Neue', Helvetica, 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
- background-color: #f9f9f9;
- font-size: $ns-font-size-base;
- color: $ns-text-color-black;
- }
- #__nuxt {
- background-color: #f9f9f9;
- }
- #nprogress .bar {
- background: $base-color !important; //自定义颜色
- }
- html,
- body,
- dl,
- dt,
- dd,
- ol,
- ul,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- p {
- margin: 0;
- padding: 0;
- }
- article,
- aside,
- details,
- figcaption,
- figure,
- footer,
- header,
- hgroup,
- menu,
- nav,
- section {
- display: block;
- }
- ol,
- ul,
- li {
- list-style: none;
- }
- i,
- em {
- font-style: normal;
- }
- // 去掉a标签的默认样式
- a {
- text-decoration: none;
- color: $ns-text-color-black;
- &:hover {
- color: $base-color;
- }
- }
- .el-main {
- border-top: solid 1px #f2f2f2;
- overflow: initial;
- // width: $width;
- margin: 0 auto;
- padding: 0;
- }
- // 改变按钮默认样式
- .el-button--primary,
- .el-button--primary:focus,
- .el-button--primary:hover,
- .el-button--primary.is-plain:focus,
- .el-button--primary.is-plain:hover {
- background-color: $base-color;
- border-color: $base-color;
- color: #fff;
- }
- .el-button--primary.is-plain {
- color: $base-color;
- background-color: transparent;
- border-color: $base-color;
- }
- img {
- border-style: none;
- max-width: 100%;
- vertical-align: middle;
- }
- // 居中
- .ns-text-align {
- text-align: center;
- }
- // 分页
- .el-pagination {
- text-align: right;
- .el-pagination__rightwrapper {
- margin-left: 20px;
- }
- }
- /* 单行超出隐藏 */
- .using-hidden {
- word-break: break-all;
- text-overflow: ellipsis;
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 1;
- -webkit-box-orient: vertical;
- white-space: break-spaces;
- }
- /* 多行超出隐藏 */
- .multi-hidden {
- word-break: break-all;
- text-overflow: ellipsis;
- overflow: hidden;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- .el-breadcrumb__inner a:hover,
- .el-breadcrumb__inner.is-link:hover {
- color: $base-color;
- }
- .el-tabs__item.is-active {
- color: $base-color;
- }
- .el-tabs__active-bar {
- background-color: $base-color;
- }
- .el-pager li.active {
- color: $base-color;
- }
- .el-pagination.is-background .el-pager li:not(.disabled):hover {
- color: $base-color;
- }
- .el-pagination.is-background .el-pager li:not(.disabled).active {
- background-color: $base-color;
- }
- .el-menu-item.is-active {
- color: $base-color;
- }
- .el-progress-bar__inner {
- background-color: $base-color;
- }
- .el-link.el-link--default:hover {
- color: $base-color;
- }
- .el-button--text{
- color: $base-color;
- }
|