vue实现todo待办事项效果代码-html代码-BFW代码库

vue实现todo待办事项效果代码

代码语言：html

所属分类：其他

代码描述：vue实现todo待办事项效果代码，使用了store及vuex技术

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
  <link href="https://fonts.googleapis.com/css?family=Raleway|Lobster+Two" rel="stylesheet">

<style>
/**
* Variables
**/
/**
* Global
**/
* {
  box-sizing: border-box;
}

body, html {
  min-height: 100%;
  background: #efefef;
  overflow: hidden;
}

h1 {
  color: #fcfcfc;
  text-align: center;
  text-shadow: 0px 0px 5px #26C6DA, 1px 1px 5px #26C6DA, -1px -1px 5px #26C6DA, 1px -1px 5px #1e9faf, -1px 1px 5px #26C6DA;
  font-family: "Lobster Two", cursive;
}

input, span {
  border: 0;
  border-radius: 5px;
  font-family: "Raleway", sans-serif;
  white-space: wrap;
  padding-left: 1em;
  min-width: 0;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  display: none;
}

::-webkit-scrollbar-thumb {
  display: none;
}

/**
* Components
**/
.btn {
  min-height: 43px;
  min-width: 43px;
  border: 0;
  padding: 0;
  color: #fcfcfc;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.15);
  font-size: 1.25em;
  border-radius: 5px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  text-align: center;
}

.btn-primary {
  background: #26C6DA;
}
.btn-primary:hover {
  background: #1e9faf;
}

.bg-primary {
  background: #26C6DA;
  color: #fcfcfc;
}

.active {
  opacity: 0.5;
  cursor: not-allowed;
}

.complete {
  text-decoration: line-through;
}

.rounded {
  border-radius: 5px;
}

.editing {
  border: 1px dashed #67d7e5;
}

.box-shadow {
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.25);
}

.todo {
  padding: 0.5em 0;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-b.........完整代码请登录后点击上方下载按钮下载查看