* { box-sizing: border-box; margin:0; padding:0; list-style:none; } a{ text-decoration: none; } ul { list-style-type: none; } body { font-family: Verdana, sans-serif; background: #E8F0F3; } #calendar,#box{ width:100%; margin: 0 auto; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.1), 0 1px 5px 0 rgba(0,0,0,0.12); } [v-cloak] { display：none; } .year-month { position: fixed; width: 100%; height:50px; padding: 15px 0px; background: #262626; } .add{ width: 15%; float: left; text-align: center; color: white; } .choose-yearMonth{ position: absolute; width: 70%; float: left; text-align: center; color: white; } .today{ width: 15%; text-align: center; float: right; color: white; } .choose-month { text-align: center; font-size: 1rem; } .arrow { padding: 30px; } .arrow:hover { background: rgba(100, 2, 12, 0.1); } .month ul li { color: white; font-size: 20px; text-transform: uppercase; letter-spacing: 3px; } .weekdays { padding-top:55px; background-color: #FFFFFF; display: flex; flex-wrap: wrap; color: #949494; justify-content: space-around; } .weekdays2 { width: 100%; padding-top:55px; background-color: #FFFFFF; display: flex; position: fixed; flex-wrap: wrap; color: #949494; justify-content: space-around; } .weekdays li { display: inline-block; width: 13.6%; text-align: center; } .weekdays2 li { display: inline-block; width: 13.6%; text-align: center; } .days { padding: 0; background: #FFFFFF; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-around; } .days2 { width: 100%; position: fixed; padding: 0; background: #FFFFFF; margin: 0; display: flex; flex-wrap: wrap; justify-content: space-around; } .days li { list-style-type: none; display: inline-block; width: 14.2%; text-align: center; padding-bottom: 10px; padding-top: 10px; font-size: 1rem; color: #000; } .days li .active { padding: 6px 10px; border-radius: 50%; background: #00B8EC; color: #fff; } .days li .other-month { padding: 5px; color: gainsboro; } .days li:hover { background: #e1e1e1; } .li-hidden{ display:none; } .li-show{ display:block; } .ul1 { overflow:hidden; } .ul1 li { float:left; margin:10px; cursor:pointer; width: calc(79%/3); text-align: center; } .ul1 li:hover { color:#00B8EC; } .ul2 { width: 90%; 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