3-08：美化登录页面样式

3-08：美化登录页面样式

1. 创建全局的 style

   1. 在 src 下创建 styles/index.scss 文件，并写入以下内容：

      html,
      body {
        height: 100%;
        margin: 0;
        padding: 0;
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
          Microsoft YaHei, Arial, sans-serif;
      }
      
      #app {
        height: 100%;
      }
      
      *,
      *:before,
      *:after {
        box-sizing: inherit;
        margin: 0;
        padding: 0;
      }
      
      a:focus,
      a:active {
        outline: none;
      }
      
      a,
      a:focus,
      a:hover {
        cursor: pointer;
        color: inherit;
        text-decoration: none;
      }
      
      div:focus {
        outline: none;
      }
      
      .clearfix {
        &:after {
          visibility: hidden;
          display: block;
          font-size: 0;
          content: ' ';
          clear: both;
          height: 0;
        }
      }
      
      

   2. 在 main.js 中导入全局样式

      ...
      // 导入全局样式
      import './styles/index.scss'
      ...
      

   3. 在 views/login/index.vue 中写入以下样式

      <style lang="scss" scoped>
      $bg: #2d3a4b;
      $dark_gray: #889aa4;
      $light_gray: #eee;
      $cursor: #fff;
      
      .login-container {
        min-height: 100%;
        width: 100%;
        background-color: $bg;
        overflow: hidden;
      
        .login-form {
          position: relative;
          width: 520px;
          max-width: 100%;
          padding: 160px 35px 0;
          margin: 0 auto;
          overflow: hidden;
           
          /*要在当前组件获取子组件(element-ui组件)标签的类名 需要::v-deep*/
          ::v-deep .el-form-item {
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(0, 0, 0, 0.1);
            border-radius: 5px;
            color: #454545;
          }
      
          ::v-deep .el-input {
            display: inline-block;
            height: 47px;
            width: 85%;
      
            input {
              background: transparent;
              border: 0px;
              -webkit-appearance: none;
              border-radius: 0px;
              padding: 12px 5px 12px 15px;
              color: $light_gray;
              height: 47px;
              /*设置 input 元素中光标的颜色：*/
              caret-color: $cursor;
            }
          }
        }
      
      
        .svg-container {
          padding: 6px 5px 6px 15px;
          color: $dark_gray;
          vertical-align: middle;
          display: inline-block;
        }
      
        .title-container {
          position: relative;
      
          .title {
            font-size: 26px;
            color: $light_gray;
            margin: 0px auto 40px auto;
            text-align: center;
            font-weight: bold;
          }
        }
      
        .show-pwd {
          position: absolute;
          right: 10px;
          top: 7px;
          font-size: 16px;
          color: $dark_gray;
          cursor: pointer;
          user-select: none;
        }
      }
      </style>