84 lines
1.7 KiB
SCSS
84 lines
1.7 KiB
SCSS
//混入
|
|
|
|
@mixin flex-center {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
@mixin display-flex{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
@mixin position-center {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
@mixin flex-column {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
@mixin flex-row {
|
|
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
@mixin font-color-transprent {
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
color: transparent !important;
|
|
display: inline-block;
|
|
}
|
|
|
|
// 添加渐变边框mixin
|
|
@mixin gradient-border($start, $end) {
|
|
background:
|
|
linear-gradient(white, white) padding-box,
|
|
linear-gradient(90deg, $start, $end) border-box;
|
|
border-radius: 12px;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
@mixin gradient-circle-border($start, $end) {
|
|
background:
|
|
linear-gradient(white, white) padding-box,
|
|
linear-gradient(90deg, $start, $end) border-box;
|
|
border-radius: 50%;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
@mixin scrollBar {
|
|
|
|
//滚动条轨道
|
|
&::-webkit-scrollbar-track {
|
|
background: #d3dce6;
|
|
}
|
|
|
|
//设置滚动条的宽度和高度
|
|
&::-webkit-scrollbar {
|
|
width: 6px; //竖直滚动条宽度
|
|
height: 6px; //水平滚动条高度
|
|
}
|
|
|
|
//滚动条滑块（可以拖动的部分）
|
|
&::-webkit-scrollbar-thumb {
|
|
background: #99a9bf;
|
|
border-radius: 20px;
|
|
}
|
|
}
|
|
@mixin container-bg {
|
|
background:
|
|
linear-gradient(180deg, #e1ddfd 0%, $background-color 850px),
|
|
$background-color 850px;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 850px, 100% calc(100% - 850px);
|
|
background-position: top, bottom;
|
|
}
|