修改：调整文章列表界面样式
This commit is contained in:
jmal
parent
ef5654dcb7
commit
767364e787
@ -5,7 +5,7 @@
|
||||
color: #272936;
|
||||
}
|
||||
.article-header {
|
||||
height: 640px;
|
||||
height: 70vh;
|
||||
min-height: 12.5px;
|
||||
position: relative;
|
||||
display: table;
|
||||
|
||||
@ -1434,7 +1434,7 @@ article .readmore > a:hover {
|
||||
align-items: center;
|
||||
align-self: center;
|
||||
align-content: center;
|
||||
color: #555;
|
||||
color: #f0f5ff;
|
||||
padding: 16px
|
||||
}
|
||||
|
||||
@ -1450,9 +1450,7 @@ article .readmore > a:hover {
|
||||
|
||||
.cover-wrapper .cover.half {
|
||||
margin-bottom: -100px;
|
||||
max-height: 640px;
|
||||
min-height: 400px;
|
||||
height: calc(36vh - 64px + 200px)
|
||||
height: 70vh;
|
||||
}
|
||||
|
||||
.cover-wrapper .cover.half .cover-body div.b {
|
||||
@ -4380,40 +4378,46 @@ gray, p[gray] {
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 700px;
|
||||
height: 70vh;
|
||||
z-index: -999998;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 768px){
|
||||
.backstretch {
|
||||
left: -1000px;
|
||||
}
|
||||
.blog-background {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px){
|
||||
.backstretch {
|
||||
left: -888px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px){
|
||||
.backstretch {
|
||||
left: -768px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1200px){
|
||||
.backstretch {
|
||||
left: -500px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1440px){
|
||||
.backstretch {
|
||||
left: -300px;
|
||||
}
|
||||
}
|
||||
//@media only screen and (max-width: 768px){
|
||||
// .backstretch {
|
||||
// left: -1000px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media only screen and (min-width: 768px){
|
||||
// .backstretch {
|
||||
// left: -888px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media only screen and (min-width: 992px){
|
||||
// .backstretch {
|
||||
// left: -768px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media only screen and (min-width: 1200px){
|
||||
// .backstretch {
|
||||
// left: -500px;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//@media only screen and (min-width: 1440px){
|
||||
// .backstretch {
|
||||
// left: -300px;
|
||||
// }
|
||||
//}
|
||||
|
||||
//@media only screen and (min-width: 1920px){
|
||||
// .backstretch {
|
||||
|
||||
@ -44,12 +44,14 @@
|
||||
box-shadow: 4px -11px 20px #000;
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
background-color: rgba(255,255,255,0.72);
|
||||
background-color: #2f41544d;
|
||||
|
||||
.navbar {
|
||||
display: flex;
|
||||
color: rgba(0,0,0,0.9);
|
||||
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;
|
||||
a {
|
||||
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 {
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
@ -133,9 +135,6 @@
|
||||
padding-top: 0.3125rem;
|
||||
padding-bottom: 0.3125rem;
|
||||
}
|
||||
a {
|
||||
color: rgba(0,0,0,0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.bar {
|
||||
@ -228,9 +227,10 @@
|
||||
}
|
||||
|
||||
|
||||
.l_main {
|
||||
.article_l_main {
|
||||
padding: 0 16px 16px;
|
||||
margin-top: -80px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.l_main {
|
||||
@ -346,28 +346,28 @@
|
||||
/deep/ .slimScrollDiv {
|
||||
width: 240px;
|
||||
}
|
||||
/deep/ .slimScrollDiv {
|
||||
/deep/ .slimScrollDiv,.l_side {
|
||||
transform: translateX(50px);
|
||||
}
|
||||
/deep/ .el-main {
|
||||
/deep/ .article_l_main {
|
||||
transform: translateX(50px);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1240px){
|
||||
/deep/ .slimScrollDiv {
|
||||
/deep/ .slimScrollDiv,.l_side {
|
||||
transform: translateX(80px);
|
||||
}
|
||||
/deep/ .el-main {
|
||||
/deep/ .article_l_main {
|
||||
transform: translateX(80px);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1400px){
|
||||
/deep/ .slimScrollDiv {
|
||||
/deep/ .slimScrollDiv,.l_side {
|
||||
transform: translateX(120px);
|
||||
}
|
||||
/deep/ .el-main {
|
||||
/deep/ .article_l_main {
|
||||
transform: translateX(120px);
|
||||
}
|
||||
}
|
||||
|
||||
@ -44,7 +44,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<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
|
||||
ref="md"
|
||||
v-if="!showList"
|
||||
|
||||
@ -20,14 +20,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<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>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="l_body">
|
||||
<div class="body-wrapper">
|
||||
<div class="body-wrapper articles_l_main">
|
||||
<el-main class="l_main">
|
||||
<section class="post-list">
|
||||
<div v-for="article in articleList" class="post-wrapper">
|
||||
@ -57,7 +58,7 @@
|
||||
<section class="article typo">
|
||||
<a :href="$route.path+'/article?mark='+article.id">
|
||||
<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>
|
||||
</a>
|
||||
@ -65,130 +66,7 @@
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</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>
|
||||
<footer class="clearfix">
|
||||
@ -282,11 +160,10 @@
|
||||
height: 100%;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
|
||||
.blog-background {
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 15em;
|
||||
}
|
||||
.articles-list {
|
||||
max-height: 15rem;
|
||||
}
|
||||
.articles_l_main {
|
||||
max-width: 960px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user