<template>
|
<div class="loginBox">
|
<!-- 粒子特效 -->
|
<!-- <vue-particles
|
color="#dedede"
|
:particleOpacity="0.7"
|
:particlesNumber="80"
|
shapeType="circle"
|
:particleSize="4"
|
linesColor="#dedede"
|
:linesWidth="1"
|
:lineLinked="true"
|
:lineOpacity="0.4"
|
:linesDistance="150"
|
:moveSpeed="3"
|
:hoverEffect="true"
|
hoverMode="grab"
|
:clickEffect="true"
|
clickMode="push"
|
>
|
</vue-particles> -->
|
<div class="loginEarth">
|
<iframe
|
id="ifream"
|
style="border: none"
|
width="100%"
|
height="100%"
|
v-bind:src="reportUrl"
|
></iframe>
|
</div>
|
<div class="title_img">
|
<h3>月球大数据地理空间分析展示平台</h3>
|
</div>
|
<div class="loginMenu">
|
<div class="login_title">
|
<span>用户登录</span>
|
</div>
|
<el-form ref="loginForm" class="loginForm">
|
<el-form-item prop="uid">
|
<el-input
|
placeholder="输入登录账号"
|
class="nobr"
|
autocomplete="off"
|
:prefix-icon="User"
|
>
|
</el-input>
|
</el-form-item>
|
|
<el-form-item prop="pwd">
|
<el-input
|
show-password
|
placeholder="请输入登录密码"
|
class="nobr"
|
autocomplete="off"
|
:prefix-icon="Lock"
|
>
|
</el-input>
|
</el-form-item>
|
|
<el-form-item required>
|
<el-col :span="18">
|
<el-form-item prop="validCode">
|
<el-input
|
placeholder="请输入验证码（忽略大小写）"
|
class="nobr"
|
></el-input>
|
</el-form-item>
|
</el-col>
|
|
<el-col :span="6" align="right"> </el-col>
|
</el-form-item>
|
|
<el-form-item>
|
<el-button
|
type="primary"
|
class="nobr loginbtn btnbox"
|
@click="setLogin()"
|
>登录</el-button
|
>
|
</el-form-item>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
<script setup lang="ts">
|
import router from "@/router";
|
import { User, Lock } from "@element-plus/icons-vue";
|
import {
|
ref,
|
onMounted,
|
onBeforeUnmount,
|
reactive,
|
defineProps,
|
defineEmits,
|
} from "vue";
|
const reportUrl = ref("");
|
const startURL = () => {
|
reportUrl.value = "/mapscreen/index.html";
|
};
|
const setLogin = () => {
|
router.push("/");
|
};
|
|
onMounted(() => {
|
startURL();
|
});
|
</script>
|
<style lang="less" scoped>
|
.loginBox {
|
width: 100%;
|
height: 100%;
|
position: relative;
|
background: url("../assets/img/moon-bg.png") no-repeat;
|
background-size: 100% 100%;
|
.loginEarth {
|
width: 100%;
|
height: 100%;
|
top: 3%;
|
left: 1%;
|
position: absolute;
|
}
|
.loginMenu {
|
position: absolute;
|
right: 16%;
|
top: 50%;
|
transform: translateY(-50%);
|
padding: 40px;
|
background: rgba(7, 8, 14, 0.8);
|
border: 1px solid #d6e4ff;
|
border-radius: 8px;
|
.login_title {
|
font-size: 25px;
|
font-family: Microsoft YaHei;
|
font-weight: bold;
|
color: #689cff;
|
}
|
|
.loginForm {
|
margin-top: 20px;
|
|
width: 385px;
|
}
|
/deep/.el-form-item {
|
/* margin-bottom: 12px; */
|
height: 41px;
|
}
|
/deep/ .el-input .el-input__inner {
|
/* background: rgba(80, 152, 255, 0.24); */
|
border-color: rgba(0, 0, 0, 0.1);
|
color: #000;
|
}
|
|
/deep/ .el-input .el-input-group__prepend {
|
border: 0;
|
padding: 0 !important;
|
}
|
.loginbtn {
|
width: 384px;
|
height: 50px;
|
}
|
}
|
.title_img {
|
position: absolute;
|
left: 15%;
|
top: 8%;
|
width: 20%;
|
/* transform: translateX(-50%); */
|
h3 {
|
color: #fff;
|
font-size: 40px;
|
white-space: nowrap;
|
}
|
}
|
}
|
</style>
|
