update

package-lock.json

@@ -1100,6 +1100,12 @@
         "postcss": "^7.0.0"
       }
     },
+    "@mdi/font": {
+      "version": "5.8.55",
+      "resolved": "https://registry.npm.taobao.org/@mdi/font/download/@mdi/font-5.8.55.tgz",
+      "integrity": "sha1-FGQVW8vIpuSvbf/WEf6OOOCa8oU=",
+      "dev": true
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npm.taobao.org/@mrmlnc/readdir-enhanced/download/@mrmlnc/readdir-enhanced-2.2.1.tgz",

package.json

@@ -15,6 +15,7 @@
     "vuex": "^3.4.0"
   },
   "devDependencies": {
+    "@mdi/font": "^5.8.55",
     "@vue/cli-plugin-babel": "~4.5.0",
     "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-plugin-router": "~4.5.0",

src/App.vue

@@ -8,6 +8,8 @@
 // 全局样式设置
 body {
   margin: 0;
-  background-color: $color-page-background;
+}
+a {
+  text-decoration: none;
 }
 </style>

src/assets/scss/public.scss

@@ -1,6 +1,7 @@
 // color
 $color-page-background: #f4f7fc;
 $color-card-background: #ffffff;
+$color-system-primary: #9575cd;
 
 // shadow
 $shadow-default: 0 3px 8px rgba(211, 215, 222, 0.4);

src/assets/scss/variables.scss

@@ -0,0 +1,32 @@
+// src/sass/variables.scss
+$btn-border-radius: 0px;
+
+// Globals
+$body-font-family: "Work Sans", serif;
+$border-radius-root: 6px;
+$font-size-root: 14px;
+
+// Variables must come before the import
+$btn-letter-spacing: 0;
+$btn-font-weight: 400;
+$list-item-title-font-size: 0.929rem;
+$list-item-dense-title-font-size: 0.929rem;
+$list-item-dense-title-font-weight: initial;
+$fab-icon-sizes: (
+  "small": 20,
+);
+$btn-sizes: (
+  "default": 41,
+  "large": 54,
+);
+
+$headings: (
+  "h1": (
+    "size": 3.3125rem,
+    "line-height": 1.15em,
+  ),
+  "h2": (
+    "size": 2.25rem,
+    "line-height": 1.5em,
+  ),
+);

src/plugins/vuetify.js

@@ -1,9 +1,29 @@
 import Vue from "vue";
 import Vuetify from "vuetify";
 import "vuetify/dist/vuetify.min.css";
+import "@mdi/font/css/materialdesignicons.css"; // Ensure you are using css-loader
 
 Vue.use(Vuetify);
 
-const opts = {};
+const opts = {
+  icons: {
+    iconfont: "mdi", // default - only for display purposes
+  },
+  theme: {
+    themes: {
+      // default theme
+      light: {
+        // primary: "#1976D2",
+        primary: "#9575CD",
+        secondary: "#424242",
+        accent: "#82B1FF",
+        error: "#FF5252",
+        info: "#2196F3",
+        success: "#4CAF50",
+        warning: "#FFC107",
+      },
+    },
+  },
+};
 
 export default new Vuetify(opts);

src/views/About.vue

@@ -1,23 +1,72 @@
 <template>
-  <div class="about">
-    <h1>This is an about page</h1>
-    <test-vuetify></test-vuetify>
-  </div>
+  <v-app id="inspire">
+    <v-app-bar app color="white" flat>
+      <v-btn color="primary" dark>Evaluate</v-btn>
+      <v-container class="py-0 fill-height">
+        <router-link to="/">
+          <v-btn text>Home</v-btn>
+        </router-link>
+        <router-link to="/about">
+          <v-btn text>About</v-btn>
+        </router-link>
+
+        <v-spacer></v-spacer>
+      </v-container>
+
+      <v-avatar
+        class="hidden-sm-and-down"
+        color="grey darken-1 shrink"
+        size="32"
+      ></v-avatar>
+    </v-app-bar>
+
+    <v-main class="grey lighten-3">
+      <v-container>
+        <v-row>
+          <v-col>
+            <v-sheet min-height="70vh" rounded="lg">
+              <template class="">
+                <v-card class="ma-" max-width="320">
+                  <v-img
+                    class="white--text align-end"
+                    height="200px"
+                    src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
+                  >
+                    <v-card-title>Title</v-card-title>
+                  </v-img>
+
+                  <v-card-subtitle class="pb-0">
+                    Subtitle
+                  </v-card-subtitle>
+
+                  <v-card-text class="text--primary">
+                    <div>info</div>
+
+                    <div>some more info......</div>
+                  </v-card-text>
+
+                  <v-card-actions>
+                    <v-btn color="orange" text>
+                      Btn1
+                    </v-btn>
+
+                    <v-btn color="orange" text>
+                      Btn2
+                    </v-btn>
+                  </v-card-actions>
+                </v-card>
+              </template>
+            </v-sheet>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-main>
+  </v-app>
 </template>
 
 <script>
-import TestVuetify from "@/components/TestVuetify.vue";
-
 export default {
   name: "About",
-  components: {
-    TestVuetify
-  }
+  data: () => ({}),
 };
 </script>
-
-<style lang="scss" scoped>
-h1 {
-  color: green;
-}
-</style>

src/views/Home.vue

@@ -1,47 +1,104 @@
 <template>
-  <div class="home">
-    <div class="header"></div>
-    <div class="page">
-      <div class="left-menu"></div>
-      <div class="page-content"></div>
-    </div>
-  </div>
+  <v-app id="inspire">
+    <v-app-bar app color="white" flat>
+      <v-btn color="primary" dark>Evaluate</v-btn>
+      <v-container class="py-0 fill-height">
+        <router-link to="/">
+          <v-btn text>Home</v-btn>
+        </router-link>
+        <router-link to="/about">
+          <v-btn text>About</v-btn>
+        </router-link>
+
+        <v-spacer></v-spacer>
+      </v-container>
+
+      <v-avatar
+        class="hidden-sm-and-down"
+        color="grey darken-1 shrink"
+        size="32"
+      ></v-avatar>
+    </v-app-bar>
+
+    <v-main class="grey lighten-3">
+      <v-container>
+        <v-row>
+          <v-col cols="2">
+            <v-sheet rounded="lg">
+              <v-list color="transparent">
+                <v-list-item v-for="n in 5" :key="n" link>
+                  <v-list-item-content>
+                    <v-list-item-title> List Item {{ n }} </v-list-item-title>
+                  </v-list-item-content>
+                </v-list-item>
+              </v-list>
+            </v-sheet>
+          </v-col>
+
+          <v-col>
+            <v-sheet min-height="70vh" rounded="lg">
+              <template>
+                <v-row align="center" justify="space-around" class="pa-md-4">
+                  <v-btn depressed>
+                    Normal
+                  </v-btn>
+                  <v-btn depressed color="primary">
+                    Primary
+                  </v-btn>
+                  <v-btn depressed color="success">
+                    Success
+                  </v-btn>
+                  <v-btn depressed color="warning">
+                    Warning
+                  </v-btn>
+                  <v-btn depressed color="error">
+                    Error
+                  </v-btn>
+                  <v-btn depressed disabled>
+                    Disabled
+                  </v-btn>
+                </v-row>
+              </template>
+              <v-divider></v-divider>
+              <template>
+                <v-container fluid>
+                  <v-row>
+                    <v-col cols="12" md="6">
+                      <v-textarea
+                        outlined
+                        name="input-7-4"
+                        label="Outlined textarea"
+                        value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
+                      ></v-textarea>
+                    </v-col>
+                    <v-col cols="12" md="6">
+                      <v-text-field
+                        label="Main input"
+                        :rules="rules"
+                        hide-details="auto"
+                      ></v-text-field>
+                      <v-text-field label="Another input"></v-text-field>
+                    </v-col>
+                  </v-row>
+                </v-container>
+              </template>
+              <v-divider></v-divider>
+            </v-sheet>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-main>
+  </v-app>
 </template>
 
 <script>
-// @ is an alias to /src
-// import HelloWorld from "@/components/HelloWorld.vue";
-
 export default {
   name: "Home",
-  components: {},
+  data: () => ({
+    rules: [
+      (value) => !!value || "Required.",
+      (value) => (value && value.length >= 3) || "Min 3 characters",
+    ],
+  }),
 };
 </script>
-
-<style lang="scss" scoped>
-.header {
-  background-color: #4368b6;
-  height: 64px;
-  max-width: 100%;
-  -webkit-box-shadow: $shadow-default;
-  box-shadow: $shadow-default;
-}
-.page {
-  max-width: 100%;
-  height: 1000px;
-  display: flex;
-}
-.left-menu {
-  background-color: #e4930a;
-  height: 100%;
-  width: 200px;
-}
-.page-content {
-  background-color: $color-card-background;
-  height: 100%;
-  width: 100%;
-  margin: 12px;
-  border-radius: $borderRadius-default;
-  box-shadow: $shadow-default;
-}
-</style>

vue.config.js

@@ -7,7 +7,7 @@ module.exports = {
       // `scss` 语法会要求语句结尾必须有分号，`sass` 则要求必须没有分号
       // 在这种情况下，我们可以使用 `scss` 选项，对 `scss` 语法进行单独配置
       scss: {
-        prependData: `@import "~@/assets/scss/public.scss";`,
+        prependData: `@import "~@/assets/scss/variables.scss";`,
       },
     },
   },