培训文档,文档资料代码优化

This commit is contained in:
2023-08-30 13:38:24 +08:00
parent adcb7151e9
commit 41684dd18e
5 changed files with 111 additions and 175 deletions

62
src/styles/docment.scss Normal file
View File

@ -0,0 +1,62 @@
@import "@/styles/mixin.scss";
.wrap{
@include wh(100%,100%);
background-color: #F4F5F7;
overflow-y: auto;
}
.navBar{
margin-bottom: 46px;
}
.rightWrap {
@include flexCenter;
.img2 {
@include wh(17px, 17px);
}
}
.contentWrap{
@include sizingPadding(0,8px);
width: 100%;
margin-top: 20px;
.itemWrap{
margin-bottom: 16px;
@include wh(100%, 300px);
background: #FFFFFF;
box-shadow: 0px 2px 10px 0px rgba(216, 216, 216, 0.5);
@include sizingPadRadius(6px ,0,3px);
@include flexAround;
@include fontWeightSize(400, 12px);
.flexBetween{
@include flexColBet;
}
.common{
margin: 0 15px ;
}
.imgWrap{
@include wh(100%,200px);
position: relative;
img{
@include wh(100%,200px);
}
.name{
position: absolute;
left: 30px;
bottom: 30px;
@include fontWeightSize(bold,14px);
color: #FFFFFF;
}
}
.left{
color: red;
@include fontWeightSize(bold,15px);
}
}
}
.empty{
@include flexTwoCenter;
height:calc(100% - 86px);
background-color: #FAFAFA;
img{
width: 100%;
}
}

View File

@ -31,6 +31,10 @@
@include flexColumn;
justify-content: space-between;
}
@mixin flexAround(){
@include flexColumn;
justify-content: space-around;
}
@mixin flexColBet(){
display: flex;
justify-content: space-between;
@ -42,4 +46,25 @@
@mixin flexBetCen{
@include flexColBet;
align-items: center;
}
@mixin flexTwoCenter(){
@include flexCenter;
justify-content: center;
}
@mixin colorOpa($col,$alpha){
color: $col;
opacity: $alpha;
}
@mixin radiusSizing($rad){
border-radius: $rad;
box-sizing: border-box;
}
@mixin sizingPadding($tb,$lr){
box-sizing: border-box;
padding: $tb $lr;
}
@mixin sizingPadRadius( $tb,$lr,$rad){
box-sizing: border-box;
padding: $tb $lr;
border-radius: $rad;
}