From 4925a66cc5becb1877ee46a9a64e4913513feeed Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Fri, 21 Apr 2023 23:19:04 +0800
Subject: [PATCH] =?UTF-8?q?style:=20mp=E6=A8=A1=E5=9D=97stylelint?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/mp/account/index.vue | 2 +-
.../mp/components/wx-material-select/main.vue | 45 +++----
src/views/mp/components/wx-msg/card.scss | 79 +++++++-----
src/views/mp/components/wx-msg/comment.scss | 58 ++++++---
src/views/mp/components/wx-music/main.vue | 2 +-
.../wx-reply/components/TabImage.vue | 20 +--
.../wx-reply/components/TabNews.vue | 2 +-
.../wx-reply/components/TabVoice.vue | 20 +--
src/views/mp/components/wx-reply/main.vue | 32 ++---
.../mp/components/wx-voice-play/main.vue | 10 +-
src/views/mp/freePublish/index.vue | 121 +++++++++---------
.../mp/material/components/ImageTable.vue | 48 +++----
src/views/mp/menu/index.vue | 1 -
13 files changed, 236 insertions(+), 204 deletions(-)
diff --git a/src/views/mp/account/index.vue b/src/views/mp/account/index.vue
index d890f44f..f993b8e3 100644
--- a/src/views/mp/account/index.vue
+++ b/src/views/mp/account/index.vue
@@ -46,7 +46,7 @@
v-if="scope.row.qrCodeUrl"
:src="scope.row.qrCodeUrl"
alt="二维码"
- style="height: 100px; display: inline-block"
+ style="display: inline-block; height: 100px"
/>
<el-button
link
diff --git a/src/views/mp/components/wx-material-select/main.vue b/src/views/mp/components/wx-material-select/main.vue
index e711c022..8f2792dd 100644
--- a/src/views/mp/components/wx-material-select/main.vue
+++ b/src/views/mp/components/wx-material-select/main.vue
@@ -227,29 +227,6 @@ onMounted(async () => {
})
</script>
<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) {
.waterfall {
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>
diff --git a/src/views/mp/components/wx-msg/card.scss b/src/views/mp/components/wx-msg/card.scss
index 67ac9219..7fbbe802 100644
--- a/src/views/mp/components/wx-msg/card.scss
+++ b/src/views/mp/components/wx-msg/card.scss
@@ -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;
diff --git a/src/views/mp/components/wx-msg/comment.scss b/src/views/mp/components/wx-msg/comment.scss
index 3f1341b2..aaeaccaf 100644
--- a/src/views/mp/components/wx-msg/comment.scss
+++ b/src/views/mp/components/wx-msg/comment.scss
@@ -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;
}
diff --git a/src/views/mp/components/wx-music/main.vue b/src/views/mp/components/wx-music/main.vue
index 52555f15..70f4c58b 100644
--- a/src/views/mp/components/wx-music/main.vue
+++ b/src/views/mp/components/wx-music/main.vue
@@ -56,5 +56,5 @@ defineExpose({
<style lang="scss" scoped>
/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scc */
-@import '../wx-msg/card.scss';
+@import url('../wx-msg/card.scss');
</style>
diff --git a/src/views/mp/components/wx-reply/components/TabImage.vue b/src/views/mp/components/wx-reply/components/TabImage.vue
index 1a82c3aa..71950e04 100644
--- a/src/views/mp/components/wx-reply/components/TabImage.vue
+++ b/src/views/mp/components/wx-reply/components/TabImage.vue
@@ -123,7 +123,7 @@ const selectMaterial = (item) => {
.select-item {
width: 280px;
padding: 10px;
- margin: 0 auto 10px auto;
+ margin: 0 auto 10px;
border: 1px solid #eaeaea;
.material-img {
@@ -131,11 +131,11 @@ const selectMaterial = (item) => {
}
.item-name {
- font-size: 12px;
overflow: hidden;
+ font-size: 12px;
+ text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
- text-align: center;
.item-infos {
width: 30%;
@@ -149,18 +149,18 @@ const selectMaterial = (item) => {
}
.col-select {
- border: 1px solid rgb(234, 234, 234);
- padding: 50px 0px;
- height: 160px;
width: 49.5%;
+ height: 160px;
+ padding: 50px 0;
+ border: 1px solid rgb(234 234 234);
}
.col-add {
- border: 1px solid rgb(234, 234, 234);
- padding: 50px 0px;
- height: 160px;
- width: 49.5%;
float: right;
+ width: 49.5%;
+ height: 160px;
+ padding: 50px 0;
+ border: 1px solid rgb(234 234 234);
.el-upload__tip {
line-height: 18px;
diff --git a/src/views/mp/components/wx-reply/components/TabNews.vue b/src/views/mp/components/wx-reply/components/TabNews.vue
index 88a82a53..ecb5026d 100644
--- a/src/views/mp/components/wx-reply/components/TabNews.vue
+++ b/src/views/mp/components/wx-reply/components/TabNews.vue
@@ -65,7 +65,7 @@ const onDelete = () => {
.select-item {
width: 280px;
padding: 10px;
- margin: 0 auto 10px auto;
+ margin: 0 auto 10px;
border: 1px solid #eaeaea;
.ope-row {
diff --git a/src/views/mp/components/wx-reply/components/TabVoice.vue b/src/views/mp/components/wx-reply/components/TabVoice.vue
index c4868cf8..5c9f64a7 100644
--- a/src/views/mp/components/wx-reply/components/TabVoice.vue
+++ b/src/views/mp/components/wx-reply/components/TabVoice.vue
@@ -120,15 +120,15 @@ const selectMaterial = (item: Reply) => {
<style lang="scss" scoped>
.select-item2 {
padding: 10px;
- margin: 0 auto 10px auto;
+ margin: 0 auto 10px;
border: 1px solid #eaeaea;
.item-name {
- font-size: 12px;
overflow: hidden;
+ font-size: 12px;
+ text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
- text-align: center;
.ope-row {
width: 100%;
@@ -138,18 +138,18 @@ const selectMaterial = (item: Reply) => {
}
.col-select {
- border: 1px solid rgb(234, 234, 234);
- padding: 50px 0px;
- height: 160px;
width: 49.5%;
+ height: 160px;
+ padding: 50px 0;
+ border: 1px solid rgb(234 234 234);
}
.col-add {
- border: 1px solid rgb(234, 234, 234);
- padding: 50px 0px;
- height: 160px;
- width: 49.5%;
float: right;
+ width: 49.5%;
+ height: 160px;
+ padding: 50px 0;
+ border: 1px solid rgb(234 234 234);
.el-upload__tip {
line-height: 18px;
diff --git a/src/views/mp/components/wx-reply/main.vue b/src/views/mp/components/wx-reply/main.vue
index 32a31222..1ef9dde0 100644
--- a/src/views/mp/components/wx-reply/main.vue
+++ b/src/views/mp/components/wx-reply/main.vue
@@ -128,13 +128,13 @@ defineExpose({
.select-item {
width: 280px;
padding: 10px;
- margin: 0 auto 10px auto;
+ margin: 0 auto 10px;
border: 1px solid #eaeaea;
}
.select-item2 {
padding: 10px;
- margin: 0 auto 10px auto;
+ margin: 0 auto 10px;
border: 1px solid #eaeaea;
}
@@ -148,11 +148,11 @@ defineExpose({
}
.item-name {
- font-size: 12px;
overflow: hidden;
+ font-size: 12px;
+ text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
- text-align: center;
}
.el-form-item__content {
@@ -160,34 +160,34 @@ defineExpose({
}
.col-select {
- border: 1px solid rgb(234, 234, 234);
- padding: 50px 0px;
- height: 160px;
width: 49.5%;
+ height: 160px;
+ padding: 50px 0;
+ border: 1px solid rgb(234 234 234);
}
.col-select2 {
- border: 1px solid rgb(234, 234, 234);
- padding: 50px 0px;
height: 160px;
+ padding: 50px 0;
+ border: 1px solid rgb(234 234 234);
}
.col-add {
- border: 1px solid rgb(234, 234, 234);
- padding: 50px 0px;
- height: 160px;
- width: 49.5%;
float: right;
+ width: 49.5%;
+ height: 160px;
+ padding: 50px 0;
+ border: 1px solid rgb(234 234 234);
}
.avatar-uploader-icon {
- border: 1px solid #d9d9d9;
- font-size: 28px;
- color: #8c939d;
width: 100px !important;
height: 100px !important;
+ font-size: 28px;
line-height: 100px !important;
+ color: #8c939d;
text-align: center;
+ border: 1px solid #d9d9d9;
}
.material-img {
diff --git a/src/views/mp/components/wx-voice-play/main.vue b/src/views/mp/components/wx-voice-play/main.vue
index 169593d8..3cfec418 100644
--- a/src/views/mp/components/wx-voice-play/main.vue
+++ b/src/views/mp/components/wx-voice-play/main.vue
@@ -86,18 +86,18 @@ const amrStop = () => {
</script>
<style lang="scss" scoped>
.wx-voice-div {
+ display: flex;
+ width: 120px;
+ height: 50px;
padding: 5px;
background-color: #eaeaea;
border-radius: 10px;
- width: 120px;
- height: 50px;
-
- display: flex;
justify-content: center;
align-items: center;
}
+
.amr-duration {
- font-size: 11px;
margin-left: 5px;
+ font-size: 11px;
}
</style>
diff --git a/src/views/mp/freePublish/index.vue b/src/views/mp/freePublish/index.vue
index 2fda5100..08a202c2 100644
--- a/src/views/mp/freePublish/index.vue
+++ b/src/views/mp/freePublish/index.vue
@@ -102,19 +102,45 @@ const handleDelete = async (item: any) => {
}
</script>
<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 {
+ padding-top: 5px;
margin-top: 5px;
text-align: center;
border-top: 1px solid #eaeaea;
- padding-top: 5px;
}
.item-name {
- font-size: 12px;
overflow: hidden;
+ font-size: 12px;
+ text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
- text-align: center;
}
.el-upload__tip {
@@ -125,8 +151,8 @@ const handleDelete = async (item: any) => {
.left {
display: inline-block;
width: 35%;
- vertical-align: top;
margin-top: 200px;
+ vertical-align: top;
}
.right {
@@ -136,16 +162,16 @@ const handleDelete = async (item: any) => {
}
.avatar-uploader {
- width: 20%;
display: inline-block;
+ width: 20%;
}
.avatar-uploader .el-upload {
- border-radius: 6px;
- cursor: pointer;
position: relative;
overflow: hidden;
text-align: unset !important;
+ cursor: pointer;
+ border-radius: 6px;
}
.avatar-uploader .el-upload:hover {
@@ -153,13 +179,13 @@ const handleDelete = async (item: any) => {
}
.avatar-uploader-icon {
- border: 1px solid #d9d9d9;
- font-size: 28px;
- color: #8c939d;
width: 120px;
height: 120px;
+ font-size: 28px;
line-height: 120px;
+ color: #8c939d;
text-align: center;
+ border: 1px solid #d9d9d9;
}
.avatar {
@@ -173,13 +199,14 @@ const handleDelete = async (item: any) => {
}
.digest {
- width: 60%;
display: inline-block;
+ width: 60%;
vertical-align: top;
}
-/*新增图文*/
-/*瀑布流样式*/
+/* 新增图文 */
+
+/* 瀑布流样式 */
.waterfall {
width: 100%;
column-gap: 10px;
@@ -198,68 +225,44 @@ p {
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 {
- background-color: #ffffff;
width: 100%;
- margin: auto;
height: 120px;
+ margin: auto;
+ background-color: #fff;
}
.news-content {
- background-color: #acadae;
+ position: relative;
width: 100%;
height: 120px;
- position: relative;
+ background-color: #acadae;
}
.news-content-title {
- display: inline-block;
- font-size: 15px;
- color: #ffffff;
position: absolute;
- left: 0px;
- bottom: 0px;
- background-color: black;
+ bottom: 0;
+ left: 0;
+ display: inline-block;
width: 98%;
+ height: 25px;
padding: 1%;
- opacity: 0.65;
overflow: hidden;
+ font-size: 15px;
+ color: #fff;
text-overflow: ellipsis;
white-space: nowrap;
- height: 25px;
+ background-color: black;
+ opacity: 0.65;
}
.news-main-item {
- background-color: #ffffff;
- padding: 5px 0px;
- border-top: 1px solid #eaeaea;
width: 100%;
+ padding: 5px 0;
margin: auto;
+ background-color: #fff;
+ border-top: 1px solid #eaeaea;
}
.news-content-item {
@@ -269,8 +272,8 @@ p {
.news-content-item-title {
display: inline-block;
- font-size: 12px;
width: 70%;
+ font-size: 12px;
}
.news-content-item-img {
@@ -289,9 +292,9 @@ p {
.news-main-plus {
width: 280px;
- text-align: center;
- margin: auto;
height: 50px;
+ margin: auto;
+ text-align: center;
}
.icon-plus {
@@ -302,15 +305,15 @@ p {
.select-item {
width: 60%;
padding: 10px;
- margin: 0 auto 10px auto;
+ margin: 0 auto 10px;
border: 1px solid #eaeaea;
}
.father .child {
- display: none;
- text-align: center;
position: relative;
bottom: 25px;
+ display: none;
+ text-align: center;
}
.father:hover .child {
diff --git a/src/views/mp/material/components/ImageTable.vue b/src/views/mp/material/components/ImageTable.vue
index 118fc7bd..cecbb6c2 100644
--- a/src/views/mp/material/components/ImageTable.vue
+++ b/src/views/mp/material/components/ImageTable.vue
@@ -31,30 +31,6 @@ const emit = defineEmits<{
</script>
<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) {
.waterfall {
column-count: 3;
@@ -80,4 +56,28 @@ p {
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>
diff --git a/src/views/mp/menu/index.vue b/src/views/mp/menu/index.vue
index c8ed0835..442e33b5 100644
--- a/src/views/mp/menu/index.vue
+++ b/src/views/mp/menu/index.vue
@@ -367,7 +367,6 @@ div {
margin-left: 20px;
background-color: #e8e7e7;
box-sizing: border-box;
- box-sizing: border-box;
}
}
</style>