[vue] todoList,待办项列表实现

来源：互联网发布：宁国市房地产数据编辑：程序博客网时间：2024/06/07 02:04
直接上图吧！
然后上代码啦！
    .todos{        width:500px;        margin:0 auto;        position:relative;    }    h1{        font-size:96px;        color:rgba(175, 47, 47, 0.15);    }    header{        width:100%;    }    header .new-todo{        box-sizing:border-box;        width:100%;        height:60px;        padding:0 15px;        font-size:20px;        border:1px solid #cdcdcd;    }        section{        width:100%;        box-sizing:border-box;        margin-top:-2px;    }    section ul{        list-style:none;        margin:0;        padding:0;        vertical-align:center;    }    section ul li{        border:1px solid #cdcdcd;        line-height:50px;        padding:0 15px;        margin-top:-1px;    }    section ul li div{        position:relative;    }    section ul li input[type='checkbox']{        text-align:center;        outline:none;        -webkit-appearance: none;        cursor:pointer;    }    section ul li input[type='checkbox']:before{        content: "☆";        font-size:20px;    }    section ul li input[type='checkbox']:checked:before{        content: "★";        font-size:20px;    }     section ul li label{         margin-left:30px;         color:#000;     }     .unactive{        color:#888;        text-decoration:line-through;     }     section ul li .clear-todo{        position:absolute;        height:40px;        width:40px;        margin:auto 0;        top:0;        bottom:0;        right:0;        background:transparent;        border:none;        outline:none;        cursor:pointer;    }    section ul li input[type='text']{        position: relative;        width: 100%;        height: 30px;        text-align: center;        display: none;        margin-left:30px;            }    footer{        box-sizing:border-box;        border:1px solid #cdcdcd;        width:100%;        height:40px;        padding:0 15px;        margin-top:-1px;        font-size:14px;        color:#666;    }    footer span{        float:left;        text-align:left;        width:30%;        line-height:40px;    }    footer ul{        list-style:none;        float:left;        margin:0;        padding:0;        line-height:40px;    }    footer ul li{        float:left;        margin-right:10px;    }    footer a{        text-decoration:none;        color:#666;        padding:3px 6px;        border:1px solid transparent;    }    footer a:hover,footer a:focus{        border:1px solid rgba(175, 47, 47, 0.15);        border-radius:5px;    }    .currentState{        border:1px solid rgba(175, 47, 47, 0.15);        border-radius:5px;    }
阅读全文
0 0