feat: add print button to the right corner

Author: dcyou

assets/css/main.scss

@@ -89,3 +89,31 @@ ul.icons a {
 }
 
 
+.corner-ribbon{
+    width: 200px;
+    background: #e43;
+    position: absolute;
+    top: 25px;
+    left: -50px;
+    text-align: center;
+    line-height: 50px;
+    letter-spacing: 1px;
+    color: #f0f0f0;
+    transform: rotate(-45deg);
+    -webkit-transform: rotate(-45deg);
+  }
+
+.corner-ribbon.top-right{
+    top: 25px;
+    right: -50px;
+    left: auto;
+    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    background: #1e8ad6
+  }
+  
+  .corner-ribbon.sticky{
+    position: fixed;
+  }
+
+

pages/index.vue

@@ -9,6 +9,9 @@
       <Education />
       <Hobbies />
     </el-main>
+    <div class="corner-ribbon top-right sticky no-print" @click="print()">
+      Print me
+    </div>
   </el-container>
   <!-- @sproogen thanks for inspiration -->
 </template>
@@ -40,6 +43,9 @@ export default {
         type: "warning",
         customClass: "no-print"
       })
+    },
+    print: function() {
+      window.print()
     }
   }
 }