You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
259 lines
5.5 KiB
259 lines
5.5 KiB
/*日历控件开始*/
|
|
.wb-calender{
|
|
width: 210px;
|
|
overflow: hidden;
|
|
box-shadow: 3px 3px 6px 0px #333333;
|
|
}
|
|
.wb-calender .content{
|
|
width: 210px;
|
|
background-color: #D8B78D;;
|
|
}
|
|
.wb-calender .content ul{
|
|
list-style: none;
|
|
display: block;
|
|
}
|
|
.wb-calender .content ul li{
|
|
height: 30px;
|
|
width: 30px;
|
|
display: inline-block;
|
|
}
|
|
.wb-calender .content ul li.left.ng-enter{
|
|
transform: translateX(-30px);
|
|
transition: all 0.2s;
|
|
}
|
|
.wb-calender .content ul li.left.ng-enter.ng-enter-active{
|
|
transform: translateX(0px);
|
|
}
|
|
.wb-calender .content ul li.right.ng-enter{
|
|
transform: translateX(30px);
|
|
transition: all 0.2s;
|
|
}
|
|
.wb-calender .content ul li.right.ng-enter.ng-enter-active{
|
|
transform: translateX(0px);
|
|
}
|
|
.wb-calender .content ul li a{
|
|
display: block;
|
|
height: 100%;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: #211F16;
|
|
line-height: 30px;
|
|
transition: transform 0.3s;
|
|
}
|
|
.wb-calender .content ul li a:hover{
|
|
transform: scale(1.3);
|
|
}
|
|
.wb-calender .content ul li.tag{
|
|
background: url("../images/dowrite.png") no-repeat center;
|
|
background-size: 70% 70%;
|
|
}
|
|
|
|
.wb-calender .content ul li a.cover{
|
|
color:#8E8046;
|
|
}
|
|
.wb-calender .nav{
|
|
height: 30px;
|
|
background-color: #75886e;
|
|
border-bottom: 1px solid white;
|
|
}
|
|
.wb-calender .nav ul li{
|
|
display: inline-block;
|
|
width: 30px;
|
|
height: 100%;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
font-weight: bolder;
|
|
color: #FFFFFF;
|
|
}
|
|
.wb-calender .ctrl{
|
|
height: 30px;
|
|
background-color: #E0B0B0;
|
|
border-top-left-radius: 5px;
|
|
border-top-right-radius: 5px;
|
|
}
|
|
.wb-calender .ctrl ul li{
|
|
display: inline-block;
|
|
height: 100%;
|
|
width: 100%;
|
|
text-align: center;
|
|
line-height: 30px;
|
|
width: 30px;
|
|
}
|
|
.wb-calender .ctrl ul li.date{
|
|
width: 90px;
|
|
line-height: 30px;
|
|
}
|
|
.wb-calender .ctrl ul li a{
|
|
height: 100%;
|
|
width: 100%;
|
|
display: inline-block;
|
|
}
|
|
.wb-calender .ctrl ul li:nth-child(1) a{
|
|
border-top-left-radius: 5px;
|
|
}
|
|
.wb-calender .ctrl ul li:nth-last-child(1) a{
|
|
border-top-right-radius: 5px;
|
|
}
|
|
/*日历控件结束*/
|
|
|
|
/*时钟控件开始*/
|
|
.wb-clock{
|
|
width: 80px;
|
|
height: 80px;
|
|
position: absolute;
|
|
-moz-user-select:none;/*火狐*/
|
|
-webkit-user-select:none;/*webkit浏览器*/
|
|
-ms-user-select:none;/*IE10*/
|
|
-khtml-user-select:none;/*早期浏览器*/
|
|
user-select:none;
|
|
transition: all 0.3s;
|
|
}
|
|
.wb-clock:hover{
|
|
transform: rotate(360deg);
|
|
}
|
|
.wb-clock>a{
|
|
color: #bababa;
|
|
}
|
|
.wb-clock>a:hover{
|
|
color: #ffffff;
|
|
}
|
|
.wb-clock.normal{
|
|
transform: scale(1);
|
|
}
|
|
.wb-clock.small{
|
|
transform: scale(0.5);
|
|
}
|
|
.wb-clock.large{
|
|
transform: scale(2);
|
|
}
|
|
.wb-clock .background{
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #292929;
|
|
border-radius: 50px;
|
|
overflow: hidden;
|
|
position: relative;
|
|
transition: all 1s;
|
|
}
|
|
.wb-clock>a:hover .background{
|
|
background-color: #dfdce0;
|
|
}
|
|
.wb-clock .background .second{
|
|
width: 0px;
|
|
height: 0px;
|
|
border-radius: 40px;
|
|
position: absolute;
|
|
border: 40px solid transparent;
|
|
border-top: 40px solid #dfdce0;
|
|
}
|
|
.wb-clock>a:hover .background .second{
|
|
border-top: 40px solid #3a3a3a;
|
|
}
|
|
.wb-clock .background .second.ng-enter{
|
|
transition: all 1s;
|
|
transform: rotate(0deg);
|
|
}
|
|
.wb-clock .background .second.ng-enter.ng-enter-active{
|
|
transform: rotate(360deg);
|
|
}
|
|
.wb-clock .background .center {
|
|
width: 76px;
|
|
height: 76px;
|
|
position: absolute;
|
|
background-color: #8F9890;
|
|
top: 2px;
|
|
left: 2px;
|
|
border-radius: 38px;
|
|
display: table;
|
|
transition: all 1s;
|
|
}
|
|
.wb-clock>a:hover .background .center{
|
|
background-color: #6b746c;
|
|
}
|
|
.wb-clock .background .center .content{
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
}
|
|
.wb-clock .background .center .content>span{
|
|
vertical-align: top;
|
|
}
|
|
.wb-clock .background .center .content>span.h,
|
|
.wb-clock .background .center .content>span.m,
|
|
.wb-clock .background .center .content>span.s{
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 20px;
|
|
height: 20px;
|
|
overflow: hidden;
|
|
}
|
|
.wb-clock .background .center .content>span>span{
|
|
display: inline-block;
|
|
width: 20px;
|
|
height: 20px;
|
|
top: 0px;
|
|
left: 0px;
|
|
position: absolute;
|
|
}
|
|
.wb-clock .background .center .content>span>span.ng-enter{
|
|
transition: all 0.1s;
|
|
transform: translateY(15px);
|
|
}
|
|
.wb-clock .background .center .content>span>span.ng-enter.ng-enter-active{
|
|
transform: translateY(0px);
|
|
}
|
|
.wb-clock .background .center .content>span>span.ng-leave{
|
|
transition: all 0.1s;
|
|
transform: translateY(0px);
|
|
}
|
|
.wb-clock .background .center .content>span>span.ng-leave.ng-leave-active{
|
|
transform: translateY(-15px);
|
|
}
|
|
/*时钟控件结束*/
|
|
|
|
/*导航控件开始*/
|
|
.wb-nav{
|
|
position: fixed;
|
|
right: 0px;
|
|
bottom: 200px;
|
|
width: 35px;
|
|
transition: all 1s;
|
|
border-left: 1px solid #dddddd;
|
|
/*transform: translateX(35px);*/
|
|
}
|
|
.wb-nav ul li{
|
|
display: block;
|
|
height: 35px;
|
|
width: 35px;
|
|
border-bottom: 1px solid #dddddd;
|
|
background-color: #ffffff;
|
|
line-height: 35px;
|
|
text-align: center;
|
|
list-style: none;
|
|
}
|
|
.wb-nav ul li:first-child{
|
|
border-top: 1px solid #dddddd;
|
|
}
|
|
.wb-nav ul li:hover{
|
|
background-color: #e7e7e7;
|
|
}
|
|
.wb-nav ul li a{
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.wb-nav ul li:hover a{
|
|
color: #3A3A3A;
|
|
}
|
|
|
|
.guide{
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 10;
|
|
overflow: auto;
|
|
}
|
|
.guide .border{
|
|
background-color: #01a252;
|
|
width: 2000px;
|
|
height: 2000px;
|
|
} |