|
|
@@ -1 +1,169 @@
|
|
|
-<template>login</template>
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div class="login-box">
|
|
|
+ <div class="left">
|
|
|
+ <div class="left-up-icon"></div>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="title">
|
|
|
+ <div class="title-left"></div>
|
|
|
+ <div class="title-mid">丨</div>
|
|
|
+ <div class="title-right">智慧运力运维平台</div>
|
|
|
+ </div>
|
|
|
+ <div class="form-container">
|
|
|
+ <el-form :model="ruleForm" :rules="rules">
|
|
|
+ <el-form-item prop="phone">
|
|
|
+ <el-input placeholder="请输入手机号" v-model="ruleForm.phone">
|
|
|
+ <template v-slot:prepend>
|
|
|
+ <el-button icon="el-icon-mobile-phone"></el-button>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="password">
|
|
|
+ <el-input placeholder="请输入密码" v-model="ruleForm.password">
|
|
|
+ <template v-slot:prepend>
|
|
|
+ <el-button icon="el-icon-lock"></el-button>
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ style="width: 384px; height: 48px; border-radius: 2px"
|
|
|
+ type="primary"
|
|
|
+ @click="login('ruleForm')"
|
|
|
+ >
|
|
|
+ 登录
|
|
|
+ </el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div @click="goBeian" class="copyright">
|
|
|
+ Copyright © 2021 河南省汇很多科技有限公司 豫ICP备 2021029101 号
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ ruleForm: {
|
|
|
+ phone: "",
|
|
|
+ password: "",
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ phone: [
|
|
|
+ { required: true, message: "请输入手机号", trigger: "blur" },
|
|
|
+ { min: 11, max: 11, message: "请正确输入手机号", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ password: [
|
|
|
+ { required: true, message: "请输入密码", trigger: "blur" },
|
|
|
+ { min: 6, max: 20, message: "请正确输入手机号", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ login() {
|
|
|
+ this.$store.commit("changeLogin", true);
|
|
|
+ localStorage.setItem("userid", 3);
|
|
|
+ this.$router.push({ path: "/" });
|
|
|
+ },
|
|
|
+ goBeian() {
|
|
|
+ window.open("https://beian.miit.gov.cn/");
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped>
|
|
|
+.container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgb(22, 149, 207);
|
|
|
+}
|
|
|
+
|
|
|
+.login-box {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ top: calc(50% - 255px);
|
|
|
+ left: calc(50% - 478px);
|
|
|
+ width: 966px;
|
|
|
+ height: 508px;
|
|
|
+ border-radius: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.left {
|
|
|
+ height: 100%;
|
|
|
+ width: 450px;
|
|
|
+ background: rgb(143, 158, 206);
|
|
|
+}
|
|
|
+
|
|
|
+.left-up-icon {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: 1px solid grey;
|
|
|
+ margin: 24px;
|
|
|
+}
|
|
|
+
|
|
|
+.right {
|
|
|
+ height: 100%;
|
|
|
+ width: 516px;
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ width: 384px;
|
|
|
+ height: 38px;
|
|
|
+ display: flex;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.title-left {
|
|
|
+ height: 38px;
|
|
|
+ width: 105px;
|
|
|
+ background: url(https://6875-huihenduo-2gx127w7f837b584-1255802371.tcb.qcloud.la/miniapp-static/%E6%B1%87%E5%BE%88%E5%A4%9Alogo-%E5%B7%A6%E5%8F%B3.png?sign=22b9335300bbef8d04da1b9b75589f7e&t=1634706935);
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+}
|
|
|
+
|
|
|
+.title-mid {
|
|
|
+ font-size: 25px;
|
|
|
+ color: #e4e4e4;
|
|
|
+ margin: 0 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.title-right {
|
|
|
+ font-size: 28px;
|
|
|
+ font-family: Adobe Heiti Std;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #434343;
|
|
|
+ line-height: 38px;
|
|
|
+}
|
|
|
+
|
|
|
+.form-container {
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 60px;
|
|
|
+ width: 384px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-input-group {
|
|
|
+ border: 1px solid #0094fe !important;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+.copyright {
|
|
|
+ position: absolute;
|
|
|
+ width: 520px;
|
|
|
+ bottom: 70px;
|
|
|
+ left: calc(50% - 250px);
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #333333;
|
|
|
+ opacity: 0.8;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+</style>
|
