【Vue】TodoList作品介绍

前言

我在大二暑假中学习了JavaWeb，开学（2022年9月）之后学习Vue2，开始了框架的学习，期间加上封教学楼等等一些列疫情带来的繁琐事情，总算在2022年11月拖拖拉拉的完成了Vue2的学习，做了一个TodoList作为Vue2阶段学习的总结收尾。

视频介绍

B站传送门：Vue作品介绍

需要用到的技术

• HTML
• CSS
• JavaScript
• Vue2

使用路由完成的登录功能

<template>
  <div class="login">
    <div class="header">登录</div>
    <div class="container">
      <input type="text" placeholder="请输入用户名" v-model="username" />
    </div>
    <div class="container1">
      <input type="password" placeholder="请输入密码" v-model="password" />
    </div>
    <button class="dl">
      <router-link :to="`/todo?username=${username}&password=${password}`">登录</router-link>
    </button>
    <button class="zc">
      <router-link to="/register">注册</router-link>
    </button>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      username: "",
      password: "",
    };
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
  background-color: #c0c4cc;
}
.login {
  width: 358px;
  height: 588px;
  border-radius: 15px;
  padding: 0 50px;
  position: relative;
  margin: 0 auto;
  background-color: #282c34;
}
.header {
  font-size: 38px;
  font-weight: bold;
  text-align: center;
  line-height: 200px;
  color: #61dafb;
}
.container {
  height: 30px;
  width: 250px;
  position: absolute;
  left: 15%;
  top: 40%;
}

input {
  width: 250px;
  height: 30px;
  position: relative;
  outline: none;
  border: none;
  box-sizing: border-box;
  padding-left: 5px;
  background-color: #282c34;
  color: #61dafb;
  caret-color: #61dafb;
}
input::placeholder {
  color: #61dafb;
}

span {
  position: absolute;
  content: "";
  display: block;
  background-color: #61dafb;
  transition: transform 0.1s ease-in-out;
}
.top,
.bottom {
  left: 0px;
  right: 0px;
  height: 2px;
}
.left,
.right {
  top: 0px;
  bottom: 0px;
  width: 2px;
  transform: scaleY(0);
}
.top {
  top: 0px;
  transform: scaleX(0);
  transform-origin: left center;
  transition-delay: 0.2s;
}
.left {
  left: 0px;
  transform-origin: bottom center;
  transition-delay: 0.3s;
}
.bottom {
  bottom: 0px;
}
.right {
  right: 0px;
  transform-origin: top center;
  transition-delay: 0.1s;
}
input:focus ~ .right {
  transform: scaleY(1);
  transform-origin: bottom center;
}
input:focus ~ .left {
  transform: scaleY(1);
  transform-origin: top center;
}
input:focus ~ .top {
  transform: scaleY(1);
  transform-origin: right center;
}
.container1 {
  height: 30px;
  width: 250px;
  position: absolute;
  left: 15%;
  top: 50%;
}
.dl,
.zc {
  position: absolute;
  left: 15%;
  top: 54%;
  text-align: center;
  border-radius: 10px;
  padding: 5px;
  width: 20%;
  margin-top: 30px;
  margin-left: 20px;
  background-color: #61dafb;
  color: #fff;
}
.zc {
  margin-left: 150px;
}
</style>

用到的倒计时功能

之前写过一篇博客总结过：vue实现倒计时功能