A04-VUE基础样式构建

个人主页：Silence Lamb
本章内容：【VUE基础样式构建】

Silence-Vue v1.0.0

基于VUE前端快速开发框架

• 引入样式：src/styles/index.scss

/*通用常量*/
@import './theme';
/*全局基础样式*/
@import './base';
/*全局通用样式*/
@import './common';
/*菜单样式*/
@import './layout';

• 全局引入：main.js

import '@/styles/index.scss'

一、基础页面

1.1【基础样式】

• 基础页面样式：src/styles/base/index.scss

/*通用混入*/
@import 'mixin';
/*全局过度*/
@import 'transition';
/*全局样式*/
@import 'global';

1.2【通用混入】

• 为了有效的维护和开发项目，代码的重复利用就显得尤为重要
• 在Sass中，除了@import和@extend可以使你的代码更加具有重复利用性
• @mixin指令也同样能提高你代码的重复使用率并简化你的代码
• Mixins可以包含任意内容且可以传递参数，因此比@extend更加灵活和强大
• 通用混入：src/styles/base/mixin/index.scss

/*清除默认样式*/
@mixin resetStyles {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none !important;
  }
}

/*清楚浮动*/
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

/*相对大小*/
@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

/*更改按钮颜色*/
@mixin colorBtn($color) {
  background: $color;

  &:hover {
    color: $color;

    &:before,
    &:after {
      background: $color;
    }
  }
}

/*添加背景图片*/
@mixin bg-image($url) {
  background-image: url($url + "@2x.png");
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
    background-image: url($url + "@3x.png");
  }
}

/*文本不换行*/
@mixin no-wrap() {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/*多行文本溢出*/
@mixin multiEllipsis($line: 2) {
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
}

/*透明度*/
@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie); //IE8
}

/*美化文本的选中*/
@mixin beauty-select($color, $bgcolor) {
  &::selection {
    color: $color;
    background-color: $bgcolor;
  }
}

/*毛玻璃效果*/
@mixin blur($blur: 10px) {
  -webkit-filter: blur($blur);
  -moz-filter: blur($blur);
  -o-filter: blur($blur);
  -ms-filter: blur($blur);
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='${blur}');
  filter: blur($blur);
  *zoom: 1;
}

/* 滤镜: 将彩色照片显示为黑白照片、保留图片层次*/
@mixin grayscale() {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

/*文本居中*/
@mixin center($height: 100%) {
  height: $height;
  line-height: $height;
  text-align: center;
}

/*修改背景色等*/
@mixin background( $bg-color: #5f6970, $color: #000000, $font-weight: 400) {
  color: $color;
  font-weight: $font-weight;
  background-color: $bg-color;
}

/*鼠标hover显示下划线*/
@mixin hoverLine($height: 2px, $color: #ffffff) {
  position: relative;
  &:hover::after {
    content: "";
    position: absolute;
    height: $height;
    width: 100%;
    background-color: $color;
    bottom: 0;
    left: 0;
  }
}

/*滚动条*/
@mixin scrollBar($width:6px, $height:6px, $trackBg: rgba(255,255,255,0), $thumbBg: #808080) {
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  &::-webkit-scrollbar {
    width: $width;
    height: $height;
    /* 防止遮挡内容 */
    padding-right: 20px;
    margin: 50px auto;
    overflow: hidden;
  }
  /*滚动条的轨道的两端按钮，允许通过点击微调小方块的位置*/
  &::-webkit-scrollbar-button {
    display: none;
  }
  /*边角，即两个滚动条的交汇处*/
  &::-webkit-scrollbar-corner {
    display: none;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  &::-webkit-scrollbar-track {
    border-radius: 30px; /*轨道背景区域的圆角*/
    background-color: $trackBg; /*轨道的背景颜色*/
  }
  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    border-radius: 12px;
    /*
    padding-box 表示背景裁剪到内边距框，
    这里也可以用 content-box,表示裁剪到内容框，
    默认为 border-box，表示裁剪到边框
    */
    background-clip: padding-box;
    border-color: transparent;
    background: $thumbBg; /*滑块背景颜色*/
  }

  /* 悬浮更换滚动条颜色 */
  &::-webkit-scrollbar-thumb:hover {
    background: #493131;
    border-width: 0;
  }
}

/* 文本可点击 */
@mixin clickable {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

/*文本不可点击*/
@mixin noClickable {
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard syntax */
}

@mixin pct($pct) {
  width: #{$pct};
  position: relative;
  margin: 0 auto;
}

@mixin triangle($width, $height, $color, $direction) {
  $width: $width/2;
  $color-border-style: $height solid $color;
  $transparent-border-style: $width solid transparent;
  height: 0;
  width: 0;

  @if $direction==up {
    border-bottom: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  } @else if $direction==right {
    border-left: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  } @else if $direction==down {
    border-top: $color-border-style;
    border-left: $transparent-border-style;
    border-right: $transparent-border-style;
  } @else if $direction==left {
    border-right: $color-border-style;
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
  }
}

1.3【全局样式】

• 全局样式：src/styles/base/global/index.scss

* 选择器表示匹配所有元素，使用了 resetStyles 混合器，可以重置元素的默认样式。
	scrollBar 混合器用于自定义滚动条样式，传入两个参数，第一个参数是滚动条宽度，第二个参数是滚动条颜色。
	
对于 body、html 以及 #app 元素，使用了多个 SCSS 混合器和属性，包括：
	relative 混合器用于设置元素相对定位。
	clearfix 混合器用于清除浮动。
	background 混合器用于设置背景颜色，参数 $bg-color: $background 表示设置背景颜色为 $background 变量值，当 $bg-color 没有传入时，默认使用值 $background。

此外，还有一些 CSS 属性的设置，包括：
	overflow: hidden !important 设置 overflow 属性为 hidden，禁止元素出现滚动条。 !important 标记用于强制生效，覆盖可能存在的其他样式设置。
	zoom:1 设置缩放因子为 1，用于解决 IE 7/8 浏览器下的一些兼容性问题。
	text-overflow: ellipsis 设置文本溢出时的显示方式为省略号。
	font-family 属性设置了多种字体类型，表示默认情况下使用 Helvetica Neue、Helvetica、苹方、华文细黑、微软雅黑、Arial、sans-serif 等字体族中的任意一种，较为常见。
最后，还使用 -moz-osx-font-smoothing、-webkit-font-smoothing 和 text-rendering 等属性进行字体渲染的优化，使字体显示更加平滑和清晰。

/* 基本样式 */
/* 基本样式 */
@include resetStyles;
@include scrollBar(6px, 6px);
body,
html,
#app {
  @include relative;
  @include noClickable;
  @include background($bg-color: $bodyBg);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}

/* 去掉点击链接时周围的虚线框outline属性 */
*,
*:before,
*:after {
  box-sizing: inherit;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}


//优化 Vue 多选插件
.multiselect {
  line-height: 16px;
}

.multiselect--active {
  z-index: 1000 !important;
}

1.4【全局过度】

• 全局过度：transition.scss

.fade-enter-active 和 .fade-leave-active 用于应用渐隐渐显的过渡效果，opacity 属性值在 0.28s 内从 0 变为 1，或从 1 变为 0。
.fade-enter 和 .fade-leave-active 共同使用，.fade-enter 用于设置初始状态，opacity 属性值为 0，则元素不可见，在过渡开始时，元素会出现并从 0 变为 1。.fade-leave-active 用于设置结束状态，opacity 属性值为 0，则元素在过渡结束时被隐藏。
.fade-transform-leave-active 和 .fade-transform-enter-active 用于应用带有移动效果的过渡效果（如元素平移），在过渡期间应用 all 属性，表示对所有 CSS 属性进行过渡动画。
.fade-transform-enter 和 .fade-transform-leave-to 针对不同的过渡状态，.fade-transform-enter 用于设置初始状态，在元素进入时透明度为 0，而且在水平方向左侧偏移了 30px。.fade-transform-leave-to 用于设置结束状态，在元素离开时透明度为 0，而且在水平方向右侧偏移了 30px。
.breadcrumb-enter-active 和 .breadcrumb-leave-active 用于应用带有面包屑效果的过渡效果（如页面之间的导航），在过渡期间应用 all 属性，表示对所有 CSS 属性进行过渡动画。

// 全局过度 css

/* fade */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.28s;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
  transition: all .5s;
}

.fade-transform-enter {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
  transition: all .5s;
}

.breadcrumb-enter,
.breadcrumb-leave-active {
  opacity: 0;
  transform: translateX(20px);
}

.breadcrumb-move {
  transition: all .5s;
}

.breadcrumb-leave-active {
  position: absolute;
}

二、通用样式

• 通用样式：src/styles/common/index.scss

/*按钮样式*/
@import 'button';
/*element部分样式*/
@import "element";

2.1【按钮格式】

• 通用样式：src/styles/common/button/index.scss

/*流光按钮*/
.streamer-button {
  background: linear-gradient(to right, rgb(198, 255, 221), rgb(251, 215, 134), rgb(247, 121, 125), rgb(198, 255, 221));
  background-size: 800%;
  border-radius: 50px !important;

  &:before {
    content: "";
    background: linear-gradient(to right, rgb(198, 255, 221), rgb(251, 215, 134), rgb(247, 121, 125), rgb(198, 255, 221));
    z-index: -1 !important;
    filter: barn(25px) !important;
  }

  &:hover {
    color: #ffffff;
    animation: streamer-button 8s infinite;

    &:before {
      animation: streamer-button 8s infinite;
    }
  }

  /*流光按钮*/
  @keyframes streamer-button {
    100% {
      background-position: -400% 0;
    }
  }
}

/*闪亮按钮*/
.shiny-button {
  position: relative;
  overflow: hidden;

  &:before {
    content: "";
    background-color: rgba(255, 255, 255, 0.5);
    height: 100%;
    width: 3em;
    display: block;
    position: absolute;
    top: 0;
    left: -4.5em;
    transform: skewX(-45deg) translateX(0);
  }

  &:hover {
    background-color: #e3ae11;
    color: rgba(20, 47, 222, 0.73);

    &:before {
      transform: skewX(-45deg) translateX(13.5em);
      transition: all 0.5s ease-in-out;
    }
  }
}

/*自定义按钮*/
.custom-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  color: #000000;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: 0;
  margin: 0;
  padding: 10px 15px;
  font-size: 14px;
  border-radius: 6px;
}

/*自定义按钮动作*/
.pan-btn {
  font-size: 14px;
  color: #070000;
  padding: 14px 36px;
  border-radius: 8px;
  border: none;
  outline: none;
  transition: 600ms ease all;
  position: relative;
  display: inline-block;

  &:hover {
    background: #fff;

    &:before,
    &:after {
      width: 100%;
      transition: 600ms ease all;
    }
  }

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 2px;
    width: 0;
    transition: 400ms ease all;
  }

  &::after {
    right: inherit;
    top: inherit;
    left: 0;
    bottom: 0;
  }
}

2.2【Element】

• 涵盖一些 element-plus UI 样式element.scss

/*elementPlus*/
@import 'element-plus/dist/index.css';
/*elementPlus图标*/
@import 'element-plus/theme-chalk/src/index.scss';

//涵盖一些 element-plus UI 样式
/*文件上传框*/
.el-upload {
  input[type="file"] {
    display: none !important;
  }
}

/** 表格样式 */
.el-table {
  margin-top: 8px;
  border: solid rgba(37, 49, 49, 0.18) !important;
  border-radius: 10px !important;
}

/*消息窗体样式*/
.el-message-box {
  border: solid rgba(37, 49, 49, 0.18);
  border-radius: 10px;
}
/*分页插件样式*/
.el-pagination {
  margin-top: 5px;
}

.tree-border {
  margin-top: 5px;
  border: 1px solid #e5e6e7;
  background: #FFFFFF none;
  border-radius: 4px;
}

.el-dialog {
  margin-top: 80px !important;
  border: solid rgba(37, 49, 49, 0.18);
  border-radius: 10px;
}

.el-upload__input {
  display: none;
}

.el-button {
  border-radius: 6px;
}

.cell {
  .el-tag {
    margin-right: 0;
  }
}

.small-padding {
  .cell {
    padding-left: 4px;
    padding-right: 4px;
  }
}

.fixed-width {
  .el-button--mini {
    padding: 0;
    margin: 4px;
    min-width: 0;
  }
}

.status-col {
  .cell {
    padding: 0 10px;
    text-align: center;

    .el-tag {
      margin-right: 0;
    }
  }
}

// refine element ui job
.upload-container {
  .el-upload {
    width: 100%;

    .el-upload-dragger {
      width: 100%;
      height: 200px;
    }
  }
}

// dropdown
.el-dropdown-menu {
  a {
    display: block
  }
}

// fix date-picker ui bug in filter-item
.el-range-editor.el-input__inner {
  display: inline-flex !important;
}

// to fix el-date-picker css style
.el-range-separator {
  box-sizing: content-box;
}

四、滚动条样式

• 自定义滚动条样式：mixin.scss

/*滚动条*/
@mixin scrollBar($width, $height, $trackBg: #ffffff, $thumbBg: #808080) {
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  &::-webkit-scrollbar {
    width: $width;
    height: $height;
    /* 防止遮挡内容 */
    padding-right: 20px;
    margin: 50px auto;
    overflow: hidden;
  }
  /*滚动条的轨道的两端按钮，允许通过点击微调小方块的位置*/
  &::-webkit-scrollbar-button {
    display: block;
  }
  /*边角，即两个滚动条的交汇处*/
  &::-webkit-scrollbar-corner {
    display: block;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  &::-webkit-scrollbar-track {
    border-radius: 30px; /*轨道背景区域的圆角*/
    background-color: $trackBg; /*轨道的背景颜色*/
  }
  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb {
    border-radius: 12px;
    /*
    padding-box 表示背景裁剪到内边距框，
    这里也可以用 content-box,表示裁剪到内容框，
    默认为 border-box，表示裁剪到边框
    */
    background-clip: content-box;
    border-color: transparent;
    background: $thumbBg; /*滑块背景颜色*/
  }

  /* 悬浮更换滚动条颜色 */
  &::-webkit-scrollbar-thumb:hover {
    background: #493131;
    border-width: 0;
  }
}

• 使用以上定义的样式：index.scss

/* 滚动条样式 */
@include scrollBar;