Fix design
This commit is contained in:
parent
f115ef318d
commit
70a1721460
|
@ -3,8 +3,8 @@
|
||||||
<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
|
<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:@is-remote%<a :href="user.url || user.uri" target="_blank">%i18n:@view-remote%</a></p></div>
|
||||||
<div class="banner-container" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''">
|
<div class="banner-container" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''">
|
||||||
<div class="banner" ref="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''" @click="onBannerClick"></div>
|
<div class="banner" ref="banner" :style="user.bannerUrl ? `background-image: url(${user.bannerUrl}?thumbnail&size=2048)` : ''" @click="onBannerClick"></div>
|
||||||
</div>
|
|
||||||
<div class="fade"></div>
|
<div class="fade"></div>
|
||||||
|
</div>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=150`" alt="avatar"/>
|
<img class="avatar" :src="`${user.avatarUrl}?thumbnail&size=150`" alt="avatar"/>
|
||||||
<div class="title">
|
<div class="title">
|
||||||
|
@ -67,7 +67,6 @@ export default Vue.extend({
|
||||||
@import '~const.styl'
|
@import '~const.styl'
|
||||||
|
|
||||||
.header
|
.header
|
||||||
$banner-height = 320px
|
|
||||||
$footer-height = 58px
|
$footer-height = 58px
|
||||||
|
|
||||||
overflow hidden
|
overflow hidden
|
||||||
|
@ -102,7 +101,7 @@ export default Vue.extend({
|
||||||
text-shadow 0 0 8px #000
|
text-shadow 0 0 8px #000
|
||||||
|
|
||||||
> .banner-container
|
> .banner-container
|
||||||
height $banner-height
|
height 320px
|
||||||
overflow hidden
|
overflow hidden
|
||||||
background-size cover
|
background-size cover
|
||||||
background-position center
|
background-position center
|
||||||
|
@ -114,13 +113,11 @@ export default Vue.extend({
|
||||||
background-position center
|
background-position center
|
||||||
|
|
||||||
> .fade
|
> .fade
|
||||||
$fade-hight = 78px
|
|
||||||
|
|
||||||
position absolute
|
position absolute
|
||||||
top ($banner-height - $fade-hight)
|
bottom 0
|
||||||
left 0
|
left 0
|
||||||
width 100%
|
width 100%
|
||||||
height $fade-hight
|
height 78px
|
||||||
|
|
||||||
> .container
|
> .container
|
||||||
max-width 1200px
|
max-width 1200px
|
||||||
|
|
Loading…
Reference in New Issue