vue scss 一键更换主题色，字体等页面等页面大体样式

主要采用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 ，只需要将你提前设置好的类名加上就好了

好了，结束。

来源：CSDN

作者：weixin_43844392

链接：https://blog.csdn.net/weixin_43844392/article/details/103618813

标签

background