设置按钮的加载效果

zmc

2023-08-15 60076cbbe1da6cc8ed3a4ebb8f67e92ea9be9e4a

 src/views/LoginInterface.vue

@@ -21,7 +21,9 @@
          style="margin-left: 20px;"
        ></el-input>
      </div>
      <div >
      <el-button type="primary" class="login-btn" @click="login">登录</el-button>
    </div>
    </el-card>
  </div>
</template>
@@ -52,7 +54,7 @@

<style scoped>
.login-container {
  background-image: url('../assets/bg1.png');
  background-image: url('../assets/login.jpg');
                      /*用于为一个元素设置一个或者多个背景图像。 */
  background-size: cover;         /* 将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。*/
  background-position: center;  /* 为每一个背景图片设置初始位置。这个位置是相对于由 background-origin 定义的位置图层的 键字 center，用来居中背景图片。*/
@@ -101,8 +103,20 @@
}

.login-btn {
  width:40%;
  margin-left: 155px;
  /* position: absolute;
  width:calc(100% - 20px);
  left: 40px;
  margin-top: 30px;
  display: flex; */
  /* justify-content: center; */
  /* margin-left: 155px; */
  position: absolute;
  left: 85px;
  width: calc(100% - 150px);
  padding: 6px;
  text-align: center;
  box-sizing: border-box;
  margin-top: 30px;
}
.ab {
  margin-top: 100px;