vue日历/日程提醒/html5本地缓存功能

2020-06-12 21:15:14易采站长站整理

margin: 0 auto;
}
.ul2 li {
border:1px solid #ccc;
padding:10px;
width:100%;
height:1000px;
}
.keep-right{
float: right;
}
.select-p{
/* border: 1px solid black; */
line-height: 30px;
padding: 10px;
width: 50%;
position: absolute;
right: 6%;
background-color: white;
z-index: 3;
}
.select-p p:hover{
background-color: #E6E6FA;
}
.
.active {
color:#00B8EC;
}
/* 添加日程样式 */
#content{
height:80%;
position: absolute;
top: 0;
right: 10%;
bottom: 0;
left: 10%;
margin: auto;
background-color: wheat;
}
.nav{
width: 100%;
height:50px;
margin-bottom: 20px;
padding:20px;
}
.back{
width:15%;
height:30px;
line-height:30px;
text-align: center;
background-color: gray;
border-radius: 25px;
float: left;
color: white;
}
.finish{
width: 15%;
height:30px;
line-height:30px;
background-color: red;
border-radius: 25px;
text-align: center;
float: right;
color: white;
}
.overlay{
position:fixed;
width:100%;
height:100%;
top:0;
left:0;
background-color:rgba(0,0,0,0.2);
z-index:2;
}
#curtain{
width:80%;
position: absolute;
right: 10%;
left: 10%;
margin: auto;
background-color:#fff;
border-radius:2px;
box-shadow: 0 0 8px rgba(0,0,0,0.2);
position:fixed;
bottom: 10%;
text-align:center;
}
.icon-shell{
width:80%;
margin: 0 auto;
}
.icon-true{
float: right;
width: 20px;
height: 30px;
border-bottom: 3px solid #00B8EC;
border-right:3px solid #00B8EC;
margin: 10px auto;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.icon-true:hover{
opacity: 0.5;
}
.icon-false{
float: left;
padding-top: 18px;
font-size: 1.8em;
color: red;
}
.icon-false:hover{
opacity: 0.5;
}
#curtain label{
text-transform: uppercase;
background-color: #f4f4f4;
width: 30%;
height: 40%;
font-size: 1em;
display: inline-block;
padding: 10px;
margin: 10% 0;
}
#curtain input{
display: block;
border: 0;
font: inherit;
font-size: 1em;
padding: 6px;
outline: none;
text-align: center;
width: 100%;
margin: 10px auto;
background-color:#fff;
}
.clear{
clear: both;
}

 time.js


new Vue({
el: '#app',
data: {
//日历
currentYear: 2019,//
lockYear:2019,//返回当前年
currentMonth: 1,//
lockMonth:1,//返回当前月
currentDay: 1,//
lockDay:1,//返回当前日
setDay:1,//取月份默认从一号开始取
currentWeek: 2,//周几