vue+foundation实现一个待办事项代码-html代码-BFW代码库

vue+foundation实现一个待办事项代码

代码语言：html

所属分类：其他

代码描述：vue+foundation实现一个待办事项代码，可以添加删除标记已完成。

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

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

<head>
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/foundation.min.css">
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        body {
                background-color:#abc
        }
        *,h1,button {
                font-family:'Nunito',sans-serif
        }
        .fade-enter-active,.fade-leave-active {
                transition:opacity .5s
        }
        .fade-enter,.fade-leave-active {
                opacity:0
        }
        .tasks {
                width:100%;
                max-width:45rem;
                padding:1em;
                margin:1em auto;
                overflow:auto;
                background-color:#fff;
                box-shadow:0 .25rem 1rem rgba(0,0,0,0.25)
        }
        .tasks__list {
                clear:both
        }
        .tasks__item {
                margin-bottom:.5em;
                position:relative
        }
        .tasks__item__toggle {
                cursor:pointer;
                width:100%;
                text-align:left;
                padding:.85em 2.25em .85em 1em;
                background-color:rgba(0,0,0,0.05);
                border:1px solid rgba(0,0,0,0.1)
        }
        .tasks__item__toggle:hover {
                background-color:rgba(0,0,0,0.1);
                border-color:rgba(0,0,0,0.15)
        }
        .tasks__item__toggle--completed {
                text-decoration:line-through;
                background-color:rgba(0,128,0,0.15);
                border-color:rgba(0,128,0,0.2)
        }
        .tasks__item__toggle--completed:hover {
                background-color:rgba(0,128,0,0.25);
                border-color:rgba(0,128,0,0.3)
        }
        .tasks__item__remove {
                position:absolute;
                height:100%;
                top:50%;
                right:0;
                transform:translateY(-50%)
        }
        .tasks__item__remove i {
                vertical-align:middle
        }
    </style>
</head>

<body>
    <div id=&quo.........完整代码请登录后点击上方下载按钮下载查看