diff --git a/src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl b/src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl index 05e331f0..6af6aa7a 100644 --- a/src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl +++ b/src/main/webapp/WEB-INF/manager/mweixin/metarial/form.ftl @@ -24,6 +24,7 @@

+
diff --git a/src/main/webapp/static/mweixin/article.less b/src/main/webapp/static/mweixin/article.less index e5cf45e6..80842cd2 100644 --- a/src/main/webapp/static/mweixin/article.less +++ b/src/main/webapp/static/mweixin/article.less @@ -42,6 +42,7 @@ .ms-flex(); padding: 10px 0; border-bottom: 1px solid @borderColor; + position: relative; p { margin: 0 10px 0 0; .ms-flex(); @@ -55,9 +56,34 @@ img { .ms-width-height(50px); } + // 遮罩 + .ms-article-item-mask{ + visibility: hidden; + background: rgb(126, 126, 126); + opacity: .8; + .ms-width-height(100%,50%); + position: absolute; + bottom:0; + .ms-flex(flex-end); + align-items: center; + >i{ + .ms-font(14px,#fff); + margin:0 10px 0 auto; + display: none; + + } + } &:hover { cursor: pointer; } + &:hover{ + .ms-article-item-mask{ + visibility: visible; + >i{ + display: block; + } + } + } } // 尾部 .ms-article-footer { background: #fff; diff --git a/src/main/webapp/static/mweixin/css/article.css b/src/main/webapp/static/mweixin/css/article.css index cd61c2c1..e781731c 100644 --- a/src/main/webapp/static/mweixin/css/article.css +++ b/src/main/webapp/static/mweixin/css/article.css @@ -173,6 +173,7 @@ textarea::-webkit-input-placeholder { justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #e6e6e6; + position: relative; } .ms-article .el-container .el-aside .ms-article-item p { margin: 0 10px 0 0; @@ -193,9 +194,34 @@ textarea::-webkit-input-placeholder { width: 50px; height: 50px; } +.ms-article .el-container .el-aside .ms-article-item .ms-article-item-mask { + visibility: hidden; + background: #7e7e7e; + opacity: .8; + width: 100%; + height: 50%; + position: absolute; + bottom: 0; + display: flex; + justify-content: flex-end; + align-items: center; +} +.ms-article .el-container .el-aside .ms-article-item .ms-article-item-mask > i { + font-weight: initial; + font-size: 14px; + color: #fff; + margin: 0 10px 0 auto; + display: none; +} .ms-article .el-container .el-aside .ms-article-item:hover { cursor: pointer; } +.ms-article .el-container .el-aside .ms-article-item:hover .ms-article-item-mask { + visibility: visible; +} +.ms-article .el-container .el-aside .ms-article-item:hover .ms-article-item-mask > i { + display: block; +} .ms-article .el-container .el-aside .ms-article-footer { background: #fff; padding-top: 20px;