| | |
|---|
| | | display: block; |
|---|
| | | margin: 0 auto; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .item4 { |
|---|
| | | height: 280px; |
|---|
| | | width: 100%; |
|---|
| | | float: left; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .bgt { |
|---|
| | | background-position: top left; |
|---|
| | | background-size: 100% 100%; |
|---|
| | | background-repeat: no-repeat; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .item_cont .bd { |
|---|
| | | padding: 10px; |
|---|
| | | overflow: hidden; |
|---|
| | | position: relative; |
|---|
| | | padding-left: 60px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .item_cont .bd .year { |
|---|
| | | width: 49px; |
|---|
| | | height: 26px; |
|---|
| | | border: 1px solid #21B1FF; |
|---|
| | | border-radius: 5px; |
|---|
| | | position: absolute; |
|---|
| | | bottom: 35px; |
|---|
| | | text-align: center; |
|---|
| | | z-index: 22; |
|---|
| | | left: 5px; |
|---|
| | | font-size: 12px; |
|---|
| | | line-height: 26px; |
|---|
| | | background: #05152f; |
|---|
| | | color: #fff; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .item_cont .bd ul li { |
|---|
| | | margin: 0 18px; |
|---|
| | | overflow: hidden; |
|---|
| | | text-align: center; |
|---|
| | | position: relative; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .item_cont .bd ul li .pic { |
|---|
| | | border: 3px solid #3288FF; |
|---|
| | | border-radius: 10px; |
|---|
| | | margin-bottom: 50px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .item_cont .bd ul li img { |
|---|
| | | width: 240px; |
|---|
| | | height: 160px; |
|---|
| | | border-radius: 8px; |
|---|
| | | |
|---|
| | | } |
|---|
| | | |
|---|
| | | .item_cont .bd::after { |
|---|
| | | content: ""; |
|---|
| | | width: 99.2%; |
|---|
| | | position: absolute; |
|---|
| | | bottom: 45px; |
|---|
| | | left: 5px; |
|---|
| | | z-index: 1; |
|---|
| | | border-bottom: 1px dashed #3288FF; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .item_cont .bd ul li .tit{ |
|---|
| | | color: #FFFFFF; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .item_cont .bd ul li::after { |
|---|
| | | content: ""; |
|---|
| | | |
|---|
| | | width: 29px; |
|---|
| | | height: 53px; |
|---|
| | | position: absolute; |
|---|
| | | bottom: 20px; |
|---|
| | | left: 50%; |
|---|
| | | z-index: 0; |
|---|
| | | background: url(/img/web/group/icon_dot4.png) no-repeat bottom 0 center; |
|---|
| | | } |
|---|
| | | </style> |
|---|
| | | </head> |
|---|
| | | <body style="overflow:hidden;"> |
|---|
| | |
|---|
| | | <div class="container"> |
|---|
| | | <div class="i-top"> |
|---|
| | | <h1 ondblclick="changeScreen()" class="i-top-tit"><span th:text="${sysName}">智慧粮库质押监管大屏</span></h1> |
|---|
| | | <p ondblclick="changeScreen()" class="i-top-p" id="sloganText">新疆伊宁农村商业银行股份有限公司——智慧监管平台</p> |
|---|
| | | <p ondblclick="changeScreen()" class="i-top-p" id="sloganText"> |
|---|
| | | 新疆伊宁农村商业银行股份有限公司——智慧监管平台</p> |
|---|
| | | <div class="i-navBar"> |
|---|
| | | <a href="javaScript:;" onclick="changePage('index')" class="i-nav3 active">首页</a> |
|---|
| | | <a href="javaScript:;" onclick="changePage('gis')" class="i-nav4">GIS监管</a> |
|---|
| | |
|---|
| | | <div class="panel-content-head"> |
|---|
| | | <span class="head-item">所属库点</span> |
|---|
| | | <span class="head-item">当日分析</span> |
|---|
| | | <span class="head-item">近七天累计次数</span> |
|---|
| | | <span class="head-item" style="flex: 0.4;">日期</span> |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <div class="panel-content-body" id="inventoryInfoBox"> |
|---|
| | |
|---|
| | | </div><!-- right-top end --> |
|---|
| | | |
|---|
| | | <div class="right-bottom bottom-container"> |
|---|
| | | <div class="panel-title" id="pieCharTitle">数量统计</div> |
|---|
| | | |
|---|
| | | <div class="panel-content" style="position: relative;"> |
|---|
| | | <div class="tubiao-Carousel"> |
|---|
| | | |
|---|
| | | <div class="stats-chart-box"> |
|---|
| | | <div class="chart-item"> |
|---|
| | | <div class="chart-item-title">品种</div> |
|---|
| | | <div class="chart-box" id="pieVarietyChart" style="height: 266px; width:256px"></div> |
|---|
| | | <div class="panel-title" id="pieCharTitle">抓拍跟踪</div> |
|---|
| | | <!-- <div class="panel-content" style="position: relative;">--> |
|---|
| | | <!-- <div class="tubiao-Carousel">--> |
|---|
| | | <div class="item4 bgt follow"> |
|---|
| | | <div class="item_cont"> |
|---|
| | | <div class="bd"> |
|---|
| | | <div class="year">2025年</div> |
|---|
| | | <div class="tempWrap" style="overflow:hidden; position:relative; width:100%"> |
|---|
| | | <ul style="width: 2280px; position: relative; overflow: hidden; padding: 0px; margin: 0px; left: -980px;"> |
|---|
| | | <li class="clone" style="float: left; width: 246px;"> |
|---|
| | | <div class="item"> |
|---|
| | | <div class="pic"> |
|---|
| | | <img th:src="@{/img/web/group/pic2.jpg}" alt=""> |
|---|
| | | </div> |
|---|
| | | <div class="chart-item"> |
|---|
| | | <div class="chart-item-title">性质</div> |
|---|
| | | <div class="chart-box" id="pieTypeChart" style="height: 266px; width:256px"></div> |
|---|
| | | <div class="tit">11-15 15:00:20</div> |
|---|
| | | </div> |
|---|
| | | <div class="chart-item"> |
|---|
| | | <div class="chart-item-title">等级</div> |
|---|
| | | <div class="chart-box" id="pieLevelChart" style="height: 266px; width:256px"></div> |
|---|
| | | </li> |
|---|
| | | <li style="float: left; width: 246px;"> |
|---|
| | | <div class="item"> |
|---|
| | | <div class="pic"> |
|---|
| | | <img th:src="@{/img/web/group/pic1.jpg}" alt=""> |
|---|
| | | </div> |
|---|
| | | <div class="chart-item"> |
|---|
| | | <div class="chart-item-title">年份</div> |
|---|
| | | <div class="chart-box" id="pieYearChart" style="height: 266px; width:256px"></div> |
|---|
| | | <div class="tit">11-15 15:00:20</div> |
|---|
| | | </div> |
|---|
| | | <div class="chart-item"> |
|---|
| | | <div class="chart-item-title">地域划分</div> |
|---|
| | | <div class="chart-box" id="pieAreaChart" style="height: 266px; width:256px"></div> |
|---|
| | | </li> |
|---|
| | | <li style="float: left; width: 246px;"> |
|---|
| | | <div class="item"> |
|---|
| | | <div class="pic"> |
|---|
| | | <img th:src="@{/img/web/group/pic2.jpg}" alt=""> |
|---|
| | | </div> |
|---|
| | | <div class="tit">11-15 15:00:20</div> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | <li style="float: left; width: 246px;"> |
|---|
| | | <div class="item"> |
|---|
| | | <div class="pic"> |
|---|
| | | <img th:src="@{/img/web/group/pic3.jpg}" alt=""> |
|---|
| | | </div> |
|---|
| | | <div class="tit">11-15 15:00:20</div> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | <li style="float: left; width: 246px;"> |
|---|
| | | <div class="item"> |
|---|
| | | <div class="pic"> |
|---|
| | | <img th:src="@{/img/web/group/pic4.jpg}" alt=""> |
|---|
| | | </div> |
|---|
| | | <div class="tit">11-15 15:00:20</div> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | <li style="float: left; width: 246px;"> |
|---|
| | | <div class="item"> |
|---|
| | | <div class="pic"> |
|---|
| | | <img th:src="@{/img/web/group/pic1.jpg}" alt=""> |
|---|
| | | </div> |
|---|
| | | <div class="tit">11-15 15:00:20</div> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | <li style="float: left; width: 246px;"> |
|---|
| | | <div class="item"> |
|---|
| | | <div class="pic"> |
|---|
| | | <img th:src="@{/img/web/group/pic2.jpg}" alt=""> |
|---|
| | | </div> |
|---|
| | | <div class="tit">11-15 15:00:20</div> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | <li class="clone" style="float: left; width: 246px;"> |
|---|
| | | <div class="item"> |
|---|
| | | <div class="pic"> |
|---|
| | | <img th:src="@{/img/web/group/pic1.jpg}" alt=""> |
|---|
| | | </div> |
|---|
| | | <div class="tit">11-15 15:00:20</div> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | <li class="clone" style="float: left; width: 246px;"> |
|---|
| | | <div class="item"> |
|---|
| | | <div class="pic"> |
|---|
| | | <img th:src="@{/img/web/group/pic2.jpg}" alt=""> |
|---|
| | | </div> |
|---|
| | | <div class="tit">11-15 15:00:20</div> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | <li class="clone" style="float: left; width: 246px;"> |
|---|
| | | <div class="item"> |
|---|
| | | <div class="pic"> |
|---|
| | | <img th:src="@{/img/web/group/pic3.jpg}" alt=""> |
|---|
| | | </div> |
|---|
| | | <div class="tit">11-15 15:00:20</div> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | <li class="clone" style="float: left; width: 246px;"> |
|---|
| | | <div class="item"> |
|---|
| | | <div class="pic"> |
|---|
| | | <img th:src="@{/img/web/group/pic4.jpg}" alt=""> |
|---|
| | | </div> |
|---|
| | | <div class="tit">11-15 15:00:20</div> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | <li class="clone" style="float: left; width: 246px;"> |
|---|
| | | <div class="item"> |
|---|
| | | <div class="pic"> |
|---|
| | | <img th:src="@{/img/web/group/pic1.jpg}" alt=""> |
|---|
| | | </div> |
|---|
| | | <div class="tit">11-15 15:00:20</div> |
|---|
| | | </div> |
|---|
| | | </li> |
|---|
| | | </ul> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | </div><!-- tubiao-Carousel end --> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <!-- </div><!– tubiao-Carousel end –>--> |
|---|
| | | <!-- </div>--> |
|---|
| | | |
|---|
| | | </div><!-- right-bottom end --> |
|---|
| | | |
|---|
| | |
|---|
| | | </div> |
|---|
| | | |
|---|
| | | <script th:src="@{/js/jquery.min.js}"></script> |
|---|
| | | <script th:src="@{/js/jquery.countup.min.js}"></script> |
|---|
| | | <script th:src="@{/js/jquery.SuperSlide.js}"></script> |
|---|
| | | <script th:src="@{/js/jquery.waypoints.min.js}"></script> |
|---|
| | | <script th:src="@{/js/plugins/echarts/echarts.js}"></script> |
|---|
| | | <script th:src="@{/ajax/libs/layer/layer.js}"></script> |
|---|
| | | <script th:src="@{/common/constant.js}"></script> |
|---|
