update

src/router/index.js

@@ -1,6 +1,5 @@
 import {createRouter, createWebHistory, createWebHashHistory} from 'vue-router'
 import HomeView from '../views/HomeView.vue'
-import AboutView from '../views/AboutView.vue'
 
 const router = createRouter({
     history: createWebHashHistory(import.meta.env.BASE_URL),
@@ -10,14 +9,6 @@ const router = createRouter({
             name: 'home',
             component: HomeView
         },
-        {
-            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: AboutView
-        },
         {
             path: '/calc',
             name: 'calc',

src/views/AboutView.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

src/views/CalcView.vue

@@ -89,6 +89,7 @@ const clear = function () {
   position: relative;
   width: 25%;
   height: 0;
+  /*通过边距形成正方形的Hack*/
   padding-top: 25%;
   border: 1px solid #2c3e50;
   box-sizing: border-box;
@@ -97,6 +98,7 @@ const clear = function () {
   cursor: pointer;
 }
 
+/*遍历所有子元素*/
 .btn > * {
   position: absolute;
   width: 100%;
@@ -108,7 +110,4 @@ const clear = function () {
   align-items: center;
 }
 
-.active {
-  border: 5px solid #ff0;
-}
 </style>