1、登录页实现登录窗口响应式布局，同时限制最大最小宽高 2、除设备级看板其余看板中点击技术状态以及报修故障图表后打开对应弹窗，并实现与接口联动 3、设...

zhuzhuanzhuan

2024-05-31 bb654cea7b1666d5b3c04dbd81a074a5a502cc67

 src/views/user/Login.vue

@@ -1,75 +1,75 @@
<template>
  <div class="main">
    <div style="display: flex;padding: 50px;">
  <div class="main" style="width: 100%;height: 100%;display: flex;padding: 50px;">

      <div style="flex: 1;display: flex;align-items: center;justify-content: center;position: relative">
        <div class="top">
          <div class="header">
            <a href="/">
              <img src="~@/assets/lxzn.png" class="logo" alt="logo">
              <span class="title">MDC智慧车间</span>
            </a>
          </div>
    <div style="flex: 1.2;display: flex;align-items: center;justify-content: center;position: relative">
      <div class="top">
        <div class="header">
          <a href="/">
            <img src="~@/assets/lxzn.png" class="logo" alt="logo">
            <span class="title">MDC智慧车间</span>
          </a>
        </div>
        <img src="@/assets/login.jpeg" width="60%">
      </div>
      <div style="width: 368px;margin: 30px 50px">
        <a-form-model
          class="user-layout-login"
          @keyup.enter.native="handleSubmit"
        >
          <a-tabs
            :activeKey="customActiveKey"
            :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
            @change="handleTabClick"
          >
            <a-tab-pane
              key="tab1"
              tab="账号密码登录"
            >
              <login-account
                ref="alogin"
                @validateFail="validateFail"
                @success="requestSuccess"
                @fail="requestFailed"
              ></login-account>
            </a-tab-pane>

            <!--<a-tab-pane key="tab2" tab="手机号登录">-->
            <!--<login-phone ref="plogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-phone>-->
            <!--</a-tab-pane>-->
          </a-tabs>

          <a-form-model-item>
            <!--<a-checkbox @change="handleRememberMeChange" default-checked>自动登录</a-checkbox>-->
            <!--<router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">-->
            <!--忘记密码-->
            <!--</router-link>-->
            <!--<router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >-->
            <!--注册账户-->
            <!--</router-link>-->
          </a-form-model-item>

          <a-form-item style="margin-top:24px">
            <a-button
              size="large"
              type="primary"
              htmlType="submit"
              class="login-button"
              :loading="loginBtn"
              @click.stop.prevent="handleSubmit"
              :disabled="loginBtn"
            >确定
            </a-button>
          </a-form-item>

          <a-form-model-item style="color: red">
            密级：内部&nbsp;&nbsp;&nbsp;&nbsp;警告：本系统禁止存储、处理、传输涉密信息
          </a-form-model-item>

        </a-form-model>
      </div>
      <img src="@/assets/login.jpeg" width="65%" height="44%">
    </div>

    <div style="flex: 1;padding: 30px 50px;">
      <a-form-model
        class="user-layout-login"
        @keyup.enter.native="handleSubmit"
      >
        <a-tabs
          :activeKey="customActiveKey"
          :tabBarStyle="{ textAlign: 'center', borderBottom: 'unset' }"
          @change="handleTabClick"
        >
          <a-tab-pane
            key="tab1"
            tab="账号密码登录"
          >
            <login-account
              ref="alogin"
              @validateFail="validateFail"
              @success="requestSuccess"
              @fail="requestFailed"
            ></login-account>
          </a-tab-pane>

          <!--<a-tab-pane key="tab2" tab="手机号登录">-->
          <!--<login-phone ref="plogin" @validateFail="validateFail" @success="requestSuccess" @fail="requestFailed"></login-phone>-->
          <!--</a-tab-pane>-->
        </a-tabs>

        <a-form-model-item>
          <!--<a-checkbox @change="handleRememberMeChange" default-checked>自动登录</a-checkbox>-->
          <!--<router-link :to="{ name: 'alteration'}" class="forge-password" style="float: right;">-->
          <!--忘记密码-->
          <!--</router-link>-->
          <!--<router-link :to="{ name: 'register'}" class="forge-password" style="float: right;margin-right: 10px" >-->
          <!--注册账户-->
          <!--</router-link>-->
        </a-form-model-item>

        <a-form-item style="margin-top:24px">
          <a-button
            size="large"
            type="primary"
            htmlType="submit"
            class="login-button"
            :loading="loginBtn"
            @click.stop.prevent="handleSubmit"
            :disabled="loginBtn"
          >确定
          </a-button>
        </a-form-item>

        <a-form-model-item style="color: red;font-size: 0.8vw">
          密级：内部&nbsp;&nbsp;&nbsp;&nbsp;警告：本系统禁止存储、处理、传输涉密信息
        </a-form-model-item>

      </a-form-model>
    </div>

    <!--<two-step-captcha v-if="requiredTwoStepCaptcha" :visible="stepCaptchaVisible" @success="stepCaptchaSuccess" @cancel="stepCaptchaCancel"></two-step-captcha>-->
    <login-select-tenant
      ref="loginSelect"
@@ -306,7 +306,7 @@
  .top {
    text-align: center;
    position: absolute;
    top: 45px;
    top: 10%;

    .header {
      height: 44px;
@@ -330,7 +330,7 @@
      }

      .title {
        font-size: 30px;
        font-size: 2vw;
        color: #000;
        font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        font-weight: 600;