lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改：调整文章列表界面样式

Browse Source
This commit is contained in:
jmal 2020-10-25 22:49:05 +08:00
parent ef5654dcb7
commit 767364e787
5 changed files with 61 additions and 180 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/styles/article.scss
View File

@ -5,7 +5,7 @@
color: #272936; color: #272936;
} }
.article-header { .article-header {
height: 640px; height: 70vh;
min-height: 12.5px; min-height: 12.5px;
position: relative; position: relative;
display: table; display: table;

68
src/styles/articles.scss
View File

@ -1434,7 +1434,7 @@ article .readmore > a:hover {
align-items: center; align-items: center;
align-self: center; align-self: center;
align-content: center; align-content: center;
color: #555; color: #f0f5ff;
padding: 16px padding: 16px
} }
@ -1450,9 +1450,7 @@ article .readmore > a:hover {
.cover-wrapper .cover.half { .cover-wrapper .cover.half {
margin-bottom: -100px; margin-bottom: -100px;
max-height: 640px; height: 70vh;
min-height: 400px;
height: calc(36vh - 64px + 200px)
} }
.cover-wrapper .cover.half .cover-body div.b { .cover-wrapper .cover.half .cover-body div.b {
@ -4380,40 +4378,46 @@ gray, p[gray] {
overflow: hidden; overflow: hidden;
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 700px; height: 70vh;
z-index: -999998; z-index: -999998;
position: absolute; position: absolute;
} }
@media only screen and (max-width: 768px){ .blog-background {
.backstretch { object-fit: cover;
left: -1000px; width: 100%;
} height: 100%;
} }
@media only screen and (min-width: 768px){ //@media only screen and (max-width: 768px){
.backstretch { // .backstretch {
left: -888px; // left: -1000px;
} // }
} //}
//
@media only screen and (min-width: 992px){ //@media only screen and (min-width: 768px){
.backstretch { // .backstretch {
left: -768px; // left: -888px;
} // }
} //}
//
@media only screen and (min-width: 1200px){ //@media only screen and (min-width: 992px){
.backstretch { // .backstretch {
left: -500px; // left: -768px;
} // }
} //}
//
@media only screen and (min-width: 1440px){ //@media only screen and (min-width: 1200px){
.backstretch { // .backstretch {
left: -300px; // left: -500px;
} // }
} //}
//
//@media only screen and (min-width: 1440px){
// .backstretch {
// left: -300px;
// }
//}
//@media only screen and (min-width: 1920px){ //@media only screen and (min-width: 1920px){
// .backstretch { // .backstretch {

26
src/styles/markdown.scss
View File

@ -44,12 +44,14 @@
box-shadow: 4px -11px 20px #000; box-shadow: 4px -11px 20px #000;
-webkit-backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
background-color: rgba(255,255,255,0.72); background-color: #2f41544d;
.navbar { .navbar {
display: flex; display: flex;
color: rgba(0,0,0,0.9); a {
font-family: 'Mirages Custom', 'Merriweather', 'Open Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'Segoe UI Emoji', 'Segoe UI Symbol', Helvetica, Arial, sans-serif; color: #f0f5ff;
font-family: 'Mirages Custom', 'Merriweather', 'Open Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft Yahei', 'WenQuanYi Micro Hei', 'Segoe UI Emoji', 'Segoe UI Symbol', Helvetica, Arial, sans-serif;
}
.container-fluid { .container-fluid {
display: -ms-flexbox; display: -ms-flexbox;
display: flex; display: flex;
@ -133,9 +135,6 @@
padding-top: 0.3125rem; padding-top: 0.3125rem;
padding-bottom: 0.3125rem; padding-bottom: 0.3125rem;
} }
a {
color: rgba(0,0,0,0.9);
}
} }
.bar { .bar {
@ -228,9 +227,10 @@
} }
.l_main { .article_l_main {
padding: 0 16px 16px; padding: 0 16px 16px;
margin-top: -80px; margin-top: -80px;
z-index: 10;
} }
.l_main { .l_main {
@ -346,28 +346,28 @@
/deep/ .slimScrollDiv { /deep/ .slimScrollDiv {
width: 240px; width: 240px;
} }
/deep/ .slimScrollDiv { /deep/ .slimScrollDiv,.l_side {
transform: translateX(50px); transform: translateX(50px);
} }
/deep/ .el-main { /deep/ .article_l_main {
transform: translateX(50px); transform: translateX(50px);
} }
} }
@media only screen and (min-width: 1240px){ @media only screen and (min-width: 1240px){
/deep/ .slimScrollDiv { /deep/ .slimScrollDiv,.l_side {
transform: translateX(80px); transform: translateX(80px);
} }
/deep/ .el-main { /deep/ .article_l_main {
transform: translateX(80px); transform: translateX(80px);
} }
} }
@media only screen and (min-width: 1400px){ @media only screen and (min-width: 1400px){
/deep/ .slimScrollDiv { /deep/ .slimScrollDiv,.l_side {
transform: translateX(120px); transform: translateX(120px);
} }
/deep/ .el-main { /deep/ .article_l_main {
transform: translateX(120px); transform: translateX(120px);
} }
} }

2
src/views/public/article/index.vue
View File

@ -44,7 +44,7 @@
</div> </div>
</div> </div>
<div class="body-wrapper"> <div class="body-wrapper">
<el-main id="main_body" class="l_main"> <el-main id="main_body" class="l_main article_l_main">
<mavon-editor <mavon-editor
ref="md" ref="md"
v-if="!showList" v-if="!showList"

143
src/views/public/articles/index.vue
View File

@ -20,14 +20,15 @@
</div> </div>
</div> </div>
<div class="backstretch"> <div class="backstretch">
<img src="~@/assets/img/widget-img1.jpg"> <!-- <img src="~@/assets/img/widget-img1.jpg">-->
<img class="blog-background" src="https://images.unsplash.com/photo-1603378991000-2dda90e8563a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3200&q=80">
<!--<el-image :src="backImageSrc">--> <!--<el-image :src="backImageSrc">-->
<!--</el-image>--> <!--</el-image>-->
</div> </div>
</div> </div>
</div> </div>
<div class="l_body"> <div class="l_body">
<div class="body-wrapper"> <div class="body-wrapper articles_l_main">
<el-main class="l_main"> <el-main class="l_main">
<section class="post-list"> <section class="post-list">
<div v-for="article in articleList" class="post-wrapper"> <div v-for="article in articleList" class="post-wrapper">
@ -57,7 +58,7 @@
<section class="article typo"> <section class="article typo">
<a :href="$route.path+'/article?mark='+article.id"> <a :href="$route.path+'/article?mark='+article.id">
<div class="article-entry" itemprop="articleBody"> <div class="article-entry" itemprop="articleBody">
<p><img class="blog-background" :src="article.cover" onerror="this.src='https://images.unsplash.com/photo-1582230587856-7fec01506148?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'"/></p> <p><img class="blog-background articles-list" :src="article.cover" onerror="this.src='https://images.unsplash.com/photo-1582230587856-7fec01506148?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60'"/></p>
<!--<div class="button readmore"><a :href="$route.path+'/article?mark='+article.id">阅读全文 <i class="fas fa-chevron-right"></i></a></div>--> <!--<div class="button readmore"><a :href="$route.path+'/article?mark='+article.id">阅读全文 <i class="fas fa-chevron-right"></i></a></div>-->
</div> </div>
</a> </a>
@ -65,130 +66,7 @@
</article> </article>
</div> </div>
</section> </section>
</el-main> </el-main>
<aside class="l_side">
<section class="widget blogger shadow desktop">
<div class="content">
<div class="avatar">
<img class="avatar" src="~@/assets/img/widget-img.jpeg">
</div>
<div class="social-wrapper">
<a href="" class="social fas fa-rss flat-btn waves-effect waves-button" target="_blank" rel="external nofollow noopener noreferrer">
<svg-icon icon-class="widget-subscription"></svg-icon>
</a>
<a href="mailto:zhushilun084@163.com" class="social fas fa-envelope flat-btn waves-effect waves-button" target="_blank" rel="external nofollow noopener noreferrer">
<svg-icon icon-class="widget-email"></svg-icon>
</a>
<a href="https://github.com/jamebal" class="social fab fa-github flat-btn waves-effect waves-button" target="_blank" rel="external nofollow noopener noreferrer">
<svg-icon icon-class="widget-github"></svg-icon>
</a>
<a href="https://music.163.com/#/user/home?id=60353124" class="social fas fa-headphones-alt flat-btn waves-effect waves-button" target="_blank" rel="external nofollow noopener noreferrer">
<svg-icon icon-class="widget-music"></svg-icon>
</a>
</div>
</div>
</section>
<!--<section class="widget category shadow desktop">-->
<!--<header>-->
<!--<a href="/blog/categories/">-->
<!--<i class="fas fa-folder-open fa-fw" aria-hidden="true"></i>-->
<!--<span class="name">文章分类</span>-->
<!--</a>-->
<!--</header>-->
<!--<div class="content">-->
<!--<ul class="entry navigation">-->
<!--<li>-->
<!--<a class="flat-box waves-effect waves-block" title="/blog/categories/dev/" href="/blog/categories/dev/" id="blogcategoriesdev">-->
<!--<div class="name">Dev</div>-->
<!--<div class="badge">(34)</div>-->
<!--</a>-->
<!--</li>-->
<!--<li>-->
<!--<a class="flat-box child waves-effect waves-block" title="/blog/categories/dev/cocoa/" href="/blog/categories/dev/cocoa/" id="blogcategoriesdevcocoa">-->
<!--<div class="name">Cocoa</div>-->
<!--<div class="badge">(30)</div>-->
<!--</a>-->
<!--</li>-->
<!--<li>-->
<!--<a class="flat-box child waves-effect waves-block" title="/blog/categories/dev/git/" href="/blog/categories/dev/git/" id="blogcategoriesdevgit">-->
<!--<div class="name">Git</div>-->
<!--<div class="badge">(2)</div>-->
<!--</a>-->
<!--</li>-->
<!--<li>-->
<!--<a class="flat-box child waves-effect waves-block" title="/blog/categories/dev/hexo/" href="/blog/categories/dev/hexo/" id="blogcategoriesdevhexo">-->
<!--<div class="name">Hexo</div>-->
<!--<div class="badge">(1)</div>-->
<!--</a>-->
<!--</li>-->
<!--<li>-->
<!--<a class="flat-box child waves-effect waves-block" title="/blog/categories/dev/windows/" href="/blog/categories/dev/windows/" id="blogcategoriesdevwindows">-->
<!--<div class="name">Windows</div>-->
<!--<div class="badge">(1)</div>-->
<!--</a>-->
<!--</li>-->
<!--<li>-->
<!--<a class="flat-box waves-effect waves-block" title="/blog/categories/essay/" href="/blog/categories/essay/" id="blogcategoriesessay">-->
<!--<div class="name">Essay</div>-->
<!--<div class="badge">(2)</div>-->
<!--</a>-->
<!--</li>-->
<!--</ul>-->
<!--</div>-->
<!--</section>-->
<!--<section class="widget tagcloud shadow desktop">-->
<!--<header>-->
<!--<a href="/blog/tags/">-->
<!--<i class="fas fa-tags fa-fw" aria-hidden="true"></i>-->
<!--<span class="name">热门标签</span>-->
<!--</a>-->
<!--</header>-->
<!--<div class="content">-->
<!--<a href="/blog/tags/alamofire/" style="font-size:14px;color:#999">Alamofire</a>-->
<!--<a href="/blog/tags/ble/" style="font-size:14px;color:#999">BLE</a>-->
<!--<a href="/blog/tags/cocoapods/" style="font-size:15.67px;color:#8e8e8e">CocoaPods</a>-->
<!--<a href="/blog/tags/framework/" style="font-size:14px;color:#999">Framework</a>-->
<!--<a href="/blog/tags/gcd/" style="font-size:14px;color:#999">GCD</a>-->
<!--<a href="/blog/tags/git/" style="font-size:17.33px;color:#828282">Git</a>-->
<!--<a href="/blog/tags/hexo/" style="font-size:14px;color:#999">Hexo</a>-->
<!--<a href="/blog/tags/objc/" style="font-size:19px;color:#777">ObjC</a>-->
<!--<a href="/blog/tags/reactivecocoa/" style="font-size:14px;color:#999">ReactiveCocoa</a>-->
<!--<a href="/blog/tags/runtime/" style="font-size:15.67px;color:#8e8e8e">Runtime</a>-->
<!--<a href="/blog/tags/socket/" style="font-size:14px;color:#999">Socket</a>-->
<!--<a href="/blog/tags/swift/" style="font-size:20.67px;color:#6c6c6c">Swift</a>-->
<!--<a href="/blog/tags/ios/" style="font-size:24px;color:#555">iOS</a>-->
<!--<a href="/blog/tags/%E5%93%8D%E5%BA%94%E5%BC%8F%E7%BC%96%E7%A8%8B/" style="font-size:14px;color:#999">响应式编程</a>-->
<!--<a href="/blog/tags/%E5%BC%80%E6%BA%90%E5%BA%93/" style="font-size:22.33px;color:#606060">开源库</a>-->
<!--<a href="/blog/tags/%E6%9E%B6%E6%9E%84/" style="font-size:14px;color:#999">架构</a>-->
<!--<a href="/blog/tags/%E6%B2%99%E7%9B%92/" style="font-size:14px;color:#999">沙盒</a>-->
<!--<a href="/blog/tags/%E7%BC%93%E5%AD%98/" style="font-size:14px;color:#999">缓存</a>-->
<!--<a href="/blog/tags/%E8%A7%A3%E8%80%A6/" style="font-size:14px;color:#999">解耦</a>-->
<!--<a href="/blog/tags/%E9%9D%99%E6%80%81%E5%BA%93/" style="font-size:14px;color:#999">静态库</a>-->
<!--</div>-->
<!--</section>-->
<!--<section class="widget text shadow desktop">-->
<!--<header>-->
<!--<a href="https://github.com/xaoxuu/" target="_blank" rel="external nofollow noopener noreferrer">-->
<!--<i class="fab fa-widget-github.svg fa-fw" aria-hidden="true"></i>-->
<!--<span class="name">近期项目</span>-->
<!--</a>-->
<!--</header>-->
<!--<div class="content">-->
<!--<p>这些是近期更新的 iOS 开源库，如果喜欢请点个赞支持一下。</p>-->
<!--<p>-->
<!--<a href="https://github.com/xaoxuu/ProHUD" target="_blank" rel="external nofollow noopener noreferrer">-->
<!--<img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" data-original="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/prohud/logo.png" height="50px">-->
<!--</a>-->
<!--</p>-->
<!--<p><a href="https://github.com/xaoxuu/ValueX" target="_blank" rel="external nofollow noopener noreferrer"><img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" data-original="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/valuex/logo.png" height="50px"></a></p>-->
<!--<p><a href="https://github.com/xaoxuu/Inspire" target="_blank" rel="external nofollow noopener noreferrer"><img src="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" data-original="https://cdn.jsdelivr.net/gh/xaoxuu/cdn-assets/proj/inspire/logo.png" height="50px"></a></p>-->
<!--</div>-->
<!--</section>-->
</aside>
</div> </div>
</div> </div>
<footer class="clearfix"> <footer class="clearfix">
@ -282,11 +160,10 @@
height: 100%; height: 100%;
background: #f5f5f5; background: #f5f5f5;
} }
.articles-list {
.blog-background { max-height: 15rem;
object-fit: cover; }
width: 100%; .articles_l_main {
height: 100%; max-width: 960px;
max-height: 15em; }
}
</style> </style>