/* CSS Document */ @charset "utf-8"; .grid{ width: 94%; margin: 0 auto; } .header-main{ width: 100%; top: 0; left: 0; z-index: 10; } .header{ /* background: #f9f7f6; */ height: 44px; /* border-bottom: 1px solid #E8E8E8; */ width: 94%; padding: 0 3%; display: flex; display: -webkit-flex; display: -ms-flexbox; flex-wrap: wrap; align-items: center; color: #383838; /* position: fixed; top: 0; left: 0; z-index: 10;*/ } .header .child.return{ display: flex; display: -webkit-flex; display: -ms-flexbox; justify-content: flex-start; flex: 0; -ms-flex: 0; -webkit-flex: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 20%; } .header .child.return i{ width: 6px; height: 10px; background: url(../images/BACK.png) no-repeat; background-size: cover; } .header .child.date{ display: flex; display: -webkit-flex; display: -ms-flexbox; justify-content:center; align-items: center; flex: 0; -ms-flex: 0; -webkit-flex: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 60%; } .header .child.date i{ display: inline-block; width: 4px; height: 2px; background: url(../images/calendar_bottom.png) no-repeat; background-size: cover; margin-left: 5px; } .header .child.almanac{ display: flex; display: -webkit-flex; display: -ms-flexbox; justify-content: flex-end; flex: 0; -ms-flex: 0; -webkit-flex: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 20%; } .share img{ width: 15px; height: 15px; vertical-align: middle; } /*start day*/ .content{ /* padding-top: 1.49rem; */} .day{ height: 68px; /* background:#f9f7f6; */ color: #333333; } .day .grid{ width: 94%; height: 100%; padding: 0 3%; display: flex; display: -webkit-flex; display: -ms-flexbox; align-items: center; } .day-left { display: flex; display: -webkit-flex; display: -ms-flexbox; flex: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 56%; -webkit-flex: 0; -webkit-flex-grow: 0; -webkit-flex-shrink: 0; -webkit-flex-basis: 56%; } .day-right { display: flex; display: -webkit-flex; display: -ms-flexbox; flex: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 44%; -webkit-flex: 0; -webkit-flex-grow: 0; -webkit-flex-shrink: 0; -webkit-flex-basis: 44%; align-items: center; justify-content: flex-end; -webkit-justify-content: flex-end; -ms-justify-content: flex-end; } .day-left h1{ font-size: 55px; padding-right: 4px; color: #5EB263; } .day-left .top-contrl p{ display: flex; display: flex; display: -webkit-flex; align-items: center; flex-wrap: wrap; -webkit-align-items: center; -webkit-flex-wrap: wrap; margin-top: 5px; margin-bottom: 5px; color: #5EB263; } .top-contrl p span{ width: 5px; height: 4px; background: url(../images/cotrl-bottom.png) no-repeat; background-size: cover; /* margin-left: .1rem;*/ } .top-contrl i{ font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #5EB263; } .day-left p em{ font-size: 12px; color: #5EB263; } .day-left p i{ margin-top: 1px; display: block; font-size: 14px; } /*.day-right{ float: right; height: 100%; }*/ .day-right .yun { height: 100%; margin-right: 20px; display: flex; display: -webkit-flex; display: -ms-flexbox; align-items: center; -webkit-align-items: center; } .day-right .yun span{ display: inline-block; width: 35px; height: 35px; line-height: 30px; text-align: center; border: 2px solid #fff; border-radius: 50%; margin-left: 8px; /*align-self:center;*/ } .note{ width: 100%; height: 68px; border-bottom: 1px solid #ddd; background: #fff; } .note .grid{ padding: 12px 0; display: flex; display: -webkit-flex; display: -ms-flexbox; flex-wrap: wrap; justify-content: space-between; } .note .grid .note-left{ flex: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 75%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .note .grid .note-right{ display: flex; display: -webkit-flex; display: -ms-flexbox; align-items: center; flex: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 25%; justify-content: flex-end; color: #333; } .note .grid .note-right i{ width: 4px; height: 13px; background: url(../images/calendar_arrow_right.png) no-repeat; background-size: cover; margin-left: 6px; } .note .grid .note-left p{ width: 100%; font-size: 14px; line-height: 1.6; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .note .grid .note-left p.yi i{ color: #06b5f8; } .note .grid .note-left p.ji i{ color: #ec5252; } .week ul{ width: 98%; padding: 0 4px; margin: 0 auto; display: flex; display: -webkit-flex; display: -ms-flexbox; height: 24px; } .week ul li{ display: flex; display: -webkit-flex; display: -ms-flexbox; flex: auto; -ms-flex: auto; -webkit-flex: auto; justify-content: center; align-items: center; font-size: 13px; } .tables{ font-size: 14px; color: #666; font-family:"微软雅黑"; display: flex; display: -webkit-flex; display: -ms-flexbox; } .tables tbody{ width: 100%; } .tables tbody tr{ width: 98%; margin-left: 1%; padding: 0 4px; display: flex; display: -webkit-flex; display: -ms-flexbox; flex-wrap: wrap; -webkit-flex-wrap: wrap; } .tables tbody tr td{ border: 2px solid #fff; flex: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 14.2%; justify-content: center; padding: 2px 0; position: relative; line-height: 40px; } .tables tbody tr td.active i:after{ content: ''; position: absolute; width: 7px; height: 7px; background: #ccc; border-radius: 50%; right: -3px; top: 40%; z-index: 20; } .tables tbody tr td.yellow i:after{ background: #F3C84E; } .tables tbody tr td.green i:after{ background:#8FC185 ; } .tables tbody tr td.blue i:after{ background:#7A9AE2 ; } .tables .list i{ display: flex; display: -webkit-flex; display: -ms-flexbox; font-size: 16px; justify-content: center; color: #000; width: 32px; height: 32px; border-radius: 50%; position: relative; line-height: 32px; margin: 0 auto; } .tables .list em{ display: flex; display: -webkit-flex; display: -ms-flexbox; font-size: 12px; justify-content: center; } .swiper-slide table tr{ text-align: center; height: 48px; margin-bottom: 5px; } tr .not_this{ color: #ccc !important; } .today i{ background: rgba(94, 178, 99, 0.6) ; color: #fff!important; border-radius: 50%; } .xuanzhong i{ height: 50px; background: #5EB263 !important; border-radius: 50%; color: #fff!important; } .xuanzhong font,.xuanzhong i{ color: #fff!important; } tr td:first-child{color: #f00;} tr td:last-child{color: #f00;} td{position: relative;} td .fangjia{ display: block; width: 7px; height: 7px; background: url(../images/calendar_img_relax.png) no-repeat; background-size: contain; position: absolute; right: 0; top: 0; } td .shangban{ display: block; width: 7px; height: 7px; background: url(../images/calendar_img_work.png) no-repeat; background-size: contain; position: absolute; right: 0; top: 0; } /*******弹窗******/ .prorup{ width: 100%; height: 100%; background: #000; position: fixed; top: 0; left: 0; z-index: 12; opacity: 0.4; display: none; } .layer{ position: fixed; width: 94%; top: 63px; left: 50%; margin-left: -47%; z-index: 14; display: none; } .layer .san{ width: 100%; display: block; height: 7px; } .layer .san i{ display: inherit; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 4px solid #fff; float: right; margin-right: 30px; } .layer .jia{ width: 100%; background: #fff; border-radius: 8px; } .jia ul{ width: 100%; display: flex; display: -webkit-flex; display: -ms-flexbox; flex-wrap: wrap; } .jia ul li{ height: 54px; float: left; text-align: center; color: #333; flex: 0; flex-grow: 0; flex-shrink: 0; flex-basis: 49.8%; } .jia ul li:first-of-type{ border: 0; } .jia ul li:nth-child(2n){ border-bottom: 1px solid #eee; } .jia ul li:nth-child(2n+1){ border-right: 1px solid #eee; border-bottom: 1px solid #eee; } .jia ul li span{ display: block; font-size: 14px; margin-top: 8px; } .jia ul li em{ font-size: 12px; } .jie{ position: fixed; width: 94%; top: 63px; left: 50%; margin-left: -47%; z-index: 14; display: none; } .jie .san{ width: 100%; display: block; height: 7px; position: relative; } .jie .san i{ display: inherit; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 4px solid #fff; position: absolute; right: 0; top: 0; margin-right: 5px; } .jie .solar{ width: 100%; background: #fff; border-radius: 8px; } .jie .solar .solar-title{ height: 25px; text-align: center; color: #ec5252; line-height: 25px; } .solar ul{ width: 100%; } .solar ul li{ float: left; width: 24.7%; text-align: center; line-height: 40px; font-size: 14px; color: #333; border-top: 1px solid #eee; border-right: 1px solid #eee; } .solar ul li:nth-child(4){ border-right: 0; } .solar ul li:nth-child(8){ border-right: 0; } .solar ul li:nth-child(12){ border-right: 0; } .solar ul li:nth-child(16){ border-right: 0; } .solar ul li:nth-child(20){ border-right: 0; } .solar ul li:nth-child(24){ border-right: 0; } .dibu{ height: 50px; width: 100%; } .footer ul{ width: 100%; position: fixed; bottom: 0; left: 0; z-index: 10; display: flex; display: -webkit-flex; display: -ms-flexbox; height: 49px; border-top: 1px solid #e3e3e3; background: #fff; } .footer ul li{ display : flex; display: -webkit-flex; display: -ms-flexbox; flex: auto; -ms-flex: auto; -webkit-flex: auto; align-items: center; position: relative; } .footer ul li a{ width: 100%; display : flex; display: -webkit-flex; display: -ms-flexbox; flex-wrap: wrap; justify-content: center; } .footer ul li:nth-child(1) a i{ display: inline-block; width: 11px; height: 11px; background:url(../images/btn_calendar_selected.png) no-repeat; background-size: cover; } .footer ul li:nth-child(2) a i{ display: inline-block; width: 11px; height: 11px; background:url(../images/btn_huangli.png) no-repeat; background-size: cover; } .footer ul li a em{ display : flex; display: -webkit-flex; display: -ms-flexbox; width: 100%; justify-content: center; margin-top: 4px; } .footer ul li:nth-child(1) a{ color: #ec5252; } .footer ul li:nth-child(1):before{ content: " "; position: absolute; right: 0; top: 15%; height: 70%; background: #e3e3e3; width: 1px; } /*弹窗*/ .tc{ width: 100%; height: 100%; background: rgba(0,0,0,0.4); position: fixed; top: 0; left: 0; bottom: 0; z-index: 12; display: none; } .tc-innner{ background: #fff; width: 80%; height: 305px; position: fixed; top: 50%; margin-top: -153px; left: 10%; /* margin: 75px 0 0 -75px; */ z-index: 14; border-radius: 4px; overflow: hidden; display: none; } .tc-innner h2{height: 50px;width: 100%; box-sizing: border-box;padding: 0 7px;font-size: 14px;color: #ec5252;line-height: 50px; font-weight: normal;} .title-right{float: right;width: 55px;height: 24px;border: 1px #ec5252 solid;box-sizing: border-box; border-radius: 10px;margin-top: 6px;overflow: hidden;} .title-right .zblck{width: 50%;height: 100%;color: #ec5252;font-size: 14px;line-height: 22px;text-align: center;float: left;} .title-right .active{background: #ec5252;color: #fff;} .current-time{text-align: center;height: 32px;line-height: 32px;font-size: 14px;color: #666;} .swiper-box{height: 160px;margin: 0 7px;box-sizing: border-box; margin-top: 5px;position: relative;} .swiper-box i{width: 100%;height: 1px;background: #e3e3e3;display: block;position: absolute;left: 0;} .swiper-box .i1{top: 0;} .swiper-box .i2{top: 53px;} .swiper-box .i3{top: 100px;} .swiper-box-li{width: 33%;float: left;text-align: center;overflow: hidden;} .nbxs{height: 160px;} .nbxs .swiper-slide{height: 53px;line-height: 53px;} .nbxs .swiper-slide-active{color: #ec5252;} .tc-bot{height: 50px;border-top: 1px #e3e3e3 solid;position: relative;} .tc-bot>div{float: left;width: 50%;line-height: 50px;font-size: 14px;text-align: center;} .tc-bot-left{color: #999;} .tc-bot-right{color: #ec5252;} .tc-bot i{display: block;width: 1px;height: 20px;background: #e3e3e3;position: absolute;top: 14px;left: 50%;margin-left: 1px;} /*loading*/ .loading{width: 76px;height:115px;position:relative;top: 50%;left: 50%;background: rgba(0,0,0,0.8);border-radius: 6px; margin-left: -38px;z-index: 9999999999999999999999999999;} .loading-bj{background: url(../images/loading.png);width: 18px;height: 18px;background-size: 18px;margin: 30px auto 0;animation:rotateIn 1s .2s linear infinite;-moz-animation:rotateIn 1s .2s linear infinite;-webkit-animation:rotateIn 1s .2s linear infinite;} .loading p{color:#fff;font-size: 14px;text-align: center;margin-top: 10px;} @-webkit-keyframes rotateIn{ 0%{transform: rotate(0)} 100%{transform: rotate(360deg)} } @-moz-keyframes rotateIn{ 0%{transform: rotate(0)} 100%{transform: rotate(360deg)} } .reduction-bj{background: url(../images/reduction.png);width: 18px;height: 18px;background-size: 18px;margin: 30px auto 0;} .jg{background: url(../images/jg.png); background-size: 18px; } .back2{background:url(../images/back.png) center no-repeat;background-size: 6px 10px;} .week ul li a{ color: #999; } .tables .list.today i,.tables .list.today i font{ color: #fff; }