<template>
|
<div class="passport">
|
<div class="container">
|
<div class="wrap">
|
<a-alert v-if="tokenJudge" message="该账号在别处登录！" type="error" show-icon
|
closable
|
:after-close="handleClose"
|
style="width: 280px; height: 40px; position: fixed; top: 20px;left: 43%"/>
|
<div class="top">
|
<div class="head">
|
<img class="logo" :src="require('/public/assets/logo.png')">
|
<span class="title">七星瓢虫环境监测管理系统</span>
|
</div>
|
<div class="desc">敬天爱人 乐业安道</div>
|
</div>
|
<router-view></router-view>
|
|
<global-footer >
|
Copyright
|
<i class="anticon anticon-copyright"></i> 2021
|
<a href="//www.7drlb.com/" target="_blank">七星瓢虫环境科技</a>
|
</global-footer>
|
<!---->
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script lang="ts">
|
import {
|
Component,
|
Prop,
|
Vue,
|
} from 'vue-property-decorator';
|
import {
|
State,
|
Mutation,
|
namespace,
|
} from 'vuex-class';
|
|
import GlobalFooter from '@/components/globalfooter/Index.vue';
|
|
@Component({
|
components: {
|
GlobalFooter,
|
},
|
})
|
export default class PassportLayout extends Vue {
|
private tokenJudge: boolean = false
|
|
private links: any[] = [{
|
title: '帮助',
|
href: '//www.jianshu.com/u/f6ef3106bada',
|
blankTarget: true,
|
},
|
{
|
title: '隐私',
|
href: '//www.jianshu.com/u/f6ef3106bada',
|
blankTarget: true,
|
},
|
{
|
title: '条款',
|
href: '//www.jianshu.com/u/f6ef3106bada',
|
blankTarget: true,
|
},
|
];
|
constructor() {
|
super();
|
}
|
private created() {
|
if (this.$ss.get('token') === '') {
|
this.tokenJudge = true
|
setTimeout(() => {
|
this.tokenJudge = false
|
}, 2000)
|
this.$ss.set('token', null)
|
}
|
}
|
private handleClose() {
|
this.tokenJudge = false
|
}
|
|
}
|
</script>
|
|
|
<style lang="less">
|
@import '../../assets/theme/styles/index.less';
|
|
.passport {
|
.container {
|
display: flex;
|
flex-direction: column;
|
min-height: 100%;
|
background: #f0f2f5;
|
height: 100vh;
|
}
|
|
.wrap {
|
padding: 32px 0;
|
flex: 1;
|
}
|
|
.ant-form-item {
|
margin-bottom: 24px;
|
}
|
|
@media (min-width: @screen-md-min) {
|
.container {
|
background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
|
background-repeat: no-repeat;
|
background-position: center 110px;
|
background-size: 100%;
|
height: 100vh;
|
}
|
|
.wrap {
|
padding: 112px 0 24px;
|
}
|
}
|
|
.top {
|
text-align: center;
|
}
|
|
.header {
|
height: 44px;
|
line-height: 44px;
|
|
a {
|
text-decoration: none;
|
}
|
}
|
|
.logo {
|
height: 44px;
|
margin-right: 16px;
|
}
|
|
.title {
|
font-size: 33px;
|
color: @heading-color;
|
font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
|
font-weight: 600;
|
position: relative;
|
vertical-align: middle;
|
}
|
|
.desc {
|
font-size: @font-size-base;
|
color: @text-color-secondary;
|
margin-top: 12px;
|
margin-bottom: 40px;
|
}
|
}
|
</style>
|
