保存进度!

This commit is contained in:
Kane Wang 2022-12-14 18:34:45 +08:00
parent e5f066dc3b
commit 7c9e1a682b
13 changed files with 847 additions and 330 deletions

File diff suppressed because it is too large Load Diff

View File

@ -10,6 +10,10 @@
"dependencies": { "dependencies": {
"core-js": "^3.8.3", "core-js": "^3.8.3",
"element-plus": "^2.2.26", "element-plus": "^2.2.26",
"sass": "^1.56.2",
"sass-loader": "^13.2.0",
"scss": "^0.2.4",
"scss-loader": "^0.0.1",
"vue": "^3.2.13", "vue": "^3.2.13",
"vue-router": "^4.0.3", "vue-router": "^4.0.3",
"vuex": "^4.0.0" "vuex": "^4.0.0"
@ -24,7 +28,6 @@
"@vue/cli-service": "~5.0.0", "@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0", "eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3", "eslint-plugin-vue": "^8.0.3",
"sass": "^1.32.7", "vue-cli-plugin-element-plus": "~0.0.13"
"sass-loader": "^12.0.0"
} }
} }

View File

@ -1,17 +1,27 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang=""> <html lang="">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't
work properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript> </noscript>
<div id="app"></div> <div id="app" v-cloak></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
<style>
.v-cloak {
display: none;
}
</style>
</html> </html>

View File

@ -1,30 +1,27 @@
<!--
* @Author: Kane
* @Date: 2022-12-14 15:12:46
* @LastEditors: Kane
* @LastEditTime: 2022-12-14 17:03:58
* @FilePath: \admin_system\src\App.vue
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template> <template>
<nav> <router-view></router-view>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</nav>
<router-view/>
</template> </template>
<style lang="scss"> <script>
#app { // import HelloWorld from "./components/HelloWorld.vue";
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
nav { export default {
padding: 30px; name: "App",
components: {
// HelloWorld,
},
};
</script>
a { <style>
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style> </style>

View File

@ -0,0 +1,15 @@
/*
* @Author: Kane
* @Date: 2022-11-12 23:32:20
* @LastEditors: Kane
* @LastEditTime: 2022-11-29 13:21:49
* @FilePath: \hello-cli\src\assets\css\app.css
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
*/
@import url("colors.css");
body {
background-color: #f4f5f7ff;
}

View File

@ -0,0 +1,24 @@
/*
* @Author: Kane
* @Date: 2022-11-12 23:22:59
* @LastEditors: Kane
* @LastEditTime: 2022-12-05 01:07:18
* @FilePath: \hello-cli\src\assets\css\colors.css
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
*/
html {
--backupground-color: #f4f5f7ff;
--btn-color-blue: #307dbe;
--btn-color-yellow: #f7b24d;
--btn-color-green: #5bad60;
--btn-color-red: #e56651;
--btn-font-color: #fff;
--input-focus-color: #e56651;
/* 标题栏背景色 */
--banner-background-color: #1d74b2;
}

View File

@ -0,0 +1,17 @@
/*
* @Author: Kane
* @Date: 2022-12-05 00:07:49
* @LastEditors: Kane
* @LastEditTime: 2022-12-05 00:48:04
* @FilePath: \hello-cli\src\assets\css\global.css
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
*/
html,
body,
#app {
/* padding: 0px; */
margin: 0px;
overflow: hidden;
}

View File

@ -0,0 +1,57 @@
/*
* @Author: Kane
* @Date: 2022-10-12 08:49:14
* @LastEditors: Kane
* @LastEditTime: 2022-11-12 23:34:06
* @FilePath: \car_dealer\css\kane.css
* @Description: vue学习用的样式表
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
*/
html {
--backupground-color: #f4f5f7ff;
--btn-color-blue: #307dbe;
--btn-color-yellow: #f7b24d;
--btn-color-green: #5bad60;
--btn-color-red: #e56651;
--btn-font-color: #fff;
}
#root,
#app {
padding: 50px;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
hr {
background-color: steelblue;
border: none;
height: 3px;
/* width: 100% */
}
/* .test {
width : 110vw;
height : 100vh;
border : 1px solid red;
overflow : auto;
} */
input[type="text"] {
border: none;
outline: solid 2px #e56651;
/* font-size: 2rem; */
}
label {
display: inline-block;
font-size: 2rem;
margin-top: 15px;
}

View File

@ -0,0 +1,379 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box;
/* 1 */
height: 0;
/* 1 */
overflow: visible;
/* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none;
/* 1 */
text-decoration: underline;
/* 2 */
text-decoration: underline dotted;
/* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: 1.15;
/* 1 */
margin: 0;
/* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input {
/* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select {
/* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box;
/* 1 */
color: inherit;
/* 2 */
display: table;
/* 1 */
max-width: 100%;
/* 1 */
padding: 0;
/* 3 */
white-space: normal;
/* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

View File

@ -0,0 +1,20 @@
:root {
font-size: 1em;
box-sizing: border-box;
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
.pointer {
cursor: pointer;
}

View File

@ -1,6 +1,25 @@
/*
* @Author: Kane
* @Date: 2022-12-14 15:12:46
* @LastEditors: Kane
* @LastEditTime: 2022-12-14 17:47:32
* @FilePath: \admin_system\src\main.js
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
*/
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import store from './store' import store from './store'
// import installElementPlus from './plugins/element'
import("./css/root.css");
import("./css/normalize.css");
import("element-plus/dist/index.css");
createApp(App).use(store).use(router).mount('#app') import ElementPlus from "element-plus";
const app = createApp(App)
// installElementPlus(app)
app.use(ElementPlus);
app.use(store).use(router).mount('#app')

View File

@ -1,21 +1,27 @@
/*
* @Author: Kane
* @Date: 2022-12-14 15:12:46
* @LastEditors: Kane
* @LastEditTime: 2022-12-14 16:19:17
* @FilePath: \admin_system\src\router\index.js
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
*/
import { createRouter, createWebHashHistory } from 'vue-router' import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [ const routes = [
{ {
path: '/', path: "/",
name: 'home', name: "Home",
component: HomeView redirect: "Login",
}, },
{ {
path: '/about', path: "/login",
name: 'about', name: "Login",
// route level code-splitting component: () => import("../views/account/Login.vue"),
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
} }
] ];
const router = createRouter({ const router = createRouter({
history: createWebHashHistory(), history: createWebHashHistory(),

View File

@ -0,0 +1,104 @@
<!--
* @Author: Kane
* @Date: 2022-12-14 15:23:54
* @LastEditors: Kane
* @LastEditTime: 2022-12-14 18:04:50
* @FilePath: \admin_system\src\views\account\login.vue
* @Description:
*
* Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
<div id="login">
<div class="form-warp">
<ul class="menu-tab">
<li class="current">登录</li>
<li>注册</li>
</ul>
<el-form ref="form" :model="form">
<el-form-item>
<label class="form-label">用户名</label>
<el-input type="text" v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item>
<label class="form-label">密码</label>
<el-input type="password" v-model="loginForm.password"></el-input>
</el-form-item>
<el-form-item>
<label class="form-label">验证码</label>
<el-row :gutter="30">
<el-col :span="14">
<el-input type="text"></el-input>
</el-col>
<el-col :span="10">
<el-button type="danger" class="el-button-block">获取验证码</el-button>
</el-col>
</el-row>
</el-form-item>
<el-form-item>
<el-button type="primary" class="el-button-block">立即创建</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "loginPage",
data() {
return {
loginForm: {
username: "",
password: "",
}
}
}
};
</script>
<style lang="scss" scoped>
#login {
height: 100vh;
background-color: #344a5f;
padding-top: 50px;
}
.form-warp {
width: 320px;
padding: 30px;
margin: auto;
background-color: #ffffff10;
border-radius: 5px;
}
.menu-tab {
text-align: center;
margin-bottom: 15px;
li {
display: inline-block;
padding: 10px 24px;
margin: 0 10px;
color: #fff;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
&.current {
background-color: rgba(0, 0, 0, 0.1);
}
}
}
.form-label {
display: block;
color: #fff;
font-size: 14px;
}
.el-button-block {
// display: block;
width: 100%;
}
</style>