修改登录页

Flex

2025-05-30 c208475507d1adca547dba5cf8fd2cb88b80cf34

 easegen-front/src/views/Login/components/LoginForm.vue

@@ -4,7 +4,7 @@
    ref="formLogin"
    :model="loginData.loginForm"
    :rules="LoginRules"
    class="login-form"
    class="login-form NewClass"
    label-position="top"
    label-width="120px"
    size="large"
@@ -72,6 +72,7 @@
            class="w-[100%]"
            type="primary"
            @click="getCode()"
            style="background-color: #1D78F4;"
          />
        </el-form-item>
      </el-col>
@@ -82,24 +83,25 @@
        mode="pop"
        @success="handleLogin"
      />
      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">
      <!-- 注册不显示 -->
      <!-- <el-col :span="24"  > 
        <el-form-item>
          <el-row :gutter="5" justify="space-between" style="width: 100%">
            <!-- <el-col :span="12">
          <el-row :gutter="5" justify="space-between" style="width: 100%; margin-left: 0 !important;">
            <el-col :span="12">
              <XButton
                :title="t('login.btnMobile')"
                class="w-[100%]"
                @click="setLoginState(LoginStateEnum.MOBILE)"
              />
            </el-col> -->
<!--            <el-col :span="8">-->
<!--              <XButton-->
<!--                :title="t('login.btnQRCode')"-->
<!--                class="w-[100%]"-->
<!--                @click="setLoginState(LoginStateEnum.QR_CODE)"-->
<!--              />-->
<!--            </el-col>-->
            <el-col :span="24">
            </el-col>
                       <el-col :span="8">
                         <XButton
                           :title="t('login.btnQRCode')"
                           class="w-[100%]"
                           @click="setLoginState(LoginStateEnum.QR_CODE)"
                         />
                       </el-col>
            <el-col :span="24"  style="padding-right: 10px; padding-left: 10px" >
              <XButton
                :title="t('login.btnRegister')"
                class="w-[100%]"
@@ -108,38 +110,38 @@
            </el-col>
          </el-row>
        </el-form-item>
      </el-col>
<!--      <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>-->
<!--      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">-->
<!--        <el-form-item>-->
<!--          <div class="w-[100%] flex justify-between">-->
<!--            <Icon-->
<!--              v-for="(item, key) in socialList"-->
<!--              :key="key"-->
<!--              :icon="item.icon"-->
<!--              :size="30"-->
<!--              class="anticon cursor-pointer"-->
<!--              color="#999"-->
<!--              @click="doSocialLogin(item.type)"-->
<!--            />-->
<!--          </div>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
<!--      <el-divider content-position="center">萌新必读</el-divider>-->
<!--      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">-->
<!--        <el-form-item>-->
<!--          <div class="w-[100%] flex justify-between">-->
<!--            <el-link href="https://doc.iocoder.cn/" target="_blank">📚开发指南</el-link>-->
<!--            <el-link href="https://doc.iocoder.cn/video/" target="_blank">🔥视频教程</el-link>-->
<!--            <el-link href="https://www.iocoder.cn/Interview/good-collection/" target="_blank">-->
<!--              ⚡面试手册-->
<!--            </el-link>-->
<!--            <el-link href="http://static.yudao.iocoder.cn/mp/Aix9975.jpeg" target="_blank">-->
<!--              🤝外包咨询-->
<!--            </el-link>-->
<!--          </div>-->
<!--        </el-form-item>-->
<!--      </el-col>-->
      </el-col> -->
      <!--      <el-divider content-position="center">{{ t('login.otherLogin') }}</el-divider>-->
      <!--      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">-->
      <!--        <el-form-item>-->
      <!--          <div class="w-[100%] flex justify-between">-->
      <!--            <Icon-->
      <!--              v-for="(item, key) in socialList"-->
      <!--              :key="key"-->
      <!--              :icon="item.icon"-->
      <!--              :size="30"-->
      <!--              class="anticon cursor-pointer"-->
      <!--              color="#999"-->
      <!--              @click="doSocialLogin(item.type)"-->
      <!--            />-->
      <!--          </div>-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
      <!--      <el-divider content-position="center">萌新必读</el-divider>-->
      <!--      <el-col :span="24" style="padding-right: 10px; padding-left: 10px">-->
      <!--        <el-form-item>-->
      <!--          <div class="w-[100%] flex justify-between">-->
      <!--            <el-link href="https://doc.iocoder.cn/" target="_blank">📚开发指南</el-link>-->
      <!--            <el-link href="https://doc.iocoder.cn/video/" target="_blank">🔥视频教程</el-link>-->
      <!--            <el-link href="https://www.iocoder.cn/Interview/good-collection/" target="_blank">-->
      <!--              ⚡面试手册-->
      <!--            </el-link>-->
      <!--            <el-link href="http://static.yudao.iocoder.cn/mp/Aix9975.jpeg" target="_blank">-->
      <!--              🤝外包咨询-->
      <!--            </el-link>-->
      <!--          </div>-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
    </el-row>
  </el-form>
</template>
@@ -352,4 +354,19 @@
    cursor: pointer;
  }
}

.NewClass {
  ::v-deep( .el-input__inner ) {
    font-size: 20px;
    line-height: 40px;
    height: 60px;
  }
  ::v-deep(.el-button--large){
    padding: 20px;
    box-sizing: border-box;
    font-size: 20px;
    height: 60px;
    margin-top: 20px;
  }
}
</style>