样式优化

This commit is contained in:
BianLzhaoMin 2025-06-13 09:41:18 +08:00
parent b1ef4db7c6
commit 0393c7b79d
2 changed files with 37 additions and 9 deletions

View File

@ -52,7 +52,7 @@ body {
/* 左上角滚动盒子 */
.scroll-box {
top: 15px;
top: 50px;
left: 15px;
width: 520px;
height: 200px;
@ -136,7 +136,7 @@ body {
/* 左下角图例 */
.legend-box {
/* bottom: 15px; */
top: 15px;
top: 50px;
left: 15px;
width: 140px;
height: 280px;
@ -395,7 +395,7 @@ body {
justify-content: space-between;
align-items: center;
position: absolute;
top: 15px;
top: 50px;
right: 60px;
z-index: 999;
}
@ -428,7 +428,7 @@ body {
.full-screen-btn {
position: absolute;
top: 15px;
top: 50px;
right: 15px;
z-index: 999;
cursor: pointer;
@ -441,7 +441,7 @@ body {
/* 中间标题 */
.center-title-box {
position: absolute;
/* position: absolute;
top: 0;
left: 50%;
padding: 0 12px;
@ -451,9 +451,30 @@ body {
font-weight: bold;
color: #fff;
letter-spacing: 6px;
font-family: "Alibaba PuHuiTi R";
font-family: "Alibaba PuHuiTi R"; */
/* 加一个浅蓝色渐变背景颜色 */
/* background: linear-gradient(to right, #c9d6ff, #e2e2e2);
color: #063268;
border-radius: 2px; */
position: absolute;
top: 0;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 999;
font-size: 32px;
font-weight: bold;
letter-spacing: 6px;
font-family: "Alibaba PuHuiTi R";
background: linear-gradient(to right, #c9d6ff, #e2e2e2);
color: #063268;
border-radius: 2px;
padding: 0 12px; /* 内边距 */
/* 新增关键样式 */
max-width: 100%; /* 最大宽度不超过父盒子 */
box-sizing: border-box; /* 让 padding 计算在 max-width 内 */
white-space: nowrap; /* 防止文字换行(可选) */
overflow: hidden; /* 防止内容溢出(可选) */
text-overflow: ellipsis; /* 超出时显示省略号(可选) */
}

View File

@ -32,11 +32,21 @@
.BMap_bubble_pop .BMap_bubble_arrow {
display: none !important;
}
.center-title-box {
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="main-box">
<!-- 中间标题 -->
<div class="center-title-box">
</div>
<!-- 地图容器 -->
<div id="map-box"></div>
@ -121,11 +131,8 @@
<img src="../../img/digitalSignage/full-screen.png" alt="" />
</div>
<!-- 中间标题 -->
<div class="center-title-box">
</div>
</div>
</body>
<script src="../../js/synthesisQuery/digitalSignage.js" charset="UTF-8" type="text/javascript"></script>