proxy: {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://192.168.2.81:8080`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
},
新增自定义样式
在index.scss中引入
@import './ququ.scss';
ququ.scss
// 颜色
$black: #000;
$white: #fff;
$gray: #888888;
$red: #f56c6c;
$yellow: #f8ac59;
$blue: #1c84c6;
$green: #1ab394;
// $Color
$colors: (
black: $black,
white: $white,
gray: $gray,
red: $red,
yellow: $yellow,
blue: $blue,
green: $green,
);
@each $key, $color in $colors {
.#{$key} {
color: $color;
}
.bg-#{$key} {
background-color: $color;
}
}
/* flex */
.center {
display: flex;
justify-content: center;
align-items: center;
}
.flex1 {
display: flex;
justify-content: space-between;
align-items: center;
}
.flex_l {
display: flex;
justify-content: flex-start;
align-items: center;
}
.flex_r {
display: flex;
justify-content: flex-end;
align-items: center;
}
.flex {
display: flex;
}
.flex-center {
justify-content: center;
}
.flex-around {
justify-content: space-around;
}
.flex-between {
justify-content: space-between;
}
.flex-top {
align-items: flex-start;
}
.flex-middle {
align-items: center;
}
.flex-bottom {
align-items: flex-end;
}
.flex-column {
flex-direction: column;
}
.flex-wrap {
flex-wrap: wrap;
}
/* 其他 */
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.fixed {
position: fixed;
}
.fixed-bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.block {
display: block;
}
.hide {
display: none;
}
.show {
display: block;
}
.autowrap {
word-wrap: break-word;
word-break: normal;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-right {
text-align: right;
}
.over-hidden {
overflow: hidden;
}
.bold {
font-weight: 700;
}
// padding margin
@for $value from 1 through 100 {
.pd-#{$value},
.ptb-#{$value},
.pt-#{$value} {
padding-top: $value * 1px;
}
.pd-#{$value},
.ptb-#{$value},
.pb-#{$value} {
padding-bottom: $value * 1px;
}
.pd-#{$value},
.plr-#{$value},
.pl-#{$value} {
padding-left: $value * 1px;
}
.pd-#{$value},
.plr-#{$value},
.pr-#{$value} {
padding-right: $value * 1px;
}
.mg-#{$value},
.mtb-#{$value},
.mt-#{$value} {
margin-top: $value * 1px;
}
.mg-#{$value},
.mtb-#{$value},
.mb-#{$value} {
margin-bottom: $value * 1px;
}
.mg-#{$value},
.mlr-#{$value},
.ml-#{$value} {
margin-left: $value * 1px;
}
.mg-#{$value},
.mlr-#{$value},
.mr-#{$value} {
margin-right: $value * 1px;
}
}
// size
@for $value from 10 through 20 {
.size-#{$value} {
font-size: $value * 1px;
}
}
// radius
@for $value from 1 through 20 {
.radius-#{$value} {
border-radius: $value * 1px;
}
}
.w100 {
width: 100%;
}
.h100 {
height: 100%;
}
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)