Используем css-классы quasar

client/components/Reader/LoaderPage/LoaderPage.vue

@@ -1,31 +1,30 @@
 <template>
-    <div ref="main" class="main">
+    <div ref="main" class="fit column no-wrap" style="min-height: 480px">
         <GithubCorner url="https://github.com/bookpauk/liberama" cornerColor="#1B695F" gitColor="EBE2C9"></GithubCorner>
-        <div class="part top">
+        <div class="col column justify-center items-center no-wrap" style="min-height: 150px">
-            <span class="greeting bold-font">{{ title }}</span>
+            <span class="greeting"><b>{{ title }}</b></span>
-            <div class="space"></div>
+            <div class="q-my-md"></div>
             <span class="greeting">Добро пожаловать!</span>
             <span class="greeting">Поддерживаются форматы: <b>fb2, html, txt</b> и сжатие: <b>zip, bz2, gz</b></span>
             <span v-if="isExternalConverter" class="greeting">...а также форматы: <b>rtf, doc, docx, pdf, epub, mobi</b></span>
         </div>
 
-        <div class="part center">
+        <div class="col column justify-start items-center" style="min-height: 250px">
             <el-input ref="input" placeholder="URL книги" v-model="bookUrl">
                 <el-button slot="append" icon="el-icon-check" @click="submitUrl"></el-button>
             </el-input>
-            <div class="space"></div>
+            <div class="q-my-sm"></div>
             <input type="file" id="file" ref="file" @change="loadFile" style='display: none;'/>
 
             <el-button size="mini" @click="loadFileClick">
                 Загрузить файл с диска
             </el-button>
-            <div class="space"></div>
+            <div class="q-my-sm"></div>
             <el-button size="mini" @click="loadBufferClick">
                 Из буфера обмена
             </el-button>
 
-            <div class="space"></div>
+            <div class="q-my-md"></div>
-            <div class="space"></div>
             <div v-if="mode == 'omnireader'">
                 <div ref="yaShare2" class="ya-share2" 
                     data-services="collections,vkontakte,facebook,odnoklassniki,twitter,telegram"
@@ -34,12 +33,12 @@
                     data-url="https://omnireader.ru">
                 </div>
             </div>
-            <div class="space"></div>
+            <div class="q-my-sm"></div>
             <span v-if="mode == 'omnireader'" class="bottom-span clickable" @click="openComments">Отзывы о читалке</span>
             <span v-if="mode == 'omnireader'" class="bottom-span clickable" @click="openOldVersion">Старая версия</span>
         </div>
 
-        <div class="part bottom">
+        <div class="col column justify-end items-center">
             <span class="bottom-span clickable" @click="openHelp">Справка</span>
             <span class="bottom-span clickable" @click="openDonate">Помочь проекту</span>
 
@@ -188,50 +187,17 @@ class LoaderPage extends Vue {
 //-----------------------------------------------------------------------------
 </script>
 <style scoped>
-.main {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 480px;
-}
-
-.part {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
 .greeting {
     font-size: 120%;
     line-height: 160%;
 }
 
-.bold-font {
-    font-weight: bold;
-}
-
 .clickable {
     color: blue;
     text-decoration: underline;
     cursor: pointer;
 }
 
-.top {
-    min-height: 120px;
-}
-
-.center {
-    justify-content: flex-start;
-    padding: 0 10px 0 10px;
-    min-height: 250px;
-}
-
-.bottom {
-    justify-content: flex-end;
-}
-
 .bottom-span {
     font-size: 70%;
     margin-bottom: 10px;
@@ -240,8 +206,4 @@ class LoaderPage extends Vue {
 .el-input {
     max-width: 700px;
 }
-
-.space {
-    height: 20px;
-}
 </style>