vue科大稽核系统登录页面
Posted wcss
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue科大稽核系统登录页面相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>规则列表</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="/vue/css/index.css">
<!-- this is only for the GoJS Samples framework -->
<script src="/vue/js/vue.js"></script>
<script src="/vue/js/vuex.js"></script>
<script src="/vue/js/index.js"></script>
<script src="/vue/js/router.js"></script>
<script src="/vue/js/axios.min.js"></script>
<script src="/vue/js/moment.js"></script>
<script src="/vue/component/check.js"></script>
<title>用户登录</title>
</head>
<body class="backImage" style="margin:0 0 0 0;" >
<div id="app" style="margin:0 0 0 0;">
<el-container style="margin:0 0 0 0;">
<el-header height="200" class="headImag">
<el-row style="color:#fff">
<el-col :span="2" >
<img src="../../images1/u761.png" style="float:right; height:100px"/>
</el-col>
<el-col :span="6" style="margin-left:15px;margin-top:15px">
<div >
<div >
<span style="font-size:45px; font-style:italic;letter-spacing:8px;" >电 子 科 技 大 学</span>
</div>
<div style="font-size:1px;-webkit-transform:scale(0.7);margin-left:-111px">
<span >university of electronic science and technology of china</span>
</div>
</div>
</el-col>
<el-col :span="1" style="margin-left:-230px">
<img src="../../images1/u773.png" style="float:right; height:100px"/>
</el-col>
<el-col :span="3" style="margin-left:-85px;margin-top:30px">
<span style="font-size:30px;margin-top:85px">计划财务处</span></br>
<span style="font-size:10px;">Financial Affairs Office</span>
</el-col>
<el-col :span="6" style="margin-left:15px;margin-top:15px">
<span style="font-size:60px;margin-top:85px">财务系统</span>
</el-col>
</el-row>
</el-header>
<el-main>
<div class="backImage1">
<div style="margin-top:130px;margin-left:120px;margin-right:60px">
<el-input v-model="input" placeholder="请输入内容"></el-input>
</div>
<div style="margin-top:15px;margin-left:120px;margin-right:60px">
<el-input v-model="input" placeholder="请输入用户名"></el-input>
</div>
<div style="margin-top:20px;margin-left:120px;margin-right:60px">
<el-input v-model="input" placeholder="请输入密码"></el-input>
</div>
<div style="margin-right:50px;margin-top:50px;margin-left:30px">
<el-button style="width:370px;height:60px; margin-right:50px;" type="primary">登录系统</el-button>
</div>
</div>
</el-main>
</el-container>
</div>
</body>
<style>
.backImage
background-image: url(‘../../images1/u754.png‘);
background-size: 100%;
.backImage1
background-image: url(‘../../images1/u756.png‘);
background-size: cover;
float:right;
margin-right:200px;
margin-top:200px;
height:414px;
width:434px;
.headImag
background-image: url(‘../../images1/u759.png‘);
padding: 35px;
background-size: cover;
</style>
<script th:inline="javascript">
var app = new Vue(
el : ‘#app‘,
data ()
return
input:‘‘,
//分页器
,
methods:
);
</script>
以上是关于vue科大稽核系统登录页面的主要内容，如果未能解决你的问题，请参考以下文章
前端Vue+Element UI案例：通用后台管理系统-登陆页面功能：登录权限跳转路由守卫退出
vue_cli下开发一个简单的模块权限系统之建立登录页面并且实现在浏览器输入地址出现内容