feat(cli): mobile site title auto resize

This commit is contained in:
陈嘉涵 2019-12-18 14:57:48 +08:00
parent 2fa241d868
commit 1f081c1e88

View File

@ -1,6 +1,9 @@
<template> <template>
<div class="demo-home"> <div class="demo-home">
<h1 class="demo-home__title"> <h1
class="demo-home__title"
:class="{ 'demo-home__title--small': smallTitle }"
>
<img :src="config.logo"> <img :src="config.logo">
<span>{{ config.title }}</span> <span>{{ config.title }}</span>
</h1> </h1>
@ -38,6 +41,10 @@ export default {
} }
return config.site; return config.site;
},
smallTitle() {
return this.config.title.length >= 8;
} }
} }
}; };
@ -62,6 +69,7 @@ export default {
&__title { &__title {
margin: 0 0 16px; margin: 0 0 16px;
font-size: 32px;
img, img,
span { span {
@ -70,13 +78,16 @@ export default {
} }
img { img {
width: 36px; width: 32px;
} }
span { span {
margin-left: 16px; margin-left: 16px;
font-weight: 500; font-weight: 500;
font-size: 36px; }
&--small {
font-size: 24px;
} }
} }