| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <meta http-equiv="Pragma" content="no-cache"/>
- <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"/>
- <meta http-equiv="Expires" content="0"/>
- <title>数据大屏:数据大屏教学现场</title>
- <link rel="stylesheet" href="demo1.css">
- <link rel="stylesheet" href="./css/style.css">
- <script>
- document.write(
- "<link type='text/css' href='./demo.css?version=" +
- new Date().getTime() +
- "' rel='stylesheet' />",
- );
- </script>
- <script src="./vue.js"></script>
- </head>
- <body>
- <div class="main">
- <div class="main-header">
- <div class="sy"
- onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=003fe9f6a92b47bc924fe04f59fd6acb')">
- <div>首页</div>
- </div>
- <div class="jyjx"
- onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=7f0176157e93423e9b4e48cae1c186f3')">
- <div>教育教学</div>
- </div>
- <div class="zsxx"
- onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=e67784d9632c44099e03b56256df7e5d')">
- <div>招生信息</div>
- </div>
- <div class="jyxx"
- onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=22a2c238d23e4eb0a80bd2e4f047ba90')">
- <div>就业信息</div>
- </div>
- <div class="zwhq"
- onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=2a864f38d2964ebdb63db7257a48c330')">
- <div>总务后勤</div>
- </div>
- <div class="jsxx"
- onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=83f18d8a43a24be79a041e4cec596fa3')">
- <div>教师信息</div>
- </div>
- <div class="xsxx"
- onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=5f656466368442ee88abfe34a42a3dd8')">
- <div>学生信息</div>
- </div>
- <div class="shfw"
- onclick="redirectToUrl('http://172.16.0.63:28080/visualpro/preview.html?id=170f4fae167d4b2eb7578073cb713fb1')">
- <div>社会服务</div>
- </div>
- <div class="jxxc">
- <div>教学现场</div>
- </div>
- </div>
- <div class="main-container">
- <div class="menu-container" id="menu-container">
- <div class="campus-tabs">
- <div class="campus-tab" id="xqxq-tab" onclick="switchCampus('西溪校区')">
- <div>西溪校区</div>
- </div>
- <div class="campus-tab campus-tab-active" id="laxq-tab" onclick="switchCampus('临安校区')">
- <div>临安校区</div>
- </div>
- </div>
- <div class="title-item">摄像头列表</div>
- <div v-for="(item,index) in message" :key="index">
- <div class="menu-title">
- <img src="./icon%202.png" alt=""> <span>{{item.buildname}}</span>
- </div>
- <div class="class-container">
- <div class="class-item" v-for="(item1,index1) in item.classes" :key="index1"
- @click="handleClick(item1)">
- <div>
- <img src="./03.png" alt="">
- </div>
- <div>{{item1.classname}}</div>
- </div>
- </div>
- </div>
- </div>
- <div class="video-container">
- <div class="hikvision-block">
- <div class="title-item video-title">
- <span>视频区域-室内</span>
- <select class="sel2" onchange="changeWndNum(this.value);">
- <option value="1" selected>1x1</option>
- <option value="2">2x2</option>
- <option value="3">3x3</option>
- <option value="4">4x4</option>
- <option value="1*2">1x2</option>
- <option value="2*1">2x1</option>
- </select>
- </div>
- <div class="hikvision-body">
- <div id="divPlugin" class="plugin"></div>
- <div style="display:none;">
- <input id="loginip" type="text" class="txt" value=""/>
- <input id="port" type="text" class="txt" value=""/>
- <input id="username" type="text" class="txt" value=""/>
- <input id="password" type="password" class="txt" value=""/>
- <input id="deviceport" type="text" class="txt"/>
- <input id="rtspport" type="text" class="txt"/>
- <select id="ip" class="sel" onchange="getChannelInfo();getDevicePort();"></select>
- <select id="channels" class="sel"></select>
- <select id="streamtype" class="sel">
- <option value="1" selected>主码流</option>
- <option value="2">子码流</option>
- <option value="3">第三码流</option>
- <option value="4">转码码流</option>
- </select>
- </div>
- </div>
- </div>
- <div class="dahua-block">
- <div class="title-item video-title">
- <span>视频区域-户外</span>
- </div>
- <div class="container" id="dahua-player-shell">
- <div class="tab">
- <span style="display:none;" id="device_ipc_tab">IPC/SD</span>
- <label style="display:none;" t="com.Language">Language</label>
- <select id="onChangeLanguage" style="width:80px;display:none;">
- <option value="SimpChinese">中文</option>
- <option value="English">English</option>
- </select>
- </div>
- <div class="content" id="device_ipc_content">
- <div class="h5-left">
- <ul style="display:none;" class="h5-menu-list">
- <li data-ip="10.10.43.220" data-port="80" data-user="admin" data-pswd="l1234567">
- <span class="deviceName" t="com.Device+ 1"></span>
- <button type="button" class="testButton" t="com.Test"></button>
- </li>
- <li data-ip="10.10.43.219" data-port="80" data-user="admin" data-pswd="l1234567">
- <span class="deviceName" t="com.Device+ 1"></span>
- <button type="button" class="testButton" t="com.Test"></button>
- </li>
- <li data-ip="10.10.44.5" data-port="80" data-user="admin" data-pswd="l1234567">
- <span class="deviceName" t="com.Device+ 1"></span>
- <button type="button" class="testButton" t="com.Test"></button>
- </li>
- </ul>
- </div>
- <div class="h5-left">
- <div style="text-align: right; margin: 0 0 8px 0;">
- <select class="h5-select" sel-for="onChangeWdnNum" style="width:80px;">
- <option value="1" selected>1x1</option>
- <option value="2">2x2</option>
- <option value="3">3x3</option>
- <option value="4">4x4</option>
- </select>
- </div>
- <div class="h5-play-wrap" style="position: relative;">
- </div>
- <select id="h5_stream" sel-for="onChangeStream" style="display:none;"></select>
- <select id="h5_channel" sel-for="onChangeChannel" style="display:none;"></select>
- <select id="h5_ivs" style="display:none;">
- <option value="0" t="com.No"></option>
- <option value="1" t="com.Yes"></option>
- </select>
- <input type="range" id="h5_volume" min="0" max="1" step="0.1" value="0.5" style="display:none;">
- <span id="h5_volume_value" style="display:none;"></span>
- <!-- 隐藏但保留,供脚本使用 -->
- <select id="h5_playback_channel" style="display:none;"></select>
- <input type="datetime-local" id="h5_startTime" style="display:none;">
- <input type="datetime-local" id="h5_endTime" style="display:none;">
- <table id="h5_table" style="display:none;"><tbody></tbody></table>
- <input type="checkbox" id="h5_checkAll" style="display:none;">
- <input type="text" id="h5_goNumber" style="display:none;">
- <input type="button" id="h5_goPage" style="display:none;">
- <input type="text" id="h5_goTime" style="display:none;">
- <input type="text" id="h5_cutStartTime" style="display:none;">
- <input type="text" id="h5_cutEndTime" style="display:none;">
- <input type="button" btn-for="onStartCut" style="display:none;">
- <span id="h5_down_process" style="display:none;"></span>
- <span id="h5_curTime" style="display:none;"></span>
- <span id="h5_totalTime" style="display:none;"></span>
- <span id="h5_cut_process" style="display:none;"></span>
- <a id="h5_first" style="display:none;"></a>
- <a id="h5_pre" style="display:none;"></a>
- <a id="h5_next" style="display:none;"></a>
- <a id="h5_last" style="display:none;"></a>
- <span id="h5_curPage" style="display:none;">1</span>
- <span id="h5_totalPage" style="display:none;">1</span>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script src="./jquery-1.7.1.min.js"></script>
- <script id="videonode" src="./codebase/webVideoCtrl.js"></script>
- <script src="./cn/demo.js"></script>
- <!-- 仅保留大华播放依赖 -->
- <script>
- </script>
- <script src="./module/PlayerControl.js"></script>
- <script src="./module/index.js"></script>
- <script>
- // 清理大华demo中的默认onload提示,防止关闭页面
- window.onload = null;
-
- // 全局错误处理:捕获 WebAssembly 内存错误
- window.addEventListener('error', function(event) {
- if (event.error && event.error.message &&
- (event.error.message.indexOf('Out of memory') !== -1 ||
- event.error.message.indexOf('WebAssembly') !== -1)) {
- console.error('[MEMORY ERROR] WebAssembly内存不足:', event.error);
- // 可以在这里添加用户提示或自动清理逻辑
- }
- });
-
- // 捕获未处理的 Promise 拒绝(WebAssembly 错误通常在这里)
- window.addEventListener('unhandledrejection', function(event) {
- if (event.reason && event.reason.message &&
- (event.reason.message.indexOf('Out of memory') !== -1 ||
- event.reason.message.indexOf('WebAssembly') !== -1)) {
- console.error('[MEMORY ERROR] WebAssembly内存不足 (Promise):', event.reason);
- event.preventDefault(); // 阻止默认的错误处理
-
- // 检查当前分屏模式
- var wndSel = document.querySelector('#device_ipc_content select[sel-for="onChangeWdnNum"]');
- var currentMode = wndSel ? parseInt(wndSel.value) : 1;
- var maxWindows = currentMode * currentMode;
-
- var errorMsg = '检测到内存不足错误。\n\n';
- if (maxWindows > 4) {
- errorMsg += '当前使用 ' + currentMode + 'x' + currentMode + ' 分屏模式(' + maxWindows + '个窗口),内存占用较高。\n\n';
- errorMsg += '建议:\n1. 切换到2x2分屏模式(4个窗口)\n2. 或刷新页面释放内存';
- } else {
- errorMsg += '建议刷新页面释放内存。';
- }
-
- if (confirm(errorMsg + '\n\n是否现在刷新页面?')) {
- window.location.reload();
- }
- }
- });
-
- // 监控内存使用情况(如果浏览器支持)
- if (performance && performance.memory) {
- setInterval(function() {
- var memory = performance.memory;
- var usedMB = (memory.usedJSHeapSize / 1048576).toFixed(2);
- var totalMB = (memory.totalJSHeapSize / 1048576).toFixed(2);
- var limitMB = (memory.jsHeapSizeLimit / 1048576).toFixed(2);
- var usagePercent = ((memory.usedJSHeapSize / memory.jsHeapSizeLimit) * 100).toFixed(2);
-
- // 如果内存使用超过80%,发出警告
- if (usagePercent > 80) {
- console.warn('[MEMORY WARNING] 内存使用率: ' + usagePercent + '% (' + usedMB + 'MB / ' + limitMB + 'MB)');
- }
- }, 10000); // 每10秒检查一次
- }
- </script>
- <script>
- function redirectToUrl(url) {
- // console.log(url);
- window.location.href = url;
- }
- function isDahuaBrand(brand) {
- if (!brand) return false;
- var b = (brand + '').toLowerCase();
- return b.indexOf('dahua') !== -1 || b.indexOf('大华') !== -1;
- }
- function isHikvisionBrand(brand) {
- if (!brand) return false;
- var b = (brand + '').toLowerCase();
- return b.indexOf('hik') !== -1 || b.indexOf('海康') !== -1 || b.indexOf('hikvision') !== -1;
- }
- function playDahuaCamera(cameraInfo) {
- console.log('[DAHUA] playDahuaCamera input:', cameraInfo);
- var dahuaDeviceList = document.querySelector('#device_ipc_content .h5-menu-list li');
- if (!dahuaDeviceList) {
- console.error('未找到大华摄像头播放容器');
- return;
- }
-
- // 检查当前分屏模式,支持多窗口播放
- var wndSel = document.querySelector('#device_ipc_content select[sel-for="onChangeWdnNum"]');
- var currentMode = wndSel ? parseInt(wndSel.value) : 1;
- var maxWindows = currentMode * currentMode; // 1x1=1, 2x2=4, 3x3=9, 4x4=16
-
- console.log('[DAHUA] Current window mode:', currentMode + 'x' + currentMode + ' (' + maxWindows + ' windows)');
-
- // 优化内存管理:只清理当前要播放的窗口,而不是所有窗口
- // 这样可以支持多窗口同时播放
- try {
- // 检查是否有太多窗口在播放,如果超过限制则提示
- var playWrap = document.querySelector('#device_ipc_content .h5-play-wrap');
- if (playWrap) {
- var activePlayers = playWrap.querySelectorAll('div[wnd-index][style*="display: block"]');
- var activeCount = activePlayers.length;
-
- // 如果当前模式需要更多窗口,检查内存是否足够
- if (maxWindows > 4 && activeCount >= 4) {
- console.warn('[DAHUA] Warning: Multiple windows detected. Memory usage may be high.');
- }
- }
- } catch(e) {
- console.warn('[DAHUA] Error checking active players:', e);
- }
-
- // 等待一小段时间确保DOM更新完成
- setTimeout(function() {
- try {
- // 设置摄像头信息
- dahuaDeviceList.setAttribute('data-ip', cameraInfo.ip || '');
- dahuaDeviceList.setAttribute('data-port', cameraInfo.port || '80');
- dahuaDeviceList.setAttribute('data-user', cameraInfo.username || 'admin');
- dahuaDeviceList.setAttribute('data-pswd', cameraInfo.password || '');
- var nameSpan = dahuaDeviceList.querySelector('.deviceName');
- if (nameSpan) {
- nameSpan.innerText = cameraInfo.classname || '摄像头';
- }
-
- // 触发播放
- var testBtn = dahuaDeviceList.querySelector('.testButton');
- if (testBtn) {
- console.log('[DAHUA] Triggering playback for window mode:', currentMode + 'x' + currentMode);
- testBtn.click();
- }
-
- // 如果用户选择了多窗口模式,保持该模式
- // 不需要强制改为单窗口,支持多窗口播放
- if (wndSel && typeof onChangeWdnNum === 'function') {
- // 确保窗口布局正确
- onChangeWdnNum();
- }
- } catch(e) {
- console.error('[DAHUA] Error playing camera:', e);
- if (e.message && (e.message.indexOf('Out of memory') !== -1 ||
- e.message.indexOf('WebAssembly') !== -1)) {
- var errorMsg = '内存不足,无法播放视频。\n\n';
- if (maxWindows > 4) {
- errorMsg += '建议:\n1. 切换到2x2或更少的分屏模式\n2. 刷新页面释放内存\n3. 使用子码流(降低分辨率)';
- } else {
- errorMsg += '建议:\n1. 刷新页面释放内存\n2. 减少同时播放的摄像头数量';
- }
- alert(errorMsg);
- }
- }
- }, 100); // 减少延迟,提高响应速度
- }
- function playHikvisionCamera(cameraInfo) {
- console.log('[HIKVISION] playHikvisionCamera input:', cameraInfo);
- if (!cameraInfo.ip) {
- console.error('摄像头IP地址为空,无法登录海康');
- alert('摄像头信息不完整,无法登录海康摄像头');
- return;
- }
- clickLogout();
- setTimeout(function () {
- $('#loginip').val(cameraInfo.ip || '');
- $('#port').val(cameraInfo.port || '');
- $('#username').val(cameraInfo.username || '');
- $('#password').val(cameraInfo.password || '');
- clickLogin(cameraInfo.ip);
- }, 200);
- }
- // 当前选中的校区
- var currentCampus = '临安校区';
- // 切换校区
- function switchCampus(campus) {
- currentCampus = campus;
- // 更新tab样式
- if (campus === '西溪校区') {
- $('#xqxq-tab').addClass('campus-tab-active');
- $('#laxq-tab').removeClass('campus-tab-active');
- } else {
- $('#laxq-tab').addClass('campus-tab-active');
- $('#xqxq-tab').removeClass('campus-tab-active');
- }
- // 重新加载摄像头列表
- loadCameraList(campus);
- }
- // 加载摄像头列表
- function loadCameraList(campus) {
- var requestBody = new FormData();
- var requestData = {
- condition: {
- xq: campus
- },
- requiredItems: "jxlmc,sxtmc,ipdz,dk,zh,mm,xq,pp"
- };
- requestBody.append('requestBody', JSON.stringify(requestData));
-
- $.ajax({
- url: 'http://172.16.0.63:28080/dmp-res-api/restservice/20241028113645823630',
- type: 'POST',
- contentType: false,
- data: requestBody,
- processData: false,
- success: function(response) {
- let a = response;
- console.log(a);
- let obj = [];
- for (let i = 0; i < a.resultData.length; i++) {
- //判断data中是否有值,没有就添加,有就跳过
- let flag = false;
- let index = 0;
- for (let j = 0; j < obj.length; j++) {
- if (obj[j].buildname == a.resultData[i].jxlmc) {
- flag = true;
- index = j;
- break;
- }
- }
- if (flag) {
- obj[index].classes.push({
- classname: a.resultData[i].sxtmc,
- ip: a.resultData[i].ipdz || '',
- port: a.resultData[i].dk || '',
- username: a.resultData[i].zh || '',
- password: a.resultData[i].mm || '',
- brand: a.resultData[i].pp || '',
- campus: a.resultData[i].xq || campus
- })
- }
- if (!flag) {
- obj.push({
- buildname: a.resultData[i].jxlmc,
- classes: [{
- classname: a.resultData[i].sxtmc,
- ip: a.resultData[i].ipdz || '',
- port: a.resultData[i].dk || '',
- username: a.resultData[i].zh || '',
- password: a.resultData[i].mm || '',
- brand: a.resultData[i].pp || '',
- campus: a.resultData[i].xq || campus
- }]
- })
- }
- }
- console.log(obj)
- app.$data.message = obj;
- },
- error: function(xhr, status, error) {
- console.error('Error:', error);
- }
- });
- }
- var app = new Vue({
- el: '#menu-container',
- data: {
- message:[],
- },
- mounted: function () {
- console.log("mounted");
- },
- created: function(){
- console.log("created");
- // 初始化校区tab样式
- $('#laxq-tab').addClass('campus-tab-active');
- $('#xqxq-tab').removeClass('campus-tab-active');
- // 加载默认校区(临安校区)的摄像头列表
- loadCameraList('临安校区');
- },
- methods: {
- handleClick(cameraInfo) {
- // cameraInfo包含:ip, port, username, password, brand等
- // 所有信息都从接口获取,不再使用写死的默认值
- if (!cameraInfo.ip) {
- console.error('摄像头IP地址为空,无法登录');
- alert('摄像头信息不完整,无法登录');
- return;
- }
- console.log('[CLICK] cameraInfo:', cameraInfo);
- if (isDahuaBrand(cameraInfo.brand)) {
- console.log('[ROUTE] DAHUA area');
- setTimeout(function () {
- playDahuaCamera(cameraInfo);
- }, 100);
- } else if (isHikvisionBrand(cameraInfo.brand)) {
- console.log('[ROUTE] HIKVISION area');
- setTimeout(function () {
- playHikvisionCamera(cameraInfo);
- }, 100);
- } else {
- console.log('[ROUTE] default to HIKVISION when brand unknown');
- setTimeout(function () {
- playHikvisionCamera(cameraInfo);
- }, 100);
- }
- }
- }
- })
- </script>
- <style>
- /* 设置整个页面为100%宽高 */
- html, body {
- width: 100%;
- height: 100%;
- margin: 0;
- padding: 0;
- overflow: hidden;
- }
- /* 覆盖外部CSS的固定尺寸,改为100%自适应 */
- .main {
- width: 100% !important;
- height: 100% !important;
- display: flex;
- flex-direction: column;
- background-size: cover;
- background-position: center;
- }
- .main-header {
- width: 100% !important;
- height: auto !important;
- min-height: 105px;
- flex-shrink: 0;
- background-size: cover;
- background-position: center;
- }
- .main-container {
- width: 100% !important;
- height: 100% !important;
- flex: 1;
- display: flex;
- overflow: hidden;
- min-height: 0;
- padding: 0 16px 16px 16px;
- box-sizing: border-box;
- }
- /* 左侧菜单容器 - 固定宽度,高度100% */
- .menu-container {
- width: 468px !important;
- height: 100% !important;
- flex-shrink: 0;
- border: 1px solid #056AE7;
- margin-right: 5px;
- overflow: auto;
- display: flex;
- flex-direction: column;
- box-sizing: border-box;
- }
- .campus-tabs {
- flex-shrink: 0;
- }
- .title-item {
- flex-shrink: 0;
- }
- /* 右侧视频容器 - 自适应剩余空间 */
- .video-container {
- width: 100% !important;
- height: 100% !important;
- flex: 1;
- padding: 0 8px 8px 8px;
- display: flex;
- flex-direction: column;
- gap: 12px;
- overflow: hidden;
- min-height: 0;
- border: 1px solid #056AE7;
- margin-left: 5px;
- box-sizing: border-box;
- }
- .video-title {
- display: flex;
- align-items: center;
- justify-content: space-between;
- flex-shrink: 0;
- }
- .hikvision-block, .dahua-block {
- background: rgba(0,0,0,0.15);
- padding: 8px;
- border: 1px solid rgba(255,255,255,0.1);
- flex: 1;
- display: flex;
- flex-direction: column;
- min-height: 0;
- overflow: hidden;
- }
- .hikvision-body {
- margin-top: 8px;
- flex: 1;
- display: flex;
- flex-direction: column;
- min-height: 0;
- }
- .hikvision-body .plugin {
- flex: 1;
- background: #000;
- min-height: 0;
- width: 100%;
- }
- /* 大华播放区 - 自适应高度 */
- #dahua-player-shell {
- flex: 1;
- min-height: 0;
- display: flex;
- flex-direction: column;
- }
- #dahua-player-shell .content {
- flex: 1;
- min-height: 0;
- display: flex;
- }
- #dahua-player-shell .content .h5-left:nth-child(2) {
- flex: 1;
- min-height: 0;
- display: flex;
- flex-direction: column;
- }
- #dahua-player-shell .h5-play-wrap {
- flex: 1;
- min-height: 0;
- width: 100% !important;
- height: 100% !important;
- }
- #dahua-player-shell .h5-play-wrap div[wnd-index] {
- height: 100%;
- width: 100%;
- }
- /* 确保class-container自适应 */
- .class-container {
- width: 100% !important;
- max-width: 100%;
- box-sizing: border-box;
- }
- /* 移除h5-left和h5-right的margin-right */
- .h5-left, .h5-right {
- margin-right: 0 !important;
- }
- /* 移除container的padding */
- .container {
- padding: 0 !important;
- }
- /* 导航栏适配2560*1440屏幕(从1920*1080按1.3333比例缩放) */
- .main-header {
- position: relative;
- }
- .sy, .jyjx, .zsxx, .jyxx, .zwhq, .jsxx, .xsxx, .shfw, .jxxc {
- width: 164px !important;
- height: 56px !important;
- top: 32px !important;
- background-size: cover !important;
- background-position: center center !important;
- }
- .sy {
- left: 5.3516vw !important; /* 137px / 2560px * 100 */
- }
- .jyjx {
- left: 12.4609vw !important; /* 319px / 2560px * 100 */
- }
- .zsxx {
- left: 19.5313vw !important; /* 500px / 2560px * 100 */
- }
- .jyxx {
- left: 26.6016vw !important; /* 681px / 2560px * 100 */
- }
- .zwhq {
- left: 63.3203vw !important; /* 1621px / 2560px * 100 */
- }
- .jsxx {
- left: 70.4297vw !important; /* 1803px / 2560px * 100 */
- }
- .xsxx {
- left: 77.5vw !important; /* 1984px / 2560px * 100 */
- }
- .shfw {
- left: 84.5703vw !important; /* 2165px / 2560px * 100 */
- }
- .jxxc {
- left: 91.6797vw !important; /* 2347px / 2560px * 100 */
- }
- .sy div, .jyjx div, .zsxx div, .jyxx div, .zwhq div, .jsxx div, .xsxx div, .shfw div, .jxxc div {
- width: 164px !important;
- height: 56px !important;
- line-height: 56px !important;
- font-size: 27px !important;
- }
- </style>
- </body>
- </html>
|