页面显示就不放了 直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="./css/public.css">
<link rel="stylesheet" href="./css/come.css">
<script src="./js/jquery-1.11.3.js"></script>
<script src="./js/navcal.js"></script>
<script src="./js/come.js"> </script>
<style>
#alertMessage {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px 30px;
background: #fff;
font-size: 0.32rem;
text-align: center;
z-index: 999;
display: none;
width: 800px;
height: 400px;
border-radius: 30px;
line-height: 400px;
font-size: 60px;
}
</style>
</head>
<body>
<div class="bgbox">
<div class="box" id="body">
<div class="header">
<div style=" display: flex;">
<img class="carimg" src="" alt="">
<div id="fsb" class="headertitle">测试大屏</div>
<div class="datename">
<div class="yermon"></div>
<div class="week"><span class="weekdate"></span> </div>
</div>
<div class="borderline"></div>
<div class="tadaytime"></div>
<img class="icon" src="" alt="">
</div>
<div class="linetitle">
<div class="station">
<div class="roadw">线路
<span class="roadhen"></span>
站点</div>
<div class="timew">时间</div>
</div>
</div>
</div>
<div class="content">
<div class="box-ul">
<div class="roadlinename">
<div class="item1">线路名</div>
<div class="item3">
<div class="timeheader"><span class="circle">首</span><span>06:00</span><span class="heng"></span><span
class="circle">末</span><span>22:00</span><span class="minits">30分钟/班</span></div>
</div>
</div>
<div class="roadinfoline">
<div class="roadinfoitem">站点</div>
</div>
</div>
<div class="box-ul">
<div class="roadlinename">
<div class="item1">线路名</div>
<div class="item3">
<div class="timeheader"><span class="circle">首</span><span>06:00</span><span class="heng"></span><span
class="circle">末</span><span>22:00</span><span class="minits">30分钟/班</span></div>
</div>
</div>
<div class="roadinfoline">
<div class="roadinfoitem">站点</div>
</div>
</div>
<div class="box-ul">
<div class="roadlinename">
<div class="item1">线路名</div>
<div class="item3">
<div class="timeheader"><span class="circle">首</span><span>06:00</span><span class="heng"></span><span
class="circle">末</span><span>22:00</span><span class="minits">30分钟/班</span></div>
</div>
</div>
<div class="roadinfoline">
<div class="roadinfoitem">站点</div>
</div>
</div>
</div>
</div>
<div id="alertMessage"></div><!-- 弹窗 -->
</div>
<script>
window.onload = function () {
windowResize();
window.addEventListener('resize', windowResize);
return () => {
cancelWindowResize();
window.removeEventListener('resize', windowResize);
};
function windowResize() {
let cw = 2160,
ch = 3840;
let body = document.getElementById('body');
body.style.width = `${cw}px`;
body.style.height = `${ch}px`;
let w = window.innerWidth;
console.log(w,'ooo')
let wr = w / ch;
console.log(wr)
body.style.transform = `scale(${wr})`;
body.style.overflow = 'hidden';
}
function cancelWindowResize() {
let body = document.getElementById('body');
body.style.transform = 'none';
body.style.margin = '0';
body.style.width = '100%';
body.style.height = '100%';
}
}
</script>
</body>
</html>
``
样式太多 只放了旋转的样式 具体可私信
```javascript
.box {
background: #6B0027;
}
.bgbox {
transform: rotate(-90deg);
transform-origin: left top;
width: 100vh;
height: 100vw;
position: fixed;
top: 100%;
left: ;
}