change pdf look style

src/lib/PdfShare.vue

@@ -1,11 +1,20 @@
 <template>
-    <div style="position: absolute;right: 0;bottom:0">
+    <div style="position: absolute;right: 0;bottom:0;width: 400px;border:1px solid #ccc">
-        <v-file-input ref="file" id="myfile" accept="pdf" label="Please select a file"></v-file-input>
+
-        <v-btn @click="loadFile">load file</v-btn>
+        <v-row>
-        <canvas style="zoom:0.3" id="mypdfview"></canvas>
+            <v-col cols="12" md="10">
-        <v-btn @click="prevPage">Prev</v-btn>
+                <v-file-input ref="file" id="myfile" accept="pdf" label="Please select a file"></v-file-input>
-        <span v-if="pdf && !loading">{{pdf.numPages}}</span>
+
-        <v-btn @click="nextPage">Next</v-btn>
+            </v-col>
+            <v-col cols="12" md="2">
+                <v-btn @click="loadFile" icon><v-icon>mdi-chevron-right</v-icon></v-btn>
+
+            </v-col>
+        </v-row>
+        <canvas style="zoom:0.3" id="mypdfview"></canvas><br />
+        <v-btn v-if="pdf && !loading" :disabled="pageNumber ==1" @click="prevPage" icon><v-icon>mdi-chevron-left</v-icon></v-btn>
+        <span v-if="pdf && !loading">{{pageNumber}} / {{pdf.numPages}}</span>
+        <v-btn v-if="pdf && !loading" :disabled="pdf.numPages == pageNumber" @click="nextPage" icon><v-icon>mdi-chevron-right</v-icon></v-btn>
     </div>
 </template>
 
@@ -29,7 +38,7 @@ export default {
     },
     data: () => ({
         pdf:null,
-        pageNumber:0,
+        pageNumber:1,
         loading:true,
         pluginHandle: null
         }),