Skip to content

F
founder_vue
Commit 6ca7572f by chenqiang
Options

栏目、模型、门户,首页

parent 2cdbc8ae
Showing with 402 additions and 12 deletions
public/index.html
......@@ -7,7 +7,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<body style="height: 100vh;">
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
......
src/assets/img/login_bg.png
src/assets/img/login_bg.png

17.9 KB | W: | H:

src/assets/img/login_bg.png

17.4 KB | W: | H:

src/assets/img/login_bg.png
src/assets/img/login_bg.png
src/assets/img/login_bg.png
src/assets/img/login_bg.png
  • 2-up
  • Swipe
  • Onion skin
src/components/headerBox.vue
......@@ -10,16 +10,72 @@
<el-badge :value="12" class="item">
<div class="iconfont iconxiaoxitongzhi paddingLeft32"></div>
</el-badge>
<div class="iconfont icontuichuzhuxiao paddingLeft32">
<div style="padding-left: 10px;cursor: pointer;" title="退出" @click="LoginOut" v-if="isFalg">
<span class="iconfont icontuichuzhuxiao paddingLeft32"></span>
欢迎您：{{userInfo.unitname}}&nbsp;&nbsp;&nbsp;{{userInfo.true_name}}
</div>
<div @click="getLogin" style="margin-left: 32px;cursor: pointer;" v-else>
<img src="@/assets/img/tb_login.png" alt="">
<span style="padding-left: 5px;">登录</span>
</div>
<div style="padding-left: 10px;">欢迎您：重庆市公安局 系统管理员</div>
</div>
<!--登录弹窗-->
<login v-show="sptc" @sptcFn="sptcFn"/>
</div>
</template>
<script>
import login from '@c/login.vue'
export default {
name: 'headerBox'
name: 'headerBox',
components:{login},
data() {
return {
sptc: false,
isFalg: localStorage.getItem('isFalg') || false,
userInfo: JSON.parse(localStorage.getItem('userInfo')) || {}
}
},
created() {
console.log(localStorage.getItem('isFalg'))
},
methods: {
sptcFn(val){
this.sptc = val
this.isFalg = true
this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
},
// 点击登录按钮
getLogin() {
this.sptc = true
},
// 点击退出登录
LoginOut() {
let self = this
self.$confirm('此操作将退出登录状态, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
self.$message({
type: 'success',
message: '退出登录成功!'
});
self.isFalg = false
localStorage.clear()
self.$router.push('/sy')
self.userInfo = {}
self.$forceUpdate()
// window.opener.location.reload()
// window.close()
}).catch(() => {
self.$message({
type: 'info',
message: '已取消退出登录'
});
});
}
}
}
</script>
......
src/components/headerBoxMh.vue
......@@ -2,23 +2,73 @@
<div class="header_box">
<div class="header_box_left">
<img src="@/assets/img/jc.png" alt="">
<span style="padding-left: 12px;">欢迎您：重庆市公安局<span style="padding-left: 15px;">系统管理员</span></span>
<span style="padding-left: 12px;">欢迎您：{{userInfo.unitname}}<span style="padding-left: 15px;">{{userInfo.true_name}}</span></span>
</div>
<div class="header_box_right">
<!-- <div class="paddingRight60">当前登录人数：4</div>-->
<div class="iconfont iconlianjie paddingLeft32"></div>
<el-badge :value="12" class="item">
<div class="iconfont iconxiaoxitongzhi paddingLeft32"></div>
</el-badge>
<!-- <div class="iconfont icondapingzhongduan paddingLeft32"></div>-->
<div class="iconfont icontuichuzhuxiao paddingLeft32"></div>
<div @click="LoginOut" class="iconfont icontuichuzhuxiao paddingLeft32" v-if="isFalg"></div>
<div @click="getLogin" style="margin-left: 32px;cursor: pointer;" v-else>
<img src="@/assets/img/tb_login.png" alt="">
<span style="padding-left: 5px;">登录</span>
</div>
</div>
<!--登录弹窗-->
<login v-show="sptc" @sptcFn="sptcFn"/>
</div>
</template>
<script>
import login from '@c/login.vue'
export default {
name: 'headerBox'
name: 'headerBox',
components:{login},
data() {
return {
sptc: false,
isFalg: localStorage.getItem('isFalg') || false,
userInfo: JSON.parse(localStorage.getItem('userInfo')) || {}
}
},
methods: {
sptcFn(val){
this.sptc = val
this.isFalg = true
this.userInfo = JSON.parse(localStorage.getItem('userInfo'))
},
// 点击登录按钮
getLogin() {
this.sptc = true
},
// 点击退出登录
LoginOut() {
let self = this
self.$confirm('此操作将退出登录状态, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
self.$message({
type: 'success',
message: '退出登录成功!'
});
self.isFalg = false
localStorage.clear()
self.$router.push('/sy')
self.userInfo = {}
self.$forceUpdate()
// window.opener.location.reload()
// window.close()
}).catch(() => {
self.$message({
type: 'info',
message: '已取消退出登录'
});
});
}
}
}
</script>
......@@ -49,12 +99,13 @@ export default {
height: 17px;
cursor: pointer;
}
.paddingRight60{
.paddingRight60 {
padding-right: 60px;
cursor: pointer;
}
/deep/.el-badge__content {
/deep/ .el-badge__content {
background-color: #F56C6C;
border-radius: 10px;
color: #FFF;
......@@ -70,7 +121,7 @@ export default {
/deep/ .is-fixed {
position: absolute;
top: 17px;
top: 17px;
right: 10px;
transform: translateY(-5%) translateX(100%);
}
......
src/components/login.vue 0 → 100644
<template>
<!--登录弹窗-->
<div class="sptc">
<div class="sptc_content">
<div class="account">
<div class="count_bg">
<img src="@/assets/img/login/user.png" alt="">
</div>
<input type="text" placeholder="账号" v-model="formLogin.account">
</div>
<div class="password">
<div class="pwd_bg">
<img src="@/assets/img/login/pwd.png" alt="">
</div>
<input type="password" placeholder="密码" v-model="formLogin.password">
</div>
<div class="tip">*“账号登陆异常，请联系管理员”</div>
<div class="loginBtn" @click="login">登录</div>
<div class="pkiloginBtn" @click="PKIlogin">PKI登录</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'login',
data() {
return {
formLogin: {
account: '',
password: ''
}
}
},
methods: {
/**
* @description: 登录
* @param {*}
* @return {*}
*/
login() {
let self = this
let param = new URLSearchParams()
// 嫌疑人
param.append('userName', self.formLogin.account)
param.append('password', self.formLogin.password)
axios.post('/xzz/loginCq', param).then(res => {
if (res.state == 'success') {
localStorage.setItem('isFalg', true)
localStorage.setItem('userInfo', JSON.stringify(res.list))
self.$emit('sptcFn', false)
self.$router.push('/mhgl')
// let routeData = self.$router.resolve({
// path: '/mhgl',
// })
// window.open(routeData.href, '_blank')
self.$forceUpdate()
}
})
},
login1() {
let self = this
let param = {
userId: localStorage.getItem('userInfo').identitycard,
perurl: localStorage.getItem('userInfo').username,
clientIp: 'ip'
}
axios.post('http://77.1.24.81:9101/login', param).then(res => {
})
},
login2() {
let self = this
let param = {
zjhm: localStorage.getItem('userInfo').identitycard
}
axios.post('http://77.1.24.81:9047/doLogin', param).then(res => {
})
},
login3() {
let self = this
let param = {
zjhm: localStorage.getItem('userInfo').identitycard
}
axios.post('77.1.24.81:9105/xzxt_solr/login', param).then(res => {
})
},
// PKI登录
PKIlogin() {
// this.sptc = false
}
}
}
</script>
<style scoped lang="scss">
.sptc {
position: absolute;
top: 0;
left: 0;
z-index: 9999;
width: 1920px;
height: 1080px;
background-color: rgba(0, 0, 0, 0.5);
.sptc_content {
width: 565px;
height: 558px;
position: relative;
top: 200px;
left: calc(50% - 282.5px);
background-image: url(../assets/img/login/bg.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
.account {
width: 400px;
height: 50px;
background: rgba(34, 115, 225, 0);
position: absolute;
top: 170px;
left: 85px;
display: flex;
.count_bg {
width: 50px;
height: 50px;
background-image: url(../assets/img/login/icon_bg.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
img {
width: 26px;
height: 26px;
}
}
input {
width: 350px;
height: 50px;
border: 1px solid #246ac2;
outline: none;
box-sizing: border-box;
padding: 0 14px;
}
}
.password {
width: 400px;
height: 50px;
background: rgba(34, 115, 225, 0);
position: absolute;
top: 240px;
left: 85px;
display: flex;
.pwd_bg {
width: 50px;
height: 50px;
background-image: url(../assets/img/login/icon_bg.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
img {
width: 26px;
height: 26px;
}
}
input {
width: 350px;
height: 50px;
border: 1px solid #246ac2;
outline: none;
box-sizing: border-box;
padding: 0 14px;
}
}
.tip {
position: absolute;
top: 300px;
left: 82px;
font-size: 14px;
font-family: PingFang SC;
font-weight: 400;
color: #f63737;
}
.loginBtn {
cursor: pointer;
position: absolute;
top: 370px;
left: 84px;
width: 400px;
height: 53px;
background: linear-gradient(-90deg, #0787ff, #00d8ff);
border-radius: 5px 5px 5px 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
font-family: PingFang SC;
font-weight: 400;
color: #ffffff;
}
.pkiloginBtn {
cursor: pointer;
position: absolute;
top: 445px;
left: 84px;
width: 400px;
height: 53px;
border: 1px solid #0787FF;
//background: linear-gradient(-90deg, #0787ff, #00d8ff);
border-radius: 5px 5px 5px 5px;
display: flex;
justify-content: center;
align-items: center;
font-size: 22px;
font-family: PingFang SC;
font-weight: 400;
color: #0787FF;
}
.options {
position: absolute;
top: 397px;
left: 84px;
width: 400px;
display: flex;
justify-content: space-between;
align-items: center;
.left {
cursor: pointer;
height: 16px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #0070d5;
line-height: 5px;
border-bottom: 1px solid #0070d5;
}
.right {
display: flex;
.lxwm,
.help {
cursor: pointer;
height: 16px;
font-size: 16px;
font-family: PingFang SC;
font-weight: 400;
color: #0070d5;
line-height: 5px;
border-bottom: 1px solid #0070d5;
}
.lxwm {
margin-right: 22px;
}
}
}
}
}
</style>
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