<template>
    <div class="todo-header">
        <input type="text" placeholder="请输入任务名称，按回车键确认">
    </div>
</template>

<script>
    export default {
        name: "Topo"
    }
</script>

<style scoped>
    .todo-header input{
        width:  560px;
        height: 28px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding:  4px 7px;
    }

    .todo-header input:focus{
        outline: none;
        border-color: rgba(82,168,236,0.8);
        box-shadow: inset 0 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
    }

</style>
--------------------------------------------------------------------------------------------------<template>
    <ul class="todo-main">
        <Item></Item>
    </ul>
</template>

<script>
    import Item from './Item';

    export default {
        name: "List",
        components:{Item}
    }
</script>

<style scoped>

    .todo-main{
        margin-left: 0px;
        border:1px solid #ddd;
        border-radius: 2px;
        padding: 0px;
    }

    .tod0-empty {
        height: 40px;
        line-height: 40px;
        border: 1px solid #ddd;
        border-radius: 2px;
        padding-left: 5px;
        margin-top: 10px;
    }
</style>

-----------------------------------------------------------------------------------------------------------------------------

<template>
    <div class="todo-footer">
        <label>
            <input type="checkbox">
        </label>
        <span>
            <span>已完成0</span>
            总任务数3
        </span>
        <button class="btn btn-danger">清楚已完成任务</button>
    </div>
</template>

<script>
    export default {
        name: "Foot"
    }
</script>

<style scoped>

    .todo-footer{
        height: 40px;
        line-height: 40px;
        padding-left: 6px;
        margin-top: 5px;
    }

    .todo-footer label{
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
    }

    .todo-footer label input{
        position: relative;
        top: -1px;
        vertical-align: middle;
        margin-right: 5px;
    }

    .todo-footer button{
        float: right;
        margin-top: 5px;
    }
</style>


-----------------------------------------------------------
<template>
    <li>
        <label>
            <input type="checkbox">
            <span>学习</span>
        </label>
        <button class ="btn btn-danger" style="display: none">删除</button>
    </li>
</template>

<script>
    export default {
        name: "Item"
    }
</script>

<style scoped>
    li{
        list-style: none;
        height: 36px;
        line-height: 36px;
        padding: 0 5px;
        border-bottom: 1px solid #ddd;
    }

    li label{
        float: left;
        cursor: pointer;
    }

    li label li input {
        vertical-align: middle;
        margin-right: 6px;
        position: relative;
        top: -1px;
    }

    li button{
        float: right;
        display: none;
        margin-top: 3px;
    }

    li:before{
        content: initial;
    }

    li:last-child{
        border-bottom: none;
    }
</style>