vue web fix

3 years ago · c2dfe6bb3d
7 changed files with 81 additions and 75 deletions
--- a/index.html
+++ b/index.html
@ -3,9 +3,9 @@
				@@ -3,9 +3,9 @@

 <head>
  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <link rel="icon" type="image/svg+xml" href="/microsoft-money.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Vite + Vue</title>
+  <title>资产系统</title>
 </head>

 <body>
--- a/public/microsoft-money.ico
+++ b/public/microsoft-money.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -5,9 +5,8 @@ import Login from './views/Login.vue'
				@@ -5,9 +5,8 @@ import Login from './views/Login.vue'

 <template>
  <!-- haeder -->
-  <h4></h4>
  <!-- content -->
-  <div class="container">
+  <div class="">
    <RouterView />
  </div>
  <!-- footer -->
--- a/src/router/index.js
+++ b/src/router/index.js
@ -5,17 +5,6 @@ import Login from "../views/Login.vue"
				@@ -5,17 +5,6 @@ import Login from "../views/Login.vue"
 import Index from "../views/Index.vue"
 import Register from "../views/Register.vue"

-
-// const routerHistory = createWebHistory(import.meta.env.BASE_URL)
-// const router = createRouter({
-//     mode: routerHistory,
-//     routes: [
-//         { path: '/', name: "Login", component: Login },
-//         { path: '/index', name: "index", component: Index }
-//     ]
-// });
-
-
 export const router = VueRouter.createRouter({
    history: VueRouter.createWebHashHistory(),
    routes: [
--- a/src/style.css
+++ b/src/style.css
@ -116,7 +116,7 @@ button:focus-visible {
				@@ -116,7 +116,7 @@ button:focus-visible {
 }

 #app {
-  max-width: 1280px;
+  max-width: 100vw;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0);
  /* text-align: center; */
@ -137,61 +137,9 @@ button:focus-visible {
				@@ -137,61 +137,9 @@ button:focus-visible {
  }
 }

+/* Vue样式 */
 #main {
  width: 400px;
-  margin-top: 10%;
-  min-width: 100vh;
+  margin-top: 10px auto;
  float: none;
-}
-
-@media (min-width: 768px) {
-  .container-fluid {
-    width: 750px;
-  }
-}
-
-@media (min-width: 992px) {
-  .container-fluid {
-    width: 970px;
-  }
-}
-
-@media (min-width: 1200px) {
-  .container-fluid {
-    width: 100vw;
-  }
-}
-
-#card1 {
-  margin: 3% 0;
-  border-radius: 3%;
-  background-color: rgba(255, 255, 255, 0.8);
-  box-shadow: none;
-  border: none;
-}
-
-.btn:focus,
-.btn:active {
-  background-color: blue;
-}
-
-.btn {
-
-  margin: 10px;
-  width: 100px !important;
-}
-
-#reg {
-  margin-left: 24%;
-}
-
-/* 验证码样式 */
-
-.image {
-  margin: 2px 0;
-  display: flex;
-}
-
-#imginput {
-  margin: 0 12px;
 }
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@ -1,9 +1,23 @@
				@@ -1,9 +1,23 @@
 <template>
-    <div>
+    <div class="IndexPage">
+        <header>
+            <nav class="navbar bg-body-tertiary  ">
+                <div class="container-fluid">
+                    <a class="navbar-brand">
+                        <img src="https://img.icons8.com/cotton/24/null/money--v2.png" class="d-inline-block align-text-top"
+                            alt="Logo" />
+                        Bootstrap
+                    </a>
+                    <form class="d-flex align-items-center" role="search">
+                        <input class="form-control" id="Navin" type="search" placeholder="Search" aria-label="Search">
+                        <button class="btn btn-outline-success" type="submit">Search</button>
+                    </form>
+                </div>
+            </nav>
+        </header>
        <div>

        </div>
-        {{ name }}
    </div>
 </template>

@ -27,4 +41,8 @@ export default {
				@@ -27,4 +41,8 @@ export default {
 };
 </script>

-<style scoped></style>
+<style scoped>
+#Navin {
+    height: 40px;
+}
+</style>
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@ -1,7 +1,7 @@
				@@ -1,7 +1,7 @@
 <template>
    <div id="main" class="container">
        <div class="row">
-            <div class="col-lg-12">
+            <div class="col">
                <div class="card" id="card1">
                    <h2 class="text-center">资产系统后台管理界面</h2>
                    <div class="card-body d-flex justify-content-center">
@ -93,4 +93,56 @@ export default {
				@@ -93,4 +93,56 @@ export default {
 }
 </script>

-<style scoped></style>
+<style scoped>
+@media (min-width: 768px) {
+    .container-fluid {
+        width: 750px;
+    }
+}
+
+@media (min-width: 992px) {
+    .container-fluid {
+        width: 970px;
+    }
+}
+
+@media (min-width: 1200px) {
+    .container-fluid {
+        width: 100vw;
+    }
+}
+
+#card1 {
+    margin: 50% 0;
+    border-radius: 3%;
+    background-color: rgba(255, 255, 255, 0.8);
+    box-shadow: none;
+    border: none;
+}
+
+.btn:focus,
+.btn:active {
+    background-color: blue;
+}
+
+.btn {
+
+    margin: 10px;
+    width: 100px !important;
+}
+
+#reg {
+    margin-left: 24%;
+}
+
+/* 验证码样式 */
+
+.image {
+    margin: 2px 0;
+    display: flex;
+}
+
+#imginput {
+    margin: 0 12px;
+}
+</style>