Skip to content

platform / fanxing_new

Go to a project
Commit b7de4728 by 夏新然
Options

登录页效果

1 parent c0c958d8
Inline Side-by-side
Showing 4 changed files with 50 additions and 17 deletions
package-lock.json 0 → 100644
This diff could not be displayed because it is too large.
package.json
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
"js-sha1": "^0.6.0", "js-sha1": "^0.6.0",
"moment": "^2.24.0", "moment": "^2.24.0",
"ol": "^6.1.1", "ol": "^6.1.1",
"particles.js": "^2.0.0",
"vue": "^2.6.10", "vue": "^2.6.10",
"vue-router": "^3.1.3", "vue-router": "^3.1.3",
"vuex": "^3.0.1" "vuex": "^3.0.1"
...@@ -39,6 +40,7 @@ ...@@ -39,6 +40,7 @@
"sass-loader": "^8.0.0", "sass-loader": "^8.0.0",
"stylus": "^0.54.7", "stylus": "^0.54.7",
"stylus-loader": "^3.0.2", "stylus-loader": "^3.0.2",
"vue-particles": "^1.0.9",
"vue-template-compiler": "^2.6.10" "vue-template-compiler": "^2.6.10"
}, },
"eslintConfig": { "eslintConfig": {
......
src/main.js
...@@ -19,6 +19,10 @@ Vue.prototype.$moment = moment; ...@@ -19,6 +19,10 @@ Vue.prototype.$moment = moment;
Vue.prototype.$buildCode = buildCode; Vue.prototype.$buildCode = buildCode;
Vue.prototype.oParse = new XML.ObjTree(); Vue.prototype.oParse = new XML.ObjTree();
Vue.prototype.axios=axios; Vue.prototype.axios=axios;
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
Vue.use(api); Vue.use(api);
Vue.use(ElementUI, { size: "small", zIndex: 3000 }); Vue.use(ElementUI, { size: "small", zIndex: 3000 });
Vue.use(resetCss); Vue.use(resetCss);
......
src/views/Login.vue
<template> <template>
<div id="login" :style="{height:innerHeight+'px'}"> <div id="login" :style="{height:innerHeight+'px'}">
<div class="box"> <vue-particles
<h1>视频分析综合管理平台</h1> color="#dedede"
<div style="width: 60%;margin: 0 auto;"> :particleOpacity="0.7"
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm"> :particlesNumber="80"
<el-form-item label=" " prop="username"> shapeType="circle"
<el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input> :particleSize="4"
</el-form-item> linesColor="#dedede"
<el-form-item label=" " prop="password"> :linesWidth="1"
<el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input> :lineLinked="true"
</el-form-item> :lineOpacity="0.4"
<el-form-item> :linesDistance="150"
<el-button type="primary" @click="submitForm('ruleForm')">登 录</el-button> :moveSpeed="3"
</el-form-item> :hoverEffect="true"
</el-form> hoverMode="grab"
:clickEffect="true"
clickMode="push"
>
</vue-particles>
<div class="box">
<h1>视频分析综合管理平台</h1>
<div style="width: 60%;margin: 0 auto;">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
<el-form-item label=" " prop="username">
<el-input v-model="ruleForm.username" placeholder="请输入用户名"></el-input>
</el-form-item>
<el-form-item label=" " prop="password">
<el-input v-model="ruleForm.password" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">登 录</el-button>
</el-form-item>
</el-form>
</div>
</div> </div>
</div>
</div> </div>
</template> </template>
...@@ -219,6 +237,15 @@ import types from '../store/types.js' ...@@ -219,6 +237,15 @@ import types from '../store/types.js'
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style scoped lang="scss">
#particles{
position: absolute;
width: 100%;
height: 100%;
background-color: #b61924;
background-repeat: no-repeat;
background-size: cover;
background-position: 50% 50%;
}
.loginTitle{ .loginTitle{
height:60px; height:60px;
background: #dcdcdc; background: #dcdcdc;
...@@ -273,7 +300,7 @@ import types from '../store/types.js' ...@@ -273,7 +300,7 @@ import types from '../store/types.js'
} }
.box{ .box{
width: 25%; width: 25%;
position: relative; position: absolute;
left: 52%; left: 52%;
top: 20%; top: 20%;
} }
...@@ -306,7 +333,7 @@ import types from '../store/types.js' ...@@ -306,7 +333,7 @@ import types from '../store/types.js'
} }
.box{ .box{
width: 25%; width: 25%;
position: relative; position: absolute;
left: 57%; left: 57%;
top: 20%; top: 20%;
} }
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!