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

zhaowei

2024-08-02 15792ad8baea4ab886dbfc58009847f26de45df8

 src/views/user/Login.vue

@@ -20,19 +20,19 @@
        </a-tab-pane>
      </a-tabs>

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

      <a-form-model-item>
        <a-button size="large" htmlType="submit" class="login-button" :loading="loginBtn"
                  @click.stop.prevent="handleSubmit" :disabled="loginBtn">登&nbsp;&nbsp;&nbsp;&nbsp;录
                  @click.stop.prevent="handleSubmit" :disabled="loginBtn" >登&nbsp;&nbsp;&nbsp;&nbsp;录
        </a-button>
      </a-form-model-item>

@@ -167,21 +167,34 @@
</script>
<style lang="less" scoped>
  .user-layout-login {

    .logo {
      text-align: center;
      a {
        text-decoration: none;
        img {
          height: 80px;
        }
      img {
        height: 80px;
      }
    }

    .forge-password {
    /deep/ .ant-form-explain {
      font-size: 14px;
      color: #fff;
      margin-bottom: -1px;
      margin-top: -2px;
      min-height: 22px;
    }

    .forget-and-register {
      margin-bottom: 5px;
      font-size: 14px;

      .forget-password {
        color: #fff;
        float: right;
      }

      .register {
        float: right;
        color: #fff;
        margin-right: 10px;
      }
    }

    button.login-button {
@@ -200,18 +213,34 @@

<style scoped lang="less">
  /deep/ .ant-tabs-bar {
    margin: 30px 0 40px;
    margin: 20px 0 20px;
  }

  /deep/ .ant-tabs-nav .ant-tabs-tab {
    color: #fff;
    color: rgba(255, 255, 255, .5);
    font-size: 19px;
    font-weight: bold;
    margin: 0 32px 0 0;
    padding: 12px 16px;

    &.ant-tabs-tab-active {
      color: #fff;
    }
  }

  /deep/ .ant-tabs-ink-bar {
    background-color: #fff;
    height: 3px;
    width: 0 !important;
  }

  /deep/ .ant-form-item {
    margin-bottom: 24px;

    &.ant-form-item-with-help {
      margin-bottom: 5px;
    }
    .ant-form-item-control {
      line-height: 40px;
    }
  }

  /deep/ .login-input {
@@ -219,16 +248,22 @@
    background-color: rgba(255, 255, 255, .3);
    padding-left: 20px;
    display: flex;
    align-items: center
    align-items: center;

    img {
      margin-right: 10px;
      height: 25px
    }
  }

  /deep/ .ant-input {
  /deep/ .ant-input,input {
    border: none;
    height: 55px;
    background-color: transparent !important;
    color: #fff;
    font-size: 17.9px;
    letter-spacing: 1px;
    padding: 6px 11px;

    /*获取焦点*/
    &:focus {
@@ -237,10 +272,14 @@
    }

    /*自动填充*/
    &:-webkit-autofill{
    &:-webkit-autofill,
    :-webkit-autofill:hover,
    :-webkit-autofill:focus,
    :-webkit-autofill:active{
      -webkit-text-fill-color: #fff !important;
      color: #fff;
      transition: background-color 5000s ease-in-out 0s;
      transition: background-color 1000s ease-in-out 0.5s;
      background-image: none;
    }

    /*提示栏*/