简单的添加了几个特效

README.md

@@ -1,4 +1,4 @@
 # Kkc Background
 
 
-UI框架网址 `https://vuetifyjs.com/zh-Hans/`
+UI框架网址 `https://vuetifyjs.com/zh-Hans/`

components.d.ts

@@ -7,7 +7,8 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
-    HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
+    ClickOnEffects: typeof import('./src/components/ClickOnEffects.vue')['default']
+    GInput: typeof import('./src/components/GInput.vue')['default']
     Info: typeof import('./src/components/Info.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@mdi/font": "6.2.95",
+        "axios": "^1.6.8",
         "roboto-fontface": "*",
         "vue": "^3.4.21",
         "vue-router": "^4.3.0",
@@ -18,7 +19,7 @@
         "@babel/types": "^7.24.0",
         "@types/node": "^20.11.25",
         "@vitejs/plugin-vue": "^5.0.4",
-        "sass": "^1.71.1",
+        "sass": "^1.75.0",
         "typescript": "^5.4.2",
         "unplugin-fonts": "^1.1.1",
         "unplugin-vue-components": "^0.26.0",
@@ -883,6 +884,21 @@
         "node": ">= 8"
       }
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.6.8",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
+      "dependencies": {
+        "follow-redirects": "^1.15.6",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -946,6 +962,17 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmmirror.com/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/computeds": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz",
@@ -980,6 +1007,14 @@
         }
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmmirror.com/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -1071,6 +1106,32 @@
         "node": ">=8"
       }
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -1243,6 +1304,25 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmmirror.com/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmmirror.com/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.4",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.4.tgz",
@@ -1352,6 +1432,11 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -1474,9 +1559,9 @@
       }
     },
     "node_modules/sass": {
-      "version": "1.74.1",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.74.1.tgz",
-      "integrity": "sha512-w0Z9p/rWZWelb88ISOLyvqTWGmtmu2QJICqDBGyNnfG4OUnPX9BBjjYIXUpXCMOOg5MQWNpqzt876la1fsTvUA==",
+      "version": "1.75.0",
+      "resolved": "https://registry.npmmirror.com/sass/-/sass-1.75.0.tgz",
+      "integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==",
       "devOptional": true,
       "dependencies": {
         "chokidar": ">=3.0.0 <4.0.0",

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@mdi/font": "6.2.95",
+    "axios": "^1.6.8",
     "roboto-fontface": "*",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0",
@@ -17,7 +18,7 @@
     "@babel/types": "^7.24.0",
     "@types/node": "^20.11.25",
     "@vitejs/plugin-vue": "^5.0.4",
-    "sass": "^1.71.1",
+    "sass": "^1.75.0",
     "typescript": "^5.4.2",
     "unplugin-fonts": "^1.1.1",
     "unplugin-vue-components": "^0.26.0",

src/App.vue

@@ -1,22 +1,116 @@
 <template>
   <v-app>
     <v-main>
-      <div style="margin: 0 auto;height: 60px;width: auto;text-align: center">
-        <router-link to="Info">跳转Info</router-link>
-        <br>
-        <router-link to="/">跳转Home</router-link>
-      </div>
       <router-view/>
     </v-main>
   </v-app>
 </template>
 
 <script setup lang="ts">
-import {ref} from "vue";
 
-let isHome = ref(true)
-function toHome() {
-  isHome.value = !isHome.value
-  return isHome?'':'Info'
+var elementsByTagName = document.getElementsByTagName('body')[0]
+
+elementsByTagName.addEventListener('click', function (e) {
+  clickEffect(e)
+})
+
+function clickEffect(e) {
+  let x = e.clientX
+  let y = e.clientY
+  for (let i = 0; i < 5; i++) {
+    spanEffect(x, y, 100 * i + 1, 1500)
+  }
+}
+
+let si = setInterval(function () {
+  for (let i = 0; i < 10; i++) {
+    spanEffect(Math.random() * window.innerWidth, Math.random() * window.innerHeight, 0, 1500)
+  }
+}, 100)
+
+
+function createSpanElement(x: number, y: number, text: string, textColor = '') {
+  let span = document.createElement('span')
+  span.style.left = x + 'px'
+  span.style.top = y + 'px'
+  span.textContent = text
+  if (textColor != '') {
+    span.style.color = textColor
+  }
+  span.classList.add('click-on-effects-span')
+  return span
+}
+
+function createShadowElement(x, y) {
+  let div = document.createElement('div')
+  div.style.width = '20px'
+  div.style.height = '20px'
+  div.style.left = (x - 10) + 'px'
+  div.style.top = (y - 10) + 'px'
+  div.style.boxShadow = 'rgba(0, 0, 0, 0.5) 0 0 5px,inset rgba(0, 0, 0, 0.5) 0 0 5px'
+  div.classList.add('click-on-effects-div')
+  return div
+}
+
+function shadowEffect(x, y, startTime, endTime) {
+  let div = createShadowElement(x, y)
+  elementsByTagName.appendChild(div)
+  setTimeout(function () {
+    div.style.width = '75px'
+    div.style.height = '75px'
+    div.style.left = (x - (75 / 2)) + 'px'
+    div.style.top = (y - (75 / 2)) + 'px'
+    div.style.color = "transparent"
+    div.style.boxShadow = 'rgba(0, 0, 0, 0.1) 0 0 5px,inset rgba(0, 0, 0, 0.1) 0 0 5px'
+  }, startTime)
+  setTimeout(function () {
+    elementsByTagName.removeChild(div)
+  }, endTime)
 }
+
+function spanEffect(x, y, startTime, endTime) {
+  //随机数
+  let r = Math.floor(Math.random() * 255)
+  let g = Math.floor(Math.random() * 255)
+  let b = Math.floor(Math.random() * 255)
+  let span = createSpanElement(x, y, '智商 -1', 'rgba(' + r + ',' + g + ',' + b + ', 0.5)')
+
+  elementsByTagName.appendChild(span)
+  setTimeout(function () {
+    span.style.top = (y - 75) + 'px'
+    span.style.color = "transparent"
+  }, startTime)
+  setTimeout(function () {
+    elementsByTagName.removeChild(span)
+  }, endTime)
+}
+
 </script>
+<style lang="scss">
+.click-on-effects-span {
+  display: flex;
+  position: fixed;
+  white-space: nowrap;
+  //position: absolute;
+  border-radius: 50%;
+  color: rgba(0, 0, 0, 0.5);
+  background-color: transparent;
+  z-index: 9999;
+  user-select: none;
+  transition: top 1s ease-in-out, color 1s ease-in-out;
+  transform: translate(-50%, -75%);
+
+}
+
+.click-on-effects-div {
+  position: fixed;
+  color: transparent;
+  background-color: transparent;
+  transition: all 0.3s ease-in-out;
+  border-radius: 50px;
+  box-shadow: rgba(0, 0, 0, 0.7) 0 0 5px, inset rgba(0, 0, 0, 0.7) 0 0 5px;
+  z-index: 9999;
+}
+</style>
+<style scoped lang="scss">
+</style>

src/assets/svg/close.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1712557614160" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5349"
+     xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
+    <path d="M566.4 512l318.4-318.4c16-16 16-38.4 0-54.4s-38.4-16-54.4 0L512 457.6 192 140.8c-14.4-16-38.4-16-52.8 0s-16 38.4 0 54.4L457.6 512 139.2 830.4c-16 16-16 38.4 0 54.4 8 6.4 16 11.2 27.2 11.2s19.2-3.2 27.2-11.2l320-318.4 320 316.8c8 6.4 19.2 11.2 27.2 11.2s19.2-3.2 27.2-11.2c16-16 16-38.4 0-54.4L566.4 512z"
+          fill="#888888"
+          p-id="5350"></path>
+</svg>

src/components/ClickOnEffects.vue

@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div class="click-on-effects" v-for="(item,index) in clickNumAndIndex">
+
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+
+class ClickEffect {
+  x: number
+  y: number
+
+  constructor(x: number, y: number) {
+    this.x = x
+    this.y = y
+  }
+
+}
+
+const props = defineProps({
+  clickNumAndIndex: {
+    type: Array<ClickEffect>,
+    default: () => []
+  }
+})
+
+
+var elementsByTagName = document.getElementsByTagName('body')[0]
+elementsByTagName.addEventListener('click', function (e) {
+  clickEffect(e)
+})
+
+function clickEffect(e) {
+  let x = e.clientX
+  let y = e.clientY
+  let div = document.createElement('div')
+
+  div.style.left = x + 'px'
+  div.style.top = y + 'px'
+  div.style.borderRadius = '50%'
+  div.style.width = '5px'
+  div.style.height = '5px'
+  div.style.backgroundColor = 'red'
+  div.classList.add('click-on-effects')
+  div.textContent = "+1"
+
+  elementsByTagName.appendChild(div)
+
+  setTimeout(function () {
+    elementsByTagName.removeChild(div)
+  }, 5000)
+}
+</script>
+
+<style scoped lang="scss">
+.click-on-effects {
+  &:after{
+    content: "+1";
+  }
+}
+
+</style>

src/components/GInput.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="g-input-big">
+    <input :value="text"
+           :type="type"
+           @focus="setLabStyle()"
+           @blur="setLabStyle()"
+           @change="setText()"
+           :placeholder="label"/>
+    <img src="../assets/svg/close.svg" v-show="value.length>0"/>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {defineProps, ref, toRefs, watch} from 'vue'
+
+let foc = ref(false)
+const props = defineProps({
+  value: {
+    type: String,
+    // default: '',
+    required: true
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  type: {
+    type: String,
+    default: 'text'
+  },
+  height: {
+    type: Number,
+    default: 50
+  },
+  fgColor: {
+    type: String,
+    default: '#aaaaaa'
+  }
+})
+let text = ref(props.value)
+var emits = defineEmits(['username']);
+
+function setText() {
+  emits('username', text.value)
+}
+
+let labelStyle = ref({
+  color: props.fgColor,
+  marginTop: '0',
+  lineHeight: "50px",
+  fontSize: "18px",
+  height: props.height + 'px'
+})
+
+
+function setLabStyle() {
+  foc.value = !foc.value
+  console.log(foc.value)
+  labelStyle.value = {
+    marginTop: foc.value ? "-70px" : '0',
+    lineHeight: foc.value ? null : "50px",
+    color: foc.value ? "#888888" : '#aaaaaa',
+    fontSize: foc.value ? "16px" : "18px",
+    height: "20px"
+  }
+}
+
+
+</script>
+<style scoped lang="scss">
+
+.g-input-big {
+  height: 50px;
+  margin-bottom: 10px;
+  width: 330px;
+  cursor: text;
+  display: flex;
+
+  label {
+    display: flex;
+    vertical-align: middle;
+    margin-left: 15px;
+    position: absolute;
+    font-size: 16px;
+    cursor: text;
+    pointer-events: none;
+  }
+
+  input {
+    border-radius: 15px;
+    padding: 5px 10px;
+    border: #aaaaaa 2px solid;
+    width: 100%;
+    height: 100%;
+    font-size: 16px;
+    outline: none;
+    background-color: transparent;
+
+    &:hover {
+      border: #888888 2px solid;
+    }
+
+    &:focus {
+      border: #333333 2px solid;
+    }
+
+    &:active {
+      border: #333333 2px solid;
+    }
+  }
+
+  align-items: center;
+
+  img {
+    cursor: pointer;
+    width: 20px;
+    height: 20px;
+    display: flex;
+    border-radius: 50px;
+    justify-content: center;
+    margin-left: -30px;
+    line-height: 50px;
+    vertical-align: middle;
+    align-items: center;
+    padding: 3px;
+    background-image: url("../assets/svg/close.svg");
+    opacity: 0.3;
+    background-color: rgba(0, 0, 0, 0.2);
+
+    &:hover {
+      color: #000000;
+      opacity: 0.5;
+      background-color: rgba(0, 0, 0, 0.5);
+
+    }
+
+  }
+}
+</style>

src/components/HelloWorld.vue

@@ -1,157 +0,0 @@
-<template>
-  <v-container class="fill-height">
-    <v-responsive
-      class="align-centerfill-height mx-auto"
-      max-width="900"
-    >
-      <v-img
-        class="mb-4"
-        height="150"
-        src="@/assets/logo.png"
-      />
-
-      <div class="text-center">
-        <div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
-
-        <h1 class="text-h2 font-weight-bold">Vuetify</h1>
-      </div>
-
-      <div class="py-4" />
-
-      <v-row>
-        <v-col cols="12">
-          <v-card
-            class="py-4"
-            color="surface-variant"
-            image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
-            prepend-icon="mdi-rocket-launch-outline"
-            rounded="lg"
-            variant="outlined"
-          >
-            <template #image>
-              <v-img position="top right" />
-            </template>
-
-            <template #title>
-              <h2 class="text-h5 font-weight-bold">Get started</h2>
-            </template>
-
-            <template #subtitle>
-              <div class="text-subtitle-1">
-                Replace this page by removing <v-kbd>{{ `<HelloWorld />` }}</v-kbd> in <v-kbd>pages/index.vue</v-kbd>.
-              </div>
-            </template>
-
-            <v-overlay
-              opacity=".12"
-              scrim="primary"
-              contained
-              model-value
-              persistent
-            />
-          </v-card>
-        </v-col>
-
-        <v-col cols="6">
-          <v-card
-            append-icon="mdi-open-in-new"
-            class="py-4"
-            color="surface-variant"
-            href="https://vuetifyjs.com/"
-            prepend-icon="mdi-text-box-outline"
-            rel="noopener noreferrer"
-            rounded="lg"
-            subtitle="Learn about all things Vuetify in our documentation."
-            target="_blank"
-            title="Documentation"
-            variant="text"
-          >
-            <v-overlay
-              opacity=".06"
-              scrim="primary"
-              contained
-              model-value
-              persistent
-            />
-          </v-card>
-        </v-col>
-
-        <v-col cols="6">
-          <v-card
-            append-icon="mdi-open-in-new"
-            class="py-4"
-            color="surface-variant"
-            href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
-            prepend-icon="mdi-star-circle-outline"
-            rel="noopener noreferrer"
-            rounded="lg"
-            subtitle="Explore available framework Features."
-            target="_blank"
-            title="Features"
-            variant="text"
-          >
-            <v-overlay
-              opacity=".06"
-              scrim="primary"
-              contained
-              model-value
-              persistent
-            />
-          </v-card>
-        </v-col>
-
-        <v-col cols="6">
-          <v-card
-            append-icon="mdi-open-in-new"
-            class="py-4"
-            color="surface-variant"
-            href="https://vuetifyjs.com/components/all"
-            prepend-icon="mdi-widgets-outline"
-            rel="noopener noreferrer"
-            rounded="lg"
-            subtitle="Discover components in the API Explorer."
-            target="_blank"
-            title="Components"
-            variant="text"
-          >
-            <v-overlay
-              opacity=".06"
-              scrim="primary"
-              contained
-              model-value
-              persistent
-            />
-          </v-card>
-        </v-col>
-
-        <v-col cols="6">
-          <v-card
-            append-icon="mdi-open-in-new"
-            class="py-4"
-            color="surface-variant"
-            href="https://discord.vuetifyjs.com"
-            prepend-icon="mdi-account-group-outline"
-            rel="noopener noreferrer"
-            rounded="lg"
-            subtitle="Connect with Vuetify developers."
-            target="_blank"
-            title="Community"
-            variant="text"
-          >
-            <v-overlay
-              opacity=".06"
-              scrim="primary"
-              contained
-              model-value
-              persistent
-            />
-          </v-card>
-        </v-col>
-      </v-row>
-    </v-responsive>
-  </v-container>
-</template>
-
-<script setup lang="ts">
-  //
-</script>

src/page/Login.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="login-page">
+    <div class="login-body">
+      <div class="login-title">
+        <span>登录</span>
+      </div>
+      <form class="login-form">
+       ss: {{ username }}
+        <g-input :value="username" label="用户名"></g-input>
+        <g-input :value="password"></g-input>
+        <div class="login-btn">
+          <button type="button">登录</button>
+        </div>
+        <div class="login-link">
+          <a href="#">忘记密码</a>
+          <a href="#">注册</a>
+        </div>
+      </form>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import {ref} from 'vue'
+import GInput from "../components/GInput.vue";
+
+let username = ref('')
+
+let password = ref('')
+
+</script>
+<style scoped lang="scss">
+.login-page {
+  width: 100VW;
+  height: 100VH;
+  position: relative;
+
+  .login-body {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+    position: absolute;
+    vertical-align: middle;
+    width: 450px;
+    height: 300px;
+    border-radius: 25px;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
+
+    .login-title {
+      user-select: none;
+      width: 100%;
+      height: 50px;
+      font-size: 24px;
+      font-weight: bold;
+      text-align: center;
+      line-height: 50px
+    }
+
+
+    .login-form {
+      padding: 0 60px;
+
+      .login-input {
+        height: 50px;
+        margin-bottom: 10px;
+        width: 330px;
+
+        input {
+          border-radius: 15px;
+          padding: 5px 10px;
+          border: #aaaaaa 2px solid;
+          width: 100%;
+          height: 100%;
+          font-size: 16px;
+          outline: none;
+          background-color: transparent;
+
+          &:hover {
+            border: #888888 2px solid;
+          }
+
+          &:focus {
+            border: #333333 2px solid;
+          }
+
+          &:active {
+            border: #333333 2px solid;
+          }
+        }
+
+        label {
+          height: 18px;
+          position: absolute;
+          padding-left: 10px;
+          line-height: 50px;
+          font-size: 16px;
+        }
+
+      }
+
+    }
+  }
+}
+</style>

src/plugins/vuetify.ts

@@ -14,6 +14,6 @@ import { createVuetify } from 'vuetify'
 // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
 export default createVuetify({
   theme: {
-    defaultTheme: 'dark',
+    defaultTheme: 'light',
   },
 })

src/router/router.ts

@@ -5,7 +5,7 @@ var routes: Array<RouteRecordRaw> = [
   {
     name: "home",
     path: "/",
-    component: () => import("../components/HelloWorld.vue"),
+    component: () => import("../page/Login.vue"),
     children: []
   },
   {

vite.config.mts

@@ -42,6 +42,6 @@ export default defineConfig({
     ],
   },
   server: {
-    port: 3000,
+    port: 8923,
   },
 })