style: mp模块stylelint

(cherry picked from commit 4925a66cc5)
This commit is contained in:
dhb52 2023-04-21 23:19:04 +08:00 committed by shizhong
parent 132e044c48
commit 94ab90d8ab
13 changed files with 236 additions and 204 deletions

View File

@ -44,7 +44,7 @@
v-if="scope.row.qrCodeUrl" v-if="scope.row.qrCodeUrl"
:src="scope.row.qrCodeUrl" :src="scope.row.qrCodeUrl"
alt="二维码" alt="二维码"
style="height: 100px; display: inline-block" style="display: inline-block; height: 100px"
/> />
<el-button <el-button
link link

View File

@ -227,29 +227,6 @@ onMounted(async () => {
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/*瀑布流样式*/
.waterfall {
width: 100%;
column-gap: 10px;
column-count: 5;
margin: 0 auto;
}
.waterfall-item {
padding: 10px;
margin-bottom: 10px;
break-inside: avoid;
border: 1px solid #eaeaea;
}
.material-img {
width: 100%;
}
p {
line-height: 30px;
}
@media (min-width: 992px) and (max-width: 1300px) { @media (min-width: 992px) and (max-width: 1300px) {
.waterfall { .waterfall {
column-count: 3; column-count: 3;
@ -276,5 +253,25 @@ p {
} }
} }
/*瀑布流样式*/ .waterfall {
width: 100%;
column-gap: 10px;
column-count: 5;
margin: 0 auto;
}
.waterfall-item {
padding: 10px;
margin-bottom: 10px;
break-inside: avoid;
border: 1px solid #eaeaea;
}
.material-img {
width: 100%;
}
p {
line-height: 30px;
}
</style> </style>

View File

@ -1,25 +1,27 @@
.avue-card{ .avue-card {
&__item{ &__item {
margin-bottom: 16px; margin-bottom: 16px;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
background-color: #fff; background-color: #fff;
box-sizing: border-box; box-sizing: border-box;
color: rgba(0,0,0,.65); color: rgba(0, 0, 0, 0.65);
font-size: 14px; font-size: 14px;
font-variant: tabular-nums; font-variant: tabular-nums;
line-height: 1.5; line-height: 1.5;
list-style: none; list-style: none;
font-feature-settings: "tnum"; font-feature-settings: 'tnum';
cursor: pointer; cursor: pointer;
height:200px; height: 200px;
&:hover{
border-color: rgba(0,0,0,.09); &:hover {
box-shadow: 0 2px 8px rgba(0,0,0,.09); 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%; width: 100%;
color: rgba(0,0,0,.45); color: rgba(0, 0, 0, 0.45);
background-color: #fff; background-color: #fff;
border-color: #d9d9d9; border-color: #d9d9d9;
border-radius: 2px; border-radius: 2px;
@ -27,74 +29,87 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 16px; font-size: 16px;
i{
i {
margin-right: 10px; margin-right: 10px;
} }
&:hover{
&:hover {
color: #40a9ff; color: #40a9ff;
background-color: #fff; background-color: #fff;
border-color: #40a9ff; border-color: #40a9ff;
} }
} }
} }
&__body{
&__body {
display: flex; display: flex;
padding: 24px; padding: 24px;
} }
&__detail{
flex:1 &__detail {
flex: 1;
} }
&__avatar{
&__avatar {
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 48px; border-radius: 48px;
overflow: hidden; overflow: hidden;
margin-right: 12px; margin-right: 12px;
img{
img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
&__title{
color: rgba(0,0,0,.85); &__title {
color: rgba(0, 0, 0, 0.85);
margin-bottom: 12px; margin-bottom: 12px;
font-size: 16px; 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; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 3; -webkit-line-clamp: 3;
overflow: hidden; overflow: hidden;
height: 64px; height: 64px;
} }
&__menu{
&__menu {
display: flex; display: flex;
justify-content:space-around; justify-content: space-around;
height: 50px; height: 50px;
background: #f7f9fa; background: #f7f9fa;
color: rgba(0,0,0,.45); color: rgba(0, 0, 0, 0.45);
text-align: center; text-align: center;
line-height: 50px; line-height: 50px;
&:hover{
color:#1890ff; &:hover {
color: #1890ff;
} }
} }
} }
/** joolun 额外加的 */ /** joolun 额外加的 */
.avue-comment__main { .avue-comment__main {
flex: unset!important; flex: unset !important;
border-radius: 5px!important; border-radius: 5px !important;
margin: 0 8px!important; margin: 0 8px !important;
} }
.avue-comment__header { .avue-comment__header {
border-top-left-radius: 5px; border-top-left-radius: 5px;
border-top-right-radius: 5px; border-top-right-radius: 5px;
} }
.avue-comment__body { .avue-comment__body {
border-bottom-right-radius: 5px; border-bottom-right-radius: 5px;
border-bottom-left-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 */ /* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss */
.avue-comment{ .avue-comment {
margin-bottom: 30px; margin-bottom: 30px;
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
&--reverse{
flex-direction:row-reverse; &--reverse {
.avue-comment__main{ flex-direction: row-reverse;
&:before,&:after{
.avue-comment__main {
&:before,
&:after {
left: auto; left: auto;
right: -8px; right: -8px;
border-width: 8px 0 8px 8px; border-width: 8px 0 8px 8px;
} }
&:before{
&:before {
border-left-color: #dedede; border-left-color: #dedede;
} }
&:after{
&:after {
border-left-color: #f8f8f8; border-left-color: #f8f8f8;
margin-right: 1px; margin-right: 1px;
margin-left: auto; margin-left: auto;
} }
} }
} }
&__avatar{
&__avatar {
width: 48px; width: 48px;
height: 48px; height: 48px;
border-radius: 50%; border-radius: 50%;
@ -29,7 +35,8 @@
box-sizing: border-box; box-sizing: border-box;
vertical-align: middle; vertical-align: middle;
} }
&__header{
&__header {
padding: 5px 15px; padding: 5px 15px;
background: #f8f8f8; background: #f8f8f8;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
@ -37,18 +44,22 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
&__author{
&__author {
font-weight: 700; font-weight: 700;
font-size: 14px; font-size: 14px;
color: #999; color: #999;
} }
&__main{
flex:1; &__main {
flex: 1;
margin: 0 20px; margin: 0 20px;
position: relative; position: relative;
border: 1px solid #dedede; border: 1px solid #dedede;
border-radius: 2px; border-radius: 2px;
&:before,&:after{
&:before,
&:after {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: -8px; left: -8px;
@ -56,32 +67,39 @@
width: 0; width: 0;
height: 0; height: 0;
display: block; display: block;
content: " "; content: ' ';
border-color: transparent; border-color: transparent;
border-style: solid solid outset; border-style: solid solid outset;
border-width: 8px 8px 8px 0; border-width: 8px 8px 8px 0;
pointer-events: none; pointer-events: none;
} }
&:before { &:before {
border-right-color: #dedede; border-right-color: #dedede;
z-index: 1; z-index: 1;
} }
&:after{
&:after {
border-right-color: #f8f8f8; border-right-color: #f8f8f8;
margin-left: 1px; margin-left: 1px;
z-index: 2; z-index: 2;
} }
} }
&__body{
&__body {
padding: 15px; padding: 15px;
overflow: hidden; overflow: hidden;
background: #fff; 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; font-size: 14px;
} }
blockquote{
margin:0; blockquote {
font-family: Georgia,Times New Roman,Times,Kai,Kaiti SC,KaiTi,BiauKai,FontAwesome,serif; margin: 0;
font-family: Georgia, Times New Roman, Times, Kai, Kaiti SC, KaiTi, BiauKai, FontAwesome, serif;
padding: 1px 0 1px 15px; padding: 1px 0 1px 15px;
border-left: 4px solid #ddd; border-left: 4px solid #ddd;
} }

View File

@ -56,5 +56,5 @@ defineExpose({
<style lang="scss" scoped> <style lang="scss" scoped>
/* 因为 joolun 实现依赖 avue 组件,该页面使用了 card.scc */ /* 因为 joolun 实现依赖 avue 组件,该页面使用了 card.scc */
@import '../wx-msg/card.scss'; @import url('../wx-msg/card.scss');
</style> </style>

View File

@ -123,7 +123,7 @@ const selectMaterial = (item) => {
.select-item { .select-item {
width: 280px; width: 280px;
padding: 10px; padding: 10px;
margin: 0 auto 10px auto; margin: 0 auto 10px;
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
.material-img { .material-img {
@ -131,11 +131,11 @@ const selectMaterial = (item) => {
} }
.item-name { .item-name {
font-size: 12px;
overflow: hidden; overflow: hidden;
font-size: 12px;
text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-align: center;
.item-infos { .item-infos {
width: 30%; width: 30%;
@ -149,18 +149,18 @@ const selectMaterial = (item) => {
} }
.col-select { .col-select {
border: 1px solid rgb(234, 234, 234);
padding: 50px 0px;
height: 160px;
width: 49.5%; width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
} }
.col-add { .col-add {
border: 1px solid rgb(234, 234, 234);
padding: 50px 0px;
height: 160px;
width: 49.5%;
float: right; float: right;
width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
.el-upload__tip { .el-upload__tip {
line-height: 18px; line-height: 18px;

View File

@ -65,7 +65,7 @@ const onDelete = () => {
.select-item { .select-item {
width: 280px; width: 280px;
padding: 10px; padding: 10px;
margin: 0 auto 10px auto; margin: 0 auto 10px;
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
.ope-row { .ope-row {

View File

@ -120,15 +120,15 @@ const selectMaterial = (item: Reply) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.select-item2 { .select-item2 {
padding: 10px; padding: 10px;
margin: 0 auto 10px auto; margin: 0 auto 10px;
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
.item-name { .item-name {
font-size: 12px;
overflow: hidden; overflow: hidden;
font-size: 12px;
text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-align: center;
.ope-row { .ope-row {
width: 100%; width: 100%;
@ -138,18 +138,18 @@ const selectMaterial = (item: Reply) => {
} }
.col-select { .col-select {
border: 1px solid rgb(234, 234, 234);
padding: 50px 0px;
height: 160px;
width: 49.5%; width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
} }
.col-add { .col-add {
border: 1px solid rgb(234, 234, 234);
padding: 50px 0px;
height: 160px;
width: 49.5%;
float: right; float: right;
width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
.el-upload__tip { .el-upload__tip {
line-height: 18px; line-height: 18px;

View File

@ -128,13 +128,13 @@ defineExpose({
.select-item { .select-item {
width: 280px; width: 280px;
padding: 10px; padding: 10px;
margin: 0 auto 10px auto; margin: 0 auto 10px;
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
} }
.select-item2 { .select-item2 {
padding: 10px; padding: 10px;
margin: 0 auto 10px auto; margin: 0 auto 10px;
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
} }
@ -148,11 +148,11 @@ defineExpose({
} }
.item-name { .item-name {
font-size: 12px;
overflow: hidden; overflow: hidden;
font-size: 12px;
text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-align: center;
} }
.el-form-item__content { .el-form-item__content {
@ -160,34 +160,34 @@ defineExpose({
} }
.col-select { .col-select {
border: 1px solid rgb(234, 234, 234);
padding: 50px 0px;
height: 160px;
width: 49.5%; width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
} }
.col-select2 { .col-select2 {
border: 1px solid rgb(234, 234, 234);
padding: 50px 0px;
height: 160px; height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
} }
.col-add { .col-add {
border: 1px solid rgb(234, 234, 234);
padding: 50px 0px;
height: 160px;
width: 49.5%;
float: right; float: right;
width: 49.5%;
height: 160px;
padding: 50px 0;
border: 1px solid rgb(234 234 234);
} }
.avatar-uploader-icon { .avatar-uploader-icon {
border: 1px solid #d9d9d9;
font-size: 28px;
color: #8c939d;
width: 100px !important; width: 100px !important;
height: 100px !important; height: 100px !important;
font-size: 28px;
line-height: 100px !important; line-height: 100px !important;
color: #8c939d;
text-align: center; text-align: center;
border: 1px solid #d9d9d9;
} }
.material-img { .material-img {

View File

@ -86,18 +86,18 @@ const amrStop = () => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.wx-voice-div { .wx-voice-div {
display: flex;
width: 120px;
height: 50px;
padding: 5px; padding: 5px;
background-color: #eaeaea; background-color: #eaeaea;
border-radius: 10px; border-radius: 10px;
width: 120px;
height: 50px;
display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.amr-duration { .amr-duration {
font-size: 11px;
margin-left: 5px; margin-left: 5px;
font-size: 11px;
} }
</style> </style>

View File

@ -102,19 +102,45 @@ const handleDelete = async (item: any) => {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@media (min-width: 992px) and (max-width: 1300px) {
.waterfall {
column-count: 3;
}
p {
color: red;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.waterfall {
column-count: 2;
}
p {
color: orange;
}
}
@media (max-width: 767px) {
.waterfall {
column-count: 1;
}
}
.ope-row { .ope-row {
padding-top: 5px;
margin-top: 5px; margin-top: 5px;
text-align: center; text-align: center;
border-top: 1px solid #eaeaea; border-top: 1px solid #eaeaea;
padding-top: 5px;
} }
.item-name { .item-name {
font-size: 12px;
overflow: hidden; overflow: hidden;
font-size: 12px;
text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
text-align: center;
} }
.el-upload__tip { .el-upload__tip {
@ -125,8 +151,8 @@ const handleDelete = async (item: any) => {
.left { .left {
display: inline-block; display: inline-block;
width: 35%; width: 35%;
vertical-align: top;
margin-top: 200px; margin-top: 200px;
vertical-align: top;
} }
.right { .right {
@ -136,16 +162,16 @@ const handleDelete = async (item: any) => {
} }
.avatar-uploader { .avatar-uploader {
width: 20%;
display: inline-block; display: inline-block;
width: 20%;
} }
.avatar-uploader .el-upload { .avatar-uploader .el-upload {
border-radius: 6px;
cursor: pointer;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
text-align: unset !important; text-align: unset !important;
cursor: pointer;
border-radius: 6px;
} }
.avatar-uploader .el-upload:hover { .avatar-uploader .el-upload:hover {
@ -153,13 +179,13 @@ const handleDelete = async (item: any) => {
} }
.avatar-uploader-icon { .avatar-uploader-icon {
border: 1px solid #d9d9d9;
font-size: 28px;
color: #8c939d;
width: 120px; width: 120px;
height: 120px; height: 120px;
font-size: 28px;
line-height: 120px; line-height: 120px;
color: #8c939d;
text-align: center; text-align: center;
border: 1px solid #d9d9d9;
} }
.avatar { .avatar {
@ -173,13 +199,14 @@ const handleDelete = async (item: any) => {
} }
.digest { .digest {
width: 60%;
display: inline-block; display: inline-block;
width: 60%;
vertical-align: top; vertical-align: top;
} }
/*新增图文*/ /* 新增图文 */
/*瀑布流样式*/
/* 瀑布流样式 */
.waterfall { .waterfall {
width: 100%; width: 100%;
column-gap: 10px; column-gap: 10px;
@ -198,68 +225,44 @@ p {
line-height: 30px; line-height: 30px;
} }
@media (min-width: 992px) and (max-width: 1300px) { /* 瀑布流样式 */
.waterfall {
column-count: 3;
}
p {
color: red;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.waterfall {
column-count: 2;
}
p {
color: orange;
}
}
@media (max-width: 767px) {
.waterfall {
column-count: 1;
}
}
/*瀑布流样式*/
.news-main { .news-main {
background-color: #ffffff;
width: 100%; width: 100%;
margin: auto;
height: 120px; height: 120px;
margin: auto;
background-color: #fff;
} }
.news-content { .news-content {
background-color: #acadae; position: relative;
width: 100%; width: 100%;
height: 120px; height: 120px;
position: relative; background-color: #acadae;
} }
.news-content-title { .news-content-title {
display: inline-block;
font-size: 15px;
color: #ffffff;
position: absolute; position: absolute;
left: 0px; bottom: 0;
bottom: 0px; left: 0;
background-color: black; display: inline-block;
width: 98%; width: 98%;
height: 25px;
padding: 1%; padding: 1%;
opacity: 0.65;
overflow: hidden; overflow: hidden;
font-size: 15px;
color: #fff;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
height: 25px; background-color: black;
opacity: 0.65;
} }
.news-main-item { .news-main-item {
background-color: #ffffff;
padding: 5px 0px;
border-top: 1px solid #eaeaea;
width: 100%; width: 100%;
padding: 5px 0;
margin: auto; margin: auto;
background-color: #fff;
border-top: 1px solid #eaeaea;
} }
.news-content-item { .news-content-item {
@ -269,8 +272,8 @@ p {
.news-content-item-title { .news-content-item-title {
display: inline-block; display: inline-block;
font-size: 12px;
width: 70%; width: 70%;
font-size: 12px;
} }
.news-content-item-img { .news-content-item-img {
@ -289,9 +292,9 @@ p {
.news-main-plus { .news-main-plus {
width: 280px; width: 280px;
text-align: center;
margin: auto;
height: 50px; height: 50px;
margin: auto;
text-align: center;
} }
.icon-plus { .icon-plus {
@ -302,15 +305,15 @@ p {
.select-item { .select-item {
width: 60%; width: 60%;
padding: 10px; padding: 10px;
margin: 0 auto 10px auto; margin: 0 auto 10px;
border: 1px solid #eaeaea; border: 1px solid #eaeaea;
} }
.father .child { .father .child {
display: none;
text-align: center;
position: relative; position: relative;
bottom: 25px; bottom: 25px;
display: none;
text-align: center;
} }
.father:hover .child { .father:hover .child {

View File

@ -31,30 +31,6 @@ const emit = defineEmits<{
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
/*瀑布流样式*/
.waterfall {
width: 100%;
column-gap: 10px;
column-count: 5;
margin-top: 10px;
/* 芋道源码:增加 10px避免顶着上面 */
}
.waterfall-item {
padding: 10px;
margin-bottom: 10px;
break-inside: avoid;
border: 1px solid #eaeaea;
}
.material-img {
width: 100%;
}
p {
line-height: 30px;
}
@media (min-width: 992px) and (max-width: 1300px) { @media (min-width: 992px) and (max-width: 1300px) {
.waterfall { .waterfall {
column-count: 3; column-count: 3;
@ -80,4 +56,28 @@ p {
column-count: 1; column-count: 1;
} }
} }
.waterfall {
width: 100%;
column-gap: 10px;
column-count: 5;
margin-top: 10px;
/* 芋道源码:增加 10px避免顶着上面 */
}
.waterfall-item {
padding: 10px;
margin-bottom: 10px;
break-inside: avoid;
border: 1px solid #eaeaea;
}
.material-img {
width: 100%;
}
p {
line-height: 30px;
}
</style> </style>

View File

@ -367,7 +367,6 @@ div {
margin-left: 20px; margin-left: 20px;
background-color: #e8e7e7; background-color: #e8e7e7;
box-sizing: border-box; box-sizing: border-box;
box-sizing: border-box;
} }
} }
</style> </style>