add ribbon for page

Author: martin-bian

dimple-ui-blog/src/App.vue

@@ -5,60 +5,63 @@
 </template>
 
 <script>
-import { mapMutations } from "vuex";
+import {mapMutations} from "vuex";
+import Ribbons from '@/assets/js/ribbon.js'
 
 export default {
-  components: {},
-  data() {
-    return {
-      location: [],
-      timer: "",
-      showBackTop: true
-    };
-  },
-  watch: {},
-  mounted() {
-    this.initPanel();
-  },
-  computed: {},
-  methods: {
-    ...mapMutations(["setArchives", "setCategory", "setTags", "setNewComments", "setNewArticles", "setTotals"]),
-    initPanel() {
-      this.$api.listArchive({ countType: "month", pageNum: 1, pageSize: 1000 }).then((res) => {
-        if (res.code === 200) {
-          this.setArchives(res.rows);
+    Ribbons,
+    components: {},
+    data() {
+        return {
+            location: [],
+            timer: "",
+            showBackTop: true
+        };
+    },
+    watch: {},
+    mounted() {
+        this.initPanel();
+        Ribbons.start()
+    },
+    computed: {},
+    methods: {
+        ...mapMutations(["setArchives", "setCategory", "setTags", "setNewComments", "setNewArticles", "setTotals"]),
+        initPanel() {
+            this.$api.listArchive({countType: "month", pageNum: 1, pageSize: 1000}).then((res) => {
+                if (res.code === 200) {
+                    this.setArchives(res.rows);
+                }
+                ;
+            });
+            this.$api.listCategory().then((res) => {
+                if (res.code === 200) {
+                    this.setTotals({key: "category", value: res.total});
+                    this.setCategory(res.rows);
+                }
+            });
+            this.$api.listTag().then((res) => {
+                if (res.code === 200) {
+                    this.setTotals({key: "tag", value: res.total});
+                    this.setTags(res.rows);
+                }
+            });
+            this.$api.listComment({
+                pageNum: 1,
+                pageSize: 5
+            }).then((res) => {
+                if (res.code === 200) this.setNewComments(res.rows);
+            });
+            this.$api.listArticle({
+                pageNum: 1,
+                pageSize: 5,
+            }).then((res) => {
+                if (res.code === 200) {
+                    this.setTotals({key: "article", value: res.total});
+                    this.setNewArticles(res.rows);
+                }
+            });
         }
-        ;
-      });
-      this.$api.listCategory().then((res) => {
-        if (res.code === 200) {
-          this.setTotals({ key: "category", value: res.total });
-          this.setCategory(res.rows);
-        }
-      });
-      this.$api.listTag().then((res) => {
-        if (res.code === 200) {
-          this.setTotals({ key: "tag", value: res.total });
-          this.setTags(res.rows);
-        }
-      });
-      this.$api.listComment({
-        pageNum: 1,
-        pageSize: 5
-      }).then((res) => {
-        if (res.code === 200) this.setNewComments(res.rows);
-      });
-      this.$api.listArticle({
-        pageNum: 1,
-        pageSize: 5,
-      }).then((res) => {
-        if (res.code === 200) {
-          this.setTotals({ key: "article", value: res.total });
-          this.setNewArticles(res.rows);
-        }
-      });
     }
-  }
 };
 </script>