@import url("./posterShare.css"); html,body{ height: 100%; width:100%; padding:0; margin:0; } body{ opacity:0; } .swiper-wrapper{ align-items: center; } .posterMask.gzrbBMshow{ display: none; } div,p,h1,h2,span{ padding:0; margin:0; } .contWrapper{ height: 100vh; width: 100%; /* background-color: rgba(125,125,125,0.88); */ background:url('/public/static/festival.png') no-repeat center / 100% 100%; padding:12px 18px 5px 18px; box-sizing: border-box; position: relative; /* display: grid; */ padding-top:8%; } .newpaper{ width: 100%; /* height: calc(100% - 94px); 修改 */ /*transform:translate3d(0,0,0); overflow:hidden;*/ /* 修改 */ /* margin-top:30px; */ align-self: start; justify-self: center; } .newpaper .swiper-slide img{ /* width:auto; max-width:100%; height: auto; max-height: 100%; transform:translate3d(0,0,0); -webkit-transform: scale(1) rotate(0) translate3d(0,0,0); transform: scale(1) rotate(0) translate3d(0,0,0);*/ opacity: 1; } /* .swiper-container { width: 100%; height: 300px; margin: 20px auto; margin-top:30px; } */ .swiper-slide { text-align: center; font-size: 18px; background:transparent; /* height: auto !important; */ /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; /* transform:translate3d(0,0,0); */ overflow:hidden; } .imgBoxCont{ width: auto; max-width: 100%; height: auto; max-height: 100%; position:relative; } /* .swiper-slide .swiper-zoom-container{display:block;} */ .imgBoxCont .pichmask{ width:auto; max-width:100%; height: auto; max-height: 100%; z-index: 999; opacity: 1; /* position: absolute; */ } .swiper-slide div.pinch-zoom{ /* width: 100%; */ /* height: 100% !important; */ -webkit-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; user-drag: none; } .swiper-slide div.pinch-zoom-container { width: 100%; height: 100% !important; position: relative; } .swiper-slide div.pinch-zoom .paperMap{ opacity: 0; } .newsText1{ width: 100%; font-size: 16px; line-height: 26px; color:#eee; text-align: center; margin-top:17px; } .newsText1>img{ width: 11px; /* height: 18px; */ margin-left: 10px; vertical-align: baseline; } .headBox { /* position: absolute; top: 38px; */ /* 修改 */ width: 100%; /* 修改 calc(100% - 36px)*/ /*height: 26px;*/ font-size: 20px; line-height: 26px; border-radius: 3px; background-color: #F0F0F0; font-weight: bold; display: flex; justify-content: center; align-items: center; /* 修改 */ align-self: end; justify-self: center; margin-bottom: 4%; } .headBox .headTitle{ background-color: #d00; color: #FFF; font-size: 14px; /*height: 20px;*/ line-height: 16px; margin: 3px; padding: 2px 10px; border-radius: 3px; text-align: justify; } .footerWrap{ position: absolute; /* top: 10px; */ left:18px; /* 修改 */ bottom: 36px; width: calc(100% - 120px); height:36px; font-size: 0; line-height:36px; border-radius: 5px; background-color: #d00; display: flex; align-items: center; box-shadow: 0px 10px 6px -8px rgba(243,92,85,0.3); } .footerWrap .item{ display: flex; flex: 1; text-align: center; height: 18px; position: relative; font-size: 16px; color: #fff; line-height: 18px; justify-content: center; align-items: center; border-right: 1px solid #e1e1e1; } .footerWrap .item:last-child{ border-right: none; } .footerWrap .item>.text{ margin-left: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .footerWrap .item>img{ width: 18px; height: 18px; cursor: pointer; } .footerWrap .item>.text.active{ opacity: 1; z-index: 10; color:red; font-size: 18px; } .footerWrap .item>img.active{ opacity: 1; z-index: 10; } .footerWrap .item .articletips{ width:0px; height: 0px; border-width: 6px; border-style: solid; border-color: #fff; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; position: absolute; left: 50%; top: 20px; margin-left: -6px; display: none; } .footerWrap .item .articletipsDown{ width:0px; height: 0px; border-width: 6px; border-style: solid; border-color: #c8c4c4; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; position: absolute; left: 50%; top: 24px; margin-left: -6px; display: block; } .footerWrap .item>.text.active+.articletips{ display: block; opacity: 1; z-index: 10; } .footerWrap .item>.text.active+.articletips+.articletipsDown{ display: none; } .footerWrap.footerItem5 .item{ width:20%; } .footerWrap .exareBox{ position: absolute; width:100px; height:auto; background-color: #fff; border-radius: 8px; bottom: 38px; right: 0; z-index: 10; display: none; } .footerWrap .exareBox.active{ display: block; } .footerWrap .exareBox a{ color: #333; font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding:10px 10px; display: block; text-decoration:none; } .zonglan{ position: absolute; right: 18px; bottom: 78px; z-index: 99; } .zonglan img{ width:68px; } .synthesis{ position: absolute; bottom: 36px; right: 18px; width: 72px; height:36px; line-height:36px; border-radius: 5px; background-color: #d00; display: flex; align-items: center; padding: 0 10px; box-shadow: 0px 10px 6px -8px rgba(243,92,85,0.3); } .synthesis .item{ display: flex; text-align: center; height: 18px; position: relative; font-size: 16px; color: #fff; line-height: 18px; justify-content: center; align-items: center; } .synthesis .item>.text{ margin-left: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .synthesis .item>img{ width: 18px; height: 18px; cursor: pointer; } /* 版面列表1 */ .layoutStyleOne{ width: 50%; position: fixed; top:0; bottom: 0; left: -50%; background-color: #fff; z-index: 100; padding:0 18px; box-sizing: border-box; overflow-y: auto; transition: left 500ms; -webkit-transition: left 500ms; /* Safari */ } .layoutStyleOne.active{ left: 0; } .layoutStyleOne a{ color: #333; font-size: 16px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding:20px 0; display: block; text-decoration:none; } .layoutStyleOne a.active{ color: #da3e4a; } /* 版面列表二 */ .layoutStyleTwo{ height:70%; position: absolute; bottom: 70px; left: 0; width: 100%; background-color: #fff; border-radius: 10px 10px 0 0; background-color: #fff; z-index: 100; display: none; padding-bottom: 10px; } .layoutStyleTwo h2{ font-size: 20px; text-align: center; margin: 15px 0; font-weight: bold; } .layoutStyleTwo .listWrapBox{ width: 100%; /*height: calc(100% - 22px);*/ display: flex; flex-wrap: wrap; overflow-y: auto; padding:0 15px 15px; box-sizing: border-box; } .layoutStyleTwo .listWrapBox .action{ border: 2px solid #FB565D; } .layoutStyleTwo .listWrapBox .listWrap{ box-sizing: border-box; width: 27.33%; margin: 10px; } .layoutStyleTwo .listWrap img{ width: 100%; } .layoutStyleTwo.active{ display: block; } .layoutStyleTwo a{ color: #333; font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding-top:5px; display: block; text-decoration:none; text-align: center; } /* .layoutStyleTwo .articletips{ width:0px; height: 0px; border-width: 6px; border-style: solid; border-color: #fff; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; position: absolute; bottom: -12px; left: 10%; } */ /* 文章列表 */ .articleList { position: absolute; bottom: 60px; left: 0; width: 100%; max-height: 70%; background-color: #fff; border-radius: 10px 10px 0 0; z-index: 100; display: none; } .articleList .listWrap { } .articleList .listWrap .listTitle { width: 100%; max-height: 350px; /*display: flex;*/ flex-wrap: wrap; overflow-y: auto; padding: 0 15px 15px; box-sizing: border-box; } .articleList.active{ display: block; } .articleList .listWrap .title{ position: relative; text-align: center; padding:0 20px; } .articleList .listWrap .title .tips{ width: 100%; position: absolute; display: none; border-top:1px solid #d5d5d5; top:50%; left: 0; z-index: -1; } .articleList .item{ padding:15px 20px; display:none; } .articleList .item.itemActive { display:block; } .articleList .item h1{ font-size: 18px; color:#000; text-align: center; display: inline-block; background: #fff; z-index: 10; padding: 0 10px; margin: 0 auto 10px; line-height: 20px; font-weight: bold; } .articleList .item a{ font-size: 18px; text-align: left; color:#333; line-height: 24px; padding:12px 0; display: block; text-decoration:none; border-top: 1px solid #EEE; } .articleList .item a.active{ color: #da3e4a; } /* .articleList .articletips{ width:0px; height: 0px; border-width: 6px; border-style: solid; border-color: #fff; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent; position: absolute; bottom: -12px; left: 61%; } */ /* .articleList .item a{ } */ .cancelBox{ position: fixed; bottom: 0; left: 0; width: 100%; z-index: 99999; height: 70px; background-color: #FFF; text-align: center; padding: 10px; display: none; } .cancelBox .cancelBtn{ width: 80%; margin: 0 auto; text-align: center; font-size: 18px; font-weight: 500; height: 45px; line-height: 45px; background-color: #EEE; border-radius: 10px; border: none; } /* 日历 */ .form_date { position: fixed; bottom: 0; /* left: 12%; */ width: 0; height: 70px; z-index: -20; border: 0px solid #FFF; background-color: transparent; color: transparent; } .dropdown-menu{ border: none !important; box-shadow: none !important; } .datetimepicker{ /* width:520px; */ width:100%; left: 0 !important; /* bottom: 47px; */ /* top: 40px !important; */ } .datetimepicker-days .table-condensed{ width:100%; } .datetimepicker-days .table-condensed tbody tr td.day.active{ background-color: #da3e4a!important; border-radius: 24px; background-image: none; } .datetimepicker-days .table-condensed thead tr th.dow.active{ color: #999999; } .datetimepicker-dropdown-top-left:after{ left: 33%; right:initial !important; } .datetimepicker-months .table-condensed{ width:100%; } .datetimepicker-months .table-condensed tbody tr .month.active{ background-color: #da3e4a; border-radius: 10px; background-image: none; } .datetimepicker-years .table-condensed{ width:100%; } .datetimepicker-years .table-condensed tbody tr .year.active{ background-color: #da3e4a; border-radius: 10px; background-image: none; } /* 遮罩 */ .mask{ position: fixed; top:0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 9; display: none; } .mask.active{ display: block; } /* 下载页面 */ .synthPage{ width: 100%; height:100%; position: absolute; top:0; left: 0; bottom: 0; z-index: 9999; padding: 13px 13px 5px 13px; box-sizing: border-box; display: none; overflow: auto; } .synthPage.active{ display: block; background: url('/public/static/bg.png') repeat center / auto auto; } .synthPage .closeBtn{ text-align: right; padding-bottom: 10px; } .synthPage .closeBtn i{ display: inline-block; width: 15px; height: 15px; background: url('/public/static/guanbi.png') no-repeat center / 15px 15px; cursor: pointer; } #synthImg { display: none; border:1px solid #d00; } #synthImg img{ width:auto; max-width: 100%; } .saveTipsBtn{ width: 80%; height: 30px; margin: 10px auto; background-color: #d00; border-radius: 15px; text-align: center; line-height: 30px; color: #FFF; font-size: 14px; } #synthWrap{ width:100%; padding:10px; height: auto; max-height: calc(100% - 40px); background-color: #ffffff; position: relative; box-sizing:border-box; } #synthWrap .synthHead{ display: flex; justify-content: space-between; color: #8F8F8F; height: 20px; margin-bottom: 10px; font-size: 12px; line-height: 20px; font-weight: 500; } #synthWrap .synthHead img{ width: 33.33%; height: 100%; } #synthWrap img.synthPaper{ width:100%; height: auto; max-width: 100%; max-height:calc(100% - 100px); margin: 0 auto; display: block; box-shadow: 0px 4px 21px 3px rgba(195, 187, 187, 0.4); border-radius: 4px; border:1px solid rgba(195, 187, 187, 0.3); } #synthWrap .imgBottom{ width:85%; height: 10px; background-color: rgba(244,244,244,1); box-shadow: 0px 4px 21px 3px rgba(195, 187, 187, 0.4); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; margin:0 auto; border:1px solid rgba(195, 187, 187, 0.2); border-top-color: transparent; } #synthWrap .footer{ width:100%; height: 60px; padding:10px 0; box-sizing: border-box; font-size: 12px; color: #8F8F8F; display: flex; justify-content: space-between; align-items: center; margin-top: 10px; } #synthWrap .footer .left{ width:50%; text-align: center; } #synthWrap .footer .left img{ width:auto; height: auto; max-width: 100%; max-height:50px; } #synthWrap .footer .center{ font-size: 12px; line-height: 50px; color: #666666; text-align: center; width:calc(50% - 25px); } #synthWrap .footer .right{ width:50%; height: 100%; text-align: right; display: flex; justify-content: flex-end; align-items: center; } #synthWrap .footer .right .text{ width: 50%; text-align: right; } #synthWrap .footer .right .qr{ width:55px; height: 55px; margin-left: 10px; } #synthWrap .footer .right img{ width:100%; height: 100%; } #synthWrap .footer .right#qrcode table{ transform: scale(0.6, 0.6); -webkit-transform: scale(0.6, 0.6); -moz-transform: scale(0.6, 0.6); -o-transform: scale(0.6, 0.6); margin-top: -15px; margin-left: -15px; } .tipsBtn{ display: block; width:100px; height:40px; background: url('/public/static/saveBtn1.png') no-repeat center / 100px 40px; position: absolute; top:50%; left:50%; transform: translate(-50%,-115%); } .synthmask{ width:100%; height: 100%; position: fixed; top:0; left: 0; z-index: 99; background-color: rgba(0,0,0,0.5); } .synthmask img{ position: absolute; top:50%; left:50%; transform: translate(-50%,-115%); } /* 日历牌样式二 */ #Datefour { position: fixed; bottom: -100%; left: 18px; width: calc(100% - 36px); /*height: 100%;*/ overflow: auto; background: #fff; z-index:100; border-radius: 8px; -webkit-overflow-scrolling: touch; } #Datefour>div{position: relative;} #Datefour>div a{ position: absolute; line-height: 40px; display: inline-block; height: 40px; width: 16.6%; text-align: center; background-repeat: no-repeat; background-position: center; } #Datefour>div a:last-child{right: 0;top:0;} #Datefour>div a span{margin-top: 11px;} #Datefour>div p{ text-align: center; line-height: 40px; margin-bottom: 0; font-size:16px; padding-bottom:15px; } #Datefour ul{ width: 100%; max-height: 70vh; overflow-y: auto; list-style: none; /* margin-bottom: 45px; */ padding:5px; } #Datefour li { width: 23%; height: 32px; font-size: 12px; display: inline-block; float: left; line-height: 45px; text-align: center; border-radius: 3px; margin:1%; border:1px solid #dcdcdc; } #Datefour .clearfix a { display: block; width: 100%; color: #333; font-size: 14px; text-decoration: none; line-height: 30px; background-color: #FFF; /* border-bottom: 1px solid #CCC; */ white-space: nowrap; text-overflow: ellipsis; overflow:hidden; } #Datefour a.on{ color: #FFF; background-color: #D9383D; } .year{display:block; height:40px;} .curDate{padding-right:20px;}