.jimu-widget-Scenic { width: 100%; height: 100%; overflow-y: hidden; } /* .jimu-widget-frame.jimu-container { overflow-x: auto; overflow-y: auto; position: relative; padding: 10px 0px 0px 0px; background-color: white; } */ #listIntro { height: 90%; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; } #queryList{ margin-top: 10px; margin-left: 8px; display: none; } #queryList button{ background-color: #0395f3; color: #ffffff; cursor: pointer; width: 48px; height: 30px; margin-left: 5px; display: inline-block; line-height: 28px; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; border: 1px solid transparent; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .query-inp { height: 30px; background: white; border: 1px solid #d2dae2; padding: 5px; margin: 0; border-radius: 2px; font-size: 16px; } #chosePage { height: 100%; } #viewpointList { height: 50%; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; } .layui-btn { display: inline-block; height: 38px; line-height: 38px; padding: 0 18px; background-color: #009688; color: #fff; white-space: nowrap; text-align: center; font-size: 14px; border: none; border-radius: 2px; cursor: pointer; margin-left: 10px; } .layui-btn-primary { border: 1px solid #C9C9C9; background-color: #fff; color: #555 } .layui-btn-primary:hover { border-color: #009688; color: #333 } .layui-btn-group .layui-btn-primary { border-left: none } .layui-btn-group .layui-btn-primary:hover { border-color: #C9C9C9; color: #009688 } .layui-btn-group .layui-btn-primary:first-child { border-left: 1px solid #c9c9c9 } .layui-btn-normal { background-color: #1E9FFF } .p div { display: inline-block; width: 143px; margin-left: 10px; margin-right: 10px; margin-top: 15px; } .Scenic-listul { overflow: hidden; list-style: none; padding: 0px; margin: 0px; } .Scenic-listul li { float: left; width: 45.2%; height: 115px; position: relative; margin-top: 15px; margin-left: 15px; left: -8px; cursor: pointer; } .Scenic-listul li span { display: block; position: absolute; bottom: 0px; width: 100%; height: 24px; line-height: 24px; text-align: center; background: rgba(44, 46, 46, 0.7); color: #fff; font-size: 12px; } .Scenic-listul li img { width: 100%; height: 100%; vertical-align: middle; } .Scenic-viewpoint { overflow: hidden; list-style: none; padding: 0px; margin: 0px; } .Scenic-viewpoint li { float: left; width: 45.2%; height: 115px; position: relative; margin-top: 15px; margin-left: 15px; left: -8px; cursor: pointer; } .Scenic-viewpoint li span { display: block; position: absolute; bottom: 0px; width: 100%; height: 24px; line-height: 24px; text-align: center; background: rgba(44, 46, 46, 0.7); color: #fff; font-size: 12px; } .Scenic-viewpoint li img { width: 100%; height: 100%; vertical-align: middle; } .table_card { width: 100%; height: 100%; margin: 0 auto; } .table_card .tab { height: 37px; font-size: 14px; border-bottom: 1px #e1e1e1 solid; margin: 0; } .table_card .tab li { list-style-type: none; float: left; height: 36px; line-height: 36px; padding: 0 25px; margin-right: 5px; background: #f0f0f0; border-top: 1px #e1e1e1 solid; border-left: 1px #e1e1e1 solid; border-right: 1px #e1e1e1 solid; } .table_card .tab li:hover { height: 37px; background: #fff; color: #333; cursor: pointer } .table_card .activ { height: 37px !important; background: #fff !important; color: #333 } .table_card .tabCon { width: 100%; height: calc(100% - 37px); background: #fff; padding: 15px; border-bottom: 1px #e1e1e1 solid; border-left: 1px #e1e1e1 solid; border-right: 1px #e1e1e1 solid; } .table_card .tabCon div { width: 100%; height: 100%; display: none } .table_card .tabCon .on { display: block } /* #jimu_dijit_Popup_0{ left:600px; } */ .jimu-popup .content-absolute { position: absolute; top: 50px; bottom: 10px; left: 10px; right: 10px; overflow-y: auto; } #i1 { margin: auto; display: block; height: 60%; } .jimu-icon { display: inline-block; background-image: url(../../../libs/layer/theme/default/close-btn.png); background-repeat: no-repeat; background-color: transparent; background-size: 100% 100%; } .jimu-icon-close:hover { background-position: 0 0; width: 16px; height: 16px; } .jimu-icon-close { background-position: 0 0; width: 16px; height: 16px; } .audio-btn { margin-top: 10px; margin-right: 8px; cursor: pointer; display: inline-block; background-image: url(../../../images/open-play-Monitoring.png); background-repeat: no-repeat; background-color: transparent; background-size: 100% 100%; width: 20px; height: 20px; } .max-btn { display: none; margin-top: 10px; margin-right: 8px; cursor: pointer; /* display: inline-block; */ background-image: url(../../../libs/layer/theme/default/blow-up.png); background-repeat: no-repeat; background-color: transparent; background-size: 100% 100%; width: 20px; height: 20px; } .intro-bt1 { position: absolute; top: 50%; left: 10px; transform: translateY(-50%); height: 26px; width: 60px; color: #FFFFFF; background-color: #1890ff; border-color: #1890ff; cursor: pointer; } .audio-control { position: absolute; top: 50%; right: 10px; width: 20px; height: 20px; transform: translateY(-50%); /* background: greenyellow; */ vertical-align: middle; /* background-image: url('./images/open-play-Monitoring.png'); */ /* background: url(../../../images/open-play-Monitoring.png) no-repeat; */ background-size: 100% 100%; cursor: pointer; } .intro-head { margin-bottom: 5px; position: relative; height: 36px; line-height: 36px; text-align: center; font-size: 16px; color: #fff; background: rgba(44, 46, 46, 0.7); } .intro-head h3 { margin: 0; padding: 0; height: 36px; line-height: 36px; } #intro { display: none; height: 100%; } .Scenic-content { margin-top: 4px; height: calc(100% - 40px); } .Scenic-content > div:first-child { margin-bottom: 10px !important; height: calc(50% - 10px) !important; } .Scenic-content > div:last-child { height: 40%; } .Scenic-content > div:first-child > div:first-child { height: 50%; text-align: center; } .Scenic-content > div:first-child img { /* width: 100%; */ /* height: 100%; */ width: auto; height: 100%; vertical-align: middle; } .Scenic-content > div:first-child > div:last-child { margin-top: 4px; height: calc(52% - 4px); font-size: 14px; text-indent: 2em; overflow-x: hidden; overflow-y: auto; line-height: 26px; text-indent: 2em; letter-spacing: 1.5px; word-break: break-all; text-align-last: left; text-align: justify; scrollbar-width: thin; } .Scenic-content > div:last-child h3 { margin: 0; padding: 0; height: 30px; line-height: 30px; font-size: 16px; text-align: center; color: #000; font-weight: 700; } .Scenic-content > div:last-child > div { height: calc(100% - 30px); } .Scenic-content > div:last-child iframe { width: 100%; height: auto; vertical-align: middle; } .Scenic-content > div:last-child > div div { position: relative; /* height: auto; */ } .Scenic-content > div:last-child > div div i { display: block; position: absolute; right: 4px; bottom: 4px; width: 34px; height: 34px; background: url(../../../images/bigIframe.png) no-repeat; background-size: 100% 100%; z-index: 111; } /* 详情轮播图,以及轮播图放大的样式 */ .Scenic-enlarge-img { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .7); z-index: 333; } .Scenic-child-text div { position: relative; } .Scenic-enlarge-img .Scenic-enlarge-main, .Scenic-child-text div .Scenic-child-img-main { position: relative; width: 100%; height: 100%; } .Scenic-enlarge-img .Scenic-enlarge-main div, .Scenic-child-text div .Scenic-child-img-main div { position: absolute; height: 100%; } .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-left { width: 25%; } .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-left { width: 14%; } .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-right { left: 75%; width: 25%; } .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-right { left: 86%; width: 14%; } .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-left div, .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-right div, .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-left div, .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-right div { position: absolute; top: 50%; transform: translate(0%, -50%); width: 100px; height: 100px; background-color: rgba(0, 0, 0, .9); border-radius: 50%; cursor: pointer; } .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-left div, .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-right div { width: 36px; height: 36px; } .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-left div:hover, .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-right div:hover, .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-left div:hover, .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-right div:hover { background-color: rgba(0, 0, 0, .6); } .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-left div { right: 20px; } .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-left div { right: 6px; } .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-right div { left: 20px; } .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-right div { left: 6px; } .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-left div i, .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-right div i, .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-left div i, .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-right div i { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 60%; height: 60%; } .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-left div i, .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-left div i { left: -8px; background: url(../../../images/enlarge-left.png) no-repeat; background-size: 100% 100%; } .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-right div i, .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-right div i { left: 8px; background: url(../../../images/enlarge-right.png) no-repeat; background-size: 100% 100%; } .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-left div:hover i, .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-left div:hover i { background: url(../../../images/enlarge-left-hover.png) no-repeat; background-size: 100% 100%; } .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-right div:hover i, .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-right div:hover i { background: url(../../../images/enlarge-right-hover.png) no-repeat; background-size: 100% 100%; } .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-content { left: 25%; width: 50%; } .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-content { left: 14%; width: 72%; } .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-content ul, .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-content li, .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-content img, .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-content ul, .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-content li, .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-content img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-content li, .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-content li { display: none; } .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-content li { cursor: pointer; } .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-content li:first-child, .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-content li:first-child { display: block; } .Scenic-enlarge-img .Scenic-enlarge-main .Scenic-enlarge-content img { max-width: 80%; max-height: 80%; border: 4px solid #fff; border-radius: 10px; vertical-align: middle; } .Scenic-child-text div .Scenic-child-img-main .Scenic-child-img-content img { max-width: 100%; max-height: 100%; vertical-align: middle; } .Scenic-enlarge-img .Scenic-enlarge-close { position: absolute; top: 20px; right: 20px; width: 32px; height: 32px; background: url(../../../images/legend-close.png) no-repeat; background-size: 100% 100%; cursor: pointer; }