bonus
/
gz_digital_signage
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

样式优化

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/main/resources/static/css/synthesisQuery/digitalSignage.css
View File

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

13
src/main/resources/static/pages/synthesisQuery/digitalSignage.html
View File

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