写登录页

13404089107

2025-04-01 437b030088fff3b3ee0eca330acaf425b3176bb2

写登录页

 package-lock.json

@@ -1761,6 +1761,63 @@
          "integrity": "sha1-/q7SVZc9LndVW4PbwIhRpsY1IPo=",
          "dev": true
        },
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.4",
          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "ssri": {
          "version": "8.0.1",
          "resolved": "https://registry.nlark.com/ssri/download/ssri-8.0.1.tgz?cache=0&sync_timestamp=1621364668574&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fssri%2Fdownload%2Fssri-8.0.1.tgz",
@@ -1768,6 +1825,28 @@
          "dev": true,
          "requires": {
            "minipass": "^3.1.1"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        },
        "vue-loader-v16": {
          "version": "npm:vue-loader@16.8.3",
          "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
          "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
          "dev": true,
          "optional": true,
          "requires": {
            "chalk": "^4.1.0",
            "hash-sum": "^2.0.0",
            "loader-utils": "^2.0.0"
          }
        }
      }
@@ -11295,87 +11374,6 @@
          "resolved": "https://registry.npm.taobao.org/hash-sum/download/hash-sum-1.0.2.tgz",
          "integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=",
          "dev": true
        }
      }
    },
    "vue-loader-v16": {
      "version": "npm:vue-loader@16.8.3",
      "resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-16.8.3.tgz",
      "integrity": "sha512-7vKN45IxsKxe5GcVCbc2qFU5aWzyiLrYJyUuMz4BQLKctCj/fmCa0w6fGiiQ2cLFetNcek1ppGJQDCup0c1hpA==",
      "dev": true,
      "optional": true,
      "requires": {
        "chalk": "^4.1.0",
        "hash-sum": "^2.0.0",
        "loader-utils": "^2.0.0"
      },
      "dependencies": {
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "chalk": {
          "version": "4.1.2",
          "resolved": "https://registry.npmmirror.com/chalk/-/chalk-4.1.2.tgz",
          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
          "dev": true,
          "optional": true,
          "requires": {
            "ansi-styles": "^4.1.0",
            "supports-color": "^7.1.0"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "optional": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true,
          "optional": true
        },
        "has-flag": {
          "version": "4.0.0",
          "resolved": "https://registry.npmmirror.com/has-flag/-/has-flag-4.0.0.tgz",
          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
          "dev": true,
          "optional": true
        },
        "loader-utils": {
          "version": "2.0.4",
          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
          "dev": true,
          "optional": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "supports-color": {
          "version": "7.2.0",
          "resolved": "https://registry.npmmirror.com/supports-color/-/supports-color-7.2.0.tgz",
          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
          "dev": true,
          "optional": true,
          "requires": {
            "has-flag": "^4.0.0"
          }
        }
      }
    },

 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;
  }