Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-labor...

pyt

2025-04-01 4f1d5100eee09a1285c8f84972ab986e9b82c180

Merge branch 'main' of http://120.76.84.145:10101/gitblit/r/H5/leshan-laboratory

 .gitignore

@@ -1,7 +1,7 @@
.DS_Store
node_modules
/dist

package-lock.json

# local env files
.env.local

 src/assets/login/account@2x.png

 src/assets/login/password@2x.png

 src/views/login/index.vue

@@ -1,6 +1,28 @@
<template>
  <div class="login-page">
    <div class="login-content">
      <div class="login-title">
        InnoLab
      </div>
      <div class="sub-title">
        账号登录
      </div>

      <div class="login-form">
        <div class="form-item flex">
          <img class="form-item-icon" :src="require('../../assets/login/account@2x.png')" alt="">
          <el-input v-model="loginForm.account" placeholder="请输入账号"></el-input>
        </div>

        <div class="form-item flex mt-40">
          <img class="form-item-icon" :src="require('../../assets/login/password@2x.png')" alt="">
          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码"></el-input>
        </div>

        <div class="login-btn">
          <el-button type="primary" class="login-btn-item" @click="login">登录</el-button>
        </div>
      </div>

    </div>
  </div>
@@ -10,30 +32,147 @@
  name: 'Login',
  data() {
    return {

      loginForm: {
        account: '',
        password: ''
      },
      viewWidth: ''
    }
  },

  created() {
    // 初始化获取窗口宽度
    this.viewWidth = window.innerWidth
    // 添加窗口大小变化监听器
    window.addEventListener('resize', this.handleResize)
  },
  destroyed() {
    // 组件销毁时移除监听器
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    // 添加处理窗口大小变化的方法
    handleResize() {
      this.viewWidth = window.innerWidth
      console.log(this.viewWidth)
    },
    login() {
      console.log(this.loginForm)
    }
  }
}
</script>
<style scoped lang="less">
.flex {
  display: flex;
}

.j-between {
  justify-content: space-between;
}

.mt-40 {
  margin-top: 40px;
}

.login-page {
  width: 100%;
  height: 100vh;
  background: url('../../assets/login/backGround@2x.png') no-repeat center center;
  background-size: 100% 100%;
  background-size: cover;
  // background-attachment: fixed;
  display: flex;
  justify-content: center; 
  justify-content: center;
  align-items: center;

  .login-content {
    // width: 45%;
    width: 550px;
    height: 694px;
    // height: 694px;
    // padding: 4% 5% 4% 5%;
    padding: 82px 60px 72px 60px;
    background: #fff;
    box-shadow: 0px 20px 30px 0px rgba(0, 97, 95, 0.2);
    border-radius: 20px;
    border: 4px solid #FFFFFF;
    display: flex;
    flex-direction: column;
    align-items: center;

    .login-title {
      // width: 70%;
      text-align: center;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 500;
      font-size: 50px;
      color: #049C9A;
      line-height: 75px;
    }

    .sub-title {
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 500;
      font-size: 30px;
      color: #049C9A;
      line-height: 45px;
      margin-top: 100px;
      margin-bottom: 45px;
    }

    .login-form {
      width: 100%;

      .form-item {
        width: calc(100% - 80px);
        height: 60px;
        border-radius: 30px;
        border: 2px solid #DBDBDB;
        display: flex;
        align-items: center;
        padding: 0 40px;

        .form-item-icon {
          width: 20px;
          height: 20px;
          margin-right: 17px;
        }

        ::v-deep .el-input__inner {
          border: none !important;
          background: transparent !important;
          height: 100% !important;
          padding: 0 !important;
          font-size: 20px;
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 400;
          color: #000000;
          line-height: 30px;
        }


      }
    }
  }

  .login-btn {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .login-btn-item {
    width: 300px;
    height: 60px;
    background: linear-gradient(270deg, #05F2C2 0%, #05A0C1 100%);
    border-radius: 30px;
    border: none;
    margin-top: 95px;
    color: #fff;
    font-family: SourceHanSansCN, SourceHanSansCN;
    font-weight: bold;
    font-size: 20px;
    color: #FFFFFF;
    line-height: 30px;
  }