vue2中，应用实例-CSS中的变量使用——var() 函数用于动态改变颜色 & 全局样式详情版

第一步：定义css文件

src/assets/css/main.css

简略版

* {
  margin: 0;
  padding: 0;
}

:root {
  --color-gray: #5e6d82;
  --color-light: #a1dbf5;
}

第二步：在App.vue中进行引入

src/App.vue

<template>
<div id="app" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(82, 82, 82, 0.8) !important" v-loading="loading">
  <router-view></router-view>
</div>
</template>

<script>
export default {
  name: "App",
  computed: {
    loading() {
      return this.$store.state.map.loading
    }
  }
};
</script>

<style lang="less">
@import "./assets/css/main.css";

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

第三步：在页面index.vue中进行使用

index.vue

<template>
    <span class='name-label'>连锁品牌</span>
    <div  style="border: 1px solid var(--color-light);width: 30px;height: 30px;color: var(--color-light);font-size: 26px;float: left;margin-right: 8px;">
       {{name}}
    </div>
</template>

<style scoped>
  .name-label {
    font-size: 12px;
    line-height: 30px;
    color: var(--color-light);
  }
</style>

效果

详情版

* {
  margin: 0;
  padding: 0;
}

:root {
  --color-dark: #060714;
  --color-light: #a1dbf5;
  --color-base: #242731;
  --color-red: #f6565d;
  --color-lavender: #4e55af;
  --color-purple: #494f86;
  --color-brown: #33364b;
  --color-gray: #5e6d82;
  --color-white: #fff;

  --border-active-color: #5b93ff;

  --color-normal-btn: #666b79;
  --button-default-bg: var(--color-base);
  --button-default-border: #606575;
  --button-default-color: #d7d7d7;
  --button-default-bg-hover: #2f374b;
  --button-default-bd-hover: #182848;
  --button-default-hover: #ffffff;
  --button-default-bg-focus: #2f374b;
  --button-default-bd-focus: #a0dbf5;
  --button-default-focus: #a1dbf5;

  --button-primary-bg: #a0dbf5;
  --button-primary-color: #222538;
  --button-primary-bg-hover: #88b7cf;

  --base-fount-familt-CN: 'Microsoft YaHei';
  --base-fount-familt-EN: Arial;

  --table-title-text: var(--color-white);
  --table-content-text: #d6d6d6;
}

html,
body,
#app,
.wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei',
    arial, STHeiTi, sans-serif;
}

a {
  text-decoration: none;
}

.content-box {
  position: absolute;
  left: 250px;
  right: 0;
  top: 70px;
  bottom: 0;
  padding-bottom: 30px;
  -webkit-transition: left 0.3s ease-in-out;
  transition: left 0.3s ease-in-out;
  background: #f0f0f0;
}

.content {
  width: auto;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
}

.content-collapse {
  left: 65px;
}

.container {
  padding: 30px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.map .leaflet-container {
  background: #f5f5f5;
  outline: 0;
}

/***** 全局样式 *****/

/*滚动条*/

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background: var(--color-base);
}

*::-webkit-scrollbar-thumb {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #464750;
}

input:disabled,
select:disabled,
button:disabled,
a:disabled {
  opacity: 0.6;
  cursor: not-allowed !important;
}

/* 自定义滚动条 */

.fm-scroll {
  overflow: auto;
}

.fm-scroll::-webkit-scrollbar {
  background: rgba(0, 0, 0, 0.1);
}

.fm-scroll::-webkit-scrollbar-thumb {
  background: #c1c1c1;
}

/* 文本超长显示控制 */

.fm-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

div.fm-stretch {
  width: 100%;
  height: 100%;
}

div.fm-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 自适应宽高 */

.fm-fitsize {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* 用于布局的div样式 */

.fm-layout-container {
  position: absolute;
  box-shadow: 0 0 10px #93bbff;
  z-index: 9;
  /* 处理div（display:inline-block）之间的间隙*/
  font-size: 0px;
}

.fm-layout-container.left {
  width: auto;
  height: 100%;
  top: 0;
  left: 0;
}

.fm-layout-container.right {
  width: 300px;
  height: 100%;
  top: 0;
  right: 0;
}

.fm-layout-container.bottom {
  width: 100%;
  height: 300px;
  bottom: 0;
  right: 0;
  left: 0;
}

.fm-layout-container>div {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}

a.fm-container-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: all 0.3s;
  z-index: 3;
  background: url('../images/common/icon_close.png') no-repeat center center transparent;
}

a.fm-container-close:hover {
  transform: rotate(90deg);
}

.flat-btn {
  vertical-align: middle;
  cursor: pointer;
}


.cursor-point {
  cursor: pointer;
}


.floatRight {
  float: right;
}

/* 重新element-UI的的样式 */
.el-collapse .el-collapse-item__header {
  background-color: var(--color-base);
  padding-left: 10px;
  color: var(--color-white);
  font-weight: 600;
  border-top: 1px solid var(--button-default-border);
}

.el-collapse .el-collapse-item__content {
  padding-left: 10px;
  padding-bottom: 5px;
  color: var(--color-white);
}

.el-collapse-item__wrap {
  background: var(--color-base);
  color: var(--color-white);
}

.el-form>>>.el-form-item .el-form-item__label {
  font-size: 12px;
}

.el-form>>>.el-form-item .el-form-item__content {
  font-size: 12px;
}

.collapse_title {
  padding-left: 10px;
  font-size: 14px;
}

.el-form>>>.el-form-item {
  margin: 5px 0px;
}

.el-form>>>.el-form-item--mini.el-form-item {
  margin: 5px 0px;
}

.dialog-footer,
.el-dialog__footer {
  width: 100%;
  display: inline-block;
}