Skip to content

D
donkey
Commit aace16ee authored by caicaicai's avatar caicaicai
Browse files
Options

登陆页面编写

parent adc72081
Hide whitespace changes
Inline Side-by-side
Showing with 206 additions and 116 deletions
src/App.vue
View file @ aace16ee
<template> <template>
<div id="app"> <div id="App">
<div id="nav"> <router-view></router-view>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div> </div>
</template> </template>
<style lang="scss"> <script>
#app {
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;
a { }
font-weight: bold; </script>
color: #2c3e50;
&.router-link-exact-active { <style>
color: #42b983; body::-webkit-scrollbar{
} display:none;
}
} }
</style> </style>
src/axios/api.js
View file @ aace16ee
//-----------------登录-------------------- //-----------------登录--------------------
export const login = 'xxxx/login'; //登录 export const login = 'xxx/login'; //登录
\ No newline at end of file \ No newline at end of file
src/components/HelloWorld.vue deleted 100644 → 0
View file @ adc72081
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
src/components/homepage.vue 0 → 100644
View file @ aace16ee
<template>
<div>主页</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
\ No newline at end of file
src/components/login.vue 0 → 100644
View file @ aace16ee
<template>
<div class="backGround">
<div class="projectName">{{$store.state.projectName}}</div>
<div class="loginBody">
<div class="loginTitle">登录窗口</div>
<div class="loginText">欢迎登录后台系统</div>
<div class="loginInoputs">
<div class="userInpBody">
<div class="userIcon"><img src="../imgs/yonghuming.png"></div>
<input type="text" id="userInp" placeholder="输入你的用户名" v-model="userName">
</div>
<div class="passWordInpBody">
<div class="passWordIcon"><img src="../imgs/mima.png"></div>
<input type="password" id="passWordInp" placeholder="输入你的密码" v-model="password">
</div>
<button class="loginBtn" @click="LoginInitiation">安全登录</button>
</div>
</div>
</div>
</template>
<script>
import { httpGet } from "@/common/httpBean.js"
import login from "@/axios/api.js"
export default {
data() {
return {
userName:"",
password:"",
}
},
methods:{
LoginInitiation(){
if(this.userName == "" || this.password == ""){
alert("请输入正确的用户名或密码!")
}else{
// httpGet(login,{name:123,id:123}).then( res => {
// console.log(res);
// //localStorage.getItem()
// })
this.$router.push({path: 'homepage',query:{ index:this.userName}});
}
}
}
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
.backGround {
padding-top: 100px;
box-sizing: border-box;
height: 100vh;
width: 100vw;
background-image: url("../imgs/bg.png");
}
.projectName{
text-align: center;
font-size: 70px;
font-weight: 600;
background-image:-webkit-linear-gradient(bottom,rgb(36,162,254),rgb(255,255,255));
background-clip:text;
-webkit-text-fill-color:transparent;
letter-spacing: 3px;
}
.loginBody{
position: relative;
padding-top: 73px;
box-sizing: border-box;
margin: 0 auto;
width: 60%;
height: 85%;
background-image: url("../imgs/kuang.png");
background-size: 100% 100%;
}
.loginTitle{
margin-left: 50px;
text-align: center;
font-size: 30px;
color:rgb(47,213,255);
letter-spacing: 6px;
}
.loginText{
margin-top: 30px;
margin-left: 50px;
text-align: center;
font-size: 35px;
color:rgb(151,227,244);
letter-spacing: 6px;
margin-bottom: 30px;
}
.loginInoputs{
position: absolute;
right: 120px;
width: 400px;
height: 300px;
}
.userInpBody{
display: flex;
padding: 2px;
border: 1px solid rgb(18,70,113);
margin-bottom: 20px;
}
.userIcon{
padding: 15px;
box-sizing: border-box;
width: 60px;
height: 60px;
background-color: rgb(18,70,113);
}
#userInp{
margin-left: 10px;
width: 80%;
background: none;
outline: none;
border: none;
font-size: 20px;
color: rgb(47,213,255);
letter-spacing: 3px;
}
::-webkit-input-placeholder { /* WebKit browsers */
color:rgb(47,213,255);
}
.passWordInpBody{
display: flex;
padding: 2px;
border: 1px solid rgb(18,70,113);
margin-bottom: 50px;
}
.passWordIcon{
padding: 15px;
box-sizing: border-box;
width: 60px;
height: 60px;
background-color: rgb(18,70,113);
}
#passWordInp{
margin-left: 10px;
width: 80%;
background: none;
outline: none;
border: none;
font-size: 20px;
color: rgb(47,213,255);
letter-spacing: 3px;
}
.loginBtn{
width: 100%;
height: 60px;
font-size: 22px;
background-color:rgb(24,180,255);
border: 0px;
color: white;
letter-spacing: 10px;
cursor: pointer;
}
</style>
\ No newline at end of file
src/router/index.js
View file @ aace16ee
import Vue from 'vue' import Vue from 'vue'
import VueRouter from 'vue-router' import VueRouter from 'vue-router'
import Home from '../views/Home.vue' import login from '../components/login.vue'
import homepage from "../components/homepage.vue";
Vue.use(VueRouter) Vue.use(VueRouter)
const routes = [ const routes = [
{ {
path: '/', path: '/login',
name: 'Home', name: 'login',
component: Home component: login
},
{
path: '/homepage',
name: 'homepage',
component: homepage
}, },
// {
// 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: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
// },
{ {
path: '/about', name: 'default',
name: 'About', path: '*',
// route level code-splitting redirect: '/login'
// 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/About.vue')
} }
] ]
......
src/store/index.js
View file @ aace16ee
...@@ -5,6 +5,8 @@ Vue.use(Vuex) ...@@ -5,6 +5,8 @@ Vue.use(Vuex)
export default new Vuex.Store({ export default new Vuex.Store({
state: { state: {
projectName:"鑫海数字矿山后台管理系统",
}, },
mutations: { mutations: {
}, },
......
src/views/About.vue deleted 100644 → 0
View file @ adc72081
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
src/views/Home.vue deleted 100644 → 0
View file @ adc72081
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
components: {
HelloWorld
}
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment