158 lines
2.9 KiB
SCSS
158 lines
2.9 KiB
SCSS
|
// 文字超出几行隐藏,最多5行
|
|||
|
// 使用超出1行隐藏,如果使用了flex,则需要给父元素设置min-width: 0;
|
|||
|
@for $i from 1 through 5 {
|
|||
|
.line-#{$i} {
|
|||
|
@if $i == 1 {
|
|||
|
overflow: hidden;
|
|||
|
white-space: nowrap;
|
|||
|
text-overflow: ellipsis;
|
|||
|
} @else {
|
|||
|
display: -webkit-box !important;
|
|||
|
overflow: hidden;
|
|||
|
text-overflow: ellipsis;
|
|||
|
word-break: break-all;
|
|||
|
-webkit-line-clamp: $i;
|
|||
|
-webkit-box-orient: vertical !important;
|
|||
|
}
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
// 生成1-50的margin和padding(正负)
|
|||
|
@for $i from 1 through 50 {
|
|||
|
.m-#{$i} {
|
|||
|
margin: #{$i}px;
|
|||
|
}
|
|||
|
.mt-#{$i} {
|
|||
|
margin-top: #{$i}px;
|
|||
|
}
|
|||
|
.mr-#{$i} {
|
|||
|
margin-right: #{$i}px;
|
|||
|
}
|
|||
|
.mb-#{$i} {
|
|||
|
margin-bottom: #{$i}px;
|
|||
|
}
|
|||
|
.ml-#{$i} {
|
|||
|
margin-left: #{$i}px;
|
|||
|
}
|
|||
|
.mtb-#{$i} {
|
|||
|
margin-top: #{$i}px;
|
|||
|
margin-bottom: #{$i}px;
|
|||
|
}
|
|||
|
.mlr-#{$i} {
|
|||
|
margin-left: #{$i}px;
|
|||
|
margin-right: #{$i}px;
|
|||
|
}
|
|||
|
.p-#{$i} {
|
|||
|
padding: #{$i}px;
|
|||
|
}
|
|||
|
.pt-#{$i} {
|
|||
|
padding-top: #{$i}px;
|
|||
|
}
|
|||
|
.pr-#{$i} {
|
|||
|
padding-right: #{$i}px;
|
|||
|
}
|
|||
|
.pb-#{$i} {
|
|||
|
padding-bottom: #{$i}px;
|
|||
|
}
|
|||
|
.pl-#{$i} {
|
|||
|
padding-left: #{$i}px;
|
|||
|
}
|
|||
|
.ptb-#{$i} {
|
|||
|
padding-top: #{$i}px;
|
|||
|
padding-bottom: #{$i}px;
|
|||
|
}
|
|||
|
.plr-#{$i} {
|
|||
|
padding-left: #{$i}px;
|
|||
|
padding-right: #{$i}px;
|
|||
|
}
|
|||
|
.m--#{$i} {
|
|||
|
margin: -#{$i}px;
|
|||
|
}
|
|||
|
.mt--#{$i} {
|
|||
|
margin-top: -#{$i}px;
|
|||
|
}
|
|||
|
.mr--#{$i} {
|
|||
|
margin-right: -#{$i}px;
|
|||
|
}
|
|||
|
.mb--#{$i} {
|
|||
|
margin-bottom: -#{$i}px;
|
|||
|
}
|
|||
|
.ml--#{$i} {
|
|||
|
margin-left: -#{$i}px;
|
|||
|
}
|
|||
|
.mtb--#{$i} {
|
|||
|
margin-top: -#{$i}px;
|
|||
|
margin-bottom: -#{$i}px;
|
|||
|
}
|
|||
|
.mlr--#{$i} {
|
|||
|
margin-left: -#{$i}px;
|
|||
|
margin-right: -#{$i}px;
|
|||
|
}
|
|||
|
.p--#{$i} {
|
|||
|
padding: -#{$i}px;
|
|||
|
}
|
|||
|
.pt--#{$i} {
|
|||
|
padding-top: -#{$i}px;
|
|||
|
}
|
|||
|
.pr--#{$i} {
|
|||
|
padding-right: -#{$i}px;
|
|||
|
}
|
|||
|
.pb--#{$i} {
|
|||
|
padding-bottom: -#{$i}px;
|
|||
|
}
|
|||
|
.pl--#{$i} {
|
|||
|
padding-left: -#{$i}px;
|
|||
|
}
|
|||
|
.ptb--#{$i} {
|
|||
|
padding-top: -#{$i}px;
|
|||
|
padding-bottom: -#{$i}px;
|
|||
|
}
|
|||
|
.plr--#{$i} {
|
|||
|
padding-left: -#{$i}px;
|
|||
|
padding-right: -#{$i}px;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
* {
|
|||
|
box-sizing: border-box;
|
|||
|
font-size: 14px;
|
|||
|
|
|||
|
&:not(dd,dl,dt) {
|
|||
|
margin: 0;
|
|||
|
padding: 0;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
h1, h2, h3, h4, h5, h6 {
|
|||
|
font-size: revert;
|
|||
|
}
|
|||
|
|
|||
|
input:-webkit-autofill,
|
|||
|
input:-webkit-autofill:hover,
|
|||
|
input:-webkit-autofill:focus,
|
|||
|
input:-webkit-autofill:active {
|
|||
|
-webkit-transition-delay: 99999s;
|
|||
|
-webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
|
|||
|
}
|
|||
|
|
|||
|
#app {
|
|||
|
background-color: #f6f8f9;
|
|||
|
min-height: 100vh;
|
|||
|
}
|
|||
|
|
|||
|
a {
|
|||
|
text-decoration: none;
|
|||
|
color: var(--el-color-primary);
|
|||
|
}
|
|||
|
|
|||
|
.viewer-zoom-in, .viewer-zoom-out, .viewer-one-to-one, .viewer-reset, .viewer-prev, .viewer-play, .viewer-next, .viewer-rotate-left, .viewer-rotate-right, .viewer-flip-horizontal, .viewer-flip-vertical, .viewer-fullscreen, .viewer-fullscreen-exit, .viewer-close {
|
|||
|
&::before {
|
|||
|
font-size: unset !important;
|
|||
|
}
|
|||
|
}
|
|||
|
|
|||
|
.iframe{
|
|||
|
position: relative;
|
|||
|
border: none;
|
|||
|
}
|