#calendar *,#calendar *:before,#calendar *:after,#calendar :after,#calendar :before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .calendar-select { display: none; } .calendar-date-box{ height: 100%; position: relative; } .calendar-cell.on{ position: relative; z-index: 99; } .calendar-cell .calendar-content-pop{ display: none; } .calendar-cell.on .calendar-content-pop{ width: 200%; display: block; position: absolute; left: 100%; top: 0; z-index: 99; background: #db1e28 url(../img/worm-pop-bg.jpg) no-repeat; clip-path: polygon(-100px 0px,0 0, 100% 0,100% calc(100% - 20px), calc(100% - 20px) 100%,-100px 100%, 0 calc(100% - 20px),-100px 20px); animation: calendar-animate 0.3s; padding: 50px 40px; padding-bottom: 100px; color: #fff; } .calendar-cell.on .calendar-content-pop::before{ position: absolute; content: ''; border: 15px solid #db1e28; left: -30px; top: 0; border-left-color: transparent; border-bottom-color: transparent; } .calendar-cell.on .calendar-content-pop.pop_left{ width: 200%; display: block; position: absolute; right: 100%; left: auto; top: 0; z-index: 99; background: #db1e28 url(../img/worm-pop-bg.jpg) no-repeat; clip-path: polygon(0px 0px,0 0, calc(100% + 50px) 0,100% 100%, calc(100% - 20px) 100%,20px 100%, 0 calc(100% - 20px),-100px 20px); animation: calendar-animate 0.3s; padding: 50px 40px; padding-bottom: 100px; color: #fff; } .calendar-cell.on .calendar-content-pop.pop_left::before{ right: -30px; left: auto; border: 15px solid #db1e28; border-right-color: transparent; border-bottom-color: transparent; } [id*=calendar] .time-show i{ cursor: pointer; } [id*=calendar] .calendar-date .events{ line-height: 2; font-size: 14px; } [id*=calendar] .calendar-date .calendar-content-pop li { white-space: normal; } .calendar { overflow: visible; } .calendar-body { overflow: visible; } [id*=calendar] .calendar-date .calendar-content-pop li > span{ display: inline-block; vertical-align: top; width: calc(100% - 4em); line-height: 24px; } [id*=calendar] .calendar-date .calendar-content-pop .events li::before{ content: ''; display: inline-block; vertical-align: top; width: auto; height: auto; border-radius: 100%; line-height: 24px; } [id*=calendar] .calendar-date .calendar-content-pop .events li[type='1']::before{ content: '大连:'; background: none; } [id*=calendar] .calendar-date .calendar-content-pop .events li[type='2']::before{ content: '郑州:'; background: none; } [id*=calendar] .calendar-date .calendar-content-pop .events li[type='3']::before{ content: '上期:'; background: none; } [id*=calendar] .calendar-date .calendar-content-pop .events li[type='4']::before{ content: '中金:'; background: none; } [id*=calendar] .calendar-date .calendar-content-pop .events li[type='5']::before{ content: '能源:'; background: none; } [id*=calendar] .calendar-date .calendar-content-pop .events li[type='6']::before{ content: '广州:'; background: none; } @keyframes calendar-animate { 0%{ opacity: 0; transform: translate3d(20px,0,0); } 100%{ opacity: 1; transform: translate3d(0,0,0); } } [id*=calendar] .calendar-date .events li::before{ content: ''; display: inline-block; vertical-align: middle; width: 8px; height: 8px; border-radius: 100%; font-size: 13px; display: inline-block; width: 20px; height: 20px; line-height: 20px; background: #5ec400; color: #fff; text-align: center; border-radius: 100%; vertical-align: middle; } [id*=calendar] .calendar-date .events li[type='1']::before{ content: '大'; background: #5ec400; } [id*=calendar] .calendar-date .events li[type='2']::before{ content: '郑'; background: #7eb2ff; } [id*=calendar] .calendar-date .events li[type='3']::before{ content: '上'; background: #ff5830; } [id*=calendar] .calendar-date .events li[type='4']::before{ content: '中'; background: #f3a416; } [id*=calendar] .calendar-date .events li[type='5']::before{ content: 'INE'; background: #c716f3; } [id*=calendar] .calendar-date .events li[type='6']::before{ content: '广'; background: #1555f5; } .calendar-cell.calendar-thisMonth .calendar-date, .calendar-cell.calendar-today .calendar-date{ background: #d70d1707; } .calendar-column-header{ background: #fafafa; color: #4b4b4b; font-weight: bold; } .calendar-date{ padding: 18px; } [id*=calendar] .calendar-date .calendar-content .events li > span{ display: inline-block; vertical-align: middle; margin-left: 1em; overflow: hidden; text-overflow: ellipsis; width: calc(100% - 20px); } .calendar-date:hover:before{ border: 1px solid #db1e28; } .calendar-date-value-box .calendar-value{ text-align: left; display: inline; font-size: 36px; line-height: 1; } .calendar-date-value-box .value{ position: absolute; bottom: 0; right: 0; font-size: 24px; } .calendar-date-value-box{ overflow: hidden; position: relative; margin-bottom: 30px; } .calendar-weekend.calendar-cell, .calendar-cell, .calendar-column-header { color: #303030; border: 1px solid #efefef; } .calendar-column-header{ height: 76px; } .calendar-table{ border: 1px solid #efefef; } .calendar-last-month-cell{ color: rgba(0, 0, 0, 0.1); } .calendar-weekend{ background: none; } .calendar-content{ color: #4b4b4b; } .calendar-header{ text-align: center; font-size: 24px; padding: 40px; border: 1px solid #efefef; border-bottom: 0; } .calendar-header .time-show *{ vertical-align: middle; } .calendar-header .time-show> span{ margin: 2em; } ul.info{ margin-top: 40px; } ul.info li{ width: auto; float: none; font-size: 20px; line-height: 20px; display: inline-block; margin-left: 14px; margin-bottom: 14px; } ul.info li > span{ font-size: 13px; display: inline-block; width: 20px; height: 20px; background: #5ec400; color: #fff; text-align: center; border-radius: 100%; vertical-align: top; } ul.info li+li > span{ background: #7eb2ff; } ul.info li+li+li > span{ background: #ff5830; } ul.info li+li+li+li > span{ background: #f3a416; } ul.info li+li+li+li+li > span{ background: #c716f3; } ul.info li+li+li+li+li+li > span{ background: #1555f5; } .phone_box{ display: none; } @media only screen and (max-width: 1024px){ .calendar-table .calendar-tbody, .calendar-tbody tr, .calendar-tbody td{ display: block; } .calendar-table thead{ display: none; } .calendar-date-box{ width: 100px; } .calendar-tbody tr{ font-size: 0; display: inline-block; vertical-align: top; } .calendar-tbody td{ display: inline-block; } .calendar-tbody{ white-space: nowrap; overflow: visible; width: auto; display: inline-block !important; /* height: 88px; */ } .calendar-column-header, .calendar-cell{ width: 100px; clear:both; } .calendar-table{ table-layout: auto; /* overflow: auto; */ width: 100%; display: block; } .calendar-date-value-box .value{ display: none; } .calendar-date-value-box{ text-align: center; } .calendar-weekend.calendar-cell, .calendar-cell, .calendar-column-header{ border: 0; } .calendar-cell.calendar-last-month-cell, .calendar-cell.calendar-next-month-cell{ display: none; } .calendar-date-value-box{ margin-bottom: 0; } .calendar-date .calendar-content{ display: none; } *::-webkit-scrollbar{ width: 0; height: 0; background: none !important; } *::-webkit-scrollbar-thumb { background: none; border-radius: 0; -webkit-box-shadow: none; } .calendar-weekend.calendar-cell, .calendar-cell, .calendar-column-header{ color: #c0c0c0; } .calendar-cell.on{ color: #303030; } .calendar-date-value-box .calendar-value{ font-size: 30px; line-height: 36px; transition: all .3s; } .calendar-cell.on .calendar-date-value-box .calendar-value{ font-size: 36px; } .calendar-date:hover:before{ display: none; } ul.info{ margin-top: 40px; } ul.info li{ display: block; float: none; width: auto; margin-bottom: 1em; font-size: 14px; } .calendar-body{ display: none; } .swiper-slide.calendar-cell{ font-size: 24px; text-align: center; line-height: 36px; } .swiper-slide.swiper-slide-active.calendar-cell{ font-size: 36px; color: #303030; } .swiper-slide.calendar-cell .events{ display: none; } .phone_info{ padding: 40px 20px; } .phone_box{ display: block; border: 1px solid #efefef; border-top: 0; } .phone_info ul li::before{ content: ''; display: inline-block; vertical-align: middle; width: 8px; height: 8px; border-radius: 100%; margin-right: 1em; } .phone_info ul li span{ display: inline-block; vertical-align: middle; } .phone_info ul li[type='1']::before{ background: #5ec400; } .phone_info ul li[type='2']::before{ background: #7eb2ff; } .phone_info ul li[type='3']::before{ background: #ff5830; } .phone_info ul li[type='4']::before{ background: #f3a416; } .phone_info ul li[type='5']::before{ background: #c716f3; } .calendar{ margin-bottom: 0; } }