关于对话框

scutrobotlab · May 22, 2020 · cc82ba3 · cc82ba3
1 parent f2dc465
commit cc82ba3
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 45 deletions.
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -5,8 +5,17 @@
     <v-app-bar app dark color="primary">
       <v-app-bar-nav-icon @click.stop="switchDrawer()"></v-app-bar-nav-icon>
       <v-toolbar-title>坠好用的上位机</v-toolbar-title>
+      <v-btn icon v-on:click="openDialog()">
+        <v-icon>mdi-information-outline</v-icon>
+      </v-btn>
       <v-spacer></v-spacer>
-      <v-switch v-model="$vuetify.theme.dark" hide-details inset color="black" label="深色模式"></v-switch>
+      <v-switch
+        v-model="$vuetify.theme.dark"
+        hide-details
+        inset
+        color="black"
+        v-bind:label="$vuetify.theme.dark?'深色模式':'浅色模式'"
+      ></v-switch>
     </v-app-bar>
 
     <v-content>
@@ -16,21 +25,28 @@
     <v-footer app color="primary">
       <span class="white--text">华工机器人实验室</span>
     </v-footer>
+
+    <AboutDialog ref="AboutDialog" />
   </v-app>
 </template>
 
 <script>
 import DrawerList from "@/components/DrawerList.vue";
+import AboutDialog from "@/components/AboutDialog.vue";
 export default {
   components: {
-    DrawerList
+    DrawerList,
+    AboutDialog
   },
   props: {
     source: String
   },
   methods: {
     switchDrawer() {
       this.$refs.DrawerList.switchDrawer();
+    },
+    openDialog() {
+      this.$refs.AboutDialog.openDialog();
     }
   }
 };

diff --git a/frontend/src/components/AboutDialog.vue b/frontend/src/components/AboutDialog.vue
@@ -0,0 +1,44 @@
+<template>
+  <v-dialog v-model="dialog" max-width="400">
+    <v-card>
+      <v-list-item>
+        <v-list-item-avatar>
+          <img src="@/assets/logo.jpg" alt="Logo" />
+        </v-list-item-avatar>
+        <v-list-item-content>
+          <v-list-item-title>华工机器人实验室巨献</v-list-item-title>
+          <v-list-item-subtitle>SCUT Robot Lab Present</v-list-item-subtitle>
+        </v-list-item-content>
+        <v-list-item-icon>
+          <v-btn icon v-on:click="dialog = false">
+            <v-icon>mdi-close</v-icon>
+          </v-btn>
+        </v-list-item-icon>
+      </v-list-item>
+      <v-card-text></v-card-text>
+      <v-card-actions>
+        <v-spacer></v-spacer>
+        <v-btn icon href="https://github.com/scutrobotlab/Robot_Monitor_Web">
+          <v-icon>mdi-github</v-icon>
+        </v-btn>
+        <v-btn icon v-on:click="hc = 'pink'" v-bind:color="hc">
+          <v-icon>mdi-heart</v-icon>
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-dialog>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    dialog: false,
+    hc: ""
+  }),
+  methods: {
+    openDialog() {
+      this.dialog = true;
+    }
+  }
+};
+</script>
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
@@ -9,14 +9,6 @@ const routes = [
     path: '/',
     name: 'Home',
     component: Home
-  },
-  {
-    path: '/about',
-    name: 'About',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   }
 ]
 

diff --git a/frontend/src/views/About.vue b/frontend/src/views/About.vue