vue web fix

3 years ago · 891b94e53a
7 changed files with 81 additions and 75 deletions
--- a/index.html
+++ b/index.html
@ -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'
 <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"
 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 {
 }
 #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 {
  }
 }
 /* Vue样式 */
 #main {
  width: 400px;
-  margin-top: 10%;
+  margin-top: 10px auto;
  min-width: 100vh;
  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 @@
 <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 {
 };
 </script>
-<style scoped></style>
+<style scoped>
 #Navin {
    height: 40px;
 }
 </style>
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@ -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 {
 }
 </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>