120 lines
8.4 KiB
HTML
120 lines
8.4 KiB
HTML
<include file="Inc:head"/>
|
|
<link rel="stylesheet" href="/Public/skin/css/iconfont.css" />
|
|
<style>
|
|
body.on{ overflow:hidden;}
|
|
.clearer:after{content: "";display: block;height: 0;clear: both;visibility: hidden;}
|
|
.clearer{zoom: 1;}/* 触发 hasLayout */
|
|
|
|
.Refresh{ position:fixed; width:920px; height:658px; background:#fff; z-index:1000; left:50%; top:50%; transform:translateX(-50%) translateY(-50%); box-shadow:0px 0px 20px rgba(0,0,0,.3); border:0px solid #28b779;}
|
|
.Refresh .Refresh_top{ padding:20px 48px; background:#f5f5f5; position:relative;}
|
|
.Refresh .Refresh_top .Refresh_close{ position:absolute; right:1%; top:10%; font-size:20px; color:#666;
|
|
display:inline-block; width: 16px;
|
|
height: 16px;
|
|
margin-left: 10px;
|
|
font-size: 12px;
|
|
background-position: 0 -40px;
|
|
cursor: pointer;
|
|
|
|
}
|
|
.Refresh .Refresh_top .Refresh_left{ width:60%;}
|
|
.Refresh .Refresh_top .Refresh_left .Refresh_left_icon{ width:81px; height:81px; border-radius:100%; text-align:center; line-height:81px; background: linear-gradient(to top,#29b777, #45b44b); color:#fff; font-size:40px;}
|
|
.Refresh .Refresh_top .Refresh_left .Refresh_left_txt{ text-align:left; margin-left:18px; padding:13px 0px;}
|
|
.Refresh .Refresh_top .Refresh_left .Refresh_left_txt dd{ font-size:30px; color:#333333; font-weight:lighter; margin:0px;}
|
|
.Refresh .Refresh_top .Refresh_left .Refresh_left_txt dt{ font-size:13px; color:#868986; font-weight:normal; margin-top:15px;}
|
|
.Refresh .Refresh_top .Refresh_right{ display:inline-block; line-height:46px; background:#31d16c; color:#fff; font-size:22px; width:156px; border:0px; border-radius:100px; text-align:center; box-shadow:0px 0px 10px rgba(49,209,108,1); margin:17px 0px;}
|
|
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_title{ height:50px; border-bottom:1px solid #ececec; padding:0px 48px;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_title .list_title_checkbox label{ margin-bottom:0px; line-height:47px;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_title .list_title_icon{ line-height:50px; margin-right:20px; font-size:16px;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_title .list_title_icon span{ font-size:20px; color:#ff7751; display:inline-block; position:relative;margin-right:9px;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_title .list_title_txt{ line-height:50px;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_title .list_title_txt span{ color:#ff7751;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content{ padding:14px 50px; padding-right:0px; padding-bottom:4px;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li{ text-align:center; position:relative; margin-right:44px; margin-bottom:0px;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li:last-child{ margin-right:0px;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li #uniform-undefined{ position:absolute; right:0%; top:32%;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list:nth-child(1) .bottom_list_content .list_content_li:last-child #uniform-undefined{ right:5%;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list:nth-child(2) .bottom_list_content .list_content_li:last-child #uniform-undefined{ right:10%;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li .content_li_txt dd{ width:48px; height:48px; text-align:center; line-height:48px; color:#fff; font-size:24px; background:#f74d4d; border-radius:100px; margin:0 auto;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li .content_li_txt dt{ font-weight:normal; font-size:12px; color:#666666; margin-top:10px; margin-bottom:5px;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li .content_li_txt .li_txt_bottom{ height:18px; line-height:18px; text-align:center; background:#c7c7c7; border-radius:20px; font-size:12px; color:#fff; width:68px; margin:0 auto; position:relative; overflow: hidden;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li.on .content_li_txt .li_txt_bottom{ background:#55c9ff;}
|
|
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li.color1 .content_li_txt dd{ background:#f74d4d;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li.color2 .content_li_txt dd{ background:#28b779;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li.color3 .content_li_txt dd{ background:#2295c9;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li.color4 .content_li_txt dd{ background:#2255a4;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li.color5 .content_li_txt dd{ background:#31d16c;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li.color6 .content_li_txt dd{ background:#ffb848;}
|
|
|
|
|
|
|
|
.Refreshing .Refresh_top{ position:relative;}
|
|
.Refreshing .Refreshing_right{ font-size:15px; color:#666666; line-height:81px;}
|
|
.Refreshing .Refresh_top .Refreshing_schedule{ position:absolute; bottom:0; width:100%; height:4px; background:#15db54; left:0;}
|
|
.Refreshing .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li{ position: relative; overflow: hidden;}
|
|
.Refreshing .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li .content_li_txt dd{ background:#c7c7c7; position: relative;}
|
|
.Refreshing .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li.Finished .content_li_txt dd{ background:#31d16c;}
|
|
.Refreshing .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li.Finished .content_li_txt .li_txt_bottom span{ background:#31d16c; left: 0;}
|
|
.Refreshing .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li.Finishing .content_li_txt dd{ background:#008aff;}
|
|
.Refreshing .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li.Finishing:before{ content: ""; display: inline-block;position:absolute; width:50%; height:100%; background:#C92225; left:0; top:0;
|
|
animation:mymove 1.5s infinite; z-index: 50;
|
|
background: linear-gradient(to left,#008aff, rgba(255,255,255,.1));
|
|
}
|
|
|
|
|
|
@keyframes mymove{
|
|
from {left:-50px; opacity:1;}
|
|
to {left:80px; opacity:0;}
|
|
}
|
|
|
|
|
|
|
|
.Refreshing .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li .content_li_txt .li_txt_bottom span{ position:absolute; width:75%; left:0; height:100%; display:inline-block; background:#008aff; border-radius:200px 0px 0px 200px;}
|
|
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li .content_li_txt .li_txt_bottom1{ display: none;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li.Finishing .content_li_txt .li_txt_bottom1{ display: block;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li.Finished .content_li_txt .li_txt_bottom1{ display: block;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li.Finishing .content_li_txt .li_txt_bottom2{ display: none;}
|
|
.Refresh .Refresh_bottom .Refresh_bottom_list .bottom_list_content .list_content_li.Finished .content_li_txt .li_txt_bottom2{ display: none;}
|
|
|
|
.fensug{overflow:hidden; position:relative}
|
|
.fensug .wavenum{width:81px;height:81px;overflow:hidden;-webkit-border-radius:50%;border-radius:50%;text-align:center;display:table-cell;vertical-align:middle; position:absolute; left:0; top:0; z-index:5; display:flex; align-items:center; justify-content:center;flex-direction:column; margin:0 auto;}
|
|
.fensug .wavenum b{ color:#fff; font-size:23px; text-align:center; display:block; position:relative; z-index:2;}
|
|
|
|
|
|
|
|
|
|
.waven{ width:81px; height:81px; webkit-border-radius:25em;
|
|
-moz-border-radius:25em;
|
|
border-radius:25em;background:#ff9800; overflow:hidden; position:relative}
|
|
|
|
.wave {width:408px;height: 80%; position:absolute; left:0px; bottom:0; background: url(/Public/Admin/img/wave.png) no-repeat;animation: move_wave 1s linear infinite; -webkit-animation: move_wave 1s linear infinite;}
|
|
|
|
|
|
|
|
@-webkit-keyframes move_wave {
|
|
0% {
|
|
-webkit-transform: translateX(0)
|
|
}
|
|
50% {
|
|
-webkit-transform: translateX(-25%)
|
|
}
|
|
100% {
|
|
-webkit-transform: translateX(-50%)
|
|
}
|
|
}
|
|
|
|
@keyframes move_wave {
|
|
0% {
|
|
transform: translateX(0)
|
|
}
|
|
50% {
|
|
transform: translateX(-25%)
|
|
}
|
|
100% {
|
|
transform: translateX(-50%)
|
|
}
|
|
}
|
|
|
|
</style> |