1、利用viewport完成PC端页面响应式布局，其他端还未适配 2、基本完成语言大模型页面布局及部分功能 3、实现对于侧边栏图标在首页与其他页面时不...

zhaowei

2024-08-02 15792ad8baea4ab886dbfc58009847f26de45df8

 src/views/user/LoginAccount.vue

@@ -2,31 +2,30 @@
  <a-form-model ref="form" :model="model" :rules="validatorRules">
    <a-form-model-item required prop="username">
      <div class="login-input">
        <img src="../../assets/icons/account.png" height="25" style="margin-right: 10px">
        <a-input v-model="model.username" size="large" placeholder="用户名" ref="inputRef" @focus="inputFocus"/>
        <img src="../../assets/icons/account.png" style="">
        <a-input v-model="model.username" size="large" placeholder="用户名" ref="inputRef" @focus="inputFocus" autocomplete="off"/>
      </div>
    </a-form-model-item>
    <a-form-model-item required prop="password">
      <div class="login-input">
        <img src="../../assets/icons/password.png" height="25" style="margin-right: 10px">
        <a-input v-model="model.password" size="large" type="password" autocomplete="false"
        <img src="../../assets/icons/password.png">
        <a-input v-model="model.password" size="large" type="password" autocomplete="off"
                 placeholder="密码"/>
      </div>
    </a-form-model-item>

    <a-row :gutter="0" style="height: 40px">
    <a-row :gutter="0" class="code-row-container">
      <a-col :span="16">
        <a-form-model-item required prop="inputCode">
          <div class="login-input">
            <img src="../../assets/icons/inputCode.png" height="25" style="margin-right: 10px">
            <img src="../../assets/icons/inputCode.png">
            <a-input v-model="model.inputCode" size="large" type="text" placeholder="请输入验证码"/>
          </div>
        </a-form-model-item>
      </a-col>
      <a-col :span="8" style="height: 55px;display: flex;justify-content: right;align-items: center;padding-left: 15px">
        <img v-if="requestCodeSuccess" style="height: 45px;width:100%;border-radius: 15px;" :src="randCodeImage"
             @click="handleChangeCheckCode"/>
        <img v-else style="margin-top: 2px;" src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
      <a-col :span="8" class="code-col-container">
        <img v-if="requestCodeSuccess" :src="randCodeImage" @click="handleChangeCheckCode"/>
        <img v-else src="../../assets/checkcode.png" @click="handleChangeCheckCode"/>
      </a-col>
    </a-row>
  </a-form-model>
@@ -162,7 +161,22 @@
  }
</script>

<style scoped>
<style scoped lang="less">
  .code-row-container {
    /*height: 40px;*/

    .code-col-container {
      height: 55px;
      display: flex;
      justify-content: right;
      align-items: center;
      padding-left: 15px;

      img {
        height: 45px;
        width: 100%;
        border-radius: 15px;
      }
    }
  }
</style>