预览页面:点击打开链接
效果图:
下面是代码
<!DOCTYPE html>
<html>
<head>
<title>plan and task list</title>
<meta charset="UTF-8"/>
<script type="text/javascript" src="./FileSaver.min.js"></script>
<script type="text/javascript" src="./vue.js"> </script>
</head>
<body>
<style type="text/css">
.plan {
width: 79%;
float: left;
background: #ccc;
}
.list {
width: 20%;
float: right;
background: #ddd;
}
.plancontent {
height: 800px;
}
.listcontent {
height: 800px;
}
.must {
height: 400px;
background-color: #ff9900;
}
.option {
background-color: #4dab4d;
height: 400px;
}
.edit {
width: 100%;
height: 800px;
}
.footer {
clear: both;
padding-top: 20px;
}
h1 {
margin: 0 0;
}
body {
margin: 0 0;
}
.header {
position: relative;
}
.userbar {
position: absolute;
right: 0;
top: 0;
height: 55px;
}
.userbar li {
float: left;
list-style: none;
margin: 0px 5px 0px 5px;
padding: auto;
line-height: 55px;
}
a {
color: #000;
}
.edit textarea {
width: 100%;
height: 373px;
resize: none;
padding: 0 0;
border: 1px solid black;
margin: 0 0;
box-sizing: border-box;
}
h1, h2 {
margin: 0;
}
#upload {
opacity: 0;