disaster_web3/src/view/login.vue

<template>
  <div class="appmian">
    <!-- <v-scale-screen width="1920" height="1080" style="margin: 0;"> -->

    <el-container>
      <el-header>
        <loginheader ref="loginheaderref" :name="headerobj.name" />
      </el-header>
      <el-main> </el-main>
      <div class="bgk3" v-show="bgk2false">
        <div class="bgk4"></div>
        <div class="bgk2">
          <div class="bjgg">
            <el-image :src="dtu" fit="contain"></el-image>
            <!-- 添加登录框 -->

            <div class="login-form-container">
              <div
                class="dialog_class bgcolor "
                style="width: 100%; height: 100%; padding: 20px 30px;"
              >
                <span >煤矿灾害态势推演系统</span>
                <el-form :model="form" label-width="60px" >
                  <el-form-item label="用户名:" >
                    <el-input
                      
                      v-model="loginform.username"
                      placeholder="请输入用户名"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="密码:"  >
                    <el-input
                      v-model="loginform.password"
                      placeholder="请输入密码"
                      type="password"
                      show-password
                    ></el-input>
                  </el-form-item>

                  <div style="margin-top: 30px;">
                    <el-button 
                    size="large"
                  class="loginbtn" 
                  @click="login" 
                  style="width: 100%;"
                  :loading="loading"
                  :disabled="loading"
                    >{{ loading ? '登录中...' : '登录' }}</el-button
                  >
                  </div>
                  
                  
                </el-form>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部按钮三个页面 -->
    </el-container>
    <!-- </v-scale-screen> -->
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from "vue"
import { RouterView, RouterLink, useRouter } from "vue-router"
import VScaleScreen from "v-scale-screen"
import "@/utils/flexible"

import { request,enPassword } from "@/utils/request"

import logo from "@/assets/logo.png"
import {
  ElMessage,
  ElButton,
  ElDialog,
  ElSelect,
  formEmits
} from "element-plus"

// import configurator  from "./components/configurator.vue"
import reheader from "@/components/header.vue"
import loginheader from "@/components/loginheader.vue"
import result from "./result.vue"
import Vector from "@/assets/img/Vector.png"
import s1 from "@/assets/img/s1.png"
import dtu from "@/assets/img/Group1317.png"
import s2 from "@/assets/img/s2.png"
import s3 from "@/assets/img/s3.png"
import s4 from "@/assets/img/s4.png"
import b from "@/assets/img/Group1317.png"
import { timestampToTime, formatTime } from "@/js/lindex.js"
import emitter from "@/utils/emitter"

import { getToken, setToken, setUserId,setLoginflag,getLoginflag } from "@/utils/token"
import router from "@/router"

// import { vtkmodel2 } from "@/control/vtkModel.js";
let activeIndeximg = ref(null)
let reheaderref = ref()
let loginheaderref = ref()
let lliudialog = ref()
let sourcedis = ref()
let classradio = ref()
let boundary = ref()
let tanimation = ref()
let state = ref()
let menumine = ref()
let menusen = ref()
let indexref = ref()
let configuratorref = ref()
let bkmodel = ref(false)
let modelshow = ref(true)
const title = "灾情推演软件"
const activeIndex = ref("1")
const activeIndex2 = ref("1")
let titlefalse = ref(false)

let headertime = ref({
  timing: null,
  loading: true,
  dateDay: null,
  dateYear: null,
  dateWeek: null,
  weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"]
})
let bgk2false = ref(true)
let headerobj = ref({
  time: "",
  name: ""
})

onMounted(() => {
  timeFn()
  // childfun();
})

// 登录相关
let loginform = ref({
  username: "",
  password: "",
  captcha: "",
})


let loading = ref(false)
const codeId = ref("") // 验证码ID
const imageUrl = ref("") // 验证码图片 URL


const login = () => {
  if (loginform.value.username == "" || loginform.value.username == undefined){
    ElMessage.error("用户名不能为空")
    return
  }
  if (loginform.value.password == "" || loginform.value.password == undefined){
    ElMessage.error("密码不能为空")
    return
  }


  loading.value = true
  const params = {
    transCode: "A00002",
    loginName: loginform.value.username,
    password: enPassword(loginform.value.password),
    
    type: "",
    
  }
  console.log(params)
  request(params)
  .then((res) => {
    setToken(res.clientToken)
    setUserId(res.userId)
    setLoginflag('1')
    console.log('loginflag:',getLoginflag())
    router.push({ path: "/" })

  })
  .catch((err) => {
    console.error('错误信息：',err);
    ElMessage.error(err.returnMsg);
  })
  .finally(() => {
    loading.value = false
  });
}


const register = () => {
  const params = {
    transCode: "A00003",
    userName: form.value.username,
    password: form.value.password,
    mailOrPhone: "123456",
    verificationCode: "",
    channel: "1"
  }
  request(params)
    .then((res) => {
      console.log(res)
    })
    .catch((err) => {
      ElMessage.error(err.returnMsg)
    })
}

const getcode = () => {

}








// 当前时间
const timeFn = () => {
  headertime.value.timing = setInterval(() => {
    headertime.value.dateDay = formatTime(new Date(), "HH: mm: ss")
    headertime.value.dateYear = formatTime(new Date(), "yyyy-MM-dd")
    headertime.value.dateWeek = headertime.value.weekday[new Date().getDay()]
  }, 1000)
}

onUnmounted(() => {})
</script>
<style>
@import "../../src/style/style.css";
</style>
<style lang="scss" scoped>
.appmian {
  .el-main {
    --el-main-padding: 0px !important;
  }

  .el-container {
    padding: 0;
    margin: 0;
    width: 100%;
    position: absolute;
    z-index: 206;
    top: 0;
    background-image: url(../../src/assets/img/BJ.png) !important;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
}

.ve_menu_logo {
  width: 100%;
  height: 70px;
  background: #0d1639;
  white-space: nowrap;
  text-align: left;
  overflow: hidden;
  display: flex;
  background: #0d1639;
  box-shadow: inset 0px 0px 17px 5px rgba(12, 97, 197, 0.2);
  border-radius: 0px 0px 0px 0px;
  border-bottom: 1px solid;
  box-sizing: border-box;
  border-image: linear-gradient(
      28deg,
      rgba(31, 107, 255, 1),
      rgba(31, 107, 255, 0)
    )
    1 1;

  .ve_title {
  }

  .ve_logo_img {
    padding-left: 30px;
    padding-right: 30px;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    padding: 15px;
  }

  .ve_logo_title {
    width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    margin: 0;
    vertical-align: middle;
    color: #68adff;
    font-size: 20px;
  }

  .el-menu-demo {
    width: 60% !important;
    height: 70px;
    border: none !important;
    background: rgba(12, 97, 197, 0);

    .el-menu-item {
      position: relative;
      width: 97px;
      font-family: Microsoft YaHei UI, Microsoft YaHei UI;
      font-weight: bold;
      font-size: 13px;
      color: #68adff;
      line-height: 15px;
      text-align: center;
      font-style: normal;
      text-transform: none;
      width: 110px;
      height: 70px;
      border-radius: 0px 0px 0px 0px;
      border: none;
    }

    .is-active {
      width: 110px;
      height: 70px;
      background: radial-gradient(
        ellipse at 54px 0px,
        #3aa0ff -37%,
        #123066 53%
      );
      border-radius: 0px 0px 0px 0px;
      border: 1px solid;
      border-left: 1px solid rgba(16, 92, 240, 1);
      border-right: 1px solid rgba(18, 48, 102, 1);
      border-image: linear-gradient(
          347deg,
          rgba(16, 92, 240, 1),
          rgba(18, 48, 102, 1)
        )
        1 1;

      &:after {
        width: 24px;
        height: 1px;
        background-color: #fff;
        -webkit-transition: all ease-out 0.2s;
        transition: all ease-out 0.2s;
        content: "";
        position: absolute;
        left: 50%;
        bottom: 15px;
        webkit-transform: translate(-50%, 0%);
        -moz-transform: translate(-50%, 0%);
        transform: translate(-50%, 0%);
      }
    }
  }

  .ve_right {
    // width: 350px;
    height: 70px;
    overflow: hidden;
    position: absolute;
    right: 0;
    display: flex;

    .ve_time {
      width: 190px;
      height: 55px;
      padding-top: 15px;
      height: 70px;
      overflow: hidden;
      border-radius: 0px 0px 0px 0px;
      border-left: 2px solid rgba(12, 97, 197, 0.2);
      border-right: 2px solid rgba(12, 97, 197, 0.2);
      box-sizing: border-box;
      padding: 15px 5px;
      // border-image: linear-gradient(347deg, rgba(31, 107, 255, 1), rgba(164, 195, 255, 1)) 1 1;
      span {
        display: block;
        font-family: Microsoft YaHei UI, Microsoft YaHei UI;
        color: #ffffff;
        text-align: center;
        font-style: normal;
        text-transform: none;
      }

      .l_huoqing {
        font-size: 13px;
        line-height: 15px;
        font-weight: bold;
        line-height: 2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .l_time {
        font-size: 12px;
        line-height: 14px;
        font-weight: 400;
      }
    }

    .ve_timeioc {
      width: 150px;
      height: 70px;
      // border-radius: 0px 0px 0px 0px;
      // border: 1px solid;
      // border-image: linear-gradient(347deg, rgba(16, 92, 240, 1), rgba(164, 195, 255, 1)) 1 1;
      font-family: Microsoft YaHei UI, Microsoft YaHei UI;
      font-weight: bold;
      font-size: 13px;
      color: #68adff;
      line-height: 15px;
      text-align: center;
      font-style: normal;
      text-transform: none;
      display: flex;
      justify-content: center;
      align-items: center;

      span {
        padding-left: 15px;
      }
    }
  }
}

.login-form-container {
  position: absolute;
  width: 400px;
  height: 280px; /* 增加高度以容纳表单元素 */
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%); /* 将登录框居中 */
  background-color: rgba(255, 255, 255, 0.85); /* 轻微透明背景 */
  
  border-radius: 12px; /* 圆角效果 */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); /* 更柔和的阴影 */
  backdrop-filter: blur(10px); /* 给背景加个模糊效果 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}



.login-form-container .el-form-item {
  margin-bottom: 20px ; /* 增加表单项之间的间距 */
}

.login-form-container .el-form-item__label {
  color: #fff; /* 表单项标签颜色 */
  font-size: 16px; /* 表单项标签字体大小 */
  font-weight: bold; /* 表单项标签字体粗细 */
}

.loginbtn {
  width: 100%;
  background-color: rgba(61, 219, 252, 0.20) !important;
  box-sizing: border-box;
  border: none;
  border-radius: 8px; /* 圆角按钮 */
  padding: 12px; /* 增加按钮内边距 */
  font-size: 16px;
  font-weight: bold; /* 增加字体粗细 */
  transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s; /* 平滑过渡 */
}

.loginbtn:hover {
  background-color: rgba(61, 219, 252, 0.35); /* 鼠标悬停时背景色变深 */
  transform: scale(1.05); /* 鼠标悬停时轻微放大按钮 */
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); /* 鼠标悬停时增加按钮的阴影 */
}

.loginbtn:disabled {
  background-color: rgba(61, 219, 252, 0.10) !important; /* 禁用时的按钮背景色 */
  cursor: not-allowed; /* 禁用时鼠标样式 */
}

/* 为标题添加样式 */
.login-form-container span {
    font-size: 20px;
    font-weight: bold;
    color: #2c3e50;
    display: block;
    text-align: center;
    margin-bottom: 20px; /* 上下间距 */
    padding: 10px;
    
    color: white;
    border-radius: 5px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
  }

</style>

<style>
.vtkmodel1 {
  position: absolute;
  z-index: 100;
  width: 100%;
  height: 100vh;
}
body {
  width: 100%;
  height: 100vh;
  background: #161a2a;
  /* background:#b2bac7; */
}

button:focus,
button:focus-visible {
  outline: none;
}

.l_Dialog {
  position: relative;
}
.main-conyeny {
  position: absolute;
  z-index: 206;
  top: 70px;
}
.L_aside {
  margin-top: 10px;
  overflow: hidden;
}
</style>