样式

scoped

强烈建议使用 scoped ，父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

---

通过深度选择器自定义子组件样式

该方法同样适用于局部某个组件自定义 element-ui 样式

<style lang="scss" scoped>
::v-deep {
      .el-menu--collapse {
        border-right: 0 !important;

        .el-submenu__icon-arrow {
          right: 10px;
          margin-top: -3px;
        }

        .el-submenu__title {
          span {
            display: none;
          }
        }
      }
    }
</style>

---

使用变量

在项目中可的任何一个 vue 文件中都可以使用 src/vab/styles/variables/variables.scss 下的任意一个变量

---

variables.scss 配置

说明：这里可以修改你项目的配色方案，简单修改即可实现风格大变。

位置：src/vab/styles/variables/variables.scss

/**
 * @author chuzhixin 1204505056@qq.com
 * @description 全局主题变量配置
 */
//框架默认主题色
$base-color-default: #1890ff;
//默认层级
$base-z-index: 999;
//画廊最左侧菜单背景色
$base-gallery-first-menu-background: linear-gradient(to right, #282c34, #000);
//画廊时菜单背景色
$base-gallery-second-menu-background: #fff;
//画廊时菜单选中背景色
$base-gallery-second-menu-background-active: rgba(#1890ff, 0.1);
//横向、纵向时菜单背景色
$base-menu-background: #282c34;
//菜单文字颜色
$base-menu-color: hsla(0, 0%, 100%, 0.95);
//菜单选中文字颜色
$base-menu-color-active: hsla(0, 0%, 100%, 0.95);
//菜单选中背景色
$base-menu-background-active: $base-color-default;
//标题颜色
$base-title-color: #fff;
//字体大小配置
$base-font-size-small: 12px;
$base-font-size-default: 14px;
$base-font-size-big: 16px;
$base-font-size-bigger: 18px;
$base-font-size-max: 22px;
$base-font-color: #606266;
$base-color-blue: $base-color-default;
$base-color-green: #13ce66;
$base-color-white: #fff;
$base-color-black: #515a6e;
$base-color-yellow: #ffba00;
$base-color-orange: #ff6700;
$base-color-red: #ff4d4f;
$base-color-gray: rgba(0, 0, 0, 0.65);
$base-main-width: 1279px;
$base-border-radius: 2px;
$base-border-color: #dcdfe6;
//输入框高度
$base-input-height: 32px;
//默认paddiing
$base-padding: 20px;
//默认阴影
$base-box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
//横向时top-bar、logo、一级菜单的高度
$base-top-bar-height: 65px;
//纵向、画廊时logo的高度
$base-logo-height: 60px;
//顶部nav-bar的高度
$base-nav-bar-height: 60px;
//顶部多标签页tabs-bar的高度
$base-tabs-bar-height: 55px;
//顶部多标签页tabs-bar中每一个item的高度
$base-tab-item-height: 34px;
//菜单li标签的高度
$base-menu-item-height: 50px;
//app-main的高度
$base-app-main-height: calc(
  100vh - #{$base-nav-bar-height} - #{$base-tabs-bar-height} -
    #{$base-padding} * 2 - 56px
);
//纵向时左侧导航未折叠时的宽度
$base-left-menu-width: 256px;
//纵向时左侧导航未折叠时右侧内容的宽度
$base-right-content-width: calc(100% - #{$base-left-menu-width});
//纵向时左侧导航已折叠时的宽度
$base-left-menu-width-min: 65px;
//纵向时左侧导航已折叠时右侧内容的宽度
$base-right-content-width-min: calc(100% - #{$base-left-menu-width-min});
//默认动画
$base-transition: all 0.2s;
//默认动画时长
$base-transition-time: 0.2s;

:export {
  //菜单文字颜色变量导出
  menu-color: $base-menu-color;
  //菜单选中文字颜色变量导出
  menu-color-active: $base-menu-color-active;
  //菜单背景色变量导出
  menu-background: $base-menu-background;
  //画廊菜单背景色变量导出
  gallery-second-menu-background: $base-gallery-second-menu-background;
}

---

#element-ui 组件尺寸配置

说明：这里可以修改你 element-ui 组件尺寸，element-ui 组件的尺寸一共分为 large、default、small 、mini，本项目默认使用的是 small。

位置：src/vab/plugins/element.js

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/display.css";
import i18n from "@/i18n";
import "@/vab/styles/element-variables.scss"; //这里新版本已取消全局颜色替换，如果需要请从1.0版本中拷贝

Vue.use(ElementUI, {
  size: "small",
  i18n: (key, value) => i18n.t(key, value),
});

---