主要采用scss 编程式思想实现
以上文件从上到下进行说明
_variables.scss 文件主要写主题色 字体边框等变量
内容如下：
—————————————————————————————————————————————————
// colors $colors: ( // 主题色 'primary': #0066ff, "header-bg":#fff, "header-text":#000, 'pages-bg': #f6f7fb, 'border-color': #f2f2f2, 'page-bottom': #d4d9de, 'status-color': #c3672c, 'info': #4b67af, 'danger': #791a15, 'blue-1': #1f3695, 'blue': #1e78ff, 'gree': #07c160, 'white': #fff, 'white-1': #fcfcfc, 'white-2': #eceef0, 'light': #f9f9f9, 'light-1': #d4d9de, 'grey': #808080, 'grey-1': #666, 'dark-1': #343440, 'dark': #222, 'black': #212121, 'end': #fcb102, //warrary 页面steps 'steps': #333, 'step_title': #fff, 'process_title': #ffc201, //按钮颜色 'btn': #fecd32 ); //font $font:( 'light': SuisseIntl-Light, 'trial': wigrum-light-TRIAL, 'regular': wigrum-regular ); $border-color: map-get($colors, 'grey'); // font size $base-font-size: 1rem; $font-sizes: ( xxs: 0.6154, xs: 0.7692, //10px sm: 0.9231, //12px md: 1, //13px lg: 1.0769, //14px xl: 1.2308, //16px,,,, ); $flex-jc: ( start: flex-start, end: flex-end, center: center, between: space-between, around: space-around, ); $flex-ai: ( start: flex-start, end: flex-end, center: center, stretch: stretch, ); // spacing // 0-5: 0 // .mt-1 => margin top .pb-2 $spacing-types: ( m: margin, p: padding, ); $spacing-directions: ( t: top, r: right, b: bottom, l: left, ); $spacing-base-size: 1; $spacing-sizes: ( 10: 10px, 15: 15px, 20: 25px, 25: 25px, 30: 30px, 35: 35px, );
———————————————————————————————————————————————————————
reset 重置样式 我把几个css 库重置样式统一了一下
主要内容为：
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
/* ==========================================================================
一、消除不同浏览器对HTML文本呈现的差异
========================================================================== */
/* ==========================================================================
HTML5 display definitions
HTML5 新增元素定义
========================================================================== */
/**
* 修正IE 8/9 中未定义的块级元素。
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
display: block;
}
/**
* 修正在 IE 8/9 中未定义的 'inline-block' 元素。
*/
audio,
canvas,
video {
display: inline-block;
}
/**
* 阻止现在浏览器显示未定义 control 播放控件的 'audio' 声音元素。
* 删除 IOS 5 设备中显示的多余的高度。
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* 处理 IE 8/9 中不存在的样式。
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
基本设置
========================================================================== */
/**
* 1. 设置默认字体类型为 sans-serif.
* 2. 当用户放大或缩小页面时不改变字体大小。
*/
html {
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* 删除默认边距。
*/
body {
margin: 0;
}
/* ==========================================================================
Links
链接
========================================================================== */
/**
* 处理 Chrome 与其它浏览器中关于 'outline' 的不一致性。
*/
a:focus {
outline: thin dotted;
}
/**
* 为所有浏览器改善当激活或悬停在元素上时元素内容的可读性。
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
排版
========================================================================== */
/**
* 处理多变的 'h1' 字体大小及其在 Firefox 4+, Safari 5, 及 Chrome时浏览器中的
* 'section' 与 'article' 元素中的边距。
*/
/**
* 处理在 IE 8/9, Safari 5, 及 Chrome 没有的样式。
*/
abbr[title] {
border-bottom: 1px dotted;
}
/**
* 处理 Firefox 4+, Safari 5, 及 Chrome 中默认的 'bolder' 样式为 'bold'.
*/
b,
strong {
font-weight: bold;
}
/**
* 处理在 Safari 5 和 Chrome 没有的样式。
*/
dfn {
font-style: italic;
}
/**
* 处理 Firefox 与其它浏览器的差异。
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
/**
* 处理在 IE 8/9 中没有的样式。
*/
mark {
background: #ff0;
color: #000;
}
/**
* 修正确 Safari 5 和 Chrome 中古怪的默认字体。
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
}
/**
* 为所有浏览器改善预格式化文本的可读性。
*/
pre {
white-space: pre-wrap;
}
/*
* 设置一致的引用格式。
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/**
* 处理所有浏览器中字体大小的不一致性[译者注：原文直译为：处理所有
* 浏览器中的不一致和多变的字体大小]。
*/
small {
font-size: 80%;
}
/**
* 阻止所有浏览器中 'sub' 和 'sup' 元素影响 'line-height'.
* [译者注：就是不让上标与下标影响行高。]
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* ==========================================================================
Embedded content
嵌入的内容
========================================================================== */
/**
* 删除 IE 8/9 中当内容位于 'a' 中出现的边框。
*/
img {
border: 0;
}
/**
* 修正 IE 9 中显示古怪的溢出内容。
*/
svg:not(:root) {
overflow: hidden;
}
/* ==========================================================================
Figures
Figure 图像/图表/代码等
========================================================================== */
/**
* 处理在 IE 8/9 和 Safari 5 没有的边距。
*/
figure {
margin: 0;
}
/* ==========================================================================
Forms
========================================================================== */
/**
* [译者注：说是修正颜色嘛，可下面没有关于颜色的呀，这也行？求大神解释！]
* 2. 去掉内边距，避免当用户清空表单组时认为出错了。
*/
legend {
border: 0; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. 修正所有浏览器中未被继承的字体类型。
* 2. 修正所有浏览器中未被继承的字体大小。
* 3. 处理 Firefox 4+, Safari 5, 及 Chrome 中默认设置不同的外边距。
*/
button,
input,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 2 */
margin: 0; /* 3 */
}
/**
* 处理 Firefox 4+ 中的客户端样式表里使用 '!important' 设置的 'line-height'.
*/
button,
input {
line-height: normal;
}
/**
* 处理 'button' 和 'select' 的 'text-transform' 继承的不一致性。
* 所有其它表单控件元素不继承 'text-transform' 的值。
* 修正 Chrome, Safari 5+, 及 IE 8+ 中 'button' 的继承样式。
* 修正 Firefox 4+ 和 Opera 中 'select' 的继承样式。
*/
button,
select {
text-transform: none;
}
/**
* 1. 避免 Android 4.0.* 中 WebKit 的一个bug, 防止 'audio' 与 'video' 的播放控件失效。
* 2. 修正 iOS 中不可点击的 'input' 样式。
* 3. 改善图片类型的 'input' 等光标样式的可用性与一致性。
*/
button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button; /* 2 */
cursor: pointer; /* 3 */
}
/**
* 重置不可用元素的默认光标样式。
*/
button[disabled],
html input[disabled] {
cursor: default;
}
/**
* 1. 处理 IE 8/9 中设置为 'content-box' 的盒子模型。
* 2. 删除 IE 8/9 中多余的内边距。
*/
input[type="checkbox"],
input[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* 1. 处理 Safari 5 和 Chrome 中默认设置为 'appearance' 的 'searchfield'.
* 2. 处理 Safari 5 和 Chrome 中默认设置为 'box-sizing' 的 'border-box'
* (包括不会过时的 '-moz').
*/
input[type="search"] {
-webkit-appearance: textfield; /* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box; /* 2 */
box-sizing: content-box;
}
/**
* 删除 Safari 5 和 OS X 上的 Chrome 中的输入框上的内边距和搜索取消按钮。
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 删除 Firefox 4+ button 与 input 上的内边距。
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
/**
* 1. 删除 IE8/9 中默认的垂直滚动条。
* 2. 改善所有浏览器中的可读性并使文本垂直对齐。
*/
textarea {
overflow: auto; /* 1 */
vertical-align: top; /* 2 */
}
/* ==========================================================================
Tables
表格
========================================================================== */
/**
* 删除表格里单元格间的间距。
*/
table {
border-collapse: collapse;
border-spacing: 0;
}
/* ==========================================================================
2、清除一般标签再浏览器中的默认样式
========================================================================== */
HTML, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td {
border:none;
margin:0px;
padding:0px;
}
html,body{
/*height: 100%;*/
width: 100%;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
a{
text-decoration:none;
display: inline-block;
outline: none!important;
}
/*a:link{*/
/* color:#fff;*/
/*}*/
/*a:visited{*/
/* color:#fff;*/
/*}*/
/*a:hover{*/
/* color:#fff;*/
/*}*/
/*a:active{*/
/* color:#fff;*/
/*}*/
input::-ms-clear{
display:none;
}
input::-ms-reveal{
display:none;
}
input{
-webkit-appearance: none;
margin: 0;
outline: none;
padding: 0;
}
img{
border:none;
}
ul,ol,li{
list-style-type:none;
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
style.scss 公共类（其中涉及css一些知识，在这不做介绍，请前往其官网查看）
内容为：
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@import "./reset.css";
@import './variables';
@import "./vant";
@each $colorKey, $color in $colors {
.text-#{$colorKey} {
color: $color!important;
}
.bg-#{$colorKey} {
background-color: $color;
}
.footer-#{$colorKey} {
background-color: $color;
}
}
//font
@each $fontKey, $font in $font {
.font-#{$fontKey} {
font-family: $font;
}
}
// text align
@each $var in (left, center, right) {
.text-#{$var} {
text-align: $var !important;
}
}
@each $sizeKey, $size in $font-sizes {
.fs-#{$sizeKey} {
font-size: $size * $base-font-size;
}
}
// text overflow
.text-ellipsis {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// flex
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
@each $key, $value in $flex-jc {
.jc-#{$key} {
justify-content: $value;
}
}
@each $key, $value in $flex-ai {
.ai-#{$key} {
align-items: $value;
}
}
.flex-1 {
flex: 1;
}
.flex-grow-1 {
flex-grow: 1;
}
// m-0, mx-0
@each $typeKey, $type in $spacing-types {
// .m-1
@each $sizeKey, $size in $spacing-sizes {
.#{$typeKey}-#{$sizeKey} {
#{$type}: $size * $spacing-base-size;
}
}
// .mx-1 , .my-1
@each $sizeKey, $size in $spacing-sizes {
.#{$typeKey}x-#{$sizeKey} {
#{$type}-left: $size * $spacing-base-size;
#{$type}-right: $size * $spacing-base-size;
}
.#{$typeKey}y-#{$sizeKey} {
#{$type}-top: $size * $spacing-base-size;
#{$type}-bottom: $size * $spacing-base-size;
}
}
// .mt-1
@each $directionKey, $direction in $spacing-directions {
@each $sizeKey, $size in $spacing-sizes {
.#{$typeKey}#{$directionKey}-#{$sizeKey} {
#{$type}-#{$direction}: $size * $spacing-base-size;
}
}
}
}
.link {
cursor: pointer;
}
.text-overflow {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding: 5px 10px!important;
}
@font-face {
font-family: 'iconfont';
src: url('../../static/font/iconfont.eot');
src: url('../../static/font/iconfont.eot?#iefix') format('embedded-opentype'),
url('../../static/font/iconfont.woff') format('woff'),
url('../../static/font/iconfont.ttf') format('truetype'),
url('../../static/font/iconfont.svg#iconfont') format('svg');
}
.iconfont {
font-family: "iconfont";
font-size: 18px;
font-style: normal;
}
html {
font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, sans-serif;
word-spacing: 1px;
font-size: 16px;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
background: map-get($colors, 'white');
color: map-get($colors, 'black');
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #808080;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #808080;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #808080;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #808080;
}
.itempadding {
padding: 0px 10px;
}
.clickBtn {
height: 30px;
line-height: 30px;
padding: 0px 15px;
font-size: 18px;
display: inline-block;
border-radius: 2px;
color: #fff;
border: 1px solid #07c160;
background-color: #07c160;
}
.rejectBtn {
background-color: map-get($colors, 'white');
color: #333;
border: 1px solid map-get($colors, 'status-color');
}
.btn {
width: 280px;
height: 45px;
line-height: 45px;
border-radius: 25.5px;
border: none;
color: #ffffff;
box-shadow: 0px 0px 6px #0066ff;
background: #0066ff;
}
.baseComponent {
width: 100%;
height: 100vh;
display: flex;
overflow: hidden;
background: map-get($colors, 'pages-bg');
flex-direction: column;
}
.topMenu {
height: 60px;
background: map-get($colors, 'header-bg');
.back {
font-weight: 600!important;
}
}
.bottomMenu {
height: 95px;
flex-shrink: 0;
line-height: 95px;
text-align: center;
background: map-get($colors, 'header-bg');
}
.mainContent {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
font-size: 16px!important;
}
a {
text-decoration: none;
color:map-get($colors, 'black');
}
.salaryDetail{
background: map-get($colors, 'blue');
}
.realWage {
background: map-get($colors, 'primary');
color: #ffffff;
}
.borderBox,
.overtime_time,
.overtime,
.overTime_reason,
.reimburse,
.leave,
.list,
.leave_reason,
.record_tab,
.Info,
.container_select
{
background: map-get($colors, 'white');
}
.search {
background: map-get($colors, 'white');
}
.AccountList {
border-bottom:1px solid map-get($colors, 'border-color');
}
.btnCheck {
border-top: 1px solid map-get($colors, 'border-color');
}
.overtime_time,
.leave_time,.record_tab,
.topMenu,
.clickTitle,
.salaryItem,
.consumption_detail,
.amount_detail,
.searchCustomer{
border-bottom:1px solid map-get($colors, 'border-color');
}
.status-active {
border: 1px solid map-get($colors, 'status-color') !important;
}
.addBtn{
text-align: center;
margin: 10px 35px;
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
vant.scss （框架样式重置）
内容为：
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
@import "variables.scss";
.m-calendar .m-toolbar .m-month-selector .m-next-btn, .m-calendar .m-toolbar .m-year-selector .m-next-btn {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFFmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDggNzkuMTY0MDM2LCAyMDE5LzA4LzEzLTAxOjA2OjU3ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgMjEuMCAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTEyLTAzVDE2OjQ1OjEzKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0xMi0wM1QxNzoxNjo1NiswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxOS0xMi0wM1QxNzoxNjo1NiswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2MTliNTYyZi03MGJhLTA2NDktOTRjNS04ZjBjZmJhNDdjNTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NjE5YjU2MmYtNzBiYS0wNjQ5LTk0YzUtOGYwY2ZiYTQ3YzU0IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6NjE5YjU2MmYtNzBiYS0wNjQ5LTk0YzUtOGYwY2ZiYTQ3YzU0Ij4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTliNTYyZi03MGJhLTA2NDktOTRjNS04ZjBjZmJhNDdjNTQiIHN0RXZ0OndoZW49IjIwMTktMTItMDNUMTY6NDU6MTMrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCAyMS4wIChXaW5kb3dzKSIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz61sNpTAAABiUlEQVRYheXXsUtWURzG8c8rTTX5D0RD8eYfYZDQn5AYDppOOsSrKUkQtmlIiYiQQqmTCE7RXDg4iWPiOwWtggguNb0N9w6H84Lce70eB5/l3t/DPef3hXuecziNTqfjJtVzo91xp8hHzWbzPUZwgHf4XWRcu92uBwDz+fMB7uMZ/hUce6mK/oKj4L0fW3U0LwOwGtVDWEoJsI25yJtBKxUAfMBy5C1jMBUATGMn8jZl6yIJAEziZ1DfxRc8TAVwnkMcB94jbOBeCgA4ySHOAu8p1lMBwH4OEWpYyXhe9SzY1R3FGdliTQIAK1iIvI94kQoA3sriGOp1SgBoRPVFSoBFjEbeRiqAKbyJvJbuHfNaAIbxKfIWZAuzkK4CMKD7mP4qW5CFVRWgD2voDbzvGC87URWAXnzG48A7xFiFuSoBrONJUP/BS5ymAFjB86D+mzf/VaV5WYA5vIq8Mfyo2rwMwIju/b6lYNbrAJiN6lJZrwMgVOmsX6aiN6M9Wfy+YaKu5tC49bfj/xIGQbuKMf08AAAAAElFTkSuQmCC") !important;
}
.m-calendar .m-toolbar .m-month-selector .m-prev-btn, .m-calendar .m-toolbar .m-year-selector .m-prev-btn {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3NpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo2MTliNTYyZi03MGJhLTA2NDktOTRjNS04ZjBjZmJhNDdjNTQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUFDNTE1MDcxNUIzMTFFQUEzMUY5MkI4RjU4ODhGMDUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUFDNTE1MDYxNUIzMTFFQUEzMUY5MkI4RjU4ODhGMDUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjE5YjU2MmYtNzBiYS0wNjQ5LTk0YzUtOGYwY2ZiYTQ3YzU0IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjYxOWI1NjJmLTcwYmEtMDY0OS05NGM1LThmMGNmYmE0N2M1NCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoRu2wEAAAFpSURBVHjaYvz//z/DQAImhgEGLMQoUldXJ9Y8RSBuBmJrIF548+bNBnqGADvIUiCOBmIFIK6ndxQsAGJbJP5ZejqgG4gj0MQm08sBBUBcgiZWAY0OmjsgDIj70cRA/E56ZENQfM9HE1sOxEX0KAdUgHguEHMhie0H4ix6FETcQDwLiFWRxK5BLf9ADwfMBGJHJP47qOU36FEUd0MLGmQAsvwgPeqCIizZDZQFV9KjMooE4l40sXYgnkiv2rAYjQ/KflX0rI4/o/EZ6d0emIXGTwDiDno6YDk0wSGDciAupGeLaCI04SGDPizZkqblACjhzcNS7TrRs02YDMRbkPiCQDwViDXp2ShNAuLTSHwNIJ4BdQxdHPAaiBOB+BGSmB20nqBbs/wq1BE/kMRCSS0dKW0R7YNGBzLIgzbJ6NYxwVZGgLJrPD1bxdjKiFJ69wuwlRHU6ZqRWEb8AmI/IF5DjAbGEd87BggwAIe1QN8Ieh1XAAAAAElFTkSuQmCC") !important;
}
// 打卡日历底部border颜色
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row:before {
background-color:map-get($colors, 'white')!important;
}
.van-steps {
background-color: map-get($colors, 'white')!important;
}
// 日历当天打卡背景
.m-calendar .m-months-container .m-months-wrapper .m-months .m-row .m-day .m-today {
background: map-get($colors, 'primary')!important;
color: #ffffff!important;
}
//日历头部样式
.m-calendar .m-toolbar {
background: map-get($colors, 'white')!important;
font-weight: 600!important;
}
.m-calendar .m-week-header {
background: map-get($colors, 'white')!important;
}
// 报销页面
// .van-cell {
// //color: #fff!important;
// color: map-get($colors, 'white')!important;
//}
.van-cell {
color: map-get($colors, 'black')!important;
//color: #000!important;
}
.van-field__control {
font-size: 16px;
}
.van-uploader__upload {
background-color: map-get($colors, 'white')!important;
//background-color: #bd9f6947;
border-color: map-get($colors, 'black')!important;
}
.van-uploader__upload-icon {
color: map-get($colors, 'black')!important;
}
//.van-icon {
// color: map-get($colors, 'black')!important;
// border-color: map-get($colors, 'black') !important;
//}
.van-step--finish {
color: map-get($colors, 'black')!important;
}
.van-dropdown-menu__title {
color:map-get($colors, 'black')!important;
}
.van-field__control {
color:map-get($colors, 'black')!important;
font-size: 16px!important;
}
.van-radio__label {
color:map-get($colors, 'black')!important;
}
.van-search{
background: map-get($colors, 'white')!important;
}
.van-search__action{
color: map-get($colors, 'status-color')!important;
}
.van-search{
background: map-get($colors, 'white')!important;
}
.van-tabs__line {
background:map-get($colors, 'primary')!important;
}
.van-popup {
background-color:map-get($colors, 'white')!important;
}
.van-step--finish .van-step__circle, .van-step--finish .van-step__line {
background-color:map-get($colors, 'primary')!important;
}
//.van-step--finish {
// color: map-get($colors, 'primary')!important;
//}
.van-dropdown-menu__title {
padding: 0px 8px 0px 0px!important;
font-size: 16px!important;
}
.van-field__control {
text-indent: 20px!important;
}
.m-calendar .m-toolbar .m-month-selector .m-next-btn, .m-calendar .m-toolbar .m-month-selector .m-prev-btn, .m-calendar .m-toolbar .m-year-selector .m-next-btn, .m-calendar .m-toolbar .m-year-selector .m-prev-btn {
width: 15px!important;
height: 15px!important;
}
.van-checkbox__label {
color:map-get($colors, 'black')!important;
}
.van-button--default {
color: #ffffff!important;
box-shadow: 0px 0px 6px #0066ff!important;
background: #0066ff!important;
}
.van-collapse-item {
border-bottom:1px solid map-get($colors, 'border-color') !important;
}
.van-button--default {
border: none!important;
}
.van-field__control {
//border: 1px solid map-get($colors, 'border-color') !important;
border-radius: 3px!important;
}
.van-image {
border:1px solid map-get($colors, 'border-color') !important;
}
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------
写html ，只需要将你提前设置好的类名加上就好了
好了，结束。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
