zS/go-viee-fetch-Demo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style【有限空间】：修改地图的Tab样式

Browse Source
This commit is contained in:
Free-sss 2025-09-05 17:11:30 +08:00
parent d903c39165
commit 8af12820bd
3 changed files with 27 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/packages/components/Charts/ConfinedSpace/Map/assets/selected.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
src/packages/components/Charts/ConfinedSpace/Map/assets/unselect.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

120
src/packages/components/Charts/ConfinedSpace/Map/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="go-iframe-container" :style="{ width: w + 'px', height: h + 'px' }">
<!-- 按钮容器，绝对定位在左上角 -->
<!-- 按钮容器，绝对定位在右上角 -->
<div class="button-container-wrapper">
<div class="button-container">
<div v-for="btn in buttons" :key="btn.id" :class="['button', { active: btn.id === activeButtonId }]"
@ -154,128 +154,56 @@ function callIframeMethod(methodName: string, ...args: any[]) {
.go-iframe-container {
overflow: hidden;
position: relative; // 为内部的绝对定位元素提供定位上下文
--inactive-border-color: #337ab7;
--inactive-text-color: #a0c0e0;
--inactive-bg-color: rgba(10, 25, 40, 0.7);
--active-border-color: #f7b731;
--active-text-color: #f7b731;
--active-text-shadow: 0 0 8px rgba(247, 183, 49, 0.7);
/* 边框（L型括号）的尺寸参数 */
--bracket-thickness: 3px;
/* 括号线条粗细 */
--bracket-arm-length: 8px;
/* 括号横向臂长 */
--vertical-segment-height: 8px;
/* 括号垂直部分顶部和底部的长度，中间留空 */
}
.button-container-wrapper {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
z-index: 10;
}
.button-container {
display: flex;
flex-direction: column;
gap: 10px;
width: fit-content;
flex-direction: row;
// gap: 10px;
// width: 400px;
height: 50px;
padding: 0;
border-radius: 5px;
}
.button {
position: relative;
padding: 12px 30px;
font-size: 1.1em;
font-weight: bold;
text-align: center;
margin: 1px;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 0px;
width: 200px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
/* 平滑过渡效果 */
overflow: hidden;
background-image: url('./assets/unselect.png');
background-size: 100% 100%;
background-repeat: no-repeat;
color: rgb(193, 193, 193);
// background-color: bisque;
--_current-border-color: var(--inactive-border-color);
--_current-text-color: var(--inactive-text-color);
--_current-text-shadow: none;
background-color: var(--inactive-bg-color);
/* 按钮背景色 */
color: var(--_current-text-color);
text-shadow: var(--_current-text-shadow);
/* 按钮本体的细线边框：顶部、底部、右侧 */
border-top: 1px solid var(--_current-border-color);
border-bottom: 1px solid var(--_current-border-color);
border-right: 1px solid var(--_current-border-color);
border-left: none;
/* 左侧边框由伪元素绘制 */
}
/* 激活状态的样式 */
.button.active {
--_current-border-color: var(--active-border-color);
--_current-text-color: var(--active-text-color);
--_current-text-shadow: var(--active-text-shadow);
color: var(--_current-text-color);
text-shadow: var(--_current-text-shadow);
border-top-color: var(--_current-border-color);
border-bottom-color: var(--_current-border-color);
border-right-color: var(--_current-border-color);
}
.button::before {
content: '';
position: absolute;
top: -1px;
left: -1px;
width: var(--bracket-arm-length);
height: calc(100% + 2px);
border-color: var(--_current-border-color);
border-style: solid;
/* border-width: top right bottom left */
border-width: var(--bracket-thickness) 0 var(--bracket-thickness) var(--bracket-thickness);
/* 使用线性渐变背景来创建左侧垂直部分的断开效果 */
background: linear-gradient(to bottom,
var(--_current-border-color) 0%,
var(--_current-border-color) var(--vertical-segment-height),
transparent var(--vertical-segment-height),
transparent calc(100% - var(--vertical-segment-height)),
var(--_current-border-color) calc(100% - var(--vertical-segment-height)),
var(--_current-border-color) 100%) no-repeat left center / var(--bracket-thickness) 100%;
transition: border-color 0.3s ease, background 0.3s ease;
/* 过渡颜色变化 */
}
.button::after {
content: '';
position: absolute;
top: -1px;
right: -1px;
/* 向右偏移1px，与父元素的右边缘对齐 */
width: var(--bracket-arm-length);
height: calc(100% + 2px);
border-color: var(--_current-border-color);
border-style: solid;
/* 伪元素的边框用于绘制 L 型括号的水平部分和右侧垂直部分的厚度 */
/* border-width: top right bottom left */
border-width: var(--bracket-thickness) var(--bracket-thickness) var(--bracket-thickness) 0;
/* 使用线性渐变背景来创建右侧垂直部分的断开效果 */
background: linear-gradient(to bottom,
var(--_current-border-color) 0%,
var(--_current-border-color) var(--vertical-segment-height),
transparent var(--vertical-segment-height),
transparent calc(100% - var(--vertical-segment-height)),
var(--_current-border-color) calc(100% - var(--vertical-segment-height)),
var(--_current-border-color) 100%) no-repeat right center / var(--bracket-thickness) 100%;
transition: border-color 0.3s ease, background 0.3s ease;
background-image: url('./assets/selected.png');
color: #eee;
}
/* 非激活状态按钮的悬停效果 */
.button:not(.active):hover {
filter: brightness(1.1);
/* 略微提高亮度 */
}
.iframe-content {
@ -283,4 +211,8 @@ function callIframeMethod(methodName: string, ...args: any[]) {
height: 100%;
border: none;
}
.button:nth-child(1) {
transform: translateX(30px); // 将第二个按钮向左移动
}
</style>