走航季度报告模块（待完成）

riku

2025-09-01 b33e28bc2843555355ecad59a80c83e3c26445a3

 src/views/LoginPage.vue

@@ -1,9 +1,208 @@
<template>
  <div>LoginPage</div>
  <div class="background">
    <div class="title-content">飞羽大气环境智能走航监测系统</div>

    <div class="flexbox flex-space-around">
      <img :src="underwayPng" alt="走航监测" class="img-1" />

      <div class="input-box flexbox">
        <div class="flexbox-col align-items" style="margin: auto">
          <div class="flexbox-col input-content flex-space-between">
            <el-form
              :model="formObj"
              ref="formRef"
              :rules="rules"
              label-position="top"
            >
              <el-form-item label="用户名" prop="userName">
                <el-input
                  size="default"
                  v-model="formObj.userName"
                  placeholder="用户名"
                  style="width: 200px"
                />
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input
                  size="default"
                  type="password"
                  show-password
                  v-model="formObj.password"
                  placeholder="密码"
                  style="width: 200px"
                />
              </el-form-item>
            </el-form>
          </div>
          <el-button class="btn-login" @click="login" :loading="loading"
            >登录</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import underwayPng2 from '@/assets/mipmap/underway-2.png';
import underwayPng from '@/assets/mipmap/underway.png';
import { ElMessage } from 'element-plus';

export default {
  name: 'LoginPage'
  data() {
    return {
      loading: false,
      formObj: {},
      rules: {
        userName: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
          }
        ],
        password: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }
        ]
      }
    };
  },
  computed: {
    underwayPng() {
      if (import.meta.env.VITE_DATA_MODE == 'jingan') {
        return underwayPng2;
      } else {
        return underwayPng;
      }
    }
  },
  methods: {
    login() {
      this.loading = true;
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          if (
            (this.formObj.userName == 'jingan' &&
              this.formObj.password == 'jingan123') ||
            (this.formObj.userName == 'feiyu' &&
              this.formObj.password == 'fyhb123')
          ) {
            this.$router.replace('/index/hmode');
          } else {
            ElMessage({
              message: '用户名或密码错误',
              type: 'error'
            });
          }
        }
        setTimeout(() => {
          this.loading = false;
        }, 1000);
      });
    }
  }
};
</script>
<style scoped>
.background {
  background-color: #002378;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 768px;
  min-width: 1366px;
}

.title-content {
  /* position: absolute; */
  width: 100%;
  height: 200px;
  padding: 3vh 0 0 0;
  /* top: 80px;
    left: 0;
    right: 0; */
  color: white;
  font-size: 1.4rem;
  display: flex;
  justify-content: center;
  background-image: url('@/assets/mipmap/title_bg.png');
  background-size: contain;
  background-repeat: no-repeat;
}

.img-1 {
  min-height: 500px;
  height: 60vh;
  /* margin-left: 6vw; */
}

.input-box {
  width: 400px;
  height: 420px;
  /* background-color: aquamarine; */
  background-image: url('@/assets/mipmap/border.png');
  background-size: 100% 100%;
  color: white;
}

.input-content {
}

.input-content .text-box {
  width: 220px;
  height: 28px;
  font-size: 12px;
  border-radius: 6px;
}

.btn-login {
  color: white;
  margin-top: 20px;
  border-radius: 6px;
  padding: 8px 60px;
  box-shadow: 10px 10px 10px rgba(39, 39, 39, 0.473);
  background: -moz-linear-gradient(
    left,
    rgb(109, 213, 231),
    rgb(80, 166, 202),
    rgb(65, 141, 186),
    rgb(33, 90, 154),
    rgb(13, 56, 133),
    rgb(11, 53, 131)
  );
  background: -ms-linear-gradient(
    left,
    rgb(109, 213, 231),
    rgb(80, 166, 202),
    rgb(65, 141, 186),
    rgb(33, 90, 154),
    rgb(13, 56, 133),
    rgb(11, 53, 131)
  );
  background: -o-linear-gradient(
    left,
    rgb(109, 213, 231),
    rgb(80, 166, 202),
    rgb(65, 141, 186),
    rgb(33, 90, 154),
    rgb(13, 56, 133),
    rgb(11, 53, 131)
  );
  background: -webkit-linear-gradient(
    left,
    rgb(109, 213, 231),
    rgb(80, 166, 202),
    rgb(65, 141, 186),
    rgb(33, 90, 154),
    rgb(13, 56, 133),
    rgb(11, 53, 131)
  );
}
</style>