style: mp模块stylelint

This commit is contained in:
dhb52
2023-04-21 23:19:04 +08:00
parent b45b85984c
commit 4925a66cc5
13 changed files with 236 additions and 204 deletions

View File

@ -1,25 +1,27 @@
.avue-card{
&__item{
.avue-card {
&__item {
margin-bottom: 16px;
border: 1px solid #e8e8e8;
background-color: #fff;
box-sizing: border-box;
color: rgba(0,0,0,.65);
color: rgba(0, 0, 0, 0.65);
font-size: 14px;
font-variant: tabular-nums;
line-height: 1.5;
list-style: none;
font-feature-settings: "tnum";
font-feature-settings: 'tnum';
cursor: pointer;
height:200px;
&:hover{
border-color: rgba(0,0,0,.09);
box-shadow: 0 2px 8px rgba(0,0,0,.09);
height: 200px;
&:hover {
border-color: rgba(0, 0, 0, 0.09);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}
&--add{
border:1px dashed #000;
&--add {
border: 1px dashed #000;
width: 100%;
color: rgba(0,0,0,.45);
color: rgba(0, 0, 0, 0.45);
background-color: #fff;
border-color: #d9d9d9;
border-radius: 2px;
@ -27,74 +29,87 @@
align-items: center;
justify-content: center;
font-size: 16px;
i{
i {
margin-right: 10px;
}
&:hover{
&:hover {
color: #40a9ff;
background-color: #fff;
border-color: #40a9ff;
}
}
}
&__body{
&__body {
display: flex;
padding: 24px;
}
&__detail{
flex:1
&__detail {
flex: 1;
}
&__avatar{
&__avatar {
width: 48px;
height: 48px;
border-radius: 48px;
overflow: hidden;
margin-right: 12px;
img{
img {
width: 100%;
height: 100%;
}
}
&__title{
color: rgba(0,0,0,.85);
&__title {
color: rgba(0, 0, 0, 0.85);
margin-bottom: 12px;
font-size: 16px;
&:hover{
color:#1890ff;
&:hover {
color: #1890ff;
}
}
&__info{
color: rgba(0,0,0,.45);
&__info {
color: rgba(0, 0, 0, 0.45);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
height: 64px;
}
&__menu{
&__menu {
display: flex;
justify-content:space-around;
justify-content: space-around;
height: 50px;
background: #f7f9fa;
color: rgba(0,0,0,.45);
color: rgba(0, 0, 0, 0.45);
text-align: center;
line-height: 50px;
&:hover{
color:#1890ff;
&:hover {
color: #1890ff;
}
}
}
/** joolun 额外加的 */
.avue-comment__main {
flex: unset!important;
border-radius: 5px!important;
margin: 0 8px!important;
flex: unset !important;
border-radius: 5px !important;
margin: 0 8px !important;
}
.avue-comment__header {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.avue-comment__body {
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;

View File

@ -1,27 +1,33 @@
/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss */
.avue-comment{
.avue-comment {
margin-bottom: 30px;
display: flex;
align-items: flex-start;
&--reverse{
flex-direction:row-reverse;
.avue-comment__main{
&:before,&:after{
&--reverse {
flex-direction: row-reverse;
.avue-comment__main {
&:before,
&:after {
left: auto;
right: -8px;
border-width: 8px 0 8px 8px;
}
&:before{
&:before {
border-left-color: #dedede;
}
&:after{
&:after {
border-left-color: #f8f8f8;
margin-right: 1px;
margin-left: auto;
}
}
}
&__avatar{
&__avatar {
width: 48px;
height: 48px;
border-radius: 50%;
@ -29,7 +35,8 @@
box-sizing: border-box;
vertical-align: middle;
}
&__header{
&__header {
padding: 5px 15px;
background: #f8f8f8;
border-bottom: 1px solid #eee;
@ -37,18 +44,22 @@
align-items: center;
justify-content: space-between;
}
&__author{
&__author {
font-weight: 700;
font-size: 14px;
color: #999;
}
&__main{
flex:1;
&__main {
flex: 1;
margin: 0 20px;
position: relative;
border: 1px solid #dedede;
border-radius: 2px;
&:before,&:after{
&:before,
&:after {
position: absolute;
top: 10px;
left: -8px;
@ -56,32 +67,39 @@
width: 0;
height: 0;
display: block;
content: " ";
content: ' ';
border-color: transparent;
border-style: solid solid outset;
border-width: 8px 8px 8px 0;
pointer-events: none;
}
&:before {
border-right-color: #dedede;
z-index: 1;
}
&:after{
&:after {
border-right-color: #f8f8f8;
margin-left: 1px;
z-index: 2;
}
}
&__body{
&__body {
padding: 15px;
overflow: hidden;
background: #fff;
font-family: Segoe UI,Lucida Grande,Helvetica,Arial,Microsoft YaHei,FreeSans,Arimo,Droid Sans,wenquanyi micro hei,Hiragino Sans GB,Hiragino Sans GB W3,FontAwesome,sans-serif;color: #333;
font-family: Segoe UI, Lucida Grande, Helvetica, Arial, Microsoft YaHei, FreeSans, Arimo,
Droid Sans, wenquanyi micro hei, Hiragino Sans GB, Hiragino Sans GB W3, FontAwesome,
sans-serif;
color: #333;
font-size: 14px;
}
blockquote{
margin:0;
font-family: Georgia,Times New Roman,Times,Kai,Kaiti SC,KaiTi,BiauKai,FontAwesome,serif;
blockquote {
margin: 0;
font-family: Georgia, Times New Roman, Times, Kai, Kaiti SC, KaiTi, BiauKai, FontAwesome, serif;
padding: 1px 0 1px 15px;
border-left: 4px solid #ddd;
}